many changed, added nixos-hardware
This commit is contained in:
parent
f4f1c5bba7
commit
2accd81424
149 changed files with 19124 additions and 238 deletions
321
modules/styling/config/scss/_bar.scss
Normal file
321
modules/styling/config/scss/_bar.scss
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
// Made to be pixel-perfect with 11pt font size
|
||||
// 1rem = 11pt = 14.6666666667px
|
||||
|
||||
$black: black;
|
||||
$white: white;
|
||||
$bar_ws_width: 1.774rem;
|
||||
$bar_subgroup_bg: $surfaceVariant;
|
||||
|
||||
@mixin bar-group-rounding {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.bar-height {
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $t_background;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-sidespace {
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.bar-group-margin {
|
||||
padding: 0.273rem 0rem;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
padding: 0.205rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-less {
|
||||
padding: 0rem 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-system {
|
||||
padding: 0rem 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-music {
|
||||
padding-right: 1.023rem;
|
||||
padding-left: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-standalone {
|
||||
@include bar-group-rounding;
|
||||
-gtk-outline-radius: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-group-round {
|
||||
border-radius: 10rem;
|
||||
-gtk-outline-radius: 10rem;
|
||||
}
|
||||
|
||||
.bar-group-middle {
|
||||
border-radius: 0.477rem;
|
||||
-gtk-outline-radius: 0.477rem;
|
||||
}
|
||||
|
||||
.bar-group-left {
|
||||
border-radius: 0.477rem;
|
||||
-gtk-outline-radius: 0.477rem;
|
||||
border-top-left-radius: 1.364rem;
|
||||
border-bottom-left-radius: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-group-right {
|
||||
border-radius: 0.477rem;
|
||||
-gtk-outline-radius: 0.477rem;
|
||||
border-top-right-radius: 1.364rem;
|
||||
border-bottom-right-radius: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-ws-width {
|
||||
min-width: 18.341rem;
|
||||
}
|
||||
|
||||
.bar-ws {
|
||||
min-width: $bar_ws_width;
|
||||
color: mix($onBackground, $background, 40%);
|
||||
@if $darkmode ==true {
|
||||
color: mix($onBackground, $background, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $bar_subgroup_bg;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.bar-separator {
|
||||
@include full-rounding;
|
||||
min-width: 0.341rem;
|
||||
min-height: 0.341rem;
|
||||
background-color: mix($t_surface, $t_onSurface, 90%);
|
||||
margin: 0rem 0.341rem;
|
||||
}
|
||||
|
||||
.bar-clock-box {
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-clock {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@include titlefont;
|
||||
font-size: 1rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-full {
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog-full {
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate {
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-playing {
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-txt {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
@include icon-material;
|
||||
}
|
||||
|
||||
.bar-music-cover {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
min-width: 11.932rem;
|
||||
}
|
||||
|
||||
.bar-music-extended-bg {
|
||||
border-radius: 1.364rem;
|
||||
min-width: 34.091rem;
|
||||
}
|
||||
|
||||
.bar-music-extended-ctl-bg {
|
||||
border-radius: 1.364rem;
|
||||
background-color: rgba(30, 30, 30, 0.6);
|
||||
}
|
||||
|
||||
.bar-music-hide-false {
|
||||
@include menu_decel;
|
||||
transition-duration: 100ms;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bar-music-hide-true {
|
||||
@include menu_accel;
|
||||
transition-duration: 100ms;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bar-corner-spacing {
|
||||
min-width: $rounding_large;
|
||||
min-height: $rounding_large;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background-color: $t_background;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.corner-black {
|
||||
background-color: $black; // Hard code: fake screen corner
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.bar-topdesc {
|
||||
margin-top: -0.136rem;
|
||||
margin-bottom: -0.341rem;
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
.bar-space-button {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-space-button > box:first-child {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-space-button:hover > box:first-child,
|
||||
.bar-space-button:focus > box:first-child {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.bar-space-button:active > box:first-child {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.bar-space-button-leftmost {
|
||||
box {
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-space-area-rightmost > box {
|
||||
padding-right: 2.386rem;
|
||||
}
|
||||
|
||||
.bar-systray {
|
||||
@include full-rounding;
|
||||
margin: 0.137rem 0rem;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-systray-item {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.032rem;
|
||||
min-width: 1.032rem;
|
||||
font-size: 1.032rem;
|
||||
}
|
||||
|
||||
.bar-statusicons {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
margin: 0.273rem;
|
||||
padding: 0rem 0.614rem;
|
||||
}
|
||||
|
||||
.bar-statusicons-hover {
|
||||
background-color: mix($t_background, $t_onBackground, 90%);
|
||||
}
|
||||
|
||||
.bar-statusicons-active {
|
||||
background-color: mix($t_background, $t_onBackground, 80%);
|
||||
}
|
||||
|
||||
.bar-util-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
background-color: $bar_subgroup_bg;
|
||||
}
|
||||
|
||||
.bar-util-btn:hover,
|
||||
.bar-util-btn:focus {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.bar-util-btn:active {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
|
||||
}
|
||||
52
modules/styling/config/scss/_cheatsheet.scss
Normal file
52
modules/styling/config/scss/_cheatsheet.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.cheatsheet-bg {
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
margin-bottom: 0.682rem;
|
||||
background-color: $t_background;
|
||||
padding: 1.364rem;
|
||||
}
|
||||
|
||||
.cheatsheet-key {
|
||||
@include techfont;
|
||||
min-height: 1.364rem;
|
||||
min-width: 1.364rem;
|
||||
margin: 0.17rem;
|
||||
padding: 0.136rem 0.205rem;
|
||||
border-radius: 0.409rem;
|
||||
-gtk-outline-radius: 0.409rem;
|
||||
color: $primary;
|
||||
border: 0.068rem solid $primary;
|
||||
box-shadow: 0rem 0.136rem 0rem $primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cheatsheet-key-notkey {
|
||||
min-height: 1.364rem;
|
||||
padding: 0.136rem 0.205rem;
|
||||
margin: 0.17rem;
|
||||
color: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
// .cheatsheet-action {}
|
||||
|
||||
.cheatsheet-closebtn {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 2.386rem;
|
||||
min-height: 2.386rem;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:hover,
|
||||
.cheatsheet-closebtn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.cheatsheet-category-title {
|
||||
@include titlefont;
|
||||
font-size: 1.705rem;
|
||||
}
|
||||
132
modules/styling/config/scss/_colors.scss
Normal file
132
modules/styling/config/scss/_colors.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
///////////// COLOR MODIFICATIONS /////////////
|
||||
// Material colors provide excellent readability, but can be uninteresting.
|
||||
// This is an attempt to improve that.
|
||||
$transparency_enabled: false;
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
@if $darkmode ==true {
|
||||
$primary: mix($primary, white, 70%);
|
||||
$primaryContainer: mix($primaryContainer, white, 90%);
|
||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
$surface: mix($surface, $primaryContainer, 98%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 75%);
|
||||
// $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
|
||||
}
|
||||
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 87%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@if $transparency_enabled ==true {
|
||||
@if $darkmode ==true {
|
||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
$surface: mix($surface, $primaryContainer, 98%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 55%);
|
||||
}
|
||||
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 94%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
// Amounts
|
||||
$transparentize_amount: 0.3;
|
||||
$transparentize_surface_amount_less: 0.6;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
$transparentize_surface_amount: 0.7;
|
||||
$transparentize_surface_amount_more: 0.8;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
|
||||
@if $darkmode ==true {
|
||||
// Less transparency
|
||||
$transparentize_amount: 0.15;
|
||||
$transparentize_surface_amount_less: 0.5;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
$transparentize_surface_amount: 0.69;
|
||||
$transparentize_surface_amount_more: 0.9;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
}
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
$transparentize_amount: 0;
|
||||
}
|
||||
|
||||
// Extended material
|
||||
$success: #4f6354;
|
||||
$onSuccess: #ffffff;
|
||||
$successContainer: #d1e8d5;
|
||||
$onSuccessContainer: #0c1f13;
|
||||
|
||||
@if $darkmode ==true {
|
||||
// Dark variant
|
||||
$success: #b5ccba;
|
||||
$onSuccess: #213528;
|
||||
$successContainer: #374b3e;
|
||||
$onSuccessContainer: #d1e9d6;
|
||||
}
|
||||
|
||||
// Transparent versions
|
||||
$t_primary: transparentize($primary, $transparentize_amount);
|
||||
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
|
||||
$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
|
||||
$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
|
||||
$t_secondary: transparentize($secondary, $transparentize_amount);
|
||||
$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
|
||||
$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
|
||||
$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
|
||||
$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
|
||||
$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
|
||||
$t_tertiary: transparentize($tertiary, $transparentize_amount);
|
||||
$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
|
||||
$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
|
||||
$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
|
||||
$t_error: transparentize($error, $transparentize_amount);
|
||||
$t_onError: transparentize($onError, $transparentize_amount);
|
||||
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
|
||||
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
|
||||
$t_background: transparentize($background, $transparentize_amount);
|
||||
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
|
||||
$t_onBackground: transparentize($onBackground, $transparentize_amount);
|
||||
$t_surface: transparentize($surface, $transparentize_surface_amount);
|
||||
$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
|
||||
$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
|
||||
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
|
||||
$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
|
||||
$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
|
||||
$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
|
||||
$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
|
||||
$t_outline: transparentize($outline, $transparentize_amount);
|
||||
$t_shadow: transparentize($shadow, $transparentize_amount);
|
||||
$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
|
||||
$t_inverseOnSurface: transparentize($inverseOnSurface, $transparentize_amount);
|
||||
$t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
|
||||
// Transparent material (extended)
|
||||
$t_success: transparentize($error, $transparentize_amount);
|
||||
$t_onSuccess: transparentize($onError, $transparentize_amount);
|
||||
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onSuccessContainer: transparentize($onErrorContainer,
|
||||
$transparentize_amount);
|
||||
|
||||
// Others
|
||||
$hovercolor: mix($t_surface, $t_onSurface, 50%);
|
||||
$activecolor: mix($t_surface, $t_onSurface, 30%);
|
||||
$subtext: mix($onBackground, $background, 70%);
|
||||
$actiontext: mix($onBackground, $background, 85%);
|
||||
|
||||
// Terminal colors
|
||||
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
|
||||
$termfg: $onSurfaceVariant;
|
||||
$term0: $t_background;
|
||||
$term1: $error;
|
||||
$term2: $inversePrimary;
|
||||
$term3: $onPrimaryContainer;
|
||||
$term4: $onPrimaryContainer;
|
||||
$term5: $onSecondaryContainer;
|
||||
$term6: $primary;
|
||||
$term7: $onSurfaceVariant;
|
||||
234
modules/styling/config/scss/_common.scss
Normal file
234
modules/styling/config/scss/_common.scss
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
// * {
|
||||
// border: 1px solid $onSurfaceVariant; // Debugging
|
||||
// }
|
||||
|
||||
// *:focus {
|
||||
// outline: 1px solid mix($onSurface, $surface, 40%);
|
||||
// -gtk-outline-radius: $rounding_small;
|
||||
// }
|
||||
|
||||
* {
|
||||
selection {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
caret-color: $primary;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
menu {
|
||||
@include elevation-border-softer;
|
||||
padding: 0.681rem;
|
||||
background: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border-radius: 1.159rem;
|
||||
-gtk-outline-radius: 1.159rem;
|
||||
|
||||
animation-name: appear;
|
||||
animation-duration: 40ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
menubar>menuitem {
|
||||
border-radius: 0.545rem;
|
||||
-gtk-outline-radius: 0.545rem;
|
||||
min-width: 13.636rem;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
menu>menuitem {
|
||||
padding: 0.4em 1.5rem;
|
||||
background: transparent;
|
||||
transition: 0.2s ease background;
|
||||
border-radius: 0.545rem;
|
||||
-gtk-outline-radius: 0.545rem;
|
||||
}
|
||||
|
||||
menu>menuitem:hover,
|
||||
menu>menuitem:focus {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
menu>menuitem:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
|
||||
}
|
||||
|
||||
radio {
|
||||
@include full-rounding;
|
||||
margin: 0.273rem;
|
||||
min-width: 15px;
|
||||
min-height: 15px;
|
||||
border: 0.068rem solid $outline;
|
||||
}
|
||||
|
||||
// radio:first-child {
|
||||
// background-color: red;
|
||||
// }
|
||||
|
||||
radio:checked {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
background-color: $onPrimary;
|
||||
border: 0.477rem solid $primary;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
animation-name: appear;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: 1;
|
||||
@include normal-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border: 1px solid $onSurfaceVariant;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// Emoji Chooser structure
|
||||
// popover
|
||||
// ├── box.emoji-searchbar
|
||||
// │ ╰── entry.search
|
||||
// ╰── box.emoji-toolbar
|
||||
// ├── button.image-button.emoji-section
|
||||
// ├── ...
|
||||
// ╰── button.image-button.emoji-section
|
||||
|
||||
popover {
|
||||
@include elevation-border-softer;
|
||||
padding: 0.681rem;
|
||||
background: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border-radius: 1.159rem;
|
||||
-gtk-outline-radius: 1.159rem;
|
||||
|
||||
animation-name: appear;
|
||||
animation-duration: 40ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
|
||||
.configtoggle-box {
|
||||
padding: 0.205rem 0.341rem;
|
||||
border: 0.136rem solid transparent;
|
||||
}
|
||||
|
||||
.configtoggle-box:focus {
|
||||
border: 0.136rem solid mix($onSurface, $surface, 40%);
|
||||
}
|
||||
|
||||
.switch-bg {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
background-color: mix($surface, $background, 50%);
|
||||
border: 0.136rem solid $onSurface;
|
||||
min-width: 2.864rem;
|
||||
min-height: 1.637rem;
|
||||
}
|
||||
|
||||
.switch-bg-true {
|
||||
background-color: $primary;
|
||||
border: 0.136rem solid $primary;
|
||||
}
|
||||
|
||||
.switch-fg {
|
||||
@include full-rounding;
|
||||
@include menu_decel;
|
||||
background-color: $onSurface;
|
||||
color: $surface;
|
||||
min-width: 0.819rem;
|
||||
min-height: 0.819rem;
|
||||
margin-left: 0.477rem;
|
||||
}
|
||||
|
||||
.switch-fg-true {
|
||||
background-color: $onPrimary;
|
||||
color: $primary;
|
||||
min-width: 1.431rem;
|
||||
min-height: 1.431rem;
|
||||
margin-left: 1.431rem;
|
||||
}
|
||||
|
||||
.switch-fg-toggling-false {
|
||||
@include menu_decel;
|
||||
min-width: 1.636rem;
|
||||
min-height: 0.819rem;
|
||||
}
|
||||
|
||||
.segment-container {
|
||||
@include full-rounding;
|
||||
border: 0.068rem solid $outline;
|
||||
}
|
||||
|
||||
.segment-container>*:first-child {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.segment-container>* {
|
||||
border-right: 0.068rem solid $outline;
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.segment-container>*:last-child {
|
||||
border-right: 0rem solid transparent;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.segment-btn {
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.segment-btn:focus,
|
||||
.segment-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.segment-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.segment-btn-enabled:hover,
|
||||
.segment-btn-enabled:focus {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.gap-v-5 {
|
||||
min-height: 0.341rem;
|
||||
}
|
||||
|
||||
.gap-h-5 {
|
||||
min-width: 0.341rem;
|
||||
}
|
||||
|
||||
.gap-v-10 {
|
||||
min-height: 0.682rem;
|
||||
}
|
||||
|
||||
.gap-h-10 {
|
||||
min-width: 0.682rem;
|
||||
}
|
||||
|
||||
.gap-v-15 {
|
||||
min-height: 1.023rem;
|
||||
}
|
||||
|
||||
.gap-h-15 {
|
||||
min-width: 1.023rem;
|
||||
}
|
||||
94
modules/styling/config/scss/_desktopbackground.scss
Normal file
94
modules/styling/config/scss/_desktopbackground.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
.bg-wallpaper-transition {
|
||||
transition: 1000ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
font-size: 1px;
|
||||
}
|
||||
|
||||
@mixin bg-textshadow {
|
||||
// text-shadow: mix($shadow, $secondaryContainer, 50%) 1px 0px 3px;
|
||||
}
|
||||
|
||||
.bg-time-box {
|
||||
@include large-rounding;
|
||||
margin: 2.045rem;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.bg-time-clock {
|
||||
@include bg-textshadow;
|
||||
font-family: 'Gabarito';
|
||||
font-size: 5.795rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bg-time-date {
|
||||
@include bg-textshadow;
|
||||
font-family: 'Gabarito';
|
||||
font-size: 2.591rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bg-distro-box {
|
||||
@include large-rounding;
|
||||
margin: 2.045rem;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.bg-distro-txt {
|
||||
@include bg-textshadow;
|
||||
font-family: 'Gabarito';
|
||||
font-size: 1.432rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bg-distro-name {
|
||||
@include bg-textshadow;
|
||||
font-family: 'Gabarito';
|
||||
font-size: 1.432rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bg-graph {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 0.614rem;
|
||||
border: 0.682rem solid;
|
||||
}
|
||||
|
||||
.bg-quicklaunch-title {
|
||||
@include mainfont;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.bg-quicklaunch-btn {
|
||||
@include mainfont;
|
||||
@include full-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border: 0.068rem solid $subtext;
|
||||
min-width: 4.432rem;
|
||||
min-height: 2.045rem;
|
||||
padding: 0.273rem 0.682rem;
|
||||
}
|
||||
|
||||
.bg-quicklaunch-btn:hover,
|
||||
.bg-quicklaunch-btn:focus {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.bg-quicklaunch-btn:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.bg-system-bg {
|
||||
@include normal-rounding;
|
||||
// background-color: $background;
|
||||
}
|
||||
|
||||
.bg-system-circprog {
|
||||
@include fluent_decel_long;
|
||||
// margin-left: 0.273rem;
|
||||
min-width: 0.205rem; // Trough stroke width
|
||||
min-height: 4.091rem; // Diameter
|
||||
font-size: 0px;
|
||||
padding: 0rem;
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
31
modules/styling/config/scss/_dock.scss
Normal file
31
modules/styling/config/scss/_dock.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.dock-bg {
|
||||
@include large-rounding;
|
||||
@include elevation2;
|
||||
background-color: $t_background;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.dock-app-btn {
|
||||
@include normal-rounding;
|
||||
padding: 0.273rem;
|
||||
}
|
||||
|
||||
.dock-app-btn:hover,
|
||||
.dock-app-btn:focus {
|
||||
background-color: mix($t_surface, $t_onSurface, 95%);
|
||||
}
|
||||
|
||||
.dock-app-btn:active {
|
||||
background-color: mix($t_surface, $t_onSurface, 85%);
|
||||
}
|
||||
|
||||
.dock-app-icon {
|
||||
min-width: 3.409rem;
|
||||
min-height: 3.409rem;
|
||||
font-size: 3.409rem;
|
||||
}
|
||||
|
||||
.dock-separator {
|
||||
min-width: 0.068rem;
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
524
modules/styling/config/scss/_lib_classes.scss
Normal file
524
modules/styling/config/scss/_lib_classes.scss
Normal file
|
|
@ -0,0 +1,524 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.txt-title {
|
||||
@include titlefont;
|
||||
font-size: 2.045rem;
|
||||
}
|
||||
|
||||
.txt-title-small {
|
||||
@include titlefont;
|
||||
font-size: 1.364rem;
|
||||
}
|
||||
|
||||
.techfont {
|
||||
@include techfont;
|
||||
}
|
||||
|
||||
.txt-reading {
|
||||
@include readingfont;
|
||||
}
|
||||
|
||||
.no-anim {
|
||||
@include noanim;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.txt-primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.txt-onSecondaryContainer {
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.txt-onSurfaceVariant {
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.txt-shadow {
|
||||
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.txt-gigantic {
|
||||
@include mainfont;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.txt-massive {
|
||||
@include mainfont;
|
||||
font-size: 2.7273rem;
|
||||
}
|
||||
|
||||
.txt-hugerass {
|
||||
@include mainfont;
|
||||
font-size: 2.045rem;
|
||||
}
|
||||
|
||||
.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-tiny {
|
||||
@include mainfont;
|
||||
font-size: 0.7273rem;
|
||||
}
|
||||
|
||||
.txt-poof {
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.txt-subtext {
|
||||
@include subtext;
|
||||
}
|
||||
|
||||
.txt-action {
|
||||
@include actiontext;
|
||||
}
|
||||
|
||||
.txt-thin {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.txt-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.txt-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include full-rounding;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
padding: 0.682rem 1.023rem;
|
||||
}
|
||||
|
||||
.titlefont {
|
||||
@include titlefont;
|
||||
}
|
||||
|
||||
.mainfont {
|
||||
@include mainfont;
|
||||
}
|
||||
|
||||
.icon-material {
|
||||
@include icon-material;
|
||||
}
|
||||
|
||||
.icon-nerd {
|
||||
@include icon-nerd;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
background-color: $outline;
|
||||
min-width: 0.068rem;
|
||||
min-height: 0.068rem;
|
||||
}
|
||||
|
||||
.separator-circle {
|
||||
@include full-rounding;
|
||||
background-color: $outline;
|
||||
margin: 0rem 0.682rem;
|
||||
min-width: 0.273rem;
|
||||
min-height: 0.273rem;
|
||||
}
|
||||
|
||||
.spacing-h-3 > * {
|
||||
margin-right: 0.205rem;
|
||||
}
|
||||
|
||||
.spacing-h-3 > *:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-3 > * {
|
||||
margin-bottom: 0.205rem;
|
||||
}
|
||||
|
||||
.spacing-v-3 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-15 > * {
|
||||
margin-bottom: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-v-15 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > * {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > *:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > revealer > * {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > revealer:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > scrolledwindow > * {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15 > scrolledwindow: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 > * {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer > revealer > * {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer > revealer:last-child > * {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer > scrolledwindow > * {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer > scrolledwindow:last-child > * {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-4 > * {
|
||||
margin-right: 0.273rem;
|
||||
}
|
||||
|
||||
.spacing-h-4 > *:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-4 > overlay > *:first-child {
|
||||
margin-right: 0.273rem;
|
||||
}
|
||||
|
||||
.spacing-h-4 > overlay:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > * {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > *:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > widget > * {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > widget:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > revealer > * {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > revealer:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > scrolledwindow > * {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5 > scrolledwindow:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5 > * {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10 > * {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10 > *: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 > scrolledwindow > * {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10 > scrolledwindow:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10 > flowboxchild > * {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10 > flowboxchild:last-child > * {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-10 > * {
|
||||
margin-bottom: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v-10 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-20 > * {
|
||||
margin-right: 1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h-20 > *:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-20 > * {
|
||||
margin-bottom: 1.364rem;
|
||||
}
|
||||
|
||||
.spacing-v-20 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.anim-enter {
|
||||
@include anim-enter;
|
||||
}
|
||||
|
||||
.anim-exit {
|
||||
@include anim-exit;
|
||||
}
|
||||
|
||||
.button-minsize {
|
||||
@include button-minsize;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.margin-right-15 {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.margin-left-15 {
|
||||
margin-left: 1.023rem;
|
||||
}
|
||||
|
||||
.margin-top-15 {
|
||||
margin-top: 1.023rem;
|
||||
}
|
||||
|
||||
.margin-bottom-15 {
|
||||
margin-bottom: 1.023rem;
|
||||
}
|
||||
|
||||
.width-10 {
|
||||
min-width: 0.682rem;
|
||||
}
|
||||
|
||||
.height-10 {
|
||||
min-width: 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 > * {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--10 > * {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--10 > *:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10 > * {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10 > * {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10 > *:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--20 > * {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--20 > *:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.instant {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
.menu-decel {
|
||||
@include menu_decel;
|
||||
}
|
||||
.element-show {
|
||||
@include element_easeInOut;
|
||||
}
|
||||
.element-hide {
|
||||
@include element_easeInOut;
|
||||
}
|
||||
.element-move {
|
||||
@include element_easeInOut;
|
||||
}
|
||||
.element-decel {
|
||||
@include element_decel;
|
||||
}
|
||||
.element-bounceout {
|
||||
@include element_bounceOut;
|
||||
}
|
||||
.element-accel {
|
||||
@include element_accel;
|
||||
}
|
||||
.page-move {
|
||||
@include page_move;
|
||||
}
|
||||
223
modules/styling/config/scss/_lib_mixins.scss
Normal file
223
modules/styling/config/scss/_lib_mixins.scss
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
// 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;
|
||||
|
||||
// Common rules
|
||||
@mixin small-rounding {
|
||||
border-radius: $rounding_small;
|
||||
-gtk-outline-radius: $rounding_small;
|
||||
}
|
||||
|
||||
@mixin normal-rounding {
|
||||
border-radius: $rounding_medium;
|
||||
-gtk-outline-radius: $rounding_medium;
|
||||
}
|
||||
|
||||
@mixin large-rounding {
|
||||
border-radius: $rounding_large;
|
||||
-gtk-outline-radius: $rounding_large;
|
||||
}
|
||||
|
||||
@mixin full-rounding {
|
||||
border-radius: 9999px;
|
||||
-gtk-outline-radius: 9999px;
|
||||
}
|
||||
|
||||
@mixin titlefont {
|
||||
// Geometric sans-serif
|
||||
font-family: "Gabarito", "Poppins", "Lexend", sans-serif;
|
||||
}
|
||||
|
||||
@mixin mainfont {
|
||||
// Other clean sans-serif
|
||||
font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter",
|
||||
"Roboto", "Ubuntu", "Noto Sans", sans-serif;
|
||||
// font-weight: 500;
|
||||
}
|
||||
|
||||
@mixin icon-material {
|
||||
// Material Design Icons
|
||||
font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined",
|
||||
"Material Symbols Sharp";
|
||||
}
|
||||
|
||||
@mixin icon-nerd {
|
||||
// Nerd Fonts
|
||||
font-family: "SpaceMono NF", "SpaceMono Nerd Font", "JetBrains Mono NF",
|
||||
"JetBrains Mono 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 NF", "JetBrains Mono Nerd Font",
|
||||
"JetBrains Mono NL", "SpaceMono NF", "SpaceMono Nerd Font", monospace;
|
||||
}
|
||||
|
||||
@mixin readingfont {
|
||||
// The most readable fonts, for a comfortable reading experience
|
||||
// in stuff like ChatGPT widget
|
||||
font-family: "Lexend", "Noto Sans", sans-serif;
|
||||
// font-weight: 500;
|
||||
}
|
||||
|
||||
@mixin subtext {
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
@mixin actiontext {
|
||||
color: $actiontext;
|
||||
}
|
||||
|
||||
$elevation_margin: 0.476rem;
|
||||
|
||||
@mixin elevation-safe {
|
||||
background: $surface;
|
||||
color: $onSurface;
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.69);
|
||||
margin: $elevation_margin;
|
||||
}
|
||||
|
||||
@mixin elevation2 {
|
||||
box-shadow: 0px 2px 3px transparentize($shadow, 0.55);
|
||||
margin: $elevation_margin;
|
||||
}
|
||||
|
||||
@mixin elevation2-margin {
|
||||
margin: $elevation_margin;
|
||||
}
|
||||
|
||||
@mixin elevation2-padding {
|
||||
padding: $elevation_margin;
|
||||
}
|
||||
|
||||
@mixin elevation3 {
|
||||
box-shadow: 0px 2px 5px $shadow;
|
||||
margin: $elevation_margin;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menu_decel {
|
||||
transition: 300ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
@mixin menu_decel_fast {
|
||||
transition: 170ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
@mixin menu_accel {
|
||||
transition: 160ms cubic-bezier(0.38, 0.04, 1, 0.07);
|
||||
}
|
||||
|
||||
@mixin menu_accel_fast {
|
||||
transition: 100ms cubic-bezier(0.38, 0.04, 1, 0.07);
|
||||
}
|
||||
|
||||
@mixin fluent_decel {
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
@mixin fluent_decel_long {
|
||||
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);
|
||||
}
|
||||
|
||||
@mixin element_decel {
|
||||
transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
@mixin element_bounceOut {
|
||||
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@mixin element_accel {
|
||||
transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
|
||||
}
|
||||
@mixin element_easeInOut {
|
||||
transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
@mixin page_move {
|
||||
transition: 500ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(rgb(245, 250, 255), $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(rgb(0, 0, 0), $color, $percentage);
|
||||
}
|
||||
|
||||
$overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
|
||||
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
|
||||
|
||||
@mixin elevation-border-softer {
|
||||
border-top: 1px solid mix($t_t_surface, $t_onSurface, 90%);
|
||||
border-left: 1px solid mix($t_t_surface, $t_onSurface, 90%);
|
||||
border-right: 1px solid mix($t_t_surface, $t_onSurface, 95%);
|
||||
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 95%);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
$white: white;
|
||||
$black: black;
|
||||
29
modules/styling/config/scss/_material.scss
Normal file
29
modules/styling/config/scss/_material.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
$darkmode: true;
|
||||
$primary: #ffb1c3;
|
||||
$onPrimary: #66002a;
|
||||
$primaryContainer: #861c40;
|
||||
$onPrimaryContainer: #ffd9e0;
|
||||
$secondary: #e4bcc3;
|
||||
$onSecondary: #42292e;
|
||||
$secondaryContainer: #5c3f45;
|
||||
$onSecondaryContainer: #ffd9df;
|
||||
$tertiary: #ecbe91;
|
||||
$onTertiary: #462a08;
|
||||
$tertiaryContainer: #60401d;
|
||||
$onTertiaryContainer: #ffdcb9;
|
||||
$error: #ffb4a9;
|
||||
$onError: #680003;
|
||||
$errorContainer: #930006;
|
||||
$onErrorContainer: #ffb4a9;
|
||||
$colorbarbg: #130F10;
|
||||
$background: #130F10;
|
||||
$onBackground: #ecdfe0;
|
||||
$surface: #201a1b;
|
||||
$onSurface: #ecdfe0;
|
||||
$surfaceVariant: #514345;
|
||||
$onSurfaceVariant: #d6c1c4;
|
||||
$outline: #9f8c8f;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #ecdfe0;
|
||||
$inverseOnSurface: #362f30;
|
||||
$inversePrimary: #a53557;
|
||||
155
modules/styling/config/scss/_music.scss
Normal file
155
modules/styling/config/scss/_music.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
@import './material';
|
||||
@import './musicmaterial';
|
||||
@import './wal';
|
||||
@import './musicwal';
|
||||
@import './colors';
|
||||
@import './lib_mixins';
|
||||
$music_gradient1: mix($color1, $background, 50%);
|
||||
|
||||
// @if $darkmode ==true {
|
||||
// $music_gradient1: mix($color1, $background, 30%);
|
||||
// }
|
||||
|
||||
$music_gradient2: $color3;
|
||||
$music_gradient3: $color5;
|
||||
$music_colorstart_transparentize: 0.3;
|
||||
$music_extra_transparentize: 0.15;
|
||||
|
||||
$secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5);
|
||||
$onSecondaryContainer: mix($color7, $color2, 90%);
|
||||
@if $darkmode ==false {
|
||||
$onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
|
||||
}
|
||||
|
||||
.osd-music {
|
||||
@include menu_decel;
|
||||
@include elevation2;
|
||||
margin-top: 0.313rem;
|
||||
@include normal-rounding;
|
||||
// min-height: 7.159rem;
|
||||
min-width: 29.659rem;
|
||||
background-color: $t_background;
|
||||
padding: 0rem 1.023rem;
|
||||
background: // Inspired by Amberol
|
||||
linear-gradient(127deg, transparentize($music_gradient1, $music_colorstart_transparentize), transparentize($music_gradient1, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%),
|
||||
linear-gradient(217deg, transparentize($music_gradient2, $music_colorstart_transparentize), transparentize($music_gradient2, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%),
|
||||
radial-gradient(circle at 0% 100%, $color4 13%, rgba(0, 0, 0, 0) 100%),
|
||||
linear-gradient(336deg, transparentize($music_gradient3, $music_colorstart_transparentize), transparentize($music_gradient3, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%),
|
||||
linear-gradient($background, $background), // We don't want wallpaper tint, so here's a fully opaque surface
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
.osd-music-cover-fallback {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
// margin: 1.023rem;
|
||||
min-width: 7.5rem;
|
||||
min-height: 7.5rem;
|
||||
background-color: $t_surface;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-cover {
|
||||
@include small-rounding;
|
||||
@include menu_decel;
|
||||
// Must be -top and -bottom or it'll mess up horizontal spacing
|
||||
margin-top: 1.023rem;
|
||||
margin-bottom: 1.023rem;
|
||||
min-width: 7.5rem;
|
||||
min-height: 7.5rem;
|
||||
}
|
||||
|
||||
.osd-music-cover-art {
|
||||
@include small-rounding;
|
||||
min-width: 7.5rem;
|
||||
min-height: 7.5rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.osd-music-info {
|
||||
margin: 1.023rem 0rem;
|
||||
}
|
||||
|
||||
.osd-music-title {
|
||||
@include element_decel;
|
||||
@include titlefont;
|
||||
font-size: 1.364rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-artists {
|
||||
@include element_decel;
|
||||
@include mainfont;
|
||||
font-size: 0.955rem;
|
||||
color: mix($onSecondaryContainer, $secondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.osd-music-pill {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
@include titlefont;
|
||||
min-width: 1.833rem;
|
||||
padding: 0.273rem 0.682rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-controls {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
@include titlefont;
|
||||
min-width: 1.833rem;
|
||||
padding: 0.205rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-controlbtn {
|
||||
@include menu_decel;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
@include full-rounding;
|
||||
}
|
||||
|
||||
.osd-music-controlbtn:hover,
|
||||
.osd-music-controlbtn:focus {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||
}
|
||||
|
||||
.osd-music-controlbtn:active {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 85%);
|
||||
}
|
||||
|
||||
.osd-music-controlbtn-txt {
|
||||
@include element_decel;
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
@include icon-material;
|
||||
font-size: 1.364rem;
|
||||
margin: -0.1rem 0rem;
|
||||
}
|
||||
|
||||
.osd-music-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.409rem; // width of progress
|
||||
min-height: 3.068rem;
|
||||
padding: 0.273rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-playstate {
|
||||
@include menu_decel;
|
||||
min-height: 3.068rem;
|
||||
min-width: 3.068rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-playstate-btn>label {
|
||||
transition: 50ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
@include icon-material;
|
||||
font-size: 1.364rem;
|
||||
margin: -0.1rem 0rem;
|
||||
}
|
||||
0
modules/styling/config/scss/_musicmaterial.scss
Normal file
0
modules/styling/config/scss/_musicmaterial.scss
Normal file
26
modules/styling/config/scss/_musicwal.scss
Normal file
26
modules/styling/config/scss/_musicwal.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// SCSS Variables
|
||||
// Generated by 'wal'
|
||||
$wallpaper: "/home/end/.cache/ags/media/8100fe8cfe618b3be1ae9c6c5379e90af63bc3fc";
|
||||
|
||||
// Special
|
||||
$background: #121520;
|
||||
$foreground: #e8e1e5;
|
||||
$cursor: #e8e1e5;
|
||||
|
||||
// Colors
|
||||
$color0: #121520;
|
||||
$color1: #8F7A9E;
|
||||
$color2: #688BB7;
|
||||
$color3: #9B93B0;
|
||||
$color4: #D0AAB0;
|
||||
$color5: #A9A2CB;
|
||||
$color6: #C9BAD3;
|
||||
$color7: #e8e1e5;
|
||||
$color8: #a29da0;
|
||||
$color9: #8F7A9E;
|
||||
$color10: #688BB7;
|
||||
$color11: #9B93B0;
|
||||
$color12: #D0AAB0;
|
||||
$color13: #A9A2CB;
|
||||
$color14: #C9BAD3;
|
||||
$color15: #e8e1e5;
|
||||
243
modules/styling/config/scss/_notifications.scss
Normal file
243
modules/styling/config/scss/_notifications.scss
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
$notif_surface: $t_background;
|
||||
|
||||
@mixin notif-rounding {
|
||||
@include normal-rounding;
|
||||
}
|
||||
|
||||
.notif-low {
|
||||
@include notif-rounding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.notif-normal {
|
||||
@include notif-rounding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.notif-critical {
|
||||
@include notif-rounding;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.notif-clicked-low {
|
||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.notif-clicked-normal {
|
||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.notif-clicked-critical {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 95%);
|
||||
}
|
||||
|
||||
.popup-notif-low {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $notif_surface;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-normal {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $notif_surface;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-critical {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-low {
|
||||
background-color: mix($notif_surface, $onBackground, 94%);
|
||||
}
|
||||
|
||||
.popup-notif-clicked-normal {
|
||||
background-color: mix($notif_surface, $onBackground, 94%);
|
||||
}
|
||||
|
||||
.popup-notif-clicked-critical {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 96%);
|
||||
}
|
||||
|
||||
.notif-body-low {
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
||||
}
|
||||
|
||||
.notif-body-normal {
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
||||
}
|
||||
|
||||
.notif-body-critical {
|
||||
color: mix($onSecondaryContainer, $secondaryContainer, 67%);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
@include full-rounding;
|
||||
min-width: 3.409rem;
|
||||
min-height: 3.409rem;
|
||||
font-size: 3.409rem;
|
||||
}
|
||||
|
||||
.notif-icon-material {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-low {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-normal {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-critical {
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.notif-expand-btn {
|
||||
@include notif-rounding;
|
||||
min-width: 1.841rem;
|
||||
min-height: 1.841rem;
|
||||
}
|
||||
|
||||
.notif-expand-btn:hover,
|
||||
.notif-expand-btn:focus {
|
||||
background: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-expand-btn:active {
|
||||
background: $activecolor;
|
||||
}
|
||||
|
||||
.notif-listaction-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.notif-listaction-btn:hover,
|
||||
.notif-listaction-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-listaction-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.notif-listaction-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-listaction-btn-enabled:hover,
|
||||
.notif-listaction-btn-enabled:focus {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||
}
|
||||
|
||||
.notif-listaction-btn-enabled:active {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 75%);
|
||||
}
|
||||
|
||||
.osd-notif {
|
||||
@include notif-rounding;
|
||||
background-color: transparentize($background,
|
||||
$transparentize_surface_amount_subtract_surface );
|
||||
min-width: 30.682rem;
|
||||
}
|
||||
|
||||
.notif-circprog-low {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-circprog-normal {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-circprog-critical {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.notif-actions {
|
||||
min-height: 2.045rem;
|
||||
}
|
||||
|
||||
.notif-action {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.notif-action-low {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-low:focus,
|
||||
.notif-action-low:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-action-low:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.notif-action-normal {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-normal:focus,
|
||||
.notif-action-normal:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-action-normal:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.notif-action-critical {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-critical:focus,
|
||||
.notif-action-critical:hover {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
|
||||
}
|
||||
|
||||
.notif-action-critical:active {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
|
||||
}
|
||||
128
modules/styling/config/scss/_osd.scss
Normal file
128
modules/styling/config/scss/_osd.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
// .osd-window {
|
||||
// margin-top: 2.727rem;
|
||||
// }
|
||||
|
||||
.osd-bg {
|
||||
min-width: 8.864rem;
|
||||
min-height: 3.409rem;
|
||||
}
|
||||
|
||||
.osd-value {
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
background-color: $t_background;
|
||||
border-radius: 1.023rem;
|
||||
padding: 0.625rem 1.023rem;
|
||||
padding-top: 0.313rem;
|
||||
}
|
||||
|
||||
.osd-progress {
|
||||
min-height: 0.955rem;
|
||||
min-width: 0.068rem;
|
||||
padding: 0rem;
|
||||
border-radius: 10rem;
|
||||
@include fluent_decel;
|
||||
|
||||
trough {
|
||||
min-height: 0.954rem;
|
||||
min-width: 0.068rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
// border: 0.068rem solid $onSecondaryContainer;
|
||||
}
|
||||
|
||||
progress {
|
||||
@include fluent_decel;
|
||||
min-height: 0.680rem;
|
||||
min-width: 0.680rem;
|
||||
margin: 0rem 0.137rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $onSecondaryContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-icon {
|
||||
color: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
.osd-label {
|
||||
font-size: 1.023rem;
|
||||
font-weight: 500;
|
||||
color: $onBackground;
|
||||
margin-top: 0.341rem;
|
||||
}
|
||||
|
||||
.osd-value-txt {
|
||||
@include titlefont;
|
||||
font-size: 1.688rem;
|
||||
font-weight: 500;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.osd-notifs {
|
||||
padding-top: 0.313rem;
|
||||
}
|
||||
|
||||
.osd-colorscheme {
|
||||
border-radius: 1.023rem;
|
||||
background-color: $t_background;
|
||||
padding: 1.023rem;
|
||||
@include elevation2;
|
||||
}
|
||||
|
||||
.osd-color {
|
||||
@include full-rounding;
|
||||
min-width: 2.727rem;
|
||||
min-height: 1.705rem;
|
||||
padding: 0rem 0.341rem;
|
||||
font-weight: bold;
|
||||
|
||||
box {
|
||||
@include full-rounding;
|
||||
margin: 0.409rem;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-color-primary {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
box { background-color: $onPrimary; }
|
||||
}
|
||||
.osd-color-primaryContainer {
|
||||
background-color: $primaryContainer;
|
||||
color: $onPrimaryContainer;
|
||||
box { background-color: $onPrimaryContainer; }
|
||||
}
|
||||
.osd-color-secondary {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
box { background-color: $onSecondary; }
|
||||
}
|
||||
.osd-color-secondaryContainer {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
box { background-color: $onSecondaryContainer; }
|
||||
}
|
||||
.osd-color-surfaceVariant {
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
box { background-color: $onSurfaceVariant; }
|
||||
}
|
||||
.osd-color-surface {
|
||||
background-color: $surface;
|
||||
color: $onSurface;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
.osd-color-background {
|
||||
background-color: $background;
|
||||
color: $onBackground;
|
||||
box { background-color: $onBackground; }
|
||||
}
|
||||
|
||||
.osd-show {
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
.osd-hide {
|
||||
transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
118
modules/styling/config/scss/_osk.scss
Normal file
118
modules/styling/config/scss/_osk.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
$osk_key_height: 2.5rem;
|
||||
$osk_key_width: 2.5rem;
|
||||
$osk_key_padding: 0.188rem;
|
||||
$osk_key_rounding: 0.682rem;
|
||||
$osk_key_fontsize: 1.091rem;
|
||||
|
||||
.osk-window {
|
||||
// @include menu_decel_fast;
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
// min-height: 29.591rem;
|
||||
// min-width: 50rem;
|
||||
background-color: $t_background;
|
||||
}
|
||||
|
||||
.osk-body {
|
||||
padding: 1.023rem;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.osk-show {
|
||||
@include menu_decel_fast;
|
||||
}
|
||||
|
||||
.osk-hide {
|
||||
margin-top: 30.682rem;
|
||||
margin-bottom: -30.682rem;
|
||||
// opacity: 0;
|
||||
@include menu_accel_fast;
|
||||
}
|
||||
|
||||
.osk-dragline {
|
||||
@include full-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
min-height: 0.273rem;
|
||||
min-width: 10.227rem;
|
||||
margin-top: 0.545rem;
|
||||
margin-bottom: 0.205rem;
|
||||
}
|
||||
|
||||
.osk-key {
|
||||
border-radius: $osk_key_rounding;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $osk_key_padding;
|
||||
font-weight: 500;
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key:hover,
|
||||
.osk-key:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.osk-key:active {
|
||||
background-color: $activecolor;
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key-active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.osk-key-normal {
|
||||
min-width: $osk_key_width;
|
||||
min-height: $osk_key_height;
|
||||
}
|
||||
|
||||
.osk-key-fn {
|
||||
min-width: $osk_key_width * 1.005;
|
||||
min-height: $osk_key_height / 2;
|
||||
}
|
||||
|
||||
.osk-key-tab {
|
||||
min-width: $osk_key_width * 1.6;
|
||||
min-height: $osk_key_height;
|
||||
}
|
||||
|
||||
.osk-key-caps {
|
||||
min-width: $osk_key_width * 1.9;
|
||||
min-height: $osk_key_height;
|
||||
}
|
||||
|
||||
.osk-key-shift {
|
||||
min-width: $osk_key_width * 2.5;
|
||||
min-height: $osk_key_height;
|
||||
}
|
||||
|
||||
.osk-key-control {
|
||||
min-width: $osk_key_width * 1.3;
|
||||
min-height: $osk_key_height;
|
||||
}
|
||||
|
||||
.osk-control-button {
|
||||
border-radius: $osk_key_rounding;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
font-weight: 500;
|
||||
font-size: $osk_key_fontsize;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.osk-control-button:hover,
|
||||
.osk-control-button:focus {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.osk-control-button:active {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key-empty, .osk-key-empty:hover, .osk-key-empty:focus {
|
||||
min-width: $osk_key_width;
|
||||
min-height: $osk_key_height;
|
||||
background-color: transparent;
|
||||
}
|
||||
139
modules/styling/config/scss/_overview.scss
Normal file
139
modules/styling/config/scss/_overview.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
.overview-window {
|
||||
margin-top: 2.727rem;
|
||||
}
|
||||
|
||||
.overview-search-box {
|
||||
@include element_decel;
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
min-width: 13.636rem;
|
||||
min-height: 3.409rem;
|
||||
padding: 0rem 1.364rem;
|
||||
padding-right: 2.864rem;
|
||||
background-color: $t_background;
|
||||
color: $onBackground;
|
||||
|
||||
selection {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.overview-search-box-extended {
|
||||
min-width: 25.909rem;
|
||||
caret-color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.overview-search-prompt {
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
.overview-search-icon {
|
||||
margin: 0rem 1.023rem;
|
||||
}
|
||||
|
||||
.overview-search-prompt-box {
|
||||
margin-left: -18.545rem;
|
||||
margin-right: $elevation_margin + 0.068rem;
|
||||
}
|
||||
|
||||
.overview-search-icon-box {
|
||||
margin-left: -18.545rem;
|
||||
margin-right: $elevation_margin + 0.068rem;
|
||||
}
|
||||
|
||||
.overview-search-results {
|
||||
// min-height: 2.813rem;
|
||||
// min-height: 37.5rem;
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
min-width: 28.773rem;
|
||||
padding: 0.682rem;
|
||||
background-color: $t_background;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.overview-search-results-icon {
|
||||
margin: 0rem 0.682rem;
|
||||
font-size: 2.386rem;
|
||||
min-width: 2.386rem;
|
||||
min-height: 2.386rem;
|
||||
}
|
||||
|
||||
.overview-search-results-txt {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.overview-search-results-txt-cmd {
|
||||
margin-right: 0.682rem;
|
||||
@include techfont;
|
||||
font-size: 1.227rem;
|
||||
}
|
||||
|
||||
.overview-search-result-btn {
|
||||
@include normal-rounding;
|
||||
padding: 0.341rem;
|
||||
min-width: 2.386rem;
|
||||
min-height: 2.386rem;
|
||||
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.overview-search-result-btn:hover,
|
||||
.overview-search-result-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.overview-search-result-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.overview-tasks {
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
padding: 0.341rem;
|
||||
background-color: $t_background;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.overview-tasks-workspace {
|
||||
@include normal-rounding;
|
||||
// @include elevation-border;
|
||||
margin: 0.341rem;
|
||||
background-color: mix($t_t_surface, $t_onSurface, 93%);
|
||||
}
|
||||
|
||||
.overview-tasks-workspace-number {
|
||||
@include mainfont;
|
||||
color: mix($t_onSurface, $t_surface, 93%);
|
||||
}
|
||||
|
||||
.overview-tasks-window {
|
||||
@include normal-rounding;
|
||||
@include menu_decel;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSecondaryContainer;
|
||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
||||
}
|
||||
|
||||
.overview-tasks-window:hover,
|
||||
.overview-tasks-window:focus {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 95%);
|
||||
}
|
||||
|
||||
.overview-tasks-window:active {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-selected {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
36
modules/styling/config/scss/_session.scss
Normal file
36
modules/styling/config/scss/_session.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.session-bg {
|
||||
margin-top: -2.727rem;
|
||||
background-color: mix($t_t_background, $background, 40%);
|
||||
}
|
||||
|
||||
.session-button {
|
||||
@include large-rounding;
|
||||
min-width: 8.182rem;
|
||||
min-height: 8.182rem;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.session-button-focused {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.session-button-desc {
|
||||
background-color: mix($surface, $surfaceVariant, 50%);
|
||||
color: mix($onSurface, $onSurfaceVariant, 50%);
|
||||
border-bottom-left-radius: $rounding_large;
|
||||
border-bottom-right-radius: $rounding_large;
|
||||
padding: 0.205rem 0.341rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.session-button-cancel {
|
||||
@include large-rounding;
|
||||
min-width: 8.182rem;
|
||||
min-height: 5.455rem;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
font-size: 3rem;
|
||||
}
|
||||
859
modules/styling/config/scss/_sidebars.scss
Normal file
859
modules/styling/config/scss/_sidebars.scss
Normal file
|
|
@ -0,0 +1,859 @@
|
|||
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
||||
$textboxColor: mix($surface, $surfaceVariant, 80%);
|
||||
$system: $secondary;
|
||||
$onSystem: $onSecondary;
|
||||
$chatgpt: $primary;
|
||||
$onChatgpt: $onPrimary;
|
||||
|
||||
@mixin group-padding {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
@include menu_decel;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
padding: 1.023rem;
|
||||
}
|
||||
|
||||
.sideright-show {
|
||||
@include menu_decel;
|
||||
}
|
||||
|
||||
.sideright-hide {
|
||||
@include menu_accel;
|
||||
margin-right: -30.682rem;
|
||||
// opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
@include menu_decel;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
padding: 1.023rem;
|
||||
}
|
||||
|
||||
.sideleft-show {
|
||||
@include menu_decel;
|
||||
}
|
||||
|
||||
.sideleft-hide {
|
||||
margin-left: -30.682rem;
|
||||
// opacity: 0;
|
||||
@include menu_accel;
|
||||
}
|
||||
|
||||
.sidebar-group {
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-group-nopad {
|
||||
@include normal-rounding;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-group-invisible {
|
||||
@include group-padding;
|
||||
}
|
||||
|
||||
.sidebar-group-invisible-morehorizpad {
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-togglesbox {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
color: $onSurface;
|
||||
min-width: 2.727rem;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton:hover,
|
||||
.sidebar-iconbutton:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
@include element_decel;
|
||||
padding: 0rem $rounding_small;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-button:hover,
|
||||
.sidebar-button:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-button:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-button-active {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-button-active:hover,
|
||||
.sidebar-button-active:focus {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-button-active:active {
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-buttons-separator {
|
||||
min-width: 0.068rem;
|
||||
min-height: 0.068rem;
|
||||
background-color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-navrail {
|
||||
// background-color: $t_surface;
|
||||
padding: 0rem $rounding_medium;
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn>box>label {
|
||||
@include full-rounding;
|
||||
@include menu_decel;
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn:hover>box>label:first-child,
|
||||
.sidebar-navrail-btn:focus>box>label:first-child {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn:active>box>label:first-child {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn-active>box>label:first-child {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn-active:hover>box>label:first-child,
|
||||
.sidebar-navrail-btn-active:focus>box>label:first-child {
|
||||
background-color: mix($secondaryContainer, $hovercolor, 90%);
|
||||
color: mix($onSecondaryContainer, $hovercolor, 90%);
|
||||
}
|
||||
|
||||
.sidebar-sysinfo-grouppad {
|
||||
padding: 1.159rem;
|
||||
}
|
||||
|
||||
.sidebar-memory-ram-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: $rounding_small;
|
||||
min-height: 4.091rem;
|
||||
padding: 0.409rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.sidebar-memory-swap-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: $rounding_small;
|
||||
min-height: 2.255rem;
|
||||
padding: 0.409rem;
|
||||
margin: 0.918rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.sidebar-cpu-circprog {
|
||||
min-width: $rounding_small;
|
||||
min-height: 3.409rem;
|
||||
padding: 0.409rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
@include fluent_decel_long;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar {
|
||||
trough {
|
||||
@include full-rounding;
|
||||
min-width: 0.545rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
slider {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-width: 0.273rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $t_onSurfaceVariant;
|
||||
}
|
||||
|
||||
slider:hover,
|
||||
slider:focus {
|
||||
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
|
||||
}
|
||||
|
||||
slider:active {
|
||||
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 2.523rem;
|
||||
min-width: 2.523rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn:hover,
|
||||
.sidebar-calendar-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-txt {
|
||||
margin-left: -10.341rem;
|
||||
margin-right: -10.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today:hover,
|
||||
.sidebar-calendar-btn-today:focus {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today:active {
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-othermonth {
|
||||
color: mix($onSurface, $surface, 50%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-header {
|
||||
margin: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
padding: 0rem 0.682rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:hover,
|
||||
.sidebar-calendar-monthyear-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:active {
|
||||
background-color: $activecolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:active {
|
||||
background-color: $activecolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-selector-tab {
|
||||
@include small-rounding;
|
||||
@include element_decel;
|
||||
min-height: 2.5rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-selector-tab:hover,
|
||||
.sidebar-selector-tab:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-selector-tab:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-selector-tab-active>box>label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.sidebar-selector-highlight-offset {
|
||||
margin-top: -0.205rem;
|
||||
margin-bottom: 0.205rem;
|
||||
}
|
||||
|
||||
.sidebar-selector-highlight {
|
||||
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
|
||||
color: $primary;
|
||||
// padding: 0rem 2.045rem;
|
||||
min-height: 0.205rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item {
|
||||
padding-right: 0.545rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-even {
|
||||
background-color: $t_t_surfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action {
|
||||
@include element_decel;
|
||||
border-radius: 9999px;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:hover,
|
||||
.sidebar-todo-item-action:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-todo-crosser {
|
||||
transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms;
|
||||
min-width: 0rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-crosser-crossed {
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.sidebar-todo-crosser-removed {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.sidebar-todo-new {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
color: $onSecondaryContainer;
|
||||
margin: 0.341rem;
|
||||
padding: 0.205rem 0.545rem;
|
||||
border: 0.068rem solid $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-todo-new,
|
||||
.sidebar-todo-new:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
||||
}
|
||||
|
||||
.sidebar-todo-new:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
color: $onSecondaryContainer;
|
||||
border: 0.068rem solid $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-todo-add:hover,
|
||||
.sidebar-todo-add:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
border: 0.068rem solid $primary;
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available:hover,
|
||||
.sidebar-todo-add-available:focus {
|
||||
background-color: mix($primary, $onPrimary, 97%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
}
|
||||
|
||||
.sidebar-todo-entry {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
caret-color: $onSurfaceVariant;
|
||||
margin: 0rem 0.341rem;
|
||||
min-height: 1.773rem;
|
||||
min-width: 0rem;
|
||||
padding: 0.205rem 0.682rem;
|
||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
|
||||
}
|
||||
|
||||
.sidebar-todo-entry:focus {
|
||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.sidebar-module {
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-module-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-module-scripts-button {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
}
|
||||
|
||||
$colorpicker_rounding: 0.341rem;
|
||||
|
||||
.sidebar-module-colorpicker-wrapper {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-cursorwrapper {
|
||||
padding: 0.341rem 0.136rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-hue {
|
||||
min-height: 13.636rem;
|
||||
min-width: 1.091rem;
|
||||
border-radius: $colorpicker_rounding;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-hue-cursor {
|
||||
background-color: $onBackground;
|
||||
border: 0.136rem solid $onBackground;
|
||||
min-height: 0.136rem;
|
||||
margin-top: -0.136rem;
|
||||
border-radius: $colorpicker_rounding;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-saturationandlightness-wrapper {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-saturationandlightness {
|
||||
min-height: 13.636rem;
|
||||
min-width: 13.636rem;
|
||||
border-radius: $colorpicker_rounding;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-saturationandlightness-cursorwrapper {
|
||||
padding: 0.341rem;
|
||||
margin-top: -0.409rem;
|
||||
margin-left: -0.409rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-saturationandlightness-cursor {
|
||||
@include full-rounding;
|
||||
border: 0.136rem solid white;
|
||||
min-width: 0.682rem;
|
||||
min-height: 0.682rem;
|
||||
margin-top: -0.409rem;
|
||||
margin-left: -0.409rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-result-area {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-module-colorpicker-result-box {
|
||||
border-radius: $colorpicker_rounding;
|
||||
min-width: 2.045rem;
|
||||
min-height: 0.682rem;
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher-icon {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 2.182rem;
|
||||
min-height: 2.182rem;
|
||||
font-size: 1.406rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher-icon-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-viewport {
|
||||
@include element_decel;
|
||||
// margin: 0.682rem 0rem;
|
||||
padding: 0.682rem 0rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-textarea {
|
||||
@include normal-rounding;
|
||||
background-color: $textboxColor;
|
||||
color: $onSurfaceVariant;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-entry {
|
||||
color: $onSurfaceVariant;
|
||||
caret-color: $onSurfaceVariant;
|
||||
min-height: 1.773rem;
|
||||
min-width: 0rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-wrapper {
|
||||
transition: 400ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
.sidebar-chat-wrapper-extended {
|
||||
min-height: 7.500rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-send {
|
||||
@include element_decel;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
border-radius: $rounding_medium - 0.681rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-send:hover,
|
||||
.sidebar-chat-send:focus {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-send:active {
|
||||
background-color: mix($surfaceVariant, $onBackground, 80%);
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available:hover,
|
||||
.sidebar-chat-send-available:focus {
|
||||
background-color: mix($primary, $onPrimary, 97%);
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
}
|
||||
|
||||
.sidebar-chat-message {
|
||||
margin: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 0.136rem;
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator-user {
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator-bot {
|
||||
background-color: $chatgpt;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator-System {
|
||||
background-color: $system;
|
||||
}
|
||||
|
||||
.sidebar-chat-name {
|
||||
@include titlefont;
|
||||
padding: 0.341rem;
|
||||
margin-left: -0.136rem;
|
||||
padding-left: 0.818rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-txtblock {
|
||||
margin-left: -0.136rem;
|
||||
padding: 0.341rem;
|
||||
padding-left: 0.818rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-txt {
|
||||
@include readingfont;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock {
|
||||
@include normal-rounding;
|
||||
// @include elevation2;
|
||||
background-color: $termbg;
|
||||
color: $termfg;
|
||||
margin: 0rem 0.682rem;
|
||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar {
|
||||
@include mainfont;
|
||||
margin: 0.273rem;
|
||||
margin-bottom: 0rem;
|
||||
background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
|
||||
color: $onSecondaryContainer;
|
||||
border-radius: $rounding_medium - 0.273rem;
|
||||
border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||
border-top-left-radius: $rounding_small + 0.068rem;
|
||||
border-top-right-radius: $rounding_small + 0.068rem;
|
||||
padding: 0.341rem 0.477rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-txt {
|
||||
@include full-rounding;
|
||||
padding: 0.273rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
padding: 0.273rem 0.477rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn:hover,
|
||||
.sidebar-chat-codeblock-topbar-btn:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-code {
|
||||
@include techfont;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-divider {
|
||||
min-height: 1px;
|
||||
background-color: $sidebar_chat_textboxareaColor;
|
||||
margin: 0rem 0.545rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-welcome-txt {
|
||||
margin: 0rem 3.409rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-settings-toggles {
|
||||
margin: 0rem 5.455rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-welcome-icon {
|
||||
@include full-rounding;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-welcome-logo {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
@include icon-material;
|
||||
min-height: 4.773rem;
|
||||
min-width: 4.773rem;
|
||||
font-size: 3.076rem;
|
||||
background-color: $onBackground;
|
||||
color: $background;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
padding: 0.341rem 0.477rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action {
|
||||
@include element_decel;
|
||||
background-color: $textboxColor;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action:hover,
|
||||
.sidebar-chat-chip-action:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action-active {
|
||||
color: $sidebar_chat_textboxareaColor;
|
||||
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-toggle {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
padding: 0.341rem 0.477rem;
|
||||
background-color: $textboxColor;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-toggle:focus,
|
||||
.sidebar-chat-chip-toggle:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-toggle:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-pin {
|
||||
@include small-rounding;
|
||||
@include element_decel;
|
||||
min-height: 2.386rem;
|
||||
min-width: 2.386rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-pin:hover,
|
||||
.sidebar-pin:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-pin:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled {
|
||||
background-color: $primary;
|
||||
|
||||
label {
|
||||
color: $onPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:hover,
|
||||
.sidebar-pin-enabled:focus {
|
||||
background-color: mix($primary, $onPrimary, 90%);
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
}
|
||||
|
||||
.sidebar-waifu-heading {
|
||||
@include titlefont;
|
||||
padding: 0.341rem;
|
||||
margin-left: -0.136rem;
|
||||
padding-left: 0.818rem;
|
||||
}
|
||||
|
||||
.sidebar-waifu-content {
|
||||
margin-left: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-waifu-txt {
|
||||
@include readingfont;
|
||||
margin-left: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-waifu-image {
|
||||
margin-left: 0.682rem;
|
||||
@include normal-rounding;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.sidebar-waifu-image-actions {
|
||||
@include element_decel;
|
||||
padding: 0.313rem;
|
||||
}
|
||||
|
||||
$waifu_image_overlay_transparency: 0.7;
|
||||
|
||||
.sidebar-waifu-image-action {
|
||||
@include full-rounding;
|
||||
min-width: 1.875rem;
|
||||
min-height: 1.875rem;
|
||||
background-color: rgba(0, 0, 0,
|
||||
$waifu_image_overlay_transparency ); // Fixed cuz on image
|
||||
color: rgba(255, 255, 255, $waifu_image_overlay_transparency);
|
||||
}
|
||||
|
||||
.sidebar-waifu-image-action:hover,
|
||||
.sidebar-waifu-image-action:focus {
|
||||
background-color: rgba(30, 30, 30, $waifu_image_overlay_transparency);
|
||||
}
|
||||
|
||||
.sidebar-waifu-image-action:active {
|
||||
background-color: rgba(60, 60, 60, $waifu_image_overlay_transparency);
|
||||
}
|
||||
8
modules/styling/config/scss/_wal.scss
Normal file
8
modules/styling/config/scss/_wal.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// To prevent errors
|
||||
$color1: $surfaceVariant;
|
||||
$color2: $surfaceVariant;
|
||||
$color3: $surfaceVariant;
|
||||
$color4: $secondaryContainer;
|
||||
$color5: $secondaryContainer;
|
||||
$color6: $secondaryContainer;
|
||||
$color7: $onBackground;
|
||||
41
modules/styling/config/scss/main.scss
Normal file
41
modules/styling/config/scss/main.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// Reset
|
||||
// * {
|
||||
// all: unset;
|
||||
// }
|
||||
*:not(popover) { all: unset; }
|
||||
|
||||
// Colors
|
||||
@import './material'; // Material colors
|
||||
@import './colors'; // Global color definitions. Uses material colors as base.
|
||||
@import './lib_mixins';
|
||||
@import './lib_classes';
|
||||
@import './common'; // Context menu n stuff
|
||||
|
||||
// Components
|
||||
@import './bar';
|
||||
@import './cheatsheet';
|
||||
@import './desktopbackground';
|
||||
@import './dock';
|
||||
@import './osd';
|
||||
@import './overview';
|
||||
@import './osk';
|
||||
@import './sidebars';
|
||||
@import './session';
|
||||
@import './notifications';
|
||||
|
||||
// Music is put last as it might mess stuff up with pywal
|
||||
@import './music'; // Everything related to music is here
|
||||
|
||||
// Classes for interaction
|
||||
.growingRadial {
|
||||
transition: 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
}
|
||||
.fadingRadial {
|
||||
transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
}
|
||||
.sidebar-pinned {
|
||||
margin: 0rem;
|
||||
border-radius: 0rem;
|
||||
border-bottom-right-radius: $rounding_large;
|
||||
border: 0rem solid;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue