This commit is contained in:
parent
8b9171d4f9
commit
ef5f977f8a
15 changed files with 3571 additions and 272 deletions
|
|
@ -185,6 +185,12 @@ body.is-modal-open {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.startup-error {
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
|
|
|
|||
|
|
@ -178,10 +178,10 @@
|
|||
.game-list-selector-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
min-height: 68px;
|
||||
align-items: center;
|
||||
min-height: 100px;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16, 20, 38, 0.58);
|
||||
|
|
@ -197,32 +197,56 @@
|
|||
0 0 14px rgba(246, 196, 83, 0.1);
|
||||
}
|
||||
|
||||
.game-list-selector-item > button:not(.game-list-create-button) {
|
||||
.game-list-select-button {
|
||||
display: grid;
|
||||
min-height: 48px;
|
||||
align-content: center;
|
||||
gap: 3px;
|
||||
padding: 0 8px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
width: 100%;
|
||||
min-height: 68px;
|
||||
align-content: stretch;
|
||||
justify-content: stretch;
|
||||
justify-items: start;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
text-align: left;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.game-list-select-button:hover {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.game-list-selector-item strong {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: calc(var(--font-size-lg) * 2.5);
|
||||
align-self: start;
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.game-list-selector-item small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
align-self: end;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.game-list-selector-item .game-list-create-button {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.game-list-panel {
|
||||
|
|
@ -271,6 +295,20 @@
|
|||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.game-list-symbol {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
color: currentColor;
|
||||
font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif;
|
||||
font-size: 1.18em;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow:
|
||||
0 0 0 currentColor,
|
||||
0 0 4px rgba(246, 196, 83, 0.18);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.game-list-category ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
|
|
@ -86,6 +86,16 @@
|
|||
-webkit-mask-image: url("/static/icons/hide.svg");
|
||||
}
|
||||
|
||||
.ui-icon-eye-closed {
|
||||
mask-image: url("/static/icons/eye-closed.svg");
|
||||
-webkit-mask-image: url("/static/icons/eye-closed.svg");
|
||||
}
|
||||
|
||||
.ui-icon-eye-open {
|
||||
mask-image: url("/static/icons/eye-open.svg");
|
||||
-webkit-mask-image: url("/static/icons/eye-open.svg");
|
||||
}
|
||||
|
||||
.ui-icon-chevron-down {
|
||||
mask-image: url("/static/icons/chevron-down.svg");
|
||||
-webkit-mask-image: url("/static/icons/chevron-down.svg");
|
||||
|
|
|
|||
|
|
@ -778,12 +778,26 @@ textarea:focus {
|
|||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.checklist-section.is-collapsed .checklist-section-header h3 {
|
||||
.checklist-gender-symbol {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
color: currentColor;
|
||||
font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif;
|
||||
font-size: 1.18em;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow:
|
||||
0 0 0 currentColor,
|
||||
0 0 4px rgba(246, 196, 83, 0.22);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.checklist-section.is-complete .checklist-section-header h3 {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.checklist-section-header span {
|
||||
.checklist-section-header > div > span {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.22);
|
||||
|
|
@ -794,53 +808,38 @@ textarea:focus {
|
|||
font-weight: 800;
|
||||
}
|
||||
|
||||
.checklist-hide-toggle {
|
||||
.checklist-complete-mode-button {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 18px 34px;
|
||||
width: fit-content;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 6px 0 10px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-pill);
|
||||
border-radius: 0;
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.checklist-hide-toggle .ui-icon {
|
||||
.checklist-complete-mode-button:first-child {
|
||||
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
|
||||
}
|
||||
|
||||
.checklist-complete-mode-button:last-child {
|
||||
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
|
||||
}
|
||||
|
||||
.checklist-complete-mode-button + .checklist-complete-mode-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.checklist-complete-mode-button .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.checklist-hide-toggle i {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 18px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(7, 10, 24, 0.72);
|
||||
}
|
||||
|
||||
.checklist-hide-toggle i::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-muted);
|
||||
transform: translateY(-50%);
|
||||
transition:
|
||||
left var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.checklist-section-collapse-button {
|
||||
display: inline-grid;
|
||||
width: 30px;
|
||||
|
|
@ -1230,8 +1229,8 @@ textarea:focus {
|
|||
.module-scroll-button.active,
|
||||
.calculator-scroll-toggle:hover,
|
||||
.calculator-scroll-toggle.active,
|
||||
.checklist-hide-toggle:hover,
|
||||
.checklist-hide-toggle.active {
|
||||
.checklist-complete-mode-button:hover,
|
||||
.checklist-complete-mode-button.active {
|
||||
border-color: rgba(196, 181, 253, 0.32);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
|
||||
|
|
@ -1286,23 +1285,22 @@ textarea:focus {
|
|||
|
||||
.module-scroll-button.active,
|
||||
.calculator-scroll-toggle.active,
|
||||
.checklist-hide-toggle.active {
|
||||
.checklist-complete-mode-button.active {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.82), rgba(45, 52, 146, 0.8)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(139, 92, 246, 0.32)) border-box;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.module-scroll-button.active i,
|
||||
.calculator-scroll-toggle.active i,
|
||||
.checklist-hide-toggle.active i {
|
||||
.calculator-scroll-toggle.active i {
|
||||
border-color: rgba(246, 196, 83, 0.36);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.module-scroll-button.active i::before,
|
||||
.calculator-scroll-toggle.active i::before,
|
||||
.checklist-hide-toggle.active i::before {
|
||||
.calculator-scroll-toggle.active i::before {
|
||||
left: 17px;
|
||||
background: var(--color-accent-gold);
|
||||
box-shadow: 0 0 10px rgba(246, 196, 83, 0.28);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue