mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-27 07:12:39 +00:00
6fca21b6ed
defaultValue matches the normal styled values of the gap property on the .pages element. removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
140 lines
3.0 KiB
Plaintext
140 lines
3.0 KiB
Plaintext
@import (less) './client/icons/customIcons.less';
|
|
|
|
.toolBar {
|
|
position : absolute;
|
|
z-index : 1;
|
|
box-sizing : border-box;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
gap : 8px 30px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
width : 100%;
|
|
height : auto;
|
|
padding : 2px 0;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : #CCCCCC;
|
|
background-color : #555555;
|
|
& > *:not(.toggleButton) {
|
|
opacity: 1;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.group {
|
|
box-sizing : border-box;
|
|
display : flex;
|
|
gap : 0 3px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
height : 28px;
|
|
}
|
|
|
|
.tool {
|
|
display : flex;
|
|
align-items : center;
|
|
}
|
|
|
|
.anchored-box {
|
|
color: #CCCCCC;
|
|
input[type='number']{
|
|
width: 4ch;
|
|
}
|
|
}
|
|
|
|
input {
|
|
position : relative;
|
|
height : 1.5em;
|
|
padding : 2px 5px;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : #000000;
|
|
background : #EEEEEE;
|
|
border : 1px solid gray;
|
|
&:focus { outline : 1px solid #D3D3D3; }
|
|
|
|
// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
|
|
&.range-input {
|
|
padding : 2px 0;
|
|
color : #D3D3D3;
|
|
accent-color : #D3D3D3;
|
|
|
|
&::-webkit-slider-thumb, &::-moz-slider-thumb {
|
|
width : 5px;
|
|
height : 5px;
|
|
cursor : pointer;
|
|
outline : none;
|
|
}
|
|
|
|
&.hover-tooltip[value]:hover::after {
|
|
position : absolute;
|
|
bottom : -30px;
|
|
left : 50%;
|
|
z-index : 1;
|
|
display : grid;
|
|
place-items : center;
|
|
width : 4ch;
|
|
height : 1.2lh;
|
|
pointer-events : none;
|
|
content : attr(value);
|
|
background-color : #555555;
|
|
border : 1px solid #A1A1A1;
|
|
transform : translate(-50%, 50%);
|
|
}
|
|
}
|
|
|
|
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
|
|
&#page-input {
|
|
width : 4ch;
|
|
margin-right : 1ch;
|
|
text-align : center;
|
|
}
|
|
}
|
|
|
|
button {
|
|
box-sizing : content-box;
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : center;
|
|
width : auto;
|
|
min-width : 46px;
|
|
height : 100%;
|
|
padding : 0 0px;
|
|
font-weight : unset;
|
|
color : inherit;
|
|
background-color : unset;
|
|
|
|
&:not(button:has(i, svg)) {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
&:hover { background-color : #444444; }
|
|
&:focus { outline : 1px solid #D3D3D3; }
|
|
&:disabled {
|
|
color : #777777;
|
|
background-color : unset !important;
|
|
}
|
|
i {
|
|
font-size:1.2em;
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
width: 32px;
|
|
transition: all .3s ease;
|
|
flex-wrap:nowrap;
|
|
overflow: hidden;
|
|
background-color: unset;
|
|
opacity: .5;
|
|
& > *:not(.toggleButton) {
|
|
opacity: 0;
|
|
transition: all .2s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.toggleButton {
|
|
z-index : 5;
|
|
position:absolute;
|
|
left: 0;
|
|
width: 32px;
|
|
min-width: unset;
|
|
} |