Added on-screen-displays to indicate volume and brightness changes. (#34)
* Resolves #13 - Added on-screen-displays to indicate volume and brightness changes. * <3 Aylur * Update brightness logic for osd * Update brightness labels * Fixed typos in the settings menu component. * Added options to toggle OSD and change its orientation.
This commit is contained in:
@@ -2,9 +2,10 @@
|
||||
@import '../../variables';
|
||||
|
||||
.menu-items.media {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
|
||||
}
|
||||
|
||||
.menu-items-container.media {
|
||||
min-width: 23em;
|
||||
min-height: 10em;
|
||||
@@ -108,6 +109,7 @@
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
|
||||
}
|
||||
|
||||
79
scss/style/osd/index.scss
Normal file
79
scss/style/osd/index.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.indicator {
|
||||
.osd-container {
|
||||
margin: $osd-margins;
|
||||
}
|
||||
|
||||
.osd-label-container {
|
||||
background: $osd-bar_container;
|
||||
|
||||
border-radius: if($osd-orientation =="vertical", $osd-radius $osd-radius 0em 0em, 0em $osd-radius $osd-radius 0em);
|
||||
|
||||
.osd-label {
|
||||
font-size: 1em;
|
||||
padding-top: if($osd-orientation =="vertical", 1em, 0em);
|
||||
padding-right: if($osd-orientation =="horizontal", 1em, 0em);
|
||||
color: $osd-label;
|
||||
|
||||
&.overflow {
|
||||
color: $osd-bar_overflow_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.osd-icon-container {
|
||||
background: $osd-icon_container;
|
||||
|
||||
border-radius: if($osd-orientation =="vertical", 0em 0em $osd-radius $osd-radius, $osd-radius 0em 0em $osd-radius );
|
||||
|
||||
.osd-icon {
|
||||
font-size: 2em;
|
||||
padding: if($osd-orientation =="vertical", 0.2em 0em, 0em 0.2em);
|
||||
color: $osd-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-bar-container {
|
||||
padding: 1.25em;
|
||||
background: $osd-bar_container;
|
||||
|
||||
.osd-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: if($osd-orientation =="vertical", 10em, 0);
|
||||
min-width: if($osd-orientation =="horizontal", 10em, 0);
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: $osd-radius/2;
|
||||
|
||||
&.empty {
|
||||
background: $osd-bar_empty_color;
|
||||
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background: $osd-bar_color;
|
||||
padding: 0.45em;
|
||||
}
|
||||
}
|
||||
|
||||
&.overflow {
|
||||
block {
|
||||
&.empty {
|
||||
background: $osd-bar_color;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background: $osd-bar_overflow_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user