.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 { padding-right : 0.5em; font-family : 'Font Awesome 6 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 { 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; height : 100%; padding : 0 8px; color : #CCCCCC; &:hover { background-color : #444444; } &.active { font-weight : bold; color : #DDDDDD; background-color : #333333; button { height : 100%; font-weight : 800; color : white; & + .sortDir { padding-left : 5px; } } } } .filter-option { margin-left : 20px; font-size : 11px; 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; } } .tags-container { display : flex; 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; &::before { margin-right : 3px; font-family : 'Font Awesome 6 Free'; font-size : 12px; } &::after { margin-left : 3px; font-family : 'Font Awesome 6 Free'; font-size : 12px; content : '\f00d'; } &.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'; } } } } }