forked from Shinonome/dots-hyprland
Initial commit
This commit is contained in:
end-4
@@ -0,0 +1,489 @@
|
||||
// Made to be pixel-perfect with 11pt font size
|
||||
// 1rem = 11pt = 14.6666666667px
|
||||
|
||||
// Init
|
||||
$black: black;
|
||||
$white: white;
|
||||
$notchSecondaryContainer: $secondaryContainer;
|
||||
$notchOnSecondaryContainer: $onSecondaryContainer;
|
||||
$notchPrimary: $primary;
|
||||
$notchOnPrimary: $onPrimary;
|
||||
|
||||
// Check dark mode. Set colors accordingly for the fake snotch that's always black
|
||||
@if $darkmode ==true {
|
||||
$notchSecondaryContainer: $secondaryContainer;
|
||||
$notchOnSecondaryContainer: $onSecondaryContainer;
|
||||
$notchPrimary: $primary;
|
||||
$notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
@else {
|
||||
$notchSecondaryContainer: $onSecondaryContainer;
|
||||
$notchOnSecondaryContainer: $secondaryContainer;
|
||||
$notchPrimary: $primaryContainer;
|
||||
$notchOnPrimary: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $t_background;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-sidespace {
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.bar-group-margin {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
// @include elevation-border;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.bar-group-center {
|
||||
border-bottom-left-radius: 1.364rem;
|
||||
border-bottom-right-radius: 1.364rem;
|
||||
padding: 0.2rem;
|
||||
// background-color: $t_surface;
|
||||
background-color: $black; // Hard code: fake notch
|
||||
}
|
||||
|
||||
.corner-bar-group {
|
||||
border-radius: 1.364rem; // Half of bar height
|
||||
border-width: 0.068rem;
|
||||
// background-color: $t_surface;
|
||||
background-color: $black; // Hard code: fake notch
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
padding: 0rem 1.023rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-less {
|
||||
padding: 0rem 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-system {
|
||||
padding-left: 1.023rem;
|
||||
padding-right: 0.547rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-music {
|
||||
padding-right: 1.023rem;
|
||||
// padding-left: 0.273rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-left {
|
||||
padding-left: 1.364rem;
|
||||
padding-right: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-right {
|
||||
padding-left: 0.681rem;
|
||||
padding-right: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-leftonly {
|
||||
padding-left: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-rightonly {
|
||||
padding-right: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-standalone {
|
||||
border-radius: 1.364rem;
|
||||
-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.614rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@include titlefont;
|
||||
font-size: 1rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-ws {
|
||||
min-height: 1.636rem;
|
||||
min-width: 1.772rem;
|
||||
font-size: 1.091rem;
|
||||
@include mainfont;
|
||||
border-top: 0.068rem solid;
|
||||
border-bottom: 0.068rem solid;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bar-ws-active-box {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
min-height: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
font-size: 1.091rem;
|
||||
@include mainfont;
|
||||
|
||||
background-color: $notchPrimary;
|
||||
color: $notchOnPrimary;
|
||||
border-radius: 999px;
|
||||
margin: 0.068rem;
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
.bar-ws-active-middledecor {
|
||||
min-width: 0.682rem;
|
||||
min-height: 0.682rem;
|
||||
border-radius: 9999px;
|
||||
background-color: $black;
|
||||
margin: 0rem 0.409rem;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $notchSecondaryContainer;
|
||||
color: $notchOnSecondaryContainer;
|
||||
min-width: 1.772rem;
|
||||
border-top: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ws-occupied-left {
|
||||
background-color: $notchSecondaryContainer;
|
||||
color: $notchOnSecondaryContainer;
|
||||
min-width: 1.704rem;
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
|
||||
border-left: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-top: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-right: 0px solid transparent;
|
||||
}
|
||||
|
||||
.bar-ws-occupied-right {
|
||||
background-color: $notchSecondaryContainer;
|
||||
color: $notchOnSecondaryContainer;
|
||||
min-width: 1.704rem;
|
||||
border-top-right-radius: 999px;
|
||||
border-bottom-right-radius: 999px;
|
||||
|
||||
border-right: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-top: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
|
||||
border-left: 0px solid transparent;
|
||||
}
|
||||
|
||||
.bar-ws-occupied-left-right {
|
||||
@include full-rounding;
|
||||
background-color: $notchSecondaryContainer;
|
||||
color: $notchOnSecondaryContainer;
|
||||
min-width: 1.636rem;
|
||||
border: 0.068rem solid $notchOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ws-empty {
|
||||
color: $onBackground;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.341rem;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $t_onSecondaryContainer;
|
||||
// border: 1px solid $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-full {
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-full {
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate {
|
||||
min-height: 1.770rem;
|
||||
min-width: 1.770rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.770rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-playing {
|
||||
min-height: 1.770rem;
|
||||
min-width: 1.770rem;
|
||||
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-bottom-bg {
|
||||
border-radius: 1.364rem;
|
||||
min-width: 34.091rem;
|
||||
}
|
||||
|
||||
.bar-music-bottom-ctl-bg {
|
||||
border-radius: 1.364rem;
|
||||
background-color: rgba(30, 30, 30, 0.6);
|
||||
}
|
||||
|
||||
.bar-music-extended-textbox {
|
||||
margin: 1.023rem;
|
||||
}
|
||||
|
||||
.bar-music-bottom-cover {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.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-music-btn {
|
||||
font-size: 1.364rem;
|
||||
border-radius: 10rem;
|
||||
min-height: 2.591rem;
|
||||
min-width: 2.591rem;
|
||||
}
|
||||
|
||||
.bar-music-btn:hover,
|
||||
.bar-music-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.bar-prog-batt {
|
||||
min-height: 0.955rem;
|
||||
min-width: 0.068rem;
|
||||
padding: 0rem;
|
||||
border-radius: 10rem;
|
||||
|
||||
trough {
|
||||
min-height: 0.954rem;
|
||||
min-width: 0.068rem;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
progress {
|
||||
min-height: 0.680rem;
|
||||
min-width: 0.680rem;
|
||||
margin: 0rem 0.137rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-prog-batt-low {
|
||||
progress {
|
||||
background-color: $errorContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-prog-batt-full {
|
||||
progress {
|
||||
background-color: $onSuccessContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-batt-chargestate {
|
||||
border-radius: 10rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-charging {
|
||||
border-radius: 10rem;
|
||||
min-width: 0.681rem;
|
||||
min-height: 0.681rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-charging-smaller {
|
||||
border-radius: 10rem;
|
||||
min-width: 0.409rem;
|
||||
min-height: 0.409rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-low {
|
||||
background-color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-full {
|
||||
background-color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-percentage {
|
||||
font-size: 1rem;
|
||||
margin-top: -0.068rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background-color: $t_background;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.corner-black {
|
||||
background-color: $black; // Hard code because 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;
|
||||
min-height: 1.909rem;
|
||||
min-width: 1.909rem;
|
||||
}
|
||||
|
||||
.bar-systray-item {
|
||||
@include full-rounding;
|
||||
min-width: 1.909rem;
|
||||
}
|
||||
|
||||
.bar-statusicons {
|
||||
@include full-rounding;
|
||||
@include menu_decel;
|
||||
margin: 0.2rem;
|
||||
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%);
|
||||
}
|
||||
@@ -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 menu_decel;
|
||||
@include full-rounding;
|
||||
min-width: 2.386rem;
|
||||
min-height: 2.386rem;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:hover,
|
||||
.cheatsheet-closebtn:focus {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 70%);
|
||||
}
|
||||
|
||||
.cheatsheet-category-title {
|
||||
@include titlefont;
|
||||
font-size: 1.705rem;
|
||||
}
|
||||
Executable
+128
@@ -0,0 +1,128 @@
|
||||
///////////// 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 {
|
||||
$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, 87%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
@@ -0,0 +1,129 @@
|
||||
// * {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
tooltip {
|
||||
animation-name: appear;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: 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: 100ms;
|
||||
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%);
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
background-color: $surfaceVariant;
|
||||
min-width: 0.068rem;
|
||||
min-height: 0.068rem;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
@include normal-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border: 1px solid $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.configtoggle-box {
|
||||
padding: 0.205rem;
|
||||
border: 0.136rem solid transparent;
|
||||
}
|
||||
|
||||
.configtoggle-box:focus {
|
||||
padding: 0.205rem;
|
||||
border: 0.136rem solid mix($onSurface, $surface, 40%);
|
||||
}
|
||||
|
||||
.switch-bg {
|
||||
@include menu_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;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
@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;
|
||||
}
|
||||
Executable
+30
@@ -0,0 +1,30 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.dock-separator {
|
||||
min-width: 0.068rem;
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.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-shadow {
|
||||
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.txt-badonkers {
|
||||
@include mainfont;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.txt-tiddies {
|
||||
@include mainfont;
|
||||
font-size: 2.7273rem;
|
||||
}
|
||||
|
||||
.txt-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-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.txt-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.titlefont {
|
||||
@include titlefont;
|
||||
}
|
||||
|
||||
.mainfont {
|
||||
@include mainfont;
|
||||
}
|
||||
|
||||
.icon-material {
|
||||
@include icon-material;
|
||||
}
|
||||
|
||||
.icon-nerd {
|
||||
@include icon-nerd;
|
||||
}
|
||||
|
||||
.separator-circle {
|
||||
@include full-rounding;
|
||||
background-color: $onSurface;
|
||||
margin: 0rem 0.682rem;
|
||||
min-width: 0.545rem;
|
||||
min-height: 0.545rem;
|
||||
}
|
||||
|
||||
.spacing-h-3>* {
|
||||
margin-right: 0.205rem;
|
||||
}
|
||||
|
||||
.spacing-h-3>*:last-child {
|
||||
margin-right: 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-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-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-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>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;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.spacing-h--5>box {
|
||||
margin-right: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h--5>box:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>label {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>box {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>label {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.instant {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
.menu-decel {
|
||||
@include menu_decel;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
// 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:
|
||||
'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',
|
||||
'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;
|
||||
}
|
||||
|
||||
@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 {
|
||||
// Used for small transitions, as this looks clear
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
@mixin fluent_decel_long {
|
||||
// Used for small transitions, as this looks clear
|
||||
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
@mixin fluent_accel {
|
||||
transition: 150ms cubic-bezier(0.42, 0, 1, 1);
|
||||
}
|
||||
|
||||
@mixin noanim {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
@mixin anim-enter {
|
||||
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
@mixin anim-exit {
|
||||
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
}
|
||||
|
||||
@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;
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
$darkmode: true;
|
||||
$primary: #c4c0ff;
|
||||
$onPrimary: #251a8c;
|
||||
$primaryContainer: #3d36a2;
|
||||
$onPrimaryContainer: #e3dfff;
|
||||
$secondary: #c7c4dd;
|
||||
$onSecondary: #2f2e42;
|
||||
$secondaryContainer: #464559;
|
||||
$onSecondaryContainer: #e3dff9;
|
||||
$tertiary: #eab9d1;
|
||||
$onTertiary: #472639;
|
||||
$tertiaryContainer: #603c50;
|
||||
$onTertiaryContainer: #ffd8eb;
|
||||
$error: #ffb4a9;
|
||||
$onError: #680003;
|
||||
$errorContainer: #930006;
|
||||
$onErrorContainer: #ffb4a9;
|
||||
$colorbarbg: #101012;
|
||||
$background: #101012;
|
||||
$onBackground: #e5e1e6;
|
||||
$surface: #1c1b1f;
|
||||
$onSurface: #e5e1e6;
|
||||
$surfaceVariant: #47464f;
|
||||
$onSurfaceVariant: #c8c5d0;
|
||||
$outline: #928f9a;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #e5e1e6;
|
||||
$inverseOnSurface: #313033;
|
||||
$inversePrimary: #5550bb;
|
||||
@@ -0,0 +1,152 @@
|
||||
@import './material';
|
||||
@import './musicmaterial';
|
||||
@import './wal';
|
||||
@import './musicwal';
|
||||
@import './colors';
|
||||
@import './lib_mixins';
|
||||
$music_gradient1: mix($color1, $background, 30%);
|
||||
|
||||
@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%);
|
||||
|
||||
.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 menu_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 menu_decel;
|
||||
@include titlefont;
|
||||
font-size: 1.364rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-artists {
|
||||
@include menu_decel;
|
||||
@include mainfont;
|
||||
font-size: 0.955rem;
|
||||
color: mix($onSecondaryContainer, $secondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.osd-music-pill {
|
||||
@include menu_decel;
|
||||
@include full-rounding;
|
||||
@include titlefont;
|
||||
min-width: 1.833rem;
|
||||
padding: 0.273rem 0.682rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.osd-music-controls {
|
||||
@include menu_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 menu_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;
|
||||
}
|
||||
Executable
+1
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
$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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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-close-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0rem 0.136rem;
|
||||
}
|
||||
|
||||
.notif-close-btn:hover,
|
||||
.notif-close-btn:focus {
|
||||
background: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-close-btn:active {
|
||||
background: $activecolor;
|
||||
}
|
||||
|
||||
.notif-closeall-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0.341rem 0.341rem;
|
||||
}
|
||||
|
||||
.notif-closeall-btn:hover,
|
||||
.notif-closeall-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-closeall-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.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: 1.770rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-circprog-normal {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 1.770rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-circprog-critical {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 1.770rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
.osd-bg {
|
||||
min-width: 8.864rem;
|
||||
min-height: 3.409rem;
|
||||
}
|
||||
|
||||
.osd-value {
|
||||
background-color: $t_background;
|
||||
border-radius: 1.023rem;
|
||||
padding: 0.625rem 1.023rem;
|
||||
padding-top: 0.313rem;
|
||||
margin: 10px;
|
||||
@include elevation2;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
$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: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.osk-key:active {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key-active {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
.overview-search-box {
|
||||
@include menu_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: $l_t_secondaryContainer;
|
||||
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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,690 @@
|
||||
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
||||
$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;
|
||||
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;
|
||||
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 menu_decel;
|
||||
color: $onSurface;
|
||||
min-width: 2.727rem;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton:hover,
|
||||
.sidebar-iconbutton:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-iconbutton:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
@include menu_decel;
|
||||
padding: 0rem $rounding_small;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-button-nopad {
|
||||
@include menu_decel;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-button:hover,
|
||||
.sidebar-button:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-button:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button-nopad:hover,
|
||||
.sidebar-button-nopad:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-button-nopad:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button-left {
|
||||
border-top-left-radius: $rounding_small;
|
||||
border-bottom-left-radius: $rounding_small;
|
||||
}
|
||||
|
||||
.sidebar-button-right {
|
||||
border-top-right-radius: $rounding_small;
|
||||
border-bottom-right-radius: $rounding_mediumsmall;
|
||||
}
|
||||
|
||||
.sidebar-button-alone {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.sidebar-button-alone-normal {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.sidebar-button-active {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-button-active:hover,
|
||||
.sidebar-button-active:focus {
|
||||
background-color: mix($primary, $hovercolor, 90%);
|
||||
}
|
||||
|
||||
.sidebar-button-active:active {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.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: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.sidebar-navrail-btn:active>box>label:first-child {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
|
||||
}
|
||||
|
||||
.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;
|
||||
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 menu_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, 90%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today:active {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-othermonth {
|
||||
color: mix($onSurface, $surface, 50%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-header {
|
||||
margin: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.682rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:hover,
|
||||
.sidebar-calendar-monthyear-btn:focus {
|
||||
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn {
|
||||
@include full-rounding;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:hover {
|
||||
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-selector-tab {
|
||||
@include small-rounding;
|
||||
transition: 0ms;
|
||||
min-height: 2.5rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-selector-tab:hover,
|
||||
.sidebar-selector-tab:focus {
|
||||
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.sidebar-selector-tab:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
|
||||
}
|
||||
|
||||
.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 GtkStack animation of the actual todo widget content
|
||||
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 {
|
||||
border-radius: 9999px;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:hover,
|
||||
.sidebar-todo-item-action:focus {
|
||||
background-color: mix($t_surface, $t_onSurface, 80%);
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:active {
|
||||
background-color: mix($t_surface, $t_onSurface, 65%);
|
||||
}
|
||||
|
||||
.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-clipboard-item {
|
||||
border-radius: $rounding_small;
|
||||
min-height: 2.045rem;
|
||||
padding: 0.341rem;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-clipboard-item:hover,
|
||||
.sidebar-clipboard-item:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%);
|
||||
}
|
||||
|
||||
.sidebar-clipboard-item:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-todo-new {
|
||||
@include full-rounding;
|
||||
color: $onSecondaryContainer;
|
||||
margin: 0.341rem;
|
||||
padding: 0.205rem 0.545rem;
|
||||
border: 0.068rem solid $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-todo-new:hover,
|
||||
.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 full-rounding;
|
||||
@include menu_decel;
|
||||
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 menu_decel;
|
||||
@include full-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 menu_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: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-module-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $t_surfaceVariant;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-viewport {
|
||||
@include menu_decel;
|
||||
margin: 0.682rem 0rem;
|
||||
padding: 0.682rem 0rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-textarea {
|
||||
@include normal-rounding;
|
||||
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-entry {
|
||||
color: $onSurfaceVariant;
|
||||
caret-color: $onSurfaceVariant;
|
||||
min-height: 1.773rem;
|
||||
min-width: 0rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-send {
|
||||
@include menu_decel;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
border-radius: $rounding_medium - 0.681rem;
|
||||
background-color: $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
|
||||
.sidebar-chat-send:hover,
|
||||
.sidebar-chat-send:focus {
|
||||
background-color: mix($sidebar_chat_textboxareaColor, $t_onSecondaryContainer, 97%);
|
||||
}
|
||||
|
||||
.sidebar-chat-send:active {
|
||||
background-color: mix($sidebar_chat_textboxareaColor, $t_onSecondaryContainer, 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 full-rounding;
|
||||
min-width: 0.136rem;
|
||||
}
|
||||
|
||||
.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: 0.341rem;
|
||||
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: $secondaryContainer;
|
||||
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;
|
||||
padding: 0.273rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0rem 5.455rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-welcome-icon {
|
||||
@include full-rounding;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-welcome-logo {
|
||||
@include full-rounding;
|
||||
@include menu_decel;
|
||||
min-height: 4.773rem;
|
||||
min-width: 4.773rem;
|
||||
font-size: 4rem;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip {
|
||||
@include menu_decel;
|
||||
@include small-rounding;
|
||||
padding: 0.341rem 0.477rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action {
|
||||
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action:hover,
|
||||
.sidebar-chat-chip-action:focus {
|
||||
background-color: $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action:active {
|
||||
background-color: mix($sidebar_chat_textboxareaColor, $onSurfaceVariant, 70%);
|
||||
color: mix($sidebar_chat_textboxareaColor, $surfaceVariant, 70%);
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action-active {
|
||||
color: $sidebar_chat_textboxareaColor;
|
||||
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// To prevent errors
|
||||
$color1: $surfaceVariant;
|
||||
$color2: $surfaceVariant;
|
||||
$color3: $surfaceVariant;
|
||||
$color4: $secondaryContainer;
|
||||
$color5: $secondaryContainer;
|
||||
$color6: $secondaryContainer;
|
||||
$color7: $onBackground;
|
||||
@@ -0,0 +1,34 @@
|
||||
// Reset
|
||||
* {
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user