123 lines
2.0 KiB
SCSS
123 lines
2.0 KiB
SCSS
:root {
|
|
--color-primary: #FF0055;
|
|
--color-secondary: #0068FF;
|
|
--color-third: #00E3B4;
|
|
--color-heading: #2E3F58;
|
|
}
|
|
|
|
.highlight::selection {
|
|
background-color: var(--color-third);
|
|
}
|
|
|
|
.bg-color-primary {
|
|
background-color: var(--color-primary);
|
|
|
|
&.active:active {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
&.hover:hover:not(:active) {
|
|
background-color: #202B3C;
|
|
}
|
|
&.reverse {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
}
|
|
|
|
.bg-color-secondary {
|
|
background-color: var(--color-secondary);
|
|
|
|
&.active:active {
|
|
background-color: var(--color-primary);
|
|
}
|
|
&.hover:hover:not(:active) {
|
|
background-color: #202B3C;
|
|
}
|
|
&.reverse {
|
|
background-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.bg-color-third {
|
|
background-color: var(--color-third);
|
|
|
|
&.active:active {
|
|
background-color: var(--color-heading);
|
|
}
|
|
&.hover:hover:not(:active) {
|
|
background-color: #202B3C;
|
|
}
|
|
&.reverse {
|
|
background-color: var(--color-heading);
|
|
}
|
|
}
|
|
|
|
.bg-color-heading {
|
|
background-color: var(--color-heading);
|
|
|
|
&.active:active {
|
|
background-color: var(--color-third);
|
|
}
|
|
&.hover:hover:not(:active) {
|
|
background-color: #202B3C;
|
|
}
|
|
&.reverse {
|
|
background-color: var(--color-third);
|
|
}
|
|
}
|
|
|
|
.bg-color-white {
|
|
background: white;
|
|
}
|
|
|
|
.text-color-primary {
|
|
color: var(--color-primary);
|
|
|
|
&.active:active {
|
|
color: var(--color-secondary);
|
|
}
|
|
&.reverse {
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
|
|
.text-color-secondary {
|
|
color: var(--color-secondary);
|
|
|
|
&.active:active {
|
|
color: var(--color-primary);
|
|
}
|
|
&.reverse {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.text-color-third {
|
|
color: var(--color-third);
|
|
|
|
&.active:active {
|
|
color: var(--color-heading);
|
|
}
|
|
&.reverse {
|
|
color: var(--color-heading);
|
|
}
|
|
}
|
|
|
|
.text-color-heading {
|
|
color: var(--color-heading);
|
|
|
|
&.active:active {
|
|
color: white;
|
|
}
|
|
&.reverse {
|
|
color: var(--color-third);
|
|
}
|
|
}
|
|
|
|
.text-color-white {
|
|
color: white;
|
|
}
|
|
|
|
.text-hover:hover {
|
|
color: var(--color-secondary);
|
|
}
|