diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index c4d55f9..93b7c2f 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -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; } diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index e451a74..3e5d9a0 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -1024,15 +1024,7 @@ scale > trough { transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, scale > trough > fill, scale > trough > highlight { margin: -1px; } -scale > trough > 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 > trough > slider { margin: -6px; } - -scale.fine-tune > trough > fill, scale.fine-tune > trough > highlight, scale.fine-tune > trough { border-radius: 5px; } +scale.fine-tune > trough > slider, scale.fine-tune > trough > slider:active, scale.fine-tune > trough > slider:hover, scale.fine-tune > trough > slider:focus { background-color: #6789b4; } scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } @@ -1040,7 +1032,7 @@ scale > trough > fill:disabled { border-color: transparent; background-color: tr .osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } -scale > trough > 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 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } +scale > trough > 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 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale > trough > slider:hover { background-color: shade(#bcbeb9, 1.1); } @@ -1072,15 +1064,9 @@ scale.horizontal > value.left { margin-right: 9px; } scale.horizontal > value.right { margin-left: 9px; } -scale.horizontal.fine-tune > marks.top { margin-top: 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.fine-tune > marks.bottom { margin-bottom: 3px; } - -scale.horizontal.fine-tune > marks indicator { min-height: 3px; } - -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 > marks { color: alpha(currentColor,0.55); } @@ -1094,15 +1080,9 @@ scale.vertical > value.top { margin-bottom: 9px; } scale.vertical > value.bottom { margin-top: 9px; } -scale.vertical.fine-tune > marks.top { margin-left: 3px; } +scale.vertical.marks-after slider { border-radius: 5px 100% 100% 5px; min-height: 10px; padding: 0; margin-top: 54px; margin-bottom: 5px; } -scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } - -scale.vertical.fine-tune > marks indicator { min-height: 3px; } - -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; } @@ -1126,24 +1106,6 @@ scale.color.vertical:dir(rtl) > trough { padding-right: 4px; background-position scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > 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) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > 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) > trough > 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) > trough > slider { margin-right: -15px; margin-left: 6px; } - /***************** Progress bars * */ progressbar { font-size: smaller; color: rgba(36, 31, 49, 0.4); font-feature-settings: "tnum"; } @@ -1483,9 +1445,9 @@ video { background: black; } video image.osd { min-width: 64px; min-height: 64px; border-radius: 32px; } /************ Tooltips * */ -tooltip { padding: 6px 10px; border-radius: 8px; box-shadow: none; } +tooltip { padding: 6px 10px; border-radius: 8px; } -tooltip.background { background-color: rgba(103, 137, 180, 0.8); background-clip: padding-box; border: 1px solid #002269; color: #002269; } +tooltip.background { background-color: rgba(103, 137, 180, 0.9); background-clip: padding-box; border: 1px solid #002269; color: #002269; } tooltip > box { border-spacing: 6px; } @@ -1584,13 +1546,13 @@ window.csd.popup { border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), window.csd.dialog.message { border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } -window.solid-csd { margin: 0; padding: 4px; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); } +window.solid-csd { margin: 0; padding: 4px; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); } -window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); } +window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); } window.maximized, window.fullscreen { border-radius: 0; box-shadow: none; } -window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23), 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 20px transparent; } +window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23), 0 2px 6px 2px rgba(0, 0, 0, 0.7), 0 0 0 20px transparent; } window.tiled:backdrop, window.tiled-top:backdrop, window.tiled-left:backdrop, window.tiled-right:backdrop, window.tiled-bottom: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; } @@ -1598,30 +1560,23 @@ window.popup { box-shadow: none; } window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } -tooltip.csd { border-radius: 5px; box-shadow: none; } +tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); } .monospace { font-family: monospace; } /********************** Touch Copy & Paste * */ -cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; min-width: 20px; min-height: 24px; padding-left: 20px; padding-right: 20px; padding-top: 24px; padding-bottom: 24px; } +/********************** 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")); } +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")); } +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")); } +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")); } - -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")); } - -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")); } - -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; } shortcuts-section { margin: 20px; } diff --git a/source/common/cursor-handle.scss b/source/common/cursor-handle.scss new file mode 100644 index 0000000..cb5ba06 --- /dev/null +++ b/source/common/cursor-handle.scss @@ -0,0 +1,26 @@ +/********************** + * Touch Copy & Paste * + *********************/ +//touch selection handlebars for the Popover.osd above +cursor-handle { + + //copying slider code, so not DRYing, here... + //I don't know how to test this... + @include button(normal-alt); + + border: 1px solid darken($alt_borders_color, 3%); + border-radius: 100%; + transition: $button_transition; + transition-property: background, border, box-shadow; + min-height: 18px; + min-width: 10px; + + &:hover { @include button(hover-alt, $edge: $shadow_color); } + + &:active { border-color: $progress_border_color; } + + &:disabled { @include button(insensitive); } + + &.top:dir(ltr), &.bottom:dir(rtl) {border-radius: 100% 5px 5px 5px;} + &.bottom:dir(ltr), &.top:dir(rtl) {border-radius: 5px 100% 5px 5px;} +} diff --git a/source/common/gtk3_removed.scss b/source/common/gtk3_removed.scss index bc50da6..5e9c21d 100644 --- a/source/common/gtk3_removed.scss +++ b/source/common/gtk3_removed.scss @@ -567,3 +567,88 @@ levelbar { } } } + + +/********************** + * Touch Copy & Paste * + *********************/ +//touch selection handlebars for the Popover.osd above +cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + + @each $s,$as in ('',''), + (':hover','-hover'), + (':active','-active') { //no need for insensitive and backdrop + &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { + $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-left: 10px; + } + + &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { + $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-right: 10px; + } + + &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { + $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } + } +} + +//inside scale .color + &.fine-tune { + &.horizontal { + &:dir(ltr), &:dir(rtl) { // specificity bump + padding: 0 0 12px 0; + + trough { + padding-bottom: 7px; + background-position: 0 -6px; + } + + slider { + margin-bottom: -15px; + margin-top: 6px; + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 12px; + + trough { + padding-left: 7px; + background-position: 6px 0; + } + + slider { + margin-left: -15px; + margin-right: 6px; + } + } + + &:dir(rtl) { + padding: 0 12px 0 0; + + trough { + padding-right: 7px; + background-position: -6px 0; + } + + slider { + margin-right: -15px; + margin-left: 6px; + } + } + } + } diff --git a/source/common/gtk4_removed.scss b/source/common/gtk4_removed.scss index 1426b7d..cefd45a 100644 --- a/source/common/gtk4_removed.scss +++ b/source/common/gtk4_removed.scss @@ -423,5 +423,45 @@ &.dragging, &.hovering { opacity: 0.8; } - }*/ + } + + +/********************** + * Touch Copy & Paste * + *********************/ +//touch selection handlebars for the Popover.osd above +cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + min-width: 20px; + min-height: 24px; + padding-left: 20px; + padding-right: 20px; + padding-top: 24px; + padding-bottom: 24px; + + @each $s,$as in ('',''), + (':hover','-hover'), + (':active','-active') { //no need for insensitive and backdrop + &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { + $_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } + + &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { + $_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } + + &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { + $_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } + } +} diff --git a/source/gtk3/_common.scss b/source/gtk3/_common.scss index 1a29748..0828215 100644 --- a/source/gtk3/_common.scss +++ b/source/gtk3/_common.scss @@ -3105,34 +3105,31 @@ scale { // the slider is inside the trough, so to have make it bigger there's a negative margin - slider { - min-height: 18px; - min-width: 18px; - margin: -9px; - } + // click-and-hold the slider to activate &.fine-tune { - &.horizontal { - padding-top: 9px; - padding-bottom: 9px; - min-height: 16px; - } + //&.horizontal { + // padding-top: 9px; + // padding-bottom: 9px; + // min-height: 16px; + //} - &.vertical { - padding-left: 9px; - padding-right: 9px; - min-width: 16px; - } + //&.vertical { + // padding-left: 9px; + // padding-right: 9px; + // min-width: 16px; + //} // to make the trough grow in fine-tune mode - slider { margin: -6px; } + //trough {border-color: $success_color;} + slider {&, &:active, &:hover, &:focus { background-color: $hint_bg;}}//margin: -6px; } fill, highlight, trough { - border-radius: 5px; - -gtk-outline-radius: 7px; + //border-radius: 5px; + //-gtk-outline-radius: 7px; } } @@ -3174,7 +3171,11 @@ scale { } } - slider { + slider, %slider { + + min-height: 18px; + min-width: 18px; + margin: -9px; @include button(normal-alt, $edge: $shadow_color); border: 1px solid darken($alt_borders_color, 3%); @@ -3250,12 +3251,12 @@ scale { } } - &.#{$scale_orient}.fine-tune marks { - &.#{$marks_class} { - margin-#{$marks_margin}: $_marks_distance; - margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px); - } - } + //&.#{$scale_orient}.fine-tune marks { + // &.#{$marks_class} { + // margin-#{$marks_margin}: $_marks_distance; + // margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px); + // } + //} } @@ -3266,9 +3267,10 @@ scale { min-width: 1px; } - &.fine-tune indicator { min-height: ($_marks_length - 3px); } - &.marks-after {slider{ border-radius: 5px 5px 100% 100%;}} - &.marks-before {slider{ border-radius: 100% 100% 5px 5px;}} + //&.fine-tune indicator { min-height: ($_marks_length - 3px); } + &.marks-after { + slider{ border-radius: 5px 5px 100% 100%; min-width: 10px; padding: 0; margin-right: 5px; margin-left:5px;}} + &.marks-before {slider{ border-radius: 100% 100% 5px 5px;min-width: 10px;padding: 0;margin-right: 5px; margin-left:5px;}} } &.vertical { @@ -3277,10 +3279,10 @@ scale { min-width: $_marks_length; } - &.fine-tune indicator { min-width: ($_marks_length - 3px); } + //&.fine-tune indicator { min-width: ($_marks_length - 3px); } - &.marks-after {slider{ border-radius: 5px 100% 100% 5px;}} - &.marks-before {slider{ border-radius: 100% 5px 5px 100%;}} + &.marks-after {slider{ border-radius: 5px 100% 100% 5px; min-height: 10px;padding: 0;margin-top: 5px; margin-bottom:5px;}} + &.marks-before {slider{ border-radius: 100% 5px 5px 100%; min-height: 10px;padding: 0;margin-top: 5px; margin-bottom:5px;}} } // Old warning to help locate where this madness used to be. I've used a much saner approach to marked sliders, IMHO, without assets. @@ -3354,53 +3356,7 @@ scale { } } - &.fine-tune { - &.horizontal { - &:dir(ltr), &:dir(rtl) { // specificity bump - padding: 0 0 12px 0; - - trough { - padding-bottom: 7px; - background-position: 0 -6px; - } - - slider { - margin-bottom: -15px; - margin-top: 6px; - } - } - } - - &.vertical { - &:dir(ltr) { - padding: 0 0 0 12px; - - trough { - padding-left: 7px; - background-position: 6px 0; - } - - slider { - margin-left: -15px; - margin-right: 6px; - } - } - - &:dir(rtl) { - padding: 0 12px 0 0; - - trough { - padding-right: 7px; - background-position: -6px 0; - } - - slider { - margin-right: -15px; - margin-left: 6px; - } - } - } - } + //removed fine-tune bit } } @@ -4110,14 +4066,14 @@ tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. - background-color: transparentize($hint_bg, 0.2); + background-color: transparentize($hint_bg, 0.1); background-clip: padding-box; border: 1px solid $tooltip_borders_color; // this suble border is meant to // not make the tooltip melt with // very dark backgrounds } - padding: 4px; /* not working */ + //padding: 4px; /* not working */ border-radius: 5px; //box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: none; @@ -4126,7 +4082,7 @@ tooltip { decoration { background-color: transparent; } * { // Yeah this is ugly - padding: 4px; + //padding: 4px; background-color: transparent; color: $hint_fg; } @@ -4357,7 +4313,7 @@ decoration { .tiled-left & { border-radius: 0; box-shadow: 0 0 0 1px $_wm_border_backdrop, - 0 2px 6px 2px transparentize(black, 0.8), + 0 2px 6px 2px transparentize(black, 0.3), 0 0 0 20px transparent; //transparent control workaround -- #3670 &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop, @@ -4381,7 +4337,7 @@ decoration { tooltip.csd & { border-radius: 5px; - box-shadow: none; + box-shadow: 0 3px 4px transparentize(black, 0.3); //none; } messagedialog.csd & { @@ -4396,9 +4352,9 @@ decoration { background-color: $borders_color; border: solid 1px $borders_color; border-radius: 0; - box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight, 0 1px 5px transparentize(black, 0.8); + box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight, 0 3px 5px transparentize(black, 0.3); - &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight, 0 1px 5px transparentize(black, 0.8); } + &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight, 0 3px 5px transparentize(black, 0.3); } } } @@ -4448,36 +4404,8 @@ headerbar.selection-mode button.titlebutton, * Touch Copy & Paste * *********************/ //touch selection handlebars for the Popover.osd above -cursor-handle { - background-color: transparent; - background-image: none; - box-shadow: none; - border-style: none; - @each $s,$as in ('',''), - (':hover','-hover'), - (':active','-active') { //no need for insensitive and backdrop - &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { - $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - padding-left: 10px; - } - - &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { - $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - padding-right: 10px; - } - - &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { - $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - } - } -} +@import '../common/cursor-handle.scss'; .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview diff --git a/source/gtk3/gtk-new.css b/source/gtk3/gtk-new.css index c4d55f9..93b7c2f 100644 --- a/source/gtk3/gtk-new.css +++ b/source/gtk3/gtk-new.css @@ -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; } diff --git a/source/gtk4/_common.scss b/source/gtk4/_common.scss index 993f76b..b1d47ef 100644 --- a/source/gtk4/_common.scss +++ b/source/gtk4/_common.scss @@ -2622,36 +2622,31 @@ scale { > fill, > highlight { margin: -1px; } - // the slider is inside the trough, so to have make it bigger there's a negative margin + - > slider { - min-height: 18px; - min-width: 18px; - margin: -9px; - } } // click-and-hold the slider to activate &.fine-tune { - &.horizontal { - padding-top: 9px; - padding-bottom: 9px; - min-height: 16px; - } + //&.horizontal { + // padding-top: 9px; + // padding-bottom: 9px; + // min-height: 16px; + //} - &.vertical { - padding-left: 9px; - padding-right: 9px; - min-width: 16px; - } + //&.vertical { + // padding-left: 9px; + // padding-right: 9px; + // min-width: 16px; + //} - // to make the trough grow in fine-tune mode - > trough > slider { margin: -6px; } + // to make the trough grow in fine-tune mode //no longer, just background change + > trough > slider {&, &:active, &:hover, &:focus { background-color: $hint_bg;}} //margin: -6px; } > trough > fill, > trough > highlight, > trough { - border-radius: 5px; + //border-radius: 5px; } } @@ -2685,7 +2680,10 @@ scale { } } - > trough > slider { + > trough > slider, %slider { + min-height: 18px; + min-width: 18px; + margin: -9px; // the slider is inside the trough, so to have make it bigger there's a negative margin @include button(normal); border-width: 1px; border-style: solid; @@ -2746,14 +2744,14 @@ scale { > value.left { margin-right: 9px; } > value.right { margin-left: 9px; } - &.fine-tune >marks { - &.top { margin-top: 3px; } - &.bottom { margin-bottom: 3px; } + //&.fine-tune >marks { + // &.top { margin-top: 3px; } + // &.bottom { margin-bottom: 3px; } - indicator { min-height: ($_marks_length - 3px); } - } - &.marks-after {slider{ border-radius: 5px 5px 100% 100%;}} - &.marks-before {slider{ border-radius: 100% 100% 5px 5px;}} + // indicator { min-height: ($_marks_length - 3px); } + //} + &.marks-after {slider{ border-radius: 5px 5px 100% 100%;min-width: 10px; padding: 0; margin-right: 5px; margin-left:5px;}} + &.marks-before {slider{ border-radius: 100% 100% 5px 5px;min-width: 10px; padding: 0; margin-right: 5px; margin-left:5px;}} } @@ -2773,14 +2771,14 @@ scale { > value.top { margin-bottom: 9px; } > value.bottom { margin-top: 9px; } - &.fine-tune >marks { - &.top { margin-left: 3px; } - &.bottom { margin-right: 3px; } + //&.fine-tune >marks { + // &.top { margin-left: 3px; } + // &.bottom { margin-right: 3px; } - indicator { min-height: ($_marks_length - 3px); } - } - &.marks-after {slider{ border-radius: 5px 100% 100% 5px;}} - &.marks-before {slider{ border-radius: 100% 5px 5px 100%;}} + // indicator { min-height: ($_marks_length - 3px); } + // } + &.marks-after {slider{ border-radius: 5px 100% 100% 5px;min-height: 10px;padding: 0;margin-top: 54px; margin-bottom:5px;}} + &.marks-before {slider{ border-radius: 100% 5px 5px 100%;min-height: 10px;padding: 0;margin-top: 5px; margin-bottom:5px;}} } // *WARNING* scale with marks madness following @@ -2854,53 +2852,7 @@ scale { } } - &.fine-tune { - &.horizontal { - &:dir(ltr), &:dir(rtl) { // specificity bump - padding: 0 0 12px 0; - - > trough { - padding-bottom: 7px; - background-position: 0 -6px; - } - - > trough > slider { - margin-bottom: -15px; - margin-top: 6px; - } - } - } - - &.vertical { - &:dir(ltr) { - padding: 0 0 0 12px; - - > trough { - padding-left: 7px; - background-position: 6px 0; - } - - > trough > slider { - margin-left: -15px; - margin-right: 6px; - } - } - - &:dir(rtl) { - padding: 0 12px 0 0; - - > trough { - padding-right: 7px; - background-position: -6px 0; - } - - > trough > slider { - margin-right: -15px; - margin-left: 6px; - } - } - } - } + //removed fine-tune bit } } @@ -3671,7 +3623,7 @@ tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. - background-color: transparentize($hint_bg, 0.2); + background-color: transparentize($hint_bg, 0.1); background-clip: padding-box; border: 1px solid $tooltip_borders_color; // this subtle border is meant to // not make the tooltip melt with @@ -3681,7 +3633,7 @@ tooltip { padding: 6px 10px; border-radius: $window_radius; - box-shadow: none; // otherwise it gets inherited by windowframe.csd + //box-shadow: none; // otherwise it gets inherited by windowframe.csd > box { border-spacing: 6px; @@ -3924,9 +3876,9 @@ window { padding: 4px; border: solid 1px $borders_color; border-radius: 0; - box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight, 0 1px 5px transparentize(black, 0.8); + box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight, 0 3px 5px transparentize(black, 0.3); - &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight, 0 1px 5px transparentize(black, 0.8); } + &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight, 0 3px 5px transparentize(black, 0.3); } } &.maximized, @@ -3939,7 +3891,7 @@ window { &.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px $_wm_border, - 0 2px 6px 2px transparentize(black, 0.8), + 0 2px 6px 2px transparentize(black, 0.3), 0 0 0 20px transparent; //transparent control workaround -- #3670 &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop, @@ -3952,12 +3904,13 @@ window { // server-side decorations as used by mutter &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows + } tooltip.csd { border-radius: 5px; - box-shadow: none; + box-shadow: 0 3px 4px transparentize(black, 0.3); //none; } // catch all extend :) @@ -3971,40 +3924,8 @@ tooltip.csd { * Touch Copy & Paste * *********************/ //touch selection handlebars for the Popover.osd above -cursor-handle { - background-color: transparent; - background-image: none; - box-shadow: none; - border-style: none; - min-width: 20px; - min-height: 24px; - padding-left: 20px; - padding-right: 20px; - padding-top: 24px; - padding-bottom: 24px; - @each $s,$as in ('',''), - (':hover','-hover'), - (':active','-active') { //no need for insensitive and backdrop - &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { - $_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - } - - &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { - $_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - } - - &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { - $_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; - -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - } - } -} +@import '../common/cursor-handle.scss'; shortcuts-section { margin: 20px; diff --git a/source/gtk4/gtk-new.css b/source/gtk4/gtk-new.css index e451a74..3e5d9a0 100644 --- a/source/gtk4/gtk-new.css +++ b/source/gtk4/gtk-new.css @@ -1024,15 +1024,7 @@ scale > trough { transition: outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, scale > trough > fill, scale > trough > highlight { margin: -1px; } -scale > trough > 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 > trough > slider { margin: -6px; } - -scale.fine-tune > trough > fill, scale.fine-tune > trough > highlight, scale.fine-tune > trough { border-radius: 5px; } +scale.fine-tune > trough > slider, scale.fine-tune > trough > slider:active, scale.fine-tune > trough > slider:hover, scale.fine-tune > trough > slider:focus { background-color: #6789b4; } scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } @@ -1040,7 +1032,7 @@ scale > trough > fill:disabled { border-color: transparent; background-color: tr .osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } -scale > trough > 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 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } +scale > trough > 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 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } scale > trough > slider:hover { background-color: shade(#bcbeb9, 1.1); } @@ -1072,15 +1064,9 @@ scale.horizontal > value.left { margin-right: 9px; } scale.horizontal > value.right { margin-left: 9px; } -scale.horizontal.fine-tune > marks.top { margin-top: 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.fine-tune > marks.bottom { margin-bottom: 3px; } - -scale.horizontal.fine-tune > marks indicator { min-height: 3px; } - -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 > marks { color: alpha(currentColor,0.55); } @@ -1094,15 +1080,9 @@ scale.vertical > value.top { margin-bottom: 9px; } scale.vertical > value.bottom { margin-top: 9px; } -scale.vertical.fine-tune > marks.top { margin-left: 3px; } +scale.vertical.marks-after slider { border-radius: 5px 100% 100% 5px; min-height: 10px; padding: 0; margin-top: 54px; margin-bottom: 5px; } -scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } - -scale.vertical.fine-tune > marks indicator { min-height: 3px; } - -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; } @@ -1126,24 +1106,6 @@ scale.color.vertical:dir(rtl) > trough { padding-right: 4px; background-position scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > 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) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > 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) > trough > 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) > trough > slider { margin-right: -15px; margin-left: 6px; } - /***************** Progress bars * */ progressbar { font-size: smaller; color: rgba(36, 31, 49, 0.4); font-feature-settings: "tnum"; } @@ -1483,9 +1445,9 @@ video { background: black; } video image.osd { min-width: 64px; min-height: 64px; border-radius: 32px; } /************ Tooltips * */ -tooltip { padding: 6px 10px; border-radius: 8px; box-shadow: none; } +tooltip { padding: 6px 10px; border-radius: 8px; } -tooltip.background { background-color: rgba(103, 137, 180, 0.8); background-clip: padding-box; border: 1px solid #002269; color: #002269; } +tooltip.background { background-color: rgba(103, 137, 180, 0.9); background-clip: padding-box; border: 1px solid #002269; color: #002269; } tooltip > box { border-spacing: 6px; } @@ -1584,13 +1546,13 @@ window.csd.popup { border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), window.csd.dialog.message { border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } -window.solid-csd { margin: 0; padding: 4px; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); } +window.solid-csd { margin: 0; padding: 4px; border: solid 1px #797979; border-radius: 0; box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #b4b4b4, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); } -window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 5px rgba(0, 0, 0, 0.2); } +window.solid-csd:backdrop { box-shadow: inset 0 0 0 4px #797979, inset 0 0 0 3px #a7a7a7, inset 0 1px rgba(255, 255, 255, 0.8), 0 3px 5px rgba(0, 0, 0, 0.7); } window.maximized, window.fullscreen { border-radius: 0; box-shadow: none; } -window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23), 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 20px transparent; } +window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23), 0 2px 6px 2px rgba(0, 0, 0, 0.7), 0 0 0 20px transparent; } window.tiled:backdrop, window.tiled-top:backdrop, window.tiled-left:backdrop, window.tiled-right:backdrop, window.tiled-bottom: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; } @@ -1598,30 +1560,23 @@ window.popup { box-shadow: none; } window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } -tooltip.csd { border-radius: 5px; box-shadow: none; } +tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); } .monospace { font-family: monospace; } /********************** Touch Copy & Paste * */ -cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; min-width: 20px; min-height: 24px; padding-left: 20px; padding-right: 20px; padding-top: 24px; padding-bottom: 24px; } +/********************** 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")); } +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")); } +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")); } +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")); } - -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")); } - -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")); } - -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; } shortcuts-section { margin: 20px; }