stuff
@@ -0,0 +1,59 @@
|
||||
[global]
|
||||
monitor = 0
|
||||
follow = mouse
|
||||
geometry = "280x50-20+90"
|
||||
indicate_hidden = no
|
||||
shrink = no
|
||||
separator_height = 4
|
||||
separator_color = yes
|
||||
padding = 20
|
||||
horizontal_padding = 20
|
||||
frame_width = 3
|
||||
sort = no
|
||||
idle_threshold = 120
|
||||
font = Rubik 13
|
||||
line_height = 4
|
||||
markup = full
|
||||
format = "<b>%s</b>\n%b"
|
||||
alignment = left
|
||||
show_age_threshold = 60
|
||||
word_wrap = yes
|
||||
ignore_newline = no
|
||||
stack_duplicates = false
|
||||
hide_duplicate_count = yes
|
||||
show_indicators = no
|
||||
icon_position = left
|
||||
max_icon_size = 48
|
||||
sticky_history = yes
|
||||
history_length = 20
|
||||
browser = x-www-browser -new-tab
|
||||
always_run_script = true
|
||||
title = Dunst
|
||||
class = Dunst
|
||||
corner_radius = 10
|
||||
origin = top-right
|
||||
offset = 8x69
|
||||
|
||||
[shortcuts]
|
||||
close = ctrl+shift+space
|
||||
close_all = ctrl+shift+space
|
||||
history = ctrl+grave
|
||||
context = ctrl+shift+period
|
||||
|
||||
[urgency_low]
|
||||
timeout = 4
|
||||
background = "#1A1B2699"
|
||||
foreground = "#A4D7F1"
|
||||
frame_color = "#A4D7F1"
|
||||
|
||||
[urgency_normal]
|
||||
timeout = 8
|
||||
background = "#1A1B2699"
|
||||
foreground = "#A4D7F1"
|
||||
frame_color = "#A4D7F1"
|
||||
|
||||
[urgency_critical]
|
||||
timeout = 0
|
||||
background = "#1A1B2699"
|
||||
foreground = "#FDDC74"
|
||||
frame_color = "#FDDC74"
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Linux",
|
||||
"includePath": [
|
||||
"${workspaceFolder}/**",
|
||||
"/usr/include/**"
|
||||
],
|
||||
"defines": [],
|
||||
"compilerPath": "/usr/bin/clang",
|
||||
"cStandard": "c17",
|
||||
"cppStandard": "c++17",
|
||||
"intelliSenseMode": "linux-clang-x64",
|
||||
"configurationProvider": "ms-vscode.makefile-tools",
|
||||
}
|
||||
],
|
||||
"version": 4
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"files.associations": {
|
||||
"optional": "cpp",
|
||||
"system_error": "cpp",
|
||||
"fstream": "cpp",
|
||||
"iosfwd": "cpp",
|
||||
"string_view": "cpp",
|
||||
"string": "cpp",
|
||||
"any": "cpp",
|
||||
"array": "cpp",
|
||||
"bit": "cpp",
|
||||
"*.tcc": "cpp",
|
||||
"cctype": "cpp",
|
||||
"clocale": "cpp",
|
||||
"cmath": "cpp",
|
||||
"codecvt": "cpp",
|
||||
"compare": "cpp",
|
||||
"concepts": "cpp",
|
||||
"cstddef": "cpp",
|
||||
"cstdint": "cpp",
|
||||
"cstdio": "cpp",
|
||||
"cstdlib": "cpp",
|
||||
"cstring": "cpp",
|
||||
"ctime": "cpp",
|
||||
"cwchar": "cpp",
|
||||
"cwctype": "cpp",
|
||||
"deque": "cpp",
|
||||
"forward_list": "cpp",
|
||||
"map": "cpp",
|
||||
"unordered_map": "cpp",
|
||||
"vector": "cpp",
|
||||
"exception": "cpp",
|
||||
"functional": "cpp",
|
||||
"initializer_list": "cpp",
|
||||
"iomanip": "cpp",
|
||||
"iostream": "cpp",
|
||||
"istream": "cpp",
|
||||
"limits": "cpp",
|
||||
"memory": "cpp",
|
||||
"new": "cpp",
|
||||
"numbers": "cpp",
|
||||
"numeric": "cpp",
|
||||
"ostream": "cpp",
|
||||
"ranges": "cpp",
|
||||
"ratio": "cpp",
|
||||
"span": "cpp",
|
||||
"sstream": "cpp",
|
||||
"stdexcept": "cpp",
|
||||
"streambuf": "cpp",
|
||||
"type_traits": "cpp",
|
||||
"tuple": "cpp",
|
||||
"typeinfo": "cpp",
|
||||
"utility": "cpp",
|
||||
"valarray": "cpp",
|
||||
"csignal": "cpp",
|
||||
"cstdarg": "cpp",
|
||||
"atomic": "cpp",
|
||||
"bitset": "cpp",
|
||||
"charconv": "cpp",
|
||||
"chrono": "cpp",
|
||||
"condition_variable": "cpp",
|
||||
"list": "cpp",
|
||||
"set": "cpp",
|
||||
"unordered_set": "cpp",
|
||||
"algorithm": "cpp",
|
||||
"iterator": "cpp",
|
||||
"memory_resource": "cpp",
|
||||
"random": "cpp",
|
||||
"regex": "cpp",
|
||||
"source_location": "cpp",
|
||||
"format": "cpp",
|
||||
"mutex": "cpp",
|
||||
"semaphore": "cpp",
|
||||
"shared_mutex": "cpp",
|
||||
"stdfloat": "cpp",
|
||||
"stop_token": "cpp",
|
||||
"thread": "cpp",
|
||||
"cinttypes": "cpp",
|
||||
"variant": "cpp"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"tasks": [
|
||||
{
|
||||
"type": "cppbuild",
|
||||
"label": "C/C++: g++ build active file",
|
||||
"command": "/usr/bin/g++",
|
||||
"args": [
|
||||
"-fdiagnostics-color=always",
|
||||
"-g",
|
||||
"${file}",
|
||||
"-o",
|
||||
"${fileDirname}/${fileBasenameNoExtension}",
|
||||
"-lboost_iostreams",
|
||||
"`pkg-config --libs boost_iostreams`"
|
||||
],
|
||||
"options": {
|
||||
"cwd": "${fileDirname}"
|
||||
},
|
||||
"problemMatcher": [
|
||||
"$gcc"
|
||||
],
|
||||
"group": {
|
||||
"kind": "build",
|
||||
"isDefault": true
|
||||
},
|
||||
"detail": "Task generated by Debugger."
|
||||
}
|
||||
],
|
||||
"version": "2.0.0"
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.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;
|
||||
|
||||
margin-top: 5px; //for shadow
|
||||
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bottombar-bg-front {
|
||||
min-width: 1920px;
|
||||
min-height: 300px;
|
||||
border-top-left-radius: 26px;
|
||||
border-top-right-radius: 26px;
|
||||
border-bottom: 0px solid transparent;
|
||||
background-color: mix(rgba(30, 30, 30, 0.5), $colorbg, 50%);
|
||||
background-size: 100% 100%;
|
||||
|
||||
margin-top: 5px; //for shadow
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.bottombar-musicinfo-box {
|
||||
margin-left: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.bottombar-title {
|
||||
font-family: 'Lexend';
|
||||
font-size: 30pt;
|
||||
font-weight: 500;
|
||||
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bottombar-artist {
|
||||
font-family: 'Lexend';
|
||||
font-size: 16pt;
|
||||
font-weight: 500;
|
||||
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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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: [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,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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
.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-greet-subtext {
|
||||
font-family: 'Rubik';
|
||||
font-size: 14pt;
|
||||
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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
#d7e2ff
|
||||
#dfbbde
|
||||
#9F9BAB
|
||||
#A2AECF
|
||||
#CFB7CE
|
||||
#CFB7CE
|
||||
@@ -0,0 +1,6 @@
|
||||
#d7e2ff
|
||||
#dfbbde
|
||||
#9F9BAB
|
||||
#A2AECF
|
||||
#CFB7CE
|
||||
#CFB7CE
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,305 @@
|
||||
.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-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.music-title-hover {
|
||||
// font-weight: bold;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
font-size: 19pt;
|
||||
color: $colortext;
|
||||
background-color: $overlay0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.music-title-bar {
|
||||
font-family: 'Rubik';
|
||||
font-size: 15pt;
|
||||
color: $colorbar;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.music-artist-bar {
|
||||
color: $colorbar;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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-height: 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-height: 53px;
|
||||
background-size: auto 65%;
|
||||
background-position: 50% 50%;
|
||||
// background-image: url('images/svg/beatmaps.svg');
|
||||
// background-color: $colorbarbg;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.osu-music-box-dummy {
|
||||
min-width: 50px;
|
||||
min-height: 53px;
|
||||
margin-right: -6px;
|
||||
margin-left: 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: 10px;
|
||||
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-width: 50px;
|
||||
}
|
||||
|
||||
.music-button-box-bar {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
color: $colortext;
|
||||
min-width: 160px;
|
||||
margin: 0 0px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.song-button-bar {
|
||||
color: $colortext;
|
||||
border-radius: 9999px;
|
||||
// margin: 3px;
|
||||
min-width: 52px;
|
||||
font-size: 32pt;
|
||||
}
|
||||
|
||||
.song-button-bar:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.notifications-box {
|
||||
// @include window;
|
||||
// padding: 1rem;
|
||||
font-family: 'Rubik';
|
||||
}
|
||||
|
||||
.notification {
|
||||
// @include rounding;
|
||||
border-radius: 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.osd-window {
|
||||
margin: 5px;
|
||||
border-radius: 9999px;
|
||||
min-width: 10px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.osd-var {
|
||||
margin: 5px;
|
||||
background-color: $surface;
|
||||
border-radius: 9999px;
|
||||
min-width: 100px;
|
||||
min-height: 37px;
|
||||
padding: 7px;
|
||||
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,612 @@
|
||||
$bgdetail: $onSecondary;
|
||||
$bgdetail2: $onTertiary;
|
||||
|
||||
.osettings-window {
|
||||
min-width: 501px;
|
||||
padding-top: 20px;
|
||||
background-color: shade($colorbarbg, 4%);
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
margin: 7px;
|
||||
margin-left: 0px;
|
||||
border-top-right-radius: 53px;
|
||||
|
||||
// background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
// url('images/pictures/banner_left');
|
||||
|
||||
background-color: shade($onSecondary, 50%);
|
||||
|
||||
background-image:
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 24%, $bgdetail 24%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 26%, $bgdetail 26%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 25%, $bgdetail 25%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
|
||||
;
|
||||
background-size:
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px,
|
||||
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
|
||||
60px 60px, 120px 120px, 90px 90px,
|
||||
|
||||
20px 40px, 20px 40px, 40px 80px, 40px 80px,
|
||||
40px 80px, 40px 80px,
|
||||
|
||||
100% 100%,
|
||||
;
|
||||
background-position:
|
||||
0px 100px, 15px 100px, 30px 100px, 45px 100px,
|
||||
60px 100px, 75px 100px, 90px 100px, 105px 100px,
|
||||
120px 100px, 135px 100px, 150px 100px,
|
||||
|
||||
550px 40px, 535px 40px, 520px 40px, 505px 40px,
|
||||
490px 40px, 475px 40px, 460px 40px, 445px 40px,
|
||||
430px 40px, 415px 40px, 400px 40px, 385px 40px,
|
||||
|
||||
300px 60px, 165px 135px, 180px 5px,
|
||||
|
||||
360px 190px, 380px 190px, 340px 170px, 380px 170px,
|
||||
40px -10px, 80px -10px,
|
||||
|
||||
top,
|
||||
;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
box-shadow: 2px -4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.onotify-window {
|
||||
min-width: 529px;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
color: $onBackground;
|
||||
font-family: Rubik;
|
||||
margin: 7px;
|
||||
margin-right: 0px;
|
||||
border-top-left-radius: 53px;
|
||||
|
||||
|
||||
// background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
// url('images/pictures/banner_right');
|
||||
|
||||
background-color: shade($onSecondary, 50%);
|
||||
|
||||
background-image:
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 24%, $bgdetail 24%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 26%, $bgdetail 26%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 25%, $bgdetail 25%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
|
||||
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, $bgdetail 59%, $bgdetail 61%, rgba(0, 0, 0, 0) 61%),
|
||||
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
|
||||
|
||||
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
|
||||
;
|
||||
background-size:
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px,
|
||||
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
15px 30px, 15px 30px, 15px 30px, 15px 30px,
|
||||
|
||||
60px 60px, 120px 120px, 90px 90px,
|
||||
|
||||
160px 80px,
|
||||
40px 80px, 40px 80px,
|
||||
|
||||
100% 100%,
|
||||
;
|
||||
background-position:
|
||||
100px 16px, 115px 16px, 130px 16px, 145px 16px,
|
||||
160px 16px, 175px 16px, 190px 16px, 205px 16px,
|
||||
220px 16px, 235px 16px, 250px 16px,
|
||||
|
||||
550px 90px, 535px 90px, 520px 90px, 505px 90px,
|
||||
490px 90px, 475px 90px, 460px 90px, 445px 90px,
|
||||
430px 90px, 415px 90px, 400px 90px, 385px 90px,
|
||||
|
||||
300px 60px, 165px 135px, 220px 95px,
|
||||
|
||||
-25px 90px,
|
||||
400px -10px, 440px -10px,
|
||||
|
||||
top,
|
||||
;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
box-shadow: -2px -4px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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-top-right-radius: 53px;
|
||||
}
|
||||
|
||||
.onotify-content {
|
||||
// padding-top: 13px;
|
||||
margin-top: 27px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 16px;
|
||||
font-family: Rubik;
|
||||
color: $onPrimaryContainer;
|
||||
background-color: shade($colorbarbg, 5%);
|
||||
border-top-left-radius: 53px;
|
||||
}
|
||||
|
||||
.osettings-heading {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
color: $primary;
|
||||
font-family: Rubik;
|
||||
}
|
||||
|
||||
.osettings-title {
|
||||
color: $onPrimaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 30pt;
|
||||
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.osettings-subtitle {
|
||||
color: $onSecondaryContainer;
|
||||
font-family: Rubik;
|
||||
font-size: 14pt;
|
||||
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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 $tertiary;
|
||||
color: $tertiary;
|
||||
border-radius: 10px;
|
||||
font-size: 11pt;
|
||||
min-height: 45px;
|
||||
caret-color: $tertiary;
|
||||
|
||||
selection {
|
||||
background-color: rgba(154, 152, 152, 0.5);
|
||||
}
|
||||
|
||||
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.osettings-search-text {
|
||||
color: $tertiary;
|
||||
padding: 10px;
|
||||
font-size: 13pt;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
.osettings-search-icon {
|
||||
color: $tertiary;
|
||||
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%);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
.notif-indicator {
|
||||
font-family: 'Rubik';
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.notif-badge {
|
||||
border-radius: 99px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
background-color: $color1;
|
||||
color: #000000;
|
||||
margin-bottom: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
.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-radius: 15px;
|
||||
background-color: shade($surface0, 2%);
|
||||
border: 1px solid $surface0;
|
||||
border-top: 1px solid tint($surface0, 5%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
.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;
|
||||
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.supercontext-window {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
.supercontext-button {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
border-radius: 99px;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 21pt;
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
|
||||
.supercontext-button-number {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
border-radius: 99px;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
font-family: 'Lexend';
|
||||
font-size: 21pt;
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
|
||||
.supercontext-button-number-child {
|
||||
:first-child {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
border-radius: 99px;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
font-family: 'Lexend';
|
||||
font-size: 21pt;
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
}
|
||||
|
||||
.supercontext-button-number-child:hover {
|
||||
:first-child {
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 15%, tint($primary, 26%) 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.supercontext-button-number-child:active {
|
||||
:first-child {
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 100%, tint($primary, 26%) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.supercontext-button:hover {
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 15%, tint($primary, 26%) 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 15%);
|
||||
}
|
||||
|
||||
.supercontext-button:active {
|
||||
background-image: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 0%, tint($primary, 26%) 100%, tint($primary, 26%) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
.membar {
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.cpubar {
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.batbar {
|
||||
color: $color6;
|
||||
padding-right: 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;
|
||||
padding-right: 5px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-left: 2px;
|
||||
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-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cpu-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color4;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mem-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color5;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mem-menu-left {
|
||||
color: $color5;
|
||||
padding-left: 5px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.mem-menu-mid {
|
||||
color: $color5;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.mem-menu-right {
|
||||
color: $color5;
|
||||
padding-left: 0px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.sys-menu {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $battcolor;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sys-menu-button {
|
||||
color: $colorbar;
|
||||
margin: 0px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,639 @@
|
||||
@import 'css/colors';
|
||||
@import 'css/colorscheme';
|
||||
@import 'css/material';
|
||||
@import 'images/svg/color.scss';
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(rgb(245, 250, 255), $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(rgb(0, 7, 18), $color, $percentage);
|
||||
}
|
||||
|
||||
$grey: grey;
|
||||
$battcolor: $color6;
|
||||
$memcolor: $color5;
|
||||
$cpucolor: $color4;
|
||||
$border: $color7;
|
||||
$surface0: tint($colorbg, 10%);
|
||||
$bg1: $surface0;
|
||||
|
||||
//thanks flick0!
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
//also thanks to him
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: #f9e2af;
|
||||
color: #96804e;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
background-size: 1000% 1000%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyin-bottom {
|
||||
from {
|
||||
margin-bottom: -55px;
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyin-top {
|
||||
from {
|
||||
margin-bottom: 55px;
|
||||
margin-top: -55px;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rounding {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@mixin filter {
|
||||
saturate {
|
||||
filter: saturate(3);
|
||||
}
|
||||
|
||||
grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
contrast {
|
||||
filter: contrast(160%);
|
||||
}
|
||||
|
||||
brightness {
|
||||
filter: brightness(0.25);
|
||||
}
|
||||
|
||||
blur {
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
invert {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.sepia {
|
||||
filter: sepia(100%);
|
||||
}
|
||||
|
||||
huerotate {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
rss.opacity {
|
||||
filter: opacity(50%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin window {
|
||||
border: 3px solid $primary;
|
||||
// box-shadow: 0 2px 3px $shadow;
|
||||
margin: 5px 5px 10px;
|
||||
@include rounding;
|
||||
}
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
// font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.scale slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.progress slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.music-ctl-revealer {
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
@import 'css/bottombar';
|
||||
@import 'css/bgdecor';
|
||||
@import 'css/calendar';
|
||||
@import 'css/dashboard';
|
||||
@import 'css/dashfs';
|
||||
@import 'css/editmode';
|
||||
@import 'css/music';
|
||||
@import 'css/notification';
|
||||
@import 'css/overview';
|
||||
@import 'css/osd';
|
||||
@import 'css/osettings';
|
||||
@import 'css/sidebar';
|
||||
@import 'css/supercontext';
|
||||
@import 'css/system';
|
||||
@import 'css/themer';
|
||||
@import 'css/taskbar';
|
||||
@import 'css/volume';
|
||||
@import 'css/winstuff';
|
||||
|
||||
.module-group {
|
||||
// background-color: $colorbg;
|
||||
min-height: 53px;
|
||||
color: $fg;
|
||||
border-bottom-right-radius: 26px;
|
||||
border-bottom-left-radius: 26px;
|
||||
}
|
||||
|
||||
.bar-bg-only {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-right: -1911px;
|
||||
margin-left: 8px;
|
||||
border-radius: 26px;
|
||||
background-color: mix(shade($colorbarbg, 45%), $primary, 97%);
|
||||
// background-color: shade($colorbg, 75%);
|
||||
// background-color: #0B121C;
|
||||
background-image: linear-gradient(135deg, shade($onSecondary, 47%) 18%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 37%, shade($onSecondary, 47%) 37%, shade($onSecondary, 47%) 63%, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0) 85%, shade($onSecondary, 47%) 85%);
|
||||
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bar-bg-only-compact {
|
||||
margin-right: -1920px;
|
||||
background-color: shade($colorbg, 75%);
|
||||
background-image: linear-gradient(135deg, shade($onSecondary, 47%) 18%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 37%, shade($onSecondary, 47%) 37%, shade($onSecondary, 47%) 63%, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0) 85%, shade($onSecondary, 47%) 85%);
|
||||
}
|
||||
|
||||
.bar-normal {
|
||||
// margin: 8px;
|
||||
min-height: 53px;
|
||||
color: $fg;
|
||||
border-bottom-right-radius: 26px;
|
||||
border-bottom-left-radius: 26px;
|
||||
|
||||
label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
font-family: 'Rubik';
|
||||
// animation-name: flyin-top;
|
||||
// animation-duration: 350ms;
|
||||
// animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
// animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.bar-compact {
|
||||
background-color: shade($colorbg, 70%); //because dark background makes colors pop
|
||||
border-bottom: 1px solid $primary;
|
||||
min-height: 53px;
|
||||
color: $fg;
|
||||
|
||||
label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
font-family: 'Rubik';
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background: $colorbarbg;
|
||||
border: 1px solid rgba(60, 60, 60, 0.4);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
|
||||
label {
|
||||
font-size: 13pt;
|
||||
}
|
||||
}
|
||||
|
||||
.music-module {
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: Material Symbols Rounded;
|
||||
// padding-left: 4px;
|
||||
// padding-right: 4px;
|
||||
}
|
||||
|
||||
.module {
|
||||
font-family: Material Symbols Rounded;
|
||||
min-height: 53px;
|
||||
}
|
||||
|
||||
.module-timedate {
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.hour {
|
||||
// font-weight: bold;
|
||||
// padding-left: 13px;
|
||||
color: $colorbar;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.clock {
|
||||
color: $color2;
|
||||
font-family: 'Rubik';
|
||||
font-size: 19pt;
|
||||
}
|
||||
|
||||
// .clock-module:hover {
|
||||
// border-top: 2px solid $color5;
|
||||
// }
|
||||
|
||||
.minute {
|
||||
color: $color2;
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
}
|
||||
|
||||
.timedate-time {
|
||||
label {
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: 'Rubik', 'Material Symbols Rounded';
|
||||
color: $color2;
|
||||
|
||||
// margin-top: -2px;
|
||||
label {
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
.bright-icon {
|
||||
color: $color2;
|
||||
padding-right: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
// .bright-icon:hover {
|
||||
// border-top: 2px solid;
|
||||
// }
|
||||
|
||||
.module-bt {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.workspaces {
|
||||
// margin-left: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.net-icon {
|
||||
color: $color7;
|
||||
font-family: Material Symbols Rounded;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
// .net-icon:hover {
|
||||
// border-top: 2px solid;
|
||||
// }
|
||||
|
||||
.my-separator {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
color: $onBackground;
|
||||
min-height: 53px;
|
||||
}
|
||||
|
||||
.ws {
|
||||
font-size: 6rem;
|
||||
transition: 75ms cubic-bezier(0.05, 0.9, 0.1, 1); //Hyprland, no overshot
|
||||
// transition: 400ms cubic-bezier(0.2, 0.0, 0, 1.0); //Material 3
|
||||
}
|
||||
|
||||
.ws-top {
|
||||
// padding-top: 9px;
|
||||
}
|
||||
|
||||
.ws-active-top {
|
||||
|
||||
}
|
||||
|
||||
.ws-text {
|
||||
font-size: 16pt;
|
||||
font-family: Rubik;
|
||||
border-radius: 9999px;
|
||||
// padding-left: 3px;
|
||||
// padding-right: 3px;
|
||||
min-width: 27px;
|
||||
min-height: 27px;
|
||||
color: $colorbarbg;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 13px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.ws-text-top {
|
||||
// font-size: 16pt;
|
||||
// font-family: Rubik;
|
||||
border-radius: 9999px;
|
||||
// padding-left: 3px;
|
||||
// padding-right: 3px;
|
||||
min-width: 27px;
|
||||
min-height: 5px;
|
||||
color: $colorbarbg;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.ws-text-active {
|
||||
background-color: $colorbar;
|
||||
}
|
||||
|
||||
.ws:hover {
|
||||
:first-child {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.ws-active {
|
||||
background-color: $onBackground;
|
||||
}
|
||||
|
||||
.ws-inactive {
|
||||
// background-color: tint($colorbg, 37%);
|
||||
background-color: rgba(194, 192, 192, 0.7);
|
||||
}
|
||||
|
||||
.ws-empty {
|
||||
// background-color: tint($colorbg, 10%);
|
||||
background-color: rgba(146, 145, 145, 0.3);
|
||||
}
|
||||
|
||||
.activewin {
|
||||
color: $colorbar;
|
||||
// padding-left: 8px;
|
||||
// padding-right: 8px;
|
||||
}
|
||||
|
||||
// .themer-get {
|
||||
// padding-top: 4px;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
// background-image: url("images/grayscale/Add.png");
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// background-size: 100%;
|
||||
// }
|
||||
|
||||
// .themer-restore {
|
||||
// padding-top: 7px;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
// padding-bottom: 16px;
|
||||
// background-image: url("images/grayscale/Backup.png");
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// background-size: 100%;
|
||||
// }
|
||||
|
||||
|
||||
.icon,
|
||||
.icon,
|
||||
.icon-text,
|
||||
.vol-icon label {
|
||||
font-family: "Material Symbols Rounded";
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.userpic {
|
||||
margin: 5px;
|
||||
min-height: 42px;
|
||||
min-width: 42px;
|
||||
background-size: 100%;
|
||||
border-radius: 5px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.osettings-toggle-button-false {
|
||||
:first-child {
|
||||
:first-child {
|
||||
padding: 0px 11px;
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
background-color: transparent;
|
||||
// background-image: url('images/svg/settings.svg');
|
||||
background-size: 400% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
border-radius: 26px;
|
||||
|
||||
:active {
|
||||
background-color: $overlay0;
|
||||
background-position: 90% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.osettings-toggle-button-false:hover {
|
||||
:first-child {
|
||||
:first-child {
|
||||
background-color: $overlay0;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.osettings-toggle-button-true {
|
||||
:first-child {
|
||||
:first-child {
|
||||
padding: 0px 11px;
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
background-color: $overlay0;
|
||||
background-position: 90% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
background-size: 400% auto;
|
||||
border-radius: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-button-pad {
|
||||
margin: 8px 0;
|
||||
border-radius: 26px;
|
||||
// background-color: shade($colorbg, 75%);
|
||||
}
|
||||
|
||||
.module-button-pad-left {
|
||||
margin: 8px 0;
|
||||
margin-left: 8px;
|
||||
// background-color: shade($colorbg, 75%);
|
||||
border-top-left-radius: 26px;
|
||||
border-bottom-left-radius: 26px;
|
||||
}
|
||||
|
||||
.module-button-pad-center {
|
||||
margin: 8px 0;
|
||||
// background-color: shade($colorbg, 75%);
|
||||
}
|
||||
|
||||
.module-button-pad-right {
|
||||
margin: 8px 0;
|
||||
margin-right: 8px;
|
||||
// background-color: shade($colorbg, 75%);
|
||||
border-bottom-right-radius: 26px;
|
||||
border-top-right-radius: 26px;
|
||||
}
|
||||
|
||||
.module-button-pad-right-nomargin {
|
||||
// background-color: shade($colorbg, 75%);
|
||||
border-bottom-right-radius: 26px;
|
||||
border-top-right-radius: 26px;
|
||||
}
|
||||
|
||||
.onotify-toggle-button-false {
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
|
||||
:hover {
|
||||
background-color: $overlay0;
|
||||
// background-image: url('./images/lazer_icons/notifications_hover.png');
|
||||
}
|
||||
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.onotify-toggle-button-true {
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
background-color: $overlay0;
|
||||
// background-image: url('./images/lazer_icons/notifications_hover.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.real-onotify-toggle-button {
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
// background-image: url('./images/svg/forum.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
|
||||
:hover {
|
||||
background-color: $overlay0;
|
||||
}
|
||||
}
|
||||
|
||||
.real-onotify-toggle-button-true {
|
||||
min-width: 53px;
|
||||
min-height: 53px;
|
||||
background-color: $overlay0;
|
||||
background-size: auto 65%;
|
||||
background-position: center;
|
||||
// background-image: url('./images/svg/forum.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.module-button {
|
||||
transition: 500ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
border-radius: 26px;
|
||||
padding: 0px 5px;
|
||||
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
background-size: 400% auto;
|
||||
background-position: 40% 50%;
|
||||
}
|
||||
|
||||
.module-button-hover {
|
||||
transition: 500ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
border-radius: 26px;
|
||||
padding: 0px 5px;
|
||||
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
|
||||
background-size: 400% auto;
|
||||
background-color: $overlay0;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.module-button:hover {
|
||||
background-color: $overlay0;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.module-button:active {
|
||||
background-color: $overlay0;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.module-button-true {
|
||||
border-radius: 26px;
|
||||
padding: 0px 5px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.dynbg-image {
|
||||
transition: 900ms cubic-bezier(0.05, 0.9, 0.1, 1); // Hyprland default bezier but no overshot
|
||||
}
|
||||
|
||||
progressbar>trough {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.box-that-is-there {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
min-height: 53px;
|
||||
min-width: 65px;
|
||||
color: $colortext;
|
||||
font-family: Material Symbols Rounded;
|
||||
}
|
||||
|
||||
.workspaces-top {
|
||||
min-width: 306px;
|
||||
min-height: 5px;
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
(include "./variables.yuck")
|
||||
;##################### Modules #########################
|
||||
(include "./modules/activewindow.yuck")
|
||||
(include "./modules/audiolevels.yuck")
|
||||
(include "./modules/bluetooth.yuck")
|
||||
(include "./modules/bright.yuck")
|
||||
(include "./modules/clock.yuck")
|
||||
(include "./modules/editmode.yuck")
|
||||
(include "./modules/music.yuck")
|
||||
; (include "./modules/net.yuck")
|
||||
(include "./modules/searchbutton.yuck")
|
||||
(include "./modules/sys.yuck")
|
||||
(include "./modules/taskbar.yuck")
|
||||
(include "./modules/user.yuck")
|
||||
; (include "./modules/volume.yuck")
|
||||
(include "./modules/winstuff.yuck")
|
||||
(include "./modules/workspaces.yuck")
|
||||
|
||||
;##################### Windows #########################
|
||||
; Normal stuff
|
||||
(include "./windows/bottombar.yuck")
|
||||
(include "./windows/bg-decor.yuck")
|
||||
(include "./windows/dynamic-bg.yuck")
|
||||
(include "./windows/dashboard.yuck")
|
||||
(include "./windows/dashfs.yuck")
|
||||
(include "./windows/calendar.yuck")
|
||||
(include "./windows/music.yuck")
|
||||
(include "./windows/overview.yuck")
|
||||
(include "./windows/osd.yuck")
|
||||
(include "./windows/osettings.yuck")
|
||||
(include "./windows/onotify.yuck")
|
||||
; (include "./windows/system-menu.yuck")
|
||||
(include "./windows/supercontext.yuck")
|
||||
(include "./windows/themer.yuck")
|
||||
|
||||
; Windows 11 stuff
|
||||
(include "./windows/winactions.yuck")
|
||||
(include "./windows/winbsod.yuck")
|
||||
(include "./windows/wingamebar.yuck")
|
||||
(include "./windows/winlang.yuck")
|
||||
(include "./windows/winnews.yuck")
|
||||
(include "./windows/winnotif.yuck")
|
||||
(include "./windows/winosd.yuck")
|
||||
(include "./windows/winoverview.yuck")
|
||||
(include "./windows/winpowermenu.yuck")
|
||||
(include "./windows/winshadows.yuck")
|
||||
(include "./windows/winstart.yuck")
|
||||
(include "./windows/wintaskview.yuck")
|
||||
|
||||
(defwidget separator []
|
||||
(box
|
||||
:valign "start"
|
||||
(label
|
||||
:class "my-separator"
|
||||
:text "|"
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget left []
|
||||
(eventbox
|
||||
:onhover "${EWW_CMD} update music_reveal=true"
|
||||
:onhoverlost "${EWW_CMD} update music_reveal=false"
|
||||
(box
|
||||
:space-evenly false :spacing 5
|
||||
:valign "start" :halign "start"
|
||||
(box :space-evenly false :class "module-group"
|
||||
(osettings-button)
|
||||
(osu-music-module)
|
||||
)
|
||||
; (box :space-evenly false :class "module-group"
|
||||
; (taskbar)
|
||||
; )
|
||||
(revealer
|
||||
:reveal false
|
||||
:transition "slideright"
|
||||
(label
|
||||
:text "${volume.audio} ${brightness.level} ${wsjsona[0][0].at} ${wsjsonb[0][0].at}" ; Dummy to keep listeners active
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget right []
|
||||
(eventbox
|
||||
:onhover "${EWW_CMD} update right_hover=true"
|
||||
:onhoverlost "${EWW_CMD} update right_hover=false"
|
||||
(box
|
||||
:space-evenly false :spacing 5
|
||||
:halign "end" :valign "start"
|
||||
(box :space-evenly false :class "module-group"
|
||||
; (editmode)
|
||||
(themer)
|
||||
)
|
||||
; (user)
|
||||
(box :space-evenly false :class "module-group"
|
||||
(onotify-button)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget center []
|
||||
(box
|
||||
:space-evenly false :orientation "v"
|
||||
; (revealer
|
||||
; :transition "slidedown"
|
||||
; :duration "0ms"
|
||||
; :reveal {!(rev_center_ws || awin.title == 'null')}
|
||||
; ; :reveal true
|
||||
; (workspaces_top)
|
||||
; )
|
||||
(box
|
||||
:valign "start"
|
||||
:space-evenly false :spacing 5
|
||||
:halign "center"
|
||||
; :style "${!(rev_center_ws || awin.title == 'null') ? 'margin-top: -15px; transition: 0px;' : 'transition: 0px;'}"
|
||||
(box
|
||||
:space-evenly false :space-evenly false
|
||||
:spacing 5 :class "module-group" :style "padding-right: 10px;"
|
||||
(searchbutton)
|
||||
(revealer
|
||||
:reveal {rev_center_ws || awin.title == 'null'}
|
||||
; :reveal false
|
||||
:transition "slideright"
|
||||
:duration "0ms"
|
||||
(workspaces)
|
||||
)
|
||||
(revealer
|
||||
:reveal {!(rev_center_ws || awin.title == 'null')}
|
||||
; :reveal true
|
||||
:transition "slideright"
|
||||
:duration "0ms"
|
||||
(activewindow)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget bar [] ; Class .bar applies automatically
|
||||
(box
|
||||
:space-evenly false
|
||||
:orientation "h"
|
||||
(box
|
||||
:class "bar-bg-only${compact ? '-compact' : ''}"
|
||||
:style "
|
||||
margin-right: -${RES_WIDTH - 9}px;
|
||||
"
|
||||
)
|
||||
(centerbox
|
||||
:class "bar-${compact ? 'compact' : 'normal'}"
|
||||
:width {RES_WIDTH}
|
||||
(left)
|
||||
(center)
|
||||
(right)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget winbar []
|
||||
(centerbox
|
||||
:class "winbar-bg"
|
||||
(box
|
||||
:space-evenly false
|
||||
(winnews-button)
|
||||
(eventbox
|
||||
:onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
|
||||
(box
|
||||
:space-evenly false
|
||||
:style "margin-left: ${RES_WIDTH / 2 - 100 - (25 * arraylength(tasks))}px;"
|
||||
(winstarticon)
|
||||
(wintaskview-button)
|
||||
(wintaskbar)
|
||||
(revealer
|
||||
:reveal false
|
||||
:transition "slideright"
|
||||
(label
|
||||
:text "${lang_ibus.name_abbr} ${activews} ${mcover.source} ${mname_win.title} ${net.level} ${brightness.level} ${wsjsona[0][0].at} ${wsjsonb[0][0].at}" ; Dummy to keep listeners active
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
(box
|
||||
|
||||
)
|
||||
(box
|
||||
:halign "end"
|
||||
:space-evenly false
|
||||
(wintray-button)
|
||||
(winlang)
|
||||
(winactions)
|
||||
(windate)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwindow bar
|
||||
:stacking "fg"
|
||||
:wm-ignore true
|
||||
:monitor 0
|
||||
:namespace "bar"
|
||||
:geometry (geometry
|
||||
:x "0%"
|
||||
:y "0%"
|
||||
:width "100%"
|
||||
:height "69px"
|
||||
:anchor "top center"
|
||||
)
|
||||
:exclusive false
|
||||
(bar)
|
||||
)
|
||||
|
||||
(defwindow winbar
|
||||
:stacking "fg"
|
||||
:monitor 0
|
||||
:exclusive true
|
||||
:geometry (geometry
|
||||
:x "0%"
|
||||
:y "0%"
|
||||
:width "100%"
|
||||
; :height "53px"
|
||||
; :width "53px"
|
||||
; :height "100%"
|
||||
:anchor "bottom center"
|
||||
)
|
||||
; :stacking "fg"
|
||||
:exclusive false
|
||||
(winbar)
|
||||
)
|
||||
|
||||
|
After Width: | Height: | Size: 348 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |