mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-29 00:22:47 +00:00
37c8ea4fd7
Displaying the total page count near the current page number means we can lose the bottom right toolbar entirely (the renderer could be added to top toolbar, or just left for the metadata info in title bar).
90 lines
1.9 KiB
Plaintext
90 lines
1.9 KiB
Plaintext
.toolBar {
|
|
position : absolute;
|
|
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 : #CCCCCC;
|
|
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;
|
|
padding: 2px 0;
|
|
|
|
&::-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%);
|
|
}
|
|
}
|
|
|
|
&#pageInput {
|
|
width: 4ch;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.tool {
|
|
display : flex;
|
|
align-items : center;
|
|
padding : 0;
|
|
height: 100%;
|
|
width: auto;
|
|
box-sizing: content-box;
|
|
|
|
&:hover { background-color : #444444; }
|
|
|
|
button {
|
|
height : 100%;
|
|
width : auto;
|
|
min-width : 46px;
|
|
padding : 0 8px;
|
|
font-weight : unset;
|
|
color : inherit;
|
|
background-color : unset;
|
|
|
|
&:focus { outline : 1px solid #d3d3d3; }
|
|
|
|
&:disabled {
|
|
color : #777777;
|
|
background-color : unset !important;
|
|
}
|
|
}
|
|
}
|
|
} |