mirror of
https://github.com/Theaninova/TheaninovOS.git
synced 2025-12-12 19:46:20 +00:00
699 lines
11 KiB
SCSS
699 lines
11 KiB
SCSS
// Common colors
|
|
$hovercolor: rgba(128, 128, 128, 0.3);
|
|
$activecolor: rgba(128, 128, 128, 0.7);
|
|
$rounding_small: 0.818rem;
|
|
$rounding_mediumsmall: 0.955rem;
|
|
$rounding_medium: 1.159rem;
|
|
$rounding_mediumlarge: 1.364rem;
|
|
$rounding_large: 1.705rem;
|
|
|
|
.test {
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
#f4d609 0%,
|
|
#f4d609 10%,
|
|
#212121 10%,
|
|
#212121 20%,
|
|
#f4d609 20%,
|
|
#f4d609 30%,
|
|
#212121 30%,
|
|
#212121 40%,
|
|
#f4d609 40%,
|
|
#f4d609 50%,
|
|
#212121 50%,
|
|
#212121 60%,
|
|
#f4d609 60%,
|
|
#f4d609 70%,
|
|
#212121 70%,
|
|
#212121 80%,
|
|
#f4d609 80%,
|
|
#f4d609 90%,
|
|
#212121 90%,
|
|
#212121 100%
|
|
);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.test-size {
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
}
|
|
|
|
// Common rules
|
|
@mixin small-rounding {
|
|
border-radius: $rounding_small; // 10px
|
|
-gtk-outline-radius: $rounding_small; // 10px
|
|
}
|
|
|
|
@mixin normal-rounding {
|
|
border-radius: $rounding_medium; // small-rounding + 5px
|
|
-gtk-outline-radius: $rounding_medium; // small-rounding + 5px
|
|
}
|
|
|
|
@mixin large-rounding {
|
|
border-radius: $rounding_large; // normal-rounding + 10px
|
|
-gtk-outline-radius: $rounding_large; // normal-rounding + 10px
|
|
}
|
|
|
|
@mixin full-rounding {
|
|
border-radius: 9999px;
|
|
-gtk-outline-radius: 9999px;
|
|
}
|
|
|
|
@mixin titlefont {
|
|
// Geometric sans-serif
|
|
font-family: "Noto Sans", "Gabarito", "Lexend", sans-serif;
|
|
}
|
|
|
|
.txt-title {
|
|
@include titlefont;
|
|
font-size: 2.045rem;
|
|
}
|
|
|
|
.txt-title-small {
|
|
@include titlefont;
|
|
font-size: 1.364rem;
|
|
}
|
|
|
|
@mixin mainfont {
|
|
// Other clean sans-serif
|
|
font-family: "AR One Sans", "Inter", "Roboto", "Noto Sans", sans-serif;
|
|
// font-weight: 500;
|
|
}
|
|
|
|
@mixin icon-material {
|
|
// Material Design Icons
|
|
font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Symbols Sharp";
|
|
}
|
|
|
|
@mixin icon-nerd {
|
|
// Nerd Fonts
|
|
font-family: "SpaceMono Nerd Font", "JetBrainsMono Nerd Font", monospace;
|
|
}
|
|
|
|
@mixin techfont {
|
|
// Monospace for sys info n stuff. Doesn't have to be a nerd font, but it's cool.
|
|
font-family: "JetBrains Mono Nerd Font", "JetBrains Mono NL", "SpaceMono Nerd Font", monospace;
|
|
}
|
|
|
|
.techfont {
|
|
@include techfont;
|
|
}
|
|
|
|
@mixin subtext {
|
|
color: $subtext;
|
|
}
|
|
|
|
@mixin actiontext {
|
|
color: $actiontext;
|
|
}
|
|
|
|
@mixin elevation-safe {
|
|
background: $surface;
|
|
color: $onSurface;
|
|
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.69);
|
|
margin: 7px;
|
|
}
|
|
|
|
$elevation2_margin: 7px;
|
|
|
|
@mixin elevation2 {
|
|
box-shadow: 0px 2px 3px transparentize($shadow, 0.55);
|
|
margin: $elevation2_margin;
|
|
}
|
|
|
|
@mixin elevation2-margin {
|
|
margin: $elevation2_margin;
|
|
}
|
|
|
|
@mixin elevation2-padding {
|
|
padding: $elevation2_margin;
|
|
}
|
|
|
|
@mixin elevation3 {
|
|
box-shadow: 0px 2px 5px $shadow;
|
|
margin: 7px;
|
|
}
|
|
|
|
@mixin md3_decel {
|
|
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
}
|
|
|
|
@mixin md3_decel_fast {
|
|
transition: 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
}
|
|
|
|
@mixin md3_accel {
|
|
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
}
|
|
|
|
@mixin md3_accel_fast {
|
|
transition: 100ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
}
|
|
|
|
@mixin fluent_decel {
|
|
// Used for small transitions, as this looks clear
|
|
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
|
}
|
|
|
|
@mixin fluent_decel_long {
|
|
// Used for small transitions, as this looks clear
|
|
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
|
|
}
|
|
|
|
@mixin fluent_accel {
|
|
transition: 150ms cubic-bezier(0.42, 0, 1, 1);
|
|
}
|
|
|
|
@mixin noanim {
|
|
transition: 0ms;
|
|
}
|
|
|
|
@mixin anim-enter {
|
|
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
}
|
|
|
|
@mixin anim-exit {
|
|
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
}
|
|
|
|
@keyframes flyin-top {
|
|
from {
|
|
margin-top: -2.795rem;
|
|
}
|
|
|
|
to {
|
|
margin-top: 0rem;
|
|
}
|
|
}
|
|
|
|
@keyframes flyin-bottom {
|
|
from {
|
|
margin-top: 4.841rem;
|
|
margin-bottom: -4.841rem;
|
|
}
|
|
|
|
to {
|
|
margin-bottom: 0rem;
|
|
margin-top: 0rem;
|
|
}
|
|
}
|
|
|
|
@function tint($color, $percentage) {
|
|
@return mix(rgb(245, 250, 255), $color, $percentage);
|
|
}
|
|
|
|
@function shade($color, $percentage) {
|
|
@return mix(rgb(0, 0, 0), $color, $percentage);
|
|
}
|
|
|
|
.no-anim {
|
|
@include noanim;
|
|
}
|
|
|
|
.txt {
|
|
color: $onBackground;
|
|
}
|
|
|
|
.txt-shadow {
|
|
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
|
margin: 10px;
|
|
}
|
|
|
|
.txt-badonkers {
|
|
@include mainfont;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.txt-tiddies {
|
|
@include mainfont;
|
|
font-size: 2.7273rem;
|
|
}
|
|
|
|
.txt-hugeass {
|
|
@include mainfont;
|
|
font-size: 1.8182rem;
|
|
}
|
|
|
|
.txt-larger {
|
|
@include mainfont;
|
|
font-size: 1.6363rem;
|
|
}
|
|
|
|
.txt-large {
|
|
//16pt
|
|
@include mainfont;
|
|
font-size: 1.4545rem;
|
|
}
|
|
|
|
.txt-norm {
|
|
//14pt
|
|
@include mainfont;
|
|
font-size: 1.2727rem;
|
|
}
|
|
|
|
.txt-small {
|
|
//12pt
|
|
@include mainfont;
|
|
font-size: 1.0909rem;
|
|
}
|
|
|
|
.txt-smallie {
|
|
//11pt
|
|
@include mainfont;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.txt-smaller {
|
|
//10pt
|
|
@include mainfont;
|
|
font-size: 0.9091rem;
|
|
}
|
|
|
|
.txt-smaller-offset {
|
|
margin-top: -0.136rem;
|
|
}
|
|
|
|
.txt-tiny {
|
|
@include mainfont;
|
|
font-size: 0.7273rem;
|
|
}
|
|
|
|
.txt-subtext {
|
|
@include subtext;
|
|
}
|
|
|
|
.txt-action {
|
|
@include actiontext;
|
|
}
|
|
|
|
.txt-semibold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.txt-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.titlefont {
|
|
@include titlefont;
|
|
}
|
|
|
|
.mainfont {
|
|
@include mainfont;
|
|
}
|
|
|
|
.icon-material {
|
|
@include icon-material;
|
|
}
|
|
|
|
.separator-circle {
|
|
@include full-rounding;
|
|
background-color: $onSurface;
|
|
margin: 0rem 0.682rem;
|
|
min-width: 0.545rem;
|
|
min-height: 0.545rem;
|
|
}
|
|
|
|
$overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
|
|
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
|
|
|
|
.spacing-v-15 > box {
|
|
margin-bottom: 1.023rem;
|
|
}
|
|
|
|
.spacing-v-15 > box:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-15 > scrolledwindow {
|
|
margin-bottom: 1.023rem;
|
|
}
|
|
|
|
.spacing-v-15 > scrolledwindow:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-15 > revealer {
|
|
margin-bottom: 1.023rem;
|
|
}
|
|
|
|
.spacing-v-15 > revealer:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-15 > label {
|
|
margin-bottom: 1.023rem;
|
|
}
|
|
|
|
.spacing-v-15 > label:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-h-15 > box {
|
|
margin-right: 1.023rem;
|
|
}
|
|
|
|
.spacing-h-15 > box:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-15 > stack {
|
|
margin-right: 1.023rem;
|
|
}
|
|
|
|
.spacing-h-15 > stack:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-15 > label {
|
|
margin-right: 1.023rem;
|
|
}
|
|
|
|
.spacing-h-15 > label:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-15 > button {
|
|
margin-right: 1.023rem;
|
|
}
|
|
|
|
.spacing-h-15 > button:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-v-5 > box {
|
|
margin-bottom: 0.341rem;
|
|
}
|
|
|
|
.spacing-v-5 > box:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-5 > label {
|
|
margin-bottom: 0.341rem;
|
|
}
|
|
|
|
.spacing-v-5 > label:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-5 > button {
|
|
margin-bottom: 0.341rem;
|
|
}
|
|
|
|
.spacing-v-5 > button:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-5-revealer > revealer > box {
|
|
margin-bottom: 0.341rem;
|
|
}
|
|
|
|
.spacing-v-5-revealer > revealer:last-child > box {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > box {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > box:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > button {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > button:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > label {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > label:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > widget > box {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > widget:last-child > box {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > progressbar {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > progressbar:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > scrolledwindow {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > scrolledwindow:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-5 > scrollbar {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.spacing-h-5 > scrollbar:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-v-minus5 > box {
|
|
margin-bottom: -0.341rem;
|
|
}
|
|
|
|
.spacing-v-minus5 > box:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-minus5 > label {
|
|
margin-bottom: -0.341rem;
|
|
}
|
|
|
|
.spacing-v-minus5 > label:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > box {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > box:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > flowboxchild > button {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > flowboxchild:last-child > button {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > label {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > label:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > revealer {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > revealer:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > overlay {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > overlay:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > button {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > button:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > label {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > label:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > widget {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > widget:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-h-10 > stack {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.spacing-h-10 > stack:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-v-10 > box {
|
|
margin-bottom: 0.682rem;
|
|
}
|
|
|
|
.spacing-v-10 > box:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-v-10 > button {
|
|
margin-bottom: 0.682rem;
|
|
}
|
|
|
|
.spacing-v-10 > button:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.anim-enter {
|
|
@include anim-enter;
|
|
}
|
|
|
|
.anim-exit {
|
|
@include anim-exit;
|
|
}
|
|
|
|
@mixin elevation-border-softer {
|
|
border-top: 1px solid mix($t_t_surface, $t_onSurface, 80%);
|
|
border-left: 1px solid mix($t_t_surface, $t_onSurface, 80%);
|
|
border-right: 1px solid mix($t_t_surface, $t_onSurface, 85%);
|
|
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 85%);
|
|
}
|
|
|
|
@mixin elevation-border {
|
|
border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
|
|
border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
|
|
border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
|
|
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
|
|
}
|
|
|
|
@mixin elevation-border-heavier {
|
|
border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
|
|
border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
|
|
border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
|
|
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
|
|
}
|
|
|
|
@mixin elevation-border-transparent {
|
|
border-top: 1px solid transparent;
|
|
}
|
|
|
|
@mixin button-minsize {
|
|
min-width: 2.727rem;
|
|
min-height: 2.727rem;
|
|
}
|
|
|
|
.button-minsize {
|
|
@include button-minsize;
|
|
}
|
|
|
|
@mixin group-padding {
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.group-padding {
|
|
@include group-padding;
|
|
}
|
|
|
|
.margin-right-5 {
|
|
margin-right: 0.341rem;
|
|
}
|
|
|
|
.margin-left-5 {
|
|
margin-left: 0.341rem;
|
|
}
|
|
|
|
.margin-top-5 {
|
|
margin-top: 0.341rem;
|
|
}
|
|
|
|
.margin-bottom-5 {
|
|
margin-bottom: 0.341rem;
|
|
}
|
|
|
|
.margin-right-10 {
|
|
margin-right: 0.682rem;
|
|
}
|
|
|
|
.margin-left-10 {
|
|
margin-left: 0.682rem;
|
|
}
|
|
|
|
.margin-top-10 {
|
|
margin-top: 0.682rem;
|
|
}
|
|
|
|
.margin-bottom-10 {
|
|
margin-bottom: 0.682rem;
|
|
}
|
|
|
|
.invisible {
|
|
opacity: 0;
|
|
background-color: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
.spacing-h--5 > box {
|
|
margin-right: -0.341rem;
|
|
}
|
|
|
|
.spacing-h--5 > box:last-child {
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.spacing-v--5 > box {
|
|
margin-bottom: -0.341rem;
|
|
}
|
|
|
|
.spacing-v--5 > box:last-child {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.spacing-h--20 > box {
|
|
margin-left: -1.364rem;
|
|
}
|
|
|
|
.spacing-h--20 > box:first-child {
|
|
margin-left: 0rem;
|
|
}
|
|
|
|
$white: white;
|
|
$black: black;
|
|
|
|
.instant {
|
|
transition: 0ms;
|
|
}
|
|
|
|
.md3_decel {
|
|
@include md3_decel;
|
|
}
|