mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 20:33:51 +00:00
191 lines
3.9 KiB
Plaintext
191 lines
3.9 KiB
Plaintext
|
|
.noColumns(){
|
|
column-count : auto;
|
|
column-fill : auto;
|
|
column-gap : normal;
|
|
column-width : auto;
|
|
-webkit-column-count : auto;
|
|
-moz-column-count : auto;
|
|
-webkit-column-width : auto;
|
|
-moz-column-width : auto;
|
|
-webkit-column-gap : normal;
|
|
-moz-column-gap : normal;
|
|
height : auto;
|
|
min-height : 279.4mm;
|
|
margin : 20px auto;
|
|
contain : unset;
|
|
}
|
|
.listPage{
|
|
.content{
|
|
z-index : 1;
|
|
.page{
|
|
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
|
|
&::after{
|
|
display : none;
|
|
}
|
|
.noBrews{
|
|
margin : 10px 0px;
|
|
font-size : 1.3em;
|
|
font-style : italic;
|
|
}
|
|
.brewCollection {
|
|
h1:hover{
|
|
cursor: pointer;
|
|
}
|
|
.active::before, .inactive::before {
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
font-size: 0.6cm;
|
|
padding-right: 0.5em;
|
|
}
|
|
.active {
|
|
color: var(--HB_Color_HeaderText);
|
|
}
|
|
.active::before {
|
|
content: '\f107';
|
|
}
|
|
.inactive {
|
|
color: #707070;
|
|
}
|
|
.inactive::before {
|
|
content: '\f105';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sort-container {
|
|
font-family : 'Open Sans', sans-serif;
|
|
position : sticky;
|
|
top : 0;
|
|
left : 0;
|
|
width : 100%;
|
|
height : 30px;
|
|
background-color : #555;
|
|
border-top : 1px solid #666;
|
|
border-bottom : 1px solid #666;
|
|
color : white;
|
|
text-align : center;
|
|
z-index : 1;
|
|
display : flex;
|
|
justify-content : center;
|
|
align-items : baseline;
|
|
column-gap : 15px;
|
|
row-gap : 5px;
|
|
flex-wrap : wrap;
|
|
h6{
|
|
text-transform : uppercase;
|
|
font-family : 'Open Sans', sans-serif;
|
|
font-size : 11px;
|
|
font-weight : bold;
|
|
}
|
|
.sort-option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
color: #ccc;
|
|
height: 100%;
|
|
|
|
&:hover{
|
|
background-color : #444;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: bold;
|
|
color: #ddd;
|
|
background-color: #333;
|
|
|
|
button {
|
|
color: white;
|
|
font-weight: 800;
|
|
height: 100%;
|
|
& + .sortDir {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.filter-option {
|
|
margin-left: 20px;
|
|
background-color : transparent !important;
|
|
font-size : 11px;
|
|
i{
|
|
padding-right : 5px;
|
|
}
|
|
}
|
|
button{
|
|
background-color : transparent;
|
|
font-family : 'Open Sans', sans-serif;
|
|
text-transform : uppercase;
|
|
font-weight : normal;
|
|
font-size : 11px;
|
|
color : #ccc;
|
|
padding : 0;
|
|
}
|
|
|
|
|
|
}
|
|
.tags-container {
|
|
height : 30px;
|
|
background-color : #555;
|
|
border-top : 1px solid #666;
|
|
border-bottom : 1px solid #666;
|
|
color : white;
|
|
display : flex;
|
|
justify-content : center;
|
|
align-items : center;
|
|
column-gap : 15px;
|
|
row-gap : 5px;
|
|
flex-wrap : wrap;
|
|
span {
|
|
font-family : 'Open Sans', sans-serif;
|
|
font-size : 11px;
|
|
font-weight : bold;
|
|
border : 1px solid;
|
|
border-radius : 3px;
|
|
padding : 3px;
|
|
cursor : pointer;
|
|
color: #dfdfdf;
|
|
&:before {
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-size: 12px;
|
|
margin-right: 3px;
|
|
}
|
|
&:after {
|
|
content: '\f00d';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-size: 12px;
|
|
margin-left: 3px;
|
|
}
|
|
&.type {
|
|
background-color: #008000;
|
|
border-color: #00a000;
|
|
&:before{
|
|
content: '\f0ad';
|
|
}
|
|
}
|
|
&.group {
|
|
background-color: #505050;
|
|
border-color: #000000;
|
|
&:before{
|
|
content: '\f500';
|
|
}
|
|
}
|
|
&.meta {
|
|
background-color: #000080;
|
|
border-color: #0000a0;
|
|
&:before{
|
|
content: '\f05a';
|
|
}
|
|
}
|
|
&.system {
|
|
background-color: #800000;
|
|
border-color: #a00000;
|
|
&:before{
|
|
content: '\f518';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|