diff --git a/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css new file mode 100644 index 00000000..91d40510 --- /dev/null +++ b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css @@ -0,0 +1,688 @@ + +/* :root { + --console-error-color: #fff !important; + --console-error-border: #e3b2b245 !important; + --console-error-background: #e78cbf3d !important; + --theme-icon-error-color: #fff !important; + +--console-warning-color: #fff !important; + --console-warning-border: #f7eacc85 !important; + --console-warning-background: #f7bb5d52 !important; + --theme-icon-warning-color: #fff !important; + +.message { + padding: 4px; + border-top-color: #ffffff6b !important; + } + +.message-repeats { + background-color: white !important; + color: black !important; + } + +.frame-link-filename { + color: #bcbcbc !important; + } + +.frame-link .frame-link-source { + color: #bcbcbc !important; + } + +.ruleview-rule-source-label { + color: #c6c6c6bd !important; + } + +.panel-container { + background: #6c6c6c4f !important; + border-radius: 0 0 5px 5px !important + } + +.CodeMirror-line { + padding: 4px !important; + } + +.network-monitor { + outline: 1px solid rgba(255, 255, 255, 0.5) !important; + border-radius: 0 0 5px 5px !important; + } + +.network.message .network-info #response-panel { + height: 350px !important; + } + +} */ + +:root.theme-dark { + --theme-tab-toolbar-background: #2a2a2c !important; + --theme-toolbar-background: #323234 !important; + --theme-selection-color: #ffffff !important; + --theme-splitter-color: rgba(0, 0, 0, 0.25) !important; + --theme-comment: #7f8c98 !important; + +--test-theme-body-background: #1e1e20 !important; + --theme-sidebar-background: #252527 !important; + /* --panel-background: #303033 !important; */ + +--theme-body-color: #cdcdcd !important; + --theme-body-color-alt: #e0e0e0 !important; + --theme-content-color1: #f0f0f0 !important; + --theme-content-color2: #cdcdcd !important; + --theme-content-color3: #969696 !important; + +--theme-border-radius: 6px !important; + --theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; + --theme-transition-duration: 0.2s !important; + --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important; + +--theme-selection-background: rgba(255, 255, 255, 0.07) !important; + --theme-focus-outline-color: rgba(255, 255, 255, 0.07) !important; + --theme-toolbar-hover: rgba(255, 255, 255, 0.07) !important; + --theme-toolbar-active: rgba(255, 255, 255, 0.12) !important; + +--theme-highlight-blue: #82aaff !important; + --theme-highlight-purple: #c792ea !important; + --theme-highlight-pink: #ff5370 !important; + --theme-highlight-red: #f07178 !important; + --theme-highlight-orange: #f78c6c !important; + --theme-highlight-lightorange: #ffcb6b !important; + --theme-highlight-green: #c3e88d !important; + --theme-highlight-bluegrey: #89ddff !important; + --theme-highlight-yellow: #ffcb6b !important; + +--console-error-color: #fff; + --console-error-border: #e3b2b245; + --console-error-background: #e78cbf3d; + --theme-icon-error-color: #fff; + +--console-warning-color: #fff; + --console-warning-border: #f7eacc85; + --console-warning-background: #f7bb5d52; + --theme-icon-warning-color: #fff; + +.message { + padding: 4px; + border-top-color: #ffffff6b !important; + } + +.message-repeats { + background-color: white !important; + color: black !important; + } + +.frame-link-filename { + color: #bcbcbc !important; + } + +.frame-link .frame-link-source { + color: #bcbcbc !important; + } + +.ruleview-rule-source-label { + color: #c6c6c6bd !important; + } + +.panel-container { + background: #6c6c6c4f !important; + border-radius: 0 0 5px 5px !important; + } + +.CodeMirror-line { + padding: 4px !important; + } + +.network-monitor { + outline: 1px solid rgba(255, 255, 255, 0.5) !important; + border-radius: 0 0 5px 5px !important; + } + +.network.message .network-info #response-panel { + height: 350px !important; + } + +.theme-body { + background: #18181a !important; + } + +.devtools-tab, + .devtools-sidebar-tabs tab { + border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important; + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), + box-shadow var(--theme-transition-duration) var(--theme-transition-timing), + padding var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: var(--theme-font-family); + letter-spacing: 0.2px; + } + +.devtools-tab.selected { + position: relative !important; + background-color: rgba(255, 255, 255, 0.07) !important; + } + +.devtools-tab.selected::after { + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + height: 2px !important; + background-color: var(--theme-highlight-blue) !important; + border-top: 0 solid transparent !important; + border-radius: 1px !important; + } + +.devtools-tab:hover { + padding: 3px !important; + } + +.devtools-button, + .devtools-toolbarbutton { + border-radius: 4px !important; + transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: var(--theme-font-family); + } + +.devtools-tabbar-button:hover { + background-color: var(--theme-toolbar-hover) !important; + transform: translateY(-1px) !important; + } + +.devtools-tabbar-button:active { + background-color: var(--theme-toolbar-active) !important; + transform: translateY(0) !important; + } + +.devtools-button:hover, + .devtools-toolbarbutton:hover { + background-color: var(--theme-toolbar-hover) !important; + transform: translateY(-1px) !important; + } + +.devtools-button:active, + .devtools-toolbarbutton:active { + background-color: var(--theme-toolbar-active) !important; + transform: translateY(0) !important; + } + +.devtools-container, + .devtools-sidebar, + /* .theme-panel, */ + .devtools-main-content { + border-radius: var(--theme-border-radius) !important; + overflow: hidden !important; + box-shadow: var(--theme-box-shadow) !important; + } + +.CodeMirror, + .inspector-tabpanel { + border-radius: var(--theme-border-radius) !important; + transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: "SF Mono", Menlo, monospace !important; + } + +.tree-rows, + .devtools-list { + border-radius: var(--theme-border-radius) !important; + } + +.tree-row:hover, + .devtools-list-item:hover { + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important; + background-color: var(--theme-toolbar-hover) !important; + } + +.devtools-separator { + opacity: 0; + } + +.devtools-togglebutton { + border-block: none !important; + padding: 4px 8px !important; + border-radius: 4px !important; + border: none !important; + } + +.devtools-togglebutton[aria-pressed="true"] { + background-color: #80808024 !important; + color: #fff !important; + } + +.split-box.vert>.splitter { + min-width: 10px !important; + } + +.split-box.horz>.splitter { + min-height: 10px !important; + } + +.devtools-side-splitter { + min-width: 10px !important; + } + +.devtools-tab-line { + display: none; + } + +.ruleview-enableproperty { + appearance: auto !important; + margin-bottom: 2px !important; + } + +.tabs .tabs-menu-item { + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important; + } + +.tabs .tabs-menu-item.is-active { + background-color: rgba(255, 255, 255, 0.07) !important; + } + +.tag-line { + padding-block: 3px; + } + +.theme-twisty { + opacity: 0.5 !important; + transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important; + } + +.theme-twisty:hover { + opacity: 1 !important; + } + +.theme-selected { + background-color: #39393b !important; + } + +.ruleview-highlight { + background-color: rgb(0, 0, 0) !important; + } + +.stylesheet-system.splitview-nav>li.splitview-active { + background-color: var(--theme-toolbar-active) !important; + } + +.devtools-tabbar-button.checked { + color: white !important; + } + +.tree-node.focused { + background-color: var(--theme-toolbar-active) !important; + } + +.tree .tree-node:not(.focused):hover { + background-color: var(--theme-toolbar-active) !important; + color: white !important; + } + +.source-tab::before { + background-color: unset !important; + } + +.source-tab.active { + background-color: var(--theme-toolbar-active) !important; + } + +.checkbox-container.menu-standard-padding { + background: #303033 !important; + border-radius: 12px !important; + } + +/* .tooltip-panel { + background: transparent !important; + } + +.tooltip-container.tooltip-bottom { + background: transparent !important; + } + +.tooltip-arrow { + display: none !important; + } */ +} + +:root.theme-light { + --theme-tab-toolbar-background: #f0f0f2 !important; + --theme-toolbar-background: #e8e8ea !important; + --theme-selection-color: #000000 !important; + --theme-splitter-color: rgba(0, 0, 0, 0.15) !important; + --theme-comment: #5c6773 !important; + +--test-theme-body-background: #ffffff !important; + --theme-sidebar-background: #f5f5f7 !important; + /* --panel-background: #5c6773 !important; */ + +--theme-body-color: #333333 !important; + --theme-body-color-alt: #202020 !important; + --theme-content-color1: #0f0f0f !important; + --theme-content-color2: #333333 !important; + --theme-content-color3: #696969 !important; + +--theme-border-radius: 6px !important; + --theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important; + --theme-transition-duration: 0.2s !important; + --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important; + +--theme-selection-background: rgba(0, 0, 0, 0.07) !important; + --theme-focus-outline-color: rgba(0, 0, 0, 0.07) !important; + --theme-toolbar-selected-color: black !important; + --theme-toolbar-hover: rgba(0, 0, 0, 0.07) !important; + --theme-toolbar-active: rgba(0, 0, 0, 0.12) !important; + +--theme-highlight-blue: #1565c0 !important; + --theme-highlight-purple: #6a1b9a !important; + --theme-highlight-pink: #d81b60 !important; + --theme-highlight-red: #c62828 !important; + --theme-highlight-orange: #ef6c00 !important; + --theme-highlight-lightorange: #f57f17 !important; + --theme-highlight-green: #2e7d32 !important; + --theme-highlight-bluegrey: #0277bd !important; + --theme-highlight-yellow: #f9a825 !important; + +--console-error-color: #000; + --console-error-border: #e3b2b245; + --console-error-background: #e78cbf3d; + --theme-icon-error-color: #000; + +--console-warning-color: #000; + --console-warning-border: #f7eacc85; + --console-warning-background: #f7bb5d52; + --theme-icon-warning-color: #000; + +.message { + padding: 4px; + border-top-color: #0000006b !important; + } + +.message-repeats { + background-color: black !important; + color: white !important; + } + +.frame-link-filename { + color: #4c4c4c !important; + } + +.frame-link .frame-link-source { + color: #4c4c4c !important; + } + +.ruleview-rule-source-label { + color: #3c3c3cbd !important; + } + +.panel-container { + background: #dcdcdc4f !important; + border-radius: 0 0 5px 5px !important; + } + +.CodeMirror-line { + padding: 4px !important; + } + +.network-monitor { + outline: 1px solid rgba(0, 0, 0, 0.5) !important; + border-radius: 0 0 5px 5px !important; + } + +.network.message .network-info #response-panel { + height: 350px !important; + } + +.theme-body { + background: #ffffff !important; + } + +.devtools-tab, + .devtools-sidebar-tabs tab { + border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important; + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), + box-shadow var(--theme-transition-duration) var(--theme-transition-timing), + padding var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: var(--theme-font-family); + letter-spacing: 0.2px; + } + +.devtools-tab.selected { + position: relative !important; + background-color: rgba(0, 0, 0, 0.07) !important; + } + +.devtools-tab.selected::after { + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + height: 2px !important; + background-color: var(--theme-highlight-blue) !important; + border-top: 0 solid transparent !important; + border-radius: 1px !important; + } + +.devtools-tab:hover { + padding: 3px !important; + } + +.devtools-button, + .devtools-toolbarbutton { + border-radius: 4px !important; + transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: var(--theme-font-family); + } + +.devtools-tabbar-button:hover { + background-color: var(--theme-toolbar-hover) !important; + transform: translateY(-1px) !important; + } + +.devtools-tabbar-button:active { + background-color: var(--theme-toolbar-active) !important; + transform: translateY(0) !important; + } + +.devtools-button:hover, + .devtools-toolbarbutton:hover { + background-color: var(--theme-toolbar-hover) !important; + transform: translateY(-1px) !important; + } + +.devtools-button:active, + .devtools-toolbarbutton:active { + background-color: var(--theme-toolbar-active) !important; + transform: translateY(0) !important; + } + +.devtools-container, + .devtools-sidebar, + /* .theme-panel, */ + .devtools-main-content { + border-radius: var(--theme-border-radius) !important; + overflow: hidden !important; + box-shadow: var(--theme-box-shadow) !important; + } + +.CodeMirror, + .inspector-tabpanel { + border-radius: var(--theme-border-radius) !important; + transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important; + font-family: "SF Mono", Menlo, monospace !important; + } + +.tree-rows, + .devtools-list { + border-radius: var(--theme-border-radius) !important; + } + +.tree-row:hover, + .devtools-list-item:hover { + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important; + background-color: var(--theme-toolbar-hover) !important; + } + +.devtools-separator { + opacity: 0; + } + +.devtools-togglebutton { + border-block: none !important; + padding: 4px 8px !important; + border-radius: 4px !important; + border: none !important; + } + +.devtools-togglebutton[aria-pressed="true"] { + background-color: rgba(0, 0, 0, 0.14) !important; + color: #000 !important; + } + +.split-box.vert>.splitter { + min-width: 10px !important; + } + +.split-box.horz>.splitter { + min-height: 10px !important; + } + +.devtools-side-splitter { + min-width: 10px !important; + } + +.devtools-tab-line { + display: none; + } + +.ruleview-enableproperty { + appearance: auto !important; + margin-bottom: 2px !important; + } + +.tabs .tabs-menu-item { + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important; + } + +.tabs .tabs-menu-item.is-active { + background-color: rgba(0, 0, 0, 0.07) !important; + } + +.tag-line { + padding-block: 3px; + } + +.theme-twisty { + opacity: 0.5 !important; + transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important; + } + +.theme-twisty:hover { + opacity: 1 !important; + } + +.theme-selected { + background-color: #e0e0e2 !important; + } + +.ruleview-highlight { + background-color: rgba(255, 217, 15, 0.59) !important; + } + +.stylesheet-system.splitview-nav>li.splitview-active { + background-color: var(--theme-toolbar-active) !important; + } + +.devtools-tabbar-button.checked { + color: black !important; + } + +.tree-node.focused { + background-color: var(--theme-toolbar-active) !important; + } + +.tree .tree-node:not(.focused):hover { + background-color: var(--theme-toolbar-active) !important; + color: black !important; + } + +.source-tab::before { + background-color: unset !important; + } + +.source-tab.active { + background-color: var(--theme-toolbar-active) !important; + } + +.checkbox-container.menu-standard-padding { + background: #f0f0f2 !important; + border-radius: 12px !important; + } + +/* .tooltip-panel { + background: transparent !important; + } + +.tooltip-container.tooltip-bottom { + background: transparent !important; + } + +.tooltip-arrow { + display: none !important; + } */ +} + +.tooltip-container, +.devtools-tooltip { + box-shadow: var(--theme-box-shadow) !important; + animation: tooltipFade 0.2s var(--theme-transition-timing) !important; + font-family: var(--theme-font-family); +} + +@keyframes tooltipFade { + from { + opacity: 0; + transform: translateY(5px); + } + +to { + opacity: 1; + transform: translateY(0); + } +} + +#toolbox-close { + position: relative; +} + +#toolbox-close::before { + content: ""; + background-image: url("chrome://devtools/skin/images/close.svg"); + background-size: contain; + background-repeat: no-repeat; + display: inline-block; + width: 24px; + height: 24px; + opacity: 1; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1); +} + +#toolbox-close::after { + content: "👋"; + font-family: 24px !important; + display: inline-block; + opacity: 0; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + font-size: 20px; +} + +#toolbox-close:hover::before { + transform: translate(-50%, -50%) scale(0); + opacity: 0; +} + +#toolbox-close:hover::after { + transform: translate(-50%, -50%) scale(1); + opacity: 1; +} diff --git a/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png new file mode 100644 index 00000000..9a53407c Binary files /dev/null and b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png differ diff --git a/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md new file mode 100644 index 00000000..a43c1350 --- /dev/null +++ b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md @@ -0,0 +1,32 @@ + +# Firefox DevTools Minimalist Theme + +A revitalized, minimalist theme for Firefox DevTools, inspired by Zen's design. Includes CSS transitions and supports both light and dark modes. + +## Preview + +Here's a quick look at the theme: + +![Merged Screenshot](https://github.com/ArjiAmin/firefox-devtools/blob/main/images/screenshot_0_merged.png) + +## Installation + +1. Download or clone the repository. +2. In Firefox/Zen browser, navigate to `about:config`, accept the risk warning, and search for `toolkit.legacyUserProfileCustomizations.stylesheets`. Ensure it's set to **true** (this should be the default in Zen). +3. Navigate to `about:profiles` in your browser. +4. Locate the section that says "This is the profile in use and it cannot be deleted." Find the "Root Directory" and click the **Open Folder** button. +5. Navigate to the `chrome` folder and paste the downloaded `UserContent.css` file. +6. Return to `about:profiles` and click "Restart normally...". After restart, open DevTools to see the applied theme. + +## Development + +If you want to customize the theme or make your own changes: + +1. Open DevTools by pressing `F12`. +2. Click the three horizontal dots in the top-right corner to access Settings, or press F1. +3. Scroll down to "Advanced settings" and enable the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" checkboxes. +4. Close and reopen DevTools. +5. Press `Ctrl + Shift + Alt + I` to open the Browser Toolbox, which allows you to inspect the DevTools interface itself. +6. Use the element inspector to identify elements you want to modify and test CSS changes in real-time. + +**Note:** Changes made directly in the Browser Toolbox are temporary. To make permanent changes, update your `UserContent.css` file with your modifications. Remember that changes to `UserContent.css` require a browser restart to take effect. diff --git a/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/theme.json b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/theme.json new file mode 100644 index 00000000..f658e235 --- /dev/null +++ b/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/theme.json @@ -0,0 +1,14 @@ +{ + "id": "0d218357-d5be-48f1-bbc0-5e7cb2d2e11f", + "name": "Revitalized devtools", + "description": "A calmer theme for Zen's DevTools with added transitions and compatible white/dark modes.", + "homepage": "https://github.com/ArjiAmin/firefox-devtools", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png", + "author": "ArjiAmin", + "version": "1.0.0", + "tags": [], + "createdAt": "2025-03-30", + "updatedAt": "2025-03-30" +} \ No newline at end of file