mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-03-11 21:26:55 +00:00
416 lines
9 KiB
CSS
416 lines
9 KiB
CSS
/* src/WindowFilter.css */
|
|
#bm-window-filter p svg {
|
|
display: inline;
|
|
height: 1em;
|
|
fill: white;
|
|
}
|
|
#bm-filter-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1em 3ch;
|
|
}
|
|
.bm-filter-color {
|
|
width: fit-content;
|
|
max-width: 35ch;
|
|
background-color: rgba(21, 48, 99, 0.9);
|
|
border-radius: 1em;
|
|
padding: 0.5em;
|
|
gap: 1ch;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
.bm-filter-color:hover,
|
|
.bm-filter-color:focus-within {
|
|
background-color: rgba(17, 40, 85, 0.9);
|
|
}
|
|
.bm-filter-container-rgb {
|
|
display: block;
|
|
border: thick double darkslategray;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding: 1ch;
|
|
}
|
|
.bm-filter-color[data-id="-2"] .bm-filter-container-rgb {
|
|
background:
|
|
conic-gradient(
|
|
#aa0000 0%,
|
|
#aaaa00 16.6%,
|
|
#00aa00 33.3%,
|
|
#00aaaa 50%,
|
|
#0000aa 66.6%,
|
|
#aa00aa 83.3%,
|
|
#aa0000 100%);
|
|
}
|
|
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb {
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8" width="1em" height="1em"><path d="M0,0V8H16V16H8V0" fill="rgba(0,0,0,0.5)"/></svg>') repeat;
|
|
background-color: transparent !important;
|
|
}
|
|
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg {
|
|
fill: white !important;
|
|
}
|
|
.bm-filter-color[data-id="0"] .bm-filter-container-rgb {
|
|
background-color: transparent !important;
|
|
}
|
|
#bm-window-filter .bm-filter-container-rgb button {
|
|
padding: 0.75em 0.5ch;
|
|
}
|
|
.bm-filter-container-rgb svg {
|
|
width: 4ch;
|
|
}
|
|
.bm-filter-color > .bm-flex-between {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
}
|
|
.bm-filter-color small {
|
|
font-size: 0.75em;
|
|
}
|
|
#bm-window-filter .bm-filter-color.bm-color-hide {
|
|
display: none;
|
|
}
|
|
.bm-windowed #bm-filter-flex {
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
}
|
|
.bm-windowed .bm-filter-color {
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.bm-windowed .bm-filter-container-rgb {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 0.5ch;
|
|
align-items: center;
|
|
padding: 0.1em 0.5ch;
|
|
border: none;
|
|
border-radius: 1em;
|
|
}
|
|
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
|
|
padding: 0.5em 0.25ch;
|
|
}
|
|
.bm-windowed .bm-filter-container-rgb svg {
|
|
width: 3ch;
|
|
}
|
|
.bm-windowed .bm-filter-color h2 {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
/* src/WindowWizard.css */
|
|
#bm-wizard-tlist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
#bm-wizard-tlist > .bm-container {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
background-color: rgba(21, 48, 99, 0.9);
|
|
border-radius: 1em;
|
|
padding: 0.5em;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
#bm-wizard-tlist > .bm-container:hover,
|
|
#bm-wizard-tlist > .bm-container:focus-within {
|
|
background-color: rgba(17, 40, 85, 0.9);
|
|
}
|
|
#bm-wizard-tlist .bm-wizard-template-container-image {
|
|
height: 100%;
|
|
font-size: xxx-large;
|
|
}
|
|
#bm-wizard-tlist .bm-wizard-template-container-flavor {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
}
|
|
|
|
/* src/confettiManager.css */
|
|
div:has(> confetti-piece) {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
confetti-piece {
|
|
position: absolute;
|
|
top: -10px;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
background: currentColor;
|
|
transform: translate3d(var(--x), -10vh, 0) rotate(var(--rot));
|
|
animation: fall var(--duration) linear var(--delay);
|
|
will-change: transform;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes fall {
|
|
to {
|
|
transform: translate3d(var(--x), 110vh, 0) rotate(calc(var(--rot) + 720deg));
|
|
}
|
|
}
|
|
|
|
/* src/overlay.css */
|
|
.bm-screenreader {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.bm-window {
|
|
position: fixed;
|
|
background-color: rgba(21, 48, 99, 0.9);
|
|
color: white;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
z-index: 9000;
|
|
transition: all 0.3s ease, transform 0s;
|
|
top: 75px;
|
|
left: 60px;
|
|
width: auto;
|
|
max-height: fit-content;
|
|
max-width: calc(100% - 135px);
|
|
font-family:
|
|
"Roboto Mono",
|
|
"Courier New",
|
|
"Monaco",
|
|
"DejaVu Sans Mono",
|
|
monospace,
|
|
"Arial";
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.bm-window.bm-windowed {
|
|
max-width: 300px;
|
|
}
|
|
.bm-dragbar {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 0.5ch;
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue"/></svg>') repeat;
|
|
cursor: grab;
|
|
width: 100%;
|
|
height: fit-content;
|
|
}
|
|
.bm-dragbar.bm-dragging {
|
|
cursor: grabbing;
|
|
}
|
|
.bm-window:has(.bm-dragbar.bm-dragging) {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
.bm-dragbar.bm-dragging {
|
|
pointer-events: auto;
|
|
}
|
|
.bm-favicon {
|
|
display: inline-block;
|
|
height: 2.5em;
|
|
margin-right: 1ch;
|
|
vertical-align: middle;
|
|
}
|
|
.bm-window h1 {
|
|
display: inline-block;
|
|
font-size: x-large;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
.bm-dragbar h1 {
|
|
font-size: 1.2em;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-shadow:
|
|
3px 0px rgba(21, 48, 99, 0.5),
|
|
-3px 0px rgba(21, 48, 99, 0.5),
|
|
0px 3px rgba(21, 48, 99, 0.5),
|
|
0px -3px rgba(21, 48, 99, 0.5),
|
|
3px 3px rgba(21, 48, 99, 0.5),
|
|
-3px 3px rgba(21, 48, 99, 0.5),
|
|
3px -3px rgba(21, 48, 99, 0.5),
|
|
-3px -3px rgba(21, 48, 99, 0.5);
|
|
}
|
|
.bm-dragbar div:has(h1) {
|
|
display: contents;
|
|
}
|
|
.bm-window h2 {
|
|
display: inline-block;
|
|
font-size: larger;
|
|
font-weight: 700;
|
|
vertical-align: middle;
|
|
}
|
|
.bm-window h3 {
|
|
display: inline-block;
|
|
font-size: large;
|
|
font-weight: 700;
|
|
}
|
|
.bm-container.bm-center-vertically {
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.bm-container {
|
|
margin: 0.5em 0;
|
|
}
|
|
.bm-window button {
|
|
background-color: #144eb9;
|
|
border-radius: 1em;
|
|
padding: 0 0.75ch;
|
|
}
|
|
.bm-window button:hover,
|
|
.bm-window button:focus-visible {
|
|
background-color: #1061e5;
|
|
}
|
|
.bm-window button:active,
|
|
.bm-window button:disabled {
|
|
background-color: #2e97ff;
|
|
}
|
|
.bm-window button:disabled,
|
|
.bm-window button:disabled {
|
|
text-decoration: line-through;
|
|
cursor: not-allowed;
|
|
}
|
|
.bm-button-circle {
|
|
border: white 1px solid;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
line-height: 1em;
|
|
padding: 0 !important;
|
|
}
|
|
.bm-button-pin {
|
|
vertical-align: middle;
|
|
}
|
|
.bm-button-pin svg {
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
fill: #111;
|
|
}
|
|
.bm-window button.bm-button-trans {
|
|
background-color: unset;
|
|
}
|
|
.bm-button-trans.bm-button-hover-white:hover,
|
|
.bm-button-trans.bm-button-hover-white:focus {
|
|
background-color: rgba(255, 255, 255, 0.17);
|
|
}
|
|
.bm-button-trans.bm-button-hover-white:active {
|
|
background-color: rgba(255, 255, 255, 0.22);
|
|
}
|
|
.bm-button-trans.bm-button-hover-black:hover,
|
|
.bm-button-trans.bm-button-hover-black:focus {
|
|
background-color: rgba(0, 0, 0, 0.17);
|
|
}
|
|
.bm-button-trans.bm-button-hover-black:active {
|
|
background-color: rgba(0, 0, 0, 0.22);
|
|
}
|
|
input[type=number].bm-input-coords {
|
|
appearance: auto;
|
|
-moz-appearance: textfield;
|
|
width: 5.5ch;
|
|
margin-left: 1ch;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
padding: 0 0.5ch;
|
|
font-size: small;
|
|
}
|
|
input[type=number].bm-input-coords::-webkit-outer-spin-button,
|
|
input[type=number].bm-input-coords::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
div:has(> .bm-input-file) > button {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.bm-input-file,
|
|
input[type=file] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
position: absolute !important;
|
|
left: -9999px !important;
|
|
top: -9999px !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
opacity: 0 !important;
|
|
z-index: -9999 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
.bm-window select {
|
|
color: white;
|
|
background-color: #144eb9;
|
|
border-radius: 1em;
|
|
padding: 0 0.5ch;
|
|
}
|
|
.bm-window label:has(input[type=checkbox]) {
|
|
display: flex;
|
|
width: fit-content;
|
|
gap: 1ch;
|
|
}
|
|
.bm-window input[type=checkbox] {
|
|
width: 1em;
|
|
}
|
|
.bm-window-content {
|
|
overflow: hidden;
|
|
transition: height 300ms cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.bm-window textarea {
|
|
font-size: small;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
padding: 0 0.5ch;
|
|
height: 5.25em;
|
|
width: 100%;
|
|
}
|
|
.bm-window a:not(:has(*)) {
|
|
text-decoration: underline;
|
|
}
|
|
.bm-window small {
|
|
font-size: x-small;
|
|
color: lightgray;
|
|
}
|
|
.bm-window ul li {
|
|
list-style: disc;
|
|
margin-left: 5ch;
|
|
}
|
|
.bm-window .bm-container.bm-scrollable {
|
|
max-height: calc(80vh - 150px);
|
|
overflow: auto;
|
|
}
|
|
.bm-flex-between {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5ch;
|
|
}
|
|
.bm-flex-center {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5ch;
|
|
}
|
|
.bm-ascii {
|
|
white-space: pre;
|
|
letter-spacing: 0;
|
|
line-height: 1 !important;
|
|
font-size: 1.6em;
|
|
font-family: monospace;
|
|
}
|
|
.bm-container:not(#bm-window-main .bm-container) {
|
|
margin: 0.25em 0;
|
|
}
|
|
.bm-windowed h1:not(#bm-window-main h1) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* src/main.css */
|