mirror of
https://github.com/xsghetti/HyprCrux.git
synced 2025-07-03 05:40:38 -04:00
updates
This commit is contained in:
parent
1f8cb3c145
commit
610604e80f
253 changed files with 27055 additions and 44 deletions
397
.config/ags/scss/_bar.scss
Normal file
397
.config/ags/scss/_bar.scss
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
// Made to be pixel-perfect with 11pt font size
|
||||
// 1rem = 11pt = 14.6666666667px
|
||||
$bar_ws_width: 1.774rem;
|
||||
$bar_ws_width_focus: 0.614rem;
|
||||
$bar_ws_width_focus_active: 2.045rem;
|
||||
|
||||
@mixin bar-group-rounding {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.bar-height {
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $layer0;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-bg-focus {
|
||||
background-color: $layer0;
|
||||
min-height: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-bg-focus-batterylow {
|
||||
background-color: mix($layer0, $errorContainer, 80%);
|
||||
}
|
||||
|
||||
.bar-sidespace {
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.bar-group-margin {
|
||||
padding: 0.273rem 0rem;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.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-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-ws-width {
|
||||
min-width: 18.341rem;
|
||||
}
|
||||
|
||||
.bar-ws {
|
||||
min-width: $bar_ws_width;
|
||||
color: $workspaceOnLayer1Inactive;
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
background-color: $workspaceLayer3;
|
||||
color: $workspaceOnLayer3;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $layer2;
|
||||
color: $workspaceOnLayer2;
|
||||
}
|
||||
|
||||
// Focus is the bar mode name, not the workspace state!
|
||||
|
||||
.bar-ws-focus {
|
||||
background-color: $surfaceVariant;
|
||||
min-width: $bar_ws_width_focus;
|
||||
}
|
||||
|
||||
.bar-ws-focus-active {
|
||||
min-width: $bar_ws_width_focus_active;
|
||||
background-color: $onLayer0;
|
||||
}
|
||||
|
||||
.bar-ws-focus-occupied {
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.bar-clock-box {
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-time {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $timeOnLayer1;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
color: $dateOnLayer1;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $battOnLayer2;
|
||||
}
|
||||
|
||||
.bar-batt-txt {
|
||||
color: $battOnLayer1;
|
||||
}
|
||||
|
||||
.bar-batt-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $battLayer2;
|
||||
color: $battOnLayer2;
|
||||
}
|
||||
|
||||
.bar-batt-circprog-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-ram-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $ramOnLayer2;
|
||||
}
|
||||
|
||||
.bar-ram-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $ramLayer2;
|
||||
color: $ramOnLayer2;
|
||||
}
|
||||
|
||||
.bar-ram-txt {
|
||||
color: $ramOnLayer1;
|
||||
}
|
||||
|
||||
.bar-swap-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $swapOnLayer2;
|
||||
}
|
||||
|
||||
.bar-swap-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $swapLayer2;
|
||||
color: $swapOnLayer2;
|
||||
}
|
||||
|
||||
.bar-swap-txt {
|
||||
color: $swapOnLayer1;
|
||||
}
|
||||
|
||||
.bar-cpu-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $cpuOnLayer2;
|
||||
}
|
||||
|
||||
.bar-cpu-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $cpuLayer2;
|
||||
color: $cpuOnLayer2;
|
||||
}
|
||||
|
||||
.bar-cpu-txt {
|
||||
color: $cpuOnLayer1;
|
||||
}
|
||||
|
||||
.bar-music-playstate {
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $musicOnLayer2;
|
||||
}
|
||||
|
||||
.bar-music-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $musicLayer2;
|
||||
color: $musicOnLayer2;
|
||||
}
|
||||
|
||||
.bar-music-playstate-playing {
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
color: $musicOnLayer2;
|
||||
}
|
||||
|
||||
.bar-music-playstate-txt {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
@include icon-material;
|
||||
}
|
||||
|
||||
.bar-music-txt {
|
||||
color: $musicOnLayer1;
|
||||
}
|
||||
|
||||
.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-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: $layer0;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.corner-black {
|
||||
background-color: $black; // Hard code: fake screen corner
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.bar-wintitle-topdesc {
|
||||
margin-top: -0.136rem;
|
||||
margin-bottom: -0.341rem;
|
||||
color: $windowtitleOnLayer0Inactive;
|
||||
}
|
||||
|
||||
.bar-wintitle-txt {
|
||||
color: $windowtitleOnLayer0;
|
||||
}
|
||||
|
||||
.bar-space-button {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-space-button>box:first-child {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
@include symbolic-icon;
|
||||
min-height: 1.032rem;
|
||||
min-width: 1.032rem;
|
||||
font-size: 1.032rem;
|
||||
color: $trayOnLayer0;
|
||||
}
|
||||
|
||||
.bar-statusicons {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
margin: 0.273rem;
|
||||
padding: 0rem 0.614rem;
|
||||
}
|
||||
|
||||
.bar-statusicons-active {
|
||||
background-color: $layer0Active;
|
||||
color: $onLayer0Active;
|
||||
}
|
||||
|
||||
.bar-util-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
background-color: $utilsLayer2;
|
||||
color: $utilsOnLayer2;
|
||||
}
|
||||
|
||||
.bar-util-btn:hover,
|
||||
.bar-util-btn:focus {
|
||||
background-color: $layer2Hover;
|
||||
}
|
||||
|
||||
.bar-util-btn:active {
|
||||
background-color: $layer2Active;
|
||||
}
|
||||
|
||||
.bar-spaceright {
|
||||
color: $barspacerightOnLayer0;
|
||||
}
|
||||
|
||||
.bar-bluetooth-device {
|
||||
@include full-rounding;
|
||||
@include symbolic-icon;
|
||||
min-height: 1.032rem;
|
||||
min-width: 1.032rem;
|
||||
font-size: 1.032rem;
|
||||
padding: 0.205rem 0.341rem;
|
||||
}
|
||||
63
.config/ags/scss/_cheatsheet.scss
Normal file
63
.config/ags/scss/_cheatsheet.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
.cheatsheet-bg {
|
||||
@include large-rounding;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
margin-bottom: 0.682rem;
|
||||
background-color: $layer0;
|
||||
padding: 1.364rem;
|
||||
}
|
||||
|
||||
.cheatsheet-title {
|
||||
color: $cheatsheetTitle;
|
||||
}
|
||||
|
||||
.cheatsheet-key {
|
||||
@include techfont;
|
||||
min-height: 1.364rem;
|
||||
min-width: 1.364rem;
|
||||
margin: 0.17rem;
|
||||
padding: 0.136rem 0.205rem;
|
||||
-gtk-outline-radius: 0.409rem;
|
||||
color: $cheatsheetTitle;
|
||||
border-radius: 0.409rem;
|
||||
border: 0.068rem solid $cheatsheetTitle;
|
||||
box-shadow: 0rem 0.136rem 0rem $cheatsheetTitle;
|
||||
}
|
||||
|
||||
.cheatsheet-key-notkey {
|
||||
min-height: 1.364rem;
|
||||
padding: 0.136rem 0.205rem;
|
||||
margin: 0.17rem;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
@for $i from 1 through 8 {
|
||||
.cheatsheet-color-#{$i} {
|
||||
color: nth($cheatsheetColors, $i);
|
||||
border-color: nth($cheatsheetColors, $i);
|
||||
box-shadow: 0rem 0.136rem 0rem nth($cheatsheetColors, $i);
|
||||
}
|
||||
}
|
||||
|
||||
// .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: $layer0Hover;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:active {
|
||||
background-color: $layer0Active;
|
||||
}
|
||||
|
||||
.cheatsheet-category-title {
|
||||
@include titlefont;
|
||||
font-size: 1.705rem;
|
||||
}
|
||||
113
.config/ags/scss/_colors.scss
Normal file
113
.config/ags/scss/_colors.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
$rootTransparency: 0.31; // Transparency = 1 - opacity
|
||||
$transparency: 0.8;
|
||||
|
||||
// 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
|
||||
@if $transparent == True {
|
||||
$background: transparentize($background, $rootTransparency);
|
||||
$surface: transparentize($surface, $transparency);
|
||||
$surfaceDim: transparentize($surfaceDim, $transparency);
|
||||
$surfaceBright: transparentize($surfaceBright, $transparency);
|
||||
$surfaceContainerLowest: transparentize($surfaceContainerLowest, $transparency);
|
||||
$surfaceContainerLow: transparentize($surfaceContainerLow, $transparency);
|
||||
$surfaceContainer: transparentize($surfaceContainer, $transparency);
|
||||
$surfaceContainerHigh: transparentize($surfaceContainerHigh, $transparency);
|
||||
$surfaceContainerHighest: transparentize($surfaceContainerHighest, $transparency);
|
||||
$surfaceVariant: transparentize($surfaceVariant, $transparency);
|
||||
$inverseSurface: transparentize($inverseSurface, $transparency);
|
||||
$surfaceTint: transparentize($surfaceTint, $transparency);
|
||||
}
|
||||
|
||||
// Others
|
||||
$subtext: $outline;
|
||||
$actiontext: mix($onBackground, $background, 85%);
|
||||
$black: black;
|
||||
$white: white;
|
||||
|
||||
/// Color mappings for more chaotic, dynamic colors like the average rice ///
|
||||
// General
|
||||
$layer0: $background;
|
||||
$onLayer0: $onBackground;
|
||||
$layer0Hover: mix($layer0, $onLayer0, 85%);
|
||||
$layer0Active: $surfaceContainerHigh;
|
||||
$onLayer0Active: $onSurface;
|
||||
$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
|
||||
$layer1: $surfaceContainerLow;
|
||||
$onLayer1: $onSurface;
|
||||
$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
|
||||
$onLayer1: $onSurfaceVariant;
|
||||
$layer2: mix($surfaceContainer, $surfaceContainerHigh, 55%);
|
||||
$onLayer2: $onSurface;
|
||||
$layer3: $surfaceContainerHigh;
|
||||
$onLayer3: $onSurface;
|
||||
$layer1Hover: mix($layer1, $onLayer1, 85%);
|
||||
$layer1Active: mix($layer1, $onLayer1, 70%);
|
||||
$layer2Hover: mix($layer2, $onLayer2, 90%);
|
||||
$layer2Active: mix($layer2, $onLayer2, 80%);
|
||||
$layer3Hover: mix($layer3, $onLayer3, 90%);
|
||||
$layer3Active: mix($layer3, $onLayer3, 80%);
|
||||
// Elements
|
||||
$windowtitleOnLayer0Inactive: $onLayer0Inactive;
|
||||
$windowtitleOnLayer0: $onLayer0;
|
||||
$barspacerightOnLayer0: $onLayer0;
|
||||
$timeOnLayer1: $onLayer1;
|
||||
$dateOnLayer1: $onLayer1;
|
||||
$ramOnLayer1: $onLayer1;
|
||||
$ramLayer2: $secondaryContainer;
|
||||
$ramOnLayer2: $onSecondaryContainer;
|
||||
$swapOnLayer1: $onLayer1;
|
||||
$swapLayer2: $secondaryContainer;
|
||||
$swapOnLayer2: $onSecondaryContainer;
|
||||
$cpuOnLayer1: $onLayer1;
|
||||
$cpuLayer2: $secondaryContainer;
|
||||
$cpuOnLayer2: $onSecondaryContainer;
|
||||
$musicOnLayer1: $onLayer1;
|
||||
$musicLayer2: $secondaryContainer;
|
||||
$musicOnLayer2: $onSecondaryContainer;
|
||||
$utilsLayer2: $layer2;
|
||||
$utilsOnLayer2: $onLayer2;
|
||||
$battOnLayer1: $onLayer1;
|
||||
$battLayer2: $secondaryContainer;
|
||||
$battOnLayer2: $onSecondaryContainer;
|
||||
$workspaceOnLayer1Inactive: $onLayer1Inactive;
|
||||
$workspaceLayer3: $primary;
|
||||
$workspaceOnLayer3: $onPrimary;
|
||||
$workspaceOnLayer2: $onSecondaryContainer;
|
||||
$trayOnLayer0: $onLayer0;
|
||||
$cheatsheetTitle: $onSecondaryContainer;
|
||||
$cheatsheetColors: (
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer,
|
||||
$onSecondaryContainer
|
||||
);
|
||||
|
||||
$sessionColors: (
|
||||
$onLayer1,
|
||||
$onLayer1,
|
||||
$onLayer1,
|
||||
$onLayer1,
|
||||
$onLayer1,
|
||||
$onLayer1,
|
||||
$onLayer1
|
||||
);
|
||||
$brightnessOnLayer0: $onLayer0;
|
||||
$volumeOnLayer0: $onLayer0;
|
||||
|
||||
305
.config/ags/scss/_common.scss
Normal file
305
.config/ags/scss/_common.scss
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
* {
|
||||
selection {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
caret-color: $onLayer2;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
menu {
|
||||
@include small-rounding;
|
||||
border: 1px solid mix($surfaceContainer, $onBackground, 80%); // I hate this
|
||||
padding: 0.681rem;
|
||||
background: opacify($surfaceContainer, 1);
|
||||
color: $onSurface;
|
||||
-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-color;
|
||||
border-radius: 0.545rem;
|
||||
-gtk-outline-radius: 0.545rem;
|
||||
}
|
||||
|
||||
menu>menuitem:hover,
|
||||
menu>menuitem:focus {
|
||||
background-color: $layer2Hover;
|
||||
}
|
||||
|
||||
menu>menuitem:active {
|
||||
background-color: $layer2Active;
|
||||
}
|
||||
|
||||
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: opacify($color: $inverseSurface, $amount: 1);
|
||||
color: $inverseOnSurface;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// 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: $surfaceContainerHigh;
|
||||
color: $onSurface;
|
||||
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;
|
||||
}
|
||||
|
||||
.switch-bg {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
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: $layer1;
|
||||
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: $layer0Hover;
|
||||
}
|
||||
|
||||
.segment-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.segment-btn-enabled:hover,
|
||||
.segment-btn-enabled:focus {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.multipleselection-container {}
|
||||
|
||||
.multipleselection-btn {
|
||||
@include small-rounding;
|
||||
padding: 0rem 0.341rem;
|
||||
border: 0.034rem solid $outline;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.multipleselection-btn:focus,
|
||||
.multipleselection-btn:hover {
|
||||
background-color: $layer0Hover;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.multipleselection-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.multipleselection-btn-enabled:hover,
|
||||
.multipleselection-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;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
@include small-rounding;
|
||||
@include element_decel;
|
||||
min-height: 2.5rem;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background-color: $layer0Hover;
|
||||
}
|
||||
|
||||
.tab-btn:focus {
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.tab-btn-active>box>label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
|
||||
min-height: 0.205rem;
|
||||
padding: 0rem 1.023rem;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
font-size: 1.406rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.tab-icon-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.tab-icon-expandable {
|
||||
transition: 0ms;
|
||||
@include full-rounding;
|
||||
min-width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
font-size: 1.406rem;
|
||||
color: $onSurface;
|
||||
padding: 0rem;
|
||||
}
|
||||
|
||||
.tab-icon-expandable-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
padding: 0rem 0.545rem;
|
||||
min-width: 9.545rem;
|
||||
}
|
||||
|
||||
widget {
|
||||
@include small-rounding;
|
||||
}
|
||||
92
.config/ags/scss/_desktopbackground.scss
Normal file
92
.config/ags/scss/_desktopbackground.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
.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 titlefont;
|
||||
@include bg-textshadow;
|
||||
font-size: 5.795rem;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.bg-time-date {
|
||||
@include titlefont;
|
||||
@include bg-textshadow;
|
||||
font-size: 2.591rem;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.bg-distro-box {
|
||||
@include large-rounding;
|
||||
margin: 2.045rem;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.bg-distro-txt {
|
||||
@include titlefont;
|
||||
@include bg-textshadow;
|
||||
font-size: 1.432rem;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.bg-distro-name {
|
||||
@include titlefont;
|
||||
@include bg-textshadow;
|
||||
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: $layer2;
|
||||
color: $onLayer2;
|
||||
min-width: 4.432rem;
|
||||
min-height: 2.045rem;
|
||||
padding: 0.273rem 0.682rem;
|
||||
}
|
||||
|
||||
.bg-quicklaunch-btn:hover,
|
||||
.bg-quicklaunch-btn:focus {
|
||||
background-color: $layer2Hover;
|
||||
}
|
||||
|
||||
.bg-quicklaunch-btn:active {
|
||||
background-color: $layer2Active;
|
||||
}
|
||||
|
||||
.bg-system-bg {
|
||||
@include normal-rounding;
|
||||
// background-color: $background;
|
||||
}
|
||||
|
||||
.bg-system-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.205rem; // Trough stroke width
|
||||
min-height: 4.091rem; // Diameter
|
||||
font-size: 0px;
|
||||
padding: 0rem;
|
||||
background-color: $layer2;
|
||||
}
|
||||
31
.config/ags/scss/_dock.scss
Normal file
31
.config/ags/scss/_dock.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.dock-bg {
|
||||
@include large-rounding;
|
||||
@include elevation2;
|
||||
background-color: $layer0;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.dock-app-btn {
|
||||
@include normal-rounding;
|
||||
padding: 0.273rem;
|
||||
}
|
||||
|
||||
.dock-app-btn:hover,
|
||||
.dock-app-btn:focus {
|
||||
background-color: $layer0Hover;
|
||||
}
|
||||
|
||||
.dock-app-btn:active {
|
||||
background-color: $layer0Active;
|
||||
}
|
||||
|
||||
.dock-app-icon {
|
||||
min-width: 3.409rem;
|
||||
min-height: 3.409rem;
|
||||
font-size: 3.409rem;
|
||||
}
|
||||
|
||||
.dock-separator {
|
||||
min-width: 0.068rem;
|
||||
background-color: $outline;
|
||||
}
|
||||
529
.config/ags/scss/_lib_classes.scss
Normal file
529
.config/ags/scss/_lib_classes.scss
Normal file
|
|
@ -0,0 +1,529 @@
|
|||
.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-onLayer1 {
|
||||
color: $onLayer1;
|
||||
}
|
||||
|
||||
.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: mix($subtext, $surface, 50%);
|
||||
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-bottom-8 { // wtf
|
||||
margin-bottom: 0.545rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
196
.config/ags/scss/_lib_mixins.scss
Normal file
196
.config/ags/scss/_lib_mixins.scss
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
// Common colors
|
||||
$hovercolor: $surfaceContainerHigh;
|
||||
$activecolor: $surfaceContainerHighest;
|
||||
$rounding_verysmall: 0.477rem;
|
||||
$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 symbolic-icon {
|
||||
-gtk-icon-theme: 'Adwaita';
|
||||
}
|
||||
|
||||
@mixin titlefont {
|
||||
// Geometric sans-serif
|
||||
font-family: "Gabarito", "Poppins", "Readex Pro", "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 AI chat on sidebar
|
||||
font-family: "Readex Pro", "Lexend", "Noto Sans", sans-serif;
|
||||
// font-weight: 500;
|
||||
}
|
||||
|
||||
@mixin subtext {
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
@mixin actiontext {
|
||||
color: $actiontext;
|
||||
}
|
||||
|
||||
$elevation_margin: 0.476rem;
|
||||
|
||||
@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 elevation-border-softer {
|
||||
border-top: 1px solid mix($surface, $onSurface, 86%);
|
||||
border-left: 1px solid mix($surface, $onSurface, 86%);
|
||||
border-right: 1px solid mix($surface, $onSurface, 90%);
|
||||
border-bottom: 1px solid mix($surface, $onSurface, 90%);
|
||||
}
|
||||
|
||||
@mixin elevation-border {
|
||||
border-top: 1px solid $surfaceContainer;
|
||||
border-left: 1px solid $surfaceContainer;
|
||||
border-right: 1px solid $surfaceContainer;
|
||||
border-bottom: 1px solid $surfaceContainer;
|
||||
}
|
||||
|
||||
@mixin button-minsize {
|
||||
min-width: 2.727rem;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
$white: white;
|
||||
$black: black;
|
||||
56
.config/ags/scss/_material.scss
Normal file
56
.config/ags/scss/_material.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
$darkmode: True;
|
||||
$transparent: False;
|
||||
$primary_paletteKeyColor: #A504FF;
|
||||
$secondary_paletteKeyColor: #8B6D8D;
|
||||
$tertiary_paletteKeyColor: #9A678C;
|
||||
$neutral_paletteKeyColor: #7D7480;
|
||||
$neutral_variant_paletteKeyColor: #7E7382;
|
||||
$background: #17111B;
|
||||
$onBackground: #EBDFED;
|
||||
$surface: #17111B;
|
||||
$surfaceDim: #17111B;
|
||||
$surfaceBright: #3E3741;
|
||||
$surfaceContainerLowest: #FFFFFF;
|
||||
$surfaceContainerLow: #1F1923;
|
||||
$surfaceContainer: #241D27;
|
||||
$surfaceContainerHigh: #2E2832;
|
||||
$surfaceContainerHighest: #39323D;
|
||||
$onSurface: #EBDFED;
|
||||
$surfaceVariant: #4D4351;
|
||||
$onSurfaceVariant: #CFC2D3;
|
||||
$inverseSurface: #EBDFED;
|
||||
$inverseOnSurface: #352E38;
|
||||
$outline: #988D9D;
|
||||
$outlineVariant: #4D4351;
|
||||
$shadow: #000000;
|
||||
$scrim: #000000;
|
||||
$surfaceTint: #E2B6FF;
|
||||
$primary: #E2B6FF;
|
||||
$onPrimary: #4D007B;
|
||||
$primaryContainer: #6D00AC;
|
||||
$onPrimaryContainer: #F3DAFF;
|
||||
$inversePrimary: #9000DF;
|
||||
$secondary: #DEBCDF;
|
||||
$onSecondary: #402843;
|
||||
$secondaryContainer: #5A405D;
|
||||
$onSecondaryContainer: #FDD9FD;
|
||||
$tertiary: #F0B5DE;
|
||||
$onTertiary: #4B2142;
|
||||
$tertiaryContainer: #B680A7;
|
||||
$onTertiaryContainer: #000000;
|
||||
$error: #FFB4AB;
|
||||
$onError: #690005;
|
||||
$errorContainer: #93000A;
|
||||
$onErrorContainer: #FFDAD6;
|
||||
$primaryFixed: #F3DAFF;
|
||||
$primaryFixedDim: #E2B6FF;
|
||||
$onPrimaryFixed: #2E004D;
|
||||
$onPrimaryFixedVariant: #6D00AC;
|
||||
$secondaryFixed: #FCD7FB;
|
||||
$secondaryFixedDim: #DEBCDF;
|
||||
$onSecondaryFixed: #29132D;
|
||||
$onSecondaryFixedVariant: #583E5B;
|
||||
$tertiaryFixed: #FFD7F1;
|
||||
$tertiaryFixedDim: #F0B5DE;
|
||||
$onTertiaryFixed: #320C2C;
|
||||
$onTertiaryFixedVariant: #64385A;
|
||||
156
.config/ags/scss/_music.scss
Normal file
156
.config/ags/scss/_music.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
@import './material';
|
||||
@import './musicmaterial';
|
||||
@import './wal';
|
||||
@import './musicwal';
|
||||
@import './colors';
|
||||
@import './lib_mixins';
|
||||
$music_transparentize_amount: 0.3;
|
||||
$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: $layer0;
|
||||
padding: 0rem 1.023rem;
|
||||
background: // Inspired by Amberol
|
||||
linear-gradient(127deg, transparentize($music_gradient1, $music_colorstart_transparentize), transparentize($music_gradient1, $music_colorstart_transparentize - $music_transparentize_amount + $music_extra_transparentize) 70.71%),
|
||||
linear-gradient(217deg, transparentize($music_gradient2, $music_colorstart_transparentize), transparentize($music_gradient2, $music_colorstart_transparentize - $music_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 - $music_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: $layer1;
|
||||
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;
|
||||
}
|
||||
255
.config/ags/scss/_notifications.scss
Normal file
255
.config/ags/scss/_notifications.scss
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
@mixin notif-rounding {
|
||||
@include normal-rounding;
|
||||
}
|
||||
|
||||
.notif-low {
|
||||
@include notif-rounding;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.notif-normal {
|
||||
@include notif-rounding;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
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: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.notif-clicked-normal {
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.notif-clicked-critical {
|
||||
background-color: $onSecondary;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.popup-notif-low {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $layer2;
|
||||
|
||||
@if $transparent ==True {
|
||||
background-color: $layer0;
|
||||
}
|
||||
|
||||
border: 0.034rem solid $outlineVariant;
|
||||
color: $onLayer2;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-normal {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $layer2;
|
||||
|
||||
@if $transparent ==True {
|
||||
background-color: $layer0;
|
||||
}
|
||||
|
||||
border: 0.034rem solid $outlineVariant;
|
||||
color: $onLayer2;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-critical {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $secondaryContainer;
|
||||
border: 0.034rem solid $onSecondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-low {
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-normal {
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-critical {
|
||||
background-color: $onSecondary;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-body-low {
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.notif-body-normal {
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.notif-body-critical {
|
||||
color: mix($onSecondaryContainer, $secondaryContainer, 67%);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
@include full-rounding;
|
||||
min-width: 3.409rem;
|
||||
min-height: 3.409rem;
|
||||
font-size: 2.182rem;
|
||||
}
|
||||
|
||||
.notif-icon-material {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-low {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-normal {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-critical {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
.notif-expand-btn {
|
||||
@include notif-rounding;
|
||||
min-width: 1.841rem;
|
||||
min-height: 1.841rem;
|
||||
}
|
||||
|
||||
.notif-expand-btn:hover,
|
||||
.notif-expand-btn:focus {
|
||||
background: $layer2Hover;
|
||||
}
|
||||
|
||||
.notif-expand-btn:active {
|
||||
background: $layer2Active;
|
||||
}
|
||||
|
||||
.notif-listaction-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.notif-listaction-btn:hover,
|
||||
.notif-listaction-btn:focus {
|
||||
background-color: $layer2Hover;
|
||||
}
|
||||
|
||||
.notif-listaction-btn:active {
|
||||
background-color: $layer2Active;
|
||||
}
|
||||
|
||||
.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: $layer0;
|
||||
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: $surfaceContainerHighest;
|
||||
color: $onLayer2;
|
||||
}
|
||||
|
||||
.notif-action-low:focus,
|
||||
.notif-action-low:hover {
|
||||
border: 0.040rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.notif-action-low:active {
|
||||
background-color: $surfaceBright;
|
||||
}
|
||||
|
||||
.notif-action-normal {
|
||||
background-color: $surfaceContainerHighest;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.notif-action-normal:focus,
|
||||
.notif-action-normal:hover {
|
||||
border: 0.040rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.notif-action-normal:active {
|
||||
background-color: $surfaceBright;
|
||||
}
|
||||
|
||||
.notif-action-critical {
|
||||
background-color: mix($secondary, $onSecondary, 30%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-critical:focus,
|
||||
.notif-action-critical:hover {
|
||||
border: 0.040rem solid $outline;
|
||||
}
|
||||
|
||||
.notif-action-critical:active {
|
||||
background-color: mix($secondary, $onSecondary, 40%);
|
||||
}
|
||||
205
.config/ags/scss/_osd.scss
Normal file
205
.config/ags/scss/_osd.scss
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
// .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: $layer0;
|
||||
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: $layer2;
|
||||
// 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: $onLayer2;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-label {
|
||||
font-size: 1.023rem;
|
||||
font-weight: 500;
|
||||
margin-top: 0.341rem;
|
||||
}
|
||||
|
||||
.osd-value-txt {
|
||||
@include titlefont;
|
||||
font-size: 1.688rem;
|
||||
font-weight: 500;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.osd-brightness {
|
||||
color: $brightnessOnLayer0;
|
||||
}
|
||||
.osd-brightness-progress {
|
||||
progress {
|
||||
background-color: $brightnessOnLayer0;
|
||||
}
|
||||
}
|
||||
.osd-volume {
|
||||
color: $volumeOnLayer0;
|
||||
}
|
||||
.osd-volume-progress {
|
||||
progress {
|
||||
background-color: $volumeOnLayer0;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-notifs {
|
||||
padding-top: 0.313rem;
|
||||
}
|
||||
|
||||
.osd-colorscheme {
|
||||
border-radius: 1.023rem;
|
||||
background-color: $layer0;
|
||||
padding: 0.313rem 0.626rem;
|
||||
@include elevation2;
|
||||
}
|
||||
|
||||
.osd-colorscheme-settings {
|
||||
background-color: $layer0;
|
||||
padding: 0.313rem 0.626rem;
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.osd-color {
|
||||
border-radius: 0.650rem;
|
||||
-gtk-outline-radius: 0.650rem;
|
||||
min-width: 2.727rem;
|
||||
min-height: 1.705rem;
|
||||
padding: 0rem 0.341rem;
|
||||
font-weight: bold;
|
||||
|
||||
box {
|
||||
@include small-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-tertiary {
|
||||
background-color: $tertiary;
|
||||
color: $onTertiary;
|
||||
box { background-color: $onTertiary; }
|
||||
}
|
||||
.osd-color-tertiaryContainer {
|
||||
background-color: $tertiaryContainer;
|
||||
color: $onTertiaryContainer;
|
||||
box { background-color: $onTertiaryContainer; }
|
||||
}
|
||||
|
||||
.osd-color-error {
|
||||
background-color: $error;
|
||||
color: $onError;
|
||||
box { background-color: $onError; }
|
||||
}
|
||||
.osd-color-errorContainer {
|
||||
background-color: $errorContainer;
|
||||
color: $onErrorContainer;
|
||||
box { background-color: $onErrorContainer; }
|
||||
}
|
||||
|
||||
.osd-color-surface {
|
||||
background-color: $surface;
|
||||
color: $onSurface;
|
||||
border: 0.068rem solid $outlineVariant;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
|
||||
.osd-color-surfaceContainer {
|
||||
background-color: $surfaceContainer;
|
||||
color: $onSurface;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
|
||||
.osd-color-inverseSurface {
|
||||
background-color: $inverseSurface;
|
||||
color: $inverseOnSurface;
|
||||
box { background-color: $onSurfaceVariant; }
|
||||
}
|
||||
|
||||
.osd-color-surfaceVariant {
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
box { background-color: $onSurfaceVariant; }
|
||||
}
|
||||
.osd-color-L1 {
|
||||
background-color: $layer1;
|
||||
color: $onLayer1;
|
||||
box { background-color: $onLayer1; }
|
||||
}
|
||||
|
||||
.osd-color-layer0 {
|
||||
background-color: $layer0;
|
||||
color: $onLayer0;
|
||||
box { background-color: $onLayer0; }
|
||||
}
|
||||
|
||||
.osd-settings-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
color: $onSurface;
|
||||
|
||||
&:hover {
|
||||
background-color: $surfaceContainerHigh;
|
||||
}
|
||||
&:active {
|
||||
background-color: $surfaceContainerHighest;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-show {
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
.osd-hide {
|
||||
transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
119
.config/ags/scss/_osk.scss
Normal file
119
.config/ags/scss/_osk.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
$osk_key_height: 2.5rem;
|
||||
$osk_key_width: 2.5rem;
|
||||
$osk_key_padding: 0.188rem;
|
||||
$osk_key_rounding: 0.545rem;
|
||||
$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: $layer0;
|
||||
}
|
||||
|
||||
.osk-body {
|
||||
padding: 1.023rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.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: $onLayer0Inactive;
|
||||
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: $layer1;
|
||||
color: $onLayer1;
|
||||
padding: $osk_key_padding;
|
||||
font-weight: 500;
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key:hover,
|
||||
.osk-key:focus {
|
||||
background-color: $layer1Hover;
|
||||
}
|
||||
|
||||
.osk-key:active {
|
||||
background-color: $layer1Active;
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key-active {
|
||||
background-color: $layer1Active;
|
||||
}
|
||||
|
||||
.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: calc($osk_key_height / 2); // dart-sass
|
||||
// min-height: $osk_key_height / 2; // sassc
|
||||
}
|
||||
|
||||
.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: $layer1;
|
||||
color: $onLayer1;
|
||||
font-weight: 500;
|
||||
font-size: $osk_key_fontsize;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.osk-control-button:hover,
|
||||
.osk-control-button:focus {
|
||||
background-color: $layer1Hover;
|
||||
}
|
||||
|
||||
.osk-control-button:active {
|
||||
background-color: $layer1Active;
|
||||
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
.config/ags/scss/_overview.scss
Normal file
139
.config/ags/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: $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: $layer0;
|
||||
color: $onLayer0;
|
||||
}
|
||||
|
||||
.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: $background;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.overview-tasks-workspace {
|
||||
@include normal-rounding;
|
||||
// @include elevation-border;
|
||||
margin: 0.341rem;
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.overview-tasks-workspace-number {
|
||||
@include mainfont;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.overview-tasks-window {
|
||||
@include normal-rounding;
|
||||
@include menu_decel;
|
||||
background-color: transparentize($layer3, 0.2);
|
||||
color: $onSurface;
|
||||
border: 0.068rem solid $surfaceContainerHighest;
|
||||
}
|
||||
|
||||
.overview-tasks-window:hover,
|
||||
.overview-tasks-window:focus {
|
||||
background-color: transparentize($secondaryContainer, 0.3);
|
||||
}
|
||||
|
||||
.overview-tasks-window:active {
|
||||
background-color: transparentize($secondaryContainer, 0.3);
|
||||
}
|
||||
|
||||
.overview-tasks-window-selected {
|
||||
background-color: transparentize($secondaryContainer, 0.3);
|
||||
}
|
||||
|
||||
.overview-tasks-window-dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
40
.config/ags/scss/_session.scss
Normal file
40
.config/ags/scss/_session.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.session-bg {
|
||||
background-color: transparentize($color: $layer0, $amount: 0.4);
|
||||
}
|
||||
|
||||
.session-button {
|
||||
@include large-rounding;
|
||||
min-width: 8.182rem;
|
||||
min-height: 8.182rem;
|
||||
background-color: $layer1;
|
||||
color: $onLayer1;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.session-button-focused {
|
||||
background-color: $layer1Hover;
|
||||
}
|
||||
|
||||
.session-button-desc {
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
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: $layer1;
|
||||
color: $onLayer1;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@for $i from 1 through 7 {
|
||||
.session-color-#{$i} {
|
||||
color: nth($sessionColors, $i);
|
||||
}
|
||||
}
|
||||
911
.config/ags/scss/_sidebars.scss
Normal file
911
.config/ags/scss/_sidebars.scss
Normal file
|
|
@ -0,0 +1,911 @@
|
|||
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
||||
|
||||
@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: $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: $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: $layer1;
|
||||
}
|
||||
|
||||
.sidebar-group-nopad {
|
||||
@include normal-rounding;
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.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: $layer1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: $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: transparentize($onSurfaceVariant, 0.7);
|
||||
}
|
||||
|
||||
slider:hover,
|
||||
slider:focus {
|
||||
background-color: transparentize($onSurfaceVariant, 0.6);
|
||||
}
|
||||
|
||||
slider:active {
|
||||
background-color: transparentize($onSurface, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.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: $outline;
|
||||
}
|
||||
|
||||
.sidebar-calendar-header {
|
||||
margin: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
padding: 0rem 0.682rem;
|
||||
background-color: $layer2;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:hover,
|
||||
.sidebar-calendar-monthyear-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $layer2;
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-todo-item {
|
||||
padding-right: 0.545rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: $layer2;
|
||||
color: $onSurfaceVariant;
|
||||
margin: 0.341rem;
|
||||
padding: 0.205rem 0.545rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-new,
|
||||
.sidebar-todo-new:focus {
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-todo-new:active {
|
||||
color: $onPrimaryContainer;
|
||||
background-color: $primaryContainer;
|
||||
}
|
||||
|
||||
.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: $surfaceContainerHigh;
|
||||
}
|
||||
|
||||
.sidebar-todo-add:active {
|
||||
background-color: $surfaceContainerHighest;
|
||||
}
|
||||
|
||||
.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, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available:active {
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.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 $outline;
|
||||
}
|
||||
|
||||
.sidebar-todo-entry:focus {
|
||||
border: 0.068rem solid $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-module {
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $layer1;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-module-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $surfaceContainerHigh;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-module-scripts-button {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $layer1;
|
||||
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-icontabswitcher {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.sidebar-chat-providerswitcher {
|
||||
@include small-rounding;
|
||||
padding: 0.477rem 0.682rem;
|
||||
background-color: $surfaceContainerHigh;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
// .sidebar-chat-providerswitcher-list {
|
||||
// margin: 0.341rem 0rem;
|
||||
// }
|
||||
|
||||
.sidebar-chat-viewport {
|
||||
@include element_decel;
|
||||
// margin: 0.682rem 0rem;
|
||||
padding: 0.682rem 0rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-textarea {
|
||||
@include normal-rounding;
|
||||
background-color: $layer1;
|
||||
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: $surfaceBright;
|
||||
}
|
||||
|
||||
.sidebar-chat-send:active {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available:hover,
|
||||
.sidebar-chat-send-available:focus {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available:active {
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-chat-message {
|
||||
margin: 0.682rem;
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 0.136rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-indicator-waifu {
|
||||
@include element_decel;
|
||||
@include full-rounding;
|
||||
min-width: 0.136rem;
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.sidebar-chat-name {
|
||||
@include titlefont;
|
||||
@include small-rounding;
|
||||
padding: 0.341rem 0.818rem;
|
||||
margin: 0.341rem;
|
||||
// margin-left: 0rem;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
}
|
||||
|
||||
.sidebar-chat-name-user {
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
}
|
||||
|
||||
.sidebar-chat-name-bot {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
.sidebar-chat-name-system {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-txtblock {
|
||||
margin-left: -0.136rem;
|
||||
padding: 0.341rem;
|
||||
padding-left: 0.818rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-txt {
|
||||
@include readingfont;
|
||||
}
|
||||
|
||||
.sidebar-chat-latex {
|
||||
@include small-rounding;
|
||||
margin: 0rem 0.682rem;
|
||||
padding: 0.682rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock {
|
||||
@include normal-rounding;
|
||||
// @include elevation2;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar {
|
||||
@include mainfont;
|
||||
background-color: $layer3;
|
||||
color: $onLayer3;
|
||||
border-top-left-radius: $rounding_small;
|
||||
border-top-right-radius: $rounding_small;
|
||||
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: $surfaceBright;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn:active {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.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: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip {
|
||||
@include element_decel;
|
||||
@include small-rounding;
|
||||
padding: 0.341rem 0.477rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-chip-action {
|
||||
@include element_decel;
|
||||
background-color: $layer2;
|
||||
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: $layer3;
|
||||
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, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:active {
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-waifu-heading {
|
||||
@include titlefont;
|
||||
padding: 0.341rem;
|
||||
margin-left: -0.136rem;
|
||||
padding-left: 0.818rem;
|
||||
}
|
||||
|
||||
.sidebar-waifu-txt {
|
||||
@include mainfont;
|
||||
}
|
||||
|
||||
.sidebar-waifu-image {
|
||||
@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);
|
||||
}
|
||||
|
||||
.sidebar-booru-imagegrid {
|
||||
@include normal-rounding;
|
||||
}
|
||||
|
||||
.sidebar-booru-image {
|
||||
@include small-rounding;
|
||||
margin: 0.273rem;
|
||||
min-width: 11.932rem;
|
||||
min-height: 11.932rem;
|
||||
// background-color: rgba(100, 200, 0, 0.3);
|
||||
}
|
||||
|
||||
.sidebar-booru-image-drawingarea {
|
||||
// background-color: rgba(200, 100, 0, 0.3);
|
||||
@include small-rounding;
|
||||
min-width: 12.273rem;
|
||||
min-height: 12.273rem;
|
||||
}
|
||||
|
||||
.sidebar-booru-image-actions {
|
||||
// background-color: rgba(100, 100, 0, 0.3);
|
||||
@include element_decel;
|
||||
margin: 0.545rem;
|
||||
}
|
||||
|
||||
.sidebar-volmixer-stream {
|
||||
border-bottom: 0.068rem solid $outlineVariant;
|
||||
padding: 0.682rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-volmixer-stream-appicon {
|
||||
font-size: 3.273rem;
|
||||
}
|
||||
|
||||
.sidebar-volmixer-stream-slider {
|
||||
trough {
|
||||
border-radius: $rounding_verysmall;
|
||||
min-height: 1.364rem;
|
||||
min-width: 1.364rem;
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
highlight {
|
||||
border-radius: $rounding_verysmall;
|
||||
min-height: 1.364rem;
|
||||
min-width: 1.364rem;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
slider {
|
||||
border-radius: $rounding_verysmall;
|
||||
min-height: 1.364rem;
|
||||
min-width: 1.364rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-volmixer-status {
|
||||
color: $onSurface;
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-bluetooth-device {
|
||||
padding: 0.682rem;
|
||||
@include normal-rounding;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
}
|
||||
|
||||
.sidebar-bluetooth-appicon {
|
||||
@include symbolic-icon;
|
||||
font-size: 2.045rem;
|
||||
}
|
||||
|
||||
.sidebar-bluetooth-device-remove {
|
||||
@include full-rounding;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
// background-color: $layer3;
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-bluetooth-device-remove:hover,
|
||||
.sidebar-bluetooth-device-remove:focus {
|
||||
@include full-rounding;
|
||||
background-color: $layer2Hover;
|
||||
padding: 0.341rem;
|
||||
}
|
||||
8
.config/ags/scss/_wal.scss
Normal file
8
.config/ags/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
.config/ags/scss/main.scss
Normal file
41
.config/ags/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