mirror of
https://github.com/Jokiller230/puzzlevision.git
synced 2025-10-31 13:50:04 +00:00
514 lines
13 KiB
CSS
514 lines
13 KiB
CSS
/* 1.8.3
|
|
- Fixed for Firefox 137!
|
|
- Fixed https truncate (fix #29)
|
|
*/
|
|
|
|
:root {
|
|
--urlbar-collapsed-width: 200px;
|
|
--urlbar-open-width: 300px; /* Only when disable-centering-of-URLbar is enabled */
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
position: relative !important;
|
|
}
|
|
|
|
|
|
/* Hide flexible spaces */
|
|
toolbarspring,
|
|
[id^="wrapper-customizableui-special-spring"] {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* Tabs */
|
|
#titlebar {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
#toolbar-menubar[inactive="true"] { /* Prevent duplicate window controls */
|
|
display: none !important;
|
|
}
|
|
#TabsToolbar {
|
|
display: flex !important;
|
|
align-items: center;
|
|
z-index: 1;
|
|
padding-left: var(--tab-block-margin) !important;
|
|
}
|
|
#TabsToolbar-customization-target {
|
|
display: flex !important;
|
|
margin-block: auto !important;
|
|
align-items: center;
|
|
}
|
|
#tabbrowser-tabs {
|
|
overflow: hidden !important;
|
|
width: 0 !important;
|
|
flex: 1 !important;
|
|
}
|
|
.tabbrowser-tab {
|
|
min-height: calc(var(--tab-min-height) - 2px) !important;
|
|
}
|
|
.tab-background { /* Just thought it looked nicer */
|
|
margin-block: calc(2px + var(--tab-block-margin)) !important;
|
|
box-shadow: none !important;
|
|
transition: background-color .2s;
|
|
}
|
|
|
|
@media -moz-pref("onebar.hide-all-tabs-button") {
|
|
@media not (max-width: 700px) {
|
|
#alltabs-button {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Navigation buttons */
|
|
@media -moz-pref("onebar.conditional-navigation-buttons") {
|
|
:root:not([customizing]) #back-button[disabled],
|
|
:root:not([customizing]) #forward-button[disabled] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media not -moz-pref("onebar.disable-hiding-navigation-buttons") {
|
|
#urlbar-container ~ :is(#back-button, #forward-button) {
|
|
display: none !important;
|
|
}
|
|
/* In the customize menu */
|
|
:is(#wrapper-back-button, #wrapper-forward-button) {
|
|
opacity: 1 !important;
|
|
}
|
|
#wrapper-urlbar-container ~ :is(#wrapper-back-button, #wrapper-forward-button) {
|
|
opacity: .5 !important;
|
|
}
|
|
|
|
/* Add note in customize menu for nav buttons */
|
|
#customization-header::after {
|
|
content: "To hide the back & forward buttons, drag them to the right of the URL bar";
|
|
background-color: blue;
|
|
color: white;
|
|
border-radius: 4px;
|
|
padding: .4em .7em;
|
|
margin-top: 1em;
|
|
display: block;
|
|
width: max-content;
|
|
}
|
|
}
|
|
:root[customizing] .urlbar-input-box {
|
|
visibility: visible !important;
|
|
}
|
|
:root[customizing] .urlbar-input-box::before {
|
|
content: "https://";
|
|
margin-block: auto;
|
|
}
|
|
:root[customizing] #urlbar-input {
|
|
display: none !important;
|
|
}
|
|
|
|
:root[customizing] .customization-target {
|
|
padding-inline: 20px;
|
|
}
|
|
:root[customizing] #nav-bar-customization-target {
|
|
border-right: 1px dashed var(--border-color-deemphasized);
|
|
}
|
|
:root[customizing] #nav-bar-customization-target,
|
|
:root[customizing] #tabbrowser-tabs {
|
|
border-left: 1px dashed var(--border-color-deemphasized);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Single Tab Styling */
|
|
@media not -moz-pref("onebar.disable-single-tab") {
|
|
.tabbrowser-tab:only-of-type {
|
|
width: max-content !important;
|
|
max-width: 80% !important;
|
|
flex: unset !important;
|
|
margin-inline-end: auto !important;
|
|
--toolbar-bgcolor: transparent !important;
|
|
--tab-selected-bgimage: transparent !important;
|
|
}
|
|
.tabbrowser-tab:only-of-type .tab-text {
|
|
font-weight: 600 !important;
|
|
}
|
|
.tabbrowser-tab:only-of-type .tab-close-button,
|
|
#tabbrowser-tabs:not([closebuttons="activetab"]) ~ #alltabs-button {
|
|
display: none !important;
|
|
}
|
|
.tabbrowser-tab:only-of-type .tab-background {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Match button sizes to toolbar buttons */
|
|
#TabsToolbar {
|
|
--toolbarbutton-inner-padding: 8px !important;
|
|
}
|
|
#TabsToolbar toolbarbutton {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
|
|
#alltabs-button {
|
|
order: -1;
|
|
}
|
|
.titlebar-buttonbox-container {
|
|
order: -100 !important;
|
|
}
|
|
|
|
/* Toolbar */
|
|
#nav-bar {
|
|
background: none !important;
|
|
}
|
|
#urlbar-container {
|
|
width: var(--urlbar-collapsed-width) !important;
|
|
flex: 1 !important;
|
|
z-index: 10;
|
|
justify-content: flex-end;
|
|
transition: background-color .2s, width .2s, min-width .2s;
|
|
}
|
|
#urlbar:not([breakout-extend]) {
|
|
min-width: max-content !important;
|
|
}
|
|
@media not -moz-pref("onebar.disable-centering-of-URLbar") {
|
|
#urlbar {
|
|
position: relative !important;
|
|
top: unset !important;
|
|
margin-block: auto !important;
|
|
}
|
|
#urlbar[breakout-extend] {
|
|
position: absolute !important;
|
|
inset-inline: 20vw !important;
|
|
width: unset !important;
|
|
align-self: flex-start !important;
|
|
}
|
|
}
|
|
@media -moz-pref("onebar.disable-centering-of-URLbar") {
|
|
#urlbar[breakout-extend] .urlbar-input-box {
|
|
width: 400px !important;
|
|
}
|
|
#urlbar-container:focus-within, #urlbar-container:hover {
|
|
width: var(--urlbar-open-width) !important;
|
|
}
|
|
@media (max-width: 700px) {
|
|
#urlbar[breakout-extend] {
|
|
width: unset !important;
|
|
}
|
|
}
|
|
}
|
|
@media -moz-pref("onebar.collapse-URLbar") {
|
|
:root:not([customizing]) #urlbar-container:has(#urlbar:not([focused])) {
|
|
justify-content: flex-end;
|
|
width: var(--urlbar-collapsed-width) !important;
|
|
--urlbar-collapsed-width: calc(
|
|
var(--urlbar-min-height) - 2px + 2 * var(--urlbar-container-padding)
|
|
);
|
|
#urlbar {
|
|
min-width: var(--urlbar-collapsed-width) !important;
|
|
width: max-content !important;
|
|
max-width: 2000px;
|
|
transition: max-width .2s;
|
|
}
|
|
#urlbar-background::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--toolbar-bgcolor);
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
opacity: 0;
|
|
z-index: -1;
|
|
transition: opacity .2s;
|
|
}
|
|
&:not(:hover) {
|
|
#urlbar {
|
|
max-width: var(--urlbar-collapsed-width);
|
|
}
|
|
}
|
|
&:hover #urlbar-background::before {
|
|
opacity: 1;
|
|
}
|
|
.urlbar-input-box {
|
|
position: absolute !important;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.identity-box-button {
|
|
padding-inline: var(--urlbar-icon-padding) !important;
|
|
}
|
|
#identity-icon-box,
|
|
#tracking-protection-icon-container {
|
|
max-width: unset !important;
|
|
opacity: 1 !important;
|
|
padding-inline: var(--urlbar-icon-padding) !important;
|
|
order: 3;
|
|
}
|
|
@media (max-width: 700px) {
|
|
& {
|
|
flex: unset !important;
|
|
width: auto !important;
|
|
margin-inline-start: auto !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#urlbar-input-container {
|
|
display: flex !important;
|
|
}
|
|
.urlbar-input-container > :not(.urlbar-input-box) {
|
|
order: 2;
|
|
margin: 0 !important;
|
|
}
|
|
.urlbar-input-box {
|
|
flex-grow: 1 !important;
|
|
padding-left: .5em !important;
|
|
width: 100px !important;
|
|
min-width: 50px !important;
|
|
transition: width .2s;
|
|
}
|
|
#urlbar-input:not(:focus-within) {
|
|
mask: linear-gradient(to right, black calc(100% - 20px), transparent);
|
|
}
|
|
#urlbar-background {
|
|
transition: border .2s;
|
|
}
|
|
#urlbar:hover:not([focused="true"]) > #urlbar-background {
|
|
--toolbar-field-border-color: var(--toolbar-field-focus-border-color)
|
|
}
|
|
|
|
/* Truncate https:// when collapsed */
|
|
@media (not -moz-pref("onebar.disable-https-truncate")) and (not -moz-pref("browser.urlbar.trimHttps")) {
|
|
#urlbar-input {
|
|
transition: margin .1s;
|
|
}
|
|
.verifiedDomain ~ .urlbar-input-box:not(:focus-within) #urlbar-input {
|
|
--https-size: 5ch;
|
|
margin-left: calc(0ch - var(--https-size)) !important;
|
|
mask: linear-gradient(to right, transparent var(--https-size), black calc(var(--https-size) + 1ch) calc(100% - 3ch), transparent) !important;
|
|
}
|
|
}
|
|
|
|
/* Hide unimportant buttons until hover */
|
|
:root {
|
|
--in-transition: font-size .2s, padding .2s, margin .2s, max-width .2s, opacity .2s .15s;
|
|
--out-transition: font-size .2s, padding .2s, margin .2s, max-width .2s, opacity .07s;
|
|
}
|
|
#urlbar-container:hover .urlbar-input-container > box:not(#page-action-buttons):not(.urlbar-input-box),
|
|
#urlbar-container:hover #page-action-buttons > *,
|
|
#urlbar-container:hover #userContext-label {
|
|
transition: var(--in-transition) !important;
|
|
max-width: 200px;
|
|
}
|
|
@media -moz-pref("onebar.disable-autohide-of-URLbar-icons") {
|
|
#urlbar-container {
|
|
width: var(--urlbar-open-width) !important;
|
|
}
|
|
}
|
|
@media not -moz-pref("onebar.disable-autohide-of-URLbar-icons") {
|
|
#urlbar-container:not(:hover) :where(
|
|
toolbarbutton,
|
|
#userContext-label,
|
|
#star-button-box,
|
|
.verifiedDomain,
|
|
#tracking-protection-icon-container,
|
|
#pageAction-urlbar-_testpilot-containers,
|
|
#pageActionButton,
|
|
) {
|
|
font-size: 0 !important;
|
|
max-width: 0 !important;
|
|
padding-inline: 0 !important;
|
|
margin-inline: 0 !important;
|
|
opacity: 0 !important;
|
|
transition: var(--out-transition) !important;
|
|
}
|
|
@media -moz-pref("onebar.hide-all-URLbar-icons") {
|
|
#urlbar-container:not(:hover) :where(#page-action-buttons, #identity-box) > * {
|
|
font-size: 0 !important;
|
|
max-width: 0 !important;
|
|
padding-inline: 0 !important;
|
|
margin-inline: 0 !important;
|
|
opacity: 0 !important;
|
|
transition: var(--out-transition) !important;
|
|
}
|
|
}
|
|
}
|
|
#urlbar-container #urlbar[focused="true"] .urlbar-input-container > box,
|
|
#urlbar-container #urlbar[focused="true"] #page-action-buttons > * {
|
|
font-size: 0 !important;
|
|
max-width: 0 !important;
|
|
padding-inline: 0 !important;
|
|
margin-inline: 0 !important;
|
|
opacity: 0 !important;
|
|
transition: var(--out-transition) !important;
|
|
}
|
|
|
|
/* Other Buttons */
|
|
|
|
.toolbarbutton-icon {
|
|
transition: background-color .1s;
|
|
}
|
|
|
|
#nav-bar #search-container {
|
|
min-width: 32px !important;
|
|
transition: min-width .2s;
|
|
}
|
|
|
|
.titlebar-spacer,
|
|
#identity-icon-label {
|
|
display: none;
|
|
}
|
|
|
|
@media -moz-pref("onebar.hide-unified-extensions-button") {
|
|
#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon {
|
|
width: 0px !important;
|
|
padding: 0px !important;
|
|
}
|
|
}
|
|
|
|
/* Wrap other toolbars to bottom */
|
|
#nav-bar ~ * {
|
|
width: 100vw !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Linux fixes, credits: https://github.com/ranmaru22/firefox-vertical-tabs/pull/39 */
|
|
|
|
@media (-moz-gtk-csd-available) {
|
|
/* window control padding values (these don't change the size of the actual buttons, only the padding for the navbar) */
|
|
:root[customtitlebar] {
|
|
/* default button/padding size based on adw-gtk3 theme */
|
|
--uc-win-ctrl-btn-width: 38px;
|
|
--uc-win-ctrl-padding: 12px;
|
|
}
|
|
|
|
:root[customtitlebar][lwtheme] {
|
|
/* seperate values for when using a theme, based on the Firefox defaults */
|
|
--uc-win-ctrl-btn-width: 30px;
|
|
--uc-win-ctrl-padding: 12px;
|
|
}
|
|
|
|
/* setting the padding value for all button combinations */
|
|
@media (-moz-gtk-csd-minimize-button),
|
|
(-moz-gtk-csd-maximize-button),
|
|
(-moz-gtk-csd-close-button) {
|
|
#navigator-toolbox {
|
|
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 1);
|
|
}
|
|
}
|
|
|
|
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
|
|
(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
|
|
(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
|
|
#navigator-toolbox {
|
|
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 2);
|
|
}
|
|
}
|
|
|
|
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
|
|
#navigator-toolbox {
|
|
--uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 3);
|
|
}
|
|
}
|
|
|
|
/* only applies padding/positioning if there is 1 or more buttons */
|
|
@media (-moz-gtk-csd-minimize-button),
|
|
(-moz-gtk-csd-maximize-button),
|
|
(-moz-gtk-csd-close-button) {
|
|
.titlebar-buttonbox-container {
|
|
left: 0;
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 101;
|
|
}
|
|
@media (-moz-gtk-csd-reversed-placement) {
|
|
#TabsToolbar {
|
|
padding-left: calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding)) !important;
|
|
}
|
|
}
|
|
/* window controls on the right */
|
|
@media not (-moz-gtk-csd-reversed-placement) {
|
|
#nav-bar {
|
|
padding-right: calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding)) !important;
|
|
}
|
|
.titlebar-buttonbox-container {
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
}
|
|
.toolbar-items {
|
|
max-width: calc(100vw - (
|
|
var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding)
|
|
));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MacOS fixes */
|
|
@media (-moz-platform: macos) {
|
|
.titlebar-buttonbox-container {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
/* Windows OS fixes */
|
|
@media (-moz-platform: windows-win10), (-moz-platform: windows) {
|
|
/* Unsure if same attribute changed on windows,
|
|
would like confirmation or someone to fix */
|
|
:root[tabsintitlebar], :root[customtitlebar] {
|
|
--uc-window-control-width: 137px;
|
|
--uc-win-ctrl-padding: 12px;
|
|
}
|
|
|
|
#nav-bar {
|
|
padding-right: calc(var(--uc-window-control-width) + var(--uc-win-ctrl-padding)) !important;
|
|
}
|
|
.titlebar-buttonbox-container {
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
height: calc(var(--tab-min-height) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding));
|
|
position: absolute !important;
|
|
z-index: 101 !important;
|
|
max-height: 100%;
|
|
}
|
|
.toolbar-items {
|
|
max-width: calc(100vw - var(--uc-window-control-width)) !important;
|
|
}
|
|
|
|
/* Hide window buttons in fullscreen */
|
|
#navigator-toolbox[style*="margin-top: -"] .titlebar-buttonbox-container,
|
|
[inDOMFullscreen="true"] .titlebar-buttonbox-container {
|
|
transform: translateY(-100px)
|
|
}
|
|
|
|
}
|
|
|
|
/* Small window */
|
|
|
|
@media (max-width: 700px) {
|
|
#nav-bar {
|
|
width: 0 !important;
|
|
flex-grow: 999;
|
|
--toolbarbutton-outer-padding: 0px;
|
|
--toolbar-start-end-padding: 0px;
|
|
}
|
|
#TabsToolbar {
|
|
min-width: unset !important;
|
|
}
|
|
#tabbrowser-tabs {
|
|
display: none !important;
|
|
}
|
|
#urlbar[breakout-extend] {
|
|
inset-inline: 15px !important;
|
|
z-index: 102 !important;
|
|
}
|
|
}
|