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