Arvutidark by treierxyz

/* ==UserStyle==
@name           Arvutidark
@namespace      gitlab.com/treierxyz/arvutidark
@version        1.1.2
@description    Stylus UserCSS/LESS tume stiil Arvutitark.ee (2016-2022) veebilehele
@author         treierxyz
@preprocessor   less
@license        MIT

@var color backgroundColor "Background color" #282828
@var color textColor "Text color" #e6e6e6
@var color checkeredColor "Checkered color" #303030
@var color dominantColor "Dominant color" #ea23c1
@var color cardColor "Card color" #333333
@var color darkbuttonColor "Dark button color" #4d4d4d
@var checkbox disableTopSliders "Disable top sliders" 1
@var checkbox disableFooterSlider "Disable footer slider" 1
@var checkbox disableZendesk "Disable Zendesk" 1
@var checkbox disableSocials "Disable social buttons" 1
==/UserStyle== */
@darkenedCardColor:	darken(@cardColor, 10%);
@subtextColor:		darken(@textColor, 12%);
@preheaderColor:	darken(@backgroundColor, 3%);
@borderColor:		lighten(@cardColor, 6%);
@-moz-document regexp("https://kodutark\\.ee.*") {
	
    body {
        background: @backgroundColor;
        color: @textColor;
    }
    
    a {
        color: @dominantColor;
        &:hover {
            color: @textColor;
        }
    }

    .body {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: @textColor;
        }
    }

    // Pre-header
    .preheader {
        background-color: @preheaderColor;
    }

    .preheader .top-bar-section ul li > a {
        color: @textColor;
		&:hover {
			color: @dominantColor !important;
		}
    }
	
	.preheader .top-bar-section ul {
		li:hover > a, li.active > a {
			color: @dominantColor !important;
		}
	}
	
	.preheader .top-bar-section ul {
		// ArvutitarkTV ikoon
		li.tv a {
			height: 2.75rem !important;
			mask-image: url("/img/tv.png");
			mask-size: auto 1.25rem;
			mask-repeat: no-repeat;
			mask-position: 50%;
			-webkit-mask-image: url("/img/tv.png");
			-webkit-mask-size: auto 1.25rem;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: 50%;
			background-color: @dominantColor;
			img {
				visibility: hidden;
			}
			&:hover, &:active {
				background-color: desaturate(@dominantColor, 100%);
			}
		}
		// Facebook ikoon
		li.fb a {
			color: #3c6ac8; 
			&:hover, &:active {
				color: desaturate(@dominantColor, 100%) !important;
			}
		}
	}
	
	.preheader .top-bar-section ul.right li.language .languagedropdown h2 {
		color: @dominantColor;
	}
	
	.preheader .top-bar-section ul.right li:not(:last-child):not(.christmas) > a::after {
		color: @textColor;
	}
	
	.preheader .top-bar-section ul.right li.active > a {
		background-color: lighten(@cardColor, 4%) !important;
		&:hover {
			background-color: lighten(@cardColor, 8%) !important;
		}
	}
	
	.preheader .top-bar-section ul.right li.language ul {
		li:hover a:not(.button) {
			background: lighten(@cardColor, 8%);
			color: @textColor !important;
		}
		li.active a:not(.button) {
			color: @textColor !important;
			font-weight: 600 !important;
		}
		li a:not(.button) {
			color: darken(@textColor, 10%) !important;
			font-weight: 300 !important;
		}
	}
	
	// Disable social buttons
	.preheader .top-bar-section when (@disableSocials = 1) {
		display: flex;
		justify-content: center;
		ul.left {
			display: none;
		}
	}
	
	// Disable Zendesk
	div.zopim when (@disableZendesk = 1) {
		display: none !important;
	}
	
	// Disable top sliders
	ul.rslides.topbanner.slick-initialized.slick-slider when (@disableTopSliders = 1) {
		display: none !important;
	}
	
	section.bannersection when (@disableFooterSlider = 1) {
		display: none !important;
	}
    
    // Color header
    section.header {
        background-image: url("/img/larger.png");
        background-blend-mode: multiply;
        background-color: @dominantColor !important;
    }
    
    // Search
    .search input[type="text"] {
		&::placeholder {
			 color: @textColor;
		}
        background-color: @backgroundColor !important;
        border-bottom-color: lighten(@backgroundColor, 10%);
        &:focus, &:hover {border-bottom-color: lighten(@backgroundColor, 20%);}
        &:focus:hover {border-bottom-color: lighten(@backgroundColor, 24%);}
    }
    
    // Products menu
    .postheader {
        background-color: @checkeredColor;
		background-blend-mode: overlay;
    }

    .productsmenucontainer .productsmenu li > a {
        color: @textColor;
    }

    .productsmenucontainer .productsmenu li:hover > a,
    .productsmenucontainer .productsmenu li.active > a {
        color: @dominantColor;
    }

    .f-dropdown.productsmenu-dropdown > li:hover > a,
    .f-dropdown.productsmenu-dropdown > li.active > a {
        background: @dominantColor;
        color: @textColor;
    }

    .products-grid,
    .products-grid2 {
        li {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p {
                color: @textColor;
            }
        }
    }

    .f-dropdown,
    .f-dropdown.content {
        background: @cardColor;
        border: solid 1px @borderColor;
    }

    .f-dropdown.productsmenu-dropdown > li > a {
        color: @textColor;
    }

    .f-dropdown.productsmenu-dropdown > li ul li > a {
        color: @subtextColor;
    }
	

    .f-dropdown.productsmenu-dropdown > li ul li:hover > a,
    .f-dropdown.productsmenu-dropdown > li ul li.active > a {
        background-color: @darkenedCardColor;
    }

    .f-dropdown.productsmenu-dropdown > li ul li > a:hover {
        color: @dominantColor;
    } 
    
    // Sliders
    .slick-prev::before,
    .slick-next::before {
        color: @dominantColor;
		transition: color 300ms ease-out;
    }

    .slick-prev,
    .slick-next {
        &:hover,
        &:focus {
            background-color: @dominantColor;
        }
    }
    
    // Cards
    .card {
        background: @cardColor;
    } 
    
    // Footer stuff
    section.bannersection {
        background: @cardColor;
    } 
	
    footer > div:first-child {
        color: @textColor;
        background-color: lighten(@cardColor, 2%) !important;
		h5 {
			color: @textColor;
			font-weight: 400;
		}
		a {
			color: @dominantColor;
			&:hover {
				color: lighten(@dominantColor,10%);
			}
		}
		// Disable footer slider
		& when (@disableFooterSlider = 1) {
			background-color: @cardColor !important;
		}
    }
	
	footer .subfooter {
        background-color: @checkeredColor;
		background-blend-mode: overlay;
    }
	
    // Add to cart
    button.expand,
    .button.expand {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
	
	.products-grid, .products-grid2, .products-grid.products-list {
		li .card .buttoncontainer {
			.button, button{
				background: lighten(@cardColor, 8%) !important;
        		color: @textColor !important;
				&:hover {
					background-color: lighten(@cardColor, 16%) !important;
				}
			}
		}
	}
    
    // Item status
    .pricecontainer > span:nth-child(3) {
        color: @subtextColor;
    } 
    
    // Item description
    ul li.item a {
        color: @subtextColor !important;
    } 
    
    // Toodet leitud tekst
    div.row > div.large-12.medium-12.columns.content > div.row > div.large-9.medium-12.small-12.columns.content {
        color: @textColor; 
    } 
    
    // Otsingu filtrid
    #search-filters {
        background: @cardColor;
    }

    #search-filters header {
        background-color: @checkeredColor;
		background-blend-mode: overlay;
    }

    #search-filters header h3,
    #search-filters header h4,
    #search-filters header h5 {
        color: @dominantColor;
    }

    #search-filters label {
        color: @textColor;
    }

    #search-filters header::after {
        color: @dominantColor;
    } 
    
    // Otsingu kategooriad
    .card.sidebar {
        overflow: auto;
        border-radius: 5px !important;
    }
	.card header {
		background-color: @checkeredColor !important;
		background-blend-mode: overlay;
	}
	
	.card .padding {
		padding-top: 0.75em;
	}
	
    .card.sidebar h4 {
        color: @dominantColor;
    }

    .side-nav {
        background: @cardColor;
    }

    .card.sidebar > ul li > a {
        color: @subtextColor;
        font-weight: 400;
    }

    .card.sidebar header::after {
        color: @dominantColor;
    }

    .side-nav li a:not(.button) {
        &:hover,
        &:focus {
            background: @darkenedCardColor; 
            color: @dominantColor; 
        }
    }
	.side-nav li.active > a:first-child:not(.button) {
		color: @subtextColor;
		&:hover,
		&:focus {
			color: @dominantColor;
		}
	}
	
	.side-nav.side-nav-sub li.active > a {
		&::before{
			color: @subtextColor;
		}
	}
	.side-nav li.active a {
		&::before{
			color: @subtextColor;
			top: auto;
		}
		&:hover::before,
		&:focus::before {	
			color: @dominantColor;
		}
	}
	.side-nav li.active:hover {
		color: @subtextColor;
	}
	
	.side-nav li a:not(.button):active {
    	color: @textColor;
	}
    
    // Hinna slider
    .noUi-connect {
        background: @dominantColor;
    }

    .noUi-background {
        background: @backgroundColor; 
        box-shadow: none;
    }

    .noUi-target {
        border: none; 
        box-shadow: none;
    }

    .noUi-pips {
        color: @textColor;
    }

    .noUi-marker {
        background: @subtextColor;
    }

    .noUi-marker-large,
    .noUi-marker-sub {
        background: @textColor;
    }

    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    input[type="color"],
    textarea,
    select {
        background-color: @cardColor;
        border-color: lighten(@cardColor, 10%);
        color: @textColor !important;
		&:focus {
            background-color: lighten(@ca...