mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-09 11:32:39 +00:00
style lint
This commit is contained in:
Víctor Losada Hernández
@@ -1,148 +1,129 @@
|
||||
|
||||
.brewItem{
|
||||
.brewItem {
|
||||
position : relative;
|
||||
box-sizing : border-box;
|
||||
display : inline-block;
|
||||
vertical-align : top;
|
||||
box-sizing : border-box;
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
width : 48%;
|
||||
min-height : 105px;
|
||||
margin-right : 15px;
|
||||
margin-bottom : 15px;
|
||||
padding : 5px 15px 2px 6px;
|
||||
padding-right : 15px;
|
||||
border : 1px solid #c9ad6a;
|
||||
margin-right : 15px;
|
||||
margin-bottom : 15px;
|
||||
overflow : hidden;
|
||||
vertical-align : top;
|
||||
background-color : #CAB2802E;
|
||||
border : 1px solid #C9AD6A;
|
||||
border-radius : 5px;
|
||||
box-shadow : 0px 4px 5px 0px #333333;
|
||||
break-inside : avoid;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
box-shadow : 0px 4px 5px 0px #333;
|
||||
background-color : #cab2802e;
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
|
||||
-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
|
||||
opacity: 50%;
|
||||
.thumbnail {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
z-index : -1;
|
||||
width : 150px;
|
||||
height : 100%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : right top;
|
||||
background-size : contain;
|
||||
opacity : 50%;
|
||||
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
}
|
||||
.text {
|
||||
min-height : 54px;
|
||||
h4{
|
||||
h4 {
|
||||
margin-bottom : 5px;
|
||||
font-size : 2.2em;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
position: initial;
|
||||
bottom: 2px;
|
||||
font-family : ScalySansRemake;
|
||||
.info {
|
||||
position : initial;
|
||||
bottom : 2px;
|
||||
font-family : "ScalySansRemake";
|
||||
font-size : 1.2em;
|
||||
&>span{
|
||||
& > span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
|
||||
a {
|
||||
color:inherit;
|
||||
}
|
||||
a { color : inherit; }
|
||||
}
|
||||
}
|
||||
.brewTags span {
|
||||
background-color: #c8ac6e3b;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border: 1px solid #c8ac6e;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
border-color: currentColor;
|
||||
cursor : pointer;
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
display : inline-block;
|
||||
padding : 2px;
|
||||
margin : 2px;
|
||||
font-weight : bold;
|
||||
white-space : nowrap;
|
||||
cursor : pointer;
|
||||
background-color : #C8AC6E3B;
|
||||
border : 1px solid #C8AC6E;
|
||||
border-color : currentColor;
|
||||
border-radius : 4px;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
}
|
||||
&.type {
|
||||
background-color: #0080003b;
|
||||
color: #008000;
|
||||
&:before{
|
||||
content: '\f0ad';
|
||||
}
|
||||
color : #008000;
|
||||
background-color : #0080003B;
|
||||
&::before { content : '\f0ad'; }
|
||||
}
|
||||
&.group {
|
||||
background-color: #5050503b;
|
||||
color: #000000;
|
||||
&:before{
|
||||
content: '\f500';
|
||||
}
|
||||
color : #000000;
|
||||
background-color : #5050503B;
|
||||
&::before { content : '\f500'; }
|
||||
}
|
||||
&.meta {
|
||||
background-color: #0000803b;
|
||||
color: #000080;
|
||||
&:before{
|
||||
content: '\f05a';
|
||||
}
|
||||
color : #000080;
|
||||
background-color : #0000803B;
|
||||
&::before { content : '\f05a'; }
|
||||
}
|
||||
&.system {
|
||||
background-color: #8000003b;
|
||||
color: #800000;
|
||||
&:before{
|
||||
content: '\f518';
|
||||
}
|
||||
color : #800000;
|
||||
background-color : #8000003B;
|
||||
&::before { content : '\f518'; }
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.links{
|
||||
opacity : 1;
|
||||
}
|
||||
&:hover {
|
||||
.links { opacity : 1; }
|
||||
}
|
||||
&:nth-child(2n + 1){
|
||||
margin-right : 0px;
|
||||
}
|
||||
.links{
|
||||
&:nth-child(2n + 1) { margin-right : 0px; }
|
||||
.links {
|
||||
.animate(opacity);
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
height : 100%;
|
||||
width : 2em;
|
||||
opacity : 0;
|
||||
background-color : fade(black, 60%);
|
||||
height : 100%;
|
||||
text-align : center;
|
||||
a{
|
||||
background-color : fade(black, 60%);
|
||||
opacity : 0;
|
||||
a {
|
||||
.animate(opacity);
|
||||
display : block;
|
||||
margin : 8px 0px;
|
||||
opacity : 0.6;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
text-decoration : unset;
|
||||
&:hover{
|
||||
opacity : 1;
|
||||
}
|
||||
i{
|
||||
cursor : pointer;
|
||||
}
|
||||
opacity : 0.6;
|
||||
&:hover { opacity : 1; }
|
||||
i { cursor : pointer; }
|
||||
}
|
||||
}
|
||||
.googleDriveIcon {
|
||||
height : 18px;
|
||||
height : 18px;
|
||||
padding : 0px;
|
||||
margin : -5px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
mix-blend-mode : darken;
|
||||
height : 24px;
|
||||
position : relative;
|
||||
top : 5px;
|
||||
left : -5px;
|
||||
height : 24px;
|
||||
mix-blend-mode : darken;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
.noColumns(){
|
||||
.noColumns() {
|
||||
column-count : auto;
|
||||
column-fill : auto;
|
||||
column-gap : normal;
|
||||
@@ -13,177 +13,151 @@
|
||||
height : auto;
|
||||
min-height : 279.4mm;
|
||||
margin : 20px auto;
|
||||
contain : unset;
|
||||
contain : unset;
|
||||
}
|
||||
.listPage{
|
||||
.content{
|
||||
.listPage {
|
||||
.content {
|
||||
z-index : 1;
|
||||
.page{
|
||||
.page {
|
||||
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
|
||||
&::after{
|
||||
display : none;
|
||||
}
|
||||
.noBrews{
|
||||
&::after { display : none; }
|
||||
.noBrews {
|
||||
margin : 10px 0px;
|
||||
font-size : 1.3em;
|
||||
font-style : italic;
|
||||
}
|
||||
.brewCollection {
|
||||
h1:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
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';
|
||||
padding-right : 0.5em;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 0.6cm;
|
||||
font-weight : 900;
|
||||
}
|
||||
.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;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 1;
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
row-gap : 5px;
|
||||
column-gap : 15px;
|
||||
align-items : baseline;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : 30px;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
color : white;
|
||||
text-align : center;
|
||||
background-color : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
h6 {
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : bold;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
.sort-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
color: #ccc;
|
||||
height: 100%;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
height : 100%;
|
||||
padding : 0 8px;
|
||||
color : #CCCCCC;
|
||||
|
||||
&:hover{
|
||||
background-color : #444;
|
||||
}
|
||||
&:hover { background-color : #444444; }
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
background-color: #333;
|
||||
font-weight : bold;
|
||||
color : #DDDDDD;
|
||||
background-color : #333333;
|
||||
|
||||
button {
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
height: 100%;
|
||||
& + .sortDir {
|
||||
padding-left: 5px;
|
||||
button {
|
||||
height : 100%;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
& + .sortDir { padding-left : 5px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.filter-option {
|
||||
margin-left: 20px;
|
||||
background-color : transparent !important;
|
||||
margin-left : 20px;
|
||||
font-size : 11px;
|
||||
i{
|
||||
padding-right : 5px;
|
||||
}
|
||||
background-color : transparent !important;
|
||||
i { padding-right : 5px; }
|
||||
}
|
||||
button {
|
||||
padding : 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : normal;
|
||||
color : #CCCCCC;
|
||||
text-transform : uppercase;
|
||||
background-color : transparent;
|
||||
}
|
||||
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;
|
||||
row-gap : 5px;
|
||||
column-gap : 15px;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
height : 30px;
|
||||
color : white;
|
||||
background-color : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
span {
|
||||
padding : 3px;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : bold;
|
||||
color : #DFDFDF;
|
||||
cursor : pointer;
|
||||
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;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
}
|
||||
&:after {
|
||||
content: '\f00d';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 12px;
|
||||
margin-left: 3px;
|
||||
&::after {
|
||||
margin-left : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
content : '\f00d';
|
||||
}
|
||||
&.type {
|
||||
background-color: #008000;
|
||||
border-color: #00a000;
|
||||
&:before{
|
||||
content: '\f0ad';
|
||||
}
|
||||
background-color : #008000;
|
||||
border-color : #00A000;
|
||||
&::before { content : '\f0ad'; }
|
||||
}
|
||||
&.group {
|
||||
background-color: #505050;
|
||||
border-color: #000000;
|
||||
&:before{
|
||||
content: '\f500';
|
||||
}
|
||||
background-color : #505050;
|
||||
border-color : #000000;
|
||||
&::before { content : '\f500'; }
|
||||
}
|
||||
&.meta {
|
||||
background-color: #000080;
|
||||
border-color: #0000a0;
|
||||
&:before{
|
||||
content: '\f05a';
|
||||
}
|
||||
background-color : #000080;
|
||||
border-color : #0000A0;
|
||||
&::before { content : '\f05a'; }
|
||||
}
|
||||
&.system {
|
||||
background-color: #800000;
|
||||
border-color: #a00000;
|
||||
&:before{
|
||||
content: '\f518';
|
||||
}
|
||||
background-color : #800000;
|
||||
border-color : #A00000;
|
||||
&::before { content : '\f518'; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.homebrew {
|
||||
.uiPage.sitePage {
|
||||
.content {
|
||||
width : ~"min(90vw, 1000px)";
|
||||
width : ~'min(90vw, 1000px)';
|
||||
padding : 2% 4%;
|
||||
margin-top : 25px;
|
||||
margin-right : auto;
|
||||
@@ -17,19 +17,19 @@
|
||||
border : 2px solid black;
|
||||
border-radius : 5px;
|
||||
button {
|
||||
width : 125px;
|
||||
margin-right : 5px;
|
||||
color : black;
|
||||
background-color : transparent;
|
||||
border : 1px solid black;
|
||||
border-radius : 5px;
|
||||
width : 125px;
|
||||
color : black;
|
||||
margin-right : 5px;
|
||||
&.active {
|
||||
background-color: #0007;
|
||||
color: white;
|
||||
&:before {
|
||||
content: '\f00c';
|
||||
font-family: 'FONT AWESOME 5 FREE';
|
||||
margin-right: 5px;
|
||||
color : white;
|
||||
background-color : #00000077;
|
||||
&::before {
|
||||
margin-right : 5px;
|
||||
font-family : 'FONT AWESOME 5 FREE';
|
||||
content : '\f00c';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,11 +60,9 @@
|
||||
list-style : square;
|
||||
}
|
||||
.blank {
|
||||
height: 1em;
|
||||
margin-top: 0;
|
||||
& + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user