Fixed selection issues in gtk4
This commit is contained in:
parent
bf3b706b8a
commit
af59429282
|
@ -36,7 +36,7 @@ Big previews:
|
||||||
|
|
||||||
![gtk3 widget page 2](previews/gtk3wf-2.png)
|
![gtk3 widget page 2](previews/gtk3wf-2.png)
|
||||||
|
|
||||||
![gtk3 widget page 3](previews/gtk3wf-3.png)
|
![gtk3 widget page 3](previews/gtk4wf-3.png)
|
||||||
|
|
||||||
![gtk2 preview](previews/gtk2.png)
|
![gtk2 preview](previews/gtk2.png)
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { background-color: #669900; }
|
calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
.selection-mode button.titlebutton, label:selected, calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { color: #d1ff96; }
|
.selection-mode button.titlebutton, label:selected, calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #9ccc4b; }
|
label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #9ccc4b; }
|
||||||
|
|
||||||
|
.selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: #d1ff96; background-color: #669900; }
|
||||||
|
|
||||||
* { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #CC0000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 0px; -gtk-secondary-caret-color: #669900; }
|
* { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #CC0000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 0px; -gtk-secondary-caret-color: #669900; }
|
||||||
|
|
||||||
/*************** Base States * */
|
/*************** Base States * */
|
||||||
|
|
|
@ -8,12 +8,14 @@ $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));*/
|
||||||
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
|
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
|
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #9ccc4b; }
|
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #9ccc4b; }
|
||||||
|
|
||||||
|
label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: #d1ff96; background-color: #669900; }
|
||||||
|
|
||||||
/*************** Base States * */
|
/*************** Base States * */
|
||||||
.background { color: #EDF0F5; background-color: #3f3e3e; }
|
.background { color: #EDF0F5; background-color: #3f3e3e; }
|
||||||
|
|
||||||
|
@ -33,9 +35,9 @@ image:disabled { -gtk-icon-filter: opacity(0.5); }
|
||||||
|
|
||||||
textview > text { background-color: transparent; }
|
textview > text { background-color: transparent; }
|
||||||
|
|
||||||
textview > text > selection { background-color: #669900; }
|
textview > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
textview > text > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); }
|
textview > text > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
textview:drop(active) { caret-color: #33d17a; }
|
textview:drop(active) { caret-color: #33d17a; }
|
||||||
|
|
||||||
|
@ -81,7 +83,7 @@ label:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.5); outline-width
|
||||||
|
|
||||||
label > selection { background-color: #669900; color: #d1ff96; }
|
label > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); }
|
label > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled { color: #7c675a; }
|
label:disabled { color: #7c675a; }
|
||||||
|
|
||||||
|
@ -156,6 +158,8 @@ spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:d
|
||||||
|
|
||||||
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: #669900; color: #d1ff96; }
|
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
|
spinbutton.vertical > text > text > selection:focus-within, spinbutton:not(.vertical) > text > selection:focus-within, entry > text > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #CC0000; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #CC0000; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
||||||
|
|
||||||
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; }
|
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; }
|
||||||
|
@ -250,8 +254,6 @@ row:selected button { border-color: #334d00; }
|
||||||
|
|
||||||
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #d1ff96; border-color: transparent; }
|
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #d1ff96; border-color: transparent; }
|
||||||
|
|
||||||
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #323232; }
|
|
||||||
|
|
||||||
button.osd { min-width: 26px; min-height: 32px; color: #66cbec; border-radius: 5px; border-width: 2px; color: #66cbec; background-color: #203d79; border-left-color: #305cb6; border-top-color: #305cb6; border-right-color: #152951; border-bottom-color: #152951; box-shadow: none; }
|
button.osd { min-width: 26px; min-height: 32px; color: #66cbec; border-radius: 5px; border-width: 2px; color: #66cbec; background-color: #203d79; border-left-color: #305cb6; border-top-color: #305cb6; border-right-color: #152951; border-bottom-color: #152951; box-shadow: none; }
|
||||||
|
|
||||||
button.osd.image-button { min-width: 30px; }
|
button.osd.image-button { min-width: 30px; }
|
||||||
|
@ -338,7 +340,7 @@ button.font > box { border-spacing: 6px; }
|
||||||
|
|
||||||
button.font > box > box > label { font-weight: bold; }
|
button.font > box > box > label { font-weight: bold; }
|
||||||
|
|
||||||
menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9999px; }
|
menubutton.circular button, button.circular { min-width: 1.6em; min-height: 1.6em; padding: 0; border-radius: 9999px; }
|
||||||
|
|
||||||
menubutton.circular button label, button.circular label { padding: 0; }
|
menubutton.circular button label, button.circular label { padding: 0; }
|
||||||
|
|
||||||
|
@ -444,9 +446,7 @@ spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none;
|
||||||
|
|
||||||
spinbutton.vertical > text { min-height: 1.6em; min-width: 1.6em; padding: 0; border-radius: 0; }
|
spinbutton.vertical > text { min-height: 1.6em; min-width: 1.6em; padding: 0; border-radius: 0; }
|
||||||
|
|
||||||
spinbutton.vertical > text > selection { background-color: #669900; color: transparent; }
|
spinbutton.vertical > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
spinbutton.vertical > text > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); color: #d1ff96; }
|
|
||||||
|
|
||||||
spinbutton.vertical > text > block-cursor { color: #323232; background-color: #EDF0F5; }
|
spinbutton.vertical > text > block-cursor { color: #323232; background-color: #EDF0F5; }
|
||||||
|
|
||||||
|
@ -1220,9 +1220,9 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { ou
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #669900; }
|
columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #669900; }
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: #669900; color: transparent; }
|
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: rgba(102, 153, 0, 0.3); color: #EDF0F5; }
|
columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
/******************************************************* Rich Lists * Large list usually containing lots of widgets * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * */
|
/******************************************************* Rich Lists * Large list usually containing lots of widgets * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * */
|
||||||
.rich-list { /* rich lists usually containing other widgets than just labels/text */ }
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */ }
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 390 KiB |
Binary file not shown.
After Width: | Height: | Size: 103 KiB |
|
@ -38,7 +38,7 @@ $popover_radius: $window_radius;
|
||||||
|
|
||||||
%selected_items {
|
%selected_items {
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
@at-root %nobg_selected_items, & {
|
@at-root %nobg_selected_items, & {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
|
|
||||||
|
@ -46,9 +46,11 @@ $popover_radius: $window_radius;
|
||||||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||||
|
|
||||||
@at-root %selected_items_backdrop,
|
@at-root %selected_items_backdrop,
|
||||||
&:backdrop { //Simplewaita does not like backdrop changes except for headerbar and window decoration
|
&:backdrop {
|
||||||
//color: $backdrop_selected_fg_color;
|
//Simplewaita does not like backdrop changes except for headerbar and window decoration
|
||||||
//background-color: $backdrop_selected_bg_color;
|
//however, some problems may arise if this is not applied.
|
||||||
|
color: $selected_fg_color;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
|
||||||
//&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
//&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { background-color: #669900; }
|
calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
.selection-mode button.titlebutton, label:selected, calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { color: #d1ff96; }
|
.selection-mode button.titlebutton, label:selected, calendar:selected, row:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, .menuitem.button.flat:selected, spinbutton:not(.vertical) selection, entry selection, flowbox flowboxchild:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview text:selected { color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #9ccc4b; }
|
label:disabled selection, .selection-mode button.titlebutton:disabled, label:disabled:selected, calendar:disabled:selected, row:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, flowbox flowboxchild:disabled:selected, .view text selection:disabled, iconview text selection:disabled, textview text selection:disabled:focus, textview text selection:disabled, .view:disabled:selected, iconview:disabled:selected, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected { color: #9ccc4b; }
|
||||||
|
|
||||||
|
.selection-mode button.titlebutton:backdrop, label:backdrop:selected, calendar:backdrop:selected, row:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, flowbox flowboxchild:backdrop:selected, .view text selection:backdrop, iconview text selection:backdrop, textview text selection:backdrop:focus, textview text selection:backdrop, .view:backdrop:selected, iconview:backdrop:selected, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected { color: #d1ff96; background-color: #669900; }
|
||||||
|
|
||||||
* { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #CC0000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 0px; -gtk-secondary-caret-color: #669900; }
|
* { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #CC0000; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 0px; -gtk-secondary-caret-color: #669900; }
|
||||||
|
|
||||||
/*************** Base States * */
|
/*************** Base States * */
|
||||||
|
|
|
@ -61,10 +61,12 @@ textview {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
> selection {
|
> selection {
|
||||||
background-color: $backdrop_selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
background-color: $selected_text_bg_color;
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -152,10 +154,11 @@ label {
|
||||||
&:selected { @extend %nobg_selected_items; }
|
&:selected { @extend %nobg_selected_items; }
|
||||||
|
|
||||||
> selection {
|
> selection {
|
||||||
background-color: $backdrop_selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
background-color: $selected_text_bg_color;
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -326,8 +329,8 @@ entry {
|
||||||
background-color: $selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
//background-color: $selected_text_bg_color;
|
background-color: $selected_bg_color;
|
||||||
//color: $fg_color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -547,7 +550,7 @@ button {
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
||||||
&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
|
//&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -706,8 +709,8 @@ button {
|
||||||
|
|
||||||
menubutton.circular &,
|
menubutton.circular &,
|
||||||
&.circular { // force circular button shape
|
&.circular { // force circular button shape
|
||||||
min-width: 32px;
|
min-width: $button_min_height;
|
||||||
min-height: 32px;
|
min-height: $button_min_height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
@ -1074,12 +1077,12 @@ spinbutton {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
> selection {
|
> selection {
|
||||||
background-color: $backdrop_selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: transparent;
|
color: $selected_fg_color;
|
||||||
&:focus-within {
|
//&:focus-within {
|
||||||
background-color: $selected_text_bg_color;
|
// background-color: $selected_text_bg_color;
|
||||||
color: $selected_fg_color;
|
// color: $selected_fg_color;
|
||||||
}
|
//}
|
||||||
}
|
}
|
||||||
> block-cursor { @include entry(block_cursor); }
|
> block-cursor { @include entry(block_cursor); }
|
||||||
}
|
}
|
||||||
|
@ -2837,11 +2840,11 @@ columnview row:not(:selected) cell editablelabel.editing:focus-within {
|
||||||
}
|
}
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing text selection {
|
columnview row:not(:selected) cell editablelabel.editing text selection {
|
||||||
background-color: $backdrop_selected_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: transparent;
|
color: $selected_fg_color;
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
background-color: $selected_text_bg_color;
|
background-color: $selected_bg_color;
|
||||||
color: $fg_color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,12 +8,14 @@ $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));*/
|
||||||
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
/*************************** Check and Radio buttons * */
|
/*************************** Check and Radio buttons * */
|
||||||
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
|
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
|
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #9ccc4b; }
|
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #9ccc4b; }
|
||||||
|
|
||||||
|
label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: #d1ff96; background-color: #669900; }
|
||||||
|
|
||||||
/*************** Base States * */
|
/*************** Base States * */
|
||||||
.background { color: #EDF0F5; background-color: #3f3e3e; }
|
.background { color: #EDF0F5; background-color: #3f3e3e; }
|
||||||
|
|
||||||
|
@ -33,9 +35,9 @@ image:disabled { -gtk-icon-filter: opacity(0.5); }
|
||||||
|
|
||||||
textview > text { background-color: transparent; }
|
textview > text { background-color: transparent; }
|
||||||
|
|
||||||
textview > text > selection { background-color: #669900; }
|
textview > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
textview > text > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); }
|
textview > text > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
textview:drop(active) { caret-color: #33d17a; }
|
textview:drop(active) { caret-color: #33d17a; }
|
||||||
|
|
||||||
|
@ -81,7 +83,7 @@ label:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.5); outline-width
|
||||||
|
|
||||||
label > selection { background-color: #669900; color: #d1ff96; }
|
label > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); }
|
label > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
label:disabled { color: #7c675a; }
|
label:disabled { color: #7c675a; }
|
||||||
|
|
||||||
|
@ -156,6 +158,8 @@ spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:d
|
||||||
|
|
||||||
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: #669900; color: #d1ff96; }
|
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
|
spinbutton.vertical > text > text > selection:focus-within, spinbutton:not(.vertical) > text > selection:focus-within, entry > text > selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #CC0000; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #CC0000; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
||||||
|
|
||||||
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; }
|
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; }
|
||||||
|
@ -250,8 +254,6 @@ row:selected button { border-color: #334d00; }
|
||||||
|
|
||||||
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #d1ff96; border-color: transparent; }
|
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #d1ff96; border-color: transparent; }
|
||||||
|
|
||||||
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #323232; }
|
|
||||||
|
|
||||||
button.osd { min-width: 26px; min-height: 32px; color: #66cbec; border-radius: 5px; border-width: 2px; color: #66cbec; background-color: #203d79; border-left-color: #305cb6; border-top-color: #305cb6; border-right-color: #152951; border-bottom-color: #152951; box-shadow: none; }
|
button.osd { min-width: 26px; min-height: 32px; color: #66cbec; border-radius: 5px; border-width: 2px; color: #66cbec; background-color: #203d79; border-left-color: #305cb6; border-top-color: #305cb6; border-right-color: #152951; border-bottom-color: #152951; box-shadow: none; }
|
||||||
|
|
||||||
button.osd.image-button { min-width: 30px; }
|
button.osd.image-button { min-width: 30px; }
|
||||||
|
@ -338,7 +340,7 @@ button.font > box { border-spacing: 6px; }
|
||||||
|
|
||||||
button.font > box > box > label { font-weight: bold; }
|
button.font > box > box > label { font-weight: bold; }
|
||||||
|
|
||||||
menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9999px; }
|
menubutton.circular button, button.circular { min-width: 1.6em; min-height: 1.6em; padding: 0; border-radius: 9999px; }
|
||||||
|
|
||||||
menubutton.circular button label, button.circular label { padding: 0; }
|
menubutton.circular button label, button.circular label { padding: 0; }
|
||||||
|
|
||||||
|
@ -444,9 +446,7 @@ spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none;
|
||||||
|
|
||||||
spinbutton.vertical > text { min-height: 1.6em; min-width: 1.6em; padding: 0; border-radius: 0; }
|
spinbutton.vertical > text { min-height: 1.6em; min-width: 1.6em; padding: 0; border-radius: 0; }
|
||||||
|
|
||||||
spinbutton.vertical > text > selection { background-color: #669900; color: transparent; }
|
spinbutton.vertical > text > selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
spinbutton.vertical > text > selection:focus-within { background-color: rgba(102, 153, 0, 0.3); color: #d1ff96; }
|
|
||||||
|
|
||||||
spinbutton.vertical > text > block-cursor { color: #323232; background-color: #EDF0F5; }
|
spinbutton.vertical > text > block-cursor { color: #323232; background-color: #EDF0F5; }
|
||||||
|
|
||||||
|
@ -1220,9 +1220,9 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { ou
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #669900; }
|
columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #669900; }
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: #669900; color: transparent; }
|
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: rgba(102, 153, 0, 0.3); color: #EDF0F5; }
|
columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: #669900; color: #d1ff96; }
|
||||||
|
|
||||||
/******************************************************* Rich Lists * Large list usually containing lots of widgets * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * */
|
/******************************************************* Rich Lists * Large list usually containing lots of widgets * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * */
|
||||||
.rich-list { /* rich lists usually containing other widgets than just labels/text */ }
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */ }
|
||||||
|
|
Reference in New Issue