818 lines
16 KiB
CSS
818 lines
16 KiB
CSS
:root {
|
|
--ink: #243044;
|
|
--muted: #6f7b91;
|
|
--paper: #fff7e8;
|
|
--panel: rgba(255, 248, 232, .94);
|
|
--panel-solid: #fff8e9;
|
|
--panel-2: #ffeec9;
|
|
--line: #2d3c50;
|
|
--line-soft: rgba(45, 60, 80, .18);
|
|
--pink: #ff85b3;
|
|
--pink-dark: #f05f98;
|
|
--mint: #73d6a4;
|
|
--sky: #77c9ff;
|
|
--sun: #ffd66e;
|
|
--danger: #ff6b6b;
|
|
--shadow: 6px 6px 0 rgba(34, 45, 63, .14);
|
|
--hard-shadow: 4px 4px 0 rgba(34, 45, 63, .22);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background: #92d8ff;
|
|
font-family: "Courier New", "Monaco", "Lucida Console", ui-monospace, monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button, input, select, textarea { font: inherit; }
|
|
button { -webkit-tap-highlight-color: transparent; }
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: .48;
|
|
transform: none;
|
|
}
|
|
|
|
.app {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#worldCanvas {
|
|
display: block;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
image-rendering: pixelated;
|
|
cursor: grab;
|
|
background: #8cd4ff;
|
|
}
|
|
|
|
#worldCanvas.dragging { cursor: grabbing; }
|
|
#worldCanvas.placeCursor { cursor: copy; }
|
|
#worldCanvas.eraseCursor { cursor: not-allowed; }
|
|
|
|
.hud {
|
|
position: absolute;
|
|
z-index: 5;
|
|
background: var(--panel);
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.topHud {
|
|
top: 14px;
|
|
left: 14px;
|
|
right: 14px;
|
|
min-height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 12px 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: 900;
|
|
letter-spacing: .04em;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.logo span {
|
|
display: inline-block;
|
|
background: var(--pink);
|
|
border: 2px solid var(--line);
|
|
padding: 1px 6px;
|
|
margin-left: 6px;
|
|
font-size: 12px;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.subline {
|
|
margin-top: 3px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.authorCard {
|
|
width: 190px;
|
|
border: 2px solid var(--line);
|
|
background: #fffdf5;
|
|
padding: 6px 8px;
|
|
pointer-events: auto;
|
|
}
|
|
.authorCard span {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.authorCard input {
|
|
margin-top: 3px;
|
|
padding: 5px 6px;
|
|
border-width: 2px;
|
|
background: #fffaf0;
|
|
}
|
|
|
|
.clockCard {
|
|
width: 230px;
|
|
border: 2px solid var(--line);
|
|
background: #fffdf5;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.phaseLabel {
|
|
font-weight: 900;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.phaseBar {
|
|
margin-top: 6px;
|
|
height: 10px;
|
|
background: #dfe8f0;
|
|
border: 2px solid var(--line);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phaseBar span {
|
|
display: block;
|
|
width: 0%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ffd66e, #77c9ff, #6862e8);
|
|
}
|
|
|
|
.clockHint {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.edgeAdd {
|
|
position: absolute;
|
|
z-index: 8;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 56px;
|
|
height: 86px;
|
|
transform: translateY(-50%);
|
|
border: 3px solid var(--line);
|
|
border-left: 0;
|
|
border-radius: 0 18px 18px 0;
|
|
background: var(--pink);
|
|
color: white;
|
|
font-size: 42px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
box-shadow: var(--hard-shadow);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edgeAdd:hover { background: var(--pink-dark); }
|
|
.edgeAdd:active { transform: translateY(calc(-50% + 2px)); box-shadow: 2px 2px 0 rgba(34,45,63,.22); }
|
|
|
|
.toolHud {
|
|
right: 14px;
|
|
top: 116px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 7px;
|
|
padding: 9px;
|
|
}
|
|
|
|
.settingsPanel {
|
|
top: 142px;
|
|
right: 126px;
|
|
z-index: 6;
|
|
padding: 10px 12px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.iconButton,
|
|
button,
|
|
.ghostButton,
|
|
.tab,
|
|
.tool,
|
|
.segmented button {
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
background: #fffdf5;
|
|
color: var(--ink);
|
|
padding: 8px 11px;
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
box-shadow: 3px 3px 0 rgba(36, 48, 68, .16);
|
|
transition: transform .05s, box-shadow .05s, background .12s;
|
|
}
|
|
|
|
button:hover,
|
|
.ghostButton:hover,
|
|
.tab:hover,
|
|
.tool:hover,
|
|
.segmented button:hover { background: #fff1c8; }
|
|
|
|
button:active,
|
|
.ghostButton:active,
|
|
.tab:active,
|
|
.tool:active,
|
|
.segmented button:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 1px 1px 0 rgba(36, 48, 68, .16);
|
|
}
|
|
|
|
button.active,
|
|
.tab.active,
|
|
.tool.active,
|
|
.segmented button.active {
|
|
background: var(--sun);
|
|
box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 3px 3px 0 rgba(36,48,68,.18);
|
|
}
|
|
|
|
button.primary {
|
|
background: var(--mint);
|
|
color: #163a2a;
|
|
}
|
|
|
|
button.secondary { background: var(--panel-2); }
|
|
button.danger, .tool.danger, .iconButton.danger { background: #ffe4e4; color: #833232; }
|
|
button.danger.active, .iconButton.danger.active { background: var(--danger); color: #fffdf5; }
|
|
|
|
.divider {
|
|
height: 2px;
|
|
background: var(--line);
|
|
opacity: .22;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.infoHud {
|
|
right: 14px;
|
|
bottom: 14px;
|
|
width: min(360px, calc(100vw - 28px));
|
|
padding: 12px;
|
|
}
|
|
|
|
.selectedAsset {
|
|
font-weight: 900;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px dashed rgba(45,60,80,.25);
|
|
}
|
|
|
|
.tileInfo {
|
|
white-space: pre-wrap;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.studioDrawer {
|
|
position: absolute;
|
|
z-index: 7;
|
|
top: 0;
|
|
left: 0;
|
|
width: min(500px, calc(100vw - 20px));
|
|
height: 100vh;
|
|
background: var(--panel-solid);
|
|
border-right: 3px solid var(--line);
|
|
box-shadow: 10px 0 0 rgba(36, 48, 68, .12);
|
|
transform: translateX(-104%);
|
|
transition: transform .18s ease-out;
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
}
|
|
|
|
.studioDrawer.open { transform: translateX(0); }
|
|
|
|
.drawerHead {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 12px 8px;
|
|
border-bottom: 3px solid var(--line);
|
|
background: #ffe6f0;
|
|
}
|
|
|
|
.drawerHead h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.drawerHead p {
|
|
margin: 3px 0 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ghostButton {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
padding: 8px;
|
|
background: #fff2d0;
|
|
border-bottom: 3px solid var(--line);
|
|
}
|
|
|
|
.tab { padding: 8px 5px; font-size: 13px; }
|
|
|
|
.drawerBody {
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
background:
|
|
linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25%) 0 0/18px 18px,
|
|
var(--panel-solid);
|
|
}
|
|
|
|
.tabPanel { display: none; }
|
|
.tabPanel.active { display: block; }
|
|
|
|
.compactNameField { margin-bottom: 5px; }
|
|
.roleHintInline { margin: 0 0 10px; }
|
|
|
|
.card {
|
|
background: #fffdf5;
|
|
border: 2px solid var(--line);
|
|
box-shadow: 4px 4px 0 rgba(36,48,68,.12);
|
|
padding: 9px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stack > * + * { margin-top: 10px; }
|
|
.cardTitle {
|
|
font-weight: 950;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
font-size: 12px;
|
|
color: #3c4b60;
|
|
}
|
|
|
|
.field {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
input, select, textarea {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
background: #fffaf0;
|
|
color: var(--ink);
|
|
padding: 9px 10px;
|
|
outline: none;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(119,201,255,.35); }
|
|
textarea { resize: vertical; }
|
|
input[type="color"] { height: 39px; padding: 3px; }
|
|
input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
|
|
|
|
.twoCols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.segmented {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 7px;
|
|
}
|
|
|
|
.segmented button { font-size: 12px; padding: 8px 5px; }
|
|
|
|
.hint {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.editorCard { padding-bottom: 10px; }
|
|
.editorTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.sideSwitcher {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
.sideSwitcher button { padding: 6px 7px; font-size: 11px; }
|
|
|
|
.toolRow {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.editorActions {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
|
|
.toolRow input { margin: 0; }
|
|
.tool { padding: 7px 5px; font-size: 11px; }
|
|
|
|
#paintCanvas {
|
|
display: block;
|
|
width: min(100%, 330px);
|
|
margin: 0 auto;
|
|
aspect-ratio: 1 / 1;
|
|
image-rendering: pixelated;
|
|
border: 3px solid var(--line);
|
|
background:
|
|
linear-gradient(45deg, #f4ebdc 25%, transparent 25%) 0 0/16px 16px,
|
|
linear-gradient(45deg, transparent 75%, #f4ebdc 75%) 0 0/16px 16px,
|
|
#fffaf0;
|
|
cursor: crosshair;
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.compactSettings .twoCols { align-items: center; }
|
|
.toggleLine {
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.behaviorNote {
|
|
border: 2px dashed rgba(45,60,80,.22);
|
|
padding: 8px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.actionRow {
|
|
display: flex;
|
|
gap: 9px;
|
|
margin: 12px 0;
|
|
}
|
|
.actionRow.wrap { flex-wrap: wrap; }
|
|
.actionRow button { flex: 1; }
|
|
.lineageNote { min-height: 18px; color: var(--muted); font-size: 12px; }
|
|
|
|
.assetList { display: grid; gap: 10px; }
|
|
.assetCard {
|
|
display: grid;
|
|
grid-template-columns: 68px 1fr;
|
|
gap: 10px;
|
|
border: 2px solid var(--line);
|
|
background: #fff9e8;
|
|
padding: 8px;
|
|
box-shadow: 3px 3px 0 rgba(36,48,68,.12);
|
|
}
|
|
.assetCard.selected { background: #e6ffef; }
|
|
.assetPreview {
|
|
width: 64px;
|
|
height: 64px;
|
|
image-rendering: pixelated;
|
|
background: #fff3d9;
|
|
border: 2px solid var(--line);
|
|
}
|
|
.assetMeta strong { display: block; font-size: 14px; }
|
|
.assetMeta span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
|
|
.assetActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
.assetActions button { padding: 5px 7px; font-size: 11px; }
|
|
|
|
.modeGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.modeGrid button { padding: 8px 5px; font-size: 12px; }
|
|
|
|
.legend {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.legend span { display: flex; align-items: center; gap: 6px; }
|
|
.legend i {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--line);
|
|
}
|
|
.legend .water { background: #67b5d9; }
|
|
.legend .sand { background: #ead493; }
|
|
.legend .grass { background: #8bce76; }
|
|
.legend .highland { background: #a7be80; }
|
|
|
|
#dataBox { min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
|
|
|
|
.toast {
|
|
position: absolute;
|
|
z-index: 20;
|
|
left: 50%;
|
|
bottom: 22px;
|
|
transform: translateX(-50%);
|
|
background: #fffdf5;
|
|
border: 3px solid var(--line);
|
|
box-shadow: var(--hard-shadow);
|
|
padding: 10px 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
[hidden] { display: none !important; }
|
|
|
|
@media (max-width: 760px) {
|
|
.topHud { align-items: flex-start; flex-direction: column; right: 70px; }
|
|
.clockCard, .authorCard { width: 100%; }
|
|
.toolHud { top: auto; bottom: 122px; right: 10px; }
|
|
.infoHud { left: 10px; right: 10px; width: auto; }
|
|
.studioDrawer { width: calc(100vw - 18px); }
|
|
.toolRow { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
|
|
}
|
|
|
|
/* refinements */
|
|
.toolHud {
|
|
top: 142px;
|
|
right: 18px;
|
|
}
|
|
.edgeAdd {
|
|
top: calc(50% + 24px);
|
|
width: 62px;
|
|
height: 92px;
|
|
background: linear-gradient(180deg, #ff97c2, #ff75aa);
|
|
}
|
|
.studioDrawer {
|
|
width: min(520px, calc(100vw - 28px));
|
|
}
|
|
.drawerHead { background: #ffe1ef; }
|
|
.drawerBody {
|
|
background:
|
|
linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, transparent 1px) 0 0/20px 20px,
|
|
linear-gradient(0deg, rgba(255,255,255,.42) 0 1px, transparent 1px) 0 0/20px 20px,
|
|
#fff8e9;
|
|
}
|
|
.card {
|
|
border-width: 3px;
|
|
box-shadow: 5px 5px 0 rgba(36,48,68,.13);
|
|
}
|
|
.heroEditor {
|
|
background: #fffdf7;
|
|
border-color: #26364c;
|
|
}
|
|
#paintCanvas {
|
|
margin-bottom: 10px;
|
|
max-height: min(42vh, 330px);
|
|
}
|
|
.toolRow {
|
|
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
|
|
margin-top: 0;
|
|
}
|
|
.paletteGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(13, 1fr);
|
|
gap: 3px;
|
|
margin: 6px 0 6px;
|
|
padding: 6px;
|
|
border: 2px solid rgba(36,48,68,.28);
|
|
background: #fff6df;
|
|
}
|
|
.paletteSwatch {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 18px;
|
|
border: 2px solid rgba(36,48,68,.38);
|
|
box-shadow: 2px 2px 0 rgba(36,48,68,.13);
|
|
cursor: pointer;
|
|
}
|
|
.paletteSwatch.active {
|
|
outline: 3px solid #ff7aad;
|
|
outline-offset: 1px;
|
|
border-color: #26364c;
|
|
}
|
|
.paletteSwatch::after {
|
|
content: attr(data-code);
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 0;
|
|
color: rgba(20,26,38,.52);
|
|
font-size: 7px;
|
|
font-weight: 900;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.7);
|
|
}
|
|
.quickSetupBar { margin-bottom: 6px; }
|
|
.settingsCard .segmented { margin-top: 2px; }
|
|
.markerRow {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.markerChip {
|
|
border: 2px dashed rgba(36,48,68,.25);
|
|
background: #fff6df;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.summonCard {
|
|
background: linear-gradient(180deg, #fffdf5, #fff2d7);
|
|
}
|
|
.finishActions {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr .8fr .6fr;
|
|
}
|
|
.bigPrimary {
|
|
min-height: 48px;
|
|
font-size: 14px;
|
|
background: linear-gradient(180deg, #89e4ae, #65d596) !important;
|
|
}
|
|
.sideSwitcher button:first-child.active::after,
|
|
.sideSwitcher button:nth-child(2).active::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
}
|
|
.spawnPop {
|
|
pointer-events: none;
|
|
}
|
|
.selectedAsset { font-weight: 900; padding-bottom: 8px; border-bottom: 2px dashed rgba(45,60,80,.25); }
|
|
@media (max-width: 720px) {
|
|
.toolHud { top: auto; bottom: 126px; right: 10px; }
|
|
.finishActions { grid-template-columns: 1fr; }
|
|
.paletteGrid { grid-template-columns: repeat(8, 1fr); }
|
|
}
|
|
|
|
.paletteGrid button { width: 100%; aspect-ratio: 1 / 1; padding: 0; min-height: 22px; }
|
|
.sideSwitcher button { white-space: nowrap; }
|
|
.heroEditor .hint { line-height: 1.35; }
|
|
|
|
|
|
.compactEditorTop { margin-bottom: 4px; min-height: 0; }
|
|
body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothing: none; }
|
|
|
|
/* latest layout fixes */
|
|
.studioDrawer { width: min(600px, calc(100vw - 24px)); }
|
|
.paintLayout {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 360px) 1fr;
|
|
align-items: start;
|
|
gap: 10px;
|
|
margin: 4px 0 8px;
|
|
}
|
|
#paintCanvas {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
max-height: none;
|
|
margin: 0;
|
|
}
|
|
.paletteGrid {
|
|
margin: 0;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
align-content: start;
|
|
gap: 4px;
|
|
max-height: 360px;
|
|
overflow: hidden;
|
|
}
|
|
.paletteSwatch, .paletteGrid button {
|
|
min-height: 20px;
|
|
}
|
|
.sideSwitcher { justify-content: flex-start; }
|
|
.authorCard span { white-space: nowrap; }
|
|
@media (max-width: 720px) {
|
|
.paintLayout { grid-template-columns: 1fr; }
|
|
.paletteGrid { grid-template-columns: repeat(10, 1fr); max-height: none; }
|
|
}
|
|
|
|
/* Selection bubble + outline controls */
|
|
.palettePanel { display: grid; gap: 8px; }
|
|
.outlineControls {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5px;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
}
|
|
.outlineControls span {
|
|
grid-column: 1 / -1;
|
|
display: block;
|
|
border: 2px solid rgba(36,48,68,.28);
|
|
background: #fffaf0;
|
|
padding: 5px 6px;
|
|
font-weight: 900;
|
|
}
|
|
.selectionBubble {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
min-width: 126px;
|
|
max-width: 210px;
|
|
padding: 8px;
|
|
background: #fffdf5;
|
|
border: 3px solid var(--line);
|
|
box-shadow: 4px 4px 0 rgba(36,48,68,.20);
|
|
pointer-events: auto;
|
|
text-align: center;
|
|
}
|
|
.selectionBubble::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -10px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #fffdf5;
|
|
border-right: 3px solid var(--line);
|
|
border-bottom: 3px solid var(--line);
|
|
transform: translateX(-50%) rotate(45deg);
|
|
}
|
|
.bubbleName {
|
|
font-size: 12px;
|
|
font-weight: 950;
|
|
line-height: 1.2;
|
|
word-break: break-word;
|
|
}
|
|
.bubbleAuthor {
|
|
margin-top: 2px;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
}
|
|
.bubbleVotes {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
}
|
|
.bubbleVotes button {
|
|
padding: 3px 7px;
|
|
min-width: 30px;
|
|
font-size: 11px;
|
|
}
|
|
#voteScore {
|
|
font-weight: 950;
|
|
font-size: 12px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.bubbleRemixFrom, .bubbleRemixCount {
|
|
margin-top: 3px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
.bubbleActions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5px;
|
|
margin-top: 6px;
|
|
}
|
|
.bubbleActions button {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
}
|
|
.bubbleVotes button.mutedVote, .assetActions button.mutedAction {
|
|
opacity: .45;
|
|
}
|
|
.bubbleVotes button.activeVote {
|
|
background: var(--sun);
|
|
}
|