Implement styling options for all the bar components (not menus) through options variables.
This commit is contained in:
Jas Singh
46
scss/style/menus/audiomenu.scss
Normal file
46
scss/style/menus/audiomenu.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-dropdown-label.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-label.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-button-isactive.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-active-slider {
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background: $maroon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button.audio {
|
||||
&:hover {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-container.volume {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.menu-section-container.playback {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.menu-section-container.input {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
.menu-label-container.input {
|
||||
border-radius: 0em;
|
||||
}
|
||||
.menu-items-section.playback {
|
||||
border-radius: 0em;
|
||||
}
|
||||
86
scss/style/menus/bluetooth.scss
Normal file
86
scss/style/menus/bluetooth.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.bluetooth {
|
||||
font-size: 1.3em;
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
.menu-label {
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
margin: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-items-section {
|
||||
min-height: 20em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
&.search {
|
||||
image {
|
||||
color: $text;
|
||||
}
|
||||
&:hover image {
|
||||
color: $sky;
|
||||
}
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
&:hover {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.bluetooth-element-item {
|
||||
margin-bottom: 0.4em;
|
||||
&:hover {
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-right: 0em;
|
||||
margin-top: 0.0em;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
|
||||
&.active {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.5em;
|
||||
|
||||
&.active {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
font-size: 0.9em;
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
min-height: 1.3em;
|
||||
min-width: 1.3em;
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
179
scss/style/menus/calendar.scss
Normal file
179
scss/style/menus/calendar.scss
Normal file
@@ -0,0 +1,179 @@
|
||||
@import "../colors";
|
||||
|
||||
.calendar-content-container {
|
||||
margin-top: 0em;
|
||||
min-width: 27em;
|
||||
min-height: 6em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.calendar-menu-item-container {
|
||||
border-radius: 0.4em;
|
||||
margin-bottom: 1.35em;
|
||||
background: $base;
|
||||
}
|
||||
|
||||
.calendar-content-items {
|
||||
margin: 1.35em;
|
||||
}
|
||||
|
||||
.calendar-container-box {
|
||||
margin: 0.75em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.calendar-menu-widget {
|
||||
border-radius: 0.4em;
|
||||
color: $text;
|
||||
|
||||
&:selected {
|
||||
box-shadow: inset 0 -0.5em 0 0 $pink,
|
||||
inset -0.4em -0.3em 0 0 $base,
|
||||
inset 0.4em 0 0 0.01em $base;
|
||||
color: $pink;
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
&.header {
|
||||
background-color: transparent;
|
||||
color: $teal;
|
||||
}
|
||||
&.button {
|
||||
color: $text;
|
||||
font-weight: 900;
|
||||
font-size: 900em;
|
||||
}
|
||||
&:hover {
|
||||
color: $pink;
|
||||
}
|
||||
&.highlight {
|
||||
border: 2em solid $pink;
|
||||
background-color: transparent;
|
||||
color: $pink;
|
||||
}
|
||||
&:indeterminate {
|
||||
color: $surface2;
|
||||
}
|
||||
|
||||
font-size: 1.1em;
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
.clock-content-items {
|
||||
min-height: 8em;
|
||||
|
||||
.clock-content-time {
|
||||
font-size: 4em;
|
||||
color: $pink;
|
||||
}
|
||||
.clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-right: -0.875em;
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-item-container.clock {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.calendar-menu-item-container.calendar {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.calendar-menu-item-container.weather {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.weather-container-box {
|
||||
color: $red;
|
||||
margin: 1.5em;
|
||||
margin-top: 2.5em;
|
||||
min-width: 3em;
|
||||
// min-height: 10em;
|
||||
|
||||
.calendar-menu-weather.today.icon {
|
||||
image {
|
||||
color: $pink;
|
||||
font-size: 6em;
|
||||
// margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label {
|
||||
color: $text;
|
||||
margin-left: 0.2em;
|
||||
font-size: 2.5em;
|
||||
|
||||
&.icon {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.condition.label {
|
||||
color: $teal;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.red {
|
||||
// color: $red;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.orange {
|
||||
// color: $orange;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.lavender {
|
||||
// color: $lavender;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.blue {
|
||||
// color: $blue;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.sky {
|
||||
// color: $sky;
|
||||
// }
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.red {
|
||||
color: $red;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.orange {
|
||||
color: $orange;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
|
||||
color: $lavender;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.blue {
|
||||
color: $blue;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.sky {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.stats.container {
|
||||
margin-bottom: 0.75em;
|
||||
color: $pink;
|
||||
|
||||
.weather.label {
|
||||
margin-left: 0.35em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-separator.weather {
|
||||
margin: 1.5em 0em;
|
||||
}
|
||||
|
||||
.hourly-weather-time {
|
||||
color: $pink;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.hourly-weather-icon {
|
||||
color: $pink;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.hourly-weather-temp {
|
||||
color: $pink;
|
||||
}
|
||||
338
scss/style/menus/dashboard.scss
Normal file
338
scss/style/menus/dashboard.scss
Normal file
@@ -0,0 +1,338 @@
|
||||
@import "../colors";
|
||||
|
||||
.dashboard-content-items {
|
||||
margin-left: 0.50em;
|
||||
min-width: 28.5em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
|
||||
button {
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: $base;
|
||||
margin: 1.3em;
|
||||
border-radius: 0.4em;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.profile-picture-container {
|
||||
margin-right: 0.65em;
|
||||
margin-bottom: 0.65em;
|
||||
.profile-picture {
|
||||
font-size: 7.5em;
|
||||
}
|
||||
.profile-name {
|
||||
font-size: 1.5em;
|
||||
color: $pink;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.power-menu-container {
|
||||
margin-left: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
|
||||
.dashboard-button {
|
||||
min-width: 3em;
|
||||
min-height: 2.5em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
image {
|
||||
color: $base;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.shutdown {
|
||||
background: $red;
|
||||
}
|
||||
&.restart {
|
||||
background: $peach;
|
||||
}
|
||||
&.lock {
|
||||
background: $green;
|
||||
}
|
||||
&.sleep {
|
||||
background: $sky;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $mauve;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts-container {
|
||||
.dashboard-card {
|
||||
padding: 1.5em;
|
||||
button {
|
||||
min-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-button-left-section {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.top-button {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
|
||||
&.most-used {
|
||||
margin-right: 0em;
|
||||
}
|
||||
&.utilities {
|
||||
margin-left: 0.65em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $lavender;
|
||||
color: $base;
|
||||
min-height: 3em;
|
||||
|
||||
&.discord {
|
||||
label {
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.record.active {
|
||||
background: $green;
|
||||
|
||||
&:hover {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
margin-bottom: 0.65em;
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $red;
|
||||
padding: 0em;
|
||||
min-height: 3em;
|
||||
|
||||
label {
|
||||
color: $base;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
&.wifi {
|
||||
background: $mauve;
|
||||
}
|
||||
&.bluetooth {
|
||||
background: $sky;
|
||||
}
|
||||
&.notifications {
|
||||
background: $yellow;
|
||||
}
|
||||
&.playback {
|
||||
background: $maroon;
|
||||
}
|
||||
&.input {
|
||||
background: $pink;
|
||||
}
|
||||
&.wifi:hover {
|
||||
background: transparentize($mauve, 0.7);
|
||||
}
|
||||
&.bluetooth:hover {
|
||||
background: transparentize($sky, 0.7);
|
||||
}
|
||||
&.notifications:hover {
|
||||
background: transparentize($yellow, 0.7);
|
||||
}
|
||||
&.playback:hover {
|
||||
background: transparentize($maroon, 0.7);
|
||||
}
|
||||
&.input:hover {
|
||||
background: transparentize($pink, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
background: $surface1;
|
||||
}
|
||||
&.disabled {
|
||||
background: $surface2;
|
||||
&.wifi:hover {
|
||||
background: transparentize($mauve, 0.7);
|
||||
}
|
||||
&.bluetooth:hover {
|
||||
background: transparentize($sky, 0.7);
|
||||
}
|
||||
&.notifications:hover {
|
||||
background: transparentize($yellow, 0.7);
|
||||
}
|
||||
&.playback:hover {
|
||||
background: transparentize($maroon, 0.7);
|
||||
}
|
||||
&.input:hover {
|
||||
background: transparentize($pink, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directories-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
.directory-link {
|
||||
padding: 0.5em 0em;
|
||||
min-width: 9em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&.documents {
|
||||
color: $teal;
|
||||
}
|
||||
&.downloads {
|
||||
color: $pink;
|
||||
}
|
||||
&.home {
|
||||
color: $lavender;
|
||||
}
|
||||
&.pictures {
|
||||
color: $mauve;
|
||||
}
|
||||
&.videos {
|
||||
color: $yellow;
|
||||
}
|
||||
&.projects {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-top: 0em;
|
||||
|
||||
.stat {
|
||||
label {
|
||||
margin-right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.cpu label{
|
||||
color: $maroon;
|
||||
}
|
||||
&.ram label{
|
||||
color: $yellow;
|
||||
}
|
||||
&.gpu label{
|
||||
color: $green;
|
||||
}
|
||||
&.storage label{
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: 1.05em;
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: 0.4em;
|
||||
|
||||
&.empty {
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
padding-left: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cpu .stats-bar block.filled {
|
||||
background: $maroon;
|
||||
}
|
||||
|
||||
&.ram .stats-bar block.filled {
|
||||
background: $yellow;
|
||||
}
|
||||
|
||||
&.gpu .stats-bar block.filled {
|
||||
background: $green;
|
||||
}
|
||||
|
||||
&.storage .stats-bar block.filled {
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-bottom: 0.75em;
|
||||
font-size: 0.9em;
|
||||
&.cpu {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
&.ram {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.gpu {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&.storage {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.recording {
|
||||
color: red;
|
||||
background-color: $crust;
|
||||
|
||||
menuitem {
|
||||
|
||||
}
|
||||
}
|
||||
61
scss/style/menus/energy.scss
Normal file
61
scss/style/menus/energy.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.energy {
|
||||
.menu-label {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.power-profile-item {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
|
||||
color: $overlay1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
image {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-active-slider.brightness {
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brightness-container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.brightness-slider-icon {
|
||||
font-size: 1.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: $overlay2;
|
||||
}
|
||||
|
||||
.brightness-slider-label {
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
109
scss/style/menus/media.scss
Normal file
109
scss/style/menus/media.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.media {
|
||||
min-width: 23em;
|
||||
min-height: 10em;
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
border-radius: 0.4em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
border-radius: 0.4em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name-label {
|
||||
color: $lavender;
|
||||
font-size: 1.35em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author-label {
|
||||
color: $teal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-album-label {
|
||||
color: $pink;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-controls {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
margin: 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
background: $lavender;
|
||||
color: $crust;
|
||||
min-height: 1.8em;
|
||||
min-width: 2.5em;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
&.disabled {
|
||||
background: $surface2;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background: $lavender;
|
||||
|
||||
&:hover {
|
||||
background: $pink;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.menu-slider.media.progress {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
trough {
|
||||
background: $surface2;
|
||||
border-radius: 0.2em;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
border-radius: 0.2em;
|
||||
min-height: .85em;
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
266
scss/style/menus/menu.scss
Normal file
266
scss/style/menus/menu.scss
Normal file
@@ -0,0 +1,266 @@
|
||||
.menu-slider {
|
||||
trough {
|
||||
border-radius: 0.3rem;
|
||||
background: $surface0;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: $peach;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
min-height: 0.6rem;
|
||||
min-width: 0.6rem;
|
||||
border: 0rem solid transparent;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-switch {
|
||||
font-size: 1.3em;
|
||||
background-color: $surface0;
|
||||
border-radius: 0.2em;
|
||||
|
||||
&:checked {
|
||||
background: $sky;
|
||||
}
|
||||
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background-color: $peach;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: $overlay0;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
border: 0em solid transparent;
|
||||
border-radius: 0.2em;
|
||||
margin: 0.1em 0.15em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $sky;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
}
|
||||
|
||||
trough:focus {
|
||||
}
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
min-height: .1rem;
|
||||
margin: .6rem 0rem;
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
background: $crust;
|
||||
border: .13em solid $surface0;
|
||||
border-radius: .7rem;
|
||||
min-width: 18em;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.menu-items-container {
|
||||
border-radius: 0.4em;
|
||||
font-size: 1.3em;
|
||||
min-width: 18em;
|
||||
}
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
|
||||
.menu-label {
|
||||
color: $text;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
margin: 0em 1em ;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
padding: 0.9em;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin: 0rem 1em;
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
.menu-active-container {
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-button {
|
||||
padding: 0.1em;
|
||||
margin-bottom: -0.2em;
|
||||
.menu-active-icon {
|
||||
color: $overlay2;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
&.muted image {
|
||||
color: $maroon;
|
||||
}
|
||||
&:hover image {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-percentage {
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-active-slider {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-active-slider * {
|
||||
min-height: 0.85em;
|
||||
border-radius: .2em;
|
||||
}
|
||||
.menu-slider-container {
|
||||
margin-bottom: .7rem;
|
||||
}
|
||||
|
||||
.menu-label-dim {
|
||||
color: $overlay0;
|
||||
margin-right: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: $overlay0;
|
||||
}
|
||||
.menu-icon-button {
|
||||
&:hover {
|
||||
color: $surface2;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown-label-container {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
|
||||
.menu-button-name {
|
||||
font-size: 0.95em;
|
||||
font-weight: bold;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: $overlay0;
|
||||
margin-right: .5rem;
|
||||
|
||||
&.active {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dropdown-menu-container {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
margin: 0.5em 1em;
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.event-top-padding * {
|
||||
min-height: 0em;
|
||||
margin-top: 2.8em;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
image.spinning {
|
||||
animation-name: spin;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
89
scss/style/menus/network.scss
Normal file
89
scss/style/menus/network.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.network {
|
||||
font-size: 1.3em;
|
||||
.menu-items-section {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
.menu-label {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
.menu-icon-button.network {
|
||||
margin: 1em;
|
||||
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: $overlay1;
|
||||
|
||||
&.active {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-container {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.connection-status {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.menu-section-container.wifi {
|
||||
margin-top: 0.65em;
|
||||
.menu-items-section {
|
||||
min-height: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
.network-element-item {
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&.staging {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner.wap {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
.network-password-input-container {
|
||||
background: $mantle;
|
||||
border-radius: 0.4em;
|
||||
margin: 0em 2em;
|
||||
margin-top: 0.75em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.close-network-password-input-button {
|
||||
padding: 0em 0.5em;
|
||||
&:hover image {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.network.disconnect {
|
||||
margin: 0em;
|
||||
margin-top: -0.2em;
|
||||
margin-left: 1em;
|
||||
label {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
}
|
||||
109
scss/style/menus/notifications.scss
Normal file
109
scss/style/menus/notifications.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import "../colors";
|
||||
|
||||
.notification-card-container.menu {
|
||||
margin: 0em;
|
||||
min-width: 30.5em;
|
||||
min-height: 48em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
margin-right: 0.45em;
|
||||
|
||||
.window-content.notificationsmenu-window {
|
||||
margin-right: 0.50em;
|
||||
}
|
||||
|
||||
.menu-content-container.notifications {
|
||||
margin: 1em;
|
||||
margin-bottom: 0em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.notification-menu-controls {
|
||||
background: $base;
|
||||
margin: 1em 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.4em 0.75em;
|
||||
}
|
||||
|
||||
.notification-card.menu {
|
||||
background: $base;
|
||||
min-width: 26.2em;
|
||||
border: 0.15em solid $base;
|
||||
border-radius: 0em;
|
||||
border-bottom-left-radius: 0.4em;
|
||||
border-top-left-radius: 0.4em;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.notification-card-content-container {
|
||||
margin-bottom: 0.65em;
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.notification-card-content {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.menu-label.notifications {
|
||||
margin: 0em;
|
||||
color: $lavender;
|
||||
}
|
||||
|
||||
.menu-separator.notification-controls {
|
||||
min-width: 0.1em;
|
||||
background-color: $surface0;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
|
||||
.menu-switch.notifications:checked {
|
||||
&:checked {
|
||||
background: $lavender;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-button {
|
||||
margin-right: 0.3em;
|
||||
|
||||
&:hover label {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-label {
|
||||
color: $red;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-label-container {
|
||||
margin-bottom: 8em;
|
||||
|
||||
label {
|
||||
color: $surface0;
|
||||
}
|
||||
|
||||
.bell {
|
||||
font-size: 10em;
|
||||
}
|
||||
.message {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.close-notification-button.menu {
|
||||
background: $red;
|
||||
color: $crust;
|
||||
min-width: 2.1em;
|
||||
border-radius: 0rem 0.35em 0.35em 0em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $maroon;
|
||||
}
|
||||
}
|
||||
196
scss/style/menus/power.scss
Normal file
196
scss/style/menus/power.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
@import "../colors";
|
||||
|
||||
window#powermenu,
|
||||
window#verification {
|
||||
// the fraction has to be more than hyprland ignorealpha
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
$popover-padding: 0.6rem * 1.6;
|
||||
|
||||
window#verification .verification {
|
||||
@include floating-widget;
|
||||
background: $crust;
|
||||
padding: 0.35em * 1.6 * 1.5;
|
||||
min-width: 20em;
|
||||
min-height: 6em;
|
||||
font-size: 1.3em;
|
||||
|
||||
.verification-content {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
margin-bottom: 0.3em;
|
||||
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
color: $lavender;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: $text;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.55em;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.verification-button {
|
||||
background: $base;
|
||||
padding: 0.7em 0em;
|
||||
margin: 0.4em 1.7em;
|
||||
border-radius: 0.3em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&.bar-verification_yes {
|
||||
background-color: $green;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.bar-verification_yes {
|
||||
background: $lavender;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: $lavender;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
&.bar-verification_yes{
|
||||
background: $lavender;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: $lavender;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.bar-verification_yes {
|
||||
background: rgb($lavender, 0.4);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: rgb($lavender, 0.4);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
image {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
label {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar-verification_no label {
|
||||
color: $mantle;
|
||||
}
|
||||
.bar-verification_yes label {
|
||||
color: $mantle;
|
||||
}
|
||||
}
|
||||
|
||||
window#powermenu .powermenu {
|
||||
@include floating-widget;
|
||||
&.line {
|
||||
padding: $popover-padding * 1.5;
|
||||
}
|
||||
|
||||
&.box {
|
||||
padding: $popover-padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-button {
|
||||
border-color: $crust;
|
||||
min-width: 4.5em;
|
||||
min-height: 4.5em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
} &:active {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: rgba($red, .5);
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: rgba($green, .5);
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: rgba($sky, .5);
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: rgba($peach, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.system-button_icon {
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.system-button_label {
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user