mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 08:55:31 +02:00
Merge pull request #1384 from zen-browser/create-theme-1383
Add theme: Revitalized devtools
This commit is contained in:
mr. m
GitHub
commit
3f79d11e0a
4 changed files with 734 additions and 0 deletions
688
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css
Normal file
688
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
BIN
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png
Normal file
BIN
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
32
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md
Normal file
32
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md
Normal file
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
14
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/theme.json
Normal file
14
themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/theme.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue