theme.css

/*  
    Copyright 2014 gokoururi
    This work is free. You can redistribute it and/or modify it under the
    terms of the Do What The Fuck You Want To Public License, Version 2,
    as published by Sam Hocevar. See the COPYING file for more details.
*/

:root {
    /* Colors */
    --PBlack: #000;
    --PBlackT20: #000000D0;
    --White: #FFF;
    --GreyLight: lightgrey;
    --GreyLight2: #cccccc;
    --Grey: #646464;
    --GreyDark: #373B41;
    --GreyDark2: #1D1F21;
    --Purple: #3c3a5c;
    --PurpleLight : #b9b6d9;
    --Pink: #d67b96;
    --PinkDark: #70293b;
    --GreenDark: #43644a;
    --Green: #67e667;
    --Green2: #269926;
    --GreenLight1: #729a64;
    --GreenLight2: #91b476;
    --BlueLight: #81A2BE;
    --Transparent: transparent;

    /* Items */
    /* Global */ 
    --BaseBackground: var(--PBlack);
    /* Body */

    /* Main */
    --MainBorder: var(--GreyDark);
    --MainBackground: var(--PBlackT20);
    
    /* Text */
    --TextHighlight : var(--Pink);
    --TextMain: var(--White);
    
    /* Search */
    --SearchFocus: var(--Grey);
    --Search: var(--Transparent);
    --SearchBorder: var(--GreyLight);
    
    /* Button */
    /* General */
    --Button: var(--BlueLight);
    --Button_Border: var(--GreyDark);
    --Button_Background: var(--GreyDark2);
    --Button_Hover: var(--Pink);
    --Button_Background_Hover: var(--PinkDark);
    --Button_Border_Left: var(--GreyDark);
    --Button_Dropdown: var(--PinkDark);
    --Button_Dropdown_Content: var(--Pink);
    /* 1 */
    --Button1: var(--GreenDark);
    --Button1_Background: var(--GreenLight1);
    --Button1_Border: var(--GreenLight2);
    --Button1_Hover: var(--Green2);
    --Button1_Background_Hover: var(--Green);
    --Button1_Border_Hover: var(--Green);
    

    /* Columns */
    /* General */
    --Column_Border: var(--GreyDark);
    --Column_Highlight_Shadow_Size: 50px;
    --Column_List_Title: var(--GreyLight2);
    --Column_List_Element: var(--BlueLight);
    --Column_List_Element_Shadow: var(--GreenDark);
    /* 1 */
    --Column1_HighLight: var(--Purple);
    --Column1_HighLight_Shadow: var(--PurpleLight);
    --Column1_HighLight_Hover: var(--PurpleLight);
    /* 2 */
    --Column2_HighLight: var(--PinkDark);
    --Column2_HighLight_Shadow: var(--Pink);
    --Column2_HighLight_Hover: var(--Pink);
    /* 3 */
    --Column3_HighLight: var(--GreenDark);
    --Column3_HighLight_Shadow: var(--GreenLight1);
    --Column3_HighLight_Hover: var(--GreenLight2);
}

body {
    background-color: var(--BodyBackground);
}

#bg{
    color: var(--BaseBackground);
}

.name-highlight {
    /*color: var(--highlight);*/
    color: var(--TextHighlight);
}

main {
    border-color: var(--MainBorder);
    background-color: var(--MainBackground);
}

h1 {
    color: var(--TextMain);
}

.subtitle {
    color: var(--TextMain);
}

.searchBar {
    color: var(--Search);
    border-color: var(--SearchBorder);
}

.searchBar::-webkit-input-placeholder { color: var(--Search); }
.searchBar:-moz-placeholder           { color: var(--Search); opacity: 1; } /* Fx 4-18 */
.searchBar::-moz-placeholder          { color: var(--Search); opacity: 1; } /* Fx 19+ */
.searchBar:-ms-input-placeholder      { color: var(--Search); } /* IE 10+ */

