124 lines
3.2 KiB
CSS
Executable file
124 lines
3.2 KiB
CSS
Executable file
:root {
|
|
/**
|
|
* The number of buttons (back, forward, stop, etc) to the left of the URL bar
|
|
* Add 1px here for each button 3 buttons = 3px
|
|
*/
|
|
--buttons-left-of-urlbar: 3;
|
|
|
|
/**
|
|
* Width of `https://` text in your font as an m and a / may not be proportional in all fonts
|
|
* Adjust this until only `https://` is hidden in the URL bar
|
|
* +/-0.1 should work for most fonts
|
|
*/
|
|
--https-text-offset-amount: -3.7em;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
display: flex;
|
|
}
|
|
|
|
#urlbar-container {
|
|
min-width: 18.2em !important;
|
|
}
|
|
|
|
#nav-bar {
|
|
order: 0;
|
|
}
|
|
|
|
#titlebar {
|
|
order: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
#page-action-buttons {
|
|
margin-right: -100em;
|
|
transition: all 0.3s ease-in;
|
|
}
|
|
|
|
:root[customizing] #nav-bar-customization-target,
|
|
#nav-bar:focus-within #nav-bar-customization-target,
|
|
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
|
|
#nav-bar:hover #nav-bar-customization-target {
|
|
margin-left: 0em;
|
|
width: 50vw;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
#urlbar-input-container .urlbar-input-box #urlbar-input {
|
|
margin-left: var(--https-text-offset-amount) !important;
|
|
transition: all 0.3s ease-in;
|
|
}
|
|
|
|
#urlbar-input-container .urlbar-input-box #urlbar-input:placeholder-shown {
|
|
margin-left: 0 !important;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
#nav-bar:hover .urlbar-input-box #urlbar-input,
|
|
#nav-bar:focus-within #urlbar-input-container .urlbar-input-box #urlbar-input {
|
|
margin-left: 0em !important;
|
|
}
|
|
|
|
#urlbar-input-container:after {
|
|
display: block;
|
|
position: relative;
|
|
pointer-events: none;
|
|
float: right;
|
|
width: 4em;
|
|
margin-right: -0.2em;
|
|
background: linear-gradient(to right, transparent, Field);
|
|
z-index: 1;
|
|
height: 1em;
|
|
content: " ";
|
|
transition: width 0.3s ease-in;
|
|
}
|
|
|
|
#nav-bar:hover #urlbar-input-container:after,
|
|
#nav-bar:focus-within #urlbar-input-container:after {
|
|
width: 0;
|
|
}
|
|
|
|
#urlbar-input-container > box {
|
|
position: relative;
|
|
background-color: Field;
|
|
z-index: 1;
|
|
}
|
|
|
|
#urlbar-input-container > box:hover {
|
|
background-color: SelectedItem;
|
|
}
|
|
|
|
:root[customizing] #navigator-toolbox-background #nav-bar-customization-target,
|
|
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target,
|
|
#nav-bar:hover #nav-bar-customization-target #page-action-buttons {
|
|
margin-right: 0;
|
|
}
|
|
|
|
#nav-bar-customization-target {
|
|
margin-left: calc(0px - calc(var(--buttons-left-of-urlbar) * 34px));
|
|
min-width: 24em;
|
|
width: 24em;
|
|
transition: all 0.3s ease-in;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
#nav-bar-customization-target ~ toolbarbutton,
|
|
#nav-bar-customization-target ~ toolbaritem {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in;
|
|
}
|
|
|
|
:root[customizing] #nav-bar-customization-target ~ toolbaritem,
|
|
:root[customizing] #nav-bar-customization-target ~ toolbarbutton,
|
|
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbaritem,
|
|
#nav-bar:focus-within #nav-bar-customization-target ~ toolbaritem,
|
|
#nav-bar:hover #nav-bar-customization-target ~ toolbaritem,
|
|
popupset:hover ~ #navigator-toolbox-background #nav-bar-customization-target ~ toolbarbutton,
|
|
#nav-bar:hover #nav-bar-customization-target ~ toolbarbutton {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#identity-box.notSecure ~ .urlbar-input-box #urlbar-input,
|
|
#identity-box.chromeUI ~ .urlbar-input-box #urlbar-input {
|
|
margin-left: 0em !important;
|
|
} |