mirror of
https://github.com/EliverLara/Nordic.git
synced 2026-09-24 15:19:40 -05:00
Gnome 45: Improve level bars appearance
This commit is contained in:
EliverLara
+38
-39
@@ -2642,48 +2642,47 @@ infobar {
|
||||
color: #b84f59;
|
||||
background-color: transparent; }
|
||||
|
||||
/*************
|
||||
* Level Bar *
|
||||
*************/
|
||||
levelbar block {
|
||||
min-width: 32px;
|
||||
min-height: 6px; }
|
||||
levelbar.vertical block {
|
||||
min-width: 6px;
|
||||
levelbar.horizontal trough > block {
|
||||
min-height: 5px;
|
||||
border-radius: 5px; }
|
||||
levelbar.horizontal trough > block:dir(rtl) {
|
||||
border-radius: 0 5px 5px 0; }
|
||||
levelbar.horizontal trough > block:dir(ltr) {
|
||||
border-radius: 5px 0 0 5px; }
|
||||
levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full {
|
||||
border-radius: 5px; }
|
||||
levelbar.horizontal.discrete trough > block {
|
||||
min-height: 2px;
|
||||
margin: 1px;
|
||||
min-width: 24px;
|
||||
border-radius: 0; }
|
||||
levelbar.horizontal.discrete trough > block:first-child {
|
||||
border-radius: 2px 0 0 2px; }
|
||||
levelbar.horizontal.discrete trough > block:last-child {
|
||||
border-radius: 0 2px 2px 0; }
|
||||
levelbar.vertical trough > block {
|
||||
min-width: 5px;
|
||||
border-radius: 5px; }
|
||||
levelbar.vertical.discrete > trough > block {
|
||||
min-width: -2px;
|
||||
margin: 1px 0;
|
||||
min-height: 32px; }
|
||||
levelbar:backdrop {
|
||||
transition: 200ms ease-out; }
|
||||
levelbar trough {
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
levelbar trough:backdrop {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
levelbar.horizontal.discrete block {
|
||||
margin: 0 1px; }
|
||||
levelbar.vertical.discrete block {
|
||||
margin: 1px 0; }
|
||||
levelbar block {
|
||||
border-radius: 2px; }
|
||||
levelbar block:backdrop {
|
||||
box-shadow: none; }
|
||||
levelbar block.low {
|
||||
levelbar > trough {
|
||||
padding: 0; }
|
||||
levelbar > trough > block {
|
||||
border: 1px solid; }
|
||||
levelbar > trough > block.low {
|
||||
border-color: #c3674a;
|
||||
background-color: #c3674a; }
|
||||
levelbar block.low:backdrop {
|
||||
border-color: #c3674a; }
|
||||
levelbar block.high, levelbar block:not(.empty) {
|
||||
background-color: #5e81ac; }
|
||||
levelbar block.high:backdrop, levelbar block:not(.empty):backdrop {
|
||||
border-color: #5e81ac; }
|
||||
levelbar block.full {
|
||||
levelbar > trough > block.high, levelbar > trough > block:not(.empty) {
|
||||
border-color: #81a1c1;
|
||||
background-color: #81a1c1; }
|
||||
levelbar > trough > block.full {
|
||||
border-color: #49688e;
|
||||
background-color: #49688e; }
|
||||
levelbar block.full:backdrop {
|
||||
border-color: #49688e; }
|
||||
levelbar block.empty {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
box-shadow: none; }
|
||||
levelbar > trough > block.empty {
|
||||
background-color: #434c5e;
|
||||
border-color: #434c5e; }
|
||||
|
||||
/*********
|
||||
* Links *
|
||||
|
||||
+38
-39
@@ -2642,48 +2642,47 @@ infobar {
|
||||
color: #b84f59;
|
||||
background-color: transparent; }
|
||||
|
||||
/*************
|
||||
* Level Bar *
|
||||
*************/
|
||||
levelbar block {
|
||||
min-width: 32px;
|
||||
min-height: 6px; }
|
||||
levelbar.vertical block {
|
||||
min-width: 6px;
|
||||
levelbar.horizontal trough > block {
|
||||
min-height: 5px;
|
||||
border-radius: 5px; }
|
||||
levelbar.horizontal trough > block:dir(rtl) {
|
||||
border-radius: 0 5px 5px 0; }
|
||||
levelbar.horizontal trough > block:dir(ltr) {
|
||||
border-radius: 5px 0 0 5px; }
|
||||
levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full {
|
||||
border-radius: 5px; }
|
||||
levelbar.horizontal.discrete trough > block {
|
||||
min-height: 2px;
|
||||
margin: 1px;
|
||||
min-width: 24px;
|
||||
border-radius: 0; }
|
||||
levelbar.horizontal.discrete trough > block:first-child {
|
||||
border-radius: 2px 0 0 2px; }
|
||||
levelbar.horizontal.discrete trough > block:last-child {
|
||||
border-radius: 0 2px 2px 0; }
|
||||
levelbar.vertical trough > block {
|
||||
min-width: 5px;
|
||||
border-radius: 5px; }
|
||||
levelbar.vertical.discrete > trough > block {
|
||||
min-width: -2px;
|
||||
margin: 1px 0;
|
||||
min-height: 32px; }
|
||||
levelbar:backdrop {
|
||||
transition: 200ms ease-out; }
|
||||
levelbar trough {
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
levelbar trough:backdrop {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
levelbar.horizontal.discrete block {
|
||||
margin: 0 1px; }
|
||||
levelbar.vertical.discrete block {
|
||||
margin: 1px 0; }
|
||||
levelbar block {
|
||||
border-radius: 2px; }
|
||||
levelbar block:backdrop {
|
||||
box-shadow: none; }
|
||||
levelbar block.low {
|
||||
levelbar > trough {
|
||||
padding: 0; }
|
||||
levelbar > trough > block {
|
||||
border: 1px solid; }
|
||||
levelbar > trough > block.low {
|
||||
border-color: #c3674a;
|
||||
background-color: #c3674a; }
|
||||
levelbar block.low:backdrop {
|
||||
border-color: #c3674a; }
|
||||
levelbar block.high, levelbar block:not(.empty) {
|
||||
background-color: #5e81ac; }
|
||||
levelbar block.high:backdrop, levelbar block:not(.empty):backdrop {
|
||||
border-color: #5e81ac; }
|
||||
levelbar block.full {
|
||||
levelbar > trough > block.high, levelbar > trough > block:not(.empty) {
|
||||
border-color: #81a1c1;
|
||||
background-color: #81a1c1; }
|
||||
levelbar > trough > block.full {
|
||||
border-color: #49688e;
|
||||
background-color: #49688e; }
|
||||
levelbar block.full:backdrop {
|
||||
border-color: #49688e; }
|
||||
levelbar block.empty {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
box-shadow: none; }
|
||||
levelbar > trough > block.empty {
|
||||
background-color: #434c5e;
|
||||
border-color: #434c5e; }
|
||||
|
||||
/*********
|
||||
* Links *
|
||||
|
||||
@@ -1,62 +1,80 @@
|
||||
/*************
|
||||
* Level Bar *
|
||||
*************/
|
||||
$_levelbar_size: 5px;
|
||||
$_levelbar_border_radius: 5px;
|
||||
|
||||
levelbar {
|
||||
block {
|
||||
min-width: 32px;
|
||||
min-height: 6px;
|
||||
}
|
||||
&.horizontal {
|
||||
trough > block {
|
||||
min-height: $_levelbar_size;
|
||||
border-radius: $_levelbar_border_radius;
|
||||
|
||||
&.vertical block {
|
||||
min-width: 6px;
|
||||
min-height: 32px;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
|
||||
}
|
||||
|
||||
&:backdrop { transition: $backdrop_transition; }
|
||||
&:dir(ltr) {
|
||||
border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
|
||||
}
|
||||
|
||||
trough {
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: if($variant == 'light' ,transparentize(white,0.2),transparentize(white,0.8));
|
||||
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
|
||||
&.empty,&.full {
|
||||
border-radius: $_levelbar_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: if($variant == 'light' ,transparentize(white,0.4),transparentize(white,0.94));
|
||||
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
|
||||
// segmented level bar
|
||||
&.discrete {
|
||||
trough > block {
|
||||
min-height: 2px;
|
||||
margin: 1px;
|
||||
min-width: 24px;
|
||||
border-radius:0;
|
||||
&:first-child {border-radius: 2px 0 0 2px;}
|
||||
&:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal.discrete block { margin: 0 1px; }
|
||||
&.vertical {
|
||||
trough > block {
|
||||
min-width: $_levelbar_size;
|
||||
border-radius: $_levelbar_border_radius;
|
||||
}
|
||||
|
||||
&.vertical.discrete block { margin: 1px 0; }
|
||||
&.discrete > trough > block {
|
||||
min-width: $_levelbar_size - 7px;
|
||||
margin: 1px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: 2px;
|
||||
> trough {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
// level bar colours
|
||||
> trough > block {
|
||||
border: 1px solid;
|
||||
|
||||
&.low {
|
||||
border-color: $warning_color;
|
||||
background-color: $warning_color;
|
||||
|
||||
&:backdrop { border-color: $warning_color; };
|
||||
}
|
||||
|
||||
&.high,
|
||||
&:not(.empty) {
|
||||
background-color: $cyan;
|
||||
|
||||
&:backdrop { border-color: $cyan; }
|
||||
border-color: $nord9;
|
||||
background-color: $nord9;
|
||||
}
|
||||
|
||||
&.full {
|
||||
border-color: $success_color;
|
||||
background-color: $success_color;
|
||||
|
||||
&:backdrop { border-color: $success_color; };
|
||||
}
|
||||
|
||||
&.empty {
|
||||
background-color: if($variant == 'light' ,transparentize(black, 0.86),transparentize(black,0.65));
|
||||
box-shadow: none;
|
||||
background-color: lighten($base_color, 10%);
|
||||
border-color: lighten($base_color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user