f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 22:38:43 +00:00
Code Wiki Activity
Files
40a2e3a0d49d378ccefe671832e5b1bbb79ea4d0
homebrewery/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
T

462 lines
11 KiB
Plaintext
Raw Blame History

@import '@sharedStyles/core.less';
@import '@themes/assets/assets.less';
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
.brewItem {
--bg-clr : #EEEEEE;
--bg-image : @backgroundImageAlt;
--text-clr : black;
--text-shadow-clr : white;
--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
position : relative;
display : flex;
flex-direction : column;
overflow : hidden;
font-size : 15px;
color : var(--text-clr);
background-color : var(--bg-clr);
background-image : var(--bg-image);
background-size : cover;
isolation : isolate;
break-inside : avoid;
-webkit-column-break-inside : avoid;
.thumbnail {
position : absolute;
top : 0;
right : 30px;
z-index : -1;
width : 155px;
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 {
h2 {
font-family : 'Alata';
font-size : 1.25em;
}
}
.info {
a { color : inherit; }
font-size : 0.9em;
& > 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;
color:black;
background : hsl(from currentColor h 20% 80%);
border : 1px solid currentColor;
border-radius : 4px;
&::before {
margin-right : 3px;
font-family : 'Font Awesome 6 Free';
font-size : 12px;
}
--tag-base : #C8AC6E;
--tag-type : #008000;
--tag-group : #000000;
--tag-meta : #000080;
--tag-system : #800000;
&.type {
color : var(--tag-type);
&::before { content : '\f0ad'; }
}
&.group {
color : var(--tag-group);
&::before { content : '\f500'; }
}
&.meta {
color : var(--tag-meta);
&::before { content : '\f05a'; }
}
&.system {
color : var(--tag-system);
&::before { content : '\f518'; }
}
}
&:nth-child(2n + 1) { margin-right : 0; }
.googleDriveIcon {
height : 18px;
padding : 0;
margin : -5px;
}
.homebreweryIcon {
position : relative;
top : 5px;
left : -7.5px;
height : 18px;
padding : 0;
}
.links {
position : absolute;
right : 0;
display : flex;
height : 100%;
a,
button {
display : block;
align-content : center;
width : 100%;
height : 100%;
font-size : 1.3em;
text-align : center;
text-decoration : unset;
cursor : pointer;
&:hover { background-color : hsl(from currentColor h 30% 90%); }
}
.shareLink { color : @yellow; }
.editLink { color : @green; }
.downloadLink { color : @blueLight; }
.deleteLink { color : @red; }
}
}
.darkMode .brewItem {
--bg-clr : #444;
--bg-image : @backgroundImageAltDark;
--text-clr : #ddd;
--text-shadow-clr : black;
--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
}
.grid > .brewItem {
justify-content : space-between;
width : clamp(300px, 48%, 500px);
min-height : 125px;
padding : 7px 17px 7px 8px;
padding-right : 30px;
border-radius : 5px;
box-shadow : 0 4px 5px 0 #333333;
.text {
min-height : 54px;
h2 { margin-bottom : 5px; }
.description { padding-left : 5px; }
}
.info { padding-left : 5px; }
.links {
top : 0;
flex-direction : column;
width : 2em;
a,
button {
display : block;
width : 100%;
font-size : 1.1em;
i { cursor : pointer; }
}
}
}
.card > .brewItem {
gap : 5px;
justify-content : flex-end;
width : 300px;
height : 400px;
padding : 100px 10px 50px;
background-image : var(--hb-logo), var(--bg-image);
background-repeat : no-repeat;
background-position : center 20%, center;
background-size : 50%, cover;
border : 3px solid;
border-radius : 10px;
box-shadow : 0 4px 5px #222222;
&::before {
position : absolute;
right : 0;
bottom : 0;
left : 0;
z-index : -1;
display : block;
height : 50%;
content : '';
background-image : linear-gradient(0deg, var(--bg-clr) 0, hsl(from var(--bg-clr) h s l / 0) 90%);
transition : height @defaultDuration;
}
&:hover {
&::before {
height : 100%;
background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, hsl(from var(--bg-clr) h s l / 0) 65%);
}
.text .description { height : fit-content; }
}
.thumbnail {
position : absolute;
top : 0;
left : 0;
z-index : -2;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
opacity : 1;
mask-image : unset;
}
.text {
filter : drop-shadow(0 1px 4px var(--text-shadow-clr));
h2 { font-weight : 900; }
.description {
height : 0;
overflow : hidden;
transition : height @defaultDuration;
}
}
.info {
display : grid;
grid-template-areas : 'tags tags tags tags'
'authors authors authors authors'
'pages views . .'
'update update storage .';
grid-template-columns : 1fr 1fr 1fr 30px;
height : 110px;
filter : drop-shadow(0 1px 2px var(--text-shadow-clr));
.brewTags {
grid-area : tags;
color : inherit;
i { color : inherit;}
}
.brewAuthors { grid-area : authors; }
.brewPages { grid-area : pages; }
.lastViewed { grid-area : views; }
.lastUpdated { grid-area : update; }
.storage { grid-area : storage; }
}
.links {
bottom : 0;
left : 0;
height : 40px;
}
}
.darkMode .card .brewItem {
border-width:2px;
}
.list > .brewItem {
display : grid;
grid-template-columns : 35% 3fr 150px;
gap : 10px;
align-items : center;
width : 100%;
height : 50px;
.thumbnail { display : none; }
.text {
padding-left : 10px;
h2 {
.ellipsis();
align-content : center;
min-height : 1.4em;
}
.description { display : none; }
}
.info {
display : grid;
grid-template-areas : 'tags authors pages views update storage';
grid-template-columns : 2fr 150px 0.7fr 65px 1.5fr 20px;
align-content : space-around;
align-items : center;
justify-content : end;
width : clamp(400px, 100%, 650px);
br { display : none; }
span { display : inline-block; margin : 0; }
.brewTags {
display : inline-flex;
flex-wrap : wrap;
grid-area : tags;
align-items : center;
width : 100%;
i, span { margin-right : 5px; }
&:has(span:nth-of-type(3)) {
position : relative;
display : flex;
flex-wrap : wrap;
overflow : hidden;
span:nth-of-type(n + 3) { display : none; }
}
}
.brewAuthors {
.ellipsis();
display : -webkit-box;
grid-area : authors;
align-content : center;
width : 150px;
height : 40px;
padding-right : 5px;
-webkit-line-clamp : 3;
line-clamp : 3;
-webkit-box-orient : vertical;
&:has(a:only-of-type) { width : fit-content; }
}
.lastViewed {
grid-area : views;
min-width : 50px;
}
.brewPages {
grid-area : pages;
min-width : 40px;
}
.lastUpdated {
display : flex;
grid-area : update;
gap : 5px;
align-items : center;
}
.storage {
grid-area : storage;
filter : drop-shadow(0 0 10px var(--text-shadow-clr));
.homebreweryIcon {
top : 3px;
left : -5px;
height : 20px;
}
}
}
.links {
position : relative;
a, button {
align-content : center;
height : 100%;
text-align : center;
}
}
}
//these media queries are just for the list layout and could be moved inside it, not sure it is a good idea
@media screen and (max-width : 1400px) {
.brewCollection .brewGroup.list {
.brewItem:not(.detailsOpen) {
.info {
grid-template-areas : 'tags update storage';
grid-template-columns : 2fr 1fr 20px;
width : clamp(200px, 100%, 650px);
}
.brewPages,
.lastViewed,
.brewAuthors { display : none; }
}
.brewItem {
cursor : pointer;
transition : height @defaultDuration;
&:hover {
box-shadow : 0 0 5px var(--bg-clr);
filter : brightness(0.97);
}
}
.detailsOpen {
grid-template-columns : 25% 3fr 150px;
height : 70px;
}
}
}
@media screen and (max-width : 1200px) {
.brewCollection .brewGroup.list {
.brewItem:not(.detailsOpen) {
grid-template-columns : 35% 3fr 150px;
.info {
grid-template-areas : 'tags storage';
grid-template-columns : 1fr 20px;
}
.brewAuthors,
.lastUpdated { display : none; }
}
.detailsOpen {
height : 100px;
.info {
grid-template-areas : 'tags views pages .'
'authors update update storage';
grid-template-rows : 1fr 1fr;
grid-template-columns : 2fr 1fr 1fr 30px;
width : clamp(200px, 100%, 650px);
}
.lastUpdated {
.ellipsis();
max-width : 120px;
}
}
}
}
@media screen and (max-width : 800px) {
.brewCollection .brewGroup.list {
.brewItem:not(.detailsOpen) {
.info {
grid-template-areas : 'tags';
grid-template-columns : 1fr;
width : clamp(200px, 100%, 650px);
}
.storage { display : none; }
}
.brewItem {
h2 {
width : 200px;
font-size : 1em;
}
transition : height @defaultDuration;
}
.detailsOpen {
display : grid;
grid-template-columns : 1fr 4fr 30px;
height : 100px;
padding : 5px;
.text {
height : 100%;
padding : 0;
h2 {
display : -webkit-box;
height : fit-content;
overflow : hidden;
text-overflow : ellipsis;
-webkit-line-clamp : 3;
line-clamp : 3;
white-space : wrap;
-webkit-box-orient : vertical;
}
}
.info {
display : grid;
grid-template-areas :
'tags pages views views'
'authors update update storage';
grid-template-columns : 2fr 1fr 1fr 20px;
width : 100%;
height : 100%;
}
.links {
display : flex;
flex-direction : column;
gap : 5px;
a,
button { margin : 0; }
}
}
}
}
@media screen and (max-width : 650px) {
.brewCollection .brewGroup.list {
.brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 2fr;
.info { display : none; }
}
.detailsOpen {
.info {
.lastUpdated {
.ellipsis();
width : 100px;
}
}
}
}
}
View Git Blame Copy Permalink