0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-29 13:22:40 +00:00
Files
homebrewery/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
2025-05-22 15:01:38 -04:00

130 lines
3.2 KiB
Plaintext

.brewItem {
position : relative;
box-sizing : border-box;
display : inline-block;
width : 48%;
min-height : 105px;
padding : 5px 15px 2px 6px;
padding-right : 15px;
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;
.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 {
margin-bottom : 5px;
font-size : 2.2em;
}
}
.info {
position : initial;
bottom : 2px;
font-family : "ScalySansRemake";
font-size : 1.2em;
& > span {
margin-right : 12px;
line-height : 1.5em;
a { color : inherit; }
}
}
.brewTags span {
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 6 Free';
font-size : 12px;
}
&.type {
color : #008000;
background-color : #0080003B;
&::before { content : '\f0ad'; }
}
&.group {
color : #000000;
background-color : #5050503B;
&::before { content : '\f500'; }
}
&.meta {
color : #000080;
background-color : #0000803B;
&::before { content : '\f05a'; }
}
&.system {
color : #800000;
background-color : #8000003B;
&::before { content : '\f518'; }
}
}
&:hover {
.links { opacity : 1; }
}
&:nth-child(2n + 1) { margin-right : 0px; }
.links {
.animate(opacity);
position : absolute;
top : 0px;
right : 0px;
width : 2em;
height : 100%;
text-align : center;
background-color : fade(black, 60%);
opacity : 0;
a {
.animate(opacity);
display : block;
margin : 8px 0px;
font-size : 1.3em;
color : white;
text-decoration : unset;
opacity : 0.6;
&:hover { opacity : 1; }
i { cursor : pointer; }
}
}
.googleDriveIcon {
padding : 0px;
margin : -5px;
height : 18px;
}
.homebreweryIcon {
position : relative;
padding : 0px;
top : 5px;
left : -7.5px;
height : 18px;
}
}