mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
425 lines
9.7 KiB
Plaintext
425 lines
9.7 KiB
Plaintext
@import '@themes/assets/assets.less';
|
|
@import '@sharedStyles/core.less';
|
|
|
|
.vaultPage {
|
|
height : 100%;
|
|
overflow-y : hidden;
|
|
|
|
--bg-clr : white;
|
|
--bg-image : @backgroundImageAlt;
|
|
--h1-clr : black;
|
|
--h2-clr : #000077;
|
|
--label-clr : black;
|
|
--input-bg : white;
|
|
--input-bg-hover : #DDDDDD;
|
|
--input-text-clr : black;
|
|
--input-placeholder-clr : grey;
|
|
|
|
*:not(input) { user-select : none; }
|
|
|
|
.form { background : white; }
|
|
|
|
:where(.content .dataGroup) {
|
|
width : 100%;
|
|
height : 100%;
|
|
|
|
&.form .brewLookup {
|
|
color : var(--label-clr);
|
|
background-color : var(--bg-clr);
|
|
background-image : var(--bg-image);
|
|
background-size : cover;
|
|
height:100%;
|
|
|
|
position : relative;
|
|
padding : 50px clamp(20px, 4vw, 50px);
|
|
|
|
|
|
small {
|
|
font-size : 10pt;
|
|
color : #555555;
|
|
|
|
a { color : #333333; }
|
|
}
|
|
|
|
code {
|
|
padding-inline : 5px;
|
|
font-family : monospace;
|
|
background : lightgrey;
|
|
border-radius : 5px;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family : 'CodeBold';
|
|
letter-spacing : 2px;
|
|
color : var(--h1-clr);
|
|
}
|
|
|
|
legend {
|
|
h3 {
|
|
margin-block : 30px 20px;
|
|
font-size : 20px;
|
|
text-align : center;
|
|
border-bottom : 2px solid;
|
|
}
|
|
ul {
|
|
padding-inline : 30px 10px;
|
|
li {
|
|
margin-block : 5px;
|
|
line-height : calc(1em + 5px);
|
|
list-style : disc;
|
|
}
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
position : absolute;
|
|
top : 0;
|
|
right : 0;
|
|
left : 0;
|
|
display : block;
|
|
padding : 10px;
|
|
font-weight : 900;
|
|
color : white;
|
|
white-space : pre-wrap;
|
|
content : 'Error:\A At least one renderer should be enabled to make a search';
|
|
background : rgb(255, 60, 60);
|
|
opacity : 0;
|
|
transition : opacity 0.5s;
|
|
}
|
|
&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
|
|
|
|
.formTitle {
|
|
margin : 20px 0;
|
|
font-size : 30px;
|
|
color : black;
|
|
text-align : center;
|
|
border-bottom : 2px solid;
|
|
}
|
|
|
|
.formContents {
|
|
position : relative;
|
|
display : flex;
|
|
flex-direction : column;
|
|
|
|
label {
|
|
display : flex;
|
|
align-items : center;
|
|
margin : 10px 0;
|
|
}
|
|
input[type='text'], textarea, select {
|
|
margin : 0 10px;
|
|
color : var(--input-text-clr);
|
|
background-color : var(--input-bg);
|
|
border : 1px solid var(--input-placeholder-clr);
|
|
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
|
|
&::placeholder { color : var(--input-placeholder-clr); }
|
|
&:invalid { background : #ffbcb5; }
|
|
}
|
|
|
|
#searchButton {
|
|
.colorButton(@green);
|
|
position : absolute;
|
|
right : 20px;
|
|
bottom : 0;
|
|
|
|
i {
|
|
margin-left : 10px;
|
|
animation-duration : 1000s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.resultsContainer {
|
|
display : flex;
|
|
flex-direction : column;
|
|
height : 100%;
|
|
overflow-y : auto;
|
|
font-size : 0.34cm;
|
|
container-type : inline-size;
|
|
|
|
.foundBrews {
|
|
display:flex;
|
|
flex-direction: column;
|
|
gap:20px;
|
|
padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
|
|
overflow-y : scroll;
|
|
scrollbar-gutter : stable;
|
|
@container (max-width : 1200px) {
|
|
padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
|
|
}
|
|
@container (max-width : 800px) {
|
|
padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width : 15px;
|
|
&:horizontal {
|
|
width : auto;
|
|
height : 20px;
|
|
}
|
|
&-thumb {
|
|
background : linear-gradient(90deg, var(--bg-clr) 12px, #00000000 12px);
|
|
&:horizontal { background : linear-gradient(0deg, var(--bg-clr) 15px, #00000000 15px); }
|
|
}
|
|
&-corner { visibility : hidden; }
|
|
}
|
|
|
|
&.noBrews {
|
|
margin : 10px 0px;
|
|
font-size : 25px;
|
|
font-style : italic;
|
|
font-weight : 900;
|
|
color : white;
|
|
}
|
|
|
|
&.searching {
|
|
display : grid;
|
|
place-items : center;
|
|
color : white;
|
|
|
|
h3 { position : relative; }
|
|
|
|
h3.searchAnim::after {
|
|
position : absolute;
|
|
top : 50%;
|
|
right : 0;
|
|
width : max-content;
|
|
height : 1em;
|
|
content : '';
|
|
translate : calc(100% + 5px) -50%;
|
|
animation : trailingDots 2s ease infinite;
|
|
}
|
|
}
|
|
|
|
|
|
.brewCollection {
|
|
h1 {
|
|
width : fit-content;
|
|
margin-bottom : 20px;
|
|
font-size : 25px;
|
|
color : #DDDDDD;
|
|
|
|
&.active::before,
|
|
&.inactive::before {
|
|
padding-right : 0.5em;
|
|
font-family : 'Font Awesome 6 Free';
|
|
font-size : 0.6cm;
|
|
font-weight : 900;
|
|
}
|
|
&.active {
|
|
color : white;
|
|
&::before { content : '\f107'; }
|
|
}
|
|
&.inactive::before { content : '\f105'; }
|
|
}
|
|
h1:hover { cursor : pointer; }
|
|
|
|
.brewGroup {
|
|
margin-bottom : 20px;
|
|
&.grid {
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
gap : 20px;
|
|
justify-content : center;
|
|
width : fit-content;
|
|
min-width : 200px;
|
|
}
|
|
|
|
&.list {
|
|
display : flex;
|
|
flex-direction : column;
|
|
gap : 2px;
|
|
}
|
|
&.card {
|
|
--columns : 4;
|
|
display : grid;
|
|
grid-template-columns : repeat(var(--columns), 1fr);
|
|
gap : 20px;
|
|
justify-items : center;
|
|
|
|
@container (max-width : 1700px) {--columns : 3;}
|
|
@container (max-width : 1400px) {--columns : 2;}
|
|
@container (max-width : 900px) {--columns : 1;}
|
|
h1 { position : absolute; }
|
|
|
|
&:not(:has(.brewItem:last-child:nth-child(3n))) {
|
|
.brewItem:last-child { margin-right : auto; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.totalBrews {
|
|
position : fixed;
|
|
right : 0;
|
|
bottom : 0;
|
|
z-index : 1000;
|
|
padding : 8px 10px;
|
|
font-family : 'Open Sans';
|
|
font-size : 11px;
|
|
font-weight : 800;
|
|
color : white;
|
|
background-color : #333333;
|
|
|
|
.searchAnim {
|
|
position : relative;
|
|
display : inline-block;
|
|
width : 3ch;
|
|
height : 1em;
|
|
}
|
|
|
|
.searchAnim::after {
|
|
position : absolute;
|
|
top : 50%;
|
|
right : 0;
|
|
width : max-content;
|
|
height : 1em;
|
|
content : '';
|
|
translate : -50% -50%;
|
|
animation : trailingDots 2s ease infinite;
|
|
}
|
|
}
|
|
|
|
.paginationControls {
|
|
display : grid;
|
|
grid-template-areas : 'previousPage currentPage nextPage';
|
|
grid-template-columns : 50px 1fr 50px;
|
|
gap : 20px;
|
|
place-items : center;
|
|
width : fit-content;
|
|
margin-inline:auto;
|
|
font-size : 15px;
|
|
|
|
.pages {
|
|
display : flex;
|
|
grid-area : currentPage;
|
|
gap : 1em;
|
|
justify-content : space-evenly;
|
|
width : 100%;
|
|
height : 100%;
|
|
text-align : center;
|
|
|
|
.pageNumber {
|
|
place-content : center;
|
|
width : fit-content;
|
|
min-width : 2em;
|
|
font-family : 'Open Sans';
|
|
font-weight : 900;
|
|
color : white;
|
|
text-wrap : nowrap;
|
|
text-underline-position : under;
|
|
cursor : pointer;
|
|
|
|
&:hover {
|
|
color : gold;
|
|
}
|
|
&.currentPage {
|
|
color:@yellow;
|
|
text-decoration : underline;
|
|
pointer-events : none;
|
|
}
|
|
|
|
&.firstPage { margin-right : -5px; }
|
|
|
|
&.lastPage { margin-left : -5px; }
|
|
}
|
|
}
|
|
|
|
button {
|
|
.colorButton(@green);
|
|
width : max-content;
|
|
|
|
&.previousPage { grid-area : previousPage; }
|
|
|
|
&.nextPage { grid-area : nextPage; }
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.listPageNav {
|
|
position : relative;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
row-gap : 10px;
|
|
column-gap : 20px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
width : 100%;
|
|
height : fit-content;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : white;
|
|
background : #555555;
|
|
border-top : 1px solid #666666;
|
|
border-bottom : 1px solid #666666;
|
|
row-rule : 1px solid #666666;
|
|
|
|
> div {
|
|
width : fit-content;
|
|
height : 30px;
|
|
padding-inline : 10px;
|
|
}
|
|
|
|
.radio-toggle {
|
|
z-index : 1;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
row-gap : 5px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
text-align : center;
|
|
h6 {
|
|
margin-right : 5px;
|
|
font-size : 14px;
|
|
}
|
|
|
|
.option {
|
|
display : flex;
|
|
align-items : center;
|
|
height : 100%;
|
|
padding : 0 8px;
|
|
color : #CCCCCC;
|
|
|
|
input[type='radio'] { display : none; }
|
|
|
|
button {
|
|
padding : 0;
|
|
font-size : 11px;
|
|
font-weight : normal;
|
|
text-transform : uppercase;
|
|
background-color : transparent;
|
|
}
|
|
&:hover { background-color : #444444; }
|
|
|
|
&.active, &:has(input:checked) {
|
|
font-weight : bold;
|
|
color : white;
|
|
background-color : #333333;
|
|
|
|
button {
|
|
height : 100%;
|
|
font-weight : 800;
|
|
& + .sortDir { padding-left : 5px; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@keyframes trailingDots {
|
|
|
|
0%,
|
|
32% { content : ' .'; }
|
|
|
|
33%,
|
|
65% { content : ' ..'; }
|
|
|
|
66%,
|
|
100% { content : ' ...'; }
|
|
} |