initial commit, you are welcome odette
This commit is contained in:
gnat
31
style/colors.scss
Normal file
31
style/colors.scss
Normal file
@ -0,0 +1,31 @@
|
||||
$bg: #161616;
|
||||
$bg-alt-1: #262626;
|
||||
$bg-alt-2: #393939;
|
||||
|
||||
$fg: #f2f4f8;
|
||||
|
||||
$hl: #FF7EB6;
|
||||
$hl-alt-1: #33B1FF;
|
||||
$hl-alt-2: #42be65;
|
||||
|
||||
$icon-color: #f2f4f8;
|
||||
$button-hover-color: #FF7EB6;
|
||||
|
||||
$battery-dial-bg: #42be65;
|
||||
$battery-dial-fg: #161616;
|
||||
|
||||
$volume-dial-bg: #33B1FF;
|
||||
$volume-dial-fg: #161616;
|
||||
|
||||
$brightness-dial-bg: #33B1FF;
|
||||
$brightness-dial-fg: #161616;
|
||||
|
||||
$ws-active: #FF7EB6;
|
||||
$ws-inactive: $bg;
|
||||
|
||||
$mpd-progress-primary: #FF7Eb6;
|
||||
|
||||
$resource-dial-fg-cpu: #FF7eb6;
|
||||
$resource-dial-fg-mem: #FF7eb6;
|
||||
$resource-dial-fg-tmp: #FF7eb6;
|
||||
$resource-dial-fg-fan: #FF7eb6;
|
||||
68
style/components/bar-control-center.scss
Normal file
68
style/components/bar-control-center.scss
Normal file
@ -0,0 +1,68 @@
|
||||
#status-bar .Menu {
|
||||
background-color: $bg-alt-1;
|
||||
min-width: 640px;
|
||||
|
||||
.mpd-controls {
|
||||
background-color: $bg;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
|
||||
.button {
|
||||
font-size: 24px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: $bg-alt-1;
|
||||
border-color: $bg-alt-1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
min-width: 250px;
|
||||
min-height: 250px;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: $bg;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.position {
|
||||
margin: 10px;
|
||||
margin-right: 20px;
|
||||
min-height: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
trough {
|
||||
background: $bg-alt-1;
|
||||
border-radius: 5px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
slider {
|
||||
min-height: 10px;
|
||||
border-radius: 5px;
|
||||
background: $mpd-progress-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.position-label {
|
||||
margin-top: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.dial-parent {
|
||||
@include panel-dial($resource-dial-fg-cpu, $bg);
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
.dial-icon {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
75
style/components/bar.scss
Normal file
75
style/components/bar.scss
Normal file
@ -0,0 +1,75 @@
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
#status-bar {
|
||||
background-color: $bg;
|
||||
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
.dial-container {
|
||||
margin-top: 10px;
|
||||
|
||||
.battery-dial {
|
||||
@include bar-dial($battery-dial-bg, $battery-dial-fg)
|
||||
}
|
||||
|
||||
.volume-dial {
|
||||
@include bar-dial($volume-dial-bg, $volume-dial-fg)
|
||||
}
|
||||
|
||||
.brightness-dial {
|
||||
@include bar-dial($brightness-dial-bg, $brightness-dial-fg)
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-container {
|
||||
background-color: $bg-alt-1;
|
||||
border-radius: 10px;
|
||||
padding: 6px 0px;
|
||||
margin: 0px 12px;
|
||||
border: none;
|
||||
|
||||
.ws-norm {
|
||||
min-width: 15px;
|
||||
border-radius: 10px;
|
||||
margin: 2px 5px;
|
||||
padding: 6px 10px;
|
||||
background-color: $ws-inactive;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
.ws-active {
|
||||
color: $bg;
|
||||
background-color: $ws-active;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-visibility-button {
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
padding: 10px 0px 10px 2px;
|
||||
background-color: $bg-alt-1
|
||||
}
|
||||
|
||||
.clock {
|
||||
background-color: $bg-alt-1;
|
||||
margin: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mpd-controls {
|
||||
.button {
|
||||
font-size: 14px;
|
||||
margin: 2px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
|
||||
&:hover {
|
||||
color: $button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
43
style/components/launcher.scss
Normal file
43
style/components/launcher.scss
Normal file
@ -0,0 +1,43 @@
|
||||
.launcher {
|
||||
min-width: 640px;
|
||||
background: $bg-alt-1;
|
||||
|
||||
.search {
|
||||
> image {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
> entry {
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
background: $bg;
|
||||
border: 5px solid $bg;
|
||||
border-radius: 10px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
margin: 0 10px 0 10px;
|
||||
border: 10px solid $bg;
|
||||
border-radius: 10px;
|
||||
background: $bg;
|
||||
|
||||
> box {
|
||||
> image {
|
||||
padding: 5px;
|
||||
margin: 5px 10px 5px 10px;
|
||||
background: $bg-alt-1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
> label {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> scrolledwindow > * > box:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
28
style/components/lock.scss
Normal file
28
style/components/lock.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.lock-ready > box{
|
||||
box {
|
||||
background: $bg;
|
||||
padding: 20px;
|
||||
border: 10px solid $hl-alt-1;
|
||||
min-width: 300px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.img {
|
||||
background: url('/home/catalie/.config/wallpaper');
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
background-position: 25% 12.5%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
box > entry {
|
||||
background: $bg-alt-1;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.lock {
|
||||
background: transparent;
|
||||
}
|
||||
89
style/components/notification-popups.scss
Normal file
89
style/components/notification-popups.scss
Normal file
@ -0,0 +1,89 @@
|
||||
#notifications {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.notifications {
|
||||
opacity: 1;
|
||||
min-width: 24rem;
|
||||
.revealer {
|
||||
+ .revealer {
|
||||
>*>box {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-bottom: 25px;
|
||||
min-width: 24rem;
|
||||
padding: 0px;
|
||||
border: 2px solid $fg;
|
||||
border-right: 25px solid $hl-alt-2;
|
||||
background: $bg;
|
||||
|
||||
&.critical {
|
||||
border-right: 25px solid $hl;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.timeout-bar {
|
||||
margin: 5px 0px 0;
|
||||
margin-top: 5px;
|
||||
background: $bg-alt-1;
|
||||
|
||||
> trough > progress {
|
||||
background-image: none;
|
||||
background-color: $hl-alt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
&:hover {
|
||||
color: $hl;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.icon image {
|
||||
font-size: 58px;
|
||||
margin: 5px;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
.icon box {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.actions .action-button {
|
||||
margin: 0 .4em;
|
||||
margin-top: .8em;
|
||||
border: 2px solid $fg;
|
||||
}
|
||||
|
||||
.actions .action-button:first-child {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.actions .action-button:last-child {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
126
style/components/top-bar.scss
Normal file
126
style/components/top-bar.scss
Normal file
@ -0,0 +1,126 @@
|
||||
$height: 50px;
|
||||
|
||||
#status-bar {
|
||||
background: transparent;
|
||||
|
||||
.workspaces {
|
||||
min-height: $height;
|
||||
background: $bg;
|
||||
padding: 5px;
|
||||
padding-top: 15px;
|
||||
|
||||
.workspace {
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
margin: 5px;
|
||||
background-color: $bg-alt-1;
|
||||
}
|
||||
|
||||
.occupied {
|
||||
background-color: $bg-alt-2;
|
||||
}
|
||||
|
||||
.focused {
|
||||
background-color: $hl;
|
||||
}
|
||||
}
|
||||
|
||||
.media-controls {
|
||||
margin-top: 20px;
|
||||
min-width: 220px;
|
||||
|
||||
.button {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
margin-top: 20px;
|
||||
min-width: 200px;
|
||||
min-height: 2px;
|
||||
background: transparent;
|
||||
|
||||
trough {
|
||||
min-height: 2px;
|
||||
background: $bg-alt-1;
|
||||
}
|
||||
|
||||
highlight {
|
||||
min-height: 2px;
|
||||
background: $mpd-progress-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
min-height: $height;
|
||||
background: $bg;
|
||||
|
||||
|
||||
.battery-container {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
.battery-dial {
|
||||
@include bar-dial($battery-dial-bg, $battery-dial-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.sliderbox {
|
||||
margin: 5px;
|
||||
.volume {
|
||||
.slider {
|
||||
trough {
|
||||
min-height: 10px;
|
||||
min-width: 120px;
|
||||
background: $bg-alt-1;
|
||||
}
|
||||
|
||||
highlight {
|
||||
background: $hl-alt-1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.brightness {
|
||||
.slider {
|
||||
trough {
|
||||
min-height: 10px;
|
||||
min-width: 120px;
|
||||
background: $bg-alt-1;
|
||||
}
|
||||
|
||||
highlight {
|
||||
background: $hl-alt-1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background: $bg-alt-1;
|
||||
padding: 1px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.clock {
|
||||
background: $bg;
|
||||
|
||||
.datetime {
|
||||
margin: 1px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
212
style/css
Normal file
212
style/css
Normal file
@ -0,0 +1,212 @@
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset; }
|
||||
|
||||
#status-bar {
|
||||
background-color: #161616;
|
||||
border-radius: 0 10px 10px 0; }
|
||||
#status-bar .dial-container {
|
||||
margin-top: 10px; }
|
||||
#status-bar .dial-container .battery-dial {
|
||||
color: #33B1FF;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .battery-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .dial-container .volume-dial {
|
||||
color: #33B1FF;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .volume-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .dial-container .brightness-dial {
|
||||
color: #33B1FF;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .brightness-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .workspace-container {
|
||||
background-color: #262626;
|
||||
border-radius: 10px;
|
||||
padding: 6px 0px;
|
||||
margin: 0px 12px;
|
||||
border: none; }
|
||||
#status-bar .workspace-container .ws-norm {
|
||||
min-width: 15px;
|
||||
border-radius: 10px;
|
||||
margin: 2px 5px;
|
||||
padding: 6px 10px;
|
||||
background-color: #161616;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .workspace-container .ws-active {
|
||||
color: #161616;
|
||||
background-color: #FF7EB6; }
|
||||
#status-bar .menu-visibility-button {
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
padding: 10px 0px 10px 2px;
|
||||
background-color: #262626; }
|
||||
#status-bar .clock {
|
||||
background-color: #262626;
|
||||
margin: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 2px;
|
||||
border-radius: 10px; }
|
||||
#status-bar .mpd-controls .button {
|
||||
font-size: 14px;
|
||||
margin: 2px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Symbols Nerd Font Mono'; }
|
||||
#status-bar .mpd-controls .button:hover {
|
||||
color: #FF7EB6; }
|
||||
|
||||
#status-bar .Menu {
|
||||
background-color: #262626;
|
||||
min-width: 640px; }
|
||||
#status-bar .Menu .mpd-controls {
|
||||
background-color: #161616;
|
||||
border-radius: 10px;
|
||||
margin: 10px; }
|
||||
#status-bar .Menu .mpd-controls .button {
|
||||
font-size: 24px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #262626;
|
||||
border-color: #262626;
|
||||
border-radius: 10px; }
|
||||
#status-bar .Menu .mpd-controls .cover {
|
||||
min-width: 250px;
|
||||
min-height: 250px;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #161616;
|
||||
background-size: cover; }
|
||||
#status-bar .Menu .mpd-controls .title {
|
||||
padding-top: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold; }
|
||||
#status-bar .Menu .mpd-controls .position {
|
||||
margin: 10px;
|
||||
margin-right: 20px;
|
||||
min-height: 10px;
|
||||
border-radius: 5px; }
|
||||
#status-bar .Menu .mpd-controls .position trough {
|
||||
background: #262626;
|
||||
border-radius: 5px;
|
||||
min-height: 10px; }
|
||||
#status-bar .Menu .mpd-controls .position highlight {
|
||||
min-height: 10px;
|
||||
border-radius: 5px;
|
||||
background: #FF7Eb6; }
|
||||
#status-bar .Menu .mpd-controls .position-label {
|
||||
margin-top: 75px; }
|
||||
#status-bar .Menu .dial-parent {
|
||||
color: #FF7eb6;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 10px;
|
||||
font-size: 8px;
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
border-radius: 10px; }
|
||||
#status-bar .Menu .dial-parent .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 32px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .Menu .dial-parent .resource-dial {
|
||||
min-width: 96px;
|
||||
min-height: 96px; }
|
||||
#status-bar .Menu .dial-parent .dial-icon {
|
||||
color: #f2f4f8; }
|
||||
|
||||
#notifications {
|
||||
background: transparent; }
|
||||
|
||||
.notifications {
|
||||
opacity: 1;
|
||||
min-width: 24rem; }
|
||||
.notifications .revealer + .revealer > * > box {
|
||||
margin-top: 0; }
|
||||
.notifications .revealer .notification {
|
||||
margin: 25px;
|
||||
min-width: 24rem;
|
||||
padding: 0px;
|
||||
border: 2px solid #f2f4f8;
|
||||
background: #161616; }
|
||||
.notifications .revealer .notification.critical {
|
||||
border: 2px solid #FF7EB6; }
|
||||
.notifications .revealer .body {
|
||||
margin-right: 1em; }
|
||||
.notifications .revealer .timeout-bar {
|
||||
margin: 5px 0px 0;
|
||||
margin-top: 5px;
|
||||
background: #262626; }
|
||||
.notifications .revealer .timeout-bar > trough > progress {
|
||||
background-image: none;
|
||||
background-color: #33B1FF; }
|
||||
.notifications .revealer .button {
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px; }
|
||||
.notifications .revealer .button:hover {
|
||||
color: #FF7EB6; }
|
||||
.notifications .revealer .icon {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em; }
|
||||
.notifications .revealer .icon image {
|
||||
font-size: 58px;
|
||||
margin: 5px;
|
||||
color: #f2f4f8; }
|
||||
.notifications .revealer .icon box {
|
||||
min-width: 68px;
|
||||
min-height: 68px; }
|
||||
.notifications .revealer .title {
|
||||
font-size: 24px; }
|
||||
.notifications .revealer .actions .action-button {
|
||||
margin: 0 .4em;
|
||||
margin-top: .8em;
|
||||
border: 2px solid #f2f4f8; }
|
||||
.notifications .revealer .actions .action-button:first-child {
|
||||
margin-left: .5em; }
|
||||
.notifications .revealer .actions .action-button:last-child {
|
||||
margin-right: .5em; }
|
||||
|
||||
.launcher {
|
||||
min-width: 640px;
|
||||
background: #262626; }
|
||||
.launcher .search > image {
|
||||
margin-left: 10px; }
|
||||
.launcher .search > entry {
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
background: #161616;
|
||||
border: 5px solid #161616;
|
||||
border-radius: 10px;
|
||||
font-size: 32px; }
|
||||
.launcher .entry {
|
||||
margin: 0 10px 0 10px;
|
||||
border: 10px solid #161616;
|
||||
border-radius: 10px;
|
||||
background: #161616; }
|
||||
.launcher .entry > box > image {
|
||||
padding: 5px;
|
||||
margin: 5px 10px 5px 10px;
|
||||
background: #262626;
|
||||
border-radius: 5px; }
|
||||
.launcher > scrolledwindow > * > box:last-child {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset; }
|
||||
27
style/mixins.scss
Normal file
27
style/mixins.scss
Normal file
@ -0,0 +1,27 @@
|
||||
@mixin dial($_fg, $_bg, $margin, $padding, $font-size, $icon-font-size) {
|
||||
color: $_fg;
|
||||
background-color: $_bg;
|
||||
margin: $margin;
|
||||
padding: $padding;
|
||||
font-size: $font-size;
|
||||
|
||||
.dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: $icon-font-size;
|
||||
color: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bar-dial($_fg, $_bg) {
|
||||
@include dial($_fg, $_bg, 0px, 0px, 5px, 16px)
|
||||
}
|
||||
|
||||
@mixin panel-dial($_fg, $_bg) {
|
||||
@include dial($_fg, $_bg, 0px, 10px, 8px, 32px);
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
.resource-dial {
|
||||
min-width: 96px;
|
||||
min-height: 96px;
|
||||
}
|
||||
}
|
||||
315
style/style.css
Normal file
315
style/style.css
Normal file
@ -0,0 +1,315 @@
|
||||
.lock-ready > box box {
|
||||
background: #161616;
|
||||
padding: 20px;
|
||||
border: 10px solid #33B1FF;
|
||||
min-width: 300px;
|
||||
margin: 15px; }
|
||||
|
||||
.lock-ready > box .img {
|
||||
background: url("/home/catalie/.config/wallpaper");
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
background-position: 25% 12.5%;
|
||||
background-size: cover; }
|
||||
|
||||
.lock-ready > box box > entry {
|
||||
background: #262626;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
margin: 10px; }
|
||||
|
||||
.lock {
|
||||
background: transparent; }
|
||||
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset; }
|
||||
|
||||
#status-bar {
|
||||
background-color: #161616;
|
||||
border-radius: 0 10px 10px 0; }
|
||||
#status-bar .dial-container {
|
||||
margin-top: 10px; }
|
||||
#status-bar .dial-container .battery-dial {
|
||||
color: #42be65;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .battery-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .dial-container .volume-dial {
|
||||
color: #33B1FF;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .volume-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .dial-container .brightness-dial {
|
||||
color: #33B1FF;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .dial-container .brightness-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .workspace-container {
|
||||
background-color: #262626;
|
||||
border-radius: 10px;
|
||||
padding: 6px 0px;
|
||||
margin: 0px 12px;
|
||||
border: none; }
|
||||
#status-bar .workspace-container .ws-norm {
|
||||
min-width: 15px;
|
||||
border-radius: 10px;
|
||||
margin: 2px 5px;
|
||||
padding: 6px 10px;
|
||||
background-color: #161616;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .workspace-container .ws-active {
|
||||
color: #161616;
|
||||
background-color: #FF7EB6; }
|
||||
#status-bar .menu-visibility-button {
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
padding: 10px 0px 10px 2px;
|
||||
background-color: #262626; }
|
||||
#status-bar .clock {
|
||||
background-color: #262626;
|
||||
margin: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 2px;
|
||||
border-radius: 10px; }
|
||||
#status-bar .mpd-controls .button {
|
||||
font-size: 14px;
|
||||
margin: 2px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Symbols Nerd Font Mono'; }
|
||||
#status-bar .mpd-controls .button:hover {
|
||||
color: #FF7EB6; }
|
||||
|
||||
#status-bar {
|
||||
background: transparent; }
|
||||
#status-bar .workspaces {
|
||||
min-height: 50px;
|
||||
background: #161616;
|
||||
padding: 5px;
|
||||
padding-top: 15px; }
|
||||
#status-bar .workspaces .workspace {
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
margin: 5px;
|
||||
background-color: #262626; }
|
||||
#status-bar .workspaces .occupied {
|
||||
background-color: #393939; }
|
||||
#status-bar .workspaces .focused {
|
||||
background-color: #FF7EB6; }
|
||||
#status-bar .media-controls {
|
||||
margin-top: 20px;
|
||||
min-width: 220px; }
|
||||
#status-bar .media-controls .button {
|
||||
font-size: 20px; }
|
||||
#status-bar .progress-bar {
|
||||
margin-top: 20px;
|
||||
min-width: 200px;
|
||||
min-height: 2px;
|
||||
background: transparent; }
|
||||
#status-bar .progress-bar trough {
|
||||
min-height: 2px;
|
||||
background: #262626; }
|
||||
#status-bar .progress-bar highlight {
|
||||
min-height: 2px;
|
||||
background: #FF7Eb6; }
|
||||
#status-bar .right {
|
||||
min-height: 50px;
|
||||
background: #161616; }
|
||||
#status-bar .right .battery-container {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
#status-bar .right .battery-container .battery-dial {
|
||||
color: #42be65;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 5px; }
|
||||
#status-bar .right .battery-container .battery-dial .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 16px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .right .sliderbox {
|
||||
margin: 5px; }
|
||||
#status-bar .right .sliderbox .volume .slider trough {
|
||||
min-height: 10px;
|
||||
min-width: 120px;
|
||||
background: #262626; }
|
||||
#status-bar .right .sliderbox .volume .slider highlight {
|
||||
background: #33B1FF; }
|
||||
#status-bar .right .sliderbox .volume button {
|
||||
font-size: 20px;
|
||||
margin: 5px; }
|
||||
#status-bar .right .sliderbox .brightness .slider trough {
|
||||
min-height: 10px;
|
||||
min-width: 120px;
|
||||
background: #262626; }
|
||||
#status-bar .right .sliderbox .brightness .slider highlight {
|
||||
background: #33B1FF; }
|
||||
#status-bar .right .sliderbox .brightness button {
|
||||
font-size: 20px;
|
||||
margin: 5px; }
|
||||
#status-bar .right separator {
|
||||
background: #262626;
|
||||
padding: 1px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
#status-bar .right .clock {
|
||||
background: #161616; }
|
||||
#status-bar .right .clock .datetime {
|
||||
margin: 1px;
|
||||
font-size: 10pt; }
|
||||
|
||||
#status-bar .Menu {
|
||||
background-color: #262626;
|
||||
min-width: 640px; }
|
||||
#status-bar .Menu .mpd-controls {
|
||||
background-color: #161616;
|
||||
border-radius: 10px;
|
||||
margin: 10px; }
|
||||
#status-bar .Menu .mpd-controls .button {
|
||||
font-size: 24px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #262626;
|
||||
border-color: #262626;
|
||||
border-radius: 10px; }
|
||||
#status-bar .Menu .mpd-controls .cover {
|
||||
min-width: 250px;
|
||||
min-height: 250px;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #161616;
|
||||
background-size: cover; }
|
||||
#status-bar .Menu .mpd-controls .title {
|
||||
padding-top: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold; }
|
||||
#status-bar .Menu .mpd-controls .position {
|
||||
margin: 10px;
|
||||
margin-right: 20px;
|
||||
min-height: 10px;
|
||||
border-radius: 5px; }
|
||||
#status-bar .Menu .mpd-controls .position trough {
|
||||
background: #262626;
|
||||
border-radius: 5px;
|
||||
min-height: 10px; }
|
||||
#status-bar .Menu .mpd-controls .position slider {
|
||||
min-height: 10px;
|
||||
border-radius: 5px;
|
||||
background: #FF7Eb6; }
|
||||
#status-bar .Menu .mpd-controls .position-label {
|
||||
margin-top: 75px; }
|
||||
#status-bar .Menu .dial-parent {
|
||||
color: #FF7eb6;
|
||||
background-color: #161616;
|
||||
margin: 0px;
|
||||
padding: 10px;
|
||||
font-size: 8px;
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
border-radius: 10px; }
|
||||
#status-bar .Menu .dial-parent .dial-icon {
|
||||
font-family: 'Symbols Nerd Font Mono';
|
||||
font-size: 32px;
|
||||
color: #f2f4f8; }
|
||||
#status-bar .Menu .dial-parent .resource-dial {
|
||||
min-width: 96px;
|
||||
min-height: 96px; }
|
||||
#status-bar .Menu .dial-parent .dial-icon {
|
||||
color: #f2f4f8; }
|
||||
|
||||
#notifications {
|
||||
background: transparent; }
|
||||
|
||||
.notifications {
|
||||
opacity: 1;
|
||||
min-width: 24rem; }
|
||||
.notifications .revealer + .revealer > * > box {
|
||||
margin-top: 0; }
|
||||
.notifications .revealer .notification {
|
||||
margin-bottom: 25px;
|
||||
min-width: 24rem;
|
||||
padding: 0px;
|
||||
border: 2px solid #f2f4f8;
|
||||
border-right: 25px solid #42be65;
|
||||
background: #161616; }
|
||||
.notifications .revealer .notification.critical {
|
||||
border-right: 25px solid #FF7EB6; }
|
||||
.notifications .revealer .body {
|
||||
margin-right: 1em; }
|
||||
.notifications .revealer .timeout-bar {
|
||||
margin: 5px 0px 0;
|
||||
margin-top: 5px;
|
||||
background: #262626; }
|
||||
.notifications .revealer .timeout-bar > trough > progress {
|
||||
background-image: none;
|
||||
background-color: #33B1FF; }
|
||||
.notifications .revealer .button {
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px; }
|
||||
.notifications .revealer .button:hover {
|
||||
color: #FF7EB6; }
|
||||
.notifications .revealer .icon {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em; }
|
||||
.notifications .revealer .icon image {
|
||||
font-size: 58px;
|
||||
margin: 5px;
|
||||
color: #f2f4f8; }
|
||||
.notifications .revealer .icon box {
|
||||
min-width: 68px;
|
||||
min-height: 68px; }
|
||||
.notifications .revealer .title {
|
||||
font-size: 28px; }
|
||||
.notifications .revealer .actions .action-button {
|
||||
margin: 0 .4em;
|
||||
margin-top: .8em;
|
||||
border: 2px solid #f2f4f8; }
|
||||
.notifications .revealer .actions .action-button:first-child {
|
||||
margin-left: .5em; }
|
||||
.notifications .revealer .actions .action-button:last-child {
|
||||
margin-right: .5em; }
|
||||
|
||||
.launcher {
|
||||
min-width: 640px;
|
||||
background: #262626; }
|
||||
.launcher .search > image {
|
||||
margin-left: 10px; }
|
||||
.launcher .search > entry {
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
background: #161616;
|
||||
border: 5px solid #161616;
|
||||
border-radius: 10px;
|
||||
font-size: 32px; }
|
||||
.launcher .entry {
|
||||
margin: 0 10px 0 10px;
|
||||
border: 10px solid #161616;
|
||||
border-radius: 10px;
|
||||
background: #161616; }
|
||||
.launcher .entry > box > image {
|
||||
padding: 5px;
|
||||
margin: 5px 10px 5px 10px;
|
||||
background: #262626;
|
||||
border-radius: 5px; }
|
||||
.launcher > scrolledwindow > * > box:last-child {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset; }
|
||||
14
style/style.scss
Normal file
14
style/style.scss
Normal file
@ -0,0 +1,14 @@
|
||||
@import 'colors.scss';
|
||||
@import 'mixins.scss';
|
||||
|
||||
// components
|
||||
@import './components/lock.scss';
|
||||
@import './components/bar.scss';
|
||||
@import './components/top-bar.scss';
|
||||
@import './components/bar-control-center.scss';
|
||||
@import './components/notification-popups.scss';
|
||||
@import './components/launcher.scss';
|
||||
|
||||
* :not(selection) :not(tooltip) {
|
||||
all: unset;
|
||||
}
|
||||
Reference in New Issue
Block a user