|
|
|
@ -24,13 +24,13 @@ html {
|
|
|
|
--border-selected-500: #909090;
|
|
|
|
--border-selected-500: #909090;
|
|
|
|
--text-500: #282828;
|
|
|
|
--text-500: #282828;
|
|
|
|
|
|
|
|
|
|
|
|
--accent-500: #d6ffc2;
|
|
|
|
--accent-500: #6cc16c;
|
|
|
|
--accent-100: #6cc16c;
|
|
|
|
--accent-100: #d6ffc2;
|
|
|
|
--accent-900: #244624;
|
|
|
|
--accent-900: #244624;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body.dark-mode {
|
|
|
|
body.dark-mode {
|
|
|
|
--bg-500: hsl(269, 24%, 18%);
|
|
|
|
--bg-500: hsl(269, 24%, 20%);
|
|
|
|
--bg-selected-500: #722da0;
|
|
|
|
--bg-selected-500: #722da0;
|
|
|
|
--bg-highlight-500: #a64edb;
|
|
|
|
--bg-highlight-500: #a64edb;
|
|
|
|
--border-400: hsl(269, 40%, 50%);
|
|
|
|
--border-400: hsl(269, 40%, 50%);
|
|
|
|
@ -40,9 +40,9 @@ body.dark-mode {
|
|
|
|
--border-selected-500: #b66af6;
|
|
|
|
--border-selected-500: #b66af6;
|
|
|
|
--text-500: #e6cff6;
|
|
|
|
--text-500: #e6cff6;
|
|
|
|
|
|
|
|
|
|
|
|
--accent-100: hsl(269, 73%, 74%);
|
|
|
|
--accent-100: hsl(269, 50%, 50%);
|
|
|
|
--accent-500: hsl(269, 50%, 60%);
|
|
|
|
--accent-500: hsl(269, 40%, 70%);
|
|
|
|
--accent-900: hsl(269, 20%, 80%);
|
|
|
|
--accent-900: hsl(269, 30%, 90%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$device-s-width: 600px;
|
|
|
|
$device-s-width: 600px;
|
|
|
|
@ -138,8 +138,8 @@ button,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.primary {
|
|
|
|
&.primary {
|
|
|
|
background: var(--accent-500);
|
|
|
|
background: var(--accent-100);
|
|
|
|
border-color: var(--accent-100);
|
|
|
|
border-color: var(--accent-500);
|
|
|
|
|
|
|
|
|
|
|
|
&:hover::after {
|
|
|
|
&:hover::after {
|
|
|
|
background: #00000020;
|
|
|
|
background: #00000020;
|
|
|
|
@ -316,11 +316,11 @@ button,
|
|
|
|
|
|
|
|
|
|
|
|
&.radio {
|
|
|
|
&.radio {
|
|
|
|
&.selected {
|
|
|
|
&.selected {
|
|
|
|
background: var(--accent-500);
|
|
|
|
background: var(--accent-100);
|
|
|
|
border-color: var(--accent-100);
|
|
|
|
border-color: var(--accent-500);
|
|
|
|
|
|
|
|
|
|
|
|
& + .radio {
|
|
|
|
& + .radio {
|
|
|
|
border-left-color: var(--accent-100);
|
|
|
|
border-left-color: var(--accent-500);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:hover::after {
|
|
|
|
&:hover::after {
|
|
|
|
|
