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 |