@background: @ini_background; /* was #b0b0b0 */ @contentblock: @ini_background_alt; /* was #b8b8b8 */ @menubackground: @ini_menuback1; /* was #454545 */ @menubackground2: @ini_menuback2; /* was #a9a9a9 then #484848 beforehand */ @menuactivebackground2: #ff9933; /* was #484848 */ @hamburgercolour: #222222; @textcolour: @ini_text; /* was #242424 */ @breadcrumbrootback: @ini_breadcrumbs_background; /* was #cccccc; */ @noticebackground: #c2c2c2; /* main colours */ @sidebargradientleft: @ini_sidebargradientcolour_left; /* was #a7a7a7 */ @sidebargradientright: @ini_sidebargradientcolour_right; /* was #b3b3b3 */ /* sidebar gradient */ @highlightcolour: #ff9933; @hyperlinkcolour: @ini_link; /* was #663300; */ @noticeborderandtextANDtableheader: #3c3c3c; /* accent colours */ @formbackground: #c0c0c0; @formtextcolour: #404040; @formbordercolour: @ini_border; /* was #ffffff;*/ /* forms */ @basketbuttonbackground: #666666; @totalsbackground: #808080; @totalstextcolour: #d9d9d9; /* basket */ @breadcrumbcolouraction: @ini_breadcrumbs_steps_darken_or_lighten; /* was lighten */ @headerfooterbackground: @ini_header_footer_background_light_or_dark; /* was light */ @headerfooterbackgroundaltname: @ini_header_footer_background_white_or_black; /* was white */ /* actions */ // for images, replace _white with something else .notice{ background-color: @noticebackground; .allnotices; } .rednotice{ background-color: #DD9898; .allnotices; } .ambernotice{ background-color: #DDC498; .allnotices; } .greennotice{ background-color: #98DD98; .allnotices; } /*html, body { height: 100%; }*/ body{ margin: 0px; padding: 0px; font-family: Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: @textcolour; background-color: @background; } img { border: 0px; } .containerblocks{ height: 100%; width: 100%;} a:link, a:active, a:visited { color: @hyperlinkcolour; text-decoration: none; } a:hover { color: @hyperlinkcolour; text-decoration: underline; } .headerbar{ width: 100%; max-width: 100%; height: 87px; background-image: url('images/headerbar_@{headerfooterbackgroundaltname}.png'); } .sitename{ padding-top: 1em; padding-left: 1em; display: inline-block; vertical-align: middle; height: 100%; font-size: 1.85em; font-weight: normal; } .middlebar{ width: 100%; max-width: 100%; display: flex; /* flex only works for 100% layouts */ min-height: 82%; /*overflow: auto;*/ /* background-color: @highlightcolour; */ } .footerbar{ clear: both; width: 100%; max-width: 100%; min-height: 42px; background-image: url('images/footerbar_@{headerfooterbackgroundaltname}.png'); /* position: absolute; bottom: 0px; */ padding: 1em 1.15em; box-sizing: border-box; } /* ryan fait sticky footer https://gist.github.com/XtofK/5317209 https://codepen.io/griffininsight/pen/OMexrW */ html, body { height: 100%; } /* make the 2 columns of .wrapper expand to fill it */ .wrapper { height: 100%; } .wrapper{ min-height: 100%; /* 2011 rule */ margin: 0 auto -42px; /* min-height: calc(100% - 42px); /* scrapped rule */ /* the bottom margin is the negative value of the footer's height */ } .footerbar, .push { border: 0px solid #ff00ff; /* height: 42px; /* old code */ min-height: 42px /* new */ /* '.push' must be the same height as 'footer' */ } /* ----------- end ----------- */ .menublock{ width: @ini_sidebar_width; min-height: 100%; /*background-image: url('images/menublock_black.png');*/ background-image: linear-gradient(90deg, @sidebargradientleft 0%, @sidebargradientright 100%); background-size: 20px; background-repeat: repeat-y; background-color: @sidebargradientleft; background-position: right; float: left; /* position: relative; right: 0px; */ } .clear {clear: both;} .allcontentblocks{ padding: 12px; float: left; background-color: @background; } @media screen and (max-width: 1149px) { .contentblock { .allcontentblocks; width: 60%; } } @media screen and (min-width: 1150px) { .contentblock { .allcontentblocks; width: 70%; } } @media screen and (min-width: 1250px) { .contentblock { .allcontentblocks; width: 80%;} } .thumbshere { position: relative; left: 16px; margin-right: 76px; letter-spacing: 0.01em; line-height: 1.3em;} .breadcrumbshere { position: relative; bottom: 8px; right: 12px; } .menuhere { position: relative; /*top: 16px;*/ left: 12px; padding: 16px 0px; } .thumblisting{ float: left; background-color: @contentblock; padding: 16px 8px 8px 8px; display: inline-block; margin: 12px; text-align: center; color: @textcolour; min-width: 240px; min-height: 248px; } .thumblisting img { margin-bottom: 8px; max-width: 200px; max-height: 200px;} .basket{ padding: 8px; background-color: @basketbuttonbackground; width: 200px; margin-left: auto; margin-right: auto; margin-top: 32px; color: @textcolour; } .basket:hover{ background-color: @highlightcolour; cursor: pointer; } .nobasket{ padding: 8px; border-top: 3px solid @basketbuttonbackground; width: 200px; margin-left: auto; margin-right: auto; margin-top: 32px; color: @textcolour; } a.nostyle:link, a.nostyle:active, a.nostyle:visited { color: @textcolour !important; text-decoration: none; } a.nostyle:hover { color: @textcolour !important; text-decoration: underline; } .allnotices{ text-align: center; /*color: @noticeborderandtextANDtableheader;*/ color: @textcolour; font-weight: bold; width: 97%; padding: 8px; border-top: solid @noticeborderandtextANDtableheader 8px; margin-top: 32px; clear: both; } .allheadlines{ font-family: FrugalSansRegular, Verdana, Georgia; /* background-color: #fff; */ /* color: #A4341D; */ font-style: italic; text-decoration: none; word-spacing: normal; text-align: left; letter-spacing: 0; line-height: 1.2em; } font.headline{ font-size: 2.5em; .allheadlines; } h1, font.shoulderline{ font-size: 1.8em; .allheadlines; } div.statcol{ /* ie inline-block: fix http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ http://www.quirksmode.org/css/display.html */ float: left; padding-left: 8px; padding-right: 8px; padding-top: 8px; font-size: 14px; border: solid #000000 0px; vertical-align: middle; } div.statrow{ /* ie inline-block: fix http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ http://www.quirksmode.org/css/display.html */ display: block; padding-left: 8px; padding-right: 8px; padding-top: 8px; font-size: 14px; border: solid #000000 0px; vertical-align: middle; min-width: 100px; clear: both; } /* ----------------- forms ----------------- */ .allbuttons{ font-family: Verdana, Arial, Helvetica, sans-serif; background-color: @formbackground; color: @formtextcolour; margin-right: 6px; border: 3px ridge @formbordercolour; } .bigbutton { font-size: 24px; .allbuttons; } .mediumbutton { font-size: 16px; .allbuttons; } .minibutton { font-size: 12px; .allbuttons; } .alltexts, button{ font-family: Verdana, Arial, Helvetica, sans-serif; margin-right: 6px; background-color: @formbackground; border: 1px solid @formtextcolour; color: @formtextcolour; } .headerbar span, .headerbar p { margin: 0px 0px; } p { margin: 0.85em 0px; } .bigtext { width: 250px; font-size: 24px; .alltexts; } .mediumtext { font-size: 16px; .alltexts; } .minitext { font-size: 12px; .alltexts; } .mediumblock { .alltexts; .mediumtext; width: 75px; color: @formbordercolour; margin-left: auto; margin-right: auto; } .editable { .mediumtext } select, input, textarea { .alltexts; .mediumtext; } button{ .allbuttons; .mediumbutton; } /* ----------------- tables ----------------- */ th { padding: 8px; background-color: @noticeborderandtextANDtableheader; margin: 8px; text-align: left; } .totals{ background-color: @totalsbackground; color: @totalstextcolour; font-weight: bold; } td { padding: 8px; margin: 8px; text-align: left; vertical-align: middle; } /*********** Breadcrumbs http://css-tricks.com/triangle-breadcrumbs/ */ .breadcrumb { list-style: none; overflow: hidden; font-size: 0.8em; } .breadcrumb li { float: left; } .breadcrumb li a { color: @textcolour; text-decoration: none; padding: 10px 0 10px 45px; /*background: #323232; */ /* fallback color */ background-color: @breadcrumbrootback; position: relative; display: block; float: left; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid @breadcrumbrootback; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; background-color: @breadcrumbrootback; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } // https://stackoverflow.com/q/66320678/337306 /* .breadcrumb when (@breadcrumbcolouraction = "darken") { @darkerbread(); } .breadcrumb when (@breadcrumbcolouraction = "lighten") { @lighterbread(); } */ .breadcrumb { .myLightQuery(lighten); } // match .breadcrumb { .myDarkQuery(darken); } // match .myLightQuery(@breadcrumbcolouraction) when (@breadcrumbcolouraction = lighten) { // background-color: red; bdi:nth-child(2) a { background-color: lighten(@breadcrumbrootback, 5%); } bdi:nth-child(2) a:after { border-left-color: lighten(@breadcrumbrootback, 5%); } bdi:nth-child(3) a { background-color: lighten(@breadcrumbrootback, 20%); } bdi:nth-child(3) a:after { border-left-color: lighten(@breadcrumbrootback, 20%); } bdi:nth-child(4) a { background-color: lighten(@breadcrumbrootback, 30%); } bdi:nth-child(4) a:after { border-left-color: lighten(@breadcrumbrootback, 30%); } bdi:nth-child(5) a { background-color: lighten(@breadcrumbrootback, 40%); } bdi:nth-child(5) a:after { border-left-color: lighten(@breadcrumbrootback, 40%); } } .myDarkQuery(@breadcrumbcolouraction) when (@breadcrumbcolouraction = darken) { // background-color: red; bdi:nth-child(2) a { background-color: darken(@breadcrumbrootback, 5%); } bdi:nth-child(2) a:after { border-left-color: darken(@breadcrumbrootback, 5%); } bdi:nth-child(3) a { background-color: darken(@breadcrumbrootback, 20%); } bdi:nth-child(3) a:after { border-left-color: darken(@breadcrumbrootback, 20%); } bdi:nth-child(4) a { background-color: darken(@breadcrumbrootback, 30%); } bdi:nth-child(4) a:after { border-left-color: darken(@breadcrumbrootback, 30%); } bdi:nth-child(5) a { background-color: darken(@breadcrumbrootback, 40%); } bdi:nth-child(5) a:after { border-left-color: darken(@breadcrumbrootback, 40%); } } .breadcrumb li:last-child a { /* background: transparent !important; */ /* text-decoration: underline; */ /* color: black; */ pointer-events: none; cursor: default; } .breadcrumb li:last-child a:after { /* border: transparent !important; */ } .breadcrumb li a:hover { background-color: @highlightcolour; } .breadcrumb li a:hover:after { border-left-color: @highlightcolour !important; } /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #ddblueblockmenu{ border: 0px solid black; border-bottom-width: 0; width: 185px; font-size: 0.8em; } #ddblueblockmenu ul{ margin: 0; padding: 0px; list-style-type: none; } #ddblueblockmenu li a{ display: block; padding: 6px 0px; padding-left: 9px; width: 169px; /*185px minus all left/right paddings and margins*/ text-decoration: none; color: @textcolour; xbackground-color: @basketbuttonbackground; border-bottom: 0px solid @background; border-left: 0px solid @menubackground; } * html #ddblueblockmenu li a{ /*IE only */ width: 187px; /*IE 5*/ width: 169px; /*185px minus all left/right paddings and margins*/ } #ddblueblockmenu li a:hover { background-color: @highlightcolour; border-left-color: @highlightcolour; } #ddblueblockmenu li .active { background-color: @highlightcolour; border-left-color: @highlightcolour; cursor: default; } #ddblueblockmenu div.menutitle{ color: @textcolour; border-bottom: 3px solid @background; padding: 1px 0; padding-left: 5px; /* background-color: #3c3c3c; */ padding-top: 12px; font: bold 90%; } //IE8 hacks #IEroot .breadcrumbshere { padding-top: 24px; margin-left: 24px;} #IEroot .clear { clear: none;} .IErightFix { width: 70%; position: absolute; top: 0px; left: 278px; } #IEroot .IErightFix { width: 60%; left: 478px; } /* ----------------- drawer ----------------- */ .desktop { display: block; } .drawer-nav { background-color: @background !important; } .drawer-hamburger-icon::after,.drawer-hamburger-icon::before { background-color: @hamburgercolour !important; } .drawer-open .drawer-hamburger-icon { background-color: transparent !important; } .drawer-menu-item:hover { color: @highlightcolour !important; } /* ----------------- listamatic menu ----------------- */ #navcontainer ul { padding-bottom: 6px; padding-top: 5px; padding-left: 100px; margin-top: 0; /* cancels gap caused by top padding in Opera 7.54 */ margin-left: 0px; margin-right: 2.15em; /*background-color: #EE5D3F;*/ color: white; max-width: 100%; font-family: Tahoma,Helvetica,sans-serif; line-height: 18px; /* fixes Firefox 0.9.3 */ position: relative; top: 56px; } #navcontainer ul li { display: inline; padding-left: 0; padding-right: 0; padding-bottom: 5px; text-align: center; /* matches link padding except for left and right */ padding-top: 5px; } #navcontainer ul li a { padding-left: 20px; padding-right: 20px; padding-bottom: 5px; padding-top: 5px; color: white; background-color: @menubackground2; text-decoration: none; } #navcontainer #current { padding-left: 20px; padding-right: 20px; padding-bottom: 5px; padding-top: 5px; color: white; background-color: @menuactivebackground2; text-decoration: none; } #navcontainer ul li a:hover { background-color: @menuactivebackground2; color: white; }