refactor: replace deprecated $grey- variables with $gray-
- Replace 802 instances of $grey- variables with $gray- across 106 files - Remove legacy color aliases from variables.scss - Maintain consistent naming convention throughout codebase This completes the migration to the new color scale system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
9d201a7583
commit
a31291d69f
110 changed files with 803 additions and 824 deletions
|
|
@ -83,7 +83,7 @@ Create a consistent design system by extracting hardcoded values.
|
|||
- [x] Replace 200+ hardcoded hex/rgba values (replaced most common colors)
|
||||
- [x] Create shadow/overlay variables for rgba values
|
||||
|
||||
- [ ] **Standardize spacing**
|
||||
- [-] **Standardize spacing**
|
||||
- [x] Add missing unit multipliers (added `$unit-7x` through `$unit-19x` and common pixel values)
|
||||
- [ ] Replace 1,000+ hardcoded pixel values with unit variables
|
||||
|
||||
|
|
|
|||
|
|
@ -298,26 +298,5 @@ $screen-sm-min: 768px;
|
|||
$screen-md-min: 992px;
|
||||
$screen-lg-min: 1200px;
|
||||
|
||||
/* Legacy color aliases for backward compatibility
|
||||
* TODO: Replace these throughout the codebase
|
||||
* -------------------------------------------------------------------------- */
|
||||
$grey-100: $gray-100;
|
||||
$grey-97: $gray-97;
|
||||
$grey-95: $gray-95;
|
||||
$grey-90: $gray-90;
|
||||
$grey-85: $gray-85;
|
||||
$grey-80: $gray-80;
|
||||
$grey-70: $gray-70;
|
||||
$grey-60: $gray-60;
|
||||
$grey-50: $gray-50;
|
||||
$grey-40: $gray-40;
|
||||
$grey-30: $gray-30;
|
||||
$grey-20: $gray-20;
|
||||
$grey-10: $gray-10;
|
||||
$grey-00: $gray-00;
|
||||
$grey-color: $gray-90;
|
||||
|
||||
// Map old color variables to new scale
|
||||
$orange-red: $red-70;
|
||||
$green-success: $success-color;
|
||||
$red-error: $error-color;
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: $grey-5;
|
||||
background-color: $gray-5;
|
||||
border-radius: $unit;
|
||||
}
|
||||
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
.artist-name {
|
||||
font-size: $font-size-extra-small;
|
||||
font-weight: $font-weight-med;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,8 +235,8 @@
|
|||
:global(blockquote) {
|
||||
margin: $unit-4x 0;
|
||||
padding: $unit-3x;
|
||||
background: $grey-97;
|
||||
border-left: 4px solid $grey-80;
|
||||
background: $gray-97;
|
||||
border-left: 4px solid $gray-80;
|
||||
border-radius: $unit;
|
||||
color: $text-color;
|
||||
font-style: italic;
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
}
|
||||
|
||||
:global(code) {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
|
||||
|
|
@ -257,12 +257,12 @@
|
|||
}
|
||||
|
||||
:global(pre) {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
padding: $unit-3x;
|
||||
border-radius: $unit;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 $unit-3x;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
|
||||
:global(code) {
|
||||
background: none;
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
|
||||
:global(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid $grey-85;
|
||||
border-top: 1px solid $gray-85;
|
||||
margin: $unit-4x 0;
|
||||
}
|
||||
|
||||
|
|
@ -319,16 +319,16 @@
|
|||
:global(.url-embed-link) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-80;
|
||||
border-color: $gray-80;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.08);
|
||||
|
|
@ -339,7 +339,7 @@
|
|||
width: 100%;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
}
|
||||
|
||||
:global(.url-embed-image img) {
|
||||
|
|
@ -362,7 +362,7 @@
|
|||
align-items: center;
|
||||
gap: $unit-half;
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
:global(.url-embed-favicon) {
|
||||
|
|
@ -382,7 +382,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -393,7 +393,7 @@
|
|||
:global(.url-embed-description) {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -406,7 +406,7 @@
|
|||
margin: $unit-3x 0;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
:global(.youtube-embed-wrapper) {
|
||||
|
|
|
|||
|
|
@ -52,14 +52,14 @@
|
|||
.copyright {
|
||||
margin: 0;
|
||||
font-size: 0.875rem; // 14px
|
||||
color: $grey-40; // #999
|
||||
color: $gray-40; // #999
|
||||
|
||||
.separator {
|
||||
margin: 0 $unit-half;
|
||||
}
|
||||
|
||||
.rss-link {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
font-size: 0.875rem; // 14px
|
||||
|
||||
a {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
.game-playtime {
|
||||
font-size: $font-size-extra-small;
|
||||
font-weight: $font-weight-med;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
.map-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
|
||||
:global(.leaflet-container) {
|
||||
font-family: inherit;
|
||||
|
|
@ -205,13 +205,13 @@
|
|||
margin: 0 0 $unit-half;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
:global(.location-popup p) {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
padding: $unit-3x;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -239,19 +239,19 @@
|
|||
h3 {
|
||||
margin: 0 0 $unit;
|
||||
font-size: 1.25rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
padding: $unit 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
|
||||
<style lang="scss">
|
||||
.lab-card {
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
padding: $unit-3x;
|
||||
display: flex;
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
line-height: 1.3;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
|
||||
.project-year {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
margin: 0 0 $unit-3x 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 0.9rem;
|
||||
|
|
@ -310,12 +310,12 @@
|
|||
|
||||
&.secondary {
|
||||
background: transparent;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
border-color: $grey-00; // Black inner border
|
||||
border-color: $gray-00; // Black inner border
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: $grey-100;
|
||||
color: $gray-100;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -101,10 +101,10 @@
|
|||
.link-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
border-radius: $image-corner-radius;
|
||||
overflow: hidden;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
transition: border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-50;
|
||||
border-color: $gray-50;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-80;
|
||||
border-color: $gray-80;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
align-items: center;
|
||||
gap: $unit;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.favicon {
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.link-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
}
|
||||
|
||||
.skeleton {
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
border-radius: 4px;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
|
||||
.error-message {
|
||||
margin: 0 0 $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
|
||||
footer {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
flex-grow: 0;
|
||||
font-weight: $font-weight-med;
|
||||
font-size: 0.9rem;
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@
|
|||
& + .dropdown-item {
|
||||
margin-top: $unit;
|
||||
padding-top: $unit;
|
||||
border-top: 1px solid $grey-95;
|
||||
border-top: 1px solid $gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -252,21 +252,21 @@
|
|||
padding: $unit-2x $unit-2x;
|
||||
border-radius: $unit;
|
||||
text-decoration: none;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover:not(.section-header) {
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.section-header {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -143,8 +143,8 @@
|
|||
@import '$styles/mixins.scss';
|
||||
|
||||
.photo-metadata {
|
||||
background: $grey-100;
|
||||
border: 1px solid $grey-90;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: $image-corner-radius;
|
||||
padding: $unit-3x;
|
||||
padding-bottom: $unit-2x;
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
.photo-details {
|
||||
margin-bottom: $unit-4x;
|
||||
padding-bottom: $unit-4x;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-2x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
|
||||
.photo-description {
|
||||
font-size: 1rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
|
||||
|
|
@ -223,12 +223,12 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
.albums-section {
|
||||
margin-bottom: $unit-4x;
|
||||
padding-bottom: $unit-4x;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
margin-bottom: $unit-3x;
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0 0 $unit-2x;
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
|
||||
&:not(:last-child)::after {
|
||||
content: ',';
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
margin: 0 0 $unit-2x;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
|
@ -155,13 +155,13 @@
|
|||
:global(blockquote) {
|
||||
margin: $unit-3x 0;
|
||||
padding-left: $unit-3x;
|
||||
border-left: 3px solid $grey-80;
|
||||
border-left: 3px solid $gray-80;
|
||||
color: $text-color;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
:global(code) {
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
}
|
||||
|
||||
:global(pre) {
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
padding: $unit-2x;
|
||||
border-radius: $unit;
|
||||
overflow-x: auto;
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
|
||||
:global(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid $grey-80;
|
||||
border-top: 1px solid $gray-80;
|
||||
margin: $unit-4x 0;
|
||||
}
|
||||
|
||||
|
|
@ -206,6 +206,6 @@
|
|||
.post-footer {
|
||||
margin-top: $unit-6x;
|
||||
padding-top: $unit-4x;
|
||||
border-top: 1px solid $grey-80;
|
||||
border-top: 1px solid $gray-80;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
|
||||
.post-content {
|
||||
padding: $unit-3x;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
.post-excerpt {
|
||||
margin: 0;
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
.post-date {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
|
@ -146,6 +146,6 @@
|
|||
:global(.universe-icon) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $grey-40;
|
||||
fill: $gray-40;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
letter-spacing: -0.025em;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 2rem;
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.project-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@
|
|||
align-items: center;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-3x;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
transition:
|
||||
transform 0.15s ease-out,
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
|
||||
&.list-only {
|
||||
opacity: 0.7;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
}
|
||||
|
||||
&.password-protected {
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem; // 18px
|
||||
line-height: 1.3;
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
|
|
@ -299,7 +299,7 @@
|
|||
font-weight: 500;
|
||||
|
||||
&.list-only {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
&.password-protected {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
name={project.title}
|
||||
slug={project.slug}
|
||||
description={project.description || ''}
|
||||
highlightColor={project.highlightColor || '$grey-00'}
|
||||
highlightColor={project.highlightColor || '$gray-00'}
|
||||
status={project.status}
|
||||
{index}
|
||||
/>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
|
||||
.intro-card {
|
||||
padding: $unit-3x;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem; // 18px
|
||||
line-height: 1.3;
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $unit-2x;
|
||||
|
|
@ -110,6 +110,6 @@
|
|||
.no-projects {
|
||||
padding: $unit-3x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
width: 100%;
|
||||
|
||||
.lock-icon {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-bottom: $unit-3x;
|
||||
|
||||
svg {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
margin: 0 0 $unit-2x;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
}
|
||||
|
||||
p {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1rem;
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
.password-input {
|
||||
flex: 1;
|
||||
padding: $unit-2x;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $unit;
|
||||
font-size: 1rem;
|
||||
transition:
|
||||
|
|
@ -214,8 +214,8 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background: $grey-95;
|
||||
color: $grey-60;
|
||||
background: $gray-95;
|
||||
color: $gray-60;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
}
|
||||
|
||||
.back-link-wrapper {
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
padding-top: $unit-3x;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
padding: $unit;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 1px 3px $shadow-light;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
@include breakpoint('phone') {
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
border-color: $grey-100;
|
||||
border-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -286,12 +286,12 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
border-color: $grey-100;
|
||||
border-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&.placeholder {
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
.album-description {
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
|
|
@ -76,15 +76,15 @@
|
|||
|
||||
.card-content {
|
||||
padding: $unit-3x;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-95;
|
||||
border: 1px solid $gray-95;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-85;
|
||||
border-color: $gray-85;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
.card-date {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s ease;
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
:global(.card-icon) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $grey-40;
|
||||
fill: $gray-40;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
}
|
||||
|
||||
:global(.card-title-link) {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
}
|
||||
|
||||
:global(.card-title-link) {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,12 +48,12 @@
|
|||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-2x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@
|
|||
}
|
||||
|
||||
.link-preview {
|
||||
background: $grey-97;
|
||||
border: 1px solid $grey-90;
|
||||
background: $gray-97;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: $card-corner-radius;
|
||||
padding: $unit-2x;
|
||||
margin-bottom: $unit-3x;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
.link-description {
|
||||
margin: 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
.post-excerpt {
|
||||
p {
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
// Styles for full content (non-essays)
|
||||
:global(p) {
|
||||
margin: 0 0 $unit-2x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
||||
|
|
@ -200,12 +200,12 @@
|
|||
margin-bottom: $unit-3x;
|
||||
|
||||
.attachment-count {
|
||||
background: $grey-95;
|
||||
border: 1px solid $grey-85;
|
||||
background: $gray-95;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
padding: $unit $unit-2x;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -230,9 +230,9 @@
|
|||
padding-bottom: 56%; // 16:9 aspect ratio
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
|
|
@ -249,16 +249,16 @@
|
|||
.url-embed-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-80;
|
||||
border-color: $gray-80;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
width: 100%;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
align-items: center;
|
||||
gap: $unit-half;
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.embed-favicon {
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
.embed-description {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
<style lang="scss">
|
||||
.view-mode-selector {
|
||||
width: 100%;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
border-radius: $corner-radius-lg;
|
||||
box-sizing: border-box;
|
||||
padding: $unit;
|
||||
|
|
@ -119,10 +119,10 @@
|
|||
border-radius: $corner-radius-sm;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
align-items: center;
|
||||
gap: $unit;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.byline-section {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
transition: border-bottom 0.2s ease;
|
||||
|
||||
&.scrolled {
|
||||
border-bottom: 1px solid $grey-60;
|
||||
border-bottom: 1px solid $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,13 +144,13 @@
|
|||
align-items: center;
|
||||
gap: $unit;
|
||||
text-decoration: none;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 400;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
font-weight: 500;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-70;
|
||||
background-color: $gray-70;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<style lang="scss">
|
||||
.segmented-control {
|
||||
display: inline-flex;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
border-radius: 50px;
|
||||
padding: $unit-half;
|
||||
gap: $unit-half;
|
||||
|
|
@ -35,17 +35,17 @@
|
|||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 0.925rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(.active) {
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: white;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
padding: $unit;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: $grey-85;
|
||||
background-color: $gray-85;
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1;
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition:
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -211,13 +211,13 @@
|
|||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -250,12 +250,12 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.925rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -409,7 +409,7 @@
|
|||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -418,8 +418,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -461,7 +461,7 @@
|
|||
.loading {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
|
|
@ -477,7 +477,7 @@
|
|||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -511,7 +511,7 @@
|
|||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
border-radius: $unit;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
|
||||
:global(img) {
|
||||
width: 100%;
|
||||
|
|
@ -566,7 +566,7 @@
|
|||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -592,13 +592,13 @@
|
|||
|
||||
.toggle-title {
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.toggle-description {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
|
@ -606,17 +606,17 @@
|
|||
// Button styles
|
||||
.btn-secondary {
|
||||
padding: $unit $unit-2x;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
background: white;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
border-color: $grey-70;
|
||||
background: $gray-95;
|
||||
border-color: $gray-70;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -626,11 +626,11 @@
|
|||
}
|
||||
|
||||
.empty-state {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
padding: $unit-4x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $unit;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@
|
|||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
justify-content: center;
|
||||
border-radius: $unit;
|
||||
overflow: hidden;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
|
||||
.thumbnail-image {
|
||||
width: 100%;
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
.album-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
border: none;
|
||||
border-radius: $unit;
|
||||
cursor: pointer;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
right: 0;
|
||||
margin-top: $unit-half;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
|
@ -283,12 +283,12 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
|
|
@ -298,7 +298,7 @@
|
|||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
margin: $unit-half 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -318,13 +318,13 @@
|
|||
|
||||
.selector-header {
|
||||
padding: $unit-3x;
|
||||
border-bottom: 1px solid $grey-85;
|
||||
border-bottom: 1px solid $gray-85;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -358,7 +358,7 @@
|
|||
justify-content: center;
|
||||
padding: $unit-6x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
p {
|
||||
margin: $unit-2x 0 0 0;
|
||||
|
|
@ -376,13 +376,13 @@
|
|||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-2x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $unit;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
|
|
@ -401,7 +401,7 @@
|
|||
.album-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -409,7 +409,7 @@
|
|||
|
||||
.album-meta {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.create-new-form {
|
||||
|
|
@ -421,7 +421,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -436,6 +436,6 @@
|
|||
justify-content: flex-end;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
border-top: 1px solid $grey-85;
|
||||
border-top: 1px solid $gray-85;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -155,13 +155,13 @@
|
|||
flex-direction: column;
|
||||
gap: $unit;
|
||||
padding: $unit-3x;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
.modal-subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
height: 32px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -192,8 +192,8 @@
|
|||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -224,13 +224,13 @@
|
|||
align-items: center;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-3x;
|
||||
border-top: 1px solid $grey-90;
|
||||
background: $grey-95;
|
||||
border-top: 1px solid $gray-90;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
.action-summary {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -283,17 +283,17 @@
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: $grey-10;
|
||||
color: $grey-80;
|
||||
border: 1px solid $grey-20;
|
||||
background-color: $gray-10;
|
||||
color: $gray-80;
|
||||
border: 1px solid $gray-20;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-20;
|
||||
border-color: $grey-30;
|
||||
background-color: $gray-20;
|
||||
border-color: $gray-30;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-30;
|
||||
background-color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -312,35 +312,35 @@
|
|||
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-5;
|
||||
color: $grey-00;
|
||||
background-color: $gray-5;
|
||||
color: $gray-00;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-10;
|
||||
background-color: $gray-10;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $grey-10;
|
||||
color: $grey-00;
|
||||
background-color: $gray-10;
|
||||
color: $gray-00;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
padding: $unit;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: $grey-20;
|
||||
background-color: $grey-5;
|
||||
color: $gray-20;
|
||||
background-color: $gray-5;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
color: $grey-00;
|
||||
color: $gray-00;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -351,30 +351,30 @@
|
|||
font-weight: 600;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-overlay {
|
||||
background-color: white;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-5;
|
||||
color: $grey-00;
|
||||
background-color: $gray-5;
|
||||
color: $gray-00;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-10;
|
||||
background-color: $gray-10;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,12 +79,12 @@
|
|||
margin: 0 0 $unit-2x;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit-4x;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@
|
|||
|
||||
.dropdown-menu {
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
display: flex;
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
margin: $unit-half 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
top: calc(100% + $unit-half);
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1070,7 +1070,7 @@
|
|||
border-radius: 999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
.edra-editor {
|
||||
|
|
@ -1300,7 +1300,7 @@
|
|||
justify-content: center;
|
||||
padding: $unit-4x;
|
||||
gap: $unit;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
|
||||
:global(.animate-spin) {
|
||||
|
|
@ -1327,7 +1327,7 @@
|
|||
cursor: grab;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -368,14 +368,14 @@
|
|||
|
||||
// Custom styles for save/publish buttons to maintain grey color scheme
|
||||
:global(.save-button.btn-primary) {
|
||||
background-color: $grey-10;
|
||||
background-color: $gray-10;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-20;
|
||||
background-color: $gray-20;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-30;
|
||||
background-color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -386,18 +386,18 @@
|
|||
}
|
||||
|
||||
:global(.chevron-button.btn-primary) {
|
||||
background-color: $grey-10;
|
||||
background-color: $gray-10;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-20;
|
||||
background-color: $gray-20;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $grey-30;
|
||||
background-color: $gray-30;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $grey-20;
|
||||
background-color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -498,7 +498,7 @@
|
|||
margin-bottom: $unit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -523,10 +523,10 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: $unit $unit-2x;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
:global(.btn) {
|
||||
margin-left: 4px;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
display: block;
|
||||
margin-bottom: $unit;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: #c33;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
textarea {
|
||||
width: 100%;
|
||||
padding: $unit-2x $unit-3x;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
.help-text {
|
||||
margin-top: $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
display: block;
|
||||
margin-bottom: $unit;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 0.925rem;
|
||||
|
||||
.required {
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
.help-text {
|
||||
margin-top: $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,7 @@
|
|||
.input-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-60;
|
||||
|
|
@ -388,7 +388,7 @@
|
|||
|
||||
.items-count {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -397,9 +397,9 @@
|
|||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: $unit-2x;
|
||||
padding: $unit-2x;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
|
||||
&.has-error {
|
||||
border-color: $red-60;
|
||||
|
|
@ -414,7 +414,7 @@
|
|||
cursor: move;
|
||||
transition: all 0.2s ease;
|
||||
background-color: white;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
|
|
@ -467,8 +467,8 @@
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $grey-95;
|
||||
color: $grey-60;
|
||||
background-color: $gray-95;
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
.image-info {
|
||||
|
|
@ -543,10 +543,10 @@
|
|||
justify-content: center;
|
||||
gap: $unit;
|
||||
aspect-ratio: 1;
|
||||
border: 2px dashed $grey-70;
|
||||
border: 2px dashed $gray-70;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: transparent;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -568,9 +568,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
|
||||
&.has-error {
|
||||
border-color: $red-60;
|
||||
|
|
@ -587,13 +587,13 @@
|
|||
}
|
||||
|
||||
.empty-icon {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.add-more-container {
|
||||
|
|
@ -611,7 +611,7 @@
|
|||
.help-text {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -706,7 +706,7 @@
|
|||
.uploader-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-60;
|
||||
|
|
@ -717,15 +717,15 @@
|
|||
.help-text {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Drop Zone Styles
|
||||
.drop-zone {
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 120px;
|
||||
|
|
@ -761,8 +761,8 @@
|
|||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-80;
|
||||
background-color: $grey-97;
|
||||
border-color: $gray-80;
|
||||
background-color: $gray-97;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -772,21 +772,21 @@
|
|||
padding: $unit-3x;
|
||||
|
||||
.upload-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
.upload-main-text {
|
||||
margin: 0 0 $unit 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-sub-text {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -802,7 +802,7 @@
|
|||
.upload-text {
|
||||
margin: 0 0 $unit-2x 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -822,7 +822,7 @@
|
|||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -832,7 +832,7 @@
|
|||
.progress-bar {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -846,7 +846,7 @@
|
|||
.progress-percent {
|
||||
width: 30px;
|
||||
text-align: right;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -868,14 +868,14 @@
|
|||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-70;
|
||||
border-color: $gray-70;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
|
|
@ -898,7 +898,7 @@
|
|||
border-radius: 4px;
|
||||
padding: $unit-half;
|
||||
cursor: grab;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
|
|
@ -929,7 +929,7 @@
|
|||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
|
||||
.image-button {
|
||||
width: 100%;
|
||||
|
|
@ -969,7 +969,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 1;
|
||||
|
|
@ -993,13 +993,13 @@
|
|||
.file-info {
|
||||
padding: $unit-2x;
|
||||
padding-top: $unit;
|
||||
border-top: 1px solid $grey-95;
|
||||
border-top: 1px solid $gray-95;
|
||||
|
||||
.filename {
|
||||
margin: 0 0 $unit-half 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1008,7 +1008,7 @@
|
|||
.file-meta {
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@
|
|||
|
||||
.metadata-popover {
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
min-width: 420px;
|
||||
|
|
@ -296,13 +296,13 @@
|
|||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-footer {
|
||||
padding: $unit-3x;
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
@ -318,7 +318,7 @@
|
|||
display: block;
|
||||
margin-bottom: $unit;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 0.925rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -333,7 +333,7 @@
|
|||
align-self: flex-start;
|
||||
margin-top: $unit-half;
|
||||
padding: $unit $unit-2x;
|
||||
background: $grey-10;
|
||||
background: $gray-10;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-20;
|
||||
background: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -358,28 +358,28 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px $unit-2x;
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
p {
|
||||
margin: $unit-half 0;
|
||||
|
|
@ -418,7 +418,7 @@
|
|||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -444,13 +444,13 @@
|
|||
|
||||
.toggle-title {
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.toggle-description {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@
|
|||
.input-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-60;
|
||||
|
|
@ -245,15 +245,15 @@
|
|||
.image-preview-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-60;
|
||||
border-color: $gray-60;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
|
||||
&.has-image {
|
||||
border-style: solid;
|
||||
border-color: $grey-80;
|
||||
border-color: $gray-80;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -328,20 +328,20 @@
|
|||
}
|
||||
|
||||
.empty-icon {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
|
||||
.image-details {
|
||||
padding: $unit-2x;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
border-radius: $card-corner-radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -357,11 +357,11 @@
|
|||
|
||||
.detail-label {
|
||||
font-weight: 500;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -540,7 +540,7 @@
|
|||
.uploader-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-60;
|
||||
|
|
@ -551,7 +551,7 @@
|
|||
.help-text {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -561,9 +561,9 @@
|
|||
|
||||
// Drop Zone Styles
|
||||
.drop-zone {
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 200px;
|
||||
|
|
@ -600,21 +600,21 @@
|
|||
padding: $unit-4x;
|
||||
|
||||
.upload-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
.upload-main-text {
|
||||
margin: 0 0 $unit 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-sub-text {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -630,14 +630,14 @@
|
|||
.upload-text {
|
||||
margin: 0 0 $unit-2x 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
|
@ -655,7 +655,7 @@
|
|||
position: relative;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
min-height: 200px;
|
||||
|
||||
:global(.preview-image) {
|
||||
|
|
@ -696,13 +696,13 @@
|
|||
margin: 0 0 $unit-half 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -717,9 +717,9 @@
|
|||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
|
@ -746,8 +746,8 @@
|
|||
flex-shrink: 0;
|
||||
border-radius: $card-corner-radius;
|
||||
overflow: hidden;
|
||||
background-color: $grey-95;
|
||||
border: 1px solid $grey-90;
|
||||
background-color: $gray-95;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
:global(.preview-image) {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -653,8 +653,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: calc($unit * 1.5) $unit-2x;
|
||||
border-top: 1px solid $grey-80;
|
||||
background-color: $grey-5;
|
||||
border-top: 1px solid $gray-80;
|
||||
background-color: $gray-5;
|
||||
}
|
||||
|
||||
.footer-left,
|
||||
|
|
@ -666,7 +666,7 @@
|
|||
|
||||
.character-count {
|
||||
font-size: 13px;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-weight: 400;
|
||||
padding: 0 $unit;
|
||||
min-width: 30px;
|
||||
|
|
@ -730,7 +730,7 @@
|
|||
position: relative;
|
||||
background: white;
|
||||
border-radius: $unit-2x;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -747,7 +747,7 @@
|
|||
z-index: $z-index-dropdown;
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid $grey-80 !important;
|
||||
border: 1px solid $gray-80 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
|
|
@ -767,8 +767,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $unit-2x $unit-3x;
|
||||
border-top: 1px solid $grey-80;
|
||||
background-color: $grey-90;
|
||||
border-top: 1px solid $gray-80;
|
||||
background-color: $gray-90;
|
||||
}
|
||||
|
||||
.attached-photos {
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@
|
|||
margin-bottom: $unit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
.required-indicator {
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -283,13 +283,13 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
cursor: not-allowed;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
@ -364,7 +364,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
pointer-events: none;
|
||||
|
||||
&.prefix-icon {
|
||||
|
|
@ -401,12 +401,12 @@
|
|||
}
|
||||
|
||||
.input-help {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 12px;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-left: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.spinner {
|
||||
border: 3px solid $grey-80;
|
||||
border: 3px solid $gray-80;
|
||||
border-top-color: $primary-color;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
.loading-text {
|
||||
margin: 0;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -641,7 +641,7 @@
|
|||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -670,7 +670,7 @@
|
|||
flex-direction: column;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-3x;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
|
|
@ -692,14 +692,14 @@
|
|||
.label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-weight: 500;
|
||||
|
||||
&.color-value {
|
||||
|
|
@ -723,11 +723,11 @@
|
|||
margin-top: $unit-2x;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid $grey-70;
|
||||
border: 1px solid $gray-70;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-color: $grey-70;
|
||||
border-color: $gray-70;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -741,7 +741,7 @@
|
|||
.metadata-divider {
|
||||
border-radius: 1px;
|
||||
height: 2px;
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
margin: $unit-3x 0;
|
||||
}
|
||||
|
||||
|
|
@ -754,7 +754,7 @@
|
|||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -791,7 +791,7 @@
|
|||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -817,13 +817,13 @@
|
|||
|
||||
.toggle-title {
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.toggle-description {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
|
@ -840,7 +840,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -852,15 +852,15 @@
|
|||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
color: $grey-20;
|
||||
background: $gray-95;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
svg,
|
||||
|
|
@ -885,13 +885,13 @@
|
|||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-2x;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $grey-90;
|
||||
border-top: 2px solid $grey-50;
|
||||
border: 2px solid $gray-90;
|
||||
border-top: 2px solid $gray-50;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -899,9 +899,9 @@
|
|||
|
||||
.usage-item {
|
||||
padding: $unit-3x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
.usage-content {
|
||||
display: flex;
|
||||
|
|
@ -917,7 +917,7 @@
|
|||
|
||||
.usage-title {
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
|
|
@ -927,8 +927,8 @@
|
|||
}
|
||||
|
||||
.usage-type {
|
||||
background: $grey-85;
|
||||
color: $grey-30;
|
||||
background: $gray-85;
|
||||
color: $gray-30;
|
||||
padding: $unit-half $unit;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -945,20 +945,20 @@
|
|||
gap: $unit-3x;
|
||||
|
||||
.usage-field {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.usage-date {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-usage {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
font-style: italic;
|
||||
margin: $unit-2x 0 0 0;
|
||||
}
|
||||
|
|
@ -971,7 +971,7 @@
|
|||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin: 0 0 $unit-2x 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -986,19 +986,19 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $unit-half $unit-2x;
|
||||
background: $grey-95;
|
||||
border: 1px solid $grey-90;
|
||||
background: $gray-95;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: 20px;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
border-color: $grey-85;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
border-color: $gray-85;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@
|
|||
.input-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-60;
|
||||
|
|
@ -266,9 +266,9 @@
|
|||
|
||||
.selected-media {
|
||||
padding: $unit-2x;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
}
|
||||
|
||||
.media-preview {
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
height: 60px;
|
||||
border-radius: calc($card-corner-radius - 2px);
|
||||
overflow: hidden;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -304,8 +304,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $grey-80;
|
||||
color: $grey-30;
|
||||
background-color: $gray-80;
|
||||
color: $gray-30;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
.media-info {
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
margin: 0 0 $unit-half 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -337,7 +337,7 @@
|
|||
.file-meta {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -350,7 +350,7 @@
|
|||
.selection-summary {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -358,7 +358,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
background-color: white;
|
||||
transition: border-color 0.2s ease;
|
||||
|
|
@ -384,14 +384,14 @@
|
|||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.placeholder {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
|
|
|
|||
|
|
@ -409,7 +409,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -424,17 +424,17 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $unit-3x;
|
||||
border-top: 1px solid $grey-85;
|
||||
background: $grey-95;
|
||||
border-top: 1px solid $gray-85;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $unit-2x;
|
||||
padding: $unit-6x $unit-4x;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
|
|
@ -456,19 +456,19 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $unit-2x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.add-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-60;
|
||||
background: $grey-90;
|
||||
border-color: $gray-60;
|
||||
background: $gray-90;
|
||||
}
|
||||
|
||||
&.uploading {
|
||||
|
|
@ -483,29 +483,29 @@
|
|||
pointer-events: none;
|
||||
|
||||
.upload-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
.file-count {
|
||||
strong {
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -542,9 +542,9 @@
|
|||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
padding: $unit;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $image-corner-radius;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
|
|
@ -552,7 +552,7 @@
|
|||
height: 60px;
|
||||
border-radius: $unit;
|
||||
overflow: hidden;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -574,13 +574,13 @@
|
|||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
}
|
||||
|
|
@ -595,10 +595,10 @@
|
|||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
height: $unit-2x;
|
||||
background: $grey-100;
|
||||
background: $gray-100;
|
||||
padding: $unit-half;
|
||||
border-radius: $corner-radius-full;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-fill {
|
||||
|
|
@ -648,14 +648,14 @@
|
|||
}
|
||||
|
||||
.status-waiting {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
cursor: pointer;
|
||||
padding: $unit;
|
||||
border-radius: 50%;
|
||||
|
|
@ -669,7 +669,7 @@
|
|||
|
||||
.upload-results {
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
|
||||
|
|
@ -678,7 +678,7 @@
|
|||
margin-bottom: $unit-2x;
|
||||
|
||||
small {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
|
||||
.metadata-popover {
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $card-corner-radius;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
min-width: 420px;
|
||||
|
|
@ -215,13 +215,13 @@
|
|||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-footer {
|
||||
padding: $unit-3x;
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
align-self: flex-start;
|
||||
margin-top: $unit-half;
|
||||
padding: $unit $unit-2x;
|
||||
background: $grey-10;
|
||||
background: $gray-10;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-20;
|
||||
background: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,28 +261,28 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px $unit-2x;
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
p {
|
||||
margin: $unit-half 0;
|
||||
|
|
|
|||
|
|
@ -273,12 +273,12 @@
|
|||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 $unit-half 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -331,19 +331,19 @@
|
|||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
|
||||
.editor-help {
|
||||
font-size: 0.8rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0 0 $unit-2x 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $unit;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
top: calc(100% + $unit);
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit-2x;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
min-width: 140px;
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
}
|
||||
|
||||
.dropdown-icon {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -197,6 +197,6 @@
|
|||
.dropdown-label {
|
||||
font-size: 0.925rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@
|
|||
gap: $unit-2x;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.5;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
border: none;
|
||||
border-radius: $unit;
|
||||
cursor: pointer;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
right: 0;
|
||||
margin-top: $unit-half;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
|
@ -291,12 +291,12 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
margin: $unit-half 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-3x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -330,8 +330,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -371,7 +371,7 @@
|
|||
.error {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-3x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
.project-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
border: none;
|
||||
border-radius: $unit;
|
||||
cursor: pointer;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
right: 0;
|
||||
margin-top: $unit-half;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
|
@ -241,12 +241,12 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
@ -256,7 +256,7 @@
|
|||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
margin: $unit-half 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-3x;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,6 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
|
||||
&.active {
|
||||
background-color: white;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.08),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
.select {
|
||||
box-sizing: border-box;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -67,14 +67,14 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// Default variant
|
||||
&.select-default {
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
background: white;
|
||||
font-weight: 500;
|
||||
|
||||
|
|
@ -84,22 +84,22 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal variant
|
||||
&.select-minimal {
|
||||
border: none;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@
|
|||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -276,12 +276,12 @@
|
|||
justify-content: flex-end;
|
||||
margin-top: $unit-2x;
|
||||
padding-top: $unit-2x;
|
||||
border-top: 1px solid $grey-80;
|
||||
border-top: 1px solid $gray-80;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
|
||||
&.over-limit {
|
||||
color: $red-60;
|
||||
|
|
@ -297,11 +297,11 @@
|
|||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -316,14 +316,14 @@
|
|||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.description-input) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
padding: $unit-3x;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -343,16 +343,16 @@
|
|||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1rem;
|
||||
color: $grey-10;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
color: $gray-10;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
margin: $unit-half 0;
|
||||
}
|
||||
|
||||
|
|
@ -146,13 +146,13 @@
|
|||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
margin-bottom: $unit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
.required {
|
||||
color: $red-50;
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -191,14 +191,14 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
cursor: not-allowed;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
cursor: default;
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -246,13 +246,13 @@
|
|||
|
||||
.textarea-help {
|
||||
font-size: 13px;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 12px;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-left: $unit;
|
||||
|
||||
&.warning {
|
||||
|
|
|
|||
|
|
@ -577,7 +577,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
:global(.admin-filters) {
|
||||
|
|
@ -597,7 +597,7 @@
|
|||
height: 32px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -607,8 +607,8 @@
|
|||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -641,11 +641,11 @@
|
|||
justify-content: center;
|
||||
padding: $unit-6x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
min-height: 400px;
|
||||
|
||||
svg {
|
||||
color: $grey-70;
|
||||
color: $gray-70;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
|
|
@ -653,12 +653,12 @@
|
|||
margin: 0 0 $unit 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -672,7 +672,7 @@
|
|||
.media-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border: none;
|
||||
border-radius: $unit-2x;
|
||||
overflow: hidden;
|
||||
|
|
@ -702,7 +702,7 @@
|
|||
&.is-svg {
|
||||
padding: $unit-2x;
|
||||
box-sizing: border-box;
|
||||
background-color: $grey-95 !important;
|
||||
background-color: $gray-95 !important;
|
||||
|
||||
:global(.svg-image) {
|
||||
object-fit: contain !important;
|
||||
|
|
@ -716,7 +716,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
.hover-overlay {
|
||||
|
|
@ -760,23 +760,23 @@
|
|||
padding: $unit-4x;
|
||||
|
||||
.error-text {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
padding: $unit $unit-2x;
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $unit;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
border-color: $grey-70;
|
||||
background: $gray-95;
|
||||
border-color: $gray-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -789,7 +789,7 @@
|
|||
align-items: center;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-3x $unit-4x $unit-4x;
|
||||
border-top: 1px solid $grey-85;
|
||||
border-top: 1px solid $gray-85;
|
||||
background: white;
|
||||
z-index: $z-index-dropdown;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
|
|
@ -797,7 +797,7 @@
|
|||
|
||||
.action-summary {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -850,7 +850,7 @@
|
|||
padding: $unit;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@
|
|||
|
||||
.geolocation-node {
|
||||
margin: $unit-2x 0;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: $corner-radius-md;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
|
@ -221,8 +221,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $unit $unit-2x;
|
||||
background: $grey-95;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
background: $gray-95;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -237,12 +237,12 @@
|
|||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
.action-button {
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $corner-radius-sm;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
|
||||
&:hover {
|
||||
background: white;
|
||||
border-color: $grey-60;
|
||||
border-color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
height: 400px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
|
||||
&.editing {
|
||||
opacity: 0.8;
|
||||
|
|
@ -282,13 +282,13 @@
|
|||
margin: 0 0 $unit-half;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
padding: $unit-3x;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -317,19 +317,19 @@
|
|||
h3 {
|
||||
margin: 0 0 $unit;
|
||||
font-size: 1.25rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -258,8 +258,8 @@
|
|||
|
||||
.geolocation-placeholder {
|
||||
margin: $unit-2x 0;
|
||||
background: $grey-95;
|
||||
border: 2px dashed $grey-80;
|
||||
background: $gray-95;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $corner-radius-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -275,7 +275,7 @@
|
|||
|
||||
.label {
|
||||
margin: 0 0 $unit-2x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -297,16 +297,16 @@
|
|||
.quick-location {
|
||||
padding: 4px 12px;
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-60;
|
||||
color: $grey-10;
|
||||
border-color: $gray-60;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -318,7 +318,7 @@
|
|||
margin: 0 0 $unit-3x;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -350,14 +350,14 @@
|
|||
gap: $unit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: $corner-radius-sm;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -371,7 +371,7 @@
|
|||
text-align: right;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.map-picker-modal {
|
||||
|
|
@ -402,13 +402,13 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $unit-2x $unit-3x;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
position: fixed;
|
||||
z-index: 1050;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 4px;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
.menu-url {
|
||||
padding: $unit $unit-2x;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
|
|
@ -113,12 +113,12 @@
|
|||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
position: fixed;
|
||||
z-index: 1050;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 4px;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
.menu-url {
|
||||
padding: $unit $unit-2x;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
|
|
@ -113,12 +113,12 @@
|
|||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
position: fixed;
|
||||
z-index: 1051;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: $unit-2x;
|
||||
|
|
@ -111,10 +111,10 @@
|
|||
.url-input {
|
||||
flex: 1;
|
||||
padding: $unit $unit-2x;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
background: white;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
|
|
@ -141,11 +141,11 @@
|
|||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
|
|
@ -153,8 +153,8 @@
|
|||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $grey-95;
|
||||
color: $grey-20;
|
||||
background-color: $gray-95;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
position: fixed;
|
||||
z-index: 1050;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 4px;
|
||||
|
|
@ -78,13 +78,13 @@
|
|||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -329,11 +329,11 @@
|
|||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $grey-95;
|
||||
color: $grey-20;
|
||||
background: $gray-95;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
&.delete:hover {
|
||||
|
|
@ -355,10 +355,10 @@
|
|||
.edra-url-embed-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $corner-radius;
|
||||
overflow: hidden;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-60;
|
||||
border-color: $gray-60;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -387,7 +387,7 @@
|
|||
width: 200px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -410,7 +410,7 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.edra-url-embed-favicon {
|
||||
|
|
@ -429,7 +429,7 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -440,7 +440,7 @@
|
|||
.edra-url-embed-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -493,11 +493,11 @@
|
|||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
color: $grey-20;
|
||||
background: $gray-95;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -511,9 +511,9 @@
|
|||
padding-bottom: 56.25%; // 16:9 aspect ratio
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $corner-radius;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
|
|
@ -529,10 +529,10 @@
|
|||
.edra-youtube-embed-error {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
background: $grey-95;
|
||||
border: 1px solid $grey-85;
|
||||
background: $gray-95;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $corner-radius;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.edra-url-embed-wrapper.selected {
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
gap: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
min-width: 280px;
|
||||
|
|
@ -175,14 +175,14 @@
|
|||
|
||||
.link-url-display {
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
min-width: 120px;
|
||||
max-width: 320px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.375rem 0.5rem;
|
||||
background: $grey-80;
|
||||
background: $gray-80;
|
||||
border-radius: $unit-half;
|
||||
font-family: $font-stack;
|
||||
min-height: 32px;
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-85;
|
||||
background: $gray-85;
|
||||
}
|
||||
|
||||
&.copied {
|
||||
|
|
@ -208,8 +208,8 @@
|
|||
color: white;
|
||||
}
|
||||
100% {
|
||||
background-color: $grey-80; // Decay to original gray
|
||||
color: $grey-40;
|
||||
background-color: $gray-80; // Decay to original gray
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,11 +225,11 @@
|
|||
}
|
||||
|
||||
:global(.edra-command-button svg) {
|
||||
stroke: $grey-30;
|
||||
stroke: $gray-30;
|
||||
}
|
||||
|
||||
:global(.edra-command-button:hover svg) {
|
||||
stroke: $grey-10;
|
||||
stroke: $gray-10;
|
||||
}
|
||||
|
||||
:global(.edra-command-button.danger:hover svg) {
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
flex: 1;
|
||||
min-width: 220px;
|
||||
padding: 0.3125rem 0.75rem;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit-half;
|
||||
font-size: 0.875rem;
|
||||
font-family: $font-stack;
|
||||
|
|
@ -289,7 +289,7 @@
|
|||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-80;
|
||||
background-color: $gray-80;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
:global(.sonner-toast) {
|
||||
background: var(--page-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
border: 1px solid $grey-85 !important;
|
||||
border: 1px solid $gray-85 !important;
|
||||
border-radius: $corner-radius-lg !important;
|
||||
box-shadow: $card-shadow !important;
|
||||
font-size: $font-size-small !important;
|
||||
|
|
@ -143,11 +143,11 @@
|
|||
|
||||
&[data-type='info'] {
|
||||
background: var(--page-color) !important;
|
||||
border-color: $grey-70 !important;
|
||||
border-color: $gray-70 !important;
|
||||
color: var(--text-color) !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $grey-40 !important;
|
||||
color: $gray-40 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -185,8 +185,8 @@
|
|||
|
||||
:global(.sonner-toast-cancel) {
|
||||
background: transparent !important;
|
||||
color: $grey-40 !important;
|
||||
border: 1px solid $grey-70 !important;
|
||||
color: $gray-40 !important;
|
||||
border: 1px solid $gray-70 !important;
|
||||
border-radius: $corner-radius-sm !important;
|
||||
padding: $unit-half $unit-2x !important;
|
||||
font-size: $font-size-extra-small !important;
|
||||
|
|
@ -194,9 +194,9 @@
|
|||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95 !important;
|
||||
color: $grey-20 !important;
|
||||
border-color: $grey-60 !important;
|
||||
background: $gray-95 !important;
|
||||
color: $gray-20 !important;
|
||||
border-color: $gray-60 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -150,8 +150,8 @@
|
|||
.bio {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: $grey-00;
|
||||
background: $grey-100;
|
||||
color: $gray-00;
|
||||
background: $gray-100;
|
||||
border-radius: $card-corner-radius;
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
justify-content: center;
|
||||
height: 100vh;
|
||||
font-size: 1.125rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.admin-container {
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
.admin-card-layout {
|
||||
flex: 1;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
|
|
|||
|
|
@ -361,13 +361,13 @@
|
|||
.loading {
|
||||
padding: $unit-8x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid $grey-80;
|
||||
border-top-color: $grey-40;
|
||||
border: 3px solid $gray-80;
|
||||
border-top-color: $gray-40;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto $unit-2x;
|
||||
animation: spin 0.8s linear infinite;
|
||||
|
|
@ -387,7 +387,7 @@
|
|||
.empty-state {
|
||||
padding: $unit-8x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
.error {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -207,18 +207,18 @@
|
|||
padding: $unit-4x;
|
||||
background-color: white;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 $unit 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit-3x 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -252,15 +252,15 @@
|
|||
margin: 0 0 $unit 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
padding: $unit-2x;
|
||||
border-radius: $card-corner-radius;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
|
|
@ -166,18 +166,18 @@
|
|||
padding: $unit-4x;
|
||||
background-color: white;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 $unit 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit-3x 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -199,15 +199,15 @@
|
|||
margin: 0 0 $unit 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
padding: $unit-2x;
|
||||
border-radius: $card-corner-radius;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -243,11 +243,11 @@
|
|||
|
||||
&.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-5;
|
||||
color: $grey-00;
|
||||
background-color: $gray-5;
|
||||
color: $gray-00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@
|
|||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
flex-direction: column;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-3x;
|
||||
background-color: $grey-97;
|
||||
background-color: $gray-97;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -141,32 +141,32 @@
|
|||
padding: $unit-4x;
|
||||
background-color: white;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 $unit 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $unit-3x 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-media {
|
||||
margin-top: $unit-4x;
|
||||
padding: $unit-3x;
|
||||
background-color: $grey-95;
|
||||
background-color: $gray-95;
|
||||
border-radius: $card-corner-radius;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 $unit-2x 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
}
|
||||
|
||||
.media-details {
|
||||
|
|
@ -189,11 +189,11 @@
|
|||
p {
|
||||
margin: 0 0 $unit-half 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: $card-corner-radius;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
}
|
||||
|
||||
.media-info {
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
.size {
|
||||
margin: 0;
|
||||
font-size: 0.625rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -635,21 +635,21 @@
|
|||
cursor: pointer;
|
||||
|
||||
&.btn-primary {
|
||||
background-color: $grey-10;
|
||||
background-color: $gray-10;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-20;
|
||||
background-color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background-color: $grey-95;
|
||||
color: $grey-20;
|
||||
background-color: $gray-95;
|
||||
color: $gray-20;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-90;
|
||||
color: $grey-10;
|
||||
background-color: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -696,13 +696,13 @@
|
|||
.loading {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: $unit-8x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
p {
|
||||
margin-bottom: $unit-3x;
|
||||
|
|
@ -718,7 +718,7 @@
|
|||
}
|
||||
|
||||
.media-item {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $unit-2x;
|
||||
overflow: hidden;
|
||||
|
|
@ -729,7 +729,7 @@
|
|||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
|
|
@ -752,11 +752,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
|
||||
.file-type {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -768,7 +768,7 @@
|
|||
|
||||
.filename {
|
||||
font-size: 1rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -777,7 +777,7 @@
|
|||
|
||||
.filesize {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.media-info-bottom {
|
||||
|
|
@ -808,7 +808,7 @@
|
|||
align-items: center;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-2x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border: none;
|
||||
border-radius: $unit-2x;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -817,7 +817,7 @@
|
|||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-90;
|
||||
background-color: $gray-90;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -845,10 +845,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
border-radius: $unit;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -866,7 +866,7 @@
|
|||
|
||||
.filename {
|
||||
font-size: 0.925rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -881,12 +881,12 @@
|
|||
|
||||
.file-meta {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.alt-text-preview {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -898,7 +898,7 @@
|
|||
}
|
||||
|
||||
.media-indicator {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -909,16 +909,16 @@
|
|||
.action-btn {
|
||||
padding: $unit $unit-2x;
|
||||
background: transparent;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: 50px;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-40;
|
||||
color: $grey-10;
|
||||
border-color: $gray-40;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -933,17 +933,17 @@
|
|||
|
||||
.pagination-btn {
|
||||
padding: $unit $unit-3x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -954,7 +954,7 @@
|
|||
|
||||
.pagination-info {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -964,7 +964,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $unit-2x $unit-3x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $unit;
|
||||
margin-bottom: $unit-3x;
|
||||
gap: $unit-2x;
|
||||
|
|
|
|||
|
|
@ -519,7 +519,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -534,7 +534,7 @@
|
|||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -553,8 +553,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -569,14 +569,14 @@
|
|||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid $grey-80;
|
||||
border: 3px solid $gray-80;
|
||||
border-top-color: $red-60;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -606,7 +606,7 @@
|
|||
}
|
||||
|
||||
.summary-card {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -623,7 +623,7 @@
|
|||
h3 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
margin: 0 0 0.75rem 0;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -632,7 +632,7 @@
|
|||
.value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
|
|
@ -640,7 +640,7 @@
|
|||
|
||||
.label {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
|
|
@ -668,12 +668,12 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.selection-info {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -693,7 +693,7 @@
|
|||
|
||||
.files-table {
|
||||
background: white;
|
||||
border: 1px solid $grey-90;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -706,9 +706,9 @@
|
|||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-30;
|
||||
background: $grey-95;
|
||||
border-bottom: 1px solid $grey-90;
|
||||
color: $gray-30;
|
||||
background: $gray-95;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
|
||||
&.checkbox {
|
||||
width: 40px;
|
||||
|
|
@ -717,7 +717,7 @@
|
|||
|
||||
td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid $grey-95;
|
||||
border-bottom: 1px solid $gray-95;
|
||||
vertical-align: middle;
|
||||
|
||||
&.checkbox {
|
||||
|
|
@ -740,34 +740,34 @@
|
|||
.svg-preview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
&.file-path {
|
||||
.folder {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
&.size {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&.dimensions {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&.date {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
|
@ -779,7 +779,7 @@
|
|||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -809,11 +809,11 @@
|
|||
|
||||
h2 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
|
@ -826,7 +826,7 @@
|
|||
}
|
||||
|
||||
.size-info {
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -851,26 +851,26 @@
|
|||
|
||||
p {
|
||||
margin: 0.25rem 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.broken-references-section {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba($yellow-60, 0.2);
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
.broken-references-info {
|
||||
margin: 0 0 1rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -888,7 +888,7 @@
|
|||
|
||||
p {
|
||||
margin: 0.25rem 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -910,7 +910,7 @@
|
|||
margin: 0.75rem 0 0.75rem 1.5rem;
|
||||
padding: 0;
|
||||
list-style-type: disc;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
font-size: 0.875rem;
|
||||
|
||||
li {
|
||||
|
|
@ -926,7 +926,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -943,7 +943,7 @@
|
|||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
|
|||
|
|
@ -418,7 +418,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -430,16 +430,16 @@
|
|||
height: 36px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
border-color: $grey-70;
|
||||
color: $grey-10;
|
||||
background: $gray-95;
|
||||
border-color: $gray-70;
|
||||
color: $gray-10;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
|
|
@ -469,8 +469,8 @@
|
|||
}
|
||||
|
||||
.stat-card {
|
||||
background: $grey-97;
|
||||
border: 1px solid $grey-90;
|
||||
background: $gray-97;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
|
||||
|
|
@ -478,7 +478,7 @@
|
|||
margin: 0 0 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -487,7 +487,7 @@
|
|||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -499,8 +499,8 @@
|
|||
}
|
||||
|
||||
.action-card {
|
||||
background: $grey-100;
|
||||
border: 1px solid $grey-90;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-90;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
|
|
@ -520,18 +520,18 @@
|
|||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.action-details {
|
||||
background: $grey-97;
|
||||
background: $gray-97;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
|
||||
|
|
@ -543,7 +543,7 @@
|
|||
li {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -564,7 +564,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -576,10 +576,10 @@
|
|||
p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
|
||||
strong {
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -604,7 +604,7 @@
|
|||
|
||||
li {
|
||||
font-size: 0.75rem;
|
||||
color: $grey-30;
|
||||
color: $gray-30;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -615,6 +615,6 @@
|
|||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid $grey-90;
|
||||
border-top: 1px solid $gray-90;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -411,12 +411,12 @@
|
|||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed $grey-80;
|
||||
border: 2px dashed $gray-80;
|
||||
border-radius: $unit-2x;
|
||||
padding: $unit-6x $unit-4x;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: $unit-4x;
|
||||
|
||||
|
|
@ -439,19 +439,19 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $unit-2x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.add-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-60;
|
||||
background: $grey-90;
|
||||
border-color: $gray-60;
|
||||
background: $gray-90;
|
||||
}
|
||||
|
||||
&.uploading {
|
||||
|
|
@ -466,24 +466,24 @@
|
|||
pointer-events: none;
|
||||
|
||||
.upload-icon {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -508,7 +508,7 @@
|
|||
|
||||
.file-list {
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
margin-bottom: $unit-3x;
|
||||
|
|
@ -520,11 +520,11 @@
|
|||
align-items: center;
|
||||
margin-bottom: $unit-3x;
|
||||
padding-bottom: $unit-2x;
|
||||
border-bottom: 1px solid $grey-85;
|
||||
border-bottom: 1px solid $gray-85;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
|
|
@ -545,9 +545,9 @@
|
|||
align-items: center;
|
||||
gap: $unit-3x;
|
||||
padding: $unit-2x;
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
border-radius: $unit;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
|
|
@ -555,7 +555,7 @@
|
|||
height: 60px;
|
||||
border-radius: $unit;
|
||||
overflow: hidden;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -577,13 +577,13 @@
|
|||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.875rem;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
margin-bottom: $unit-half;
|
||||
}
|
||||
}
|
||||
|
|
@ -591,7 +591,7 @@
|
|||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: $grey-90;
|
||||
background: $gray-90;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: $unit-half;
|
||||
|
|
@ -642,14 +642,14 @@
|
|||
}
|
||||
|
||||
.status-waiting {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
cursor: pointer;
|
||||
padding: $unit;
|
||||
border-radius: 50%;
|
||||
|
|
@ -663,7 +663,7 @@
|
|||
|
||||
.upload-results {
|
||||
background: white;
|
||||
border: 1px solid $grey-85;
|
||||
border: 1px solid $gray-85;
|
||||
border-radius: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
|
||||
|
|
@ -672,7 +672,7 @@
|
|||
margin-bottom: $unit-2x;
|
||||
|
||||
small {
|
||||
color: $grey-50;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: $unit-8x $unit-4x;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
|
|
@ -402,7 +402,7 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 $unit-2x;
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -435,12 +435,12 @@
|
|||
gap: $unit-2x;
|
||||
|
||||
h2 {
|
||||
color: $grey-20;
|
||||
color: $gray-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -462,7 +462,7 @@
|
|||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -471,8 +471,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -480,7 +480,7 @@
|
|||
padding: $unit $unit-2x;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -490,8 +490,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -500,7 +500,7 @@
|
|||
top: calc(100% + $unit);
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
min-width: 150px;
|
||||
|
|
@ -517,14 +517,14 @@
|
|||
text-align: left;
|
||||
transition: background 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -547,7 +547,7 @@
|
|||
border: none;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -555,7 +555,7 @@
|
|||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -570,7 +570,7 @@
|
|||
|
||||
.error {
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -235,8 +235,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
padding: $unit $unit-2x;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $grey-40;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -254,8 +254,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-90;
|
||||
color: $grey-10;
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
top: calc(100% + $unit);
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid $grey-80;
|
||||
border: 1px solid $gray-80;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
min-width: 150px;
|
||||
|
|
@ -298,14 +298,14 @@
|
|||
text-align: left;
|
||||
transition: background 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95;
|
||||
background: $gray-95;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $grey-90;
|
||||
border-bottom: 1px solid $gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
border: none;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: $grey-10;
|
||||
color: $gray-10;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-60;
|
||||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue