f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 07:12:40 +00:00
Code Wiki Activity

linting

Browse Source
This commit is contained in:
Gazook89
2024-11-04 14:08:06 -06:00
parent 1be1b3b747
commit b098d28407
4 changed files with 60 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -167,12 +167,12 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
</label> </label>
<label title='Start 1st page on the right side, such as if you have cover page.'> <label title='Start 1st page on the right side, such as if you have cover page.'>
Start on right Start on right
<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight)}} <input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
</label> </label>
<label title='Toggle the page shadow on every page.'> <label title='Toggle the page shadow on every page.'>
Page shadows Page shadows
<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows)}} /> <input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
</label> </label>
</AnchoredBox> </AnchoredBox>
</Anchored> </Anchored>

58
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -17,7 +17,7 @@
background-color : #555555; background-color : #555555;
& > *:not(.toggleButton) { & > *:not(.toggleButton) {
opacity : 1; opacity : 1;
transition: all .2s ease; transition : all 0.2s ease;
} }
.group { .group {
@@ -34,14 +34,10 @@
align-items : center; align-items : center;
} }
.active, [aria-checked=true] { .active, [aria-checked='true'] { background-color : #444444; }
background-color: #444;
}
.anchored-trigger { .anchored-trigger {
&.active { &.active { background-color : #444444; }
background-color: #444444;
}
} }
.anchored-box { .anchored-box {
@@ -52,56 +48,54 @@
gap : 5px; gap : 5px;
padding : 15px; padding : 15px;
margin-top : 10px; margin-top : 10px;
font-size : .8em; font-size : 0.8em;
color : #CCCCCC; color : #CCCCCC;
background-color : var(--box-color); background-color : var(--box-color);
border-radius : 5px; border-radius : 5px;
h1 { h1 {
border-bottom: 1px solid currentColor;
margin-bottom: 0.5em;
padding-bottom : 0.3em; padding-bottom : 0.3em;
margin-bottom : 0.5em;
border-bottom : 1px solid currentColor;
} }
h2 { h2 {
padding-bottom : 0.3em;
margin : 1em 0 0.5em 0;
color : lightgray; color : lightgray;
border-bottom : 1px solid currentColor; border-bottom : 1px solid currentColor;
margin: 1em 0 0.5em 0;
padding-bottom: 0.3em;
} }
label { label {
display : flex; display : flex;
gap : 6px;
align-items : center; align-items : center;
justify-content : space-between; justify-content : space-between;
gap: 6px;
} }
input { input {
height : unset; height : unset;
&[type='range'] { &[type='range'] { padding : 0; }
padding: 0;
} }
} &::before {
&:before { position : absolute;
content: ""; top : -20px;
left : 50%;
width : 0px; width : 0px;
height : 0px; height : 0px;
position: absolute; pointer-events : none;
content : '';
border : 10px solid transparent; border : 10px solid transparent;
border-bottom : 10px solid var(--box-color); border-bottom : 10px solid var(--box-color);
left: 50%;
transform : translateX(-50%); transform : translateX(-50%);
top: -20px;
pointer-events: none;
} }
} }
.radio-group:has(button[role='radio']) { .radio-group:has(button[role='radio']) {
display : flex; display : flex;
border: 1px solid #333;
height : 100%; height : 100%;
border : 1px solid #333333;
} }
input { input {
@@ -165,9 +159,7 @@
color : inherit; color : inherit;
background-color : unset; background-color : unset;
&:not(button:has(i, svg)) { &:not(button:has(i, svg)) { padding : 0 8px; }
padding: 0 8px;
}
&:hover { background-color : #444444; } &:hover { background-color : #444444; }
&:focus { border : 1px solid #D3D3D3;outline : none;} &:focus { border : 1px solid #D3D3D3;outline : none;}
@@ -175,29 +167,27 @@
color : #777777; color : #777777;
background-color : unset !important; background-color : unset !important;
} }
i { i { font-size : 1.2em; }
font-size:1.2em;
}
} }
&.hidden { &.hidden {
width: 32px;
transition: all .3s ease;
flex-wrap : nowrap; flex-wrap : nowrap;
width : 32px;
overflow : hidden; overflow : hidden;
background-color : unset; background-color : unset;
opacity: .5; opacity : 0.5;
transition : all 0.3s ease;
& > *:not(.toggleButton) { & > *:not(.toggleButton) {
opacity : 0; opacity : 0;
transition: all .2s ease; transition : all 0.2s ease;
} }
} }
} }
button.toggleButton { button.toggleButton {
z-index : 5;
position : absolute; position : absolute;
left : 0; left : 0;
z-index : 5;
width : 32px; width : 32px;
min-width : unset; min-width : unset;
} }