style / tools optis & new tools calculator
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
This commit is contained in:
parent
6b84607b25
commit
0db35a0d2c
23 changed files with 1106 additions and 24 deletions
|
|
@ -89,6 +89,12 @@
|
|||
font-weight: 800;
|
||||
}
|
||||
|
||||
.results-copy-button {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.game-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
-webkit-mask-image: url("/static/icons/open.svg");
|
||||
}
|
||||
|
||||
.ui-icon-enter {
|
||||
mask-image: url("/static/icons/enter.svg");
|
||||
-webkit-mask-image: url("/static/icons/enter.svg");
|
||||
}
|
||||
|
||||
.ui-icon-zoom {
|
||||
mask-image: url("/static/icons/zoom.svg");
|
||||
-webkit-mask-image: url("/static/icons/zoom.svg");
|
||||
|
|
@ -56,6 +61,16 @@
|
|||
-webkit-mask-image: url("/static/icons/copy.svg");
|
||||
}
|
||||
|
||||
.ui-icon-calculator {
|
||||
mask-image: url("/static/icons/calculator.svg");
|
||||
-webkit-mask-image: url("/static/icons/calculator.svg");
|
||||
}
|
||||
|
||||
.ui-icon-scrollable {
|
||||
mask-image: url("/static/icons/scrollable.svg");
|
||||
-webkit-mask-image: url("/static/icons/scrollable.svg");
|
||||
}
|
||||
|
||||
.ui-icon-drag {
|
||||
mask-image: url("/static/icons/drag.svg");
|
||||
-webkit-mask-image: url("/static/icons/drag.svg");
|
||||
|
|
|
|||
|
|
@ -160,6 +160,18 @@
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.calculator-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.calculator-module {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.calculator-form {
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.toolbox-actions-row {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -70,6 +70,19 @@
|
|||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.toolbox-hero-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
width: fit-content;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.toolbox-hero-link .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.toolbox-icon-picker {
|
||||
position: relative;
|
||||
z-index: 70;
|
||||
|
|
@ -526,6 +539,11 @@
|
|||
-webkit-mask-image: url("/static/icons/abacus.svg");
|
||||
}
|
||||
|
||||
.module-icon-calculator {
|
||||
mask-image: url("/static/icons/calculator.svg");
|
||||
-webkit-mask-image: url("/static/icons/calculator.svg");
|
||||
}
|
||||
|
||||
.notepad {
|
||||
display: block;
|
||||
width: calc(100% - 32px);
|
||||
|
|
@ -552,6 +570,32 @@
|
|||
grid-template-columns: minmax(0, 1fr) 76px auto;
|
||||
}
|
||||
|
||||
.module-add-panel {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.module-add-panel .inline-form {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-import-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-import-form textarea {
|
||||
min-height: 86px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.text-import-form button {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.checklist-qty-input {
|
||||
padding-inline: 10px;
|
||||
text-align: center;
|
||||
|
|
@ -572,6 +616,7 @@ textarea {
|
|||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
|
|
@ -631,10 +676,40 @@ textarea:focus {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.checklist-qty-controls small {
|
||||
min-width: 42px;
|
||||
.checklist-qty-current {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checklist-qty-current input {
|
||||
width: max(18px, calc((var(--qty-current-digits, 1) * 0.72rem) + 8px));
|
||||
min-height: 28px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
text-align: right;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.checklist-qty-current input::-webkit-outer-spin-button,
|
||||
.checklist-qty-current input::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.checklist-qty-current input:hover,
|
||||
.checklist-qty-current input:focus {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background: rgba(21, 26, 48, 0.42);
|
||||
}
|
||||
|
||||
.checklist-qty-current span {
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.links-add-form {
|
||||
|
|
@ -712,6 +787,398 @@ textarea:focus {
|
|||
font-weight: 900;
|
||||
}
|
||||
|
||||
.calculator-module {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
|
||||
column-gap: var(--space-6);
|
||||
row-gap: var(--space-4);
|
||||
align-items: start;
|
||||
overflow: hidden;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.calculator-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-self: start;
|
||||
align-content: start;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.calculator-card,
|
||||
.calculator-saved {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 62%),
|
||||
rgba(7, 10, 24, 0.3);
|
||||
}
|
||||
|
||||
.calculator-card {
|
||||
gap: 10px;
|
||||
align-self: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.calculator-form label,
|
||||
.calculator-result {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.calculator-card > *,
|
||||
.calculator-form input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.calculator-form label span,
|
||||
.calculator-result span,
|
||||
.calculator-root-button {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calculator-result {
|
||||
min-height: 72px;
|
||||
justify-content: stretch;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%),
|
||||
rgba(5, 7, 17, 0.56);
|
||||
}
|
||||
|
||||
.calculator-result strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: clamp(1.55rem, 3vw, 2.15rem);
|
||||
font-weight: 900;
|
||||
line-height: 0.95;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.calculator-saved {
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
overflow: visible;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%),
|
||||
rgba(7, 10, 24, 0.22);
|
||||
}
|
||||
|
||||
.calculator-saved.is-scrollable {
|
||||
height: var(--calculator-scroll-height, auto);
|
||||
max-height: var(--calculator-scroll-height, none);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calculator-result-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calculator-root-button {
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
}
|
||||
|
||||
.calculator-action-button {
|
||||
display: inline-flex;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.calculator-action-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.calculator-action-button.danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.1), rgba(7, 10, 24, 0.32));
|
||||
color: #fecdd3;
|
||||
}
|
||||
|
||||
.calculator-action-button.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.54);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.2), rgba(7, 10, 24, 0.44));
|
||||
color: #fff1f2;
|
||||
box-shadow: 0 0 14px rgba(251, 113, 133, 0.16);
|
||||
}
|
||||
|
||||
.calculator-action-button .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 18px 34px;
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 6px 0 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.calculator-scroll-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);
|
||||
}
|
||||
|
||||
.calculator-scroll-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);
|
||||
}
|
||||
|
||||
.calculator-root-button {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.calculator-root-button:hover,
|
||||
.calculator-action-button:hover:not(:disabled),
|
||||
.calculator-scroll-toggle:hover,
|
||||
.calculator-scroll-toggle.active {
|
||||
border-color: rgba(196, 181, 253, 0.32);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle.active {
|
||||
background: rgba(139, 92, 246, 0.18);
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle.active i {
|
||||
border-color: rgba(246, 196, 83, 0.36);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle.active i::before {
|
||||
left: 17px;
|
||||
background: var(--color-accent-gold);
|
||||
box-shadow: 0 0 10px rgba(246, 196, 83, 0.28);
|
||||
}
|
||||
|
||||
.calculator-tree {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.calculator-tree.is-scrollable {
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.calculator-entry-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.calculator-entry-list .calculator-entry-list {
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.calculator-entry-list .calculator-entry-list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
bottom: 14px;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, rgba(246, 196, 83, 0.52), rgba(139, 92, 246, 0.2));
|
||||
}
|
||||
|
||||
.calculator-entry-list .calculator-entry-list > li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calculator-entry-list .calculator-entry-list > li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -15px;
|
||||
width: 11px;
|
||||
height: 1px;
|
||||
background: rgba(246, 196, 83, 0.52);
|
||||
}
|
||||
|
||||
.calculator-entry {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 34px 34px;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.calculator-entry-list li.is-editing > .calculator-entry {
|
||||
grid-template-columns: auto minmax(0, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.calculator-entry > button {
|
||||
min-width: 0;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.calculator-entry-summary,
|
||||
.calculator-entry-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1px solid rgba(165, 180, 252, 0.09);
|
||||
border-radius: var(--radius-md);
|
||||
border-color: rgba(165, 180, 252, 0.09);
|
||||
background: rgba(21, 26, 48, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calculator-entry-summary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calculator-entry-value {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.calculator-entry-value.is-readonly {
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
background: rgba(21, 26, 48, 0.38);
|
||||
cursor: default;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.calculator-entry-summary:hover,
|
||||
.calculator-entry-value:not(.is-readonly):hover {
|
||||
border-color: rgba(196, 181, 253, 0.2);
|
||||
background: rgba(21, 26, 48, 0.72);
|
||||
}
|
||||
|
||||
.calculator-entry-summary span {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calculator-entry-summary strong,
|
||||
.calculator-entry-value strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calculator-entry-label {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
border-color: rgba(165, 180, 252, 0.09);
|
||||
background: rgba(21, 26, 48, 0.38);
|
||||
color: var(--color-text-secondary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calculator-entry-label:hover,
|
||||
.calculator-entry-label:focus {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(21, 26, 48, 0.58);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calculator-entry .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.calculator-entry > button.danger {
|
||||
min-width: 34px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calculator-entry > button:not(.calculator-entry-summary, .calculator-entry-value, .danger) {
|
||||
min-width: 34px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calculator-entry-list li.active > .calculator-entry > .calculator-entry-summary,
|
||||
.calculator-entry-list li.active > .calculator-entry > .calculator-entry-value,
|
||||
.calculator-entry-list li.active > .calculator-entry > .calculator-entry-label {
|
||||
border-color: var(--color-accent-gold);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.09), rgba(139, 92, 246, 0.1)),
|
||||
rgba(7, 10, 24, 0.48);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.06);
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue