f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-27 06:52:59 +00:00
Code Wiki Activity

better use of space

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-09 20:56:47 +02:00
parent 4e5480b5dd
commit 43ba216bfa
2 changed files with 546 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+147 -234
View File
@@ -9,7 +9,7 @@
overflow : hidden; overflow : hidden;
break-inside : avoid; break-inside : avoid;
-webkit-column-break-inside : avoid; -webkit-column-break-inside : avoid;
page-break-inside: avoid; break-inside : avoid;
.thumbnail { .thumbnail {
position : absolute; position : absolute;
top : 0; top : 0;
@@ -31,12 +31,8 @@
position : initial; position : initial;
bottom : 2px; bottom : 2px;
font-size : 1.2em; font-size : 1.2em;
& > span { & > span { line-height : 1.5em; }
line-height: 1.5em; a { color : inherit; }
}
a {
color: inherit;
}
} }
.brewTags span { .brewTags span {
display : inline-block; display : inline-block;
@@ -45,8 +41,8 @@
font-weight : bold; font-weight : bold;
white-space : nowrap; white-space : nowrap;
cursor : pointer; cursor : pointer;
background-color: #c8ac6e3b; background-color : #C8AC6E3B;
border: 1px solid #c8ac6e; border : 1px solid #C8AC6E;
border-color : currentColor; border-color : currentColor;
border-radius : 4px; border-radius : 4px;
&::before { &::before {
@@ -56,36 +52,26 @@
} }
&.type { &.type {
color : #008000; color : #008000;
background-color: #0080003b; background-color : #0080003B;
&::before { &::before { content : '\f0ad'; }
content: '\f0ad';
}
} }
&.group { &.group {
color : #000000; color : #000000;
background-color: #5050503b; background-color : #5050503B;
&::before { &::before { content : '\f500'; }
content: '\f500';
}
} }
&.meta { &.meta {
color : #000080; color : #000080;
background-color: #0000803b; background-color : #0000803B;
&::before { &::before { content : '\f05a'; }
content: '\f05a';
}
} }
&.system { &.system {
color : #800000; color : #800000;
background-color: #8000003b; background-color : #8000003B;
&::before { &::before { content : '\f518'; }
content: '\f518';
} }
} }
} &:nth-child(2n + 1) { margin-right : 0px; }
&:nth-child(2n + 1) {
margin-right: 0px;
}
.links { .links {
text-align : center; text-align : center;
background-color : fade(black, 60%); background-color : fade(black, 60%);
@@ -93,31 +79,27 @@
button { button {
.animate(opacity); .animate(opacity);
display : block; display : block;
width : 100%;
margin : 8px 0px; margin : 8px 0px;
font-size : 1.3em; font-size : 1.3em;
color : white; color : white;
text-decoration : unset; text-decoration : unset;
opacity : 0.6; opacity : 0.6;
width: 100%; &:hover { opacity : 1; }
&:hover { i { cursor : pointer; }
opacity: 1;
}
i {
cursor: pointer;
}
} }
} }
.googleDriveIcon { .googleDriveIcon {
height : 18px;
padding : 0px; padding : 0px;
margin : -5px; margin : -5px;
height: 18px;
} }
.homebreweryIcon { .homebreweryIcon {
position : relative; position : relative;
padding: 0px;
top : 5px; top : 5px;
left : -7.5px; left : -7.5px;
height : 18px; height : 18px;
padding : 0px;
} }
} }
@@ -131,16 +113,16 @@
padding-right : 15px; padding-right : 15px;
overflow : hidden; overflow : hidden;
vertical-align : top; vertical-align : top;
background-color: #cab2802e; background-color : #CAB2802E;
background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png');
background-size : cover; background-size : cover;
border: 1px solid #c9ad6a; border : 1px solid #C9AD6A;
border-radius : 5px; border-radius : 5px;
box-shadow : 0px 4px 5px 0px #333333; box-shadow : 0px 4px 5px 0px #333333;
isolation : isolate;
break-inside : avoid; break-inside : avoid;
-webkit-column-break-inside : avoid; -webkit-column-break-inside : avoid;
page-break-inside: avoid; break-inside : avoid;
isolation: isolate;
.thumbnail { .thumbnail {
position : absolute; position : absolute;
top : 0; top : 0;
@@ -179,8 +161,8 @@
font-weight : bold; font-weight : bold;
white-space : nowrap; white-space : nowrap;
cursor : pointer; cursor : pointer;
background-color: #c8ac6e3b; background-color : #C8AC6E3B;
border: 1px solid #c8ac6e; border : 1px solid #C8AC6E;
border-color : currentColor; border-color : currentColor;
border-radius : 4px; border-radius : 4px;
&::before { &::before {
@@ -190,38 +172,28 @@
} }
&.type { &.type {
color : #008000; color : #008000;
background-color: #0080003b; background-color : #0080003B;
&::before { &::before { content : '\f0ad'; }
content: '\f0ad';
}
} }
&.group { &.group {
color : #000000; color : #000000;
background-color: #5050503b; background-color : #5050503B;
&::before { &::before { content : '\f500'; }
content: '\f500';
}
} }
&.meta { &.meta {
color : #000080; color : #000080;
background-color: #0000803b; background-color : #0000803B;
&::before { &::before { content : '\f05a'; }
content: '\f05a';
}
} }
&.system { &.system {
color : #800000; color : #800000;
background-color: #8000003b; background-color : #8000003B;
&::before { &::before { content : '\f518'; }
content: '\f518';
}
} }
} }
&:hover, &:hover,
&:focus-within { &:focus-within {
.links { .links { opacity : 1; }
opacity: 1;
}
} }
.links { .links {
.animate(opacity); .animate(opacity);
@@ -237,83 +209,75 @@
button { button {
.animate(opacity); .animate(opacity);
display : block; display : block;
width : 100%;
margin : 8px 0px; margin : 8px 0px;
font-size : 1.3em; font-size : 1.3em;
color : white; color : white;
text-decoration : unset; text-decoration : unset;
opacity : 0.6; opacity : 0.6;
width: 100%; &:hover { opacity : 1; }
&:hover { i { cursor : pointer; }
opacity: 1;
}
i {
cursor: pointer;
}
} }
} }
.googleDriveIcon { .googleDriveIcon {
height : 18px;
padding : 0px; padding : 0px;
margin : -5px; margin : -5px;
height: 18px;
} }
.homebreweryIcon { .homebreweryIcon {
position : relative; position : relative;
padding: 0px;
top : 5px; top : 5px;
left : -7.5px; left : -7.5px;
height : 18px; height : 18px;
padding : 0px;
} }
} }
.list > .brewItem { .list > .brewItem {
height: 50px;
min-height: unset;
width: 100%;
display : grid; display : grid;
grid-template-columns : 2fr 3fr 1fr; grid-template-columns : 2fr 3fr 1fr;
align-items : center; align-items : center;
color: rgb(2, 2, 2); width : 100%;
background: #efefef; height : 50px;
min-height : unset;
overflow : visible; overflow : visible;
font-size : 12px; font-size : 12px;
color : rgb(2, 2, 2);
background : #EFEFEF;
.text { .text {
min-height: unset;
width: 100%;
padding-inline: 10px;
height: 100%;
display : grid; display : grid;
align-content : center; align-content : center;
width : 100%;
height : 100%;
min-height : unset;
padding-inline : 10px;
h2 { h2 {
text-overflow: ellipsis; align-content : center;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
font-weight: 900;
height : 100%; height : 100%;
min-height : 1.4em; min-height : 1.4em;
align-content: center; overflow : hidden;
text-overflow : ellipsis;
font-size : 20px;
font-weight : 900;
vertical-align : middle; vertical-align : middle;
white-space : nowrap;
} }
.description { .description { display : none; }
display: none;
}
} }
.info { .info {
width: clamp(400px, 100%, 650px);
display : grid; display : grid;
grid-template-areas : 'tags authors views pages update storage'; grid-template-areas : 'tags authors views pages update storage';
justify-content: end; grid-template-columns : 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px;
align-content : space-around; align-content : space-around;
align-items : center; align-items : center;
grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; justify-content : end;
br { width : clamp(400px, 100%, 650px);
display: none; br { display : none; }
}
.brewTags { .brewTags {
display : inline-block; display : inline-block;
grid-area : tags; grid-area : tags;
@@ -321,18 +285,16 @@
} }
.brewAuthors { .brewAuthors {
display : inline-block; display : inline-block;
display : -webkit-box;
grid-area : authors; grid-area : authors;
height: fit-content;
width : 150px; width : 150px;
height : fit-content;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
display: -webkit-box;
-webkit-line-clamp : 3; -webkit-line-clamp : 3;
-webkit-box-orient : vertical; -webkit-box-orient : vertical;
&:has(a:only-of-type) { &:has(a:only-of-type) { width : fit-content; }
width: fit-content;
}
} }
.lastViewed { .lastViewed {
@@ -357,127 +319,111 @@
.brewTags:has(span:nth-of-type(4)) { .brewTags:has(span:nth-of-type(4)) {
position : relative; position : relative;
overflow: hidden;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
overflow : hidden;
span:nth-of-type(n + 2) { span:nth-of-type(n + 2) { display : none; }
display: none;
}
&:hover { &:hover {
overflow: visible;
position : absolute; position : absolute;
top : 0; top : 0;
background: #707070;
height: max-content;
z-index : 100; z-index : 100;
width : min-content; width : min-content;
height : max-content;
padding : 10px; padding : 10px;
overflow : visible;
background : #707070;
span:nth-of-type(n + 4) { span:nth-of-type(n + 4) { display : block; }
display: block;
}
&:after { &::after {
position : absolute; position : absolute;
top : 48px; top : 48px;
right : 0; right : 0;
left: 0;
bottom : 0; bottom : 0;
content: ''; left : 0;
z-index : -1;
display : block; display : block;
height : calc(100% - 48px); height : calc(100% - 48px);
content : '';
background : #707070; background : #707070;
border-inline : 1px solid gold; border-inline : 1px solid gold;
border-bottom : 1px solid gold; border-bottom : 1px solid gold;
border-bottom-left-radius: 5px;
border-bottom-right-radius : 5px; border-bottom-right-radius : 5px;
z-index: -1; border-bottom-left-radius : 5px;
} }
} }
} }
} }
.links { .links {
opacity: 1;
background: none;
position : relative; position : relative;
display : flex; display : flex;
align-items : center;
justify-content : space-evenly; justify-content : space-evenly;
width : 100%; width : 100%;
align-items: center;
height : 100%; height : 100%;
background : none;
opacity : 1;
> a { > a {
opacity : 0.8; opacity : 0.8;
&:hover { &:hover { opacity : 1; }
opacity: 1;
}
} }
.editLink { .editLink { color : @green; }
color: @green; .deleteLink { color : @red; }
}
.deleteLink {
color: @red;
}
.shareLink { .shareLink { color : deepskyblue; }
color: deepskyblue;
}
.downloadLink { .downloadLink { color : coral; }
color: coral;
}
} }
} }
.card > .brewItem { .card > .brewItem {
background-color: grey; position : relative;
background-image: url('@themes/assets/naturalCritLogoBlack.svg');
background-size: 60%;
background-position: center 20%;
background-repeat: no-repeat;
background-blend-mode: soft-light;
width: 300px;
height: 400px;
border: 1px solid;
margin: 10px;
border-radius: 10px;
padding: 10px;
padding-top: 100px;
padding-bottom: 50px;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
justify-content : flex-end; justify-content : flex-end;
isolation: isolate; width : 300px;
position: relative; height : 400px;
color: white; padding : 10px;
padding-top : 100px;
padding-bottom : 50px;
margin : 10px;
font-size : 13px; font-size : 13px;
color : white;
background-color : grey;
background-image : url('@themes/assets/naturalCritLogoBlack.svg');
background-repeat : no-repeat;
background-position : center 20%;
background-size : 60%;
border : 1px solid;
border-radius : 10px;
background-blend-mode : soft-light;
isolation : isolate;
&::before { &::before {
display: block;
content: '';
height: 50%;
position : absolute; position : absolute;
right : 0;
bottom : 0; bottom : 0;
left : 0; left : 0;
right: 0;
background-image: linear-gradient(0deg, #777f 0, #7770 90%);
z-index : -1; z-index : -1;
display : block;
height : 50%;
content : '';
background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%);
transition : height 0.2s; transition : height 0.2s;
} }
&:hover { &:hover {
&::before { &::before {
height : 100%; height : 100%;
background-image: linear-gradient(0deg, #777f 0, #777f 42%, #7770 55%); background-image : linear-gradient(0deg, #777777FF 0, #777777FF 42%, #77777700 55%);
}
.text .description {
height: fit-content;
} }
.text .description { height : fit-content; }
} }
.thumbnail { .thumbnail {
@@ -496,8 +442,8 @@
filter : drop-shadow(0 1px 4px black); filter : drop-shadow(0 1px 4px black);
h2 { h2 {
font-weight: 900;
font-size : 1.2em; font-size : 1.2em;
font-weight : 900;
} }
.description { .description {
@@ -508,50 +454,35 @@
} }
.info { .info {
filter: drop-shadow(0 1px 2px black);
height: 130px;
display : grid; display : grid;
grid-template-areas: grid-template-areas : 'tags tags tags'
'tags tags tags'
'authors authors authors' 'authors authors authors'
'pages views views' 'pages views views'
'update update storage'; 'update update storage';
height : 130px;
filter : drop-shadow(0 1px 2px black);
.brewTags { .brewTags {
color: black;
grid-area : tags; grid-area : tags;
color : black;
i { i { color : white; }
color: white; > span { background : hsl(from currentColor h 20% 80%); }
}
> span {
background: hsl(from currentColor h 20% 80%);
}
}
.brewAuthors {
grid-area: authors;
}
.brewPages {
grid-area: pages;
}
.lastViewed {
grid-area: views;
}
.lastUpdated {
grid-area: update;
}
.storage {
grid-area: storage;
} }
.brewAuthors { grid-area : authors; }
.brewPages { grid-area : pages; }
.lastViewed { grid-area : views; }
.lastUpdated { grid-area : update; }
.storage { grid-area : storage; }
} }
.links { .links {
position : absolute; position : absolute;
right : 0;
bottom : 0; bottom : 0;
left : 0; left : 0;
right: 0;
height: 40px;
display : flex; display : flex;
height : 40px;
} }
} }
@@ -561,23 +492,17 @@
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 2.5fr 1fr; grid-template-columns : 3fr 2.5fr 1fr;
.info { .info {
width: clamp(200px, 100%, 650px);
grid-template-columns: 2fr 1fr 20px;
grid-template-areas : 'tags update storage'; grid-template-areas : 'tags update storage';
grid-template-columns : 2fr 1fr 20px;
width : clamp(200px, 100%, 650px);
} }
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors { .brewAuthors { display : none; }
display: none;
}
}
.brewItem {
transition: height 0.2s;
}
.detailsOpen {
height: 70px;
} }
.brewItem { transition : height 0.2s; }
.detailsOpen { height : 70px; }
} }
} }
} }
@@ -588,36 +513,33 @@
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 2fr 1fr; grid-template-columns : 3fr 2fr 1fr;
.info { .info {
width: clamp(200px, 100%, 650px);
grid-template-columns: 1fr 20px;
grid-template-areas : 'tags storage'; grid-template-areas : 'tags storage';
grid-template-columns : 1fr 20px;
width : clamp(200px, 100%, 650px);
} }
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated { .lastUpdated { display : none; }
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-columns : 3fr 2fr 1fr; grid-template-columns : 3fr 2fr 1fr;
.info { .info {
width: clamp(200px, 100%, 650px);
display : grid; display : grid;
grid-template-columns: 2fr 1fr 1fr; grid-template-areas : 'tags views pages'
grid-template-rows: 1fr 1fr;
grid-template-areas:
'tags views pages'
'authors update storage'; 'authors update storage';
grid-template-rows : 1fr 1fr;
grid-template-columns : 2fr 1fr 1fr;
width : clamp(200px, 100%, 650px);
} }
.lastUpdated { .lastUpdated {
width : 100px; width : 100px;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
white-space: nowrap;
word-break : break-all; word-break : break-all;
white-space : nowrap;
} }
} }
} }
@@ -629,61 +551,54 @@
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
.info { .info {
width: clamp(200px, 100%, 650px);
grid-template-columns: 1fr;
grid-template-areas : 'tags'; grid-template-areas : 'tags';
grid-template-columns : 1fr;
width : clamp(200px, 100%, 650px);
} }
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated, .lastUpdated,
.storage { .storage { display : none; }
display: none;
}
} }
.brewItem { .brewItem { transition : height 0.2s; }
transition: height 0.2s;
}
.detailsOpen { .detailsOpen {
height: 100px;
padding: 5px;
display : grid; display : grid;
grid-template-columns : 3fr 3fr 30px; grid-template-columns : 3fr 3fr 30px;
height : 100px;
padding : 5px;
.text { .text {
height : 100%; height : 100%;
padding : 0; padding : 0;
h2 { h2 {
display : -webkit-box;
height : fit-content; height : fit-content;
white-space: wrap;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
display: -webkit-box;
-webkit-line-clamp : 3; -webkit-line-clamp : 3;
white-space : wrap;
-webkit-box-orient : vertical; -webkit-box-orient : vertical;
} }
} }
.info { .info {
height: 100%;
width: 100%;
display : grid; display : grid;
grid-template-columns: 2fr 1fr 1fr 20px; grid-template-areas : 'tags pages views views'
grid-template-areas:
'tags pages views views'
'authors update update storage'; 'authors update update storage';
grid-template-columns : 2fr 1fr 1fr 20px;
width : 100%;
height : 100%;
} }
.links { .links {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
gap : 5px; gap : 5px;
a, a,
button { button { margin : 0; }
margin: 0;
}
} }
} }
} }
@@ -695,9 +610,7 @@
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 1fr; grid-template-columns : 3fr 1fr;
.info { .info { display : none; }
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-rows : 1fr 2fr; grid-template-rows : 1fr 2fr;
@@ -708,8 +621,8 @@
width : 100px; width : 100px;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
white-space: nowrap;
word-break : break-all; word-break : break-all;
white-space : nowrap;
} }
} }
} }
client/homebrew/pages/basePages/listPage/listPage.less
+51 -65
View File
@@ -20,19 +20,20 @@
.listPage { .listPage {
.content { .content {
z-index : 1; z-index : 1;
padding: clamp(20px, 5vh, 200px) 10vw; padding-block : clamp(20px, 5vh, 200px);
padding-inline : clamp(20px, 20vw, 200px);
.noBrews { .noBrews {
margin : 10px 0px; margin : 10px 0px;
font-size : 1.3em; font-size : 1.3em;
font-style : italic; font-style : italic;
} }
.brewCollection { .brewCollection {
width: fit-content;
h1 { h1 {
width : fit-content;
margin-bottom : 20px; margin-bottom : 20px;
font-size : 25px; font-size : 25px;
color: #dddddd; color : #DDDDDD;
&.active::before, &.active::before,
&.inactive::before { &.inactive::before {
@@ -43,24 +44,20 @@
} }
&.active { &.active {
color : white; color : white;
&::before { content : '\f107'; }
} }
&.active::before { &.inactive::before { content : '\f105'; }
content: '\f107';
}
&.inactive::before {
content: '\f105';
}
}
h1:hover {
cursor: pointer;
} }
h1:hover { cursor : pointer; }
.brewGroup { .brewGroup {
margin-bottom : 20px;
&.grid { &.grid {
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
justify-content: center;
gap : 20px; gap : 20px;
justify-content : center;
width : fit-content;
min-width : 200px; min-width : 200px;
} }
@@ -70,13 +67,22 @@
gap : 2px; gap : 2px;
} }
&.card { &.card {
display: flex; --columns : 4;
flex-wrap: wrap; display : grid;
grid-template-columns : repeat(var(--columns), 1fr);
column-gap : 40px; column-gap : 40px;
justify-content: center; justify-items : center;
h1 { @media screen and (max-width : 1700px) {--columns : 3;}
position: absolute; @media screen and (max-width : 1400px) {--columns : 2;}
@media screen and (max-width : 900px) {--columns : 1;}
h1 { position : absolute; }
&:not(:has(.brewItem:last-child:nth-child(3n))) {
.brewItem:last-child {
margin-right : auto;
background : green;
}
} }
} }
} }
@@ -85,25 +91,25 @@
.listPageNav { .listPageNav {
position : relative; position : relative;
width: 100%;
height: fit-content;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
row-gap : 10px;
column-gap : 20px;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
background: #555; width : 100%;
column-gap: 20px; height : fit-content;
row-gap: 10px;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
color : white; color : white;
row-rule: 1px solid #666; background : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
row-rule : 1px solid #666666;
> div { > div {
width : fit-content; width : fit-content;
padding-inline: 10px;
height : 30px; height : 30px;
padding-inline : 10px;
} }
.sort-container { .sort-container {
@@ -127,24 +133,20 @@
align-items : center; align-items : center;
height : 100%; height : 100%;
padding : 0 8px; padding : 0 8px;
color: #cccccc; color : #CCCCCC;
&:hover { &:hover { background-color : #444444; }
background-color: #444444;
}
&.active { &.active {
font-weight : bold; font-weight : bold;
color: #dddddd; color : #DDDDDD;
background-color : #333333; background-color : #333333;
button { button {
height : 100%; height : 100%;
font-weight : 800; font-weight : 800;
color : white; color : white;
& + .sortDir { & + .sortDir { padding-left : 5px; }
padding-left: 5px;
}
} }
} }
} }
@@ -153,7 +155,7 @@
padding : 0; padding : 0;
font-size : 11px; font-size : 11px;
font-weight : normal; font-weight : normal;
color: #cccccc; color : #CCCCCC;
text-transform : uppercase; text-transform : uppercase;
background-color : transparent; background-color : transparent;
} }
@@ -164,9 +166,7 @@
place-items : center; place-items : center;
font-size : 11px; font-size : 11px;
background-color : transparent !important; background-color : transparent !important;
i { i { padding-right : 5px; }
padding-right: 5px;
}
} }
.tags-container { .tags-container {
display : flex; display : flex;
@@ -181,7 +181,7 @@
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
font-size : 11px; font-size : 11px;
font-weight : bold; font-weight : bold;
color: #dfdfdf; color : #DFDFDF;
cursor : pointer; cursor : pointer;
border : 1px solid; border : 1px solid;
border-radius : 3px; border-radius : 3px;
@@ -198,31 +198,23 @@
} }
&.type { &.type {
background-color : #008000; background-color : #008000;
border-color: #00a000; border-color : #00A000;
&::before { &::before { content : '\f0ad'; }
content: '\f0ad';
}
} }
&.group { &.group {
background-color : #505050; background-color : #505050;
border-color : #000000; border-color : #000000;
&::before { &::before { content : '\f500'; }
content: '\f500';
}
} }
&.meta { &.meta {
background-color : #000080; background-color : #000080;
border-color: #0000a0; border-color : #0000A0;
&::before { &::before { content : '\f05a'; }
content: '\f05a';
}
} }
&.system { &.system {
background-color : #800000; background-color : #800000;
border-color: #a00000; border-color : #A00000;
&::before { &::before { content : '\f518'; }
content: '\f518';
}
} }
} }
} }
@@ -236,17 +228,11 @@
justify-content : center; justify-content : center;
text-align : center; text-align : center;
input[type='radio'] { input[type='radio'] { display : none; }
display: none;
}
i { i { transition : color 0.2s; }
transition: color 0.2s;
}
input:checked + i { input:checked + i { color : @blue; }
color: @blue;
}
} }
} }
} }