mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-31 10:52:42 +00:00
c791c0f60b
more closely match the properties editor behavior. removed some unnecessary (unused) properties. Outline only appears when element is focused (rather than on hover as well).
90 lines
2.0 KiB
Plaintext
90 lines
2.0 KiB
Plaintext
.toolBar {
|
|
position : relative;
|
|
z-index : 1;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
gap : 5px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
box-sizing : border-box;
|
|
width : 100%;
|
|
height : 29px;
|
|
padding : 2px 0;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : white;
|
|
background-color : #555555;
|
|
|
|
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; }
|
|
|
|
&.slider {
|
|
color: #D3D3D3;
|
|
accent-color: #d3d3d3;
|
|
|
|
&::-webkit-slider-thumb, &::-moz-slider-thumb {
|
|
cursor : pointer;
|
|
width: 5px;
|
|
height: 5px;
|
|
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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tool {
|
|
display : flex;
|
|
align-items : center;
|
|
color : #CCCCCC;
|
|
padding : 0;
|
|
height: 100%;
|
|
width: auto;
|
|
box-sizing: content-box;
|
|
|
|
&:hover { background-color : #444444; }
|
|
|
|
button {
|
|
font-family : 'Open Sans', sans-serif;
|
|
font-size : 11px;
|
|
font-weight : normal;
|
|
color : #CCCCCC;
|
|
text-transform : uppercase;
|
|
background-color : transparent;
|
|
height : 100%;
|
|
width : auto;
|
|
min-width : 46px;
|
|
padding : 0 8px;
|
|
|
|
|
|
&:focus { outline : 1px solid #d3d3d3; }
|
|
|
|
&:disabled {
|
|
color : #777777;
|
|
background-color : transparent !important;
|
|
}
|
|
}
|
|
}
|
|
} |