Just annotations of little "how to's", so I know I can find how to do something I've already done when I need to do it again, in case I don't remember anymore, which is not unlikely. Hopefully they can be useful to others, but I can't guarantee that it will work, or that it won't even make things worse.
Copy-and-pasted "tweaks" to a GTK3 port of the "Mist" theme
Posted 07-13-2017 at 01:20 PM by the dsc
Updated 08-18-2019 at 04:17 AM by the dsc (code is closed with /code not /quote)
Updated 08-18-2019 at 04:17 AM by the dsc (code is closed with /code not /quote)
Nothing fancy, just some boxes and arrow(s) that were missing. I believe the port was this one:
https://github.com/mkoskar/gtk-theme-mist
The copy and pasted things were bits from the Albatross theme
https://www.gnome-look.org/content/s...content=123952
https://github.com/shimmerproject/Albatross
(Alongside with its "assets" folder linked within Mist's)
Both are GPL so I guess that's not illegal or anything...
So, I just copied these bits from Albatross' gtk-contained.css and added to Mist's widgets.css:
The effect it has is that some checkboxes are now visible even when they're not ticked, and there's also a dropdown menu arrow, I have in mind specifically those you click to drop down a "history" of text fields, that is now visible. Before that there was no icon and the button itself had only two pixels or so, I guess.
I'm not a GTK theme technician of any sort, or even someone who really understands much of css, that's essentially a frankensteinian butcher job. Perhaps a "flatter " icon set would go better with Mist, but it's quite a hassle to test GTK3 themes, for me at least, without Gnome3, so, that will do it for now.
I'm sorry if it sucks.
I wish I could figure out how to change the fore and background color of selected texts in "entry" fields. As it is now, it's barely noticeable.
Another update (2019, August 18): selected/checked buttons are highlighted in blue, it makes it far more visible than the "3d" bevel thing being absent or whatever minimal shading difference there was.
https://github.com/mkoskar/gtk-theme-mist
The copy and pasted things were bits from the Albatross theme
https://www.gnome-look.org/content/s...content=123952
https://github.com/shimmerproject/Albatross
(Alongside with its "assets" folder linked within Mist's)
Both are GPL so I guess that's not illegal or anything...
So, I just copied these bits from Albatross' gtk-contained.css and added to Mist's widgets.css:
Code:
/**********************************************/ /************************* * Check and Radio items * *************************/ check, treeview.check { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png")); } .osd check { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-dark.png"), url("assets/checkbox-unchecked-dark@2.png")); } .view check:selected, iconview check:selected, .nautilus-window notebook check:selected, .nautilus-window notebook > stack:not(:only-child) searchbar check:selected, .nemo-window notebook check:selected, treeview.check:selected, row:selected check, infobar check { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-unchecked.png"), url("assets/selected-checkbox-unchecked@2.png")); } check:hover, treeview.check:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png")); } .osd check:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-hover-dark.png"), url("assets/checkbox-unchecked-hover-dark@2.png")); } .view check:hover:selected, iconview check:hover:selected, .nautilus-window notebook check:hover:selected, .nemo-window notebook check:hover:selected, treeview.check:hover:selected, row:selected check:hover, infobar check:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-unchecked-hover.png"), url("assets/selected-checkbox-unchecked-hover@2.png")); } check:disabled, treeview.check:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-insensitive.png"), url("assets/checkbox-unchecked-insensitive@2.png")); } .osd check:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark.png"), url("assets/checkbox-unchecked-insensitive-dark@2.png")); } .view check:disabled:selected, iconview check:disabled:selected, .nautilus-window notebook check:disabled:selected, .nemo-window notebook check:disabled:selected, treeview.check:disabled:selected, row:selected check:disabled, infobar check:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-unchecked-insensitive.png"), url("assets/selected-checkbox-unchecked-insensitive@2.png")); } check:indeterminate, treeview.check:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png")); } .osd check:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-dark.png"), url("assets/checkbox-mixed-dark@2.png")); } .view check:indeterminate:selected, iconview check:indeterminate:selected, .nautilus-window notebook check:indeterminate:selected, .nemo-window notebook check:indeterminate:selected, treeview.check:indeterminate:selected, row:selected check:indeterminate, infobar check:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-mixed.png"), url("assets/selected-checkbox-mixed@2.png")); } check:indeterminate:hover, treeview.check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png")); } .osd check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-hover-dark.png"), url("assets/checkbox-mixed-hover-dark@2.png")); } .view check:indeterminate:hover:selected, iconview check:indeterminate:hover:selected, .nautilus-window notebook check:indeterminate:hover:selected, .nemo-window notebook check:indeterminate:hover:selected, treeview.check:indeterminate:hover:selected, row:selected check:indeterminate:hover, infobar check:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-mixed-hover.png"), url("assets/selected-checkbox-mixed-hover@2.png")); } check:indeterminate:disabled, treeview.check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-insensitive.png"), url("assets/checkbox-mixed-insensitive@2.png")); } .osd check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-mixed-insensitive-dark.png"), url("assets/checkbox-mixed-insensitive-dark@2.png")); } .view check:indeterminate:disabled:selected, iconview check:indeterminate:disabled:selected, .nautilus-window notebook check:indeterminate:disabled:selected, .nemo-window notebook check:indeterminate:disabled:selected, treeview.check:indeterminate:disabled:selected, row:selected check:indeterminate:disabled, infobar check:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-mixed-insensitive.png"), url("assets/selected-checkbox-mixed-insensitive@2.png")); } check:checked, treeview.check:checked { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png")); } .osd check:checked { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-dark.png"), url("assets/checkbox-checked-dark@2.png")); } .view check:checked:selected, iconview check:checked:selected, .nautilus-window notebook check:checked:selected, .nemo-window notebook check:checked:selected, treeview.check:checked:selected, row:selected check:checked, infobar check:checked { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-checked.png"), url("assets/selected-checkbox-checked@2.png")); } check:checked:hover, treeview.check:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png")); } .osd check:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-hover-dark.png"), url("assets/checkbox-checked-hover-dark@2.png")); } .view check:checked:hover:selected, iconview check:checked:hover:selected, .nautilus-window notebook check:checked:hover:selected, .nemo-window notebook check:checked:hover:selected, treeview.check:checked:hover:selected, row:selected check:checked:hover, infobar check:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-checked-hover.png"), url("assets/selected-checkbox-checked-hover@2.png")); } check:checked:disabled, treeview.check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive.png"), url("assets/checkbox-checked-insensitive@2.png")); } .osd check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-insensitive-dark.png"), url("assets/checkbox-checked-insensitive-dark@2.png")); } .view check:checked:disabled:selected, iconview check:checked:disabled:selected, .nautilus-window notebook check:checked:disabled:selected, .nemo-window notebook check:checked:disabled:selected, treeview.check:checked:disabled:selected, row:selected check:checked:disabled, infobar check:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-checkbox-checked-insensitive.png"), url("assets/selected-checkbox-checked-insensitive@2.png")); } radio, treeview.radio { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png")); } .osd radio { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-dark.png"), url("assets/radio-unchecked-dark@2.png")); } .view radio:selected, iconview radio:selected, .nautilus-window notebook radio:selected, .nautilus-window notebook > stack:not(:only-child) searchbar radio:selected, .nemo-window notebook radio:selected, treeview.radio:selected, row:selected radio, infobar radio { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-unchecked.png"), url("assets/selected-radio-unchecked@2.png")); } radio:hover, treeview.radio:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png")); } .osd radio:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-hover-dark.png"), url("assets/radio-unchecked-hover-dark@2.png")); } .view radio:hover:selected, iconview radio:hover:selected, .nautilus-window notebook radio:hover:selected, .nemo-window notebook radio:hover:selected, treeview.radio:hover:selected, row:selected radio:hover, infobar radio:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-unchecked-hover.png"), url("assets/selected-radio-unchecked-hover@2.png")); } radio:disabled, treeview.radio:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-insensitive.png"), url("assets/radio-unchecked-insensitive@2.png")); } .osd radio:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark.png"), url("assets/radio-unchecked-insensitive-dark@2.png")); } .view radio:disabled:selected, iconview radio:disabled:selected, .nautilus-window notebook radio:disabled:selected, .nemo-window notebook radio:disabled:selected, treeview.radio:disabled:selected, row:selected radio:disabled, infobar radio:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-unchecked-insensitive.png"), url("assets/selected-radio-unchecked-insensitive@2.png")); } radio:indeterminate, treeview.radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png")); } .osd radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-dark.png"), url("assets/radio-mixed-dark@2.png")); } .view radio:indeterminate:selected, iconview radio:indeterminate:selected, .nautilus-window notebook radio:indeterminate:selected, .nemo-window notebook radio:indeterminate:selected, treeview.radio:indeterminate:selected, row:selected radio:indeterminate, infobar radio:indeterminate { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-mixed.png"), url("assets/selected-radio-mixed@2.png")); } radio:indeterminate:hover, treeview.radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png")); } .osd radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-hover-dark.png"), url("assets/radio-mixed-hover-dark@2.png")); } .view radio:indeterminate:hover:selected, iconview radio:indeterminate:hover:selected, .nautilus-window notebook radio:indeterminate:hover:selected, .nemo-window notebook radio:indeterminate:hover:selected, treeview.radio:indeterminate:hover:selected, row:selected radio:indeterminate:hover, infobar radio:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-mixed-hover.png"), url("assets/selected-radio-mixed-hover@2.png")); } radio:indeterminate:disabled, treeview.radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-insensitive.png"), url("assets/radio-mixed-insensitive@2.png")); } .osd radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-mixed-insensitive-dark.png"), url("assets/radio-mixed-insensitive-dark@2.png")); } .view radio:indeterminate:disabled:selected, iconview radio:indeterminate:disabled:selected, .nautilus-window notebook radio:indeterminate:disabled:selected, .nemo-window notebook radio:indeterminate:disabled:selected, treeview.radio:indeterminate:disabled:selected, row:selected radio:indeterminate:disabled, infobar radio:indeterminate:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-mixed-insensitive.png"), url("assets/selected-radio-mixed-insensitive@2.png")); } radio:checked, treeview.radio:checked { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png")); } .osd radio:checked { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-dark.png"), url("assets/radio-checked-dark@2.png")); } .view radio:checked:selected, iconview radio:checked:selected, .nautilus-window notebook radio:checked:selected, .nemo-window notebook radio:checked:selected, treeview.radio:checked:selected, row:selected radio:checked, infobar radio:checked { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-checked.png"), url("assets/selected-radio-checked@2.png")); } radio:checked:hover, treeview.radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png")); } .osd radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-hover-dark.png"), url("assets/radio-checked-hover-dark@2.png")); } .view radio:checked:hover:selected, iconview radio:checked:hover:selected, .nautilus-window notebook radio:checked:hover:selected, .nemo-window notebook radio:checked:hover:selected, treeview.radio:checked:hover:selected, row:selected radio:checked:hover, infobar radio:checked:hover { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-checked-hover.png"), url("assets/selected-radio-checked-hover@2.png")); } radio:checked:disabled, treeview.radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive.png"), url("assets/radio-checked-insensitive@2.png")); } .osd radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/radio-checked-insensitive-dark.png"), url("assets/radio-checked-insensitive-dark@2.png")); } .view radio:checked:disabled:selected, iconview radio:checked:disabled:selected, .nautilus-window notebook radio:checked:disabled:selected, .nemo-window notebook radio:checked:disabled:selected, treeview.radio:checked:disabled:selected, row:selected radio:checked:disabled, infobar radio:checked:disabled { -gtk-icon-source: -gtk-scaled(url("assets/selected-radio-checked-insensitive.png"), url("assets/selected-radio-checked-insensitive@2.png")); } .view.content-view.check:not(list), iconview.content-view.check:not(list), .nautilus-window notebook.content-view.check:not(list), .nautilus-window notebook > stack:not(:only-child) searchbar.content-view.check:not(list), .nemo-window notebook.content-view.check:not(list) { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode.png"), url("assets/checkbox-selectionmode@2.png")); background-color: transparent; } .view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list), .nautilus-window notebook.content-view.check:checked:not(list), .nautilus-window notebook > stack:not(:only-child) searchbar.content-view.check:checked:not(list), .nemo-window notebook.content-view.check:checked:not(list) { -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode.png"), url("assets/checkbox-checked-selectionmode@2.png")); background-color: transparent; } checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; } checkbutton label:not(:only-child):first-child, radiobutton label:not(:only-child):first-child { margin-left: 4px; } checkbutton label:not(:only-child):last-child, radiobutton label:not(:only-child):last-child { margin-right: 4px; } check, radio { min-width: 16px; min-height: 16px; margin: 0 2px; } check:only-child, menu menuitem check, radio:only-child, menu menuitem radio { margin: 0; } combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; }
The effect it has is that some checkboxes are now visible even when they're not ticked, and there's also a dropdown menu arrow, I have in mind specifically those you click to drop down a "history" of text fields, that is now visible. Before that there was no icon and the button itself had only two pixels or so, I guess.
I'm not a GTK theme technician of any sort, or even someone who really understands much of css, that's essentially a frankensteinian butcher job. Perhaps a "flatter " icon set would go better with Mist, but it's quite a hassle to test GTK3 themes, for me at least, without Gnome3, so, that will do it for now.
I'm sorry if it sucks.
I wish I could figure out how to change the fore and background color of selected texts in "entry" fields. As it is now, it's barely noticeable.
Another update (2019, August 18): selected/checked buttons are highlighted in blue, it makes it far more visible than the "3d" bevel thing being absent or whatever minimal shading difference there was.
Code:
button:checked { background-color: #5f8fc2; }
Total Comments 0