mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-29 15:32:40 +00:00
183dd63021
Reduce the visual prominence of the page input by using a darker background and a text color that matches the rest of the toolbar icons. Darker background still indicates this is an interactive item (is an input), hopefully.
128 lines
2.8 KiB
Plaintext
128 lines
2.8 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;
|
|
}
|
|
|
|
input {
|
|
position : relative;
|
|
height : 1.5em;
|
|
padding : 2px 5px;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : inherit;
|
|
background : #3B3B3B;
|
|
border : none;
|
|
&: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::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 : 10ch;
|
|
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;
|
|
&: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;
|
|
} |