From eaa903c48953ca38cf937825b2c1e35402a931f1 Mon Sep 17 00:00:00 2001 From: He4eT Date: Sun, 11 Aug 2024 15:53:26 +0200 Subject: [PATCH] general: switches and sliders --- general/dark.css | 2 +- general/widgets.css | 98 ++++++++++++++++++++++++++++----------------- 2 files changed, 62 insertions(+), 38 deletions(-) diff --git a/general/dark.css b/general/dark.css index 083c8fd..f9bfbbc 100644 --- a/general/dark.css +++ b/general/dark.css @@ -58,7 +58,7 @@ levelbar block, scale highlight, button.suggested-action, button.destructive-action { - background-clip: border-box; + background-clip: padding-box; } .window-frame, .window-frame:backdrop { diff --git a/general/widgets.css b/general/widgets.css index 5a2caf9..402040d 100644 --- a/general/widgets.css +++ b/general/widgets.css @@ -130,8 +130,10 @@ scale trough, levelbar trough, /* menu, */ /* .menu, */ -editablelabel > stack > text -{ border-width: 1px; border-style: solid; } /* widget borders */ +editablelabel > stack > text { + border-width: 1px; + border-style: solid; +} /* widget borders */ scale:hover slider, scale.marks-after slider:hover, @@ -181,8 +183,9 @@ levelbar block.high, scale highlight, switch, switch slider, -menu -{border-color: @gtk_transparent_borders;} +menu { + border-color: @gtk_transparent_borders; +} /* use this if gtk4 doesnt respond to the background-clip of widgets */ @@ -194,8 +197,9 @@ progress trough, scale highlight, scale trough, levelbar trough, -levelbar block -{box-shadow: inset 0 0 0 1px alpha(black,0.01);} +levelbar block { + box-shadow: inset 0 0 0 1px alpha(black,0.01); +} button, .inline-toolbar button.flat, @@ -216,8 +220,7 @@ switch slider, progressbar progress, levelbar block:not(.empty), levelbar block.high, -scale highlight -, +scale highlight, /**/ spinbutton:not(.vertical), spinbutton.vertical, @@ -231,8 +234,8 @@ iconview.content-view.check:not(list), .view check:not(:checked):selected, .view radio:not(:checked):selected , check.view:not(treeview):not(:checked):selected, -radio.view:not(treeview):not(:checked):selected -, +radio.view:not(treeview):not(:checked):selected, +/**/ button:checked, .titlebar .linked button:not(.suggested-action):not(.destructive-action):checked, .titlebar button:not(.suggested-action):not(.destructive-action).text-button:checked, @@ -485,16 +488,21 @@ headerbar.toolbar button:not(.suggested-action):not(.destructive-action).text-b button, .inline-toolbar button.flat, -.inline-toolbar button -{background-color: @gtk_button_color;} +.inline-toolbar button { + background-color: @gtk_button_color; +} .osd spinbutton:not(.vertical) button, .osd spinbutton:not(.vertical) entry, spinbutton:not(.vertical) button, spinbutton:not(.vertical) entry, spinbutton.vertical button, -spinbutton.vertical entry -{background-color: transparent; border: none; box-shadow: none; background-image: none;} +spinbutton.vertical entry { + background-color: transparent; + border: none; + box-shadow: none; + background-image: none; +} /* TitleButton */ @@ -598,8 +606,9 @@ spinbutton.vertical button:hover, calendar header button:hover, .osd button.flat:hover, .sidebar actionbar.inline-toolbar button:hover, -actionbar.flat button:hover -{background-color: alpha(@gtk_selected_bg_color, 0.4);} +actionbar.flat button:hover { + background-color: alpha(@gtk_selected_bg_color, 0.4); +} /* Checked State */ @@ -650,8 +659,9 @@ calendar header button:checked, .sidebar actionbar.inline-toolbar button:checked, actionbar.flat button:checked, headerbar.toolbar .linked button:not(.suggested-action):not(.destructive-action):checked, -headerbar.toolbar button:not(.suggested-action):not(.destructive-action).text-button:checked -{background-image: image(alpha(@gtk_selected_bg_color,0.60));} +headerbar.toolbar button:not(.suggested-action):not(.destructive-action).text-button:checked { + background-image: image(alpha(@gtk_selected_bg_color,0.60)); +} /* Disabled State */ button:disabled, @@ -911,8 +921,10 @@ treeview.view radio:checked, treeview.view radio:indeterminate, treeview.view.content-view.check:not(list):checked, iconview.content-view.check:not(list):checked, -.content-view:not(list) check:checked -{color: @gtk_selected_fg_color; background-color: shade(@gtk_selected_bg_color,1.9);} +.content-view:not(list) check:checked { + /* color: @gtk_selected_fg_color; */ + /* border-color: @gtk_transparent_borders; */ +} /* Sizes of check and radio */ check, @@ -1029,42 +1041,55 @@ scale trough, levelbar trough, levelbar block{border-color: @gtk_transparent_borders;} -progressbar progress, -scale highlight{margin: -1px;} +/* progressbar progress, */ +/* scale highlight{margin: -1px;} */ switch:checked, progressbar progress, levelbar block:not(.empty), levelbar block.high, -scale highlight -{color: @gtk_selected_fg_color; background-color: @gtk_selected_bg_color;} +scale highlight { + color: @gtk_selected_fg_color; + background-color: @gtk_selected_bg_color; +} switch image, switch image:backdrop, .titlebar switch image, .titlebar switch image:backdrop, switch:disabled image, -.titlebar switch image:disabled {color:transparent;} +.titlebar switch image:disabled { + color:transparent; +} -switch, -switch slider{border-radius: 0.0px;} +switch, switch slider{border-radius: 0.0px;} -switch{color: currentcolor; background-color: shade(@gtk_bg_color, 0.8);} +switch{ + color: currentcolor; + background-color: @gtk_bg_color; +} switch slider { - margin: -1px; - background-color: mix(@gtk_bg_color, @gtk_fg_color, 0.1); - min-height: 22px; - min-width: 22px; + min-height: 20px; + min-width: 20px; + border-width: 2px; + background-color: @gtk_button_color; + border-color: @gtk_selected_bg_color; } switch:disabled, switch slider:disabled, -switch slider:checked:disabled { background-color: alpha(currentcolor,1.15); box-shadow: none; background: none;} +switch slider:checked:disabled { + box-shadow: none; + background: none; + border-color: @gtk_transparent_borders; +} switch:checked:disabled, scale highlight:disabled, -scale > highlight:disabled{ background-color: alpha(@gtk_selected_bg_color,0.5);} +scale > highlight:disabled{ + background-color: alpha(@gtk_selected_bg_color,0.5); +} /* Scale slider */ @@ -1073,12 +1098,12 @@ scale trough{ } scale slider{ - background-color: shade(@gtk_selected_bg_color,1.2); box-shadow: none; border-radius: 0.0px; - border-width: 1px; + border-width: inherit; border-style: solid; border-color: @gtk_selected_bg_color; + background-color: @gtk_button_color; } scale.horizontal slider{ padding: 11px 5px; margin: -10px 0;} @@ -1087,7 +1112,6 @@ scale.vertical slider{ padding: 5px 11px; margin: 0 -10px;} scale:hover slider, scale.marks-after slider, scale.marks-before slider{ - background-color: shade(@gtk_selected_bg_color, 1.5); border-color: @gtk_selected_bg_color; }