mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-26 20:22:42 +00:00
7b767368df
Removes icons as components, uses mask-image instead. Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio. rename the icon files for consistency.
103 lines
2.5 KiB
Plaintext
103 lines
2.5 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;
|
|
|
|
.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 : #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::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;
|
|
&:hover { background-color : #444444; }
|
|
&:focus { outline : 1px solid #D3D3D3; }
|
|
&:disabled {
|
|
color : #777777;
|
|
background-color : unset !important;
|
|
}
|
|
i {
|
|
font-size:1.2em;
|
|
}
|
|
}
|
|
} |