OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Use variables for colors

Browse source
This commit is contained in:
Emi Matchu 2026-02-06 09:09:58 -08:00
parent 0a82ed7b68
commit d0acb1c7e5
1 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/stylesheets/wardrobe/show.css
View file

@ -15,19 +15,19 @@ select,
border-radius: 0.375rem;
border: 1px solid #ddd;
background: white;
color: #448844;
color: var(--color-primary);
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #f9f9f9;
border-color: #448844;
border-color: var(--color-primary);
}
&:focus {
outline: none;
border-color: #448844;
box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-muted);
}
}
@ -60,12 +60,12 @@ select,
padding: 0.75rem 1.5rem;
font-size: 1rem;
border: none;
background: #448844;
background: var(--color-primary);
color: white;
font-weight: 500;
&:hover {
background: #357535;
background: var(--color-primary-hover);
}
&:focus {
@ -110,7 +110,7 @@ select,
&:focus {
opacity: 1;
outline: 2px solid #448844;
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@ -238,26 +238,26 @@ select,
border-radius: 4px;
border: 1px solid #ddd;
background: white;
color: #448844;
color: var(--color-primary);
text-decoration: none;
transition: all 0.2s;
&:hover {
background: #f9f9f9;
border-color: #448844;
border-color: var(--color-primary);
}
}
.current,
em {
background: #448844;
background: var(--color-primary);
color: white;
border-color: #448844;
border-color: var(--color-primary);
font-style: normal;
&:hover {
background: #448844;
border-color: #448844;
background: var(--color-primary);
border-color: var(--color-primary);
}
}
@ -279,6 +279,12 @@ select,
=================================================================== */
body.wardrobe-v2 {
--color-primary: #448844;
--color-primary-hover: #357535;
--color-primary-muted: rgba(68, 136, 68, 0.1);
--color-accent: #48BB78;
--color-accent-glow: rgba(72, 187, 120, 0.4);
margin: 0;
padding: 0;
height: 100vh;
@ -595,8 +601,8 @@ pose-picker-popover {
/* Selected state */
input[type="radio"]:checked + .pose-thumbnail {
border-color: #48BB78;
box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.4);
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-glow);
transform: scale(1.05);
}
@ -748,7 +754,7 @@ pose-picker-popover {
/* Selected state */
input[type="radio"]:checked + .style-option-content {
border-color: #48BB78;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.3);
background: rgba(72, 187, 120, 0.1);
}
@ -790,7 +796,7 @@ pose-picker-popover {
h2 {
font-size: 1.25rem;
color: #448844;
color: var(--color-primary);
margin-top: 2rem;
}
@ -848,8 +854,8 @@ pose-picker-popover {
&:focus {
outline: none;
border-color: #448844;
box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-muted);
}
}
}
@ -923,7 +929,7 @@ pose-picker-popover {
min-width: 0;
font-size: 1.5rem;
font-weight: bold;
color: #448844;
color: var(--color-primary);
border: 1px solid transparent;
border-radius: 6px;
padding: 0.25rem 0.5rem;
@ -937,9 +943,9 @@ pose-picker-popover {
&:focus {
outline: none;
border-color: #448844;
border-color: var(--color-primary);
background: white;
box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
box-shadow: 0 0 0 3px var(--color-primary-muted);
}
&::placeholder {
@ -963,7 +969,7 @@ pose-picker-popover {
.outfit-name-static {
font-size: 1.5rem;
font-weight: bold;
color: #448844;
color: var(--color-primary);
padding: 0.25rem 0.5rem;
flex: 1;
min-width: 0;
@ -996,7 +1002,7 @@ outfit-rename-field[editing] .outfit-name-form {
.outfit-rename-name {
font-size: 1.5rem;
font-weight: bold;
color: #448844;
color: var(--color-primary);
padding: 0.25rem 0.5rem;
overflow: hidden;
text-overflow: ellipsis;