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.

Rate this Entry

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)

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:

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;
}

Copy-and-pasted "tweaks" to a GTK3 port of the "Mist" theme

Comments