mirror of
https://git.disroot.org/eudaimon/Simplewaita.git
synced 2026-03-09 20:21:07 +00:00
Improved sliders with marks, sliders in fine-tune
This commit is contained in:
parent
36a201343b
commit
5a0ce409d8
9 changed files with 313 additions and 493 deletions
|
|
@ -1135,15 +1135,7 @@ scale { min-height: 10px; min-width: 10px; padding: 12px; }
|
|||
|
||||
scale fill, scale highlight { margin: -1px; }
|
||||
|
||||
scale slider { min-height: 18px; min-width: 18px; margin: -9px; }
|
||||
|
||||
scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; }
|
||||
|
||||
scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; }
|
||||
|
||||
scale.fine-tune slider { margin: -6px; }
|
||||
|
||||
scale.fine-tune fill, scale.fine-tune highlight, scale.fine-tune trough { border-radius: 5px; -gtk-outline-radius: 7px; }
|
||||
scale.fine-tune slider, scale.fine-tune slider:active, scale.fine-tune slider:hover, scale.fine-tune slider:focus { background-color: #6789b4; }
|
||||
|
||||
scale trough { outline-offset: 2px; -gtk-outline-radius: 5px; }
|
||||
|
||||
|
|
@ -1155,7 +1147,7 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b
|
|||
|
||||
.osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: transparent; }
|
||||
|
||||
scale slider { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #626262; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
|
||||
scale slider { min-height: 18px; min-width: 18px; margin: -9px; color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #626262; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
|
||||
|
||||
scale slider:hover { background-color: shade(#bcbeb9, 1.1); }
|
||||
|
||||
|
|
@ -1183,35 +1175,23 @@ scale marks, scale value { color: alpha(currentColor,0.55); font-feature-setting
|
|||
|
||||
scale.horizontal marks.top { margin-bottom: 6px; margin-top: -12px; }
|
||||
|
||||
scale.horizontal.fine-tune marks.top { margin-bottom: 6px; margin-top: -9px; }
|
||||
|
||||
scale.horizontal marks.bottom { margin-top: 6px; margin-bottom: -12px; }
|
||||
|
||||
scale.horizontal.fine-tune marks.bottom { margin-top: 6px; margin-bottom: -9px; }
|
||||
|
||||
scale.vertical marks.top { margin-right: 6px; margin-left: -12px; }
|
||||
|
||||
scale.vertical.fine-tune marks.top { margin-right: 6px; margin-left: -9px; }
|
||||
|
||||
scale.vertical marks.bottom { margin-left: 6px; margin-right: -12px; }
|
||||
|
||||
scale.vertical.fine-tune marks.bottom { margin-left: 6px; margin-right: -9px; }
|
||||
|
||||
scale.horizontal indicator { min-height: 6px; min-width: 1px; }
|
||||
|
||||
scale.horizontal.fine-tune indicator { min-height: 3px; }
|
||||
scale.horizontal.marks-after slider { border-radius: 5px 5px 100% 100%; min-width: 10px; padding: 0; margin-right: 5px; margin-left: 5px; }
|
||||
|
||||
scale.horizontal.marks-after slider { border-radius: 5px 5px 100% 100%; }
|
||||
|
||||
scale.horizontal.marks-before slider { border-radius: 100% 100% 5px 5px; }
|
||||
scale.horizontal.marks-before slider { border-radius: 100% 100% 5px 5px; min-width: 10px; padding: 0; margin-right: 5px; margin-left: 5px; }
|
||||
|
||||
scale.vertical indicator { min-height: 1px; min-width: 6px; }
|
||||
|
||||
scale.vertical.fine-tune indicator { min-width: 3px; }
|
||||
scale.vertical.marks-after slider { border-radius: 5px 100% 100% 5px; min-height: 10px; padding: 0; margin-top: 5px; margin-bottom: 5px; }
|
||||
|
||||
scale.vertical.marks-after slider { border-radius: 5px 100% 100% 5px; }
|
||||
|
||||
scale.vertical.marks-before slider { border-radius: 100% 5px 5px 100%; }
|
||||
scale.vertical.marks-before slider { border-radius: 100% 5px 5px 100%; min-height: 10px; padding: 0; margin-top: 5px; margin-bottom: 5px; }
|
||||
|
||||
scale.color { min-height: 0; min-width: 0; }
|
||||
|
||||
|
|
@ -1235,24 +1215,6 @@ scale.color.vertical:dir(rtl) trough { padding-right: 4px; background-position:
|
|||
|
||||
scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; }
|
||||
|
||||
scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; }
|
||||
|
||||
scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; }
|
||||
|
||||
scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(ltr) trough { padding-left: 7px; background-position: 6px 0; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(ltr) slider { margin-left: -15px; margin-right: 6px; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(rtl) trough { padding-right: 7px; background-position: -6px 0; }
|
||||
|
||||
scale.color.fine-tune.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; }
|
||||
|
||||
/***************** Progress bars * */
|
||||
progressbar { font-size: smaller; color: rgba(36, 31, 49, 0.4); font-feature-settings: "tnum"; }
|
||||
|
||||
|
|
@ -1580,13 +1542,13 @@ infobar.info selection, infobar.question selection, infobar.warning selection, i
|
|||
infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { color: #004B91; }
|
||||
|
||||
/************ Tooltips * */
|
||||
tooltip { padding: 4px; /* not working */ border-radius: 5px; text-shadow: none; }
|
||||
tooltip { border-radius: 5px; text-shadow: none; }
|
||||
|
||||
tooltip.background { background-color: rgba(103, 137, 180, 0.8); background-clip: padding-box; border: 1px solid #002269; }
|
||||
tooltip.background { background-color: rgba(103, 137, 180, 0.9); background-clip: padding-box; border: 1px solid #002269; }
|
||||
|
||||
tooltip decoration { background-color: transparent; }
|
||||
|
||||
tooltip * { padding: 4px; background-color: transparent; color: #002269; }
|
||||
tooltip * { background-color: transparent; color: #002269; }
|
||||
|
||||
/***************** Color Chooser * */
|
||||
colorswatch:drop(active), colorswatch { border-style: none; }
|
||||
|
|
@ -1675,7 +1637,7 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
|
|||
|
||||
.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
|
||||
|
||||
.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 20px transparent; }
|
||||
.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 6px 2px rgba(0, 0, 0, 0.7), 0 0 0 20px transparent; }
|
||||
|
||||
.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 6px 2px rgba(0, 0, 0, 0.4), 0 0 0 20px transparent; }
|
||||
|
||||
|
|
@ -1687,13 +1649,13 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
|
|||
|
||||
.csd.popup decoration { border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); }
|
||||
|
||||
tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
|
||||
tooltip.csd decoration { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); }
|
||||
|
||||
messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); }
|
||||
|
||||
.solid-csd decoration { margin: 0; padding: 4px; background-color: #797979; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); }
|
||||
.solid-csd decoration { margin: 0; padding: 4px; background-color: #797979; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); }
|
||||
|
||||
.solid-csd decoration:backdrop { box-shadow: inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); }
|
||||
.solid-csd decoration:backdrop { box-shadow: inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); }
|
||||
|
||||
button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
|
||||
|
||||
|
|
@ -1710,25 +1672,18 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
|
|||
.monospace { font-family: monospace; }
|
||||
|
||||
/********************** Touch Copy & Paste * */
|
||||
cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; }
|
||||
/********************** Touch Copy & Paste * */
|
||||
cursor-handle { color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #626262; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
|
||||
|
||||
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-start.png"), url("assets/text-select-start@2.png")); padding-left: 10px; }
|
||||
cursor-handle:hover { background-color: shade(#bcbeb9, 1.1); }
|
||||
|
||||
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-end.png"), url("assets/text-select-end@2.png")); padding-right: 10px; }
|
||||
cursor-handle:active { border-color: #8bcd41; }
|
||||
|
||||
cursor-handle.insertion-cursor:dir(ltr), cursor-handle.insertion-cursor:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); }
|
||||
cursor-handle:disabled { color: #552222; background-color: #938989; background-image: none; }
|
||||
|
||||
cursor-handle.top:hover:dir(ltr), cursor-handle.bottom:hover:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-start-hover.png"), url("assets/text-select-start-hover@2.png")); padding-left: 10px; }
|
||||
cursor-handle.top:dir(ltr), cursor-handle.bottom:dir(rtl) { border-radius: 100% 5px 5px 5px; }
|
||||
|
||||
cursor-handle.bottom:hover:dir(ltr), cursor-handle.top:hover:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-end-hover.png"), url("assets/text-select-end-hover@2.png")); padding-right: 10px; }
|
||||
|
||||
cursor-handle.insertion-cursor:hover:dir(ltr), cursor-handle.insertion-cursor:hover:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover.png"), url("assets/slider-horz-scale-has-marks-above-hover@2.png")); }
|
||||
|
||||
cursor-handle.top:active:dir(ltr), cursor-handle.bottom:active:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-start-active.png"), url("assets/text-select-start-active@2.png")); padding-left: 10px; }
|
||||
|
||||
cursor-handle.bottom:active:dir(ltr), cursor-handle.top:active:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/text-select-end-active.png"), url("assets/text-select-end-active@2.png")); padding-right: 10px; }
|
||||
|
||||
cursor-handle.insertion-cursor:active:dir(ltr), cursor-handle.insertion-cursor:active:dir(rtl) { -gtk-icon-source: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active.png"), url("assets/slider-horz-scale-has-marks-above-active@2.png")); }
|
||||
cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { border-radius: 5px 100% 5px 5px; }
|
||||
|
||||
.context-menu { font: initial; }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue