Thank you for sharing ideas!
17 | 18 | > [!NOTE] 19 | > - Please check existing issues to avoid duplicates. 20 | > - We value enhancements that align with Nebula’s minimalist and borderless design language. 21 | 22 | - type: textarea 23 | id: idea 24 | attributes: 25 | label: What's your idea? 26 | description: Please describe your enhancement or feature request with as much detail as possible. 27 | placeholder: I'd like to see a new feature that... 28 | validations: 29 | required: true 30 | 31 | - type: textarea 32 | id: motivation 33 | attributes: 34 | label: Why is this useful? 35 | description: Explain how this feature would improve the Nebula experience for you or others. 36 | placeholder: This would help because... 37 | validations: 38 | required: true 39 | 40 | - type: textarea 41 | id: context 42 | attributes: 43 | label: Any additional context or mockups? 44 | description: If applicable, provide screenshots, sketches, or comparisons to other tools. You can drag and drop images here. 45 | placeholder: Optional - add any extra notes or visuals here. 46 | 47 | - type: input 48 | id: nebula-version 49 | attributes: 50 | label: Nebula Version 51 | description: Which version of Nebula are you using? 52 | placeholder: e.g., v3.0.0 53 | validations: 54 | required: true 55 | 56 | - type: dropdown 57 | id: priority 58 | attributes: 59 | label: How important is this to you? 60 | description: This helps us prioritize incoming requests. 61 | options: 62 | - Nice to have 63 | - Important for my workflow 64 | - Blocking my use of Nebula 65 | validations: 66 | required: true 67 | -------------------------------------------------------------------------------- /Nebula/content/Transparent-settings.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --zen-colors-tertiary: transparent !important; 3 | --zen-settings-secondary-background: transparent !important; 4 | } 5 | 6 | groupbox:not(#sineInstallationGroup:popover-open) { 7 | /* background: var(--zen-colors-tertiary) !important; */ 8 | background: light-dark(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.35)) !important; 9 | border: none; 10 | } 11 | 12 | #preferences-root{ 13 | background-color: transparent !important; 14 | } 15 | 16 | /* ---------------- Transparent backgrounds for all about: pages ---------------- */ 17 | 18 | @-moz-document url-prefix("about:") { 19 | 20 | /* General page background */ 21 | html, body, #toolbar, .App, .sticky-container, .main-search, .main-heading { 22 | background-color: transparent !important; 23 | } 24 | 25 | /* Tables and action boxes */ 26 | table, 27 | tr, 28 | .action-box { 29 | background-color: light-dark(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.35)) !important; 30 | border-radius: 13px !important; 31 | border: none !important; 32 | } 33 | 34 | /* Table rows outline */ 35 | tr { 36 | outline: solid 1px #88888822 !important; 37 | } 38 | 39 | /* Top sites / personalize buttons on home/newtab */ 40 | .top-sites-list, 41 | .personalizeButtonWrapper { 42 | opacity: 0 !important; 43 | transition: opacity 0.3s ease-in-out; 44 | } 45 | 46 | .top-sites-list:hover, 47 | .personalizeButtonWrapper:hover { 48 | opacity: 1 !important; 49 | } 50 | 51 | /* Hide default background elements */ 52 | .App > div:nth-child(2), 53 | .wallpaper { 54 | display: none !important; 55 | } 56 | } 57 | 58 | /* 59 | @-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) { 60 | body, .App{ 61 | background-color: transparent !important; 62 | } 63 | 64 | .top-sites-list, .personalizeButtonWrapper{ 65 | opacity: 0 !important; 66 | transition: opacity 0.3s ease-in-out; 67 | 68 | &:hover{ 69 | opacity: 1 !important; 70 | } 71 | } 72 | 73 | .App > div:nth-child(2), .wallpaper{ 74 | display: none !important; 75 | } 76 | } 77 | 78 | @-moz-document url(about:config), url(about:support), url(about:profiles) { 79 | html, #toolbar{ 80 | background-color: transparent !important; 81 | } 82 | tr, table{ 83 | background-color: transparent !important; 84 | border: none !important; 85 | } 86 | tr{ 87 | outline: solid 1px #88888822 !important; 88 | } 89 | } 90 | */ 91 | 92 | /* Fixes the transparent dialogs. */ 93 | .dialogFrame { 94 | background: var(--zen-dialog-background); 95 | border-radius: 8px; 96 | } -------------------------------------------------------------------------------- /.github/workflows/update-store.yml: -------------------------------------------------------------------------------- 1 | name: 🚀 Sync Nebula JS to SineOrg Store 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - 'JS/Nebula.uc.js' 9 | 10 | jobs: 11 | sync-and-pr: 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | # Checkout your Zen-Nebula repo 16 | - name: 📥 Checkout Zen-Nebula 17 | uses: actions/checkout@v4 18 | 19 | # Extract commit subject + full message 20 | - name: 📝 Get commit message 21 | id: commit 22 | run: | 23 | # Subject (escaped, one-line safe) 24 | subject=$(git log -1 --pretty=%s | sed 's/%/%25/g; s/\r/%0D/g; s/\n/%0A/g') 25 | echo "subject=$subject" >> "$GITHUB_OUTPUT" 26 | 27 | # Full message (multiline-safe with heredoc) 28 | { 29 | echo 'full<Thank you for filing a bug report!
16 | 17 | > [!IMPORTANT] 18 | > - Please provide a clear and descriptive title. 19 | > - Search [existing issues](https://github.com/JustAdumbPrsn/Zen-Nebula/issues) to avoid creating a duplicate. 20 | > - Ensure this is a bug, not a feature request. 21 | > - This template is for bugs in Nebula only. Test without any other mods first. 22 | 23 | - type: checkboxes 24 | id: prechecks 25 | attributes: 26 | label: "⚠️ Preliminary Checks" 27 | description: Please confirm the following before submitting. 28 | options: 29 | - label: I have read and understood the contribution guidelines. 30 | required: true 31 | - label: I have searched the existing issues and this is not a duplicate. 32 | required: true 33 | - label: I have tested this without any other Zen Mods enabled. 34 | required: true 35 | - label: I can confirm this bug is reproducible with Nebula and does not occur when Nebula is disabled. 36 | required: true 37 | 38 | - type: textarea 39 | id: description 40 | attributes: 41 | label: What happened? 42 | description: Describe the bug in detail. Include what you expected to happen. 43 | placeholder: I encountered a bug where... 44 | validations: 45 | required: true 46 | 47 | - type: textarea 48 | id: steps 49 | attributes: 50 | label: Steps to Reproduce 51 | description: Provide a clear set of steps to help us reproduce the bug. Include any specific settings or configurations if relevant. 52 | placeholder: | 53 | 1. Open New tab 54 | 2. Enable Compact Mode 55 | 3. Switch tabs 56 | 4. Observe the glitch 57 | validations: 58 | required: false 59 | 60 | - type: markdown 61 | attributes: 62 | value: "### Environment" 63 | 64 | - type: input 65 | id: nebula-version 66 | attributes: 67 | label: Nebula Version 68 | description: You can find this in the Nebula settings or 'About' page. 69 | placeholder: "e.g., v3.1.0" 70 | validations: 71 | required: true 72 | 73 | - type: input 74 | id: zen-version 75 | attributes: 76 | label: Zen Browser Version 77 | description: The version of the browser you are using. 78 | placeholder: "e.g., 1.14.0" 79 | validations: 80 | required: true 81 | 82 | - type: dropdown 83 | id: platform 84 | attributes: 85 | label: Operating System 86 | description: Select all platforms where you've seen this issue. 87 | multiple: true 88 | options: 89 | - Windows - x64 90 | - Windows - aarch64 91 | - macOS - Intel 92 | - macOS - Apple Silicon 93 | - Linux (AppImage) 94 | - Linux (Flatpak) 95 | - Linux (Tarball) 96 | - Other (please specify in 'Additional Context') 97 | validations: 98 | required: true 99 | 100 | - type: dropdown 101 | id: area 102 | attributes: 103 | label: Affected Component(s) 104 | description: What part of Nebula is affected? Select all that apply. 105 | multiple: true 106 | options: 107 | - Bookmarks 108 | - Compact Mode 109 | - Customizable UI / Toolbars 110 | - Extensions 111 | - Glance 112 | - Miniplayer 113 | - Other Mods / Themes 114 | - Performance 115 | - Settings 116 | - Split View 117 | - Tab Folders 118 | - Tab Unloading 119 | - Tabs 120 | - URL Bar 121 | - Workspaces 122 | - Other 123 | validations: 124 | required: true 125 | 126 | - type: textarea 127 | id: media 128 | attributes: 129 | label: Screenshots or Videos 130 | description: "If applicable, add screenshots, videos, or GIFs to help explain your problem. You can drag and drop files directly into this box." 131 | 132 | - type: textarea 133 | id: additional-context 134 | attributes: 135 | label: Additional Context 136 | description: Add any other context about the problem here, such as workarounds you've discovered or potential causes. 137 | -------------------------------------------------------------------------------- /Nebula/modules/Essentials.css: -------------------------------------------------------------------------------- 1 | /* -------------------------- ESSENTIALS -------------------------- */ 2 | 3 | .zen-essentials-container .tabbrowser-tab { 4 | .tab-background { 5 | background-color: var(--nebula-color) !important; 6 | box-shadow: 0 0px 3px transparent !important; 7 | border-radius: calc(var(--nebula-border-radius) + 1px) !important; 8 | } 9 | 10 | &:hover .tab-background { 11 | background-color: var(--nebula-color-hover) !important; 12 | box-shadow: 0 0px 3px var(--nebula-color-shadow) !important; 13 | } 14 | 15 | @media (-moz-pref("zen.theme.essentials-favicon-bg")) { 16 | .tab-background::after { 17 | content: "" !important; 18 | position: absolute !important; 19 | left: 0 !important; 20 | top: 0 !important; 21 | width: 100% !important; 22 | height: 100% !important; 23 | display: block !important; 24 | z-index: -1 !important; 25 | } 26 | } 27 | } 28 | 29 | .zen-essentials-container { 30 | grid-template-columns: repeat(auto-fit, minmax(var(--nebula-essentials-width), auto)) !important; 31 | 32 | .tabbrowser-tab { 33 | overflow: visible !important; 34 | 35 | &[selected], 36 | &[visuallyselected] { 37 | .tab-icon-image { 38 | filter: drop-shadow(0px 0px 4px var(--nebula-color-shadow)); 39 | } 40 | 41 | > .tab-stack > .tab-background { 42 | border: none !important; 43 | 44 | &::before { 45 | opacity: 0 !important; 46 | } 47 | 48 | &::after { 49 | filter: saturate(200%) blur(13.5px) contrast(110%) !important; 50 | } 51 | } 52 | } 53 | } 54 | } 55 | 56 | #zen-main-app-wrapper:not(:has(#zen-welcome)) { 57 | /* Tab click animations */ 58 | #tabbrowser-tabs:not([movingtab]) { 59 | .tabbrowser-tab { 60 | transition: scale 0.2s ease !important; 61 | } 62 | 63 | .tabbrowser-tab:active:not(:has( 64 | .tab-icon-overlay:hover, 65 | .tab-icon-overlay:active, 66 | .tab-close-button:hover, 67 | .tab-close-button:active 68 | )) { 69 | scale: 0.96 !important; 70 | } 71 | 72 | .tabbrowser-tab:has(.tab-close-button:hover) { 73 | scale: 1 !important; 74 | } 75 | } 76 | 77 | /* Split view tabs */ 78 | tab-group[split-view-group] { 79 | .tabbrowser-tab { 80 | > .tab-stack > .tab-background { 81 | &::after { 82 | mask-image: linear-gradient(to right, black, transparent 60%); 83 | } 84 | } 85 | } 86 | } 87 | } 88 | 89 | .collapsed-toolbar .essential-item { 90 | justify-content: center; /* Ensures items are centered */ 91 | align-items: center; 92 | margin: auto; /* Adjust if needed */ 93 | } 94 | 95 | /* -------------------------- ANIMATIONS FOR ESSENTIALS -------------------------- */ 96 | 97 | #zen-main-app-wrapper { 98 | .tabbrowser-tab { 99 | scale: unset !important; 100 | 101 | &[zen-glance-tab] { 102 | box-shadow: none !important; 103 | 104 | .tab-label-container { 105 | display: none !important; 106 | } 107 | } 108 | 109 | .tab-stack { 110 | transition: transform 0.2s ease !important; 111 | } 112 | 113 | .tab-background, 114 | .tab-icon-stack, 115 | .tab-label-container { 116 | transition: opacity 0.2s ease !important; 117 | } 118 | 119 | .tab-background { 120 | transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important; 121 | overflow: hidden !important; 122 | position: relative !important; 123 | 124 | &::before { 125 | transition: opacity 0.3s ease, width 0.3s ease, background 0.3s ease; 126 | opacity: 0; 127 | } 128 | 129 | &::after { 130 | content: ""; 131 | position: absolute; 132 | width: 100%; 133 | height: var(--tab-min-height); 134 | opacity: 0; 135 | transition: opacity 0.3s ease-out; 136 | } 137 | } 138 | 139 | &[selected]:not([zen-glance-tab="true"]), 140 | &[visuallyselected]:not([zen-glance-tab="true"]) { 141 | > .tab-stack > .tab-background { 142 | &::after { 143 | width: 100%; 144 | opacity: 1; 145 | } 146 | } 147 | } 148 | 149 | &:active { 150 | .tab-stack:active:not(:has( 151 | .tab-icon-overlay:hover, 152 | .tab-icon-overlay:active, 153 | .tab-close-button:hover, 154 | .tab-close-button:active 155 | )) { 156 | transform: scale(0.95, 0.95) !important; 157 | } 158 | } 159 | } 160 | } 161 | 162 | @media (-moz-pref("nebula-essentials-gray-icons")) { 163 | .zen-essentials-container .tab-icon-image { 164 | filter: grayscale(100%) contrast(75%) !important; 165 | transition: filter 0.5s ease !important; 166 | } 167 | .zen-essentials-container .tabbrowser-tab[selected="true"] .tab-icon-stack > .tab-icon-image, 168 | .zen-essentials-container .tabbrowser-tab:hover .tab-icon-stack > .tab-icon-image { 169 | filter: none !important; 170 | } 171 | } -------------------------------------------------------------------------------- /Nebula/modules/Miniplayer.css: -------------------------------------------------------------------------------- 1 | /* -------------------- Media Controls Toolbar -------------------- */ 2 | 3 | #Nebula-media-cover-art { 4 | position: absolute !important; 5 | inset: 0 !important; 6 | z-index: -1 !important; 7 | pointer-events: none !important; 8 | border-radius: inherit !important; 9 | overflow: hidden !important; 10 | background-size: 100% 100% !important; 11 | background-position: center !important; 12 | background-repeat: no-repeat !important; 13 | background-blend-mode: darken !important; 14 | filter: blur(24px) saturate(140%) contrast(120%) !important; 15 | opacity: 0 !important; 16 | transition: opacity 0.4s ease-in-out !important; 17 | } 18 | 19 | #zen-media-controls-toolbar > toolbaritem:hover > #Nebula-media-cover-art.visible { 20 | opacity: 0.4 !important; 21 | } 22 | 23 | :root[zen-sidebar-expanded="true"] #zen-media-controls-toolbar { 24 | align-self: center !important; 25 | width: calc(100% - var(--zen-element-separation)) !important; 26 | margin-top: 8px !important; 27 | height: 38px !important; 28 | position: relative !important; 29 | } 30 | 31 | /* Keyframes */ 32 | @keyframes miniplayer-gradient { 33 | 0% { background-position: 0% 50%; } 34 | 50% { background-position: 100% 50%; } 35 | 100% { background-position: 0% 50%; } 36 | } 37 | 38 | /* Toolbar Item Styles */ 39 | #zen-media-controls-toolbar > toolbaritem { 40 | position: relative; 41 | border-radius: var(--nebula-border-radius) !important; 42 | backdrop-filter: saturate(1) !important; 43 | transition: border-radius 0.3s ease, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; 44 | background-color: var(--nebula-color-min) !important; 45 | 46 | &:hover { 47 | border-radius: var(--nebula-border-radius) !important; 48 | background: light-dark(rgba(235, 235, 235, 1), rgba(10, 10, 10, 1)) !important; 49 | box-shadow: 0 0 15px var(--nebula-color-shadow); 50 | } 51 | } 52 | 53 | /* --------------------- Media Info --------------------- */ 54 | 55 | #zen-media-service-hbox { 56 | padding-top: 5px !important; 57 | transition: padding 0.15s ease-in-out !important; 58 | } 59 | 60 | #zen-media-title { 61 | font-weight: 720 !important; 62 | } 63 | 64 | #zen-media-artist { 65 | font-size: 10px !important; 66 | } 67 | 68 | #zen-media-info-vbox::before { 69 | display: none !important; 70 | } 71 | 72 | /* --------------------- Media Progress Bar ---------------------- */ 73 | 74 | #zen-media-progress-bar { 75 | &::-moz-range-thumb { 76 | scale: 1; 77 | transition: scale 0.2s ease; 78 | } 79 | 80 | &::-moz-range-track, 81 | &::-moz-range-progress { 82 | transition: height 0.2s ease; 83 | } 84 | 85 | &:hover { 86 | &::-moz-range-thumb { 87 | scale: 1.4; 88 | } 89 | 90 | &::-moz-range-track, 91 | &::-moz-range-progress { 92 | height: calc(var(--progress-height) + 2px) !important; 93 | } 94 | } 95 | } 96 | 97 | #zen-media-progress-bar { 98 | --zen-primary-color: rgba(255,255,255,1) !important; 99 | --zen-colors-border: rgba(100,100,100,0.01) !important; 100 | } 101 | 102 | /* --------------------- Music notes animation ------------------ */ 103 | /* 104 | #zen-media-focus-button::after { 105 | display: none !important; 106 | } 107 | */ 108 | /* ---------------------- Control Buttons ------------------- */ 109 | 110 | #zen-media-focus-button, 111 | #zen-media-mute-button, 112 | #zen-media-playpause-button, 113 | #zen-media-nexttrack-button, 114 | #zen-media-previoustrack-button, 115 | #zen-media-close-button { 116 | transition: opacity 0.3s ease-in-out, transform 0.17s ease-out; 117 | opacity: 1; 118 | 119 | &:hover { 120 | opacity: 0.8; 121 | transform: scale(1.11); 122 | } 123 | } 124 | 125 | /* ------------------ Hover Animation for Info ------------------ */ 126 | 127 | #zen-media-controls-toolbar .show-on-hover { 128 | max-height: 0; 129 | opacity: 0; 130 | transform: translateY(0rem); 131 | padding: 6px; 132 | pointer-events: none; 133 | filter: blur(2px); 134 | transition: 135 | max-height 0.3s ease, 136 | filter 0.3s ease, 137 | opacity 0.3s ease, 138 | transform 0.3s ease, 139 | padding 0.3s ease; 140 | 141 | > * { 142 | opacity: 0; 143 | transform: translateY(0); 144 | filter: blur(0); 145 | transition: 146 | opacity 0.3s ease 0.2s, 147 | transform 0.3s ease 0.2s, 148 | filter 0.3s ease 0.2s; 149 | } 150 | } 151 | 152 | #zen-media-controls-toolbar:hover .show-on-hover { 153 | max-height: 100px; 154 | opacity: 1; 155 | transform: translateY(0); 156 | pointer-events: auto; 157 | filter: blur(0); 158 | 159 | > * { 160 | opacity: 1; 161 | transform: translateY(0); 162 | filter: blur(0); 163 | } 164 | } 165 | 166 | #zen-media-controls-toolbar:not(:hover) .show-on-hover { 167 | transition: 168 | opacity 0.15s ease, 169 | filter 0.15s ease, 170 | transform 0.15s ease, 171 | padding 0.15s ease, 172 | max-height 0.2s ease; 173 | 174 | > * { 175 | transition: 176 | opacity 0.15s ease, 177 | transform 0.15s ease, 178 | filter 0.15s ease; 179 | } 180 | } -------------------------------------------------------------------------------- /Nebula/modules/Tabfolders.css: -------------------------------------------------------------------------------- 1 | /* ---------------------- Zen Folders Styling ---------------------- */ 2 | 3 | /* Default group background */ 4 | .tab-group-label-container::before { 5 | background-color: var(--nebula-color-min) !important; 6 | box-shadow: 0 0px 3px transparent !important; 7 | border-radius: var(--nebula-border-radius) !important; 8 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 9 | } 10 | 11 | /* Override for pinned tabs background */ 12 | @media (-moz-pref("nebula-pinned-tabs-bg")) { 13 | .tab-group-label-container::before { 14 | background-color: transparent !important; 15 | box-shadow: 0 0px 3px transparent !important; 16 | } 17 | } 18 | 19 | /* Hover effect */ 20 | .tab-group-label-container:hover::before { 21 | background-color: var(--nebula-color-hover) !important; 22 | box-shadow: 0 0px 3px var(--nebula-color-shadow) !important; 23 | } 24 | 25 | /* Nebula's folder styling (Background and vertical bar) */ 26 | @media (-moz-pref("nebula-folder-styling")) { 27 | 28 | /* ------------------- Vertical Bar for Tab Group ------------------- */ 29 | 30 | .tab-group-container { 31 | position: relative; /* required for pseudo-element */ 32 | } 33 | 34 | .tab-group-container::after { 35 | content: ""; 36 | position: absolute; 37 | top: 2px; 38 | left: 7px; 39 | bottom: 8px; 40 | width: 4px; 41 | opacity: 0.5; 42 | border-radius: 5px; 43 | background: var(--zen-primary-color); 44 | transition: background 0.3s ease, transform 0.2s ease; 45 | } 46 | 47 | /* ------------------- Zen Folder Background ------------------- */ 48 | 49 | zen-folder { 50 | position: relative; 51 | } 52 | 53 | /* Background layer */ 54 | zen-folder::before { 55 | content: ""; 56 | position: absolute; 57 | inset: 0; 58 | border-radius: 16px; 59 | background-color: light-dark(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15)); 60 | opacity: 0; 61 | transition: opacity 0.3s ease; 62 | pointer-events: none; 63 | z-index: -1; 64 | } 65 | 66 | /* Common trigger: expanded label, selected child, or active tab */ 67 | /* ------------------ Top-Level Folders ------------------ */ 68 | zen-folder:not(zen-folder zen-folder):has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"]), 69 | zen-folder:not(zen-folder zen-folder):has([selected="true"]), 70 | zen-folder:not(zen-folder zen-folder):has([folder-active="true"]) { 71 | padding: 2px !important; 72 | border-radius: 16px; 73 | margin: 2px !important; /* Top-level margin */ 74 | } 75 | 76 | /* ------------------ Subfolders ------------------ */ 77 | zen-folder zen-folder:has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"]), 78 | zen-folder zen-folder:has([selected="true"]), 79 | zen-folder zen-folder:has([folder-active="true"]) { 80 | padding: 2px !important; 81 | margin-right: 2px !important; 82 | margin-left: 18px !important; /* Different margin for subfolders */ 83 | margin-top: 2px !important; 84 | margin-bottom: 2px !important; 85 | } 86 | 87 | 88 | /* Top-level folders (::before always works) */ 89 | zen-folder:not(zen-folder zen-folder):has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"])::before, 90 | zen-folder:not(zen-folder zen-folder):has([selected="true"])::before, 91 | zen-folder:not(zen-folder zen-folder):has([folder-active="true"])::before { 92 | opacity: 1 !important; 93 | } 94 | 95 | /* Subfolders - only show background if expanded, NOT if selected or active */ 96 | zen-folder zen-folder:has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"])::before { 97 | opacity: 1 !important; 98 | } 99 | 100 | zen-folder zen-folder:has([selected="true"])::before, 101 | zen-folder zen-folder:has([folder-active="true"])::before { 102 | opacity: 0 !important; /* disables background for active/selected subfolders */ 103 | } 104 | 105 | 106 | /* ------------------- Override: Pinned Tabs in Folders ------------------- */ 107 | 108 | /* Default background */ 109 | zen-folder .tabbrowser-tab[pinned] .tab-background { 110 | background-color: transparent !important; 111 | transition: 112 | background-color 0.3s ease, 113 | box-shadow 0.3s ease !important; 114 | box-shadow: 0 0 3px transparent !important; 115 | } 116 | 117 | /* Hover state */ 118 | zen-folder .tabbrowser-tab[pinned]:hover .tab-background { 119 | background-color: var(--nebula-color-hover) !important; 120 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 121 | } 122 | 123 | /* Selected state */ 124 | zen-folder .tabbrowser-tab[pinned][selected="true"] .tab-background, 125 | zen-folder .tabbrowser-tab[pinned][visuallyselected="true"] .tab-background { 126 | background-color: var(--nebula-color-selected) !important; 127 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 128 | } 129 | 130 | /* Config: remove background/shadow for pinned tabs */ 131 | @media (-moz-pref("nebula-pinned-tabs-bg")) { 132 | zen-folder .tabbrowser-tab[pinned] .tab-background { 133 | background-color: transparent !important; 134 | box-shadow: transparent !important; 135 | } 136 | } 137 | 138 | /* Overrides for folder button itself Active / selected / expanded state */ 139 | zen-folder:has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"]) .tab-group-label-container::before, 140 | zen-folder:has([selected="true"]) .tab-group-label-container::before, 141 | zen-folder:has([folder-active="true"]) .tab-group-label-container::before { 142 | background-color: var(--nebula-color-min) !important; 143 | } 144 | 145 | /* Hover state */ 146 | zen-folder:has(> hbox.tab-group-label-container > label.tab-group-label[aria-expanded="true"]) .tab-group-label-container:hover::before, 147 | zen-folder:has([selected="true"]) .tab-group-label-container:hover::before, 148 | zen-folder:has([folder-active="true"]) .tab-group-label-container:hover::before { 149 | background-color: var(--nebula-color-hover) !important; 150 | } 151 | } -------------------------------------------------------------------------------- /Nebula/modules/Pinned-extensions.css: -------------------------------------------------------------------------------- 1 | /* ------------------------- PINNED EXTENSIONS ------------------------- */ 2 | 3 | @media (-moz-pref("nebula-pinned-extensions-mod")) { 4 | 5 | :root[customizing] #TabsToolbar-customization-target { 6 | visibility: visible !important; 7 | } 8 | 9 | .zen-workspace-pinned-tabs-section { 10 | display: flex !important; 11 | flex-direction: column; 12 | } 13 | 14 | :root[zen-single-toolbar="true"] #nav-bar { 15 | margin-bottom: 8px !important; 16 | } 17 | 18 | :root[nebula-single-toolbar] #tabbrowser-tabs { 19 | min-width: 100% !important; 20 | height: calc(100% - 27px) !important; 21 | transform: translateY(-1px) !important; 22 | } 23 | 24 | :root[nebula-multi-toolbar] #tabbrowser-tabs, 25 | :root[nebula-collapsed-toolbar] #tabbrowser-tabs { 26 | min-width: 100% !important; 27 | height: calc(100% - 27px) !important; 28 | transform: translateY(2.5px) !important; 29 | } 30 | 31 | #TabsToolbar-customization-target { 32 | display: flex !important; 33 | flex-direction: row !important; 34 | flex-wrap: wrap !important; 35 | gap: calc(var(--zen-toolbox-padding) - 3px) !important; 36 | } 37 | 38 | #TabsToolbar-customization-target #Zen-tabs-wrapper { 39 | max-height: 700px !important; 40 | } 41 | 42 | #TabsToolbar-customization-target .unified-extensions-item-action-button { 43 | padding: 0 !important; 44 | } 45 | 46 | #TabsToolbar-customization-target .unified-extensions-item { 47 | margin-inline: 2px !important; 48 | padding: 0 !important; 49 | height: 32px !important; 50 | width: 32px !important; 51 | flex-grow: 1 !important; 52 | order: -1 !important; 53 | background-color: var(--nebula-color) !important; 54 | box-shadow: 0 0 3px transparent !important; 55 | border-radius: calc(var(--nebula-border-radius) - 0.5px) !important; 56 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 57 | } 58 | 59 | #TabsToolbar-customization-target .unified-extensions-item:hover { 60 | background-color: var(--nebula-color-hover) !important; 61 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 62 | } 63 | 64 | #TabsToolbar-customization-target > toolbarbutton:not([id="tabs-newtab-button"]):not(#sort-button):not(#clear-button), 65 | #TabsToolbar-customization-target > toolbaritem:not(#sort-button):not(#clear-button) { 66 | height: 32px !important; 67 | width: 32px !important; 68 | flex-grow: 1 !important; 69 | padding: 0 !important; 70 | } 71 | 72 | #TabsToolbar-customization-target > toolbarbutton:not([id="tabs-newtab-button"]), 73 | #TabsToolbar-customization-target > toolbaritem { 74 | background-color: var(--nebula-color) !important; 75 | box-shadow: 0 0 3px light-dark(rgba(255,255,255,0.12), rgba(0,0,0,0.12)) !important; 76 | border-radius: calc(var(--nebula-border-radius) + 1px) !important; 77 | margin: 0 !important; 78 | order: -1 !important; 79 | flex-grow: 1 !important; 80 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 81 | } 82 | 83 | #TabsToolbar-customization-target > toolbarbutton:not([id="tabs-newtab-button"]):hover, 84 | #TabsToolbar-customization-target > toolbaritem:hover { 85 | background-color: var(--nebula-color-hover) !important; 86 | box-shadow: 0 0 3px light-dark(rgba(255,255,255,0.95), rgba(0,0,0,0.95)) !important; 87 | } 88 | 89 | #TabsToolbar-customization-target toolbarbutton, 90 | #TabsToolbar-customization-target stack { 91 | --toolbarbutton-active-background: transparent !important; 92 | --toolbarbutton-hover-background: transparent !important; 93 | } 94 | 95 | #TabsToolbar-customization-target .toolbarbutton-badge { 96 | display: none !important; 97 | } 98 | 99 | html:not([zen-sidebar-expanded="true"]):not([zen-single-toolbar="true"]) 100 | #TabsToolbar-customization-target .unified-extensions-item { 101 | width: 24px !important; 102 | height: 32px !important; 103 | margin-inline: 6px !important; 104 | margin-block: 2px !important; 105 | } 106 | 107 | /* -------- Hover Gradient -------- */ 108 | 109 | .unified-extensions-item { 110 | position: relative !important; 111 | border-radius: calc(var(--nebula-border-radius) - 2px) !important; 112 | } 113 | 114 | .unified-extensions-item::before { 115 | content: ""; 116 | position: absolute; 117 | inset: -0.1px; 118 | background: linear-gradient( 119 | 45deg, 120 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 121 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 122 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 123 | color-mix(in srgb, var(--zen-primary-color) 100%, black), 124 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 125 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 126 | ); 127 | background-size: 200% 200%; 128 | border-radius: calc(var(--nebula-border-radius) - 2px) !important; 129 | clip-path: inset(0 round calc(var(--nebula-border-radius) - 2px)); 130 | animation: tab-hover-gradient 3.5s linear infinite; 131 | animation-play-state: paused; 132 | opacity: 0; 133 | filter: blur(10px) brightness(0.6) contrast(120%); 134 | transition: opacity 0.4s ease-in-out; 135 | pointer-events: none; 136 | z-index: 0; 137 | } 138 | 139 | .unified-extensions-item:hover::before { 140 | animation-play-state: running; 141 | opacity: 0.5; 142 | } 143 | 144 | .unified-extensions-item:has(.close-button:hover, .reset-button:hover)::before { 145 | opacity: 0; 146 | } 147 | 148 | @media (-moz-pref("nebula-glow-gradient", 0)) { 149 | .unified-extensions-item::before { 150 | display: none; 151 | } 152 | } 153 | 154 | @media (-moz-pref("nebula-glow-gradient", 2)) { 155 | .unified-extensions-item::before { 156 | background: linear-gradient( 157 | 45deg, 158 | light-dark(#dddddd, #ffffff), 159 | light-dark(#eeeeee, #dddddd), 160 | light-dark(#dddddd, #bbbbbb), 161 | light-dark(#ffffff, #000000), 162 | light-dark(#eeeeee, #dddddd), 163 | light-dark(#dddddd, #ffffff) 164 | ); 165 | background-size: 200% 200%; 166 | animation: tab-hover-gradient 3.5s linear infinite; 167 | animation-play-state: paused; 168 | } 169 | } 170 | 171 | @media (-moz-pref("nebula-glow-gradient", 3)) { 172 | .unified-extensions-item::before { 173 | background: linear-gradient( 174 | 45deg, 175 | #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00 176 | ); 177 | background-size: 200% 200%; 178 | animation: tab-hover-gradient 3.5s linear infinite; 179 | animation-play-state: paused; 180 | } 181 | } 182 | 183 | @keyframes tab-hover-gradient { 184 | from { background-position: 0% 50%; } 185 | to { background-position: 200% 50%; } 186 | } 187 | 188 | } -------------------------------------------------------------------------------- /Nebula/modules/General-UI.css: -------------------------------------------------------------------------------- 1 | /* ------------------------- GENERAL ZEN UI ------------------------- */ 2 | 3 | /* Main UI tint */ 4 | #zen-main-app-wrapper { 5 | background: var(--nebula-ui-tint) !important; 6 | } 7 | 8 | /* Website background tint */ 9 | browser[transparent='true'] { 10 | background: var(--nebula-website-tint) !important; 11 | } 12 | 13 | /* Hide identity label for Bonjourr */ 14 | #identity-icon-label[value="Extension (Bonjourr · Minimalist Startpage)"] { 15 | display: none !important; 16 | } 17 | 18 | /* Global overrides */ 19 | :root { 20 | --attention-dot-color: transparent !important; 21 | --zen-themed-toolbar-bg-transparent: transparent !important; 22 | } 23 | 24 | :root[nebula-zen-gradient-contrast-zero] { 25 | --zen-main-browser-background: transparent !important; 26 | } 27 | 28 | /* Required for blur rendering */ 29 | browser { 30 | transform: translateZ(0); 31 | } 32 | 33 | /* ---------------------- TABS: NO SHADOW ---------------------- */ 34 | 35 | @media (-moz-pref("nebula-tabs-no-shadow")) { 36 | hbox.browserSidebarContainer, 37 | #zen-tabbox-wrapper { 38 | box-shadow: none !important; 39 | } 40 | } 41 | 42 | /* ---------------------- NOGAPS MOD ---------------------- */ 43 | 44 | @media (-moz-pref("nebula-nogaps-mod")) { 45 | 46 | hbox.browserSidebarContainer, 47 | #zen-tabbox-wrapper { 48 | box-shadow: none !important; 49 | } 50 | 51 | :root[zen-single-toolbar="true"] .browserSidebarContainer { 52 | border-top-left-radius: 0.1px !important; 53 | border-top-right-radius: 0.1px !important; 54 | } 55 | 56 | :root[zen-compact-mode="true"]:not([customizing]) .browserSidebarContainer { 57 | border-top-left-radius: 0.1px !important; 58 | border-top-right-radius: 0.1px !important; 59 | } 60 | 61 | :root[zen-right-side="true"]:not([zen-single-toolbar="true"]) .browserSidebarContainer{ 62 | border-top-left-radius: 0.1px !important; 63 | } 64 | 65 | :root:not([zen-right-side="true"]):not([zen-single-toolbar="true"]) .browserSidebarContainer{ 66 | border-top-right-radius: 0.1px !important; 67 | } 68 | 69 | .browserSidebarContainer { 70 | border-bottom-left-radius: 0.1px !important; 71 | border-bottom-right-radius: 0.1px !important; 72 | } 73 | 74 | #zen-tabbox-wrapper { 75 | margin: 0px !important; 76 | } 77 | 78 | :root[zen-single-toolbar="true"] { 79 | #zen-appcontent-navbar-wrapper { 80 | min-height: 0.1px !important; 81 | height: 0.1px !important; 82 | } 83 | 84 | #zen-appcontent-navbar-wrapper[zen-has-hover="true"] { 85 | height: 34px !important; 86 | } 87 | } 88 | 89 | @media -moz-pref("zen.view.compact.hide-toolbar") { 90 | :root[zen-compact-mode="true"]{ 91 | #zen-appcontent-navbar-wrapper { 92 | min-height: 0.1px !important; 93 | height: 0.1px !important; 94 | } 95 | 96 | #zen-appcontent-navbar-wrapper[zen-has-hover="true"] { 97 | height: 38px !important; 98 | } 99 | } 100 | } 101 | 102 | /* Tab Edits for split tab view */ 103 | .browserSidebarContainer[zen-split="true"] { 104 | margin: 0px !important; 105 | } 106 | 107 | #tabbrowser-tabbox[zen-split-view="true"] #tabbrowser-tabpanels { 108 | margin: 0px !important; 109 | position: relative; 110 | } 111 | 112 | .deck-selected { 113 | z-index: 1 !important; 114 | } 115 | 116 | .browserSidebarContainer:not(.deck-selected) { 117 | z-index: 0 !important; 118 | } 119 | 120 | .zen-split-view-splitter:hover { 121 | background: var(--zen-primary-color) !important; 122 | filter: brightness(0.5); 123 | } 124 | 125 | .zen-split-view-splitter[orient="vertical"] { 126 | width: 5px !important; 127 | margin-left: -3px !important; 128 | } 129 | 130 | .zen-split-view-splitter[orient="horizontal"] { 131 | height: 5px !important; 132 | margin-top: 3px !important; 133 | } 134 | } 135 | 136 | /* ------------------- FLOATING STATUSBAR ------------------- */ 137 | 138 | #statuspanel { 139 | margin: 12px !important; 140 | pointer-events: none !important; /* Prevent it from blocking clicks */ 141 | } 142 | 143 | #statuspanel-label { 144 | border-radius: 9px !important; 145 | padding: 4px 12px !important; 146 | font-size: 12.5px !important; 147 | 148 | border: 1px solid var(--nebula-color) !important; 149 | background: var(--nebula-color-glass) !important; 150 | backdrop-filter: blur(8px) saturate(140%) !important; 151 | box-shadow: 0 4px 14px var(--nebula-color-shadow) !important; 152 | } 153 | 154 | /* ------------------- MENU ANIMATIONS ------------------- */ 155 | 156 | @media not (-moz-pref("nebula-disable-menu-animations")) { 157 | :root { --nebula-menu-animation: true; } 158 | } 159 | 160 | /* Keyframes */ 161 | @keyframes nebula-menu-item-enter { 162 | 0% { opacity: 0; transform: translateY(-6px) scale(0.95); } 163 | 100% { opacity: 1; transform: translateY(0) scale(1); } 164 | } 165 | 166 | /* Animation class */ 167 | .nebula-menu-anim { 168 | animation: nebula-menu-item-enter 0.15s cubic-bezier(0.4, 0, 0.2, 1) both; 169 | backface-visibility: hidden; 170 | } 171 | 172 | /* ------------------ Ctrl Tab Styling ------------------- */ 173 | 174 | #nebula-ctrltab-background-below { 175 | background-color: light-dark(rgba(200, 200, 200, 1), rgba(20, 20, 20, 1)); 176 | border-radius: var(--nebula-border-radius); 177 | } 178 | 179 | #nebula-ctrltab-background-above { 180 | backdrop-filter: var(--nebula-glass); 181 | border-radius: var(--nebula-border-radius); 182 | } 183 | 184 | #ctrlTab-panel { 185 | --panel-background: var(--nebula-color-glass) !important; 186 | border-radius: calc(var(--nebula-border-radius) + 4px) !important; 187 | scale: 0.7; 188 | box-shadow: 0 4px 20px var(--nebula-color-shadow) !important; 189 | } 190 | 191 | #ctrlTab-panel:has(.ctrlTab-preview:not([hidden="true"])) { 192 | scale: 0.7 !important; 193 | border-radius: var(--nebula-border-radius); 194 | } 195 | 196 | /* Remove default focus/hover borders */ 197 | .ctrlTab-preview-inner { 198 | margin: 0 !important; 199 | border: none !important; 200 | border-radius: var(--nebula-border-radius) !important; 201 | transition: 202 | transform 0.2s ease-out, /* smoother scale */ 203 | background-color 0.2s ease-out, 204 | box-shadow 0.2s ease-out; 205 | } 206 | 207 | /* Hover effect for previews */ 208 | .ctrlTab-preview-inner:hover { 209 | transform: scale(1.03); 210 | box-shadow: 0 4px 15px var(--nebula-color-shadow); 211 | } 212 | 213 | /* Canvas inside each preview */ 214 | .ctrlTab-preview-inner .ctrlTab-canvas { 215 | border-radius: inherit !important; 216 | overflow: hidden; 217 | } 218 | 219 | /* Favicon container alignment */ 220 | .ctrlTab-preview-inner .ctrlTab-favicon-container { 221 | justify-content: center !important; 222 | } 223 | 224 | .ctrlTab-preview-inner .ctrlTab-favicon-container image { 225 | border-radius: 50% !important; 226 | } 227 | 228 | /* Label spacing */ 229 | .ctrlTab-preview-inner .ctrlTab-label { 230 | margin-top: 1.2em !important; 231 | } 232 | 233 | /* Focused / selected preview effect */ 234 | .ctrlTab-preview:focus > .ctrlTab-preview-inner { 235 | background-color: light-dark( 236 | rgba(255, 255, 255, 0.12), 237 | rgba(255, 255, 255, 0.08) 238 | ) !important; 239 | border-radius: var(--nebula-border-radius) !important; 240 | transform: scale(1.05); 241 | box-shadow: 0 6px 20px var(--nebula-color-shadow) !important; 242 | } 243 | -------------------------------------------------------------------------------- /Nebula/modules/URLbar.css: -------------------------------------------------------------------------------- 1 | /* ------------------ JS Pseudo Background ------------------ */ 2 | 3 | #Nebula-urlbar-background { 4 | position: absolute; 5 | z-index: -10; 6 | pointer-events: none; 7 | border-radius: 15px; 8 | opacity: 0; 9 | background-color: light-dark(rgba(200, 200, 200, 1), rgba(30, 30, 30, 1)); 10 | display: none; 11 | } 12 | 13 | #Nebula-urlbar-background.visible { 14 | opacity: 1; 15 | } 16 | 17 | /* ------------------ URLBar styling ------------------ */ 18 | 19 | /* URL bar background - default state */ 20 | .urlbar-background { 21 | background: var(--nebula-color) !important; 22 | box-shadow: 0 0px 3px transparent !important; 23 | border-radius: var(--nebula-border-radius) !important; 24 | backdrop-filter: 0px; 25 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 26 | } 27 | 28 | #urlbar:hover:not([open]) .urlbar-background { 29 | background-color: var(--nebula-color-hover) !important; 30 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 31 | } 32 | 33 | /* When URL bar is open - smooth visual effect */ 34 | #urlbar[open] .urlbar-background { 35 | border-radius: 15px !important; 36 | background: light-dark(rgba(255,255,255,0.85), rgba(0,0,0,0.4)) !important; 37 | outline: none !important; 38 | scale: 1.01 !important; 39 | } 40 | 41 | #urlbar[open] { 42 | box-shadow: 0 20px 40px var(--nebula-color-shadow); 43 | border-radius: 15px !important; 44 | overflow: hidden !important; 45 | backdrop-filter: var(--nebula-glass) !important; 46 | animation: fadeIn 0.2s ease-in !important; 47 | } 48 | 49 | /* Opacity for URL bar when opening */ 50 | @keyframes fadeIn { 51 | from { 52 | opacity: 0; 53 | } 54 | to { 55 | opacity: 1; 56 | } 57 | } 58 | 59 | /* ------------------ Results Rows Styling ------------------ */ 60 | 61 | /* Highlight selected row */ 62 | .urlbarView-row[selected] { 63 | background-color: light-dark(rgba(100, 100, 100, 1), rgba(255,255,255,0.1)) !important; 64 | } 65 | 66 | /* Rounded corners for all rows */ 67 | .urlbarView-row { 68 | border-radius: 12px !important; 69 | } 70 | 71 | /* Remove favicon background when row is selected */ 72 | .urlbarView-row-inner[selected] .urlbarView-favicon { 73 | background: none !important; 74 | } 75 | 76 | /* Invert search icon for dark mode */ 77 | @media (prefers-color-scheme: dark) { 78 | .urlbarView-favicon[src="chrome://global/skin/icons/search-glass.svg"] { 79 | filter: invert(1); 80 | } 81 | } 82 | 83 | /* ------------------ Misc Styling ------------------ */ 84 | 85 | .urlbarView-url { 86 | color: light-dark(rgba(90, 90, 90, 1), rgba(145, 145, 145, 1)) !important; 87 | } 88 | 89 | #identity-icon-box { 90 | background: none !important; 91 | } 92 | 93 | #urlbar-zoom-button { 94 | border-radius: calc(var(--nebula-border-radius) - 5px) !important; 95 | background-color: var(--nebula-color) !important; 96 | } 97 | 98 | /* Center text in URL bar */ 99 | /*#urlbar .urlbar-input, 100 | .urlbar-input-container { 101 | text-align: center !important; 102 | position: relative; 103 | }*/ 104 | 105 | /* ------------------ Links Animation ------------------ */ 106 | 107 | @keyframes url-links-appear { 108 | 0% { 109 | opacity: 0; 110 | transform: scale(0.95); 111 | } 112 | 60% { 113 | transform: scale(1.0); 114 | } 115 | 70% { 116 | opacity: 1; 117 | } 118 | 100% { 119 | opacity: 1; 120 | transform: scale(1); 121 | } 122 | } 123 | 124 | #urlbar-results .urlbarView-row { 125 | opacity: 0; 126 | animation: url-links-appear 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; 127 | } 128 | 129 | /* Staggered delay (50ms) for 5 results */ 130 | #urlbar-results .urlbarView-row:nth-child(1) { animation-delay: 0s; } 131 | #urlbar-results .urlbarView-row:nth-child(2) { animation-delay: 0.05s; } 132 | #urlbar-results .urlbarView-row:nth-child(3) { animation-delay: 0.1s; } 133 | #urlbar-results .urlbarView-row:nth-child(4) { animation-delay: 0.15s; } 134 | #urlbar-results .urlbarView-row:nth-child(5) { animation-delay: 0.2s; } 135 | 136 | /* ------------------ URLBar Website Animation ------------------ */ 137 | 138 | /* Style 1 - Default */ 139 | .browserStack { 140 | transition: all 0.3s cubic-bezier(0.175, 0.385, 0.12, 1) !important; 141 | } 142 | 143 | #browser:has(#urlbar[open]) .browserStack { 144 | scale: 1.075 !important; 145 | filter: brightness(70%) blur(16px) saturate(140%) !important; 146 | opacity: 1 !important; 147 | } 148 | 149 | /* Style 2 – Zoom out */ 150 | @media (-moz-pref("nebula-urlbar-animation", 2)) { 151 | .browserStack { 152 | transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; 153 | } 154 | 155 | #browser:has(#urlbar[open]) .browserStack { 156 | scale: 0.95 !important; 157 | filter: brightness(60%) blur(4px) !important; 158 | opacity: 1 !important; 159 | } 160 | } 161 | 162 | /* Style 3 – Desaturate and Darken */ 163 | @media (-moz-pref("nebula-urlbar-animation", 3)) { 164 | .browserStack { 165 | transition: all 0.3s cubic-bezier(0.175, 0.385, 0.12, 1) !important; 166 | } 167 | 168 | #browser:has(#urlbar[open]) .browserStack { 169 | filter: saturate(0%) brightness(20%) !important; 170 | opacity: 0.85 !important; 171 | scale: 1.05 !important; 172 | transition: all 0.25s cubic-bezier(0.175, 0.385, 0.12, 1) !important; 173 | } 174 | } 175 | 176 | /* Style 0 – No Animation */ 177 | @media (-moz-pref("nebula-urlbar-animation", 0)) { 178 | .browserStack { 179 | transition: none !important; 180 | } 181 | #browser:has(#urlbar[open]) .browserStack { 182 | filter: none !important; 183 | opacity: 1 !important; 184 | scale: 1 !important; 185 | } 186 | } 187 | 188 | /* ------------------ Link Hovering Gradient ------------------ */ 189 | 190 | #urlbar[open] #urlbar-results > * { 191 | position: relative; 192 | overflow: hidden; 193 | } 194 | 195 | #urlbar[open] #urlbar-results > *::before { 196 | content: ""; 197 | position: absolute; 198 | top: 0; 199 | left: 0; 200 | width: 100%; 201 | height: 100%; 202 | background: linear-gradient( 203 | 45deg, 204 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 205 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 206 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 207 | color-mix(in srgb, var(--zen-primary-color) 100%, black), 208 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 209 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 210 | ); 211 | background-size: 300% 100%; 212 | background-repeat: repeat-x; 213 | animation: urlbar-gradient 8s linear infinite; 214 | opacity: 0; 215 | filter: blur(20px) brightness(1) contrast(120%); 216 | transition: opacity 0.5s ease-in-out; 217 | z-index: -1; 218 | pointer-events: none; 219 | } 220 | 221 | /* Style 0 - No gradient */ 222 | @media (-moz-pref("nebula-glow-gradient", 0)) { 223 | #urlbar[open] #urlbar-results > *::before { 224 | display: none; 225 | } 226 | } 227 | 228 | /* Monochrome gradient (Style 2) */ 229 | @media (-moz-pref("nebula-glow-gradient", 2)) { 230 | #urlbar[open] #urlbar-results > *::before { 231 | background: linear-gradient( 232 | 45deg, 233 | light-dark(#dddddd, #ffffff), 234 | light-dark(#eeeeee, #dddddd), 235 | light-dark(#dddddd, #bbbbbb), 236 | light-dark(#ffffff, #000000), 237 | light-dark(#eeeeee, #dddddd), 238 | light-dark(#dddddd, #ffffff) 239 | ); 240 | background-size: 300% 100%; 241 | animation: urlbar-gradient 8s linear infinite; 242 | filter: blur(20px) brightness(1); 243 | } 244 | } 245 | 246 | /* RGB gradient (Style 3) */ 247 | @media (-moz-pref("nebula-glow-gradient", 3)) { 248 | #urlbar[open] #urlbar-results > *::before { 249 | background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00); 250 | background-size: 300% 100%; 251 | animation: urlbar-gradient 8s linear infinite; 252 | filter: blur(20px) brightness(1); 253 | } 254 | } 255 | 256 | /* Smooth opacity transition on hover */ 257 | #urlbar[open] #urlbar-results > *:hover::before { 258 | opacity: 0.81; 259 | } 260 | 261 | @keyframes urlbar-gradient { 262 | 0% { 263 | background-position: 0% 50%; 264 | } 265 | 100% { 266 | background-position: -300% 50%; 267 | } 268 | } 269 | -------------------------------------------------------------------------------- /Nebula/modules/Sound-icon.css: -------------------------------------------------------------------------------- 1 | /* ------------------------- QUIETIFY SOUND ICON ------------------------- */ 2 | 3 | @media not (-moz-pref("nebula-default-sound-style", 0)) { 4 | 5 | .tab-audio-button { 6 | display: none !important; 7 | } 8 | 9 | .tabbrowser-tab img { 10 | transition: opacity 0.3s ease-in-out; 11 | } 12 | 13 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) img { 14 | opacity: 0 !important; 15 | transition: opacity 0.1s !important; 16 | } 17 | 18 | .tab-icon-overlay { 19 | &:is([soundplaying], [muted], [activemedia-blocked]) { 20 | display: block !important; 21 | border: 0px !important; 22 | border-radius: 0px !important; 23 | top: 0px !important; 24 | right: 0px !important; 25 | scale: 1.3 !important; 26 | opacity: 0.9 !important; 27 | margin: 0px 3px !important; 28 | background: white !important; 29 | --play-svg: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%20135%20140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%22%3E%3Crect%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2230%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2260%22%20width%3D%2215%22%20height%3D%22140%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2290%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%22120%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3C%2Fsvg%3E"); 30 | --mute-svg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMzYgMTQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiPjxyZWN0IHg9IjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMzQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iNjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iOTQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMTI0IiB5PSI3MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iNiIvPjwvc3ZnPg=="); 31 | mask-size: 10px 10px !important; 32 | mask-repeat: no-repeat !important; 33 | mask-position: center !important; 34 | } 35 | 36 | @media (prefers-color-scheme: light) { 37 | &:is([soundplaying], [muted], [activemedia-blocked]) { 38 | filter: invert(1); 39 | } 40 | } 41 | 42 | &:is([activemedia-blocked]) { 43 | background: none !important; 44 | list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEb0lEQVR4nO2YW4hWVRTHP7URvM6ooWYa1kPlQ4GXxISyC4mUVg/RZQyjKLUsUcsmJRm8pqUgXSCRbhZCqT1mkARaWm+l9qK9jCKZ2KhUD4nWLxbuM/1ncfb3nfPNGaeH84cPPtZ/n7XX2pe1/3tXKiVKlChR4v8I4BZgFtCnB/q+AnjQYuiqo2bgby6htbAIs/e/KvRtMTxWr5PpwHn+w3uFR1o7hg+kf4vlnrwOrgHaxckp4Npuizgex3Wh7wS/AWOyftwH2C8f/wFM6Pao4/FMDDEk+BboneXDBXTGbMe/CvwKbOqGoFcCx4Hlzv64i2l+LUdXAmflg22Of9E5bCowif7O92LHfyLcGWBYNWerXePhwt0JXBT+G6BXUYmEPvaKf+trmnAj3CCvjDkZ5Bq2CDcwTHmCX4DRRSYR+hkNnJR+jgEDhH/FDfTANCdPukaDhXtNuL+AKe7Qmgc8kjNoKyrPAwuBBrHfGvpIsEa4wSG2BE+kOf5aGrwl9mGuarzhvtsqXOZkgOfku3cdt1G434Ghwr0t3B7vtNGt/8nCLXUzpU7nC5c+QvFEnnXfzhVuqFvmS4WbIvYLunIqQUslOKWbGDgk3GqxD3HTvE+XSGjTFxgXfn1TOPtGD7sm4dcId1DsvYHTwt2nTtcJ8anbfIrxkQrX7ipc/7A8zkkb+/860E/aDXeDsUq4Ca7vq4XbkbaHjNglRMdhZEJN7G1upn4W7mWXxHfEccAl0yLcEbH3cpXyUXcoJ9ihiRwU4qHIqOtM3Sh2U6YjIhs1hg3S/ipR2IYbhNtOyrkBPCz2HzURzfx2sW8T+2axPyD2Q27d63KK4awruT8Jd3+KjDd8KPZpYj+miZyJ7IPPI8tHK84XYrdNnRU68rvTdBSwROy7IvunPW8iLZGyuzuy5GrhevnuS7HP60oiurRuE/tHGZbW4R5eWm15N/tnkZG3jTpSOCuxtbBe2o8C/onM1PYMm/0HTWRnpPzanV0FnJbfo5Fl1y+U2Bj2u/K7rI7yuyJWftdGyuwYF8T4yLR7yW/JbHAyw/6vd0lEpTmXboaxA3FnmtowYmYViXI4okSb3L0+TaI0iERJ46pJlLVpZ0WQKNY2wb1eNJoAS9DxjmRl142qisa5btSeqdSnfg1PO8WtM/WScFPFbjEPqibj36wi4ze677YI15wjEbuLJNjiuE1VZPw7wn2V92K1zr0vTXUXq6dsM+a5+oZS/UKYmQY34ucjirvRzdScvFfdAa6CnMz8vtS1q26biVDhlwvXnnrVzfD4cIe7fH1f5OND2MQH3PpX3TfSHbattZ6DVK587PjFdEZjgYlY34pFjtfD0arWkLzVxD/Q2fSeUCleYDKbQ5DLnH1O7uoYXjfsWTKBVayJlR4CMAn4U+LZm+nJVE50/4g9ttujdrCHc/eIfVpP+EywJ3xXBjvV+ssB4H3p32K5q15HzVKpOp5kLheA1tD3RRWN9Tq7Cbi7sOjyl+QZwM090X+JEiVKlKjUwr/rwkME7dPwYwAAAABJRU5ErkJggg==") !important; 45 | width: 16px !important; 46 | height: 16px !important; 47 | margin: 0px 3px !important; 48 | } 49 | 50 | &:is([soundplaying]) { 51 | list-style-image: none !important; 52 | mask-image: var(--play-svg) !important; 53 | } 54 | 55 | &:is([muted]) { 56 | list-style-image: none !important; 57 | mask-image: var(--mute-svg) !important; 58 | } 59 | } 60 | 61 | @media 62 | (not (-moz-pref("zen.view.sidebar-expanded"))) 63 | and 64 | (-moz-pref("nebula-default-sound-style", 1)) 65 | { 66 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover 67 | img { 68 | opacity: 1 !important; 69 | transition: opacity 0.1s ease-out !important; 70 | } 71 | 72 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover 73 | .tab-icon-overlay { 74 | margin: 0px !important; 75 | transition: opacity 0.25s ease-out, transform 0.25s ease-out !important; 76 | transform: translate(6.9px, -6.9px) scale(0.69) !important; 77 | } 78 | 79 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-overlay { 80 | transition: opacity 0.25s ease-in, transform 0.25s ease-in !important; 81 | } 82 | } 83 | 84 | @media (-moz-pref("nebula-default-sound-style",2)) { 85 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) 86 | img { 87 | opacity: 1 !important; 88 | transition: opacity 0.1s ease-out !important; 89 | } 90 | 91 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) 92 | .tab-icon-overlay { 93 | margin: 0px !important; 94 | transition: opacity 0.25s ease-out, transform 0.25s ease-out !important; 95 | transform: translate(6.9px, -6.9px) scale(0.69) !important; 96 | } 97 | 98 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-overlay { 99 | transition: opacity 0.25s ease-in, transform 0.25s ease-in !important; 100 | } 101 | } 102 | 103 | #zen-essentials-container { 104 | .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { 105 | margin: 0px !important; 106 | } 107 | } 108 | } -------------------------------------------------------------------------------- /Nebula/modules/Animations(tabs).css: -------------------------------------------------------------------------------- 1 | /* ------------------------ Glance Animation ----------------------- */ 2 | 3 | .browserSidebarContainer.zen-glance-background.deck-selected { 4 | filter: blur(8px) contrast(120%); 5 | } 6 | 7 | .browserSidebarContainer.zen-glance-overlay { 8 | & .browserContainer { 9 | & .browserStack { 10 | box-shadow: none !important; 11 | } 12 | } 13 | } 14 | 15 | .zen-glance-sidebar-container { 16 | transform: translate(-15%, 15%) !important; 17 | } 18 | 19 | /* Floating Glance window */ 20 | .browserStack > browser[zen-glance-selected="true"] { 21 | position: absolute !important; 22 | background: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4)) !important; 23 | top: 5% !important; 24 | left: 1% !important; 25 | width: 98% !important; 26 | height: 90% !important; 27 | border-radius: 13px !important; 28 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0); 29 | transition: box-shadow 0.3s ease-out !important; 30 | } 31 | 32 | .browserStack > browser[zen-glance-selected="true"]:hover { 33 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; 34 | } 35 | 36 | /* ---------------------- Tab Loading Animation ---------------------- */ 37 | 38 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 39 | transform-origin: center; 40 | transition: transform 0.2s ease-out !important, 41 | filter 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important; 42 | } 43 | 44 | #main-window:has(.tabbrowser-tab[selected][busy]) 45 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 46 | transform: scale(0.978) !important; 47 | transition-delay: 0.5s !important; 48 | border-radius: 8px !important; 49 | } 50 | 51 | @media (-moz-pref("nebula-tab-loading-animation", 2)) { 52 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 53 | transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important, 54 | filter 0.28s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important; 55 | } 56 | #main-window:has(.tabbrowser-tab[selected][busy]) 57 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 58 | filter: blur(16px) brightness(65%) !important; 59 | transform: scale(0.955) !important; 60 | transition-delay: 0.5s !important; 61 | border-radius: 8px !important; 62 | } 63 | } 64 | 65 | @media (-moz-pref("nebula-tab-loading-animation", 3)) { 66 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 67 | transition: transform 0.2s cubic-bezier(0.2, 0.75, 0.32, 1.4) !important, 68 | filter 0.3s cubic-bezier(0.2, 0.75, 0.32, 1.3) !important; 69 | } 70 | #main-window:has(.tabbrowser-tab[selected][busy]) 71 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 72 | filter: blur(12px) opacity(0.6) !important; 73 | transform: scale(0.975) !important; 74 | transition-delay: 0.5s !important; 75 | border-radius: 8px !important; 76 | } 77 | } 78 | 79 | @media (-moz-pref("nebula-tab-loading-animation", 4)) { 80 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 81 | transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important, 82 | filter 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important; 83 | } 84 | #main-window:has(.tabbrowser-tab[selected][busy]) 85 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 86 | filter: grayscale(100%) brightness(65%) !important; 87 | transform: scale(0.978) !important; 88 | transition-delay: 0.5s !important; 89 | border-radius: 8px !important; 90 | } 91 | } 92 | 93 | @media (-moz-pref("nebula-tab-loading-animation", 5)) { 94 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 95 | transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important, 96 | filter 0.2s cubic-bezier(0.2, 0.8, 0.4, 1) !important; 97 | } 98 | #main-window:has(.tabbrowser-tab[selected][busy]) 99 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 100 | filter: saturate(0%) brightness(60%) blur(6px) !important; 101 | transform: scale(0.99) !important; 102 | transition-delay: 0.5s !important; 103 | } 104 | } 105 | 106 | @media (-moz-pref("nebula-tab-loading-animation", 6)) { 107 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 108 | transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important, 109 | filter 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.2) !important; 110 | } 111 | #main-window:has(.tabbrowser-tab[selected][busy]) 112 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 113 | filter: blur(8px) brightness(65%) !important; 114 | transform: scale(0.978) !important; 115 | transition-delay: 0.5s !important; 116 | border-radius: 8px !important; 117 | } 118 | } 119 | 120 | @media (-moz-pref("nebula-tab-loading-animation", 0)) { 121 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 122 | transition: none !important; 123 | } 124 | #main-window:has(.tabbrowser-tab[selected][busy]) 125 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)), 126 | #main-window:has(.tabbrowser-tab[selected]:not([busy])) 127 | .browserSidebarContainer:not([zen-split="true"]):not(:has(.zen-glance-background)) { 128 | filter: none !important; 129 | transform: none !important; 130 | transition-delay: 0s !important; 131 | } 132 | } 133 | 134 | /* --------------------- Tab Switch Animation --------------------- */ 135 | 136 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 137 | transition: all 0.2s ease !important; 138 | scale: 0.975 !important; 139 | opacity: 1; 140 | } 141 | 142 | 143 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 144 | scale: 1 !important; 145 | opacity: 1 !important; 146 | filter: none !important; 147 | 148 | } 149 | 150 | @media (-moz-pref("nebula-tab-switch-animation", 2)) { 151 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 152 | transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease-out !important; 153 | scale: 0.95 !important; 154 | opacity: 1; 155 | filter: blur(0px) !important; 156 | } 157 | 158 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 159 | scale: 1 !important; 160 | opacity: 1 !important; 161 | filter: none !important; 162 | } 163 | } 164 | 165 | @media (-moz-pref("nebula-tab-switch-animation", 3)) { 166 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 167 | transition: all 0.24s cubic-bezier(0.3, 0.6, 0.3, 1.2) !important; 168 | scale: 0.98 !important; 169 | transform: translateY(10px); 170 | opacity: 1; 171 | } 172 | 173 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 174 | scale: 1 !important; 175 | transform: none; 176 | opacity: 1 !important; 177 | filter: none !important; 178 | } 179 | } 180 | 181 | 182 | @media (-moz-pref("nebula-tab-switch-animation", 4)) { 183 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 184 | transition: all 0.2s ease; 185 | opacity: 0 !important; 186 | scale: 0.975 !important; 187 | position: absolute !important; 188 | inset: 0; 189 | } 190 | 191 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 192 | opacity: 1 !important; 193 | pointer-events: auto !important; 194 | position: relative !important; 195 | z-index: 1; 196 | } 197 | } 198 | 199 | 200 | @media (-moz-pref("nebula-tab-switch-animation", 5)) { 201 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 202 | transform: scale(1.05); 203 | filter: blur(15px); 204 | opacity: 1; 205 | transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s; 206 | will-change: transform, filter, opacity; 207 | } 208 | 209 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 210 | transform: scale(1); 211 | opacity: 1 !important; 212 | filter: none !important; 213 | } 214 | } 215 | 216 | @media (-moz-pref("nebula-tab-switch-animation", 0)) { 217 | #tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 218 | transition: none !important; 219 | scale: 1 !important; 220 | opacity: 1 !important; 221 | filter: none !important; 222 | } 223 | 224 | #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]):not(.zen-glance-background):not(:has(.zen-glance-background)) { 225 | scale: 1 !important; 226 | opacity: 1 !important; 227 | filter: none !important; 228 | } 229 | } 230 | 231 | /* ------------------ Custom Split View Animation ------------------- */ 232 | 233 | @media not (-moz-pref("nebula-tab-switch-animation", 0)) { 234 | @keyframes scaleAndBrighten { 235 | 236 | 0% { 237 | transform: scale(0.95); 238 | opacity: 0; 239 | filter: brightness(0); 240 | } 241 | 242 | 50% { 243 | filter: brightness(0); 244 | } 245 | 246 | 100% { 247 | transform: scale(1); 248 | opacity: 1; 249 | filter: brightness(1); 250 | } 251 | } 252 | 253 | #tabbrowser-tabpanels[zen-split-view="true"] { 254 | transition: none !important; 255 | } 256 | 257 | #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer { 258 | 259 | animation: scaleAndBrighten 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards; 260 | } 261 | } -------------------------------------------------------------------------------- /Nebula/modules/Workspace-buttons.css: -------------------------------------------------------------------------------- 1 | /* --------------------------- Workspace Creation --------------------------- */ 2 | 3 | .zen-workspace-creation-name-wrapper, 4 | .zen-workspace-creation-profile-wrapper, 5 | .zen-workspace-creation-edit-theme-button { 6 | background-color: var(--nebula-color) !important; 7 | border-radius: var(--nebula-border-radius) !important; 8 | box-shadow: 0 0px 3px transparent !important; 9 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 10 | } 11 | 12 | .zen-workspace-creation-name-wrapper:hover, 13 | .zen-workspace-creation-profile-wrapper:hover, 14 | .zen-workspace-creation-edit-theme-button:hover { 15 | background-color: var(--nebula-color-hover) !important; 16 | box-shadow: 0 0px 3px var(--nebula-color-shadow) !important; 17 | } 18 | 19 | button.zen-workspace-creation-profile, 20 | .zen-current-workspace-indicator toolbarbutton > .toolbarbutton-icon { 21 | border-radius: calc(var(--nebula-border-radius) - 4px) !important; 22 | } 23 | 24 | .zen-workspace-creation-buttons button { 25 | border-radius: var(--nebula-border-radius) !important; 26 | } 27 | 28 | /* --------------------------- Workspace Indicator -------------------------- */ 29 | 30 | .zen-current-workspace-indicator-name { 31 | font-weight: 600; 32 | } 33 | 34 | #zen-workspaces-button toolbarbutton[dragged="true"] { 35 | outline: none !important; 36 | } 37 | 38 | /* Hover background for workspace indicator */ 39 | .zen-current-workspace-indicator::before { 40 | border-radius: var(--nebula-border-radius) !important; 41 | box-shadow: 0 0px 3px transparent !important; 42 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 43 | } 44 | 45 | .zen-current-workspace-indicator:hover::before { 46 | background-color: var(--nebula-color) !important; 47 | box-shadow: 0 0px 3px var(--nebula-color-shadow) !important; 48 | z-index: -1 !important; 49 | } 50 | 51 | /* ----------------------------- Workspace Button ---------------------------- */ 52 | 53 | /* Necessary fix to prevent button resizing */ 54 | #zen-workspaces-button toolbarbutton { 55 | flex-shrink: 0 !important; 56 | width: auto !important; 57 | max-width: none !important; 58 | min-width: 26px !important; 59 | } 60 | 61 | #zen-workspaces-button { 62 | container-type: initial !important; 63 | width: auto !important; 64 | padding: 3px !important; 65 | border-radius: calc(var(--nebula-border-radius) - 2px) !important; 66 | transition: box-shadow 0.3s ease, 67 | background-color 0.3s ease; 68 | } 69 | 70 | #zen-workspaces-button .subviewbutton { 71 | border-radius: calc(var(--nebula-border-radius) - 4.5px) !important; 72 | font-size: 16px !important; 73 | opacity: 0.75 !important; 74 | filter: grayscale(var(--nebula-workspace-grayscale, 100%)) !important; 75 | transition: background-color 0.2s ease, 76 | filter 0.3s ease, 77 | opacity 0.3s ease-out, 78 | transform 0.2s ease !important; 79 | } 80 | 81 | #zen-workspaces-button .subviewbutton:hover { 82 | filter: grayscale(0%) !important; 83 | opacity: 0.9 !important; 84 | } 85 | 86 | #zen-workspaces-button .subviewbutton:hover > img, 87 | #zen-workspaces-button .subviewbutton:hover > svg { 88 | opacity: 1 !important; 89 | } 90 | 91 | #zen-workspaces-button .subviewbutton:active { 92 | filter: grayscale(0%) !important; 93 | transform: scale(0.85) !important; 94 | } 95 | 96 | #zen-workspaces-button .subviewbutton:active:hover { 97 | transform: scale(0.9) !important; 98 | } 99 | 100 | #zen-workspaces-button .subviewbutton[active] { 101 | position: relative; 102 | overflow: hidden !important; 103 | filter: grayscale(0%) !important; 104 | opacity: 1 !important; 105 | transition: transform 0.15s ease-out !important; 106 | } 107 | 108 | /* ------------------------- Style 1 (Default) ------------------------------- */ 109 | 110 | @media not ((-moz-pref("nebula-workspace-style", 0)) or 111 | (-moz-pref("nebula-workspace-style", 2))) { 112 | 113 | #zen-workspaces-button { 114 | background-color: var(--nebula-color-min) !important; 115 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0) !important; 116 | } 117 | 118 | #zen-workspaces-button:hover { 119 | background-color: var(--nebula-color-hover) !important; 120 | box-shadow: 0 2px 12px var(--nebula-color-shadow) !important; 121 | } 122 | 123 | #zen-workspaces-button .subviewbutton { 124 | --toolbarbutton-hover-background: color-mix(in srgb, 125 | var(--zen-branding-bg-reverse) 10%, 126 | transparent 90%) !important; 127 | } 128 | 129 | #zen-workspaces-button .subviewbutton:hover { 130 | background-color: light-dark(rgba(255, 255, 255, 0), 131 | rgba(100, 100, 100, 0)) !important; 132 | } 133 | 134 | #zen-workspaces-button .subviewbutton:active { 135 | background-color: var(--toolbarbutton-active-background) !important; 136 | } 137 | 138 | #zen-workspaces-button .subviewbutton[active] { 139 | background-color: light-dark(rgba(255, 255, 255, 0.12), 140 | rgba(255, 255, 255, 0.07)) !important; 141 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important; 142 | } 143 | } 144 | 145 | /* ----------------------- Styles 0 & 2 (Shared) ----------------------------- */ 146 | 147 | @media ((-moz-pref("nebula-workspace-style", 0)) or 148 | (-moz-pref("nebula-workspace-style", 2))) { 149 | 150 | #zen-workspaces-button { 151 | height: 30px !important; 152 | position: relative !important; 153 | overflow: visible !important; 154 | z-index: 1; 155 | } 156 | 157 | html:not([zen-sidebar-expanded="true"]):not([zen-single-toolbar="true"]) 158 | #zen-workspaces-button { 159 | height: auto !important; 160 | width: 30px !important; 161 | } 162 | 163 | #zen-workspaces-button .subviewbutton { 164 | display: flex !important; 165 | align-items: center !important; 166 | justify-content: center !important; 167 | height: 40px !important; 168 | border-radius: 12px !important; 169 | font-size: 1.25em !important; 170 | transform: scale(1) !important; 171 | transform-origin: bottom center !important; 172 | transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 173 | filter 0.35s ease, 174 | opacity 0.3s ease-out, 175 | color 0.3s ease-out !important; 176 | color: transparent !important; 177 | background-color: transparent !important; 178 | box-shadow: none !important; 179 | animation: none !important; 180 | --toolbarbutton-hover-background: unset !important; 181 | } 182 | 183 | #zen-workspaces-button .subviewbutton:hover { 184 | transform: scale(1.4) !important; 185 | opacity: 1 !important; 186 | z-index: 3 !important; 187 | color: inherit !important; 188 | } 189 | 190 | #zen-workspaces-button .subviewbutton:active { 191 | transform: scale(1) !important; 192 | filter: grayscale(var(--nebula-workspace-grayscale, 100%)) !important; 193 | } 194 | 195 | #zen-workspaces-button .subviewbutton:active:hover { 196 | transform: scale(1) !important; 197 | } 198 | 199 | #zen-workspaces-button .subviewbutton[active] { 200 | background-color: transparent !important; 201 | box-shadow: none !important; 202 | overflow: unset !important; 203 | position: static !important; 204 | animation: none !important; 205 | color: inherit !important; 206 | } 207 | 208 | /* Sibling hover effects */ 209 | #zen-workspaces-button .subviewbutton:hover + .subviewbutton:not([active]), 210 | #zen-workspaces-button .subviewbutton:has(+ .subviewbutton:hover):not([active]) { 211 | transform: scale(1.15) !important; 212 | opacity: 0.9 !important; 213 | z-index: 2 !important; 214 | transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 215 | opacity 0.3s ease-out; 216 | } 217 | 218 | #zen-workspaces-button .subviewbutton:hover + .subviewbutton + .subviewbutton:not([active]), 219 | #zen-workspaces-button .subviewbutton:has(+ .subviewbutton + .subviewbutton:hover):not([active]) { 220 | transform: scale(1) !important; 221 | opacity: 0.85 !important; 222 | z-index: 1 !important; 223 | transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 224 | opacity 0.3s ease-out; 225 | } 226 | 227 | #zen-workspaces-button .subviewbutton[active]:hover { 228 | transform: scale(1.2) !important; 229 | z-index: 2 !important; 230 | } 231 | 232 | /* Indicator dot */ 233 | #zen-workspaces-button .subviewbutton::before { 234 | content: "•"; 235 | position: absolute; 236 | top: 50%; 237 | left: 50%; 238 | transform: translate(-50%, -56.5%); 239 | font-size: 2em; 240 | color: light-dark(white, rgba(255, 255, 255, 0.35)); 241 | opacity: 1; 242 | pointer-events: none; 243 | transition: opacity 0.3s ease; 244 | } 245 | 246 | #zen-workspaces-button .subviewbutton:hover::before, 247 | #zen-workspaces-button .subviewbutton[active]::before { 248 | opacity: 0; 249 | } 250 | } 251 | 252 | /* ----------------------------- Style 0 (No Background) --------------------------- */ 253 | 254 | @media (-moz-pref("nebula-workspace-style", 0)) { 255 | #zen-workspaces-button, 256 | #zen-workspaces-button:hover { 257 | background-color: transparent !important; 258 | box-shadow: none !important; 259 | } 260 | } 261 | 262 | /* ------------------------ Style 2 (With Background) ------------------------ */ 263 | 264 | @media (-moz-pref("nebula-workspace-style", 2)) { 265 | #zen-workspaces-button { 266 | background-color: var(--nebula-color-min) !important; 267 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0) !important; 268 | } 269 | 270 | #zen-workspaces-button:hover { 271 | background-color: var(--nebula-color-hover) !important; 272 | box-shadow: 0 2px 12px var(--nebula-color-shadow) !important; 273 | } 274 | } 275 | 276 | /* ----------------------------- Config Options ------------------------------ */ 277 | 278 | /* Option: Remove workspace name */ 279 | @media (-moz-pref("nebula-remove-workspace-indicator")) { 280 | .zen-current-workspace-indicator { 281 | display: none !important; 282 | } 283 | 284 | #zen-tabs-wrapper { 285 | padding-top: 4px; /* Add missing padding */ 286 | } 287 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |Nebula is a minimal theme made for Zen Browser which adds a lot of new animations, glass-like blur, UI changes, and more. It is inspired by glassmorphism and minimal gradients.
This is my personal userChrome which I made to personalize Zen to my own liking. ❤️
If some of you don't like the design choices I made, you can edit the userChrome yourself if you know how to code, and if you don't, you can use ChatGPT to customize it as per your preference.
39 |
40 |
41 |
42 |
It is so crazy to me that Nebula has become one of the biggest mods for Zen Browser in such a short period of time! really appreciate it
47 | 48 | ### 49 | 50 | ## 💫 Nebula with Sine Installation Guide 51 | 52 | Follow these steps to install and apply the **Nebula** theme to Zen Browser: 53 | 54 | 1. 📝 **Install Sine** 55 | - Go to [Sine's Github](https://github.com/CosmoCreeper/Sine/tree/main) and follow its installation process. 56 | - This includes downloading and setting up FX-Autoconfig using the auto installer or manual installation. 57 | - Then setting up Sine. 58 | 59 | 2. 💎 **Installing Nebula through Sine's Marketplace** 60 | - Go to settings and click **Sine**, from there a Marketplace will load where Nebula will be shown as a mod to install. 61 | - Click the install button and Nebula should be installed as a mod. 62 | 63 |  64 | 65 | 3. ⚙️ **Enable Transparent Tabs** 66 | - Go to `about:config` in Zen. 67 | - Search for `browser.tabs.allow_transparent_browser`. 68 | - If visible, set it to `true`. 69 | 70 | 4. 🖼️ **Install Wallpapers (Optional)** 71 | - Download `wallpapers.zip` from this [Link](https://github.com/JustAdumbPrsn/Zen-Nebula/releases/download/v3.1/Wallpapers.rar). 72 | 73 | - Extract and use them as desired. 74 | 75 | 76 | ### 77 | 78 |
100 | • To get real backdrop filter transparency (note: that this method provides a better blur effect than the transparent zen extension by sameerasw), go to "https://github.com/MicaForEveryone/MicaForEveryone" and install the app.
101 | • Click the "+ Add new Rule" at the bottom left and "Add process rule" for "zen".
102 | • NOTE: If you have "Show Accent color on title bars and window borders" enabled in Windows 11 settings, please disable it for transparency to work.
103 |
107 | • Also, please make sure your Zen theme color contrast is set to 0 for it to look transparent. 108 |
109 |• Change the Backdrop type to Acrylic and enable blur behind in advanced options.
• Restart Zen and see how it looks.
• To get real backdrop filter transparency, go to "https://github.com/taj-ny/kwin-effects-forceblur" and install the app.
• It's required to install 'kwin-effects-forceblur' from AUR then go to System Settings -> Windows -> Desktop Effecs, disable Blur and enable Better Blur and in Better Blur settings go to 'Force blur' tab and add 'zen' to list of classes of windows.
• NOTE: If Zen was installed from AUR as "zen-browser-bin", then in KDE put the name "zen-browser" for blur Here is the blur configuration:
• First, make Zen transparent by setting zen.widget.linux.transparency to true in about:config.
• Next, install the Blur My Shell extension, open its settings, go to the Application tab, and enable Application Blur.
• Turn off Opaque focused window and set the Opacity slider to maximum to avoid weird artifacts.
• Add zen to the whitelist and you’re done — you now have a smooth, blurred Zen interface!
• (Optional) If you want the same look as my setup, you can copy my Blur My Shell configuration shown in the screenshot.
• Go to "https://addons.mozilla.org/en-US/firefox/addon/bonjourr-startpage/" and install this extension.
• The new tab must be replaced by this now. On the bottom right, you will see a settings button for new tab. Change the settings to these:
• In the section where it says "Add custom CSS", add this code to change font of newtab and make it transparent:
159 | 160 | ```css 161 | @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap'); 162 | 163 | body, h1, h2, h3, h4, h5, h6, p, span, div { 164 | font-family: 'Comfortaa', sans-serif !important; 165 | font-weight: 300 !important; 166 | letter-spacing: 0.015em; 167 | font-smooth: always; 168 | -webkit-font-smoothing: antialiased; 169 | -moz-osx-font-smoothing: grayscale; 170 | transition: color 0.3s ease, text-shadow 0.3s ease; 171 | } 172 | 173 | /* Light mode */ 174 | @media (prefers-color-scheme: light) { 175 | body, h1, h2, h3, h4, h5, h6, p, span, div { 176 | color: #222222; 177 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.15); 178 | } 179 | } 180 | 181 | /* Dark mode */ 182 | @media (prefers-color-scheme: dark) { 183 | body, h1, h2, h3, h4, h5, h6, p, span, div { 184 | color: #e0e0e0; 185 | text-shadow: 0 0 1px rgba(255, 255, 255, 0.2); 186 | } 187 | } 188 | 189 | h1 { 190 | font-weight: 400 !important; 191 | letter-spacing: 0.025em; 192 | } 193 | 194 | p { 195 | font-weight: 300 !important; 196 | line-height: 1.6; 197 | letter-spacing: 0.015em; 198 | } 199 | #background { 200 | background-color: transparent !important; 201 | } 202 | #background {background-image: none !important; background-color: transparent !important;} 203 | .tabbing {background-color: transparent !important;} 204 | body {background-color: transparent !important;} 205 | #background-wrapper { 206 | opacity: 0 !important; 207 | } 208 | ``` 209 | ### 210 | 211 | 212 | 213 | 214 |• First pin an extension normally, it should be somewhere in the top bar like default zen
• Now, right click on the sidebar and go to customize toolbar mode, from there drag the extension from the top bar to above essentials (or you can say below the URLbar) it would look a bit weird but press save changes and it should look perfect
• In my personal opinion, place the bonjourr extension above essentials so you can easily open a new tab by clicking it
You are totally free to make forks of this or put this in your chrome file and create or modify it according to yourself. It is suggested to credit me if you use my theme. Thanks for using Nebula 🫶🏻
238 | 239 | 240 | ## 🙌 Credits 241 | 242 | Here are some awesome projects that inspired or contributed to this project: 243 | 244 | - 🔗 [Lacuna by Tanay-Kar](https://github.com/Tanay-Kar/Lacuna) 245 | - 🌐 [Natsumi Browser by greeeen-dev](https://github.com/greeeen-dev/natsumi-browser) 246 | - 🧠 [My Internet by sameerasw](https://github.com/sameerasw/my-internet) 247 | - 🍍 [Pineapple Fried by TheBigWazz](https://github.com/TheBigWazz/Pineapple-Fried) 248 | - 🧩 [Advanced Tab Groups by TFFC-Anoms12](https://github.com/TFFC-Anoms12/Advanced-Tab-Groups) 249 | - 💻 [NoGaps by Comp-Tech-Guy](https://github.com/Comp-Tech-Guy/No-Gaps) 250 | 251 | --- 252 | If I missed anyone, kindly let me know! 😊 253 | 254 | ### 255 | 256 | > [!NOTE] 257 | > There might be some issues with this theme, please report them to me if you experience something unusual, i will try to fix/clarify it. Also this mod has only been tested by me on a windows 11 computer so if Linux and MacOS versions are not working properly then i can't really do anything about it :( 258 | -------------------------------------------------------------------------------- /preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "text", 4 | "label": "🌎 General Settings", 5 | "margin": "30px 0 30px 0", 6 | "size": "20px" 7 | }, 8 | { 9 | "type": "separator", 10 | "label": "🔭 Tab Animations", 11 | "margin": "15px 0 15px 0" 12 | }, 13 | { 14 | "type": "dropdown", 15 | "property": "nebula-tab-switch-animation", 16 | "label": "Tab Switch Animation", 17 | "value": "number", 18 | "default": 1, 19 | "placeholder": false, 20 | "options": [ 21 | { "label": "No Animation", "value": 0 }, 22 | { "label": "Default", "value": 1 }, 23 | { "label": "Bounce Up", "value": 3 }, 24 | { "label": "Bounce Smooth", "value": 2 }, 25 | { "label": "Crossfade", "value": 4 }, 26 | { "label": "Zoom Out", "value": 5 } 27 | ] 28 | }, 29 | { 30 | "type": "dropdown", 31 | "property": "nebula-tab-loading-animation", 32 | "label": "Tab Loading Animation", 33 | "value": "number", 34 | "default": 1, 35 | "placeholder": false, 36 | "options": [ 37 | { "label": "No Animation", "value": 0 }, 38 | { "label": "Default", "value": 1 }, 39 | { "label": "Scale Blur", "value": 3 }, 40 | { "label": "More Blur", "value": 2 }, 41 | { "label": "Grayscale", "value": 4 }, 42 | { "label": "Grayscale + Blur", "value": 5 }, 43 | { "label": "Blur (Old Default)", "value": 6 } 44 | ] 45 | }, 46 | { 47 | "type": "separator", 48 | "label": "🛰️ URL Bar Animations", 49 | "margin": "15px 0 15px 0" 50 | }, 51 | { 52 | "type": "dropdown", 53 | "property": "nebula-urlbar-animation", 54 | "label": "URL Bar Animation", 55 | "value": "number", 56 | "default": 1, 57 | "placeholder": false, 58 | "options": [ 59 | { "label": "No Animation", "value": 0 }, 60 | { "label": "Default", "value": 1 }, 61 | { "label": "Scale Down", "value": 2 }, 62 | { "label": "Grayscale", "value": 3 } 63 | ] 64 | }, 65 | { 66 | "type": "separator", 67 | "label": "🔖 Bookmark bar", 68 | "margin": "15px 0 15px 0" 69 | }, 70 | { 71 | "type": "dropdown", 72 | "value": "number", 73 | "property": "nebula-bookmarks-autohide", 74 | "label": "Automatically hide the bookmarks bar ", 75 | "default": 0, 76 | "placeholder": false, 77 | "options": [ 78 | {"label": "Disable","value": 0}, 79 | {"label": "Display if hovered over topbar","value": 1}, 80 | {"label": "Display when search","value": 2}, 81 | {"label": "Display in both cases","value": 3} 82 | ] 83 | }, 84 | { 85 | "type": "separator", 86 | "label": "🛸 Glow Effects", 87 | "margin": "15px 0 15px 0" 88 | }, 89 | { 90 | "type": "dropdown", 91 | "property": "nebula-glow-gradient", 92 | "label": "Hover Glow Animations", 93 | "value": "number", 94 | "default": 1, 95 | "placeholder": false, 96 | "options": [ 97 | { "label": "None", "value": 0 }, 98 | { "label": "Zen Color", "value": 1 }, 99 | { "label": "Monochrome", "value": 2 }, 100 | { "label": "RGB", "value": 3 } 101 | ] 102 | }, 103 | { 104 | "type": "dropdown", 105 | "property": "nebula-active-tab-glow", 106 | "label": "Active Tab Glow", 107 | "value": "number", 108 | "default": 0, 109 | "placeholder": false, 110 | "options": [ 111 | { "label": "None", "value": 0 }, 112 | { "label": "Zen color", "value": 1 }, 113 | { "label": "Tab Icon Color", "value": 2 } 114 | ], 115 | "margin": "12px 0" 116 | }, 117 | { 118 | "type": "separator", 119 | "label": "☄️ Workspace Buttons", 120 | "margin": "15px 0 15px 0" 121 | }, 122 | { 123 | "type": "dropdown", 124 | "property": "nebula-workspace-style", 125 | "label": "Workspace Button Style", 126 | "value": "number", 127 | "default": 1, 128 | "placeholder": false, 129 | "options": [ 130 | { "label": "No background", "value": 0 }, 131 | { "label": "Default", "value": 1 }, 132 | { "label": "MacOS Dock Inspired", "value": 2 } 133 | ] 134 | }, 135 | { 136 | "type": "separator", 137 | "label": "🌟 Audio Buttons", 138 | "margin": "15px 0 15px 0" 139 | }, 140 | { 141 | "type": "dropdown", 142 | "property": "nebula-default-sound-style", 143 | "label": "Audio Button Style", 144 | "value": "number", 145 | "default": 1, 146 | "placeholder": false, 147 | "options": [ 148 | { "label": "Disable", "value": 0 }, 149 | { "label": "Default", "value": 1 }, 150 | { "label": "Floating", "value": 2 } 151 | ] 152 | }, 153 | { 154 | "type": "separator", 155 | "label": "🚥 Window Control Buttons", 156 | "margin": "15px 0 15px 0" 157 | }, 158 | { 159 | "type": "checkbox", 160 | "property": "nebula-macos-style-buttons", 161 | "label": "Enable macOS-style window control buttons" 162 | }, 163 | { 164 | "type": "checkbox", 165 | "property": "zen.view.experimental-force-window-controls-left", 166 | "label": "Force window controls to left side (Restart)" 167 | }, 168 | 169 | { 170 | "type": "separator", 171 | "label": "", 172 | "margin": "15px 0 15px 0" 173 | }, 174 | 175 | { 176 | "type": "text", 177 | "label": "🌙 Config Options", 178 | "margin": "15px 0 30px 0", 179 | "size": "20px" 180 | }, 181 | { 182 | "type": "checkbox", 183 | "property": "nebula-tabs-no-shadow", 184 | "label": "Disable the shadow around web view", 185 | "margin": "12px 0" 186 | }, 187 | { 188 | "type": "checkbox", 189 | "property": "nebula-disable-container-styling", 190 | "label": "Disable container tab styling", 191 | "margin": "12px 0" 192 | }, 193 | { 194 | "type": "checkbox", 195 | "property": "nebula-pinned-tabs-bg", 196 | "label": "Disable background on pinned tabs", 197 | "margin": "12px 0" 198 | }, 199 | { 200 | "type": "checkbox", 201 | "property": "nebula-remove-workspace-indicator", 202 | "label": "Disable workspace indicator", 203 | "margin": "12px 0" 204 | }, 205 | { 206 | "type": "checkbox", 207 | "property": "nebula-turn-off-zen-menu-icon", 208 | "label": "Disable the Zen icon from menu button", 209 | "margin": "12px 0" 210 | }, 211 | { 212 | "type": "checkbox", 213 | "property": "nebula-disable-menu-animations", 214 | "label": "Disable the Context Menu Animations", 215 | "margin": "12px 0" 216 | }, 217 | { 218 | "type": "checkbox", 219 | "property": "nebula-essentials-gray-icons", 220 | "label": "Enable gray out essentials icons when idle", 221 | "margin": "12px 0" 222 | }, 223 | { 224 | "type": "checkbox", 225 | "property": "nebula-folder-styling", 226 | "label": "Enable Zen Folders styling", 227 | "margin": "12px 0" 228 | }, 229 | { 230 | "type": "checkbox", 231 | "property": "nebula-nogaps-mod", 232 | "label": "Enable NoGaps mod", 233 | "margin": "12px 0" 234 | }, 235 | { 236 | "type": "checkbox", 237 | "property": "nebula-pinned-extensions-mod", 238 | "label": "Enable pinned extensions mod (see GitHub for setup)", 239 | "margin": "12px 0" 240 | }, 241 | 242 | { 243 | "type": "separator", 244 | "label": "", 245 | "margin": "15px 0 15px 0" 246 | }, 247 | 248 | { 249 | "type": "text", 250 | "label": "🪐 Config Variables", 251 | "margin": "15px 0 30px 0", 252 | "size": "20px" 253 | }, 254 | { 255 | "type": "separator", 256 | "label": "✨ Glass & Blur Effects", 257 | "margin": "15px 0 15px 0" 258 | }, 259 | { 260 | "type": "string", 261 | "property": "var-nebula-glass-blur", 262 | "label": "Nebula Glass Blur", 263 | "default": "32px", 264 | "placeholder": "e.g. 32px" 265 | }, 266 | { 267 | "type": "string", 268 | "property": "var-nebula-glass-saturation", 269 | "label": "Nebula Glass Saturation", 270 | "default": "140%", 271 | "placeholder": "e.g. 140%" 272 | }, 273 | { 274 | "type": "string", 275 | "property": "var-nebula-color-glass-light", 276 | "label": "Nebula Glass Color (light)", 277 | "default": "rgba(255, 255, 255, 0.4)", 278 | "placeholder": "rgba(255, 255, 255, 0.4)" 279 | }, 280 | { 281 | "type": "string", 282 | "property": "var-nebula-color-glass-dark", 283 | "label": "Nebula Glass Color (dark)", 284 | "default": "rgba(0, 0, 0, 0.4)", 285 | "placeholder": "rgba(0, 0, 0, 0.4)" 286 | }, 287 | { 288 | "type": "separator", 289 | "label": "🌌 UI & Website Tint", 290 | "margin": "15px 0 15px 0" 291 | }, 292 | { 293 | "type": "string", 294 | "property": "var-nebula-ui-tint-light", 295 | "label": "UI Tint (light)", 296 | "default": "rgba(255,255,255,0.2)", 297 | "placeholder": "rgba(255,255,255,0.2)" 298 | }, 299 | { 300 | "type": "string", 301 | "property": "var-nebula-ui-tint-dark", 302 | "label": "UI Tint (dark)", 303 | "default": "rgba(0,0,0,0.2)", 304 | "placeholder": "rgba(0,0,0,0.2)" 305 | }, 306 | { 307 | "type": "string", 308 | "property": "var-nebula-website-tint-light", 309 | "label": "Website Tint (light)", 310 | "default": "rgba(255,255,255,0)", 311 | "placeholder": "rgba(255,255,255,0)" 312 | }, 313 | { 314 | "type": "string", 315 | "property": "var-nebula-website-tint-dark", 316 | "label": "Website Tint (dark)", 317 | "default": "rgba(0,0,0,0)", 318 | "placeholder": "rgba(0,0,0,0)" 319 | }, 320 | { 321 | "type": "separator", 322 | "label": "🌠 Colors", 323 | "margin": "15px 0 15px 0" 324 | }, 325 | { 326 | "type": "string", 327 | "property": "var-nebula-tabs-minimum-light", 328 | "label": "Pinned Tabs (light)", 329 | "default": "rgba(255, 255, 255, 0.1)", 330 | "placeholder": "rgba(255, 255, 255, 0.1)" 331 | }, 332 | { 333 | "type": "string", 334 | "property": "var-nebula-tabs-minimum-dark", 335 | "label": "Pinned Tabs (dark)", 336 | "default": "rgba(0, 0, 0, 0.2)", 337 | "placeholder": "rgba(0, 0, 0, 0.2)" 338 | }, 339 | { 340 | "type": "string", 341 | "property": "var-nebula-tabs-default-light", 342 | "label": "Tab Default (light)", 343 | "default": "rgba(255,255,255,0.25)", 344 | "placeholder": "rgba(255,255,255,0.25)" 345 | }, 346 | { 347 | "type": "string", 348 | "property": "var-nebula-tabs-default-dark", 349 | "label": "Tab Default (dark)", 350 | "default": "rgba(0,0,0,0.35)", 351 | "placeholder": "rgba(0,0,0,0.35)" 352 | }, 353 | { 354 | "type": "string", 355 | "property": "var-nebula-tabs-hover-light", 356 | "label": "Tab Hover (light)", 357 | "default": "rgba(255,255,255,0.35)", 358 | "placeholder": "rgba(255,255,255,0.35)" 359 | }, 360 | { 361 | "type": "string", 362 | "property": "var-nebula-tabs-hover-dark", 363 | "label": "Tab Hover (dark)", 364 | "default": "rgba(0,0,0,0.45)", 365 | "placeholder": "rgba(0,0,0,0.45)" 366 | }, 367 | { 368 | "type": "string", 369 | "property": "var-nebula-tabs-selected-light", 370 | "label": "Tab Selected (light)", 371 | "default": "rgba(255,255,255,0.45)", 372 | "placeholder": "rgba(255,255,255,0.45)" 373 | }, 374 | { 375 | "type": "string", 376 | "property": "var-nebula-tabs-selected-dark", 377 | "label": "Tab Selected (dark)", 378 | "default": "rgba(0,0,0,0.55)", 379 | "placeholder": "rgba(0,0,0,0.55)" 380 | }, 381 | { 382 | "type": "string", 383 | "property": "var-nebula-color-shadow-light", 384 | "label": "Color of Shadows (light)", 385 | "default": "rgba(255, 255, 255, 0.055)", 386 | "placeholder": "rgba(255, 255, 255, 0.055)" 387 | }, 388 | { 389 | "type": "string", 390 | "property": "var-nebula-color-shadow-dark", 391 | "label": "Color of Shadows (dark)", 392 | "default": "rgba(0, 0, 0, 0.55)", 393 | "placeholder": "rgba(0, 0, 0, 0.55)" 394 | }, 395 | { 396 | "type": "separator", 397 | "label": "🌙 Layout", 398 | "margin": "15px 0 15px 0" 399 | }, 400 | { 401 | "type": "string", 402 | "property": "var-nebula-border-radius", 403 | "label": "Border Radius (Roundness of UI)", 404 | "default": "13px", 405 | "placeholder": "e.g. 13px" 406 | }, 407 | { 408 | "type": "string", 409 | "property": "var-nebula-essentials-width", 410 | "label": "Essential Tabs Width", 411 | "default": "60px", 412 | "placeholder": "e.g. 60px" 413 | }, 414 | { 415 | "type": "string", 416 | "property": "var-nebula-workspace-grayscale", 417 | "label": "Workspace Buttons Grayscale", 418 | "default": "100%", 419 | "placeholder": "e.g. 100%" 420 | } 421 | ] -------------------------------------------------------------------------------- /Nebula/modules/Sidebar.css: -------------------------------------------------------------------------------- 1 | /* -------------------------- COLLAPSED FIX -------------------------- */ 2 | /* 3 | html[nebula-collapsed-toolbar] { 4 | #titlebar #TabsToolbar { 5 | padding-left: 2px; 6 | padding-right: 2px; 7 | transform: none; 8 | width: 60px; 9 | } 10 | 11 | #navigator-toolbox { 12 | max-width: calc(var(--zen-toolbox-max-width) + 5px); 13 | min-width: calc(var(--zen-toolbox-max-width) + 5px); 14 | padding-bottom: var(--zen-toolbox-padding); 15 | 16 | & #titlebar { 17 | align-content: center; 18 | justify-content: center; 19 | } 20 | } 21 | }*/ 22 | 23 | /* -------------------------- COMPACT SIDEBAR -------------------------- */ 24 | 25 | #navigator-toolbox:not([animate='true']) { 26 | #titlebar { 27 | position: relative; 28 | 29 | &::before { 30 | content: ''; 31 | position: absolute; 32 | pointer-events: none; 33 | outline: 0px !important; 34 | z-index: -1; 35 | border-radius: 11px !important; 36 | background: transparent !important; 37 | } 38 | 39 | &::after { 40 | content: ''; 41 | position: absolute; 42 | pointer-events: none; 43 | z-index: 0; 44 | background: transparent !important; 45 | opacity: var(--zen-grainy-background-opacity, 0); 46 | mix-blend-mode: overlay; 47 | } 48 | } 49 | } 50 | 51 | /* -------------------------- COMPACT SIDEBAR PSEUDO BACKGROUND -------------------------- */ 52 | 53 | #Nebula-titlebar-background { 54 | position: absolute; 55 | z-index: -100000; 56 | pointer-events: none; 57 | border-radius: 11px; 58 | opacity: 0; 59 | background-color: light-dark(rgba(200, 200, 200, 1), rgba(30, 30, 30, 1)); 60 | } 61 | 62 | #Nebula-titlebar-background.visible { 63 | opacity: 1; 64 | } 65 | 66 | /* --- Titlebar theming --- */ 67 | 68 | /* Disable outline */ 69 | .zen-toolbar-background::before, 70 | .zen-toolbar-background::after { 71 | outline: none !important; 72 | background-color: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4)) !important; 73 | } 74 | 75 | /* Titlebar styling */ 76 | html[nebula-compact-mode] #titlebar > .zen-browser-generic-background { 77 | padding: 8px; 78 | border-radius: 13px !important; 79 | background-color: transparent !important; 80 | backdrop-filter: var(--nebula-glass) !important; 81 | } 82 | 83 | :root[zen-right-side="true"][nebula-compact-mode] #titlebar { 84 | left: auto !important; 85 | right: var(--zen-element-separation) !important; 86 | } 87 | 88 | @media (-moz-pref("zen.view.compact.hide-toolbar")) { 89 | @media not all and (-moz-pref("zen.view.compact.hide-tabbar")) { 90 | #Nebula-titlebar-background { 91 | opacity: 0 !important; 92 | } 93 | } 94 | } 95 | 96 | /* -------------------- SINGLE TOOLBAR -------------------- */ 97 | 98 | html[nebula-single-toolbar][nebula-compact-mode] #titlebar { 99 | top: var(--zen-element-separation) !important; 100 | left: var(--zen-element-separation) !important; 101 | height: calc(100% - (var(--zen-element-separation) * 2)) !important; 102 | } 103 | 104 | /* -------------------- MULTI & COLLAPSED TOOLBAR -------------------- */ 105 | 106 | @media (-moz-pref("zen.view.compact.hide-tabbar")) { 107 | /* Base position for multi and collapsed toolbars */ 108 | html[nebula-multi-toolbar][nebula-compact-mode] #titlebar, 109 | html[nebula-collapsed-toolbar][nebula-compact-mode] #titlebar { 110 | top: var(--zen-element-separation) !important; 111 | left: var(--zen-element-separation) !important; 112 | height: calc(100% - (var(--zen-element-separation) * 2)) !important; 113 | } 114 | 115 | /* Right-side adjustments */ 116 | html[nebula-multi-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar { 117 | left: auto !important; 118 | right: var(--zen-element-separation) !important; 119 | } 120 | 121 | html[nebula-collapsed-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar { 122 | left: auto !important; 123 | right: calc(var(--zen-element-separation) * 1.75) !important; 124 | } 125 | } 126 | 127 | @media (-moz-pref("zen.view.compact.hide-toolbar")) { 128 | @media not all and (-moz-pref("zen.view.compact.hide-tabbar")) { 129 | html[nebula-multi-toolbar][nebula-compact-mode] #titlebar, 130 | html[nebula-collapsed-toolbar][nebula-compact-mode] #titlebar { 131 | background: none !important; 132 | padding: 0 !important; 133 | border-radius: 0 !important; 134 | backdrop-filter: none !important; 135 | } 136 | 137 | html[nebula-multi-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar, 138 | html[nebula-collapsed-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar { 139 | left: auto !important; 140 | right: unset !important; 141 | } 142 | } 143 | } 144 | 145 | @media (-moz-pref("zen.view.compact.hide-tabbar")) and (-moz-pref("zen.view.compact.hide-toolbar")) { 146 | html[nebula-multi-toolbar][nebula-compact-mode] #titlebar, 147 | html[nebula-collapsed-toolbar][nebula-compact-mode] #titlebar { 148 | top: var(--zen-element-separation) !important; 149 | left: var(--zen-element-separation) !important; 150 | height: calc(100% - (var(--zen-element-separation) * 3)) !important; 151 | } 152 | 153 | html[nebula-multi-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar { 154 | left: auto !important; 155 | right: var(--zen-element-separation) !important; 156 | } 157 | 158 | html[nebula-collapsed-toolbar]:root[zen-right-side="true"][nebula-compact-mode] #titlebar { 159 | left: auto !important; 160 | right: calc(var(--zen-element-separation) * 1.75) !important; 161 | } 162 | } 163 | 164 | /* ------------------------- GENERAL SIDEBAR -------------------------- */ 165 | 166 | /* hide scrollbar */ 167 | scrollbox { 168 | scrollbar-width: none !important; 169 | } 170 | 171 | /* 172 | #zen-tabs-wrapper { 173 | mask-image: linear-gradient(to bottom, black 90%, rgba(0, 0, 0, 0.4) 97%, transparent 100%) !important; 174 | -webkit-mask-image: linear-gradient(to bottom, black 90%, rgba(0, 0, 0, 0.7) 97%, transparent 100%) !important; 175 | scrollbar-width: none !important; 176 | -ms-overflow-style: none !important; 177 | overflow-y: auto !important; 178 | transition: mask-image 0.3s ease, -webkit-mask-image 0.3s ease; 179 | } 180 | */ 181 | 182 | /* Hide the overflow background gradient */ 183 | .workspace-arrowscrollbox[overflowing] { 184 | --zen-scrollbar-overflow-background: transparent !important; 185 | background: transparent !important; 186 | } 187 | 188 | /* Also remove any visual overlay pseudo-elements */ 189 | .workspace-arrowscrollbox[overflowing]::before, 190 | .workspace-arrowscrollbox[overflowing]::after { 191 | content: none !important; 192 | display: none !important; 193 | } 194 | 195 | /* -------------------------- Personal Toolbar --------------------------- */ 196 | 197 | /* Only apply when NOT in single toolbar */ 198 | /*html:not([nebula-single-toolbar]) #PersonalToolbar:not([collapsed=""]) { 199 | padding-bottom: 3px !important; 200 | }*/ 201 | 202 | #PersonalToolbar toolbarbutton:hover { 203 | background-color: var(--nebula-color-hover) !important; 204 | box-shadow: 0 0px 3px var(--nebula-color-shadow) !important; 205 | border-radius: 10px !important; 206 | transition: background-color 0.3s ease, box-shadow 0.2s ease-out !important; 207 | } 208 | 209 | /* Auto Hide Bookmark-bar */ 210 | 211 | @media (not (-moz-pref("nebula-bookmarks-autohide", 0))) { 212 | /* Disabled in the compact mode (hide toolbar) to prevent conflicts. */ 213 | @media (not ((-moz-pref("zen.view.compact.hide-toolbar")) and 214 | (-moz-pref("zen.view.compact.enable-at-startup")))) { 215 | 216 | #personal-bookmarks toolbarbutton.bookmark-item:not(#OtherBookmarks), #import-button { 217 | background-color: light-dark(rgba(255,255,255,0.45), rgba(0,0,0,0.55)) !important; 218 | border-radius: 13px !important; 219 | } 220 | 221 | /* Adapt for Zen (Since zen v1.17.1) */ 222 | @media (-moz-pref("zen.view.compact.enable-at-startup")) { 223 | #navigator-toolbox { 224 | height: calc(100% - (var(--zen-element-separation) * 4.5)) !important; 225 | } 226 | } 227 | 228 | html:not([nebula-single-toolbar]) #PersonalToolbar { 229 | position: absolute !important; 230 | z-index: 1 !important; 231 | opacity: 0 !important; 232 | transform: translateY(-10px) !important; 233 | transition: 234 | opacity 200ms ease-out, 235 | transform 200ms ease-out !important; 236 | transition-delay: 0.35s !important; 237 | } 238 | 239 | #PersonalToolbar:has([open]), 240 | #PersonalToolbar:has([aria-expanded="true"]), 241 | #PersonalToolbar:has(menupopup[open]), 242 | #PersonalToolbar:has(menu[open]), 243 | #PersonalToolbar:has(.bookmark-item[open]), 244 | #nav-bar:hover + #PersonalToolbar, 245 | #PersonalToolbar:hover, 246 | #PersonalToolbar:focus-within { 247 | opacity: 1 !important; 248 | pointer-events: auto !important; 249 | transition-delay: 0s !important; 250 | } 251 | 252 | /* Expand the bookmarks-bar by hovering */ 253 | @media (-moz-pref("nebula-bookmarks-autohide", 1)) or (-moz-pref("nebula-bookmarks-autohide", 3)) { 254 | #nav-bar:hover + #PersonalToolbar, 255 | #PersonalToolbar:hover { 256 | opacity: 1 !important; 257 | transform: translateY(0) !important; 258 | pointer-events: auto !important; 259 | transition-delay: 0.15s !important; 260 | } 261 | } 262 | } 263 | 264 | /* Expand the bookmarks-bar when search */ 265 | @media (-moz-pref("nebula-bookmarks-autohide", 2)) or (-moz-pref("nebula-bookmarks-autohide", 3)) { 266 | #nav-bar:focus-within + #PersonalToolbar { 267 | opacity: 1 !important; 268 | transform: translateY(0) !important; 269 | pointer-events: auto !important; 270 | } 271 | } 272 | } 273 | 274 | /* -------------------------- FINDBAR -------------------------- */ 275 | 276 | .browserContainer { 277 | position: relative !important; 278 | } 279 | 280 | @keyframes findbar-show-animation { 281 | from { 282 | opacity: 0; 283 | transform: scale(0.95); 284 | } 285 | to { 286 | opacity: 1; 287 | transform: scale(1); 288 | } 289 | } 290 | 291 | findbar { 292 | position: fixed !important; 293 | top: 30px !important; 294 | right: 30px !important; 295 | height: 42px !important; 296 | z-index: 1000 !important; 297 | min-width: 90% !important; 298 | display: flex !important; 299 | border: none !important; 300 | align-items: center !important; 301 | gap: 6px !important; 302 | padding: 6px 10px !important; 303 | background: var(--nebula-color-glass) !important; 304 | backdrop-filter: var(--nebula-glass) !important; 305 | border-radius: 13px !important; 306 | box-shadow: 0 4px 14px var(--nebula-color-shadow) !important; 307 | } 308 | 309 | #zen-tabbox-wrapper::before { 310 | position: absolute !important; 311 | z-index: 0 !important; 312 | content: "" !important; 313 | background-color: light-dark(rgba(200, 200, 200, 1), rgba(30, 30, 30, 1)) !important; 314 | opacity: 0; 315 | width: 89%; 316 | top: 29px !important; 317 | right: 30px; 318 | height: 43px !important; 319 | bottom: auto !important; 320 | border-radius: 13px; 321 | visibility: visible !important; 322 | transition: opacity 0.2s ease, width 0.5s ease !important; 323 | } 324 | 325 | :has(.browserSidebarContainer.deck-selected > .browserContainer > findbar:not([hidden])) #zen-tabbox-wrapper::before { 326 | opacity: 1 !important; 327 | width: 90.05%; 328 | } 329 | 330 | findbar:not([hidden]) { 331 | visibility: visible !important; 332 | animation: findbar-show-animation 0.3s ease-out forwards !important; 333 | } 334 | 335 | 336 | findbar[hidden] { 337 | opacity: 0 !important; 338 | transform: scale(0.95) !important; 339 | pointer-events: none !important; 340 | visibility: hidden !important; 341 | transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important; 342 | } 343 | 344 | .findbar-textbox { 345 | flex-grow: 1 !important; 346 | min-width: 230px !important; 347 | background: transparent !important; 348 | color: inherit !important; 349 | border: none !important; 350 | outline: none !important; 351 | font-size: 14px !important; 352 | padding: 4px 10px !important; 353 | box-shadow: none !important; 354 | } 355 | 356 | 357 | findbar toolbarbutton { 358 | background: light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important; 359 | border-radius: 6.5px !important; 360 | transition: background 0.2s ease, transform 0.1s ease-out !important; 361 | } 362 | 363 | findbar .findbar-find-previous, 364 | findbar .findbar-find-next { 365 | align-self: center; 366 | width: 20px !important; 367 | height: 20px !important; 368 | padding: 2px !important; 369 | font-size: 10px !important; 370 | } 371 | 372 | .findbar-find-previous { 373 | margin-right: 4px !important; 374 | } 375 | 376 | findbar .findbar-close { 377 | width: 18px !important; 378 | height: 18px !important; 379 | padding: 2px !important; 380 | font-size: 10px !important; 381 | margin-left: auto !important; 382 | } 383 | 384 | findbar toolbarbutton:hover { 385 | background: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6)) !important; 386 | transform: scale(1.05) !important; 387 | } 388 | 389 | findbar toolbarbutton:active { 390 | transform: scale(0.92) !important; 391 | } 392 | 393 | /* -------------------------- BOOKMARKS -------------------------- */ 394 | 395 | /* Transparent Sidebar Items */ 396 | .sidebar-panel { 397 | background: transparent !important; 398 | font-weight: 600 !important; 399 | opacity: 0.7 !important; 400 | } 401 | 402 | /* Clean & Transparent Sidebar Box */ 403 | #sidebar-box { 404 | background-color: light-dark(rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.2)) !important; 405 | border: none !important; 406 | } 407 | 408 | #sidebar-box #sidebar-header { 409 | border-bottom: none !important; 410 | } 411 | #sidebar-search-container { 412 | background-color: rgba(0,0,0,0) !important; 413 | } 414 | #sidebar-header { 415 | background-color: rgba(0,0,0,0) !important; 416 | } 417 | 418 | /* Transparent Sidebar Search Box & View Button */ 419 | #sidebar-search-container > #search-box, 420 | #viewButton { 421 | padding: 4px 8px !important; 422 | appearance: none !important; 423 | background-color: transparent !important; 424 | border-radius: 10px !important; 425 | border: none !important; 426 | } 427 | 428 | #sidebar-search-container > #search-box:hover, 429 | #viewButton:hover, 430 | #sidebar-search-container > #search-box:active, 431 | #viewButton:active { 432 | background-color: rgba(255, 255, 255, 0.1) !important; 433 | } -------------------------------------------------------------------------------- /Nebula/modules/BetterPiP.css: -------------------------------------------------------------------------------- 1 | /* Add rounded corners to player holder */ 2 | .player-holder { 3 | border-radius: 7.6px !important; /* Adjust the radius as needed */ 4 | } 5 | 6 | /* Always round all PiP content and backgrounds */ 7 | @media not -moz-pref("nebula.pip.disabled") { 8 | @-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") { 9 | html, .player-holder { 10 | border-radius: 9px !important; 11 | overflow: hidden !important; 12 | } 13 | .player-holder { 14 | clip-path: none !important; 15 | } 16 | } 17 | } 18 | 19 | /* ------------------------- Nebula Picture in Picture ------------------------- */ 20 | 21 | @media not -moz-pref("nebula.pip.disabled") { 22 | @-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") { 23 | /*noinspection CssInvalidFunction*/ 24 | * { 25 | --nebula-primary-color: #a0d490; 26 | --nebula-colors-primary: color-mix(in srgb, var(--nebula-primary-color) 50%, black 50%); 27 | --nebula-colors-secondary: color-mix(in srgb, var(--nebula-colors-primary) 20%, white 80%); 28 | 29 | @media (prefers-color-scheme: dark) { 30 | --nebula-colors-primary: color-mix(in srgb, var(--nebula-primary-color) 20%, #1d1d1d 80%); 31 | --nebula-colors-secondary: color-mix(in srgb, var(--nebula-primary-color) 30%, #1d1d1d 70%); 32 | } 33 | 34 | /* Material: Haze */ 35 | --nebula-mat-hz-background: rgba(255, 255, 255, 0.8); 36 | --nebula-mat-hz-background-tinted: color-mix(in srgb, var(--nebula-primary-color) 30%, rgba(255, 255, 255, 0.8)); 37 | --nebula-mat-hz-blur-radius: 100px; 38 | 39 | @media (prefers-color-scheme: dark) { 40 | --nebula-mat-hz-background: rgba(0, 0, 0, 0.8); 41 | --nebula-mat-hz-background-tinted: color-mix(in srgb, var(--nebula-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 42 | } 43 | 44 | /* Material: Glass */ 45 | --nebula-mat-ga-background: color-mix(in srgb, var(--nebula-colors-secondary) 75%, transparent); 46 | --nebula-mat-ga-shadow-color: color-mix(in srgb, var(--nebula-colors-secondary) 75%, light-dark(black, white)); 47 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 48 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 49 | 50 | @media -moz-pref("nebula.theme.force-dark-shadows") { 51 | --nebula-mat-ga-shadow-color: color-mix(in srgb, var(--nebula-colors-secondary) 75%, black); 52 | } 53 | } 54 | 55 | @keyframes pip-fadein-html { 56 | 0% { 57 | background-color: transparent; 58 | scale: 0.8; 59 | } 60 | 61 | 99% { 62 | background-color: transparent; 63 | scale: 1; 64 | } 65 | 66 | 100% { 67 | background-color: black; 68 | } 69 | } 70 | 71 | @keyframes pip-fadein-player { 72 | 0% { 73 | filter: blur(30px); 74 | opacity: 0; 75 | } 76 | 77 | 70% { 78 | filter: blur(5px); 79 | } 80 | 81 | 100% { 82 | filter: blur(0); 83 | opacity: 1; 84 | } 85 | } 86 | 87 | @media -moz-pref("nebula.pip.rounded") { 88 | /* This won't work on Linux (sadly), might be just a Gnome thing. */ 89 | /* If you're seeing this, create an issue if it does indeed work */ 90 | 91 | @media (-moz-platform: windows) { 92 | window, html, body { 93 | /* Share same radius as macOS for the sake of simplicity later */ 94 | border-radius: 9px !important; 95 | } 96 | } 97 | } 98 | 99 | html { 100 | animation: pip-fadein-html 0.5s ease !important; 101 | } 102 | 103 | .player-holder { 104 | animation: pip-fadein-player 0.5s ease !important; 105 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 106 | } 107 | 108 | #controls { 109 | opacity: 1 !important; 110 | 111 | /*noinspection CssInvalidFunction*/ 112 | & > button { 113 | opacity: 0 !important; 114 | top: 0 !important; 115 | filter: blur(5px); 116 | border-radius: 6px !important; 117 | transition: opacity 0.3s ease, top 0.3s ease, filter 0.3s ease, background-color 0.2s ease !important; 118 | backdrop-filter: saturate(var(--nebula-mat-hz-saturation)) contrast(var(--nebula-mat-hz-contrast)) blur(var(--nebula-mat-hz-blur-radius)) !important; 119 | background-image: none !important; 120 | background-color: var(--nebula-mat-hz-background) !important; 121 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important; 122 | border: 2px solid light-dark(rgba(20, 20, 20, 0.1), rgba(235, 235, 235, 0.1)) !important; 123 | 124 | @media -moz-pref("nebula.pip.tinted-haze") { 125 | background-color: var(--nebula-mat-hz-background-tinted) !important; 126 | } 127 | 128 | &::before { 129 | content: ""; 130 | width: 16px; 131 | height: 16px; 132 | padding: 2px; 133 | display: flex; 134 | position: absolute; 135 | left: 50%; 136 | top: 50%; 137 | transform: translate(-50%, -50%); 138 | align-content: center; 139 | justify-content: center; 140 | fill: white !important; 141 | 142 | @media (prefers-color-scheme: light) { 143 | fill: black !important; 144 | } 145 | } 146 | 147 | &#close::before { 148 | content: url("chrome://browser/skin/zen-icons/close.svg") !important; 149 | } 150 | 151 | &#minimize::before { 152 | content: url("chrome://browser/skin/zen-icons/unpin.svg") !important; 153 | } 154 | 155 | &#unpip::before { 156 | content: url("chrome://browser/skin/zen-icons/screen.svg") !important; 157 | } 158 | 159 | &:hover { 160 | background-color: black !important; 161 | } 162 | } 163 | 164 | #controls-bottom-gradient { 165 | display: none !important; 166 | } 167 | 168 | /*noinspection CssInvalidFunction*/ 169 | #controls-bottom { 170 | opacity: 0 !important; 171 | bottom: -5px !important; 172 | background-color: var(--nebula-mat-hz-background) !important; 173 | border-radius: 10px !important; 174 | padding: 10px 15px !important; 175 | margin: 0 5px !important; 176 | margin-bottom: 5px !important; 177 | width: min(calc(100% - 10px), 700px) !important; 178 | box-sizing: border-box !important; 179 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important; 180 | backdrop-filter: saturate(3) contrast(2) blur(var(--nebula-mat-hz-blur-radius)) !important; 181 | filter: blur(10px); 182 | transition: opacity 0.3s ease, bottom 0.3s ease, filter 0.3s ease !important; 183 | border: 2px solid light-dark(rgba(20, 20, 20, 0.1), rgba(235, 235, 235, 0.1)) !important; 184 | left: calc(50% - 5px) !important; 185 | transform: translateX(-50%) !important; 186 | 187 | @media -moz-pref("nebula.pip.tinted-haze") { 188 | background-color: var(--nebula-mat-hz-background-tinted) !important; 189 | } 190 | 191 | @media -moz-pref("nebula.pip.native-border-radius") and (width <= 710px) { 192 | /* For the sake of adding native radius, we'll reduce the margin of the controls here */ 193 | width: min(100%, 700px) !important; 194 | margin: 0 !important; 195 | left: calc(50%) !important; 196 | bottom: -10px !important; 197 | 198 | /* 199 | For now this config is available on macOS only, this'll be added to Windows and Linux 200 | once curved PiP for those platforms moves out of experiment status 201 | */ 202 | @media (-moz-platform: macos) { 203 | border-radius: 5px !important; 204 | } 205 | } 206 | 207 | .start-controls { 208 | @media (width > 300px) { 209 | display: flex !important; 210 | } 211 | 212 | /*noinspection CssInvalidFunction*/ 213 | #timestamp { 214 | font-size: 12px !important; 215 | color: light-dark(black, white) !important; 216 | } 217 | } 218 | 219 | .end-controls { 220 | display: flex !important; 221 | } 222 | 223 | #scrubber, #audio-scrubber { 224 | margin: 0 !important; 225 | 226 | /*noinspection CssInvalidFunction*/ 227 | #scrubber::-moz-range-progress { 228 | background: white !important; 229 | } 230 | 231 | /*noinspection CssInvalidFunction*/ 232 | &::-moz-range-track { 233 | background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important; 234 | } 235 | 236 | /*noinspection CssInvalidFunction*/ 237 | &::-moz-range-thumb { 238 | background: white !important; 239 | width: 12px !important; 240 | height: 12px !important; 241 | border: none !important; 242 | } 243 | } 244 | 245 | #audio-scrubber { 246 | &::-moz-range-thumb { 247 | width: 8px !important; 248 | height: 8px !important; 249 | opacity: 1 !important; 250 | } 251 | } 252 | 253 | /*noinspection CssInvalidFunction*/ 254 | button { 255 | opacity: 1 !important; 256 | position: relative; 257 | padding: 6px !important; 258 | background-size: 16px !important; 259 | width: 28px !important; 260 | height: 28px !important; 261 | border-radius: 6px !important; 262 | transition: background-color 0.2s ease !important; 263 | -moz-context-properties: fill; 264 | fill: light-dark(black, white) !important; 265 | 266 | &[disabled] { 267 | cursor: default !important; 268 | fill-opacity: 0.4 !important; 269 | 270 | &::after { 271 | display: none !important; 272 | } 273 | } 274 | 275 | &:not([disabled]) { 276 | &:hover { 277 | background-color: var(--toolbarbutton-hover-background) !important; 278 | } 279 | 280 | &:active { 281 | background-color: var(--toolbarbutton-active-background) !important; 282 | } 283 | } 284 | 285 | &#playpause { 286 | background-image: url("chrome://browser/skin/zen-icons/media-play.svg") !important; 287 | } 288 | 289 | &#audio { 290 | background-image: url("chrome://browser/skin/zen-icons/media-unmute.svg") !important; 291 | } 292 | 293 | &#seekBackward { 294 | background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important; 295 | scale: -1 1; 296 | 297 | &::before { 298 | content: "5"; 299 | font-size: 8px; 300 | position: absolute; 301 | top: 50%; 302 | left: 50%; 303 | transform: translate(50%, -50%); 304 | scale: -1 1; 305 | } 306 | 307 | &::after { 308 | scale: -1 1; 309 | } 310 | } 311 | 312 | &#seekForward { 313 | background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important; 314 | 315 | &::before { 316 | content: "5"; 317 | font-size: 8px; 318 | position: absolute; 319 | top: 50%; 320 | left: 50%; 321 | transform: translate(-50%, -50%); 322 | } 323 | } 324 | 325 | &#fullscreen { 326 | background-image: url("chrome://browser/skin/zen-icons/fullscreen.svg") !important; 327 | } 328 | } 329 | 330 | .controls-bottom-upper { 331 | margin: 0 !important; 332 | margin-bottom: 5px !important; 333 | width: 100% !important; 334 | height: fit-content !important; 335 | 336 | .scrubber-no-drag { 337 | margin: 0 !important; 338 | } 339 | 340 | &:has(#scrubber[hidden]) { 341 | display: none !important; 342 | margin: 0 !important; 343 | } 344 | } 345 | 346 | .controls-bottom-lower { 347 | margin: 0 !important; 348 | } 349 | } 350 | 351 | #settings { 352 | bottom: 80px !important; 353 | right: 0 !important; 354 | display: block !important; 355 | transition: opacity 0.3s ease, bottom 0.3s ease !important; 356 | 357 | .arrow { 358 | display: none !important; 359 | } 360 | 361 | /*noinspection CssInvalidFunction*/ 362 | label, legend { 363 | font-family: system-ui !important; 364 | color: light-dark(black, white) !important; 365 | } 366 | 367 | /*noinspection CssInvalidFunction*/ 368 | .slider { 369 | background-color: rgba(0, 0, 0, 0.07) !important; 370 | outline: 1px solid light-dark(#8f8f9d, #bfbfc9) !important; 371 | 372 | /*noinspection CssInvalidFunction*/ 373 | &::before { 374 | background-color: light-dark(#8f8f9d, #bfbfc9) !important; 375 | } 376 | } 377 | 378 | input { 379 | /*noinspection CssInvalidFunction*/ 380 | &:checked { 381 | border-color: light-dark(var(--nebula-colors-primary), var(--nebula-primary-color)) !important; 382 | } 383 | 384 | /*noinspection CssInvalidFunction*/ 385 | &:checked + .slider { 386 | background-color: light-dark(var(--nebula-colors-primary), var(--nebula-primary-color)) !important; 387 | outline-color: light-dark(var(--nebula-colors-primary), var(--nebula-primary-color)) !important; 388 | 389 | &::before { 390 | background-color: white !important; 391 | } 392 | } 393 | } 394 | 395 | /*noinspection CssInvalidFunction*/ 396 | & > .panel-fieldset { 397 | background-color: var(--nebula-mat-ga-background) !important; 398 | backdrop-filter: blur(15px); 399 | filter: blur(0); 400 | transition: backdrop-filter 0.3s ease, filter 0.3s ease; 401 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 402 | box-shadow: 0 0 10px var(--nebula-mat-ga-shadow-color) !important; 403 | padding: 0 !important; 404 | } 405 | 406 | /*noinspection CssInvalidFunction*/ 407 | .grey-line { 408 | width: calc(100% - 10px) !important; 409 | margin: 0 auto !important; 410 | background-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 411 | } 412 | 413 | &.hide { 414 | bottom: 70px !important; 415 | opacity: 0 !important; 416 | pointer-events: none !important; 417 | 418 | & > .panel-fieldset { 419 | backdrop-filter: none !important; 420 | filter: blur(5px); 421 | } 422 | } 423 | } 424 | 425 | &.muted { 426 | #controls-bottom { 427 | #audio { 428 | background-image: url("chrome://browser/skin/zen-icons/media-mute.svg") !important; 429 | } 430 | } 431 | } 432 | 433 | &.playing { 434 | #controls-bottom { 435 | #playpause { 436 | background-image: url("chrome://browser/skin/zen-icons/media-pause.svg") !important; 437 | } 438 | } 439 | } 440 | } 441 | 442 | body:fullscreen #controls[showing]:hover, body:not(:fullscreen) #controls:hover { 443 | & > button { 444 | opacity: 1 !important; 445 | top: 10px !important; 446 | filter: blur(0) !important; 447 | } 448 | 449 | #controls-bottom { 450 | opacity: 1 !important; 451 | bottom: 5px !important; 452 | filter: blur(0); 453 | 454 | @media -moz-pref("nebula.pip.native-border-radius") { 455 | bottom: 0 !important; 456 | } 457 | } 458 | } 459 | 460 | body:fullscreen { 461 | &:has(#controls:not([showing])) { 462 | cursor: none !important; 463 | } 464 | 465 | #controls { 466 | #controls-bottom { 467 | #fullscreen { 468 | background-image: url("chrome://browser/skin/zen-icons/fullscreen-exit.svg") !important; 469 | } 470 | } 471 | } 472 | } 473 | } 474 | } -------------------------------------------------------------------------------- /Nebula/modules/Tabstyles.css: -------------------------------------------------------------------------------- 1 | /* ------------------- PDF Tab Custom Icon ------------------- */ 2 | 3 | tab[label$='.pdf'] img.tab-icon-image { 4 | background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 16 16' xmlns:bx='https://boxy-svg.com'%3E%3Cdefs%3E%3Cbx:export%3E%3Cbx:file format='svg' path='doc icon.svg'/%3E%3C/bx:export%3E%3C/defs%3E%3Cpath fill='%23181c1f' d='M 18.4 0.164 L 34.4 0.164 L 34.4 16.164 L 18.4 16.164 L 18.4 0.164 Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4.75 2.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V7H9.75A1.75 1.75 0 0 1 8 5.25V2.5zm4.75.81v1.94c0 .138.112.25.25.25h1.94zM2 3.75A2.75 2.75 0 0 1 4.75 1h3.836c.464 0 .909.184 1.237.513l3.664 3.664c.329.328.513.773.513 1.237v5.836A2.75 2.75 0 0 1 11.25 15h-6.5A2.75 2.75 0 0 1 2 12.25z' clip-rule='evenodd'/%3E%3C/svg%3E%0A") !important; 5 | height: 32px !important; 6 | scale: 0.5 !important; 7 | margin-left: -5px !important; 8 | transform: translateX(4px); 9 | width: 32px !important; 10 | } 11 | 12 | tab[label$='.pdf'] .tab-label-container { 13 | margin-left: -8px !important; 14 | } 15 | 16 | /* ------------------- Container Tabs Styling ------------------- */ 17 | 18 | @media not (-moz-pref("nebula-disable-container-styling")) { 19 | 20 | /* Container indicator in URL bar */ 21 | #userContext-icons { 22 | width: 5px !important; 23 | height: 14px !important; 24 | border-radius: 3px !important; 25 | margin: 0 6px 0 2px !important; 26 | opacity: 0.8 !important; 27 | background-color: var(--identity-tab-color) !important; 28 | } 29 | 30 | /* Hide legacy container line */ 31 | .tab-context-line { 32 | display: none !important; 33 | } 34 | 35 | .tabbrowser-tab[usercontextid] .tab-background { 36 | position: relative !important; 37 | } 38 | 39 | /* Container gradient only for container tabs, on ::before */ 40 | .tabbrowser-tab[usercontextid] .tab-background::before { 41 | content: "" !important; 42 | position: absolute !important; 43 | inset: 0 !important; 44 | width: 20% !important; 45 | z-index: -1 !important; 46 | 47 | --gradient-color: var(--identity-tab-color, #00f8); 48 | background: linear-gradient(90deg, var(--gradient-color) 0%, transparent 40%) !important; 49 | 50 | filter: blur(12px) contrast(1.2) brightness(1.5) !important; 51 | opacity: 1 !important; 52 | transition: opacity 0.3s ease, width 0.3s ease !important; 53 | pointer-events: none; 54 | } 55 | 56 | /* Dimmed state */ 57 | .tabbrowser-tab[usercontextid]:not([selected]):not([visuallyselected]) .tab-background::before { 58 | width: 50% !important; 59 | opacity: 0.5 !important; 60 | } 61 | 62 | /* Disable ONLY the gradient overlay (before) when glow pref = 1 or 2 AND tab is selected */ 63 | @media (-moz-pref("nebula-active-tab-glow", 1)), 64 | (-moz-pref("nebula-active-tab-glow", 2)) { 65 | .tabbrowser-tab[selected="true"][usercontextid] .tab-background::before { 66 | display: none !important; 67 | } 68 | } 69 | 70 | /* Per-container colors */ 71 | .tabbrowser-tab[usercontextid="1"] .tab-background::before { --gradient-color: #009688 !important; } 72 | .tabbrowser-tab[usercontextid="2"] .tab-background::before { --gradient-color: #ff6f00 !important; } 73 | .tabbrowser-tab[usercontextid="3"] .tab-background::before { --gradient-color: #43a047 !important; } 74 | .tabbrowser-tab[usercontextid="4"] .tab-background::before { --gradient-color: #8e24aa !important; } 75 | 76 | } 77 | 78 | /* ------------------- Close and Reset Button Styling ------------------- */ 79 | 80 | .tab-reset-pin-button { 81 | border-top-left-radius: var(--nebula-border-radius) !important; 82 | border-bottom-left-radius: var(--nebula-border-radius) !important; 83 | transition: background-color 0.2s ease-out !important; 84 | position: relative; 85 | z-index: 5; 86 | } 87 | 88 | /* Gradient overlay (right side) */ 89 | .tabbrowser-tab .tab-background::before { 90 | content: ""; 91 | position: absolute; 92 | inset: 0; 93 | background: linear-gradient( 94 | to left, 95 | rgba(175, 10, 10, 0.75), 96 | rgba(175, 30, 10, 0) 40%, 97 | transparent 40% 98 | ); 99 | filter: blur(12px) contrast(120%) brightness(150%); 100 | opacity: 0; 101 | transition: opacity 0.3s ease !important; 102 | z-index: 3; /* under buttons */ 103 | pointer-events: none; /* prevents hover conflicts */ 104 | } 105 | 106 | 107 | /* Show gradient when hovering close/reset */ 108 | .tabbrowser-tab:has(.tab-close-button:hover, .tab-reset-button:hover) 109 | .tab-background::before { 110 | opacity: 0.7 !important; 111 | } 112 | 113 | /* Buttons */ 114 | .tab-close-button, 115 | .tab-reset-button { 116 | border-radius: calc(var(--nebula-border-radius) - 4px) !important; 117 | transition: opacity 0.25s ease-out !important; 118 | position: relative; 119 | z-index: 5; /* keep above gradient */ 120 | } 121 | 122 | /* Fade buttons in */ 123 | .tabbrowser-tab[selected="true"] .tab-close-button, 124 | .tabbrowser-tab[visuallyselected="true"] .tab-close-button, 125 | .tabbrowser-tab:hover .tab-close-button, 126 | .tabbrowser-tab[selected="true"] .tab-reset-button, 127 | .tabbrowser-tab[visuallyselected="true"] .tab-reset-button, 128 | .tabbrowser-tab:hover .tab-reset-button { 129 | opacity: 0.4 !important; 130 | } 131 | 132 | .tabbrowser-tab .tab-close-button:hover, 133 | .tabbrowser-tab .tab-reset-button:hover { 134 | opacity: 1 !important; 135 | } 136 | 137 | /* Layout fixes for Collapsed */ 138 | html:not([zen-single-toolbar="true"]):not([zen-sidebar-expanded="true"]) 139 | .tab-close-button { 140 | transform: translateY(2px) scale(1.2); 141 | } 142 | 143 | /* ------------------- Tab Backgrounds ------------------- */ 144 | 145 | .tabbrowser-tab { 146 | .tab-background { 147 | border-radius: var(--nebula-border-radius) !important; 148 | position: relative !important; 149 | box-shadow: 0 0 3px transparent !important; 150 | transition: 151 | background-color 0.3s ease, 152 | box-shadow 0.3s ease !important; 153 | } 154 | 155 | /* ----- Pinned tabs ----- */ 156 | &[pinned] .tab-background { 157 | background-color: var(--nebula-color-min) !important; 158 | } 159 | 160 | /* Config: remove background from pinned tabs */ 161 | @media (-moz-pref("nebula-pinned-tabs-bg")) { 162 | &[pinned] .tab-background { 163 | background-color: transparent !important; 164 | } 165 | } 166 | 167 | /* ----- Hover state ----- */ 168 | &:is([pinned], :not([pinned])):hover .tab-background { 169 | background-color: var(--nebula-color-hover) !important; 170 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 171 | } 172 | 173 | /* ----- Selected state ----- */ 174 | &:is([pinned], :not([pinned])):is([selected="true"], [visuallyselected="true"]) .tab-background { 175 | background-color: var(--nebula-color-selected) !important; 176 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 177 | } 178 | } 179 | 180 | /* ------------------- New Tab Button Styling ------------------- */ 181 | 182 | #tabs-newtab-button.toolbarbutton-1 { 183 | position: relative; 184 | background: transparent !important; 185 | border: none; 186 | box-shadow: 0 0 3px transparent !important; 187 | } 188 | 189 | #tabs-newtab-button.toolbarbutton-1::before { 190 | content: ""; 191 | position: absolute; 192 | inset: 0; 193 | border-radius: var(--nebula-border-radius) !important; 194 | background-color: transparent; 195 | box-shadow: 0 0 3px transparent !important; 196 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 197 | pointer-events: none; 198 | z-index: -1; 199 | } 200 | 201 | #tabs-newtab-button.toolbarbutton-1:hover::before { 202 | background-color: var(--nebula-color-hover) !important; 203 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 204 | } 205 | 206 | /* ------------------- Active Tab Glow ------------------- */ 207 | 208 | .tabbrowser-tab[selected="true"]:not([multiselected="true"]), 209 | .tabbrowser-tab[visuallyselected="true"]:not([multiselected="true"]) { 210 | /* Exclude essentials tabs and multi selected tabs */ 211 | 212 | @media (-moz-pref("nebula-active-tab-glow", 1)) { 213 | &:not(.zen-essentials-container .tabbrowser-tab) .tab-background::after { 214 | content: ""; 215 | position: absolute; 216 | bottom: -6px; 217 | left: 50%; 218 | transform: translateX(-50%); 219 | width: 160%; 220 | height: 120%; 221 | background: 222 | /*linear-gradient( 223 | to top, 224 | rgba(0, 0, 0, 0.35), 225 | transparent 20px 226 | ),*/ 227 | radial-gradient( 228 | ellipse at bottom center, 229 | color-mix(in srgb, var(--zen-primary-color) 30%, transparent) 0%, 230 | transparent 70% 231 | ); 232 | } 233 | } 234 | 235 | @media (-moz-pref("nebula-active-tab-glow", 2)) { 236 | &:not(.zen-essentials-container .tabbrowser-tab) .tab-background::after { 237 | content: ""; 238 | position: absolute; 239 | bottom: -6px; 240 | left: 50%; 241 | transform: translateX(-50%); 242 | width: 160%; 243 | height: 120%; 244 | background: radial-gradient( 245 | ellipse at bottom center, 246 | color-mix(in srgb, var(--nebula-selected-favicon-color) 30%, transparent) 0%, 247 | transparent 70% 248 | ); 249 | } 250 | } 251 | 252 | /* Hide glow on hover */ 253 | &:hover .tab-background::after { 254 | opacity: 0 !important; 255 | } 256 | } 257 | 258 | /* ------------------- Multi Selected Tab Glow ------------------- */ 259 | 260 | .tabbrowser-tab[multiselected="true"] .tab-background { 261 | position: relative !important; 262 | overflow: visible !important; 263 | background-color: var(--nebula-color-selected) !important; 264 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 265 | transition: 266 | background-color 0.3s ease, 267 | box-shadow 0.3s ease !important; 268 | } 269 | 270 | .tabbrowser-tab[multiselected="true"] .tab-background::after { 271 | content: ""; 272 | position: absolute; 273 | inset: 3px; 274 | transform: translateZ(0); 275 | z-index: -1; 276 | width: calc(100% - 6px); 277 | height: calc(100% - 6px); 278 | 279 | /* Default gradient style (option 1) */ 280 | background: linear-gradient( 281 | 45deg, 282 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 283 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 284 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 285 | color-mix(in srgb, var(--zen-primary-color) 100%, black), 286 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 287 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 288 | ); 289 | background-size: 200% 200%; 290 | filter: blur(10px) brightness(1) contrast(120%); 291 | opacity: 0.3 !important; 292 | animation: multiselect-glow-gradient 3.5s linear infinite; 293 | transition: opacity 0.3s ease !important; 294 | pointer-events: none; 295 | } 296 | 297 | /* Collapsed toolbar state */ 298 | html[nebula-collapsed-toolbar] .tabbrowser-tab[multiselected="true"] .tab-background::after { 299 | inset: 2px 6px; 300 | width: calc(100% - 12px); 301 | height: calc(100% - 4px); 302 | } 303 | 304 | /* Gradient Style Variations */ 305 | @media (-moz-pref("nebula-glow-gradient", 0)) { 306 | .tabbrowser-tab[multiselected="true"] .tab-background::after { 307 | display: none; 308 | } 309 | } 310 | 311 | @media (-moz-pref("nebula-glow-gradient", 2)) { 312 | .tabbrowser-tab[multiselected="true"] .tab-background::after { 313 | background: linear-gradient( 314 | 45deg, 315 | light-dark(#dddddd, #ffffff), 316 | light-dark(#eeeeee, #dddddd), 317 | light-dark(#dddddd, #bbbbbb), 318 | light-dark(#ffffff, #000000), 319 | light-dark(#eeeeee, #dddddd), 320 | light-dark(#dddddd, #ffffff) 321 | ); 322 | background-size: 200% 200%; 323 | } 324 | } 325 | 326 | @media (-moz-pref("nebula-glow-gradient", 3)) { 327 | .tabbrowser-tab[multiselected="true"] .tab-background::after { 328 | background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00); 329 | background-size: 200% 200%; 330 | } 331 | } 332 | 333 | /* Animation */ 334 | @keyframes multiselect-glow-gradient { 335 | from { background-position: 0% 50%; } 336 | to { background-position: 200% 50%; } 337 | } 338 | 339 | /* ----------------------- Tab Hover Gradient ----------------------- */ 340 | 341 | .tabbrowser-tab { 342 | position: relative; 343 | overflow: hidden; 344 | border-radius: calc(var(--nebula-border-radius) + 1px); 345 | } 346 | 347 | .tabbrowser-tab::before { 348 | content: ""; 349 | position: absolute; 350 | inset: 3px; 351 | background: linear-gradient( 352 | 45deg, 353 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 354 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 355 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 356 | color-mix(in srgb, var(--zen-primary-color) 100%, black), 357 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 358 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 359 | ); 360 | background-size: 200% 200%; 361 | border-radius: var(--nebula-border-radius); 362 | clip-path: inset(0 round var(--nebula-border-radius)); 363 | animation: tab-hover-gradient 3.5s linear infinite paused; 364 | opacity: 0; 365 | filter: blur(10px) brightness(1) contrast(120%); 366 | transition: opacity 0.7s ease-in-out, transform 0.2s; 367 | pointer-events: none; 368 | } 369 | 370 | /* Collapsed toolbar state */ 371 | html[nebula-collapsed-toolbar] .tabbrowser-tab::before { 372 | inset: 2px 6px; 373 | } 374 | 375 | /* Gradient Style Variations */ 376 | @media (-moz-pref("nebula-glow-gradient", 0)) { 377 | .tabbrowser-tab::before { 378 | display: none; 379 | } 380 | } 381 | 382 | @media (-moz-pref("nebula-glow-gradient", 2)) { 383 | .tabbrowser-tab::before { 384 | background: linear-gradient( 385 | 45deg, 386 | light-dark(#dddddd, #ffffff), 387 | light-dark(#eeeeee, #dddddd), 388 | light-dark(#dddddd, #bbbbbb), 389 | light-dark(#ffffff, #000000), 390 | light-dark(#eeeeee, #dddddd), 391 | light-dark(#dddddd, #ffffff) 392 | ); 393 | background-size: 200% 200%; 394 | } 395 | } 396 | 397 | @media (-moz-pref("nebula-glow-gradient", 3)) { 398 | .tabbrowser-tab::before { 399 | background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00); 400 | background-size: 200% 200%; 401 | } 402 | } 403 | 404 | /* Interactive States */ 405 | .tabbrowser-tab:hover::before { 406 | animation-play-state: running; 407 | opacity: 0.5; 408 | } 409 | 410 | .tabbrowser-tab:has(.tab-close-button:hover, .tab-reset-button:hover)::before, 411 | #zen-essentials-container .tabbrowser-tab[selected]::before, 412 | #zen-essentials-container .tabbrowser-tab[selected]:active::before { 413 | opacity: 0 !important; 414 | } 415 | 416 | .tabbrowser-tab:active::before { 417 | transform: scale(0.95); 418 | } 419 | 420 | #zen-essentials-container .tabbrowser-tab:active::before { 421 | transform: none !important; 422 | } 423 | 424 | /* Animation */ 425 | @keyframes tab-hover-gradient { 426 | from { background-position: 0% 50%; } 427 | to { background-position: 200% 50%; } 428 | } 429 | 430 | /* -------------------- Split View Container Outline -------------------- */ 431 | 432 | #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer { 433 | outline: none !important; 434 | transition: box-shadow 0.35s ease !important; 435 | box-shadow: 436 | 0 0 0 2px light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0)), 437 | 0 4px 10px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important; 438 | } 439 | 440 | #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer.deck-selected { 441 | box-shadow: 442 | 0 0 0 2px color-mix(in srgb, var(--zen-primary-color) 50%, transparent), 443 | 0 4px 10px color-mix(in srgb, var(--zen-primary-color) 30%, transparent) !important; 444 | } 445 | 446 | /* -------------------- Split View Tab Group Styling -------------------- */ 447 | 448 | tab-group[split-view-group] .tab-group-container { 449 | display: flex; 450 | flex-direction: column; 451 | padding: 2px !important; 452 | position: relative; 453 | 454 | transform: scale(1); 455 | border-radius: 13px !important; 456 | background-color: transparent !important; 457 | box-shadow: 0 0 8px rgba(0, 0, 0, 0) !important; 458 | transition: 459 | background-color 0.3s ease-out, 460 | box-shadow 0.3s ease-out, 461 | transform 0.15s cubic-bezier(0.2, 0.8, 0.4, 1) !important; 462 | 463 | /* Vertical bar indicator */ 464 | &::after { 465 | content: ""; 466 | position: absolute; 467 | left: 2px; 468 | top: 6px; 469 | bottom: 6px; 470 | width: 3px; 471 | border-radius: 2px; 472 | transition: width 0.2s ease-out, opacity 0.2s ease-out; 473 | } 474 | 475 | /* Hover background */ 476 | &:hover { 477 | background-color: var(--nebula-color-hover) !important; 478 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 479 | } 480 | 481 | /* Hide the left bar when hovered OR has a selected tab */ 482 | &:hover::after, 483 | &:has(> tab:is([visuallyselected], [multiselected]))::after { 484 | width: 0; 485 | opacity: 0; 486 | } 487 | 488 | /* Selected styling */ 489 | &:has(> tab:is([visuallyselected], [multiselected])) { 490 | background-color: var(--nebula-color) !important; 491 | box-shadow: 0 0 3px var(--nebula-color-shadow) !important; 492 | } 493 | 494 | /* Remove separators */ 495 | & > .tabbrowser-tab:not(:last-child)::after { 496 | width: 0 !important; 497 | height: 0 !important; 498 | } 499 | } 500 | 501 | /* Active press animation */ 502 | tab-group[split-view-group] .tab-group-container:active:not(:has( 503 | .tab-icon-overlay:hover, 504 | .tab-icon-overlay:active, 505 | .tab-close-button:hover, 506 | .tab-close-button:active 507 | )) { 508 | transform: scale(0.95) !important; 509 | transition-duration: 0.1s !important; 510 | transition-timing-function: ease-out !important; 511 | } 512 | 513 | /* -------------------- Tab Group Internals -------------------- */ 514 | 515 | tab-group[split-view-group] .tabbrowser-tab { 516 | /* remove separators */ 517 | &:not(:last-child)::after { 518 | width: 0 !important; 519 | height: 0 !important; 520 | } 521 | 522 | /* background + shape */ 523 | .tab-background { 524 | border-radius: 12px !important; 525 | } 526 | 527 | /* close button shape + scale */ 528 | .tab-close-button { 529 | border-radius: 10px !important; 530 | scale: 0.8 !important; 531 | } 532 | } 533 | 534 | /* Apply background only if the group has a selected tab */ 535 | tab-group[split-view-group]:has(.tabbrowser-tab[visuallyselected]) 536 | .tabbrowser-tab .tab-background { 537 | background-color: rgba(100,100,100,0.15); 538 | } -------------------------------------------------------------------------------- /Nebula/content/Better-pdf.css: -------------------------------------------------------------------------------- 1 | /* ------------ BETTER PDF VIEWER ----------- */ 2 | :root { 3 | --pdf-js-pseudobg-bg: #dedede; 4 | @media (prefers-color-scheme: dark) { 5 | --pdf-js-pseudobg-bg: #2e2e2e; 6 | } 7 | } 8 | 9 | #mainContainer::before { 10 | content: '' !important; 11 | position: absolute !important; 12 | background: var(--pdf-js-pseudobg-bg) !important; 13 | top: 5px !important; 14 | left: 50% !important; 15 | transform: translate(-50%, 0); 16 | width: calc(100% - 10px) !important; 17 | max-width: min(var(--natsumi-pdfjs-topbar-max-width), calc(100% - 10px)) !important; 18 | border-radius: 10px; 19 | padding-top: 5px !important; 20 | padding-bottom: 5px !important; 21 | height: calc(var(--toolbar-height)) !important; 22 | z-index: -10000 !important; 23 | } 24 | 25 | .sidebarOpen::before { 26 | content: ''; 27 | background: var(--pdf-js-pseudobg-bg) !important; 28 | position: absolute !important; 29 | height: calc(100% - 62px) !important; 30 | left: 5px !important; 31 | top: auto !important; 32 | bottom: 5px !important; 33 | border-radius: 10px !important; 34 | width: var(--sidebar-width) !important; 35 | 36 | } 37 | /* ---- Config ----- */ 38 | 39 | /* 40 | Feel free to change these values to whatever you want, as long 41 | as they use the correct format. 42 | */ 43 | 44 | * { 45 | /* Accent color */ 46 | --natsumi-pages-accent-color: #101010; 47 | 48 | /* Natsumi Glass Effect */ 49 | --glass-blur-radius: 20px; 50 | --glass-shadow-size: 10px; 51 | --glass-shadow-opacity: 65%; 52 | 53 | /* Custom fonts experiment (must be an installed font) */ 54 | --custom-font: 'Poppins'; 55 | 56 | /* pdf.js */ 57 | --pdfjs-topbar-max-width: 750px; /* use calc(100% - 10px) for max width */ 58 | 59 | } 60 | 61 | /* preload */ 62 | /* ==== Apply config ==== */ 63 | 64 | /* 65 | NOTE: DO NOT USE THIS AS YOUR CONFIG FILE. 66 | 67 | The below code applies your config (or default values if needed) and they should never be modified. 68 | Edit the natsumi-config.css file instead. 69 | */ 70 | 71 | * { 72 | /* Colors */ 73 | --natsumi-primary-color: var(--natsumi-pages-accent-color, #aac7ff); 74 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 75 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 76 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 77 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 78 | 79 | @media (prefers-color-scheme: dark) { 80 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #202020 80%); 81 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #202020 70%); 82 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, #202020 99%); 83 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 84 | 85 | @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') { 86 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 87 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 88 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 89 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 90 | } 91 | } 92 | 93 | /* Glass effect */ 94 | --natsumi-glass-background: color-mix(in srgb, var(--natsumi-colors-secondary) 60%, transparent); 95 | --natsumi-glass-blur-radius: var(--glass-blur-radius, 10px); 96 | --natsumi-glass-shadow-size: var(--glass-shadow-size, 10px); 97 | --natsumi-glass-shadow-opacity: var(--glass-shadow-opacity, 75%); 98 | 99 | /* pdf.js */ 100 | --natsumi-pdfjs-topbar-max-width: var(--pdfjs-topbar-max-width, 750px); 101 | 102 | } 103 | 104 | 105 | /* pdfjs */ 106 | 107 | /* ==== PDF viewer tweaks ==== */ 108 | 109 | @keyframes pdfjs-appear { 110 | from { 111 | opacity: 0; 112 | } 113 | 114 | to { 115 | opacity: 1; 116 | } 117 | } 118 | 119 | @keyframes secondary-appear { 120 | 0% { 121 | opacity: 0; 122 | margin-top: -10px; 123 | } 124 | 125 | 100% { 126 | opacity: 1; 127 | margin-top: 0; 128 | } 129 | } 130 | 131 | @keyframes properties-appear { 132 | 0% { 133 | opacity: 0; 134 | top: 50px; 135 | } 136 | 137 | 100% { 138 | opacity: 1; 139 | top: 0; 140 | } 141 | } 142 | 143 | html[mozdisallowselectionprint] { 144 | &:has(head link:nth-of-type(1)[href^="resource://pdf.js"]) { 145 | --natsumi-colors-border: color-mix(in srgb, var(--natsumi-colors-secondary) 80%, black 20%); 146 | --toolbarbutton-active-background: rgba(255, 255, 255, 0.9); 147 | --toolbarbutton-hover-background: color-mix(in srgb, #202020 10%, transparent); 148 | 149 | @media (prefers-color-scheme: dark) { 150 | --toolbarbutton-active-background: color-mix(in srgb, var(--natsumi-primary-color) 50%, rgba(255, 255, 255, .1)); 151 | --toolbarbutton-hover-background: color-mix(in srgb, #ebebeb 10%, transparent); 152 | } 153 | 154 | body { 155 | @media (prefers-color-scheme: dark) { 156 | background: transparent !important; 157 | background-color: transparent !important; 158 | } 159 | } 160 | 161 | #viewerContainer { 162 | inset: 0 !important; 163 | background: transparent !important; 164 | background-color: transparent !important; 165 | 166 | #viewer > .page:first-of-type, 167 | #viewer .spread:first-of-type .page { 168 | margin-top: 43px !important; 169 | transition: margin-top 0.3s ease; 170 | } 171 | } 172 | 173 | .toolbar { 174 | width: 100%; 175 | height: 10px; 176 | 177 | @media (-moz-bool-pref: "natsumi.theme.compact-marginless") { 178 | height: 15px; 179 | } 180 | } 181 | 182 | #toolbarContainer, #sidebarContainer { 183 | background: var(--natsumi-glass-background) !important; 184 | backdrop-filter: blur(5px); 185 | border-radius: 10px; 186 | } 187 | 188 | #toolbarContainer { 189 | position: absolute !important; 190 | top: 5px !important; 191 | left: 50% !important; 192 | transform: translate(-50%, 0); 193 | width: calc(100% - 10px) !important; 194 | max-width: min(var(--natsumi-pdfjs-topbar-max-width), calc(100% - 10px)) !important; 195 | border-radius: 10px; 196 | padding-top: 5px !important; 197 | padding-bottom: 5px !important; 198 | height: calc(var(--toolbar-height) + 10px) !important; 199 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 200 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 201 | animation: pdfjs-appear 0.3s ease; 202 | overflow: hidden !important; 203 | 204 | @media (prefers-color-scheme: dark) { 205 | border-color: rgba(235, 235, 235, 0.3) !important; 206 | } 207 | 208 | &:has(#loadingBar.hidden) { 209 | overflow: visible !important; 210 | } 211 | 212 | #toolbarViewer { 213 | padding-left: 5px; 214 | padding-right: 5px; 215 | } 216 | 217 | .doorHangerRight { 218 | padding: 5px !important; 219 | top: 40px !important; 220 | right: -7px !important; 221 | background: var(--natsumi-glass-background) !important; 222 | backdrop-filter: blur(5px); 223 | border-radius: 10px !important; 224 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 225 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 226 | animation: secondary-appear 0.3s ease; 227 | 228 | &.hidden { 229 | animation: none !important; 230 | } 231 | 232 | @media (prefers-color-scheme: dark) { 233 | border-color: rgba(235, 235, 235, 0.3) !important; 234 | } 235 | 236 | &::before, &::after { 237 | display: none !important; 238 | } 239 | } 240 | 241 | .thicknessPicker { 242 | &::before, &::after { 243 | @media (prefers-color-scheme: dark) { 244 | background-color: white !important; 245 | } 246 | } 247 | } 248 | 249 | #loadingBar { 250 | top: unset !important; 251 | bottom: 0 !important; 252 | border: none !important; 253 | 254 | .progress { 255 | background-color: var(--natsumi-primary-color) !important; 256 | } 257 | } 258 | } 259 | 260 | #sidebarContainer { 261 | height: calc(100% - 62px) !important; 262 | left: -5px !important; 263 | top: auto !important; 264 | bottom: 5px !important; 265 | opacity: 0 !important; 266 | transition: left 0.2s ease, opacity 0.2s ease, filter 0.2s ease !important; 267 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 268 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 269 | filter: blur(0px); 270 | 271 | @media (prefers-color-scheme: dark) { 272 | border-color: rgba(235, 235, 235, 0.3) !important; 273 | } 274 | 275 | #toolbarSidebar { 276 | background: transparent !important; 277 | box-shadow: none !important; 278 | padding: 5px !important; 279 | height: calc(var(--toolbar-height) + 10px) !important; 280 | } 281 | 282 | #sidebarContent { 283 | margin-top: 10px !important; 284 | box-shadow: none !important; 285 | } 286 | 287 | .treeItem { 288 | a, .treeItems { 289 | border-radius: 5px !important; 290 | transition: background-color 0.2s ease; 291 | } 292 | 293 | .treeItemToggler { 294 | &::before { 295 | background-color: transparent !important; 296 | mask-image: none !important; 297 | background-image: url('chrome://browser/skin/zen-icons/arrow-down.svg') !important; 298 | 299 | @media (prefers-color-scheme: dark) { 300 | filter: invert(); 301 | } 302 | } 303 | 304 | &.treeItemsHidden::before { 305 | background-image: url('chrome://browser/skin/zen-icons/arrow-right.svg') !important; 306 | } 307 | } 308 | } 309 | 310 | .thumbnail { 311 | margin-bottom: 22px !important; 312 | transition: border-color 0.2s ease; 313 | 314 | &::after { 315 | content: attr(data-page-number); 316 | display: block; 317 | color: black; 318 | width: 100%; 319 | margin-top: 8px; 320 | text-align: center; 321 | 322 | @media (prefers-color-scheme: dark) { 323 | color: white; 324 | } 325 | } 326 | } 327 | } 328 | 329 | #outerContainer.sidebarOpen #sidebarContainer { 330 | left: 5px !important; 331 | opacity: 1 !important; 332 | filter: blur(0); 333 | } 334 | 335 | #scaleSelectContainer { 336 | border-radius: 4px !important; 337 | overflow: hidden !important; 338 | 339 | select { 340 | background-color: #f1f1f1 !important; 341 | 342 | @media (prefers-color-scheme: dark) { 343 | background-color: #363636 !important; 344 | } 345 | } 346 | } 347 | 348 | #pageNumber { 349 | border-radius: 4px !important; 350 | overflow: hidden !important; 351 | background-color: #ffffff !important; 352 | border-color: var(--natsumi-colors-border) !important; 353 | 354 | @media (prefers-color-scheme: dark) { 355 | background-color: #23222b !important; 356 | } 357 | } 358 | 359 | .verticalToolbarSeparator, .splitToolbarButtonSeparator, .horizontalToolbarSeparator, .separator { 360 | border-color: rgba(20, 20, 20, 0.2) !important; 361 | 362 | @media (prefers-color-scheme: dark) { 363 | border-color: rgba(235, 235, 235, 0.3) !important; 364 | } 365 | } 366 | 367 | #editorHighlightVisibility .divider { 368 | background-color: rgba(20, 20, 20, 0.2) !important; 369 | 370 | @media (prefers-color-scheme: dark) { 371 | background-color: rgba(235, 235, 235, 0.3) !important; 372 | } 373 | } 374 | 375 | .toolbarButton { 376 | border-radius: 6px !important; 377 | transition: background-color 0.2s ease; 378 | 379 | &:hover { 380 | background-color: var(--toolbarbutton-hover-background) !important; 381 | } 382 | 383 | &.toggled { 384 | background-color: var(--toolbarbutton-active-background) !important; 385 | } 386 | 387 | &::before { 388 | mask-size: contain !important; 389 | mask-repeat: no-repeat; 390 | -moz-context-properties: fill; 391 | } 392 | } 393 | 394 | /* Document properties */ 395 | 396 | #documentPropertiesDialog { 397 | background: var(--natsumi-glass-background) !important; 398 | backdrop-filter: blur(5px); 399 | border-radius: 10px !important; 400 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 401 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 402 | 403 | @media (prefers-color-scheme: dark) { 404 | border-color: rgba(235, 235, 235, 0.3) !important; 405 | } 406 | 407 | &:is([open]) { 408 | animation: properties-appear 0.3s ease !important; 409 | } 410 | 411 | #documentPropertiesClose { 412 | border-radius: 5px !important; 413 | background-color: #f1f1f1 !important; 414 | 415 | @media (prefers-color-scheme: dark) { 416 | background-color: #363636 !important; 417 | } 418 | } 419 | } 420 | 421 | /* Compact mode */ 422 | 423 | @media (-moz-bool-pref: "natsumi.pdfjs.compact") { 424 | .toolbar { 425 | #toolbarContainer { 426 | opacity: 0 !important; 427 | pointer-events: none; 428 | top: -5px !important; 429 | transition: opacity 0.3s ease, top 0.3s ease, filter 0.3s ease; 430 | filter: blur(5px); 431 | } 432 | 433 | &:hover, &:has(.toolbarButton:not(#sidebarToggleButton)[aria-expanded="true"]), 434 | &:has(input:focus), &:has(select:focus) { 435 | height: 52px; 436 | 437 | #toolbarContainer { 438 | top: 5px !important; 439 | opacity: 1 !important; 440 | pointer-events: auto; 441 | filter: blur(0); 442 | } 443 | } 444 | } 445 | 446 | @media (-moz-bool-pref: "natsumi.pdfjs.compact-dynamic") { 447 | .toolbar:has(#sidebarToggleButton[aria-expanded="true"]) { 448 | height: 52px; 449 | 450 | #toolbarContainer { 451 | top: 5px !important; 452 | opacity: 1 !important; 453 | pointer-events: auto; 454 | filter: blur(0); 455 | } 456 | } 457 | 458 | &:has(#sidebarToggleButton:not([aria-expanded="true"])) { 459 | #viewer > .page:first-of-type, 460 | #viewer .spread:first-of-type .page { 461 | margin-top: 0 !important; 462 | } 463 | } 464 | } 465 | 466 | @media not (-moz-bool-pref: "natsumi.pdfjs.compact-dynamic") { 467 | #viewer > .page:first-of-type, 468 | #viewer .spread:first-of-type .page { 469 | margin-top: 0 !important; 470 | } 471 | } 472 | } 473 | 474 | /* Topbar buttons */ 475 | 476 | #previous::before { 477 | mask-image: url('chrome://browser/skin/zen-icons/arrow-up.svg') !important; 478 | } 479 | 480 | #next::before { 481 | mask-image: url('chrome://browser/skin/zen-icons/arrow-down.svg') !important; 482 | } 483 | 484 | #zoomOutButton::before { 485 | mask-image: url('chrome://browser/skin/zen-icons/zoom-out.svg') !important; 486 | } 487 | 488 | #zoomInButton::before { 489 | mask-image: url('chrome://browser/skin/zen-icons/plus.svg') !important; 490 | } 491 | 492 | #sidebarToggleButton::before { 493 | mask-image: url('chrome://browser/skin/zen-icons/sidebar.svg') !important; 494 | } 495 | 496 | #editorHighlightButton::before { 497 | mask-image: url('resource://pdf.js/web/images/toolbarButton-editorHighlight.svg') !important; 498 | } 499 | 500 | #editorFreeTextButton::before { 501 | mask-image: url('resource://pdf.js/web/images/toolbarButton-editorFreeText.svg') !important; 502 | } 503 | 504 | #editorInkButton::before { 505 | mask-image: url('resource://pdf.js/web/images/toolbarButton-editorInk.svg') !important; 506 | } 507 | 508 | #editorStampButton::before { 509 | mask-image: url('chrome://browser/skin/zen-icons/canvas.svg') !important; 510 | } 511 | 512 | #secondaryPrint::before, #printButton::before { 513 | mask-image: url('chrome://browser/skin/zen-icons/print.svg') !important; 514 | } 515 | 516 | #secondaryDownload::before, #downloadButton::before { 517 | mask-image: url('chrome://browser/skin/zen-icons/save.svg') !important; 518 | } 519 | 520 | #presentationMode::before { 521 | mask-image: url('resource://pdf.js/web/images/toolbarButton-presentationMode.svg') !important; 522 | } 523 | 524 | #viewBookmark::before { 525 | mask-image: url('resource://pdf.js/web/images/toolbarButton-bookmark.svg') !important; 526 | } 527 | 528 | #firstPage::before { 529 | mask-image: url('chrome://browser/skin/zen-icons/arrow-up.svg') !important; 530 | } 531 | 532 | #lastPage::before { 533 | mask-image: url('chrome://browser/skin/zen-icons/arrow-down.svg') !important; 534 | } 535 | 536 | #pageRotateCw::before { 537 | mask-image: url('chrome://browser/skin/zen-icons/reload.svg') !important; 538 | } 539 | 540 | #pageRotateCcw::before { 541 | transform: scaleX(-1); 542 | mask-image: url('chrome://browser/skin/zen-icons/reload.svg') !important; 543 | } 544 | 545 | #cursorSelectTool::before { 546 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-selectTool.svg') !important; 547 | } 548 | 549 | #cursorHandTool::before { 550 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-handTool.svg') !important; 551 | } 552 | 553 | #scrollPage::before { 554 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-scrollPage.svg') !important; 555 | } 556 | 557 | #scrollVertical::before { 558 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-scrollVertical.svg') !important; 559 | } 560 | 561 | #scrollHorizontal::before { 562 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-scrollHorizontal.svg') !important; 563 | } 564 | 565 | #scrollWrapped::before { 566 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-scrollWrapped.svg') !important; 567 | } 568 | 569 | #spreadNone::before { 570 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-spreadNone.svg') !important; 571 | } 572 | 573 | #spreadOdd::before { 574 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-spreadOdd.svg') !important; 575 | } 576 | 577 | #spreadEven::before { 578 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-spreadEven.svg') !important; 579 | } 580 | 581 | #documentProperties::before { 582 | mask-image: url('resource://pdf.js/web/images/secondaryToolbarButton-documentProperties.svg') !important; 583 | } 584 | 585 | #editorStampAddImage::before { 586 | mask-image: url('chrome://browser/skin/zen-icons/plus.svg') !important; 587 | } 588 | 589 | #secondaryToolbarToggleButton::before { 590 | mask-image: url('chrome://browser/skin/zen-icons/arrow-right.svg') !important; 591 | } 592 | 593 | /* Sidebar buttons */ 594 | 595 | #viewThumbnail::before { 596 | mask-image: url('resource://pdf.js/web/images/toolbarButton-viewThumbnail.svg') !important; 597 | } 598 | 599 | #viewOutline::before { 600 | mask-image: url('resource://pdf.js/web/images/toolbarButton-viewOutline.svg') !important; 601 | } 602 | 603 | #viewAttachments::before { 604 | mask-image: url('resource://pdf.js/web/images/toolbarButton-viewAttachments.svg') !important; 605 | } 606 | 607 | #viewLayers::before { 608 | mask-image: url('resource://pdf.js/web/images/toolbarButton-viewLayers.svg') !important; 609 | } 610 | 611 | #currentOutlineItem::before { 612 | mask-image: url('resource://pdf.js/web/images/toolbarButton-currentOutlineItem.svg') !important; 613 | } 614 | 615 | /* Checked buttons */ 616 | 617 | #secondaryToolbarButtonContainer .toolbarButton[aria-checked="true"]::before { 618 | mask-image: url('chrome://browser/skin/zen-icons/checkmark.svg') !important; 619 | } 620 | } 621 | } 622 | 623 | 624 | /* global */ 625 | /* ==== Global tweaks ==== */ 626 | 627 | * { 628 | /*noinspection CssInvalidFunction*/ 629 | @media (-moz-bool-pref: "natsumi.global.highlight-accent-color") { 630 | &::-moz-selection, &::selection { 631 | background: var(--natsumi-primary-color) !important; 632 | 633 | @media (prefers-color-scheme: dark) { 634 | background: color-mix(in srgb, var(--natsumi-colors-primary) 60%, white) !important; 635 | } 636 | } 637 | } 638 | } 639 | 640 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc.