Koha Test Pallete by crispybran

/* ==UserStyle==
@name           ? - Jul 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("https://staff-cintest.bywatersolutions.com/") {
/* root section sets Brand colors */

:root {
  /* Dark */
  --c_dark: #747679;
  --t_dark: #FFFFFF;
   --c_dark_hov: #C3CBD1;
  --t_dark_hov: #000000;

  /* Medium */
  --c_medium: red;
  --t_medium: #FFFFFF;
  
  --c_medium_hov: #C3CBD1;
  --t_medium_hov: #000000;
  
  /* Light */
  --c_light_hov: #304F6D;
  --t_light_hov: #FFFFFF;
  
  --c_light: #777C80;
  --t_light: #FFFFFF;
  
  /* Colors for header */
  --c_head: #FFFFFF;
  --t_head: #000000;
  --l_head: #9E8475;
  
  --c_head_hov: #304F6D;
  --t_head_hov: #FFFFFF;
  
  /* Highlight colors */
  --c_high: #FFFF00;
  --t_high: #000000;
  
  /* Text colors */
  --general_text: #000000;
  --general_link: #2D4A5E;
  
  /* test colors */
  --test: red;
  --textcolor: black;
}

/* Hide logo */
#logo img {
  display:none;
}

/* Remove underlines on buttons */
.navbar a,.navbar-nav a,.nav a,.lastborrower a,.breadcrumb a,.buttons-list a,.btn-group a {
  text-decoration: none!important;
  font-weight: bold;
}

/* navbar adjustment */
#header a:hover {
  color: var(--t_light_hov)!important;
}
.navbar-toggle {
  background-color: var(--c_light)!important;
  color: var(--t_light)!important;
}
.navbar-toggle:hover, .navbar-toggle:focus {
  background-color: var(--c_medium_hov)!important;
  color: var(--t_medium_hov)!important;
}

/* All pages - highlighting */

  ::-moz-selection {
    background: var(--c_high);
    color: var(--t_high);
  }

  ::selection {
    background: var(--c_high);
    color: var(--t_high);
  }

/* -- All pages - header -- */

  /* Styles the header */
    .navbar,
    #header li a {
      background-color: var(--c_head);
      border: var(--c_head);
      color: var(--t_head) !important;
    }
    #logo svg {
      fill: var(--l_head)!important;
    }

  /* Styles header options on hover */
    #header #toplevelmenu li:nth-child(n):nth-child(-n+3):nth-child(-n+2):hover,
    #header #toplevelmenu li:nth-child(n+5):hover,
    #header #cartmenulink:hover,
    #header #cartmenulink:focus,
    #header #logged-in-menu:hover,
    #header #logged-in-menu:focus {
      background-color: var(--c_head_hov) !important;
      color: var(--t_head_hov) !important;
      border-radius: 16px;
    }

  /* Styles "Search" option and adjacent dropdown as one */
  /* Removes black line separator between "Search" and caret */
    #header #catalog-search-dropdown,
    #header #catalog-search-link,
    #header .dropdown-toggle {
      border: 0px;
    }

  /* Styles the "Search" link */
    #header #catalog-search-link:hover,
    #header #catalog-search-link:focus {
      background-color: var(--c_head_hov);
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
      border-right: 0px;
    }

  /* Styles the down-caret link on hover over the "Search" link */
    #header #catalog-search-dropdown>a.catalog-search-dropdown-hover,
    #header #catalog-search-dropdown>a.catalog-search-dropdown-hover:focus {
      background-color: var(--c_head_hov) !important;
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
      border-left: 0px;
    }

  /* Styles the search down-caret on hover  */
    #header #catalog-search-dropdown>a:hover,
    #header #catalog-search-dropdown>a:focus {
      background-color: var(--c_head_hov) !important;
      color: var(--t_head_hov) !important;
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
      border: 0px;
    }

  /* Styles dropdown content */
    #header .dropdown-menu {
      background-color: var(--c_head);
    }

    #header ul .dropdown-menu li a:hover,
    #header ul .dropdown-menu li a:focus {
      background-color: var(--c_head_hov);
      color: var(--t_head_hov);
      border-radius: 0px;
    }

/* --- All pages - Last Borrower Button --- */
  #lastborrower-window {
    background-color: var(--c_medium);
  }
  #lastborrower-window:hover, #lastborrowerlink:hover {
    background-color: var(--c_medium_hov);
    color: var(--t_medium_hov);
  }
  #lastborrower-window:hover {
    border: 1px var(--t_medium_hov) solid;
  }

/* --- All pages - Search bar changes --- */

  /* Highlights input box in black on focus */
    #header_search .form-content:focus-within {
      box-shadow: inset 0px 0px 0px 4px #000000;
    }

  /* Adds padding to search bar to embiggen */
    #header_search {
      padding: 0.5em;
    }
  
  /* Styles search bar title area */
    #header_search .form-title {
      background-color: var(--c_dark);
      color: var(--t_dark);
      padding: 5px 16px 5px 16px;
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
    }

  /* Styles search bar title */
    #header_search .form-title label {
      background-color: var(--c_dark);
      color: var(--t_dark);
      margin: 0 auto;
    }
  
  /* Styles header search area */
    #header_search {
      border: 1px solid var(--c_medium);
      background-color: var(--c_medium);
      color: var(--t_medium);
    }

  /* Styles header search area buttons */
    #header_search ul {
      background-color: var(--c_medium);
      color: var(--t_medium);
    }
  
  /* Styles search type buttons */
    #header_search .nav-tabs > li > a {
      background-color: var(--c_medium);
      border: 1px solid var(--c_medium);
      color: var(--t_medium);
      border-radius: 16px;
      padding: 0.5em .8em;
    }
  
  /* Styles search type buttons on hover or focus */
    #header_search .nav-tabs > li > a:hover, 
    #header_search .nav-tabs > li > a:focus, 
    #header_search .nav-tabs > li > a:active {
      background-color: var(--c_medium_hov);
      border: 1px solid var(--c_medium_hov);
      color: var(--t_medium_hov);
      border-radius: 16px;
      padding: 0.5em .8em;
    }
  
  /* Styles search type buttons when selected */
    #header_search .nav-tabs>li.active a {
      background-color: var(--c_light);
      border: 1px solid var(--c_light);
      color: var(--t_light);
      padding: 0.5em .8em;
      border-radius: 16px;
      cursor: default;
    }
  
  /* Styles the submit button */
    #header_search button {
      background-color: var(--c_light) !important;
      color: var(--t_light) !important;
    }
  
  /* Styles the submit button on hover */
    #header_search button:hover {
      background-color: var(--c_dark_hov) !important;
      color: var(--t_dark_hov) !important;
    }

  /* Styles the filter icon on hover */
    div#header_search div.tab-content button.form-extra-content-toggle {
      background-color: transparent !important;
      color: var(--general_text)!important;
    }

/* -- All pages - general stuff -- */

  /* Styles all default text in "--general_text" color */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p:not(.launcher),
    h1:hover,
    h2:hover,
    h3:hover,
    h4:hover,
    h5:hover,
    h6:hover,
    p:hover,
    a:hover,
    h1:focus,
    h2:focus,
    h3:focus,
    h4:focus,
    h5:focus,
    h6:focus,
    p:focus,
    a:focus {
      color: var(--general_text);
    }
    .humanMsg p {
      	color: var(--t_medium);
    }

  /* Styles all links in "--general_link" + underlines all links */
    a {
      color: var(--general_link);
      text-decoration: underline;
    }

  /* Styles links on hover */
    a:hover,
    a:focus {
      color: var(--t_light_hov);
      background-color: var(--c_light_hov);
    }

  /* Excludes logo and "Home" icon from link styles */
    #logo,
    #breadcrumbs ol li:nth-child(1) a,
    #breadcrumbs ol li:nth-child(1) a:hover {
      background-color: transparent;
      color: var(--general_link);
      border: 0px;
    }

/* -- Things that affect multiple pages -- */

  /* -- Tabs on tables -- */

    /* Style table tabs */
      .nav-tabs>li>a {
        background-color: var(--c_light);
        color: var(--t_light);
        border: 2px solid var(--c_light);
      }

    /* Style table tabs on hover */
    .nav-tabs>li>a:hover,
    .nav-tabs>li.active>a:hover {
      background-color: var(--c_light_hov);
      color: var(--t_light_hov);
      border: 2px solid var(--c_light_hov);
    }

    /* Style active table tab */
    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus {
      background-color: var(--c_dark);
      color: var(--t_dark);
      border: 1px solid var(--c_dark);
      border-bottom: 0px;
    }

  /* -- Pages with sub-module buttons (circ/circulation-home.pl) (cataloguing/cataloging-home.pl) -- */
  
    /* Style sub-module buttons */
      .buttons-list li a:hover,
      .buttons-list li a:focus {
        background-color: var(--c_light_hov) !important;
        color: var(--t_light_hov) !important;
      }
	  .buttons-list li a {
        border: 1px solid var(--c_light);
      }

  /* -- Pages with left side menu -- */

    /* Styles title and heading left menu */
      #menu h5,
      #navmenulist h5 {
        color: var(--general_text);
      }

    /* Styles dormant links in left menu */
      #menu ul li a,
      #navmenulist ul li a {
        color: var(--general_link);
      }

    /* Styles currently selected left menu link */
      #menu ul li.active>a,
      #menu ul li a.current,
      #navmenulist ul li.active>a,
      #navmenulist ul li a.current {
        color: var(--general_link);
        border-left: solid 15px var(--c_medium);
      }

    /* Styles sub-menu links on left menu */
    /* This seems to only be on (admin/preferences.pl) */
      #menu ul li.active .pref_sublink {
        color: var(--general_link);
        border-left: solid 10px var(--c_medium);
      }

    /* Styles left menu links on hover */
      #menu ul li a:hover,
      #menu ul li a:focus,
      #navmenulist ul li a:hover,
      #navmenulist ul li a:focus,
      #menu ul li.active .pref_sublink:hover,
      #menu ul li.active .pref_s...