forked from Shinonome/dots-hyprland
stuff
This commit is contained in:
end-4
+125
@@ -0,0 +1,125 @@
|
||||
.bg-decor-dow {
|
||||
color: $onPrimaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 35pt;
|
||||
}
|
||||
|
||||
.bg-decor-date {
|
||||
color: $onPrimaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.bg-module {
|
||||
// background-color: shade($colorbg, 10%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.bg-text {
|
||||
text-shadow: -1px -1px 0 $primaryContainer,
|
||||
1px -1px 0 $primaryContainer,
|
||||
-1px 1px 0 $primaryContainer,
|
||||
1px 1px 0 $primaryContainer;
|
||||
color: $onPrimaryContainer;
|
||||
font-family: 'Rubik';
|
||||
}
|
||||
|
||||
.bg-icon {
|
||||
margin-bottom: 9px;
|
||||
color: $onSecondaryContainer;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 15pt;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
background-color: $secondaryContainer;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.bg-title {
|
||||
text-shadow: -1px -1px 0 $primaryContainer,
|
||||
1px -1px 0 $primaryContainer,
|
||||
-1px 1px 0 $primaryContainer,
|
||||
1px 1px 0 $primaryContainer;
|
||||
color: $onPrimaryContainer;
|
||||
font-size: 16pt;
|
||||
margin: 5px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.bg-cool-text {
|
||||
color: $onPrimaryContainer;
|
||||
font-family: 'Rubik';
|
||||
font-size: 13pt;
|
||||
margin: 5px;
|
||||
text-shadow: -1px -1px 0 $primaryContainer,
|
||||
1px -1px 0 $primaryContainer,
|
||||
-1px 1px 0 $primaryContainer,
|
||||
1px 1px 0 $primaryContainer;
|
||||
}
|
||||
|
||||
.bg-progress {
|
||||
margin: 5px;
|
||||
min-width: 450px;
|
||||
|
||||
trough {
|
||||
border-radius: 9999px;
|
||||
background-color: #24222A;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
highlight {
|
||||
border-radius: 9999px;
|
||||
background-color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-graph-container {
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $onPrimaryContainer;
|
||||
margin: 5px;
|
||||
box-shadow: -1px -1px 0 $primaryContainer,
|
||||
1px -1px 0 $primaryContainer,
|
||||
-1px 1px 0 $primaryContainer,
|
||||
1px 1px 0 $primaryContainer;
|
||||
}
|
||||
|
||||
.bg-graph {
|
||||
color: $color3;
|
||||
// background-color: $color3;
|
||||
}
|
||||
|
||||
.bg-date {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.bg-decor-input-left {
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
margin-top: 30px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: 15pt;
|
||||
min-height: 50px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.bg-decor-input-right {
|
||||
border-top-right-radius: 999px;
|
||||
border-bottom-right-radius: 999px;
|
||||
margin-top: 30px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
// padding-top: 5px;
|
||||
// padding-bottom: 5px;
|
||||
font-size: 15pt;
|
||||
min-height: 50px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
.bottombar-closed-hitbox {
|
||||
min-width: 1920px;
|
||||
background-color: mix(rgba(30, 30, 30, 0.5), $colorbg, 50%);
|
||||
}
|
||||
.bottombar-bg {
|
||||
min-width: 1920px;
|
||||
min-height: 300px;
|
||||
border-top-left-radius: 26px;
|
||||
border-top-right-radius: 26px;
|
||||
background-color: shade($colorbg, 70%);
|
||||
background-size: 100% auto;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bottombar-bg-front {
|
||||
min-width: 1920px;
|
||||
min-height: 300px;
|
||||
border-top-left-radius: 26px;
|
||||
border-top-right-radius: 26px;
|
||||
border: 2px solid $primary;
|
||||
border-bottom: 0px solid transparent;
|
||||
background-color: mix(rgba(30, 30, 30, 0.5), $colorbg, 50%);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cava-column {
|
||||
// background-image: linear-gradient($color1, $color3);
|
||||
background-color: rgb(176, 226, 247);
|
||||
border-top-left-radius: 99px;
|
||||
border-top-right-radius: 99px;
|
||||
margin: 6px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.bottombar-musicinfo-box {
|
||||
margin-left: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.bottombar-title {
|
||||
font-family: 'Gabarito';
|
||||
font-size: 30pt;
|
||||
font-weight: 700;
|
||||
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bottombar-artist {
|
||||
font-family: 'Gabarito';
|
||||
font-size: 16pt;
|
||||
font-weight: 700;
|
||||
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bottombar-music-cover {
|
||||
border-radius: 15px;
|
||||
min-height: 200px;
|
||||
min-width: 200px;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
.calendar-win {
|
||||
@include window;
|
||||
background-color: $colorbarbg;
|
||||
border: 3px solid $color3;
|
||||
border-radius: 15px;
|
||||
color: $colortext;
|
||||
padding: .2em;
|
||||
font-family: 'Rubik';
|
||||
margin: 14px;
|
||||
}
|
||||
|
||||
calendar {
|
||||
* {
|
||||
padding-top: 10px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
:selected {
|
||||
color: $onPrimary;
|
||||
font-weight: bolder;
|
||||
background-color: $primary;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: $colortext;
|
||||
margin: 15px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $onTertiaryContainer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: $colortext;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
:indeterminate {
|
||||
color: $onBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarwin-title {
|
||||
border-radius: 9999px;
|
||||
font-size: 15pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
margin: 1px;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.calendarwin-button {
|
||||
border-radius: 9999px;
|
||||
font-size: 12pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
margin: 1px;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.calendarwin-text {
|
||||
border-radius: 9999px;
|
||||
font-size: 11pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.calendarwin-icon {
|
||||
background-position: center;
|
||||
min-height: 42px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.calendarwin-text {
|
||||
border-radius: 9999px;
|
||||
font-size: 12pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.calendarwin-day-1 {
|
||||
background-color: transparent;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.calendarwin-day0 {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendarwin-day1 {
|
||||
background-color: $primary;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.calendarwin-day0:hover {
|
||||
background-color: rgba(75, 75, 75, 0.5);
|
||||
}
|
||||
|
||||
.calendarwin-day0:active {
|
||||
background-color: tint(rgba(75, 75, 75, 0.5), 10%);
|
||||
}
|
||||
|
||||
.calendarwin-day1:hover {
|
||||
background-color: tint($color4, 10%);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.calendarwin-day1:active {
|
||||
background-color: tint($color4, 20%);
|
||||
color: black;
|
||||
}
|
||||
Executable
+77
@@ -0,0 +1,77 @@
|
||||
|
||||
|
||||
$rosewater: #f5e0dc;
|
||||
$flamingo: #f2cdcd;
|
||||
$pink: #f5c2e7;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
// $red: #EF738A;
|
||||
$maroon: #eba0ac;
|
||||
$peach: #fab387;
|
||||
$yellow: #f9e2af;
|
||||
$green: #a6e3a1;
|
||||
$teal: #94e2d5;
|
||||
$sky: #89dceb;
|
||||
$sapphire: #74c7ec;
|
||||
$blue: #89b4fa;
|
||||
$lavender: #b4befe;
|
||||
$true: #EF738A;
|
||||
$false: #A9B1D6;
|
||||
|
||||
|
||||
$forestgreen: #A8B468;
|
||||
$forestyellow : #8e8370;
|
||||
$foresttext : #d3c6ab;
|
||||
$forestblack : #1e201f;
|
||||
$forestred : #e76c69;
|
||||
$forestpink : #d698b5;
|
||||
$forestorange : #e59576;
|
||||
$forestgray : #75817b;
|
||||
$forestgraylight: #495156;
|
||||
$forestgreendark: #7fba90;
|
||||
$forestblue: #77AEA7;
|
||||
|
||||
$tokyobluedark: #1A1B26;
|
||||
$tokyobluelessdark: #1f212e;
|
||||
$tokyotext: #a9b1d6;
|
||||
$tokyopink: #ff79b1; //nah theres no pink in tokyonight, but i need one so added
|
||||
$tokyored: #EF738A;
|
||||
$tokyoorange: #FF9E64;
|
||||
$tokyoyellow: #E0AF68;
|
||||
$tokyogreen: #9ECE6A;
|
||||
$tokyoturquoise: #73daca;
|
||||
$tokyoice: #b4f9f8;
|
||||
$tokyocyan: #0DB9D7;
|
||||
$tokyoblue: #7AA2F7;
|
||||
$tokyopurple: #9778D0;
|
||||
$tokyogrey: #444B6A;
|
||||
$catbg: #1E1E2E;
|
||||
|
||||
$text: $tokyotext;
|
||||
$subtext1: #868dac;
|
||||
$subtext0: #a6adc8;
|
||||
$overlay2: #9399b2;
|
||||
$overlay1: #7f849c;
|
||||
$overlay0: rgba(108, 112, 134, 0.4);
|
||||
$overlayedge: rgba(108, 112, 134, 0.15);
|
||||
|
||||
$hover0: rgba(200, 200, 200, 0.3);
|
||||
|
||||
$surface2: rgba(88, 91, 112, 0.7);
|
||||
$surface1: rgba(69, 71, 90, 0.7);
|
||||
// $surface0: rgba(28, 28, 48, 0.5); //Needs dynamic change
|
||||
// $surface0: #24222A; //Needs dynamic change
|
||||
|
||||
|
||||
$base: #1E201F;
|
||||
$mantle: #181825;
|
||||
$crust: #121415;
|
||||
|
||||
$fg: $tokyotext;
|
||||
$bg: #171726;
|
||||
$barbg: #131426;
|
||||
$shadow: $crust;
|
||||
|
||||
// $battcolor: $tokyogreen;
|
||||
// $memcolor: $tokyoorange;
|
||||
// $cpucolor: $tokyoblue;
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
//Auto generated color theme for image at: [Local wallpaper]
|
||||
@function bluetint($color, $percentage) { @return mix(#CDDFED, $color, $percentage); }
|
||||
@function blueshade($color, $percentage) { @return mix(#152E50, $color, $percentage); }
|
||||
$colorbarbg: #1f252d;
|
||||
$colorbg: rgba(31,37,45,0.75);
|
||||
$colortext: #e6e2e7;
|
||||
$color0: #60C4F1;
|
||||
$color1: #9F9BAB;
|
||||
$color2: #DBB4AD;
|
||||
$color3: #A2AECF;
|
||||
$color4: #CFB7CE;
|
||||
$color5: #A4D7F1;
|
||||
$color6: #e6e2e7;
|
||||
$color7: #A2AECF;
|
||||
@@ -0,0 +1,14 @@
|
||||
//Auto generated color theme for image at: https://i1.sndcdn.com/artworks-000653264299-7lydij-t80x80.jpg
|
||||
@function bluetint($color, $percentage) { @return mix(#CDDFED, $color, $percentage); }
|
||||
@function blueshade($color, $percentage) { @return mix(#152E50, $color, $percentage); }
|
||||
$colorbarbg: #090727;
|
||||
$colorbg: rgba(9,7,39,0.7);
|
||||
$colortext: #e1e4f1;
|
||||
$color0: #926AC9;
|
||||
$color1: #2994E6;
|
||||
$color2: #5E9EE8;
|
||||
$color3: #5BC3E9;
|
||||
$color4: #9EA8E4;
|
||||
$color5: #AEC4E9;
|
||||
$color6: #e1e4f1;
|
||||
$color7: #5BC3E9;
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
$colorbg: #0f0e11; //Get from color0
|
||||
$colortext: white; //Get from color4
|
||||
$color0: #8C66FF;
|
||||
$color1: #CC3378;
|
||||
$color2: #5933CC;
|
||||
$color3: #EEAA00;
|
||||
$color4: white;
|
||||
$color5: white;
|
||||
$color6: white;
|
||||
$color7: white; //Get from color4 (border)
|
||||
$colormusic: white;
|
||||
+236
@@ -0,0 +1,236 @@
|
||||
.dash-window {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
color: $primary;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
.dash-subtitle {
|
||||
color: $color5;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.dash {
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
background-color: $colorbarbg;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.dash-profile {
|
||||
min-width: 300px;
|
||||
min-height: 228px;
|
||||
}
|
||||
|
||||
.dash-user-pic {
|
||||
margin: 20px;
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border-radius: 1500px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.dash-fetch {
|
||||
color: $colortext;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.dash-fetch-icon {
|
||||
color: $colortext;
|
||||
font-size: 16pt;
|
||||
margin: 3px;
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.dash-fetch-icon-nerd {
|
||||
color: $colortext;
|
||||
font-size: 16pt;
|
||||
margin: 3px;
|
||||
font-family: JetBrainsMono Nerd Font Regular;
|
||||
}
|
||||
|
||||
.dash-icon {
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.dash-button {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.dash-button:hover {
|
||||
background-color: tint($colorbarbg, 10%);
|
||||
}
|
||||
|
||||
.dash-button:focus {
|
||||
background-color: tint($colorbarbg, 10%);
|
||||
}
|
||||
|
||||
.dash-button:active {
|
||||
background-color: tint($colorbarbg, 20%);
|
||||
}
|
||||
|
||||
.dash-quote-content {
|
||||
margin: 2px;
|
||||
color: $colortext;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.dash-quote-author {
|
||||
margin: 2px;
|
||||
color: $colortext;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.dash-tile {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.dash-input-icon {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-width: 30px;
|
||||
margin: -5px;
|
||||
margin-left: 15px;
|
||||
background-color: $colorbarbg;
|
||||
border: 2px solid tint($colorbarbg, 10%);
|
||||
border-radius: 10px;
|
||||
color: $colortext;
|
||||
font-size: 19pt;
|
||||
}
|
||||
|
||||
.dash-input {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-width: 860px;
|
||||
margin: -5px;
|
||||
background-color: $colorbarbg;
|
||||
border: 2px solid tint($colorbarbg, 10%);
|
||||
border-radius: 10px;
|
||||
color: $colortext;
|
||||
font-size: 15pt;
|
||||
caret-color: $colortext;
|
||||
|
||||
selection {
|
||||
background-color: rgba(154, 152, 152, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-time {
|
||||
color: $primary;
|
||||
font-size: 35pt;
|
||||
}
|
||||
|
||||
.dash-date {
|
||||
color: $primary;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
.dash-clock-text-area {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.dash-clock-circle-area {
|
||||
// margin-left: 10px;
|
||||
}
|
||||
|
||||
.dash-clock-circle {
|
||||
background-color: $surface0;
|
||||
}
|
||||
|
||||
.dash-clock-inner {
|
||||
padding: 36px;
|
||||
}
|
||||
|
||||
.dash-clock-circle-minute {
|
||||
margin: 10px;
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.dash-debug-area {
|
||||
background-color: rgba(214, 28, 50, 0.3);
|
||||
}
|
||||
|
||||
.dash-dir-area {
|
||||
min-width: 198px;
|
||||
}
|
||||
|
||||
.dash-dir {
|
||||
font-size: 15pt;
|
||||
padding: 10px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.dash-resources {
|
||||
min-width: 198px;
|
||||
min-height: 122px;
|
||||
}
|
||||
|
||||
.dash-resouce-icon {
|
||||
font-size: 99pt;
|
||||
}
|
||||
|
||||
.dash-resource-inner {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.dash-resource-text {
|
||||
font-size: 15pt;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.dash-resource-title {
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.dash-resource-tile {
|
||||
// background-color: tint($colorbarbg, 20%);
|
||||
border-radius: 12px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 11px;
|
||||
// padding: 15px;
|
||||
}
|
||||
|
||||
.clrt {
|
||||
color: $colortext;
|
||||
}
|
||||
|
||||
.clr0 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.clr1 {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
.clr2 {
|
||||
color: $tertiary;
|
||||
}
|
||||
|
||||
.clr3 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.clr4 {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
.clr5 {
|
||||
color: $tertiary;
|
||||
}
|
||||
|
||||
.clr6 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.clr7 {
|
||||
color: $secondary;
|
||||
}
|
||||
Executable
+338
@@ -0,0 +1,338 @@
|
||||
.dashfs-bg {
|
||||
background-color: rgba(20, 20, 20, 0.7);
|
||||
}
|
||||
|
||||
.dashfs-greet {
|
||||
border-radius: 10px;
|
||||
margin-top: 40px;
|
||||
margin-left: 40px;
|
||||
border: 3px solid transparent;
|
||||
border-left: 3px solid $color5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dashfs-greet-text {
|
||||
font-family: 'Rubik';
|
||||
font-size: 20pt;
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.dashfs-clock {
|
||||
border-radius: 10px;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
border: 3px solid transparent;
|
||||
border-right: 3px solid $color4;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.dashfs-clock-time {
|
||||
margin-top: -15px;
|
||||
font-family: 'Rubik';
|
||||
font-size: 45pt;
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.dashfs-clock-date {
|
||||
font-family: 'Rubik';
|
||||
font-size: 22pt;
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.dashfs-calendar-title {
|
||||
border-radius: 9999px;
|
||||
font-size: 15pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
margin: 1px;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.dashfs-calendar-button {
|
||||
border-radius: 9999px;
|
||||
font-size: 12pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
margin: 1px;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.dashfs-calendar-text {
|
||||
border-radius: 9999px;
|
||||
font-size: 11pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.dashfs-section-nopad {
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
border-top: 3px solid $color4;
|
||||
}
|
||||
|
||||
.dashfs-section {
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
border-top: 3px solid $color1;
|
||||
padding: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.dashfs-section-title {
|
||||
color: $color1;
|
||||
font-size: 18pt;
|
||||
font-family: 'Rubik';
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dashfs-fetch {
|
||||
color: $color1;
|
||||
font-size: 15pt;
|
||||
font-family: 'Rubik';
|
||||
}
|
||||
|
||||
.dashfs-fetch-icon {
|
||||
color: $color1;
|
||||
font-size: 16pt;
|
||||
margin: 5px 0px;
|
||||
margin-right: 10px;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
}
|
||||
|
||||
.dashfs-section-button {
|
||||
border-radius: 8px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dashfs-section-button:hover {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.dashfs-calendar-icon {
|
||||
background-position: center;
|
||||
min-height: 42px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.dashfs-monthbutton {
|
||||
// background-size: 80% auto;
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
border-radius: 6px;
|
||||
margin: 12px 3px;
|
||||
margin-top: 0px;
|
||||
padding: 6px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.dashfs-monthbutton:hover {
|
||||
background-color: rgba(95, 95, 95, 0.4);
|
||||
}
|
||||
|
||||
.dashfs-calendar-text {
|
||||
border-radius: 9999px;
|
||||
font-size: 12pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.dashfs-nerd-icon {
|
||||
color: $color1;
|
||||
font-size: 16pt;
|
||||
margin: 5px 0px;
|
||||
margin-right: 10px;
|
||||
font-family: 'JetBrainsMono Nerd Font';
|
||||
}
|
||||
|
||||
.dashfs-button-only {
|
||||
:first-child {
|
||||
:first-child {
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashfs-button-only:hover {
|
||||
:first-child {
|
||||
:first-child {
|
||||
background-color: shade($overlay0, 2%);
|
||||
border: 1px solid $overlayedge;
|
||||
border-top: 1px solid tint($overlayedge, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashfs-button-pad {
|
||||
padding: 3px;
|
||||
// min-width: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.dashfs-taskbaricon {
|
||||
background-size: 60%;
|
||||
background-position: center;
|
||||
min-width: 64px;
|
||||
min-height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dashfs-taskbaricon-false {
|
||||
background-size: 70%;
|
||||
background-position: center;
|
||||
min-width: 64px;
|
||||
min-height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dashfs-taskbaricon-true {
|
||||
background-size: 70%;
|
||||
background-position: center;
|
||||
min-width: 64px;
|
||||
min-height: 64px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dashfs-taskbar-indicator-true {
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 65px;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
background-color: $color4;
|
||||
}
|
||||
|
||||
.dashfs-taskbar-indicator-false {
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 65px;
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
background-color: #9C98A3;
|
||||
}
|
||||
|
||||
.dashfs-day-1 {
|
||||
background-color: transparent;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.dashfs-day0 {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashfs-day1 {
|
||||
background-color: tint($color4, 20%);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dashfs-day0:hover {
|
||||
background-color: rgba(75, 75, 75, 0.5);
|
||||
}
|
||||
|
||||
.dashfs-day0:active {
|
||||
background-color: tint(rgba(75, 75, 75, 0.5), 10%);
|
||||
}
|
||||
|
||||
.dashfs-day1:hover {
|
||||
background-color: tint($color4, 10%);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dashfs-day1:active {
|
||||
background-color: tint($color4, 20%);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dashfs-music-cover {
|
||||
border-radius: 10px;
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.dashfs-resource-title {
|
||||
color: $tertiary;
|
||||
font-size: 18pt;
|
||||
font-family: 'Rubik';
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dashfs-resource-box {
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
border-top: 3px solid $tertiary;
|
||||
padding: 20px 5px;
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
.dashfs-resource-circle {
|
||||
color: $tertiary;
|
||||
background-color: #5B5A5C;
|
||||
}
|
||||
|
||||
.dashfs-resource-icon {
|
||||
color: $tertiary;
|
||||
font-size: 30pt;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
}
|
||||
|
||||
.dashfs-resource-label {
|
||||
color: $onTertiary;
|
||||
background-color: $tertiary;
|
||||
font-size: 13pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 9999px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.dashfs-graph {
|
||||
background-image: url('images/svg/graph.svg');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.dashfs-cava-column {
|
||||
background-color: rgba(176, 226, 247, 0.1);
|
||||
border-radius: 9999px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.dashfs-quote-content {
|
||||
font-family: 'Space Grotesk';
|
||||
font-weight: 500;
|
||||
font-size: 16pt;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.dashfs-quote-author {
|
||||
font-family: 'Space Grotesk';
|
||||
font-weight: 500;
|
||||
font-size: 14pt;
|
||||
color: $primary;
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
.edit-mode-checkbox-false {
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
// background-image: url('images/svg/tournaments.svg');
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.edit-mode-checkbox-true {
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
background-color: $overlay0;
|
||||
// background-image: url('images/svg/tournaments.svg');
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
color: transparent;
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
#d7e2ff
|
||||
#dfbbde
|
||||
#9F9BAB
|
||||
#A2AECF
|
||||
#CFB7CE
|
||||
#CFB7CE
|
||||
@@ -0,0 +1 @@
|
||||
#e1e4f1
|
||||
@@ -0,0 +1,27 @@
|
||||
$primary: #adc6ff;
|
||||
$onPrimary: #002d6f;
|
||||
$primaryContainer: #17448f;
|
||||
$onPrimaryContainer: #d7e2ff;
|
||||
$secondary: #bfc6dd;
|
||||
$onSecondary: #293041;
|
||||
$secondaryContainer: #3f4659;
|
||||
$onSecondaryContainer: #dbe2f9;
|
||||
$tertiary: #dfbbde;
|
||||
$onTertiary: #412743;
|
||||
$tertiaryContainer: #593e5a;
|
||||
$onTertiaryContainer: #fcd7fa;
|
||||
$error: #ffb4a9;
|
||||
$onError: #680003;
|
||||
$errorContainer: #930006;
|
||||
$onErrorContainer: #ffb4a9;
|
||||
$colorbarbg: #1b1b1e;
|
||||
$onBackground: #e4e2e6;
|
||||
$surface: #1b1b1e;
|
||||
$onSurface: #e4e2e6;
|
||||
$surfaceVariant: #44464e;
|
||||
$onSurfaceVariant: #c5c6d0;
|
||||
$outline: #8e9099;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #e4e2e6;
|
||||
$inverseOnSurface: #303033;
|
||||
$inversePrimary: #355ca8;
|
||||
Executable
+298
@@ -0,0 +1,298 @@
|
||||
.music-area {
|
||||
padding: 10px;
|
||||
@include rounding;
|
||||
}
|
||||
|
||||
.song-cover-art {
|
||||
@include rounding;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
margin: 4px 5px 4px 0;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.music-window {
|
||||
@include window;
|
||||
@include rounding;
|
||||
background-color: $colorbarbg;
|
||||
border: 3px solid;
|
||||
color: $colortext;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.music-cover-art {
|
||||
@include rounding;
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("eww_covers/cover_art_default");
|
||||
background-position: 50% 15%;
|
||||
// border-radius: 5px;
|
||||
// margin: 1em;
|
||||
// min-height: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.music-box {
|
||||
@include rounding;
|
||||
padding-top: 24px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.music-title {
|
||||
// font-weight: bold;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
min-height: 39px;
|
||||
font-size: 19pt;
|
||||
color: $colortext;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.music-title-hover {
|
||||
// font-weight: bold;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 19pt;
|
||||
color: $colortext;
|
||||
background-color: $overlay0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.music-title-bar {
|
||||
font-family: 'Rubik';
|
||||
font-size: 15pt;
|
||||
color: $colorbar;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.music-artist-bar {
|
||||
color: $colorbar;
|
||||
padding: 10px 0;
|
||||
font-family: 'Rubik';
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.music-artist {
|
||||
color: $colortext;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
.music-button label {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
// color: $text;
|
||||
font-size: 2rem;
|
||||
font-family: SF Mono Nerd Font;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.music-time {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color1;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.music-bar scale {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-family: SF Mono Nerd Font;
|
||||
|
||||
highlight {
|
||||
background-color: $color1;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
trough {
|
||||
background-color: $surface0;
|
||||
border-radius: 24px;
|
||||
min-height: 10px;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.music-ctl {
|
||||
border-radius: 0px;
|
||||
color: $color1;
|
||||
// padding-right: 10px;
|
||||
min-width: 53px;
|
||||
}
|
||||
|
||||
.music-icon {
|
||||
padding-top: 5px; //Because the music icon is a bit high
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
color: $color1;
|
||||
background-image: url("images/LinageMusic.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.music-ctl-revealer {
|
||||
margin-top: -4px;
|
||||
// transition: 200ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
}
|
||||
|
||||
.music-ctl-revealer-false {
|
||||
// padding-left: 10px;
|
||||
}
|
||||
|
||||
.music-ctl-revealer-true {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.music-media-source {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-right-radius: 15px;
|
||||
min-width: 40px;
|
||||
min-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.music-source-icon {
|
||||
font-family: 'JetBrainsMono Nerd Font';
|
||||
font-size: 16pt;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.song-button {
|
||||
color: $colortext;
|
||||
border-radius: 9999px;
|
||||
margin: 3px 3px;
|
||||
min-width: 52px;
|
||||
font-size: 32pt;
|
||||
}
|
||||
|
||||
.song-button:hover {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.music-button-box {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
color: $colortext;
|
||||
min-width: 160px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding-bottom: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.osu-music-box {
|
||||
// min-width: 75px;
|
||||
min-width: 53px;
|
||||
background-size: 65% auto;
|
||||
background-position: 50% 50%;
|
||||
// background-image: url('images/svg/beatmaps.svg');
|
||||
// background-color: $colorbarbg;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.osu-music-box-dummy {
|
||||
min-width: 50px;
|
||||
min-height: 53px;
|
||||
margin-bottom: -6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.osu-music-slider {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
min-height: 6px;
|
||||
padding-left: 13px;
|
||||
|
||||
trough {
|
||||
border-radius: 9999px;
|
||||
background-color: #5c5b5b;
|
||||
min-height: 6px;
|
||||
// margin-left: 32px;
|
||||
// margin-right: 32px;
|
||||
// min-width: 70px;
|
||||
min-width: 3px;
|
||||
}
|
||||
|
||||
highlight {
|
||||
min-width: 3px;
|
||||
border-radius: 9999px;
|
||||
background-color: $colorbar;
|
||||
}
|
||||
}
|
||||
|
||||
.track-scale {
|
||||
@include rounding;
|
||||
|
||||
trough {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
min-height: 8px;
|
||||
// margin-left: 32px;
|
||||
// margin-right: 32px;
|
||||
// min-width: 70px;
|
||||
min-width: 3px;
|
||||
}
|
||||
|
||||
highlight {
|
||||
min-width: 8px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
background-color: $color0;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-music-cover {
|
||||
border-radius: 99px;
|
||||
min-height: 45px;
|
||||
min-width: 45px;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.bar-music-state {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
color: $color6;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 9999px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.music-cava-column {
|
||||
background-color: $color0;
|
||||
margin: 0 3px;
|
||||
margin-bottom: 8px;
|
||||
border-top-left-radius: 99px;
|
||||
border-top-right-radius: 99px;
|
||||
}
|
||||
|
||||
.music-time-label {
|
||||
color: $colorbar;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 13pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 9999px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.music-button-box-bar {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
color: $colortext;
|
||||
min-height: 160px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.song-button-bar {
|
||||
color: $colortext;
|
||||
border-radius: 9999px;
|
||||
// margin: 3px;
|
||||
min-height: 52px;
|
||||
font-size: 32pt;
|
||||
}
|
||||
|
||||
.song-button-bar:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
.notifications-box {
|
||||
// @include window;
|
||||
// padding: 1rem;
|
||||
font-family: 'Rubik';
|
||||
}
|
||||
|
||||
.notification {
|
||||
// @include rounding;
|
||||
border-radius: 8px;
|
||||
font-size: 12pt;
|
||||
font-family: 'Rubik';
|
||||
background-color: $surface0;
|
||||
// border-bottom: 3px solid $colorbg;
|
||||
padding: .7rem;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// box {
|
||||
// margin-bottom: .5rem;
|
||||
// }
|
||||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 3px solid $color7;
|
||||
}
|
||||
|
||||
.appname {
|
||||
font-size: 13pt;
|
||||
color: $color0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 13pt;
|
||||
color: $colortext;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.body {
|
||||
color: $colortext;
|
||||
}
|
||||
}
|
||||
|
||||
// .container {
|
||||
// &:first-child {
|
||||
// border-radius: 8px 8px 0 0;
|
||||
// }
|
||||
|
||||
// ;
|
||||
|
||||
// &:last-child {
|
||||
// border-radius: 0 0 8px 8px;
|
||||
// }
|
||||
|
||||
// ;
|
||||
// }
|
||||
|
||||
.notification-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notification-label {
|
||||
color: $colortext;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.notification-action {
|
||||
border-radius: 50%;
|
||||
margin-top: 33px;
|
||||
margin-bottom: 9px;
|
||||
padding: 0 .3rem;
|
||||
|
||||
label {
|
||||
color: $colortext;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $surface0;
|
||||
}
|
||||
}
|
||||
Executable
+43
@@ -0,0 +1,43 @@
|
||||
.osd-window {
|
||||
margin: 5px;
|
||||
border-radius: 9999px;
|
||||
min-width: 10px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.osd-var {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
background-color: $surface;
|
||||
border-radius: 9999px;
|
||||
min-width: 100px;
|
||||
min-height: 37px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.osd-circle {
|
||||
// margin-left: 14px;
|
||||
background-color: #5c5b5b;
|
||||
color: $colortext;
|
||||
}
|
||||
|
||||
.osd-incircle {
|
||||
font-size: 19pt;
|
||||
padding: 6px;
|
||||
font-family: "Material Symbols Rounded"; //AAAAAAAAAGGGHHH
|
||||
color: $colortext;
|
||||
}
|
||||
|
||||
.osd-incircle-bright {
|
||||
font-size: 19pt;
|
||||
padding: 6px;
|
||||
font-family: "Material Symbols Rounded"; //AAAAAAAAAGGGHHH
|
||||
color: $colortext;
|
||||
}
|
||||
|
||||
.osd-text {
|
||||
font-size: 15pt;
|
||||
font-family: "Rubik"; //AAAAAAAAAGGGHHH
|
||||
color: $colortext;
|
||||
padding-right: 5px;
|
||||
}
|
||||
+442
@@ -0,0 +1,442 @@
|
||||
.osettings-window {
|
||||
min-width: 501px;
|
||||
padding-top: 20px;
|
||||
background-color: shade($colorbarbg, 4%);
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
margin: 7px;
|
||||
margin-left: 0px;
|
||||
border-radius: 17px;
|
||||
border: 2px solid $color0;
|
||||
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url('images/pictures/beach_smoothie.jpg');
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.onotify-window {
|
||||
min-width: 529px;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
margin: 7px;
|
||||
margin-right: 0px;
|
||||
border-radius: 17px;
|
||||
border: 2px solid $color0;
|
||||
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url('images/pictures/beach_drinks.jpeg');
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.osettings-separator {
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
min-height: 6px;
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
.osettings-content {
|
||||
// padding-top: 13px;
|
||||
margin-top: 27px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
font-family: Rubik;
|
||||
color: $onBackground;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.onotify-content {
|
||||
// padding-top: 13px;
|
||||
margin-top: 27px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 16px;
|
||||
font-family: Rubik;
|
||||
color: $onBackground;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.osettings-heading {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
}
|
||||
|
||||
.osettings-title {
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
font-size: 30pt;
|
||||
}
|
||||
|
||||
.osettings-subtitle {
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.osettings-section-icon {
|
||||
margin-top: 33px;
|
||||
margin-bottom: 9px;
|
||||
color: $onSecondaryContainer;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 20pt;
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
background-color: $secondaryContainer;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.osettings-section {
|
||||
margin-top: 33px;
|
||||
margin-bottom: 9px;
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.osettings-text {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.osettings-text-icon {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: $onBackground;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 14pt;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.osettings-search {
|
||||
margin-left: 28px;
|
||||
margin-right: 28px;
|
||||
margin-top: 35px;
|
||||
background-color: tint($colorbarbg, 4%);
|
||||
border: 2px solid $onSurfaceVariant;
|
||||
color: $onBackground;
|
||||
border-radius: 10px;
|
||||
font-size: 11pt;
|
||||
min-height: 45px;
|
||||
caret-color: $onBackground;
|
||||
|
||||
selection {
|
||||
background-color: rgba(154, 152, 152, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.osettings-search-text {
|
||||
color: $onSurfaceVariant;
|
||||
padding: 10px;
|
||||
font-size: 13pt;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
.osettings-search-icon {
|
||||
color: $onSurfaceVariant;
|
||||
padding: 6px;
|
||||
padding-left: 0px;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.osettings-scroll-bg {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.osettings-scroll-bg-colored {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.osettings-btn {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 9999px;
|
||||
min-height: 50px;
|
||||
font-weight: normal;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.osettings-btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.osettings-btn-destructive {
|
||||
color: $onTertiary;
|
||||
background-color: $tertiary;
|
||||
background-image: linear-gradient(45deg, shade($color4, 5%) 58%, tint($color4, 10%) 58%);
|
||||
background-size: 300% 300%;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.osettings-btn-neutral {
|
||||
color: $onPrimary;
|
||||
background-color: $primary;
|
||||
background-image: linear-gradient(45deg, shade($color1, 5%) 58%, tint($color1, 10%) 58%);
|
||||
background-size: 300% 300%;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.osettings-btn-informative {
|
||||
color: $onSecondary;
|
||||
background-color: $secondary;
|
||||
background-image: linear-gradient(45deg, shade($color5, 5%) 58%, tint($color5, 10%) 58%);
|
||||
background-size: 300% 300%;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.osettings-btn-neutral:hover,
|
||||
.osettings-btn-neutral:focus {
|
||||
background-color: tint($primary, 10%);
|
||||
// background-image: linear-gradient(135deg, $color3 75%, $color3 75%);
|
||||
background-position: 70% 0%;
|
||||
}
|
||||
|
||||
.osettings-btn-destructive:hover,
|
||||
.osettings-btn-destructive:focus {
|
||||
background-color: tint($tertiary, 10%);
|
||||
// background-image: linear-gradient(135deg, tint($color4, 10%) 75%, tint($color4, 10%) 75%);
|
||||
background-position: 70% 0%;
|
||||
}
|
||||
|
||||
.osettings-btn-informative:hover,
|
||||
.osettings-btn-informative:focus {
|
||||
background-color: tint($secondary, 10%);
|
||||
// background-image: linear-gradient(135deg, tint($color5, 10%) 75%, tint($color5, 10%) 75%);
|
||||
background-position: 70% 0%;
|
||||
}
|
||||
|
||||
.osettings-btn-neutral:active {
|
||||
background-color: tint($primary, 10%);
|
||||
// background-image: linear-gradient(135deg, $color3 75%, $color3 75%);
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.osettings-btn-destructive:active {
|
||||
background-color: tint($tertiary, 10%);
|
||||
// background-image: linear-gradient(135deg, tint($color4, 10%) 75%, tint($color4, 10%) 75%);
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.osettings-btn-informative:active {
|
||||
background-color: tint($secondary, 10%);
|
||||
// background-image: linear-gradient(135deg, tint($color5, 10%) 75%, tint($color5, 10%) 75%);
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.rounder {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.osettings-slider {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
min-height: 6px;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(45deg, $primary 50%, tint($colorbarbg, 15%) 50%);
|
||||
padding: 0px;
|
||||
|
||||
trough {
|
||||
border-radius: 9999px;
|
||||
background-color: tint($colorbarbg, 15%);
|
||||
min-height: 6px;
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
// min-width: 70px;
|
||||
}
|
||||
|
||||
highlight {
|
||||
border-radius: 9999px;
|
||||
background-color: $primary;
|
||||
background-image: linear-gradient(45deg, $primary 0%, $primary 100%);
|
||||
}
|
||||
|
||||
slider {
|
||||
border-radius: 9999px;
|
||||
min-height: 20px;
|
||||
min-width: 65px;
|
||||
background-color: $primary;
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
slider:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.osettings-checkbox {
|
||||
border-radius: 9999px;
|
||||
// min-height: 20px;
|
||||
// min-height: 6px;
|
||||
min-width: 60px;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
border: 3px solid $primary;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.osettings-checkbox-1 {
|
||||
border-radius: 9999px;
|
||||
// min-height: 20px;
|
||||
// min-height: 6px;
|
||||
min-width: 60px;
|
||||
background-color: $primary;
|
||||
color: transparent;
|
||||
border: 3px solid $primary;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.osettings-checkbox-0 {
|
||||
border-radius: 9999px;
|
||||
// min-height: 20px;
|
||||
// min-height: 6px;
|
||||
min-width: 60px;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
border: 3px solid $primary;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.osettings-checkbox:checked {
|
||||
border-radius: 9999px;
|
||||
background-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.osettings-waifu {
|
||||
margin-top: 30px;
|
||||
min-width: 350px;
|
||||
min-height: 350px;
|
||||
border-radius: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.onotify-app-icon {
|
||||
margin: 9px 5px;
|
||||
|
||||
color: $onSecondaryContainer;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 20pt;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
background-color: $secondaryContainer;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.onotify-app-name {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.onotify-app-text {
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.onotify-app-ser {
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.onotify-app-vol-circle {
|
||||
background-color: #5c5b5b;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.onotify-app-volbox {
|
||||
margin: 9px 5px;
|
||||
padding: 5px;
|
||||
|
||||
color: $onSecondaryContainer;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 20pt;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
background-color: $secondaryContainer;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.osettings-tag {
|
||||
color: $onTertiary;
|
||||
background-color: $tertiary;
|
||||
font-size: 13pt;
|
||||
font-family: 'Rubik';
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 9999px;
|
||||
min-width: 50px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.osettings-tag:hover {
|
||||
background-color: tint($tertiary, 20%);
|
||||
}
|
||||
|
||||
.osettings-tag:active {
|
||||
background-color: tint($tertiary, 40%);
|
||||
}
|
||||
|
||||
.osettings-tag-nerd {
|
||||
color: $onTertiary;
|
||||
background-color: $tertiary;
|
||||
font-size: 13pt;
|
||||
font-family: 'JetBrainsMono Nerd Font';
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 9999px;
|
||||
min-width: 50px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.osettings-tag-nerd:hover {
|
||||
background-color: tint($tertiary, 20%);
|
||||
}
|
||||
|
||||
.osettings-tag-nerd:active {
|
||||
background-color: tint($tertiary, 40%);
|
||||
}
|
||||
|
||||
.osettings-tag-material {
|
||||
color: $onTertiary;
|
||||
background-color: $tertiary;
|
||||
font-size: 13pt;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 9999px;
|
||||
// min-width: 25px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.osettings-tag-material:hover {
|
||||
background-color: tint($tertiary, 20%);
|
||||
}
|
||||
|
||||
.osettings-tag-material:active {
|
||||
background-color: tint($tertiary, 40%);
|
||||
}
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
.overview-window {
|
||||
@include window;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
border-radius: 22px;
|
||||
background-color: shade($colorbarbg, 4%);
|
||||
// background-color: transparent;
|
||||
// border: 3px solid $color0;
|
||||
//padding: 5px;
|
||||
}
|
||||
|
||||
.overview-window-title {
|
||||
font-size: 15pt;
|
||||
color: $onPrimaryContainer;
|
||||
border-radius: 15px;
|
||||
background-color: tint($surface, 5%);
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
min-height: 30px;
|
||||
background-image: linear-gradient(135deg, $onSecondary 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 33%, $onSecondary 33%, $onSecondary 68%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 95%, $onSecondary 95%);
|
||||
}
|
||||
|
||||
.overview-window-top {
|
||||
@include rounding;
|
||||
background-color: transparent;
|
||||
border: 3px solid transparent;
|
||||
//padding: 5px;
|
||||
}
|
||||
|
||||
.overview-ws {
|
||||
border: 2px solid;
|
||||
border-radius: 15px;
|
||||
background-color: tint($surface, 2%);
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.overview-ws-true {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.overview-ws-false {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.overview-ws-window {
|
||||
// border: 2px solid transparent;
|
||||
// background-color: rgba(108, 112, 134, 1);
|
||||
border-radius: 15px;
|
||||
background-color: shade($surface0, 2%);
|
||||
border: 1px solid $surface0;
|
||||
border-top: 1px solid tint($surface0, 5%);
|
||||
// //margin: 3px;
|
||||
}
|
||||
|
||||
.overview-ws-window-content {
|
||||
border-radius: 11px;
|
||||
// background-color: rgba(135, 147, 163, 0.7);
|
||||
}
|
||||
|
||||
.overview-topbar-icon {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
margin: 5px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.overview-topbar-button {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
margin: 5px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.overview-topbar-button:hover {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.overview-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.overview-background {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.overview-ws-text {
|
||||
//padding-left: 5px;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.overview-ws-subtext {
|
||||
//padding-left: 5px;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.overview-ws-number {
|
||||
//Note: height 100px width 356px
|
||||
font-size: 25pt;
|
||||
border-radius: 11px;
|
||||
background-color: $overlay0;
|
||||
color: $onBackground;
|
||||
//margin: 10px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.overview-title {
|
||||
font-weight: bold;
|
||||
font-size: 15pt;
|
||||
//padding-top: .6rem;
|
||||
//padding-bottom: .6rem;
|
||||
}
|
||||
|
||||
.overview-search-box {
|
||||
border: 2px solid;
|
||||
border-radius: 9999px;
|
||||
background-color: tint($colorbarbg, 4%);
|
||||
color: $onBackground;
|
||||
font-size: 15pt;
|
||||
min-height: 45px;
|
||||
min-width: 130px;
|
||||
|
||||
margin: 20px 20px;
|
||||
padding: 2px 17px;
|
||||
|
||||
caret-color: $onBackground;
|
||||
|
||||
selection {
|
||||
background-color: rgba(154, 152, 152, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.overview-search-box:focus {
|
||||
color: $tertiary;
|
||||
}
|
||||
|
||||
.overview-results {
|
||||
// background-color: $surface;
|
||||
padding: 10px 5px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.overview-search-result {
|
||||
border-radius: 9999px;
|
||||
background-color: $onTertiary;
|
||||
color: $onBackground;
|
||||
font-size: 15pt;
|
||||
min-height: 47px;
|
||||
min-width: 400px;
|
||||
padding: 2px 12px;
|
||||
padding-left: 57px;
|
||||
margin: 0px 5px;
|
||||
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 60%, tint($tertiaryContainer, 10%) 60%);
|
||||
background-size: 400% auto;
|
||||
background-position: 40% 50%;
|
||||
|
||||
caret-color: transparent;
|
||||
|
||||
selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-search-result-icon {
|
||||
background-color: $tertiaryContainer;
|
||||
border-radius: 9999px;
|
||||
min-height: 51px;
|
||||
min-width: 51px;
|
||||
// padding: 2px 12px;
|
||||
}
|
||||
|
||||
.overview-search-result:focus {
|
||||
color: $onTertiaryContainer;
|
||||
// background-color: $tertiaryContainer;
|
||||
background-position: 65% 50%;
|
||||
}
|
||||
|
||||
.overview-search-result:active {
|
||||
color: $onTertiaryContainer;
|
||||
// background-color: $tertiaryContainer;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.overview-search-typetosearch-pad {
|
||||
min-width: 160px;
|
||||
margin: 20px 20px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
|
||||
.overview-search-typetosearch-text {
|
||||
margin: 13px 13px;
|
||||
font-size: 15pt;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
.system-menu-box {
|
||||
@include window;
|
||||
background-color: $colorbarbg;
|
||||
border: 3px solid $border;
|
||||
// color: $colortext;
|
||||
}
|
||||
|
||||
.separator {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
margin: 1rem 1.5rem 0;
|
||||
|
||||
.time {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.date-box {
|
||||
margin: 0 1rem;
|
||||
|
||||
label {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
background: unset;
|
||||
margin: 0 .5rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-row {
|
||||
font-family: Rubik;
|
||||
// margin: .5rem .7rem;
|
||||
margin-top: 27px;
|
||||
|
||||
.airplane-box button {
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
.power-box button {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
font-family: 'Rubik';
|
||||
border-top-left-radius: 31px;
|
||||
border-top-right-radius: 31px;
|
||||
border-bottom-left-radius: 31px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
margin: .3rem;
|
||||
|
||||
button {
|
||||
border-top-left-radius: 31px;
|
||||
border-top-right-radius: 31px;
|
||||
border-bottom-left-radius: 31px;
|
||||
border-bottom-right-radius: 10px;
|
||||
padding: 1rem;
|
||||
|
||||
label {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $overlay0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sliders {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
@include rounding;
|
||||
background-color: $surface0;
|
||||
margin: .5rem 1rem;
|
||||
padding: .6rem 1rem;
|
||||
|
||||
scale {
|
||||
margin-right: -1rem;
|
||||
min-width: 25.8rem;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
background-color: $bg1;
|
||||
border-radius: 24px;
|
||||
margin: 0 1rem;
|
||||
min-height: 10px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
box {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sliderbg {
|
||||
background-color: transparent;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.volume-bar highlight {
|
||||
font-family: SF Mono Nerd Font;
|
||||
@include rounding;
|
||||
background: $color6;
|
||||
// background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
|
||||
}
|
||||
|
||||
.volume-slider-box scale highlight {
|
||||
@include rounding;
|
||||
background: $color6;
|
||||
// background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
|
||||
// border: 2px solid;
|
||||
min-height: 0.9rem;
|
||||
}
|
||||
|
||||
// .volume-slider-box scale {
|
||||
// @include rounding;
|
||||
// background-color: #1A1B26;
|
||||
// border: 2px solid;
|
||||
// }
|
||||
|
||||
.bottom-row {
|
||||
margin: .5rem 1rem;
|
||||
|
||||
.battery-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.battery-wattage {
|
||||
color: $color7;
|
||||
}
|
||||
|
||||
.battery-status {
|
||||
color: $colortext;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $surface0;
|
||||
border-radius: 50%;
|
||||
margin-bottom: .1rem;
|
||||
padding: 0 .5rem;
|
||||
|
||||
label {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $overlay0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.power-button {
|
||||
min-height: 2.5rem;
|
||||
// min-width: 2.5rem;
|
||||
}
|
||||
Executable
+188
@@ -0,0 +1,188 @@
|
||||
.membar {
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.cpubar {
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.batbar {
|
||||
color: $color6;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.cpubar-circle {
|
||||
background-color: #5c5b5b;
|
||||
}
|
||||
.membar-circle {
|
||||
background-color: #5c5b5b;
|
||||
}
|
||||
.batbar-circle {
|
||||
background-color: #5c5b5b;
|
||||
}
|
||||
|
||||
// .batbar-circle {
|
||||
// color: $battcolor;
|
||||
// padding-right: 4px;
|
||||
// }
|
||||
|
||||
// .membar,
|
||||
// .cpubar,
|
||||
// .batbar {
|
||||
// // background-color: transparent;
|
||||
// padding: 0px;
|
||||
// }
|
||||
|
||||
.membar:hover,
|
||||
.cpubar:hover,
|
||||
.batbar:hover {
|
||||
// border-top: 2px solid;
|
||||
}
|
||||
|
||||
.batt-percentage {
|
||||
color: $color6;
|
||||
}
|
||||
|
||||
.batt-low {
|
||||
background-color: #B5E8E0;
|
||||
color: #161320;
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.sys-menu-charge {
|
||||
color: $colorbar;
|
||||
}
|
||||
|
||||
.iconmem {
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.iconcpu {
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 3rem;
|
||||
padding: .7rem;
|
||||
}
|
||||
|
||||
.sys-text-sub {
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.sys-text-mem,
|
||||
.sys-text-cpu {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sys-icon-mem,
|
||||
.sys-icon-cpu {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.system-info-box {
|
||||
@include rounding;
|
||||
background-color: $surface0;
|
||||
margin: .5rem 1rem;
|
||||
// padding: .5rem;
|
||||
}
|
||||
|
||||
.sys-mem,
|
||||
.sys-cpu {
|
||||
background-color: $colorbg;
|
||||
}
|
||||
|
||||
.sys-icon-mem,
|
||||
.sys-text-mem,
|
||||
.sys-mem {
|
||||
color: $memcolor;
|
||||
}
|
||||
|
||||
.sys-icon-cpu,
|
||||
.sys-text-cpu,
|
||||
.sys-cpu {
|
||||
color: $cpucolor;
|
||||
}
|
||||
|
||||
.sys-box {
|
||||
margin: .3em;
|
||||
// background-color: tint($colorbarbg, 7%);
|
||||
// border-radius: 20px;
|
||||
// padding: 35px;
|
||||
|
||||
box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cpu-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color4;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.mem-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color5;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.mem-menu-left {
|
||||
color: $color5;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.mem-menu-mid {
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.mem-menu-right {
|
||||
color: $color5;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.sys-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $battcolor;
|
||||
}
|
||||
|
||||
.sys-menu-button {
|
||||
color: $colorbar;
|
||||
padding: 16px 0;
|
||||
background-image: url("images/LinageSettings.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
// .volume-bar, .brightness-slider, .slider {
|
||||
// background-color: #16161E;
|
||||
// border: 2px solid #7C9FF5;
|
||||
// border-radius: 99px;
|
||||
// }
|
||||
|
||||
.sys-toggle {
|
||||
font-size: 3pt;
|
||||
}
|
||||
|
||||
.inside-circle {
|
||||
min-height: 27px;
|
||||
min-width: 27px;
|
||||
}
|
||||
|
||||
.sys-circle-inner {
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sys-batt-charge-box {
|
||||
margin: 5px 0;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.taskbaricon {
|
||||
background-size: 60%;
|
||||
background-position: center;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.taskbaricon-false {
|
||||
background-size: 70%;
|
||||
background-position: center;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.taskbaricon-true {
|
||||
background-size: 70%;
|
||||
background-position: center;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.taskbar-indicator-true {
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 43px;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.taskbar-indicator-false {
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 43px;
|
||||
margin-left: 22px;
|
||||
margin-right: 22px;
|
||||
background-color: #9C98A3;
|
||||
}
|
||||
|
||||
.taskbar-button-only {
|
||||
:first-child {
|
||||
:first-child {
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taskbar-button-only:hover {
|
||||
:first-child {
|
||||
:first-child {
|
||||
background-color: shade($overlay0, 2%);
|
||||
border: 1px solid $overlayedge;
|
||||
border-top: 1px solid tint($overlayedge, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taskbar-button-only:active {
|
||||
:first-child {
|
||||
:first-child {
|
||||
background-color: tint($overlay0, 8%);
|
||||
border: 1px solid tint($overlayedge, 10%);
|
||||
border-top: 1px solid tint($overlayedge, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taskbar-button-pad {
|
||||
padding: 3px;
|
||||
// min-width: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
Executable
+205
@@ -0,0 +1,205 @@
|
||||
.themer-button {
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
color: $colortext;
|
||||
font-family: Material Symbols Rounded;
|
||||
// background-image: url('images/svg/beatmappacks.svg');
|
||||
// background-size: auto 65%;
|
||||
// background-position: center;
|
||||
}
|
||||
|
||||
|
||||
.themer-button-false {
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
color: $colortext;
|
||||
font-family: Material Symbols Rounded;
|
||||
// background-image: url('images/svg/beatmappacks.svg');
|
||||
// background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
// background-size: 400% auto;
|
||||
// background-position: 90% 50%;
|
||||
}
|
||||
|
||||
.themer-button-true {
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
color: $colortext;
|
||||
font-family: Material Symbols Rounded;
|
||||
background-color: $overlay0;
|
||||
// background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
// background-size: 400% auto;
|
||||
// background-position: 90% 50%;
|
||||
}
|
||||
|
||||
.themer-action-button {
|
||||
@include rounding;
|
||||
min-height: 53px;
|
||||
min-width: 53px;
|
||||
color: $colortext;
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.themer-action-button:hover {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.themer-action-button:active {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
|
||||
.themer-action-button:focus {
|
||||
border: 2px solid $overlay0;
|
||||
}
|
||||
|
||||
.themer-menu-box {
|
||||
@include window;
|
||||
@include rounding;
|
||||
border-radius: 15px;
|
||||
background-color: shade($colorbarbg, 4%);
|
||||
margin: 14px;
|
||||
transition: 250ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
// box-shadow: 2px 2px 6px #16161E;
|
||||
}
|
||||
|
||||
.themer-title {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 15pt;
|
||||
padding: .6rem;
|
||||
color: $colortext;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.themer-prompt {
|
||||
color: $colortext;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 12pt;
|
||||
padding: .6rem;
|
||||
}
|
||||
|
||||
.themer-input {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
// background-color: $surface0;
|
||||
background-color: tint($colorbarbg, 4%);
|
||||
color: $colortext;
|
||||
border-radius: 10px;
|
||||
padding: 7px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
border: 2px solid $overlay0;
|
||||
caret-color: $colortext;
|
||||
|
||||
selection {
|
||||
background-color: rgba(154, 152, 152, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.themer-input:focus {
|
||||
border: 2px solid $colortext;
|
||||
}
|
||||
|
||||
.themer-color-preview-section {
|
||||
@include rounding;
|
||||
}
|
||||
|
||||
.themer-color-preview {
|
||||
min-height: 25px;
|
||||
min-width: 25px;
|
||||
border-radius: 5px;
|
||||
border-width: 55px;
|
||||
}
|
||||
|
||||
.preview-0 {
|
||||
background-color: $color0;
|
||||
}
|
||||
|
||||
.preview-1 {
|
||||
background-color: $color1;
|
||||
}
|
||||
|
||||
.preview-2 {
|
||||
background-color: $color2;
|
||||
}
|
||||
|
||||
.preview-3 {
|
||||
background-color: $color3;
|
||||
}
|
||||
|
||||
.preview-4 {
|
||||
background-color: $color4;
|
||||
}
|
||||
|
||||
.preview-5 {
|
||||
background-color: $color5;
|
||||
}
|
||||
|
||||
.preview-6 {
|
||||
background-color: $color6;
|
||||
}
|
||||
|
||||
.preview-7 {
|
||||
background-color: $color7;
|
||||
}
|
||||
|
||||
.preview-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.preview-onPrimary {
|
||||
background-color: $onPrimary;
|
||||
}
|
||||
|
||||
.preview-primaryContainer {
|
||||
background-color: $primaryContainer;
|
||||
}
|
||||
|
||||
.preview-onPrimaryContainer {
|
||||
background-color: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
.preview-secondary {
|
||||
background-color: $secondary;
|
||||
}
|
||||
|
||||
.preview-onSecondary {
|
||||
background-color: $onSecondary;
|
||||
}
|
||||
|
||||
.preview-secondaryContainer {
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.preview-onSecondaryContainer {
|
||||
background-color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.preview-tertiary {
|
||||
background-color: $tertiary;
|
||||
}
|
||||
|
||||
.preview-onTertiary {
|
||||
background-color: $onTertiary;
|
||||
}
|
||||
|
||||
.preview-tertiaryContainer {
|
||||
background-color: $tertiaryContainer;
|
||||
}
|
||||
|
||||
.preview-onTertiaryContainer {
|
||||
background-color: $onTertiaryContainer;
|
||||
}
|
||||
|
||||
.preview-background {
|
||||
background-color: $colorbarbg;
|
||||
}
|
||||
|
||||
.preview-onBackground {
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.preview-surface {
|
||||
background-color: $surface;
|
||||
}
|
||||
|
||||
.preview-onSurface {
|
||||
background-color: $onSurface;
|
||||
}
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
.vol-icon {
|
||||
color: $color6;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
// .vol-icon {
|
||||
// color: $tokyocyan;
|
||||
// padding-right: 2px;
|
||||
// }
|
||||
|
||||
.volbar highlight {
|
||||
background-image: linear-gradient(to right, $teal 30%, $sky 100%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.vol-menu {
|
||||
font-size: 1pt;
|
||||
color: $color6;
|
||||
padding-right: 2px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.vol-menu:hover {
|
||||
border-top: 2px solid;
|
||||
}
|
||||
.vol-icon:hover {
|
||||
border-top: 2px solid;
|
||||
}
|
||||
Executable
+55
@@ -0,0 +1,55 @@
|
||||
.winctl {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: $color0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.winctl:hover {
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
.winws {
|
||||
@include rounding;
|
||||
background-color: $surface0;
|
||||
margin: .4rem .8rem;
|
||||
padding: .3rem .5rem;
|
||||
min-width: 31rem;
|
||||
}
|
||||
|
||||
.winws-title {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-weight: bold;
|
||||
font-size: 15pt;
|
||||
padding-top: .6rem;
|
||||
padding-bottom: .6rem;
|
||||
}
|
||||
|
||||
.wintext {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 13pt;
|
||||
}
|
||||
.winsubtext {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.winws-workspace {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.appicon {
|
||||
background-size: 90%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
padding-left: 22px;
|
||||
padding-right: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wschoose {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 14pt;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user