new tools modules & sass opti
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
821e8e0a36
commit
9e275e0167
24 changed files with 3266 additions and 2372 deletions
206
website/src/styles/_base.scss
Normal file
206
website/src/styles/_base.scss
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
background: var(--color-bg-page);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
background: var(--gradient-page);
|
||||
font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.23;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.52) 1px, transparent 1px),
|
||||
radial-gradient(circle, rgba(139, 92, 246, 0.38) 1px, transparent 1px);
|
||||
background-position: 0 0, 35px 60px;
|
||||
background-size: 90px 90px, 140px 140px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
select,
|
||||
input,
|
||||
textarea,
|
||||
.import-button {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.92);
|
||||
color: var(--color-text-primary);
|
||||
font: inherit;
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-standard),
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
.import-button {
|
||||
display: inline-flex;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover,
|
||||
.import-button:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
.import-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent-cyan);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.filter-options::-webkit-scrollbar,
|
||||
.drawer-panel::-webkit-scrollbar,
|
||||
.damage-table-wrap::-webkit-scrollbar,
|
||||
.legacy-scrollbar::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.filter-options::-webkit-scrollbar-track,
|
||||
.drawer-panel::-webkit-scrollbar-track,
|
||||
.damage-table-wrap::-webkit-scrollbar-track,
|
||||
.legacy-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filter-options::-webkit-scrollbar-thumb,
|
||||
.drawer-panel::-webkit-scrollbar-thumb,
|
||||
.damage-table-wrap::-webkit-scrollbar-thumb,
|
||||
.legacy-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(79, 26, 114)), color-stop(1, rgb(44, 1, 135)));
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: transparent;
|
||||
background: var(--gradient-brand);
|
||||
box-shadow: 0 8px 22px rgba(99, 102, 241, 0.22);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
border-color: transparent;
|
||||
filter: brightness(1.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.32);
|
||||
background: var(--color-danger-soft);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-delete-button,
|
||||
.tool-quick-add-button {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.88);
|
||||
color: var(--color-text-primary);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-standard),
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-action-button:hover,
|
||||
.import-icon-button:hover,
|
||||
.card-icon-button:hover,
|
||||
.drawer-action-button:hover,
|
||||
.drawer-close-button:hover,
|
||||
.filter-reset-button:hover,
|
||||
.screenshot-viewer-button:hover,
|
||||
.module-edit-button:hover,
|
||||
.module-delete-button:hover,
|
||||
.shot-delete-button:hover,
|
||||
.tool-quick-add-button:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.card-icon-button.danger,
|
||||
.module-delete-button.danger,
|
||||
.shot-delete-button.danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.card-icon-button.danger:hover,
|
||||
.module-delete-button.danger:hover,
|
||||
.shot-delete-button.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.46);
|
||||
background: var(--color-danger-soft);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 24px rgba(251, 113, 133, 0.12);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue