296 lines
9.5 KiB
CSS
296 lines
9.5 KiB
CSS
/*== ShyFox Window Controls =========================================================================================================================
|
||
|
||
Styles for Min Max Close buttons
|
||
|
||
|
||
--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* move buttons to correct position */
|
||
#TabsToolbar .titlebar-buttonbox-container{ display: none !important; }
|
||
#toolbar-menubar .titlebar-buttonbox-container{ display: flex !important; }
|
||
|
||
.titlebar-buttonbox-container{
|
||
position: fixed !important;
|
||
overflow: clip !important;
|
||
|
||
z-index: -1 !important;
|
||
|
||
transition: var(--transition) !important;
|
||
& *{transition: var(--transition) !important;}
|
||
|
||
/* set position to right */
|
||
right: 0px;
|
||
top: 8px;
|
||
}
|
||
|
||
/*
|
||
|
||
--- VARIABLES ----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* paddings */
|
||
:root{
|
||
--buttonbox-right-wdt: var(--window-control-wdt);
|
||
--buttonbox-right-hgt: 35px;
|
||
|
||
--buttonbox-left-wdt: 0px;
|
||
--buttonbox-left-hgt: 0px;
|
||
}
|
||
|
||
/* useful variables */
|
||
:root{
|
||
--nav-rgt-btnbx-margin: var(--margin);
|
||
--nav-rgt-btnbx-button: var(--toolbar-button-wdt);
|
||
|
||
--nav-lft-btnbx-margin: 0px;
|
||
--nav-lft-btnbx-button: 0px;
|
||
}
|
||
|
||
/* remove window controls in f11 fullscreen or in clean mode */
|
||
#main-window:is([sizemode="fullscreen"], [titlepreface*=""]:not([customizing])) {
|
||
--window-control-wdt: 0px !important; /* < */
|
||
--buttonbox-left-hgt: 0px !important; /* < !DUPLICATE! */
|
||
--buttonbox-right-hgt: 0px !important; /* < */
|
||
--nav-rgt-btnbx-margin: 0px !important; /* < This code block must be */
|
||
--nav-rgt-btnbx-button: 0px !important; /* < identical to the */
|
||
--nav-lft-btnbx-margin: 0px !important; /* < code block below */
|
||
--nav-lft-btnbx-button: 0px !important; /* < */
|
||
.titlebar-buttonbox-container {display: none !important;} /* < vvvvvvvvvvvvvvvvvvvvvvvvvvv */
|
||
}
|
||
|
||
/* remove window controls by setting */
|
||
@media (-moz-bool-pref: "shyfox.remove.window.controls") {
|
||
#main-window{
|
||
--window-control-wdt: 0px !important; /* < ^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
|
||
--buttonbox-left-hgt: 0px !important; /* < */
|
||
--buttonbox-right-hgt: 0px !important; /* < !DUPLICATE! */
|
||
--nav-rgt-btnbx-margin: 0px !important; /* < */
|
||
--nav-rgt-btnbx-button: 0px !important; /* < This code block must be */
|
||
--nav-lft-btnbx-margin: 0px !important; /* < identical to the */
|
||
--nav-lft-btnbx-button: 0px !important; /* < code block above */
|
||
.titlebar-buttonbox-container {display: none !important;} /* < */
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- DETECT SYSTEM AND CALCULATE VALUES -------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* default (if system not detected) */
|
||
:root {--window-control-wdt: 140px;}
|
||
|
||
/* Windows */
|
||
|
||
@media (-moz-platform: windows) {
|
||
:root {--window-control-wdt: 138px;}
|
||
.titlebar-buttonbox-container{
|
||
top: 0px;
|
||
height: var(--toolbar-item-hgt);
|
||
}
|
||
|
||
/* style when not enough space - merged into window border */
|
||
#main-window[titlepreface*=""][titlepreface*=""] {
|
||
.titlebar-button {padding: calc(var(--margin) / 2) 15px !important;}
|
||
.titlebar-buttonbox-container{
|
||
height: var(--margin) !important;
|
||
top: 0px;
|
||
opacity: calc(var(--hide-bar-opct) / 2 );
|
||
&:hover{opacity: 1}
|
||
}
|
||
}
|
||
|
||
/* style when right toolbar is visible but navbar hidden - vertical orientation */
|
||
#main-window:not([titlepreface*=""])[titlepreface*=""]:not([customizing]){
|
||
.titlebar-buttonbox-container{height: 85px}
|
||
.titlebar-buttonbox{
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
--buttonbox-left-wdt: 0px !important;
|
||
--buttonbox-right-hgt: 85px;
|
||
}
|
||
}
|
||
|
||
/* Linux (GTK) */
|
||
|
||
:root{
|
||
--window-control-gtk-max-wdt: 0px;
|
||
--window-control-gtk-min-wdt: 0px;
|
||
}
|
||
|
||
@media (-moz-gtk-csd-maximize-button) { :root {--window-control-gtk-max-wdt: 40px;} }
|
||
@media (-moz-gtk-csd-minimize-button) { :root {--window-control-gtk-min-wdt: 40px;} }
|
||
|
||
@media (-moz-gtk-csd-available) {
|
||
:root {
|
||
--window-control-wdt: calc(
|
||
40px
|
||
+ var(--window-control-gtk-min-wdt)
|
||
+ var(--window-control-gtk-max-wdt)
|
||
);
|
||
}
|
||
|
||
/* GTK buttons design */
|
||
.titlebar-button{
|
||
.toolbarbutton-icon {
|
||
background-image: none !important;
|
||
stroke: none !important;
|
||
-moz-context-properties: fill, fill-opacity !important;
|
||
}
|
||
|
||
&:hover .toolbarbutton-icon {background-color: color-mix(in srgb, var(--bt-col) 15%, transparent) !important;}
|
||
|
||
margin-inline: 8px !important;
|
||
padding: 0 !important;
|
||
fill: var(--bt-col) !important;
|
||
color: var(--bt-col) !important;
|
||
}
|
||
|
||
@media not (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-close {list-style-image: url("../icons/gtk-window-close-symbolic.svg") !important;}
|
||
.titlebar-min {list-style-image: url("../icons/gtk-window-minimize-symbolic.svg") !important;}
|
||
.titlebar-max {list-style-image: url("../icons/gtk-window-maximize-symbolic.svg") !important;}
|
||
.titlebar-restore {list-style-image: url("../icons/gtk-window-restore-symbolic.svg") !important;}
|
||
|
||
.titlebar-button .toolbarbutton-icon{
|
||
background-color: color-mix(in srgb, var(--bt-col) 5%, transparent);
|
||
appearance: none !important;
|
||
border-radius: 100%;
|
||
padding: 4px !important;
|
||
}
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-close {appearance: -moz-window-button-close !important;}
|
||
.titlebar-min {appearance: -moz-window-button-minimize !important;}
|
||
.titlebar-max {appearance: -moz-window-button-maximize !important;}
|
||
.titlebar-restore {appearance: -moz-window-button-restore !important;}
|
||
}
|
||
}
|
||
|
||
/* if GTK buttons position is right */
|
||
@media (-moz-gtk-csd-available){
|
||
@media not (-moz-gtk-csd-reversed-placement){
|
||
|
||
.titlebar-buttonbox-container{padding-right: 4px}
|
||
|
||
/* style when not enough space - merged into window border */
|
||
#main-window:is([titlepreface*=""][titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||
.titlebar-buttonbox-container{
|
||
opacity: calc(var(--hide-bar-opct) / 2 );
|
||
&:hover{opacity: 1};
|
||
right: 5px;
|
||
}
|
||
|
||
.titlebar-button {margin: 0px !important;}
|
||
|
||
@media not (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-buttonbox-container{
|
||
top: 0px;
|
||
height: var(--margin);
|
||
}
|
||
|
||
.titlebar-button .toolbarbutton-icon {border-radius: 0 !important;}
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-buttonbox-container{
|
||
top: -6px;
|
||
height: calc(var(--margin) + 6px);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* style when right toolbar is visible but navbar hidden - vertical orientation */
|
||
#main-window:not([titlepreface*=""])[titlepreface*=""]:not([customizing]){
|
||
|
||
.titlebar-buttonbox{
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
top: -6px;
|
||
|
||
& * {
|
||
margin-top: 3px !important;
|
||
margin-bottom: 3px !important;
|
||
}
|
||
}
|
||
|
||
--buttonbox-right-wdt: 0px !important;
|
||
--buttonbox-right-hgt: calc(
|
||
35px
|
||
+ var(--window-control-gtk-max-wdt)
|
||
+ var(--window-control-gtk-min-wdt)
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* MacOS */
|
||
@media (-moz-platform: macos){
|
||
:root {--window-control-wdt: 72px;}
|
||
}
|
||
|
||
/*
|
||
--- CONTROLS ON LEFT ---------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Styles when GTK window controls on left or system is MacOS
|
||
|
||
*/
|
||
|
||
@media (-moz-gtk-csd-reversed-placement), (-moz-platform: macos){
|
||
:root{
|
||
--buttonbox-right-wdt: 0px;
|
||
--buttonbox-right-hgt: 0px;
|
||
|
||
--buttonbox-left-wdt: var(--window-control-wdt);
|
||
--buttonbox-left-hgt: 35px;
|
||
|
||
--nav-rgt-btnbx-margin: 0px;
|
||
--nav-rgt-btnbx-button: 0px;
|
||
|
||
--nav-lft-btnbx-margin: var(--margin);
|
||
--nav-lft-btnbx-button: var(--toolbar-button-wdt);
|
||
}
|
||
|
||
.titlebar-buttonbox-container{padding-left: 3px}
|
||
|
||
/* set position to left */
|
||
.titlebar-buttonbox-container{
|
||
left: 0px;
|
||
right: auto !important;
|
||
}
|
||
|
||
/* style when not enough space - merged into window border */
|
||
#main-window:is([titlepreface*=""][titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||
.titlebar-buttonbox-container{
|
||
opacity: calc(var(--hide-bar-opct) / 2 );
|
||
&:hover{opacity: 1};
|
||
left: 5px;
|
||
}
|
||
|
||
.titlebar-button {margin: 0px !important;}
|
||
|
||
@media not (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-buttonbox-container{
|
||
top: 0px;
|
||
height: var(--margin);
|
||
}
|
||
|
||
.titlebar-button .toolbarbutton-icon {border-radius: 0 !important;}
|
||
}
|
||
|
||
@media (-moz-bool-pref: "shyfox.force.native.controls"){
|
||
.titlebar-buttonbox-container{
|
||
top: -6px;
|
||
height: calc(var(--margin) + 6px);
|
||
}
|
||
}
|
||
}
|
||
}
|