Skip to content

Instantly share code, notes, and snippets.

@Nielson3

Nielson3/gtk.css

Created September 13, 2025 13:21
Show Gist options
  • Save Nielson3/2af990584edab01aa91c5fc8760b57f8 to your computer and use it in GitHub Desktop.
Save Nielson3/2af990584edab01aa91c5fc8760b57f8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Nielson3 created this gist Sep 13, 2025.
    186 changes: 186 additions & 0 deletions gtk.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,186 @@
    /*************
    * Notebooks *
    *************/

    tabbox > tab, notebook > header tab {
    min-height: 24px;
    min-width: 24px;
    padding: 6px 12px;
    border: 0;
    outline: none;
    background-clip: padding-box;
    background-color: rgba(255, 255, 255, 0.1);;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    border-radius: 12px;
    }

    tabbox > tab:hover, notebook > header tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    }

    tabbox > tab:disabled, notebook > header tab:disabled {
    color: rgba(255, 255, 255, 0.32);
    }

    tabbox > tab:checked, notebook > header tab:checked {

    background-color: rgba(238, 98, 98, 0.7);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid white;
    }

    tabbox > tab:checked:disabled, notebook > header tab:checked:disabled {
    color: rgba(255, 255, 255, 0.5);
    }

    notebook {
    background-color: rgb(33,33,33);
    }

    frame > paned > notebook > header, notebook.frame > header {
    background-color: rgba(255, 255, 255, 0.04);
    }

    notebook.frame {
    border-radius: 12px;
    }

    notebook.frame scrolledwindow.frame {
    border: none;
    }

    notebook.frame frame > border {
    border: none;
    border-radius: 6px;
    }

    notebook.frame frame > list row.activatable {
    border-radius: 6px;
    }

    notebook > header {
    border: none;
    background-color: rgba(255, 255, 255, 0.04);
    padding: 3px;
    margin: 3px;
    border-radius: 9px;
    }

    notebook > header.top > tabs > arrow {
    border-top-style: none;
    }

    notebook > header.bottom > tabs > arrow {
    border-bottom-style: none;
    }

    notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
    padding-left: 4px;
    padding-right: 4px;
    }

    notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
    margin-left: 0;
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
    }

    notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
    margin-right: 0;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    }

    notebook > header.left > tabs > arrow {
    border-left-style: none;
    }

    notebook > header.right > tabs > arrow {
    border-right-style: none;
    }

    notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
    padding-top: 4px;
    padding-bottom: 4px;
    }

    notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
    margin-top: 0;
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
    }

    notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
    margin-bottom: 0;
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    }

    notebook > header > tabs > arrow {
    min-height: 16px;
    min-width: 16px;
    border-radius: 9px;
    }

    notebook > header tab > box {
    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
    margin: -6px -12px;
    padding: 6px 12px;
    }

    notebook > header tab > box:drop(active) {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    }

    notebook > header tab button.flat:last-child, notebook > header tab button.close-button:last-child {
    margin-left: 6px;
    margin-right: -6px;
    }

    notebook > header tab button.flat:first-child, notebook > header tab button.close-button:first-child {
    margin-left: -6px;
    margin-right: 6px;
    }

    notebook > header.top tabs > tab + tab, notebook > header.bottom tabs > tab + tab {
    margin-left: 3px;
    }

    notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
    margin-left: 0;
    }

    notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
    margin-right: 0;
    }

    notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
    border-style: solid;
    }

    notebook > header.left tabs > tab + tab, notebook > header.right tabs > tab + tab {
    margin-top: 3px;
    }

    notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
    margin-top: 0;
    }

    notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
    margin-bottom: 0;
    }

    notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
    border-style: solid;
    }

    notebook > header > button.image-button {
    min-height: 24px;
    min-width: 24px;
    padding: 3px;
    }

    notebook > stack:not(:only-child) {
    background-color: transparent;
    border-radius: 6px;
    }