mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-08 08:48:39 +09:00
Edge theme (WIP)
This commit is contained in:
OwnedByWuigi
parent
9d3ae2bb61
commit
c875e8bdfd
1460 changed files with 7545 additions and 212507 deletions
319
application/basilisk/themes/backupwindows/devedition.css
Normal file
319
application/basilisk/themes/backupwindows/devedition.css
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
% This Source Code Form is subject to the terms of the Mozilla Public
|
||||
% License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
% file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
%include ../shared/devedition.inc.css
|
||||
|
||||
:root {
|
||||
--forwardbutton-width: 29px;
|
||||
}
|
||||
|
||||
:root[devtoolstheme="dark"],
|
||||
:root[devtoolstheme="light"] {
|
||||
/* Matches the #browser-border-start, #browser-border-end color */
|
||||
--chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
|
||||
}
|
||||
|
||||
/* The window background is white due to no accentcolor in the lightweight
|
||||
theme. It can't be changed to transparent when there is no compositor
|
||||
(Win XP or 7 in classic / basic theme), or else dragging and focus become
|
||||
broken. So instead just show the normal titlebar in that case, and override
|
||||
the window color as transparent when the compositor is available. */
|
||||
@media not all and (-moz-windows-compositor) {
|
||||
#main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#main-window {
|
||||
background: var(--chrome-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-windows-compositor) {
|
||||
#main-window {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
#TabsToolbar::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon,
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-background) !important;
|
||||
border-radius: 0 !important;
|
||||
height: auto !important;
|
||||
padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
/* 18px icon + 2 * 5px padding + 2 * 1px border */
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
/* 18px icon + 2 * 5px padding + 1 * 1px border */
|
||||
width: 29px !important;
|
||||
}
|
||||
|
||||
/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */
|
||||
#back-button[open="true"] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-inline-start: none !important;
|
||||
}
|
||||
|
||||
/* Override a box shadow for disabled back button */
|
||||
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override !important properties for hovered back button */
|
||||
#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
|
||||
#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-hover-background) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
background-color: var(--tab-background-color);
|
||||
}
|
||||
|
||||
#toolbar-menubar {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
:root[devtoolstheme="dark"] .findbar-closebutton,
|
||||
:root[devtoolstheme="dark"] #sidebar-header > .close-icon,
|
||||
/* Tab styling - make sure to use an inverted icon for the selected tab
|
||||
(brighttext only covers the unselected tabs) */
|
||||
.tab-close-button[selected=true] {
|
||||
list-style-image: url("chrome://global/skin/icons/close-inverted.png");
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
:root[devtoolstheme="dark"] .findbar-closebutton,
|
||||
:root[devtoolstheme="dark"] #sidebar-header > .close-icon,
|
||||
.tab-close-button[selected=true] {
|
||||
list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-os-version: windows-xp),
|
||||
(-moz-os-version: windows-vista),
|
||||
(-moz-os-version: windows-win7),
|
||||
(-moz-os-version: windows-win8) {
|
||||
:root {
|
||||
--space-above-tabbar: 15px;
|
||||
}
|
||||
|
||||
/* It'd be nice if there was an element in the scrollbox's inner content
|
||||
that collapsed to the current width of the tabs. Since there isn't we
|
||||
need to handle overflowing and non-overflowing tabs separately.
|
||||
|
||||
In the case of overflowing tabs, set a border-top on the entire container,
|
||||
otherwise we need to set it on each element individually */
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
|
||||
background-clip: padding-box;
|
||||
border-top: 1px solid var(--chrome-nav-bar-separator-color);
|
||||
border-inline-end: 1px solid var(--chrome-nav-bar-separator-color);
|
||||
background-color: var(--tab-background-color); /* Make sure there is no transparent gap during tab close animation */
|
||||
}
|
||||
|
||||
/* Add a border to the left of the first tab (or scroll arrow). Using .tabbrowser-tabs
|
||||
instead of #TabsToolbar because it will work even in customize mode. */
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs {
|
||||
background-clip: padding-box;
|
||||
border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
|
||||
border-inline-end: 1px solid transparent;
|
||||
}
|
||||
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab,
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down,
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button {
|
||||
background-clip: padding-box;
|
||||
border-top: 1px solid var(--chrome-nav-bar-separator-color);
|
||||
}
|
||||
|
||||
/* Allow the border-top rule to take effect */
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab {
|
||||
-moz-border-top-colors: none;
|
||||
}
|
||||
|
||||
#main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
|
||||
background-clip: padding-box;
|
||||
border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
|
||||
}
|
||||
|
||||
.tabs-newtab-button {
|
||||
background: var(--tab-background-color);
|
||||
}
|
||||
|
||||
/* Use default window colors when in non-maximized mode */
|
||||
#tabbrowser-tabs,
|
||||
#TabsToolbar,
|
||||
#browser-panel,
|
||||
#titlebar-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Ensure that the entire background is styled when maximized/fullscreen */
|
||||
#main-window:not([sizemode="normal"]):not([customizing]) #browser-panel {
|
||||
background: var(--chrome-background-color) !important;
|
||||
}
|
||||
|
||||
/* The menu items need to be visible when the entire background is styled */
|
||||
#main-window:not([sizemode="normal"]) #main-menubar {
|
||||
color: var(--chrome-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
|
||||
@media not all and (-moz-windows-compositor),
|
||||
not all and (-moz-windows-default-theme) {
|
||||
:root[tabsintitlebar]:not([inFullscreen]) {
|
||||
--titlebar-text-color: CaptionText;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
|
||||
--titlebar-text-color: InactiveCaptionText;
|
||||
}
|
||||
|
||||
#main-window[tabsintitlebar] #main-menubar > menu {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Use less opacity than normal since this is very dark, and on top of the default toolbar color */
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* Override scrollbutton gradients in normal and hover state */
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up {
|
||||
background-image: none !important;
|
||||
transition: none; /* scrollbutton-down has an unwanted transition on background color */
|
||||
}
|
||||
|
||||
/* Restore draggable space on the sides of tabs when maximized */
|
||||
#main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */
|
||||
#main-window[sizemode=normal]:not([customizing]) #TabsToolbar {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Restored windows get an artificial border on windows, because the lwtheme background
|
||||
* overlaps the regular window border. That isn't the case for us, so we avoid painting
|
||||
* over the native border with our custom borders: */
|
||||
#browser-panel {
|
||||
/* These are !important to avoid specificity-wars with the selectors that add borders here. */
|
||||
background-image: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
/* The side borders on the toolbox also look out-of-place because we don't paint over
|
||||
* the native background color at all, and these are !important for the same reason as above. */
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
/* Disable dragging like in the default theme: */
|
||||
#main-window[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme {
|
||||
-moz-window-dragging: no-drag;
|
||||
}
|
||||
|
||||
/* The sidebar header has no background now that the background of the #browser-panel
|
||||
* has no image and is transparent. Fix: */
|
||||
.sidebar-header:-moz-lwtheme,
|
||||
#sidebar-header {
|
||||
background-color: var(--chrome-background-color);
|
||||
color: var(--chrome-color);
|
||||
}
|
||||
|
||||
@media (-moz-os-version: windows-vista),
|
||||
(-moz-os-version: windows-win7),
|
||||
(-moz-os-version: windows-win8) {
|
||||
/* And then we add them back on toolbars so that they don't look borderless: */
|
||||
#main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after,
|
||||
#main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
|
||||
border-left: 1px solid hsla(209,67%,12%,0.35);
|
||||
border-right: 1px solid hsla(209,67%,12%,0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-os-version: windows-win10) {
|
||||
/* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */
|
||||
#main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Force white caption buttons for the dark theme on Windows 10 */
|
||||
:root[devtoolstheme="dark"] #titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
|
||||
}
|
||||
:root[devtoolstheme="dark"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
|
||||
}
|
||||
#main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
|
||||
}
|
||||
:root[devtoolstheme="dark"] #titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
|
||||
}
|
||||
|
||||
/* ... and normal ones for the light theme on Windows 10 */
|
||||
:root[devtoolstheme="light"] #titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
|
||||
}
|
||||
:root[devtoolstheme="light"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
|
||||
}
|
||||
#main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
|
||||
}
|
||||
:root[devtoolstheme="light"] #titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
|
||||
}
|
||||
|
||||
:root[devtoolstheme="light"] #titlebar-close:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
|
||||
}
|
||||
}
|
||||
|
||||
.ac-type-icon {
|
||||
/* Left-align the type icon in awesomebar popup results with the icon in the
|
||||
urlbar. */
|
||||
margin-inline-start: 13px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue