├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── question.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── cascade-ctp-frappe.webp ├── cascade-ctp-latte.webp ├── cascade-ctp-macchiato.webp ├── cascade-ctp-mocha.webp ├── cascade-ctp.webp ├── cascade-icon.png ├── cascade-rosepine.webp ├── cascade-tcr.webp ├── cascade-toolbar-bottom.webp ├── cascade-toolbar-top.webp ├── cascade-urlbar-right.webp ├── cascade-urlbar.webp ├── embed.png ├── preview.png └── preview.webp ├── chrome ├── includes │ ├── cascade-colours.css │ ├── cascade-config-mouse.css │ ├── cascade-config.css │ ├── cascade-floating-panel.css │ ├── cascade-layout.css │ ├── cascade-nav-bar.css │ ├── cascade-responsive-windows-fix.css │ ├── cascade-responsive.css │ └── cascade-tabs.css └── userChrome.css ├── code_of_conduct.md ├── contributing.md └── integrations ├── ayu └── ayu.css ├── catppuccin ├── cascade-frappe.css ├── cascade-macchiato.css └── cascade-mocha.css ├── gruvbox └── gruvbox.css ├── nord └── nord.css ├── rose-pine ├── cascade-moon.css └── cascade-rose-pine.css ├── side-view └── cascade-sideview.css └── tabcenter-reborn ├── cascade-tcr.css └── tabcenter-reborn.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: bug 6 | --- 7 | 8 | **Describe the bug** 9 | A clear and concise description of what the bug is. 10 | 11 | **Expected behavior** 12 | A clear and concise description of what you expected to happen. 13 | 14 | **Screenshots** (optional) 15 | If applicable, add screenshots to help explain your problem. 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: enhancement 6 | --- 7 | 8 | **Describe the solution you'd like** 9 | A clear and concise description of what you want to happen. 10 | 11 | **Is your feature request related to a problem? Please describe.** 12 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Support 3 | about: Ask for support; General Questions 4 | title: "" 5 | labels: support 6 | --- 7 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Fixes #ISSUE 2 | 3 | ## Proposed Changes 4 | 5 | - 6 | - 7 | - 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | assets/preview.afphoto 2 | assets/catppuccin.afphoto 3 | assets/rosepine.afphoto 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Andreas Grafen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Cascade 4 | 5 | **A minimalistic and keyboard centered userChrome** 6 | 7 | ![Cascade Preview](assets/preview.webp) 8 | 9 | Cascade aims to remove a lot of the subjective clutter default Firefox comes with. The theme is also highly inspired by the stylistic choices of [SimpleFox](https://github.com/migueravila/SimpleFox) 🦊 by [Miguel Ávila](https://github.com/migueravila). 10 | 11 |
12 | 13 |
14 | 15 | Install 19 | 20 | Stargazers 24 | 25 | Repo Size 29 | 30 | Issues 34 |
35 | 36 |
37 | 38 | --- 39 | 40 | ### Documentation 41 | 42 | **[Installation](https://cascadefox.github.io/installation.html) • [Customisation](https://cascadefox.github.io/customisation.html) • [Integrations](https://cascadefox.github.io/integrations.html) • [Keyboard Shortcuts](https://cascadefox.github.io/shortcuts.html)** 43 | 44 |
45 | -------------------------------------------------------------------------------- /assets/cascade-ctp-frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-ctp-frappe.webp -------------------------------------------------------------------------------- /assets/cascade-ctp-latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-ctp-latte.webp -------------------------------------------------------------------------------- /assets/cascade-ctp-macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-ctp-macchiato.webp -------------------------------------------------------------------------------- /assets/cascade-ctp-mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-ctp-mocha.webp -------------------------------------------------------------------------------- /assets/cascade-ctp.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-ctp.webp -------------------------------------------------------------------------------- /assets/cascade-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-icon.png -------------------------------------------------------------------------------- /assets/cascade-rosepine.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-rosepine.webp -------------------------------------------------------------------------------- /assets/cascade-tcr.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-tcr.webp -------------------------------------------------------------------------------- /assets/cascade-toolbar-bottom.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-toolbar-bottom.webp -------------------------------------------------------------------------------- /assets/cascade-toolbar-top.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-toolbar-top.webp -------------------------------------------------------------------------------- /assets/cascade-urlbar-right.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-urlbar-right.webp -------------------------------------------------------------------------------- /assets/cascade-urlbar.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/cascade-urlbar.webp -------------------------------------------------------------------------------- /assets/embed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/embed.png -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/preview.png -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cascadefox/cascade/f8c6bb5a36f24aba61995204ff5497c865e78e50/assets/preview.webp -------------------------------------------------------------------------------- /chrome/includes/cascade-colours.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #7ed6df; 10 | --uc-identity-colour-turquoise: #55e6c1; 11 | --uc-identity-colour-green: #b8e994; 12 | --uc-identity-colour-yellow: #f7d794; 13 | --uc-identity-colour-orange: #f19066; 14 | --uc-identity-colour-red: #fc5c65; 15 | --uc-identity-colour-pink: #f78fb3; 16 | --uc-identity-colour-purple: #786fa6; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #1e2021; 20 | --uc-highlight-colour: #191b1c; 21 | --uc-inverted-colour: #fafafc; 22 | --uc-muted-colour: #aaaaac; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #1d65f5; 32 | --uc-identity-colour-turquoise: #209fb5; 33 | --uc-identity-colour-green: #40a02b; 34 | --uc-identity-colour-yellow: #e49320; 35 | --uc-identity-colour-orange: #fe640b; 36 | --uc-identity-colour-red: #fc5c65; 37 | --uc-identity-colour-pink: #ec83d0; 38 | --uc-identity-colour-purple: #822fee; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #fafafc; 42 | --uc-highlight-colour: #dadadc; 43 | --uc-inverted-colour: #1e2021; 44 | --uc-muted-colour: #191b1c; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /chrome/includes/cascade-config-mouse.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+ 2 | | G | L | O | B | A | L | 3 | +---+---+---+---+---+---*/ 4 | 5 | :root { 6 | /* Global Border Radius 7 | * applied to ALL UI elements 8 | */ 9 | --uc-border-radius: 8px; 10 | 11 | /* The distance the Statuspanel floats 12 | * away from the window border 13 | * 0 places directly in the corner 14 | */ 15 | --uc-status-panel-spacing: 12px; 16 | 17 | /* Top margin for the Page Action Buttons 18 | * inside the URL Bar. This might need 19 | * customisation depending on yout setup! 20 | */ 21 | --uc-page-action-margin: 7px; 22 | } 23 | 24 | /* remove window control buttons */ 25 | .titlebar-buttonbox-container { 26 | display: none !important; 27 | } 28 | 29 | #pageActionButton { 30 | display: none !important; 31 | } 32 | 33 | /*---+---+---+---+---+---+---+ 34 | | T | O | O | L | B | A | R | 35 | +---+---+---+---+---+---+---*/ 36 | 37 | /* Position of the Personal Toolbar 38 | * possible values: 39 | * 0 – toolbar on top 40 | * 4 – toolbar on bottom 41 | */ 42 | :root { 43 | --uc-toolbar-position: 4; 44 | } 45 | 46 | /* Darken the Personal Toolbar by X amount 47 | * where X = 1 means pure black 48 | * and X = 0 means no darkening at all 49 | */ 50 | @media (prefers-color-scheme: dark) { 51 | :root { 52 | --uc-darken-toolbar: 0.2; 53 | } 54 | } 55 | @media (prefers-color-scheme: light) { 56 | :root { 57 | --uc-darken-toolbar: 0; 58 | } 59 | } 60 | 61 | /*---+---+---+---+---+---+---+ 62 | | U | R | L | — | B | A | R | 63 | +---+---+---+---+---+---+---*/ 64 | 65 | :root { 66 | /* Width of the URL Bar for the Oneline layout 67 | * If enabled the max-width is applied on focus 68 | * otherwise the URL Bar will always be it's min-width 69 | */ 70 | --uc-urlbar-min-width: 35vw; 71 | --uc-urlbar-max-width: 35vw; 72 | 73 | /* Position of the URL Bar 74 | * possible values: 75 | * 1 – tabs on the right 76 | * 3 – tabs on the left 77 | */ 78 | --uc-urlbar-position: 1; 79 | } 80 | 81 | /* Disable the Navigation Buttons */ 82 | /* #back-button, 83 | #forward-button { display: none !important; } */ 84 | 85 | /* Disables the Tracking Protection Shield */ 86 | /* #tracking-protection-icon-container { display: none !important; } */ 87 | 88 | /* Encryption and Permissions icons */ 89 | /* Only hides permission items */ 90 | #identity-permission-box { 91 | display: none !important; 92 | } 93 | /* Hides extension page box */ 94 | #identity-box.extensionPage { 95 | display: none !important; 96 | } 97 | /* Hides encryption AND permission items */ 98 | /* #identity-box { display: none !important } */ 99 | 100 | /* Adjust margin of the urlbar buttons. */ 101 | .urlbar-page-action > image { 102 | margin-top: var(--uc-page-action-margin) !important; 103 | } 104 | 105 | /* Hide Container Tab labels inside the URL bar */ 106 | #userContext-icons { 107 | display: none !important; 108 | } 109 | 110 | /* Hide the »Go«-arrow in the URL Bar */ 111 | #urlbar-go-button { 112 | display: none !important; 113 | } 114 | 115 | /* Hides the Extensions Menu Icon */ 116 | /* #unified-extensions-button { display: none !important; } */ 117 | 118 | #alltabs-button { 119 | margin-top: 5px !important; 120 | } 121 | 122 | /*---+---+---+---+---+---+---+ 123 | | T | A | B | — | B | A | R | 124 | +---+---+---+---+---+---+---*/ 125 | 126 | :root { 127 | /* Allow tabs to have dynamic widths based on 128 | * the Tab Bars maximum width 129 | */ 130 | --uc-active-tab-width: clamp(100px, 30vw, 300px); 131 | --uc-inactive-tab-width: clamp(100px, 20vw, 200px); 132 | 133 | /* Enable this to always show the Tab Close button 134 | * possible values: 135 | * show: -moz-inline-block 136 | * hide: none 137 | */ 138 | --show-tab-close-button: none; 139 | 140 | /* Enable this to only show the Tab Close button on tab hover 141 | * possible values: 142 | * show: -moz-inline-block 143 | * hide: none 144 | */ 145 | --show-tab-close-button-hover: -moz-inline-block; 146 | 147 | /* Left and Right "dip" of the container indicator 148 | * 0px equals tab width 149 | * higer values make the indicator smaller 150 | */ 151 | --container-tabs-indicator-margin: 10px; 152 | 153 | /* Amount of Glow to add to the container indicator 154 | * Setting it to 0 disables the Glow 155 | */ 156 | --uc-identity-glow: 0 1px 10px 1px; 157 | } 158 | 159 | /* Hide the secondary Tab Label 160 | * e.g. playing indicator (the text, not the icon) */ 161 | .tab-secondary-label { 162 | display: none !important; 163 | } 164 | -------------------------------------------------------------------------------- /chrome/includes/cascade-config.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+ 2 | | G | L | O | B | A | L | 3 | +---+---+---+---+---+---*/ 4 | 5 | :root { 6 | /* Global Border Radius 7 | * applied to ALL UI elements 8 | */ 9 | --uc-border-radius: 8px; 10 | 11 | /* The distance the Statuspanel floats 12 | * away from the window border 13 | * 0 places directly in the corner 14 | */ 15 | --uc-status-panel-spacing: 12px; 16 | } 17 | 18 | /* remove window control buttons */ 19 | .titlebar-buttonbox-container { 20 | display: none !important; 21 | } 22 | 23 | #pageActionButton { 24 | display: none !important; 25 | } 26 | 27 | #PanelUI-menu-button { 28 | padding: 0px !important; 29 | } 30 | #PanelUI-menu-button .toolbarbutton-icon { 31 | width: 1px !important; 32 | } 33 | #PanelUI-menu-button .toolbarbutton-badge-stack { 34 | padding: 0px !important; 35 | } 36 | 37 | /*---+---+---+---+---+---+---+ 38 | | T | O | O | L | B | A | R | 39 | +---+---+---+---+---+---+---*/ 40 | 41 | /* Position of the Personal Toolbar 42 | * possible values: 43 | * 0 – toolbar on top 44 | * 4 – toolbar on bottom 45 | */ 46 | :root { 47 | --uc-toolbar-position: 4; 48 | } 49 | 50 | /* Darken the Personal Toolbar by X amount 51 | * where X = 1 means pure black 52 | * and X = 0 means no darkening at all 53 | */ 54 | @media (prefers-color-scheme: dark) { 55 | :root { 56 | --uc-darken-toolbar: 0.2; 57 | } 58 | } 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | --uc-darken-toolbar: 0; 62 | } 63 | } 64 | 65 | /*---+---+---+---+---+---+---+ 66 | | U | R | L | — | B | A | R | 67 | +---+---+---+---+---+---+---*/ 68 | 69 | :root { 70 | /* Width of the URL Bar for the Oneline layout 71 | * If enabled the max-width is applied on focus 72 | * otherwise the URL Bar will always be it's min-width 73 | */ 74 | --uc-urlbar-min-width: 35vw; 75 | --uc-urlbar-max-width: 35vw; 76 | 77 | /* Position of the URL Bar 78 | * possible values: 79 | * 1 – tabs on the right 80 | * 3 – tabs on the left 81 | */ 82 | --uc-urlbar-position: 1; 83 | 84 | /* Firefox can be a little wonky with the vertical 85 | * URL Bar placement. Change this variable to adapt 86 | * to this when necessary. 87 | */ 88 | --uc-urlbar-top-spacing: 1px; 89 | } 90 | 91 | /* Disable the Navigation Buttons */ 92 | #back-button, 93 | #forward-button { 94 | display: none !important; 95 | } 96 | 97 | /* Disables the Tracking Protection Shield */ 98 | /* #tracking-protection-icon-container { display: none !important; } */ 99 | 100 | /* Encryption and Permissions icons */ 101 | /* Only hides permission items */ 102 | #identity-permission-box { 103 | display: none !important; 104 | } 105 | /* Hides extension page box */ 106 | #identity-box.extensionPage { 107 | display: none !important; 108 | } 109 | /* Hides encryption AND permission items */ 110 | /* #identity-box { display: none !important } */ 111 | 112 | /* Hide everything BUT the zoom indicator within the URL Bar */ 113 | /* #page-action-buttons > :not(#urlbar-zoom-button) { display: none !important; } */ 114 | 115 | /* Hide the »Go«-arrow in the URL Bar */ 116 | #urlbar-go-button { 117 | display: none !important; 118 | } 119 | 120 | /* Hides the Extensions Menu Icon */ 121 | /* #unified-extensions-button { display: none !important; } */ 122 | 123 | /*---+---+---+---+---+---+---+ 124 | | T | A | B | — | B | A | R | 125 | +---+---+---+---+---+---+---*/ 126 | 127 | :root { 128 | /* Allow tabs to have dynamic widths based on 129 | * the Tab Bars maximum width 130 | */ 131 | --uc-active-tab-width: clamp(100px, 30vw, 300px); 132 | --uc-inactive-tab-width: clamp(100px, 20vw, 200px); 133 | 134 | /* Enable this to always show the Tab Close button 135 | * possible values: 136 | * show: -moz-inline-block 137 | * hide: none 138 | */ 139 | --show-tab-close-button: none; 140 | 141 | /* Enable this to only show the Tab Close button on tab hover 142 | * possible values: 143 | * show: -moz-inline-block 144 | * hide: none 145 | */ 146 | --show-tab-close-button-hover: none; 147 | 148 | /* Hide the all Tabs button from the Tab Bar 149 | * possible values: 150 | * show: -moz-box 151 | * hide: none 152 | */ 153 | --uc-show-all-tabs-button: none; 154 | 155 | /* Left and Right "dip" of the container indicator 156 | * 0px equals tab width 157 | * higer values make the indicator smaller 158 | */ 159 | --container-tabs-indicator-margin: 10px; 160 | 161 | /* Amount of Glow to add to the container indicator 162 | * Setting it to 0 disables the Glow 163 | */ 164 | --uc-identity-glow: 0 1px 10px 1px; 165 | } 166 | 167 | /* Hide the secondary Tab Label 168 | * e.g. playing indicator (the text, not the icon) */ 169 | .tab-secondary-label { 170 | display: none !important; 171 | } 172 | -------------------------------------------------------------------------------- /chrome/includes/cascade-floating-panel.css: -------------------------------------------------------------------------------- 1 | #statuspanel #statuspanel-label { 2 | margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important; 3 | } 4 | -------------------------------------------------------------------------------- /chrome/includes/cascade-layout.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --toolbarbutton-border-radius: var(--uc-border-radius) !important; 3 | --tab-border-radius: var(--uc-border-radius) !important; 4 | --arrowpanel-border-radius: var(--uc-border-radius) !important; 5 | } 6 | 7 | #toolbar-menubar { 8 | &[autohide="true"] { 9 | &[inactive]:not([customizing]) { 10 | width: 0px; 11 | } 12 | } 13 | } 14 | 15 | #main-window, 16 | #toolbar-menubar, 17 | #TabsToolbar, 18 | #navigator-toolbox, 19 | #sidebar-box, 20 | #nav-bar { 21 | box-shadow: none !important; 22 | } 23 | 24 | #main-window, 25 | #toolbar-menubar, 26 | #TabsToolbar, 27 | #PersonalToolbar, 28 | #navigator-toolbox, 29 | #sidebar-box, 30 | #nav-bar { 31 | border: none !important; 32 | } 33 | 34 | /* remove "padding" left and right from tabs */ 35 | .titlebar-spacer { 36 | display: none !important; 37 | } 38 | 39 | /* fix Shield Icon padding */ 40 | #urlbar-input-container[pageproxystate="valid"] 41 | > #tracking-protection-icon-container 42 | > #tracking-protection-icon-box 43 | > #tracking-protection-icon { 44 | padding-bottom: 1px; 45 | } 46 | 47 | #TabsToolbar { 48 | order: 2; 49 | } 50 | #nav-bar { 51 | order: 3; 52 | } 53 | 54 | #PersonalToolbar { 55 | padding: 6px !important; 56 | box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important; 57 | order: var(--uc-toolbar-position); 58 | width: 100%; 59 | } 60 | 61 | #statuspanel #statuspanel-label { 62 | border: none !important; 63 | border-radius: var(--uc-border-radius) !important; 64 | } 65 | -------------------------------------------------------------------------------- /chrome/includes/cascade-nav-bar.css: -------------------------------------------------------------------------------- 1 | #navigator-toolbox:not(:-moz-lwtheme) { 2 | background: var(--toolbar-field-background-color) !important; 3 | } 4 | 5 | #nav-bar { 6 | padding-block-start: 0px !important; 7 | 8 | border: none !important; 9 | box-shadow: none !important; 10 | background: transparent !important; 11 | } 12 | 13 | #urlbar, 14 | #urlbar * { 15 | outline: none !important; 16 | box-shadow: none !important; 17 | } 18 | 19 | #urlbar-background { 20 | border: transparent !important; 21 | } 22 | 23 | #urlbar[focused="true"] > #urlbar-background, 24 | #urlbar:not([open]) > #urlbar-background { 25 | background: var(--toolbar-field-background-color) !important; 26 | } 27 | 28 | #urlbar[open] > #urlbar-background { 29 | background: var(--toolbar-field-background-color) !important; 30 | } 31 | 32 | .urlbarView-row:hover > .urlbarView-row-inner, 33 | .urlbarView-row[selected] > .urlbarView-row-inner { 34 | background: var(--toolbar-field-focus-background-color) !important; 35 | } 36 | 37 | .urlbar-icon, 38 | #urlbar-go-button { 39 | margin: auto; 40 | } 41 | .urlbar-page-action { 42 | padding: 0 inherit !important; 43 | } 44 | -------------------------------------------------------------------------------- /chrome/includes/cascade-responsive-windows-fix.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1000px) { 2 | #nav-bar { 3 | margin: calc((var(--urlbar-min-height) * -1) - 12px) 4 | calc(100vw - var(--uc-urlbar-min-width)) 0 0 !important; 5 | } 6 | #titlebar { 7 | margin-inline-start: var(--uc-urlbar-min-width) !important; 8 | } 9 | 10 | #navigator-toolbox:focus-within #nav-bar { 11 | margin: calc((var(--urlbar-min-height) * -1) - 12px) 12 | calc(100vw - var(--uc-urlbar-max-width)) 0 0 !important; 13 | } 14 | #navigator-toolbox:focus-within #titlebar { 15 | margin-inline-start: var(--uc-urlbar-max-width) !important; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /chrome/includes/cascade-responsive.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1000px) { 2 | #navigator-toolbox { 3 | display: flex; 4 | flex-wrap: wrap; 5 | flex-direction: row; 6 | } 7 | 8 | #nav-bar { 9 | order: var(--uc-urlbar-position); 10 | width: var(--uc-urlbar-min-width); 11 | } 12 | 13 | #nav-bar #urlbar-container { 14 | min-width: 0px !important; 15 | width: auto !important; 16 | } 17 | 18 | #TabsToolbar { 19 | width: calc(100vw - var(--uc-urlbar-min-width) - 1px); 20 | } 21 | 22 | #navigator-toolbox:focus-within #nav-bar { 23 | width: var(--uc-urlbar-max-width); 24 | } 25 | #navigator-toolbox:focus-within #titlebar { 26 | width: calc(100vw - var(--uc-urlbar-max-width) - 1px); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /chrome/includes/cascade-tabs.css: -------------------------------------------------------------------------------- 1 | /* remove gap after pinned tabs */ 2 | #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) 3 | > #tabbrowser-arrowscrollbox 4 | > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 5 | margin-inline-start: 0 !important; 6 | } 7 | 8 | /* Hides the list-all-tabs button*/ 9 | #alltabs-button { 10 | display: var(--uc-show-all-tabs-button) !important; 11 | } 12 | 13 | /* remove tab shadow */ 14 | .tabbrowser-tab > .tab-stack > .tab-background { 15 | box-shadow: none !important; 16 | } 17 | 18 | /* multi tab selection */ 19 | #tabbrowser-tabs:not([noshadowfortests]) 20 | .tabbrowser-tab:is([multiselected]) 21 | > .tab-stack 22 | > .tab-background:-moz-lwtheme { 23 | outline-color: var(--toolbarseparator-color) !important; 24 | } 25 | 26 | /* tab close button options */ 27 | .tabbrowser-tab:not([pinned]) .tab-close-button { 28 | display: var(--show-tab-close-button) !important; 29 | } 30 | .tabbrowser-tab:not([pinned]):hover .tab-close-button { 31 | display: var(--show-tab-close-button-hover) !important; 32 | } 33 | 34 | /* adaptive tab width */ 35 | .tabbrowser-tab[selected][fadein]:not([pinned]) { 36 | max-width: var(--uc-active-tab-width) !important; 37 | } 38 | .tabbrowser-tab[fadein]:not([selected]):not([pinned]) { 39 | max-width: var(--uc-inactive-tab-width) !important; 40 | } 41 | 42 | /* container tabs indicator */ 43 | .tabbrowser-tab[usercontextid] 44 | > .tab-stack 45 | > .tab-background 46 | > .tab-context-line { 47 | margin: -1px var(--container-tabs-indicator-margin) 0 48 | var(--container-tabs-indicator-margin) !important; 49 | height: 1px !important; 50 | 51 | box-shadow: var(--uc-identity-glow) var(--identity-tab-color) !important; 52 | } 53 | 54 | /* show favicon when media is playing but tab is hovered */ 55 | .tab-icon-image:not([pinned]) { 56 | opacity: 1 !important; 57 | } 58 | 59 | /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ 60 | .tab-icon-overlay:not([crashed]), 61 | .tab-icon-overlay[pinned][crashed][selected] { 62 | top: 5px !important; 63 | z-index: 1 !important; 64 | 65 | padding: 1.5px !important; 66 | inset-inline-end: -8px !important; 67 | width: 16px !important; 68 | height: 16px !important; 69 | 70 | border-radius: 10px !important; 71 | } 72 | 73 | /* style and position speaker icon */ 74 | .tab-icon-overlay:not([sharing], [crashed]):is( 75 | [soundplaying], 76 | [muted], 77 | [activemedia-blocked] 78 | ) { 79 | stroke: transparent !important; 80 | background: transparent !important; 81 | opacity: 1 !important; 82 | fill-opacity: 0.8 !important; 83 | 84 | color: currentColor !important; 85 | 86 | stroke: var(--toolbar-bgcolor) !important; 87 | background-color: var(--toolbar-bgcolor) !important; 88 | } 89 | 90 | /* change the colours of the speaker icon on active tab to match tab colours */ 91 | .tabbrowser-tab[selected] 92 | .tab-icon-overlay:not([sharing], [crashed]):is( 93 | [soundplaying], 94 | [muted], 95 | [activemedia-blocked] 96 | ) { 97 | stroke: var(--toolbar-bgcolor) !important; 98 | background-color: var(--toolbar-bgcolor) !important; 99 | } 100 | 101 | .tab-icon-overlay:not([pinned], [sharing], [crashed]):is( 102 | [soundplaying], 103 | [muted], 104 | [activemedia-blocked] 105 | ) { 106 | margin-inline-end: 9.5px !important; 107 | } 108 | 109 | .tabbrowser-tab:not([image]) 110 | .tab-icon-overlay:not([pinned], [sharing], [crashed]) { 111 | top: 0 !important; 112 | 113 | padding: 0 !important; 114 | margin-inline-end: 5.5px !important; 115 | inset-inline-end: 0 !important; 116 | } 117 | 118 | .tab-icon-overlay:not([crashed])[soundplaying]:hover, 119 | .tab-icon-overlay:not([crashed])[muted]:hover, 120 | .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { 121 | color: currentColor !important; 122 | stroke: var(--toolbar-color) !important; 123 | background-color: var(--toolbar-color) !important; 124 | fill-opacity: 0.95 !important; 125 | } 126 | 127 | .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover, 128 | .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover, 129 | .tabbrowser-tab[selected] 130 | .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { 131 | color: currentColor !important; 132 | stroke: var(--toolbar-color) !important; 133 | background-color: var(--toolbar-color) !important; 134 | fill-opacity: 0.95 !important; 135 | } 136 | 137 | /* speaker icon colour fix */ 138 | #TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying], 139 | #TabsToolbar .tab-icon-overlay:not([crashed])[muted], 140 | #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { 141 | color: var(--toolbar-color) !important; 142 | } 143 | 144 | /* speaker icon colour fix on hover */ 145 | #TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover, 146 | #TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover, 147 | #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { 148 | color: var(--toolbar-bgcolor) !important; 149 | } 150 | 151 | /* selected tab colour fix*/ 152 | .tabbrowser-tab[selected] .tab-content { 153 | background-color: var(--uc-highlight-colour) !important; 154 | } 155 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /*==============================================================================================* 2 | 3 | +-----+-----+-----+-----+-----+-----+-----+ 4 | | █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ | 5 | | █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ | 6 | +-----+-----+-----+-----+-----+-----+-----+ 7 | 8 | Description: Cascade is a minimalstic and keyboard centered custom theme removing a lot of the 9 | subjective clutter default Firefox comes with. This theme is highly inspired by the 10 | stylistic choices of SimpleFox by Miguel Ávila. 🦊 11 | https://github.com/migueravila/SimpleFox 12 | 13 | Author: Andreas Grafen 14 | (https://andreas.grafen.info) 15 | 16 | Repository: https://github.com/andreasgrafen/cascade 17 | Thank you Nick, Abdallah, Benyamin and Wael for all the great suggestions for improvements! ♡ 18 | 19 | Nick: https://github.com/nicksundermeyer 20 | Abdallah: https://github.com/HeiWiper 21 | Benyamin: https://github.com/benyaminl 22 | Wael: https://github.com/wael444 23 | 24 | If you're looking for a **mouse-friendly** clone please check out Waterfall. 25 | https://github.com/crambaud/waterfall 26 | 27 | *==============================================================================================*/ 28 | 29 | @import "includes/cascade-config.css"; 30 | @import "includes/cascade-colours.css"; 31 | 32 | @import "includes/cascade-layout.css"; 33 | @import "includes/cascade-responsive.css"; 34 | @import "includes/cascade-floating-panel.css"; 35 | 36 | @import "includes/cascade-nav-bar.css"; 37 | @import "includes/cascade-tabs.css"; 38 | -------------------------------------------------------------------------------- /code_of_conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | pocco451@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing! 2 | 3 | First off, thanks for taking the time to contribute! <3 4 | 5 | All types of contributions are encouraged and welcome. 💜 6 | Though please make sure to read through the following guidelines before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. 7 | Besides the creation and maintenance of ports we appreciate all sorts of code and non-code contributions. These include but are not limited to: 8 | 9 | - Typo fixes 10 | - Documentation improvements 11 | - Pull request reviews 12 | - Feature requests 13 | - Opinions & suggestions 14 | 15 |   16 | 17 | ## ✔️ Guidelines 18 | 19 | The following is a set of guidelines for contributing to this project. Use your best judgment, and feel free to propose changes to this document in a pull request. 20 | 21 | - PRs should go to the `dev` branch. Reasons: 22 | - If there is already stuff under development, then it's likely that a conflict may occur. 23 | - Documentation tends not to be updated by PRs. 24 | - Testing. 25 | - Use the `.editorconfig` file (located at the root of this project) on your editor so as to "maintain consistent coding styles". For instructions on how to use this file refer to [EditorConfig's website](https://editorconfig.org/). 26 | 27 | > When contributing to this project, you must agree that you have authored 100% of the content, (or) that you have the necessary rights to the content and that the content you contribute may be provided under the [projects MIT license](https://github.com/andreasgrafen/cascade/blob/main/LICENSE). 28 | 29 |   30 | 31 | ## 💡 Recommendations 32 | 33 | - Create a topic branch on your fork for your specific PR. 34 | - If it's your first time contributing to a project then read [About pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) on Github's docs. 35 | 36 |   37 | -------------------------------------------------------------------------------- /integrations/ayu/ayu.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #5ccfe6; 10 | --uc-identity-colour-turquoise: #73d0ff; 11 | --uc-identity-colour-green: #bae67e; 12 | --uc-identity-colour-yellow: #ffd580; 13 | --uc-identity-colour-orange: #ffa759; 14 | --uc-identity-colour-red: #ff3333; 15 | --uc-identity-colour-pink: #d4bfff; 16 | --uc-identity-colour-purple: #d3b8f9; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #1f2430; 20 | --uc-highlight-colour: #1f2430; 21 | --uc-inverted-colour: #bae67e; 22 | --uc-muted-colour: #707a8c; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #39bae6; 32 | --uc-identity-colour-turquoise: #59c2ff; 33 | --uc-identity-colour-green: #c2d94c; 34 | --uc-identity-colour-yellow: #ffee99; 35 | --uc-identity-colour-orange: #ff8f40; 36 | --uc-identity-colour-red: #ff3333; 37 | --uc-identity-colour-pink: #f07178; 38 | --uc-identity-colour-purple: #cb9ff8; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #0a0e14; 42 | --uc-highlight-colour: #e6b450; 43 | --uc-inverted-colour: #b3b1ad; 44 | --uc-muted-colour: #4d5566; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-muted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--uc-identity-colour-blue) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/catppuccin/cascade-frappe.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #8caaee; 10 | --uc-identity-colour-turquoise: #81c8be; 11 | --uc-identity-colour-green: #a6d189; 12 | --uc-identity-colour-yellow: #e5c890; 13 | --uc-identity-colour-orange: #ef9f76; 14 | --uc-identity-colour-red: #e78284; 15 | --uc-identity-colour-pink: #f4b8e4; 16 | --uc-identity-colour-purple: #ca9ee6; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #303446; 20 | --uc-highlight-colour: #292c3c; 21 | --uc-inverted-colour: #c6d0f5; 22 | --uc-muted-colour: #737994; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #1e66f5; 32 | --uc-identity-colour-turquoise: #179299; 33 | --uc-identity-colour-green: #40a02b; 34 | --uc-identity-colour-yellow: #df8e1d; 35 | --uc-identity-colour-orange: #fe640b; 36 | --uc-identity-colour-red: #d20f39; 37 | --uc-identity-colour-pink: #d20f39; 38 | --uc-identity-colour-purple: #8839ef; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #eff1f5; 42 | --uc-highlight-colour: #dce0e8; 43 | --uc-inverted-colour: #4c4f69; 44 | --uc-muted-colour: #9ca0b0; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/catppuccin/cascade-macchiato.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #8aadf4; 10 | --uc-identity-colour-turquoise: #8bd5ca; 11 | --uc-identity-colour-green: #a6da95; 12 | --uc-identity-colour-yellow: #eed49f; 13 | --uc-identity-colour-orange: #f5a97f; 14 | --uc-identity-colour-red: #ed8796; 15 | --uc-identity-colour-pink: #f5bde6; 16 | --uc-identity-colour-purple: #c6a0f6; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #24273a; 20 | --uc-highlight-colour: #1e2030; 21 | --uc-inverted-colour: #cad3f5; 22 | --uc-muted-colour: #6e738d; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #1e66f5; 32 | --uc-identity-colour-turquoise: #179299; 33 | --uc-identity-colour-green: #40a02b; 34 | --uc-identity-colour-yellow: #df8e1d; 35 | --uc-identity-colour-orange: #fe640b; 36 | --uc-identity-colour-red: #d20f39; 37 | --uc-identity-colour-pink: #d20f39; 38 | --uc-identity-colour-purple: #8839ef; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #eff1f5; 42 | --uc-highlight-colour: #dce0e8; 43 | --uc-inverted-colour: #4c4f69; 44 | --uc-muted-colour: #9ca0b0; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/catppuccin/cascade-mocha.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #89b4fa; 10 | --uc-identity-colour-turquoise: #94e2d5; 11 | --uc-identity-colour-green: #a6e3a1; 12 | --uc-identity-colour-yellow: #f9e2af; 13 | --uc-identity-colour-orange: #fab387; 14 | --uc-identity-colour-red: #f38ba8; 15 | --uc-identity-colour-pink: #f5c2e7; 16 | --uc-identity-colour-purple: #cba6f7; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #1e1e2e; 20 | --uc-highlight-colour: #181825; 21 | --uc-inverted-colour: #cdd6f4; 22 | --uc-muted-colour: #6c7086; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #1e66f5; 32 | --uc-identity-colour-turquoise: #179299; 33 | --uc-identity-colour-green: #40a02b; 34 | --uc-identity-colour-yellow: #df8e1d; 35 | --uc-identity-colour-orange: #fe640b; 36 | --uc-identity-colour-red: #d20f39; 37 | --uc-identity-colour-pink: #d20f39; 38 | --uc-identity-colour-purple: #8839ef; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #eff1f5; 42 | --uc-highlight-colour: #dce0e8; 43 | --uc-inverted-colour: #4c4f69; 44 | --uc-muted-colour: #9ca0b0; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/gruvbox/gruvbox.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #458588; 10 | --uc-identity-colour-turquoise: #83a598; 11 | --uc-identity-colour-green: #b8bb26; 12 | --uc-identity-colour-yellow: #fabd2f; 13 | --uc-identity-colour-orange: #fe8019; 14 | --uc-identity-colour-red: #fb4934; 15 | --uc-identity-colour-pink: #d3869b; 16 | --uc-identity-colour-purple: #b16286; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #282828; 20 | --uc-highlight-colour: #1d2021; 21 | --uc-inverted-colour: #ebdbb2; 22 | --uc-muted-colour: #928374; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #458588; 32 | --uc-identity-colour-turquoise: #036678; 33 | --uc-identity-colour-green: #79740e; 34 | --uc-identity-colour-yellow: #b57514; 35 | --uc-identity-colour-orange: #af3a03; 36 | --uc-identity-colour-red: #9d0006; 37 | --uc-identity-colour-pink: #8f3f71; 38 | --uc-identity-colour-purple: #b16286; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #fbf1c7; 42 | --uc-highlight-colour: #f9f5d7; 43 | --uc-inverted-colour: #3c3836; 44 | --uc-muted-colour: #928374; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-muted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--uc-inverted-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/nord/nord.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #5e81ac; 10 | --uc-identity-colour-turquoise: #8fbcbb; 11 | --uc-identity-colour-green: #a3be8c; 12 | --uc-identity-colour-yellow: #ebcb8b; 13 | --uc-identity-colour-orange: #d08770; 14 | --uc-identity-colour-red: #bf616a; 15 | --uc-identity-colour-pink: #d1889f; 16 | --uc-identity-colour-purple: #b48ead; 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #2e3440; 20 | --uc-highlight-colour: #4c566a; 21 | --uc-inverted-colour: #eceff4; 22 | --uc-muted-colour: #d8dee9; 23 | --uc-accent-colour: var(--uc-identity-colour-purple); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #5e81ac; 32 | --uc-identity-colour-turquoise: #8fbcbb; 33 | --uc-identity-colour-green: #a3be8c; 34 | --uc-identity-colour-yellow: #ebcb8b; 35 | --uc-identity-colour-orange: #d08770; 36 | --uc-identity-colour-red: #bf616a; 37 | --uc-identity-colour-pink: #d1889f; 38 | --uc-identity-colour-purple: #b48ead; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #eceff4; 42 | --uc-highlight-colour: #d8dee9; 43 | --uc-inverted-colour: #2e3440; 44 | --uc-muted-colour: #4c566a; 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/rose-pine/cascade-moon.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #e0def4; /* text */ 10 | --uc-identity-colour-turquoise: #9ccfd8; /* foam */ 11 | --uc-identity-colour-green: #3e8fb0; /* pine */ 12 | --uc-identity-colour-yellow: #f6c177; /* gold */ 13 | --uc-identity-colour-orange: #ea9a97; /* rose */ 14 | --uc-identity-colour-red: #eb6f92; /* love */ 15 | --uc-identity-colour-pink: #908caa; /* subtle */ 16 | --uc-identity-colour-purple: #c4a7e7; /* iris */ 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #232136; /* base */ 20 | --uc-highlight-colour: #2a273f; /* surface */ 21 | --uc-inverted-colour: #e0def4; /* text */ 22 | --uc-muted-colour: #6e6a86; /* muted */ 23 | --uc-accent-colour: var(--uc-identity-colour-orange); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #575279; 32 | --uc-identity-colour-turquoise: #56949f; 33 | --uc-identity-colour-green: #286983; 34 | --uc-identity-colour-yellow: #ea9d34; 35 | --uc-identity-colour-orange: #d7827e; 36 | --uc-identity-colour-red: #b4637a; 37 | --uc-identity-colour-pink: #797593; 38 | --uc-identity-colour-purple: #907aa9; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #faf4ed; /* base */ 42 | --uc-highlight-colour: #f2e9e1; /* overlay */ 43 | --uc-inverted-colour: #575279; /* text */ 44 | --uc-muted-colour: #9893a5; /* muted */ 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/rose-pine/cascade-rose-pine.css: -------------------------------------------------------------------------------- 1 | /*---+---+---+---+---+---+---+ 2 | | C | O | L | O | U | R | S | 3 | +---+---+---+---+---+---+---*/ 4 | 5 | @media (prefers-color-scheme: dark) { 6 | :root { 7 | /* These colours are (mainly) used by the 8 | Container Tabs Plugin */ 9 | --uc-identity-colour-blue: #e0def4; /* text */ 10 | --uc-identity-colour-turquoise: #9ccfd8; /* foam */ 11 | --uc-identity-colour-green: #31748f; /* pine */ 12 | --uc-identity-colour-yellow: #f6c177; /* gold */ 13 | --uc-identity-colour-orange: #ebbcba; /* rose */ 14 | --uc-identity-colour-red: #eb6f92; /* love */ 15 | --uc-identity-colour-pink: #908caa; /* subtle */ 16 | --uc-identity-colour-purple: #c4a7e7; /* iris */ 17 | 18 | /* Cascades main Colour Scheme */ 19 | --uc-base-colour: #191724; /* base */ 20 | --uc-highlight-colour: #1f1d2e; /* surface */ 21 | --uc-inverted-colour: #e0def4; /* text */ 22 | --uc-muted-colour: #6e6a86; /* muted */ 23 | --uc-accent-colour: var(--uc-identity-colour-orange); 24 | } 25 | } 26 | 27 | @media (prefers-color-scheme: light) { 28 | :root { 29 | /* These colours are (mainly) used by the 30 | Container Tabs Plugin */ 31 | --uc-identity-colour-blue: #575279; 32 | --uc-identity-colour-turquoise: #56949f; 33 | --uc-identity-colour-green: #286983; 34 | --uc-identity-colour-yellow: #ea9d34; 35 | --uc-identity-colour-orange: #d7827e; 36 | --uc-identity-colour-red: #b4637a; 37 | --uc-identity-colour-pink: #797593; 38 | --uc-identity-colour-purple: #907aa9; 39 | 40 | /* Cascades main Colour Scheme */ 41 | --uc-base-colour: #faf4ed; /* base */ 42 | --uc-highlight-colour: #f2e9e1; /* overlay */ 43 | --uc-inverted-colour: #575279; /* text */ 44 | --uc-muted-colour: #9893a5; /* muted */ 45 | --uc-accent-colour: var(--uc-identity-colour-purple); 46 | } 47 | } 48 | 49 | /* Down here I'm just reassigning variables based on the colours set above. 50 | Feel free to play around with these but there is no editing necessary below this line. c: 51 | */ 52 | 53 | :root { 54 | --lwt-frame: var(--uc-base-colour) !important; 55 | --lwt-accent-color: var(--lwt-frame) !important; 56 | --lwt-text-color: var(--uc-inverted-colour) !important; 57 | 58 | --toolbar-field-color: var(--uc-inverted-colour) !important; 59 | 60 | --toolbar-field-focus-color: var(--uc-inverted-colour) !important; 61 | --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; 62 | --toolbar-field-focus-border-color: transparent !important; 63 | 64 | --toolbar-field-background-color: var(--lwt-frame) !important; 65 | --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; 66 | --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; 67 | --urlbar-popup-url-color: var(--uc-accent-colour) !important; 68 | 69 | --lwt-tab-text: var(--lwt-text-colour) !important; 70 | 71 | --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; 72 | 73 | --toolbar-bgcolor: var(--lwt-frame) !important; 74 | --toolbar-color: var(--lwt-text-color) !important; 75 | --toolbarseparator-color: var(--uc-accent-colour) !important; 76 | --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; 77 | --toolbarbutton-active-background: var( 78 | --toolbarbutton-hover-background 79 | ) !important; 80 | 81 | --lwt-sidebar-background-color: var(--lwt-frame) !important; 82 | --sidebar-background-color: var(--lwt-sidebar-background-color) !important; 83 | 84 | --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; 85 | --urlbar-box-text-color: var(--uc-muted-colour) !important; 86 | --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; 87 | --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; 88 | --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; 89 | } 90 | 91 | .identity-color-blue { 92 | --identity-tab-color: var(--uc-identity-colour-blue) !important; 93 | --identity-icon-color: var(--uc-identity-colour-blue) !important; 94 | } 95 | .identity-color-turquoise { 96 | --identity-tab-color: var(--uc-identity-colour-turquoise) !important; 97 | --identity-icon-color: var(--uc-identity-colour-turquoise) !important; 98 | } 99 | .identity-color-green { 100 | --identity-tab-color: var(--uc-identity-colour-green) !important; 101 | --identity-icon-color: var(--uc-identity-colour-green) !important; 102 | } 103 | .identity-color-yellow { 104 | --identity-tab-color: var(--uc-identity-colour-yellow) !important; 105 | --identity-icon-color: var(--uc-identity-colour-yellow) !important; 106 | } 107 | .identity-color-orange { 108 | --identity-tab-color: var(--uc-identity-colour-orange) !important; 109 | --identity-icon-color: var(--uc-identity-colour-orange) !important; 110 | } 111 | .identity-color-red { 112 | --identity-tab-color: var(--uc-identity-colour-red) !important; 113 | --identity-icon-color: var(--uc-identity-colour-red) !important; 114 | } 115 | .identity-color-pink { 116 | --identity-tab-color: var(--uc-identity-colour-pink) !important; 117 | --identity-icon-color: var(--uc-identity-colour-pink) !important; 118 | } 119 | .identity-color-purple { 120 | --identity-tab-color: var(--uc-identity-colour-purple) !important; 121 | --identity-icon-color: var(--uc-identity-colour-purple) !important; 122 | } 123 | -------------------------------------------------------------------------------- /integrations/side-view/cascade-sideview.css: -------------------------------------------------------------------------------- 1 | #sidebar-box[sidebarcommand*="side-view"] { 2 | max-width: 50vw !important; 3 | } 4 | 5 | [sidebarcommand*="side-view"] #sidebar { 6 | width: 100% !important; 7 | max-width: 50vw !important; 8 | height: 100% !important; 9 | } 10 | 11 | #sidebar-box[sidebarcommand*="side-view"] #sidebar-header { 12 | display: flex !important; 13 | flex-direction: row-reverse !important; 14 | 15 | margin: 0 !important; 16 | padding: 0 !important; 17 | 18 | background-color: var(--lwt-frame) !important; 19 | border: none; 20 | } 21 | 22 | #sidebar-box[sidebarcommand*="side-view"] 23 | #sidebar-header 24 | > *:not(#sidebar-close) { 25 | display: none !important; 26 | } 27 | 28 | #sidebar-box[sidebarcommand*="side-view"] #sidebar-header #sidebar-close, 29 | #sidebar-box[sidebarcommand*="side-view"] #sidebar-header .close-icon { 30 | width: 100% !important; 31 | 32 | background: transparent !important; 33 | } 34 | -------------------------------------------------------------------------------- /integrations/tabcenter-reborn/cascade-tcr.css: -------------------------------------------------------------------------------- 1 | #TabsToolbar { 2 | display: none !important; 3 | } 4 | #nav-bar { 5 | width: 100vw !important; 6 | } 7 | 8 | #browser { 9 | position: relative; 10 | } 11 | #sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header { 12 | display: none; 13 | } 14 | 15 | #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) { 16 | display: block; 17 | 18 | position: absolute; 19 | top: 0; 20 | bottom: 0; 21 | z-index: 3; 22 | 23 | min-width: 50px !important; 24 | max-width: 50px !important; 25 | 26 | border-right: none; 27 | 28 | transition: all 0.2s ease; 29 | 30 | overflow: hidden; 31 | } 32 | 33 | [sidebarcommand*="tabcenter"] #sidebar, 34 | #sidebar-box[sidebarcommand*="tabcenter"]:hover { 35 | min-width: 10vw !important; 36 | width: 30vw !important; 37 | max-width: 250px !important; 38 | } 39 | 40 | [sidebarcommand*="tabcenter"] #sidebar { 41 | height: 100%; 42 | max-height: 100%; 43 | } 44 | 45 | #browser:has(#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden])) 46 | #tabbrowser-tabbox { 47 | margin-left: 50px !important; 48 | } 49 | #main-window[inFullscreen][inDOMFullscreen] #tabbrowser-tabbox { 50 | margin-left: 0 !important; 51 | } 52 | /* Removes gap between active tab highlight and edge of bar */ 53 | #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] 54 | #sidebar-header, 55 | #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] 56 | ~ #sidebar-splitter { 57 | display: none; 58 | } 59 | -------------------------------------------------------------------------------- /integrations/tabcenter-reborn/tabcenter-reborn.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* These colours are (mainly) used by the 3 | Container Tabs Plugin */ 4 | --uc-identity-colour-blue: #7ed6df; 5 | --uc-identity-colour-turquoise: #55e6c1; 6 | --uc-identity-colour-green: #b8e994; 7 | --uc-identity-colour-yellow: #f7d794; 8 | --uc-identity-colour-orange: #f19066; 9 | --uc-identity-colour-red: #fc5c65; 10 | --uc-identity-colour-pink: #f78fb3; 11 | --uc-identity-colour-purple: #786fa6; 12 | 13 | /* Cascades main Colour Scheme */ 14 | --uc-base-colour: #1e2021; 15 | --uc-highlight-colour: #191b1c; 16 | --uc-inverted-colour: #fafafc; 17 | --uc-muted-colour: #aaaaac; 18 | --uc-accent-colour: var(--uc-identity-colour-purple); 19 | --uc-shadow-colour: #000000; 20 | } 21 | 22 | #topmenu { 23 | display: none !important; 24 | } 25 | 26 | #tablist-wrapper, 27 | #pinnedtablist { 28 | background: var(--uc-base-colour); 29 | } 30 | 31 | .tab:hover, 32 | .tab.active { 33 | background: var(--uc-highlight-colour); 34 | } 35 | 36 | #tablist-wrapper .tab-title-wrapper { 37 | opacity: 0; 38 | transform: translateX(-10px); 39 | 40 | transition: all 200ms ease; 41 | transition-delay: 0ms; 42 | } 43 | 44 | body:hover #tablist-wrapper .tab-title-wrapper { 45 | opacity: 1; 46 | transform: translateX(0); 47 | 48 | transition-delay: 50ms; 49 | } 50 | 51 | .tab, 52 | .tab.active { 53 | border-bottom: none !important; 54 | } 55 | 56 | #pinnedtablist:not(.compact) .tab { 57 | padding: 6px; 58 | } 59 | #tablist .tab { 60 | padding: 0 0 0 6px; 61 | } 62 | 63 | .tab { 64 | overflow: visible; 65 | } 66 | 67 | #pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before, 68 | #tablist .tab[data-identity-color] .tab-context::before { 69 | position: absolute; 70 | top: 4px; 71 | bottom: 4px; 72 | 73 | width: 2px; 74 | 75 | background: var(--identity-color); 76 | 77 | content: ""; 78 | } 79 | 80 | #tablist .tab[data-identity-color] .tab-context::before { 81 | left: -3px; 82 | } 83 | 84 | #pinnedtablist:not(.compact) .tab .tab-pin, 85 | .tab-close, 86 | .tab-loading-burst { 87 | display: none; 88 | } 89 | 90 | #pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context { 91 | box-shadow: none !important; 92 | } 93 | 94 | [data-identity-color="blue"] { 95 | --identity-color: var(--uc-identity-colour-blue); 96 | } 97 | [data-identity-color="turquoise"] { 98 | --identity-color: var(--uc-identity-colour-turquoise); 99 | } 100 | [data-identity-color="green"] { 101 | --identity-color: var(--uc-identity-colour-green); 102 | } 103 | [data-identity-color="yellow"] { 104 | --identity-color: var(--uc-identity-colour-yellow); 105 | } 106 | [data-identity-color="orange"] { 107 | --identity-color: var(--uc-identity-colour-orange); 108 | } 109 | [data-identity-color="red"] { 110 | --identity-color: var(--uc-identity-colour-red); 111 | } 112 | [data-identity-color="pink"] { 113 | --identity-color: var(--uc-identity-colour-pink); 114 | } 115 | [data-identity-color="purple"] { 116 | --identity-color: var(--uc-identity-colour-purple); 117 | } 118 | 119 | .can-scroll-top #tablist { 120 | mask: linear-gradient(transparent, var(--uc-shadow-colour) 40px); 121 | } 122 | .can-scroll-bottom #tablist { 123 | mask: linear-gradient(var(--uc-shadow-colour) calc(100% - 40px), transparent); 124 | } 125 | .can-scroll-bottom.can-scroll-top #tablist { 126 | mask: linear-gradient( 127 | transparent, 128 | var(--uc-shadow-colour) 40px calc(100% - 40px), 129 | transparent 130 | ); 131 | } 132 | #topshadow, 133 | #bottomshadow { 134 | display: none; 135 | } 136 | --------------------------------------------------------------------------------