.searchBar:hover {
    box-shadow: 0 0 5px var(--White);
    border-color: var(--White);
}

.searchBar:focus::-webkit-input-placeholder { color:  var(--SearchFocus);}
.searchBar:focus:-moz-placeholder           { color: var(--SearchFocus); opacity: 1; } /* Fx 4-18 */
.searchBar:focus::-moz-placeholder          { color: var(--SearchFocus); opacity: 1; } /* Fx 19+ */
.searchBar:focus:-ms-input-placeholder      { color: var(--SearchFocus); } /* IE 10+ */
/* Specyfing opacity for Fx is only resetting the defaults. Alpha from rgba will still work. */

.searchBar:focus {
    color: var(--SearchFocus);
}

.search_google {
    background-image: url('resources/icons/google.png');
}
.search_youtube {
    background-image: url('resources/icons/youtube.png');
}
.search_wikipedia {
    background-image: url('resources/icons/wikipedia.png');
}
.search_stackoverflow {
    background-image: url('resources/icons/stackoverflow.png');
}

/* General Buttons */
.button_grey > a,
.button_grey > ul {
    border-color: var(--Button_Border);
}
.button_grey > a,
.button_grey > ul > li > a {
    color: var(--Button);
    background: var(--Button_Background);
}
.button_grey > a:after {
    border-left-color: var(--Button_Border_Left);
}
.button_grey:hover > a,
.button_grey > ul > li > a:hover {
    color: var(--Button_Hover);
    background: var(--Button_Background_Hover);
}
.button_grey:hover > a,
.button_grey:hover > ul {
    border-color: var(--Button_Dropdown);
}
.button_grey:hover > a:after {
    border-left-color: var(--Button_Dropdown_Content);
}

/* Button 1 */
.button_green > a,
.button_green > ul {
    border-color: var(--Button1_Border);
}
.button_green > a,
.button_green > ul > li > a {
    color: var(--Button1);
    background: var(--Button1_Background);
}
.button_green > a:after {
    border-left-color: #91b476;
}

.button_green:hover > a,
.button_green > ul > li > a:hover {
    color: var(--Button1_Hover);
    background: var(--Button1_Background_Hover);
}

.button_green:hover > a,
.button_green:hover > ul {
    border-color: var(--Button1_Border_Hover);
}
/*
.button_green:hover > a:after {
    border-left-color: #269926;
}
*/
/* column standard colors */
.column {
    border-right-color: var(--Column_Border);
}
.column > a,
.column > ul > li:before {
    color: var(--Column_List_Title);
}
.column > a {
    text-shadow: 0 0.5px var(--Column_List_Element_Shadow);
}

.column > ul > li > a {
    color: var(--Column_List_Element);
}

/* column highlight 1 */

.column_purple:hover > a,
.column_purple:hover > ul > li:before {
    color: var(--Column1_HighLight);
}
.column_purple:hover > a {
    text-shadow: 0 0.5px var(--Column_Highlight_Shadow_Size) var(--Column1_HighLight_Shadow);
}
.column_purple > ul > li > a:hover {
    color: var(--Column1_HighLight_Hover);
}

/* column highlight 2 */
.column_pink:hover > a,
.column_pink:hover > ul > li:before {
    color: var(--Column2_HighLight);
}
.column_pink:hover > a {
    text-shadow: 0 0.5px var(--Column_Highlight_Shadow_Size) var(--Column2_HighLight_Shadow);
}
.column_pink > ul > li > a:hover {
    color: var(--Column2_HighLight_Hover);
}

/* column highlight 3 */
.column_green:hover > a,
.column_green:hover > ul > li:before {
    color: var(--Column3_HighLight);
}
.column_green:hover > a {
    text-shadow: 0 0.5px var(--Column_Highlight_Shadow_Size) var(--Column3_HighLight_Shadow);
}
.column_green > ul > li > a:hover {
    color: var(--Column3_HighLight_Hover);
}