Created
September 13, 2025 13:21
-
-
Save Nielson3/2af990584edab01aa91c5fc8760b57f8 to your computer and use it in GitHub Desktop.
red and underlined tabs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /************* | |
| * 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment