NatLibFi/Skosmos

:root {
  /* Color definitions */
  --dark-color: #0d284e;
  --secondary-dark-color: #1b709d ;
  --medium-color: #dfe5ed;
  --secondary-medium-color: #b8c9db;
  --light-color: #f2f5f7;
  --alert-color: #a0270a;
  --white-color: #ffffff;
  --feedback-form-bg: var(--white-color);
  --feedback-form-text: var(--dark-color);
  --feedback-form-input: var(--light-color);
  --feedback-form-button-bg: var(--dark-color);
  --sidebar-search-bg: var(--dark-color);
  --sidebar-search-text: var(--white-color);
  --sidebar-tab-inactive-bg: var(--light-color);
  --sidebar-tab-inactive-text: var(--dark-color);
  --sidebar-tab-active-bg: var(--dark-color);
  --sidebar-tab-active-text: var(--white-color);
  --sidebar-scrollbar-bg: var(--light-color);
  --sidebar-scrollbar-thumb: var(--secondary-medium-color);
  --search-bg: var(--white-color);
  --search-border: var(--medium-color);
  --search-button-bg: var(--dark-color);
  --search-button-text: var(--white-color);
  --search-dropdown-toggle-hover-text: var(--white-color);
  --search-dropdown-toggle-hover-bg: var(--dark-color);
  --vocab-bg: var(--white-color);
  --vocab-text: var(--dark-color);
  --vocab-table-border: var(--medium-color);
  --vocab-link: var(--secondary-dark-color);
  --vocab-box-text: var(--dark-color);

  /* Font definitions */
  --font-size: 14px;
  --font-family: 'Public Sans', sans-serif;
  --font-family-heading: 'EB Garamond', serif;
}

body {
  color: var(--dark-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.fs-1 {
  font-size: 4.25em !important;
}

.fs-2 {
  font-size: 3.25em !important;
}

.fs-3 {
  font-size: 2.75em !important;
}

.bg-dark {
  background-color: var(--dark-color) !important;
}

.bg-medium {
  background-color: var(--medium-color) !important;
}

.bg-light {
  background-color: var(--light-color) !important;
}

/* Font awesome
 *****************************************/
  #main-container.frontpage #info-box .fa-arrow-right {
    color: var(--info-box-arrow);
  }

  #main-container.frontpage-one-vocab #info-box .fa-arrow-right {
    color: var(--info-box-one-arrow);
  }

  #vocab-box .fa-arrow-right {
    color: var(--vocab-box-one-arrow);
  }

  #main-container.vocabpage .fa-arrow-right, #main-container.termpage .fa-arrow-right {
    color: var(--vocab-text);
    font-size: 12px;
    margin: 0 5px;
  }

  #main-container.searchpage .fa-arrow-right, #main-container.searchpage-multi-vocab .fa-arrow-right {
    color: var(--vocab-text);
    font-size: 12px;
  }

  #main-container.searchpage .list-group .fa-solid, #main-container.searchpage .list-group .fa-regular,
  #main-container.searchpage-multi-vocab .list-group .fa-solid, #main-container.searchpage-multi-vocab .list-group .fa-regular {
    color: var(--vocab-text);
    font-size: 16px;
    width: 20px;
    text-align: center;
  }

  .fa-magnifying-glass {
    color: var(--search-button-text);
    font-size: 22px;
    margin: calc((38px - 22px) / 2 ) 0; /* (button height - font height) / 2 */
  }

  .fa-download {
    color: var(--vocab-text);
  }

  /* Topbar
   *****************************************/
  #topbar.frontpage, #topbar.frontpage-one-vocab {
    background-color: var(--topbar-bg-1);
    color: var(--topbar-text-1);
  }

  #topbar.vocabpage, #topbar.termpage, #topbar.infopage, #topbar.feedbackpage {
    background-color: var(--topbar-bg-2);
    color: var(--topbar-text-2);
  }

  #topbar.frontpage a, #topbar.frontpage-one-vocab a {
    color: var(--topbar-text-1) !important;
  }

  #topbar.vocabpage a, #topbar.termpage a, #topbar.infopage a, #topbar.feedbackpage a {
    color: var(--topbar-text-2) !important;
  }

  #topbar h3 {
    display: inline;
    font-weight: bold;
  }

  #multi-search-toggle {
    background-color: var(--topbar-bg-1);
    color: var(--topbar-text-1);
    border: none;
  }

  #multi-search-toggle::after {
    content: '﹀';
    position: absolute;
    top: 30px;
    left: 205px;
  }

  #skosmos-logo-top {
    background-image: url(../pics/skosmos-NEGA-RGB.svg);
    background-repeat: no-repeat;
    width: 168px;
    height: 60px;
  }

  #skosmos-logo-top h2 {
    text-indent: -100%;
  }

  .topbar-nav-link {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40%;
    padding-left: 30px;
  }

  /* Headerbar
   *****************************************/
  #headerbar.frontpage, #headerbar.frontpage-one-vocab {
    color: var(--headerbar-text-1);
  }

  #headerbar.vocabpage, #headerbar.termpage {
    background-color: var(--headerbar-vocab-bg);
  }

  #skosmos-logo {
    background-image: url(../pics/skosmos-RGB.svg);
    background-repeat: no-repeat;
    background-position: -20px -20px;
    width: 400px;
    height: 110px;
    background-size: 400px;
  }

  #vocab-title a {
    color: var(--headerbar-text-2);
    font-family: var(--font-family-heading);
    text-decoration: none;
  }

  #search-multi-vocab-title {
    color: var(--headerbar-text-2);
    font-family: var(--font-family-heading);
  }

  #search-multi-vocab {
    width: 800px;
  }

  #search-wrapper {
    color: var(--headerbar-text-2);
    float: right;
    height: 3.5em;
}

  #search-wrapper select, #search-wrapper input, #search-wrapper button {
    height: 100%;
  }

  #search-wrapper button.dropdown-toggle {
    background-color: var(--search-bg);
    color: var(--headerbar-text-2);
    border: 1px solid var(--search-border);
    border-radius: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #search-wrapper button.dropdown-toggle i {
    padding-left: 0.25rem;
    font-size: 0.75rem;
  }

  #search-wrapper button.btn.dropdown-toggle::after {
    display: none !important;
  }

  #search-wrapper #language-list {
    inset: -3px auto auto 0px !important;
    background-color: var(--search-bg);
    color: var(--headerbar-text-2);
    border: 1px solid var(--search-border);
    border-radius: 0;
  }

  #search-wrapper #language-list li a:hover, #search-wrapper #language-list li a:active {
  color: var(--search-dropdown-toggle-hover-text);
    background-color: var(--search-dropdown-toggle-hover-bg);
  }

  #search-wrapper .form-check-input {
    background-color: var(--search-bg);
    border-radius: 0;
  }

  #search-wrapper .form-check-input:checked {
    background-color: var(--headerbar-text-2);
  }

  #search-wrapper input {
    background-color: var(--search-bg);
    border-color: var(--search-border);
    border-radius: 0;
  }

  #search-wrapper span.dropdown {
    width: 25rem;
    z-index: 4;
  }

  #search-wrapper .form-control:focus, #search-wrapper select:focus {
    border-color: var(--search-border) !important;
    box-shadow: inset 0 0 5px rgba(196, 205, 217, 1) !important;
  }

  #search-wrapper .dropdown-menu {
    transform: translateY(-1px);
    background-color: var(--search-bg);
    color: var(--headerbar-text-2);
    border: 1px solid var(--search-border);
    border-radius: 0;
  }

  #search-wrapper ul {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  #search-wrapper .autocomplete {
    position: relative;
  }

  #search-wrapper .autocomplete-result {
    border-top: 1px solid var(--search-border);
    margin: auto;
  }

  #search-wrapper .autocomplete-result * {
    text-decoration: none;
    color: var(--dark-color);
  }

  #search-wrapper .autocomplete-result span.result {
    color: var(--vocab-link);
  }

  #search-wrapper .autocomplete-result span.d-inline {
    white-space: nowrap;
  }

  /* Remove built-in x button from Internet Explorer */
  #search-wrapper input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
  #search-wrapper input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
  
  /* Remove built-in x button from Chrome */
  #search-wrapper input[type="search"]::-webkit-search-decoration,
  #search-wrapper input[type="search"]::-webkit-search-cancel-button,
  #search-wrapper input[type="search"]::-webkit-search-results-button,
  #search-wrapper input[type="search"]::-webkit-search-results-decoration { display: none; }

  #search-button {
    background-color: var(--search-button-bg);
    border: 1px solid var(--search-border);
    border-radius: 0;
    padding: 0;
    width: 3.5em;
  }

  #clear-button {
    position: absolute;
    color: var(--vocab-text);
    background: none;
    border: none;
    top: 0;
    right: 50px;
    height: 40px;
    width: 40px;
    padding: 0;
    font-size: 20px;
    z-index: 5;
  }

  /* Main container
   *****************************************/
  #main-container {
    font-size: 16px;
  }

  #main-container h1 {
    font-family: var(--font-family-heading);
    font-weight: bold;
  }

  /***** Main container frontpage & frontpage one vocab *****/
  #background.frontpage, #background.frontpage-one-vocab {
    background-color: var(--main-bg-1);
    background-image: var(--frontpage-stripes-1);
    background-repeat: no-repeat;
    background-size: 650px;
    background-position: calc(100% + 41px) -55px;
  }

  #main-container.frontpage, #main-container.frontpage-one-vocab {
    background-image: var(--frontpage-stripes-2);
    background-repeat: no-repeat;
    background-size: 650px;
    background-position: -41px calc(100% + 55px);
  }

  #vocab-box, #welcome-box, #info-box {
    padding: 2.5rem 2rem;
  }

  #info-box a {
    color: var(--info-box-text);
    text-decoration: none;
  }

  /*** Main container frontpage ***/

  #vocabulary-list h2, #welcome-box h2, #vocab-info h2 {
    font-family: var(--font-family-heading) !important;
  }
  header > h2 > a {
    font-family: var(--font-family-heading) !important;
    color: var(--dark-color)
  }
  #vocabulary-list .list-group-item {
    background-color: var(--medium-color) !important;
  }
  #vocabulary-list .border-top {
    border-top: 2px var(--dark-color) solid !important;
    color: var(--secondary-dark-color);
  }

  .vocab-category {
    border-top: 1px solid var(--vocab-box-text);
    color: var(--vocab-box-text);
  }

  .vocab-category h3 {
    color: var(--vocab-box-text);
  }

  .vocab-category a {
    /** color: var(--secondary-medium-color) solid; **/
    color: var(--vocab-link);
    font-weight: bold;
    text-decoration: underline ;
    text-decoration-thickness: 1px;
  }

  #main-container.frontpage #vocab-box h2 {
    color: var(--vocab-box-header);
  }

  #main-container.frontpage #welcome-box {
    background-color: var(--welcome-box-bg);
    color: var(--welcome-box-text);
  }

  #main-container.frontpage #info-box {
    background-color: var(--info-box-bg);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*** Main container frontpage one vocab ***/
  #main-container.frontpage-one-vocab #vocab-box {
    background-color: var(--vocab-box-one-bg);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #main-container.frontpage-one-vocab #vocab-box a {
    color: var(--vocab-box-one-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  #main-container.frontpage-one-vocab #welcome-box {
    background-color: var(--welcome-box-one-bg);
    color: var(--welcome-box-one-text);
  }

  #main-container.frontpage-one-vocab #info-box {
    background-color: var(--info-box-one-bg);
  }

  /***** Main container vocabpage & termpage & searchpage & searchpage multi vocab *****/
  #main-container.vocabpage, #main-container.termpage, #main-container.searchpage, #main-container.searchpage-multi-vocab {
    background-color: var(--main-bg-2);
  }

  #main-container.vocabpage a, #main-container.termpage a, #main-container.searchpage a, #main-container.searchpage-multi-vocab a {
    color: var(--vocab-link);
    text-decoration: none;
    font-weight: bold;
  }

  #sidebar {
    background-color: var(--vocab-bg);
  }

  /*** Sidebar termpage & vocabpage ***/
  #main-container.vocabpage #sidebar-col, #main-container.termpage #sidebar-col {
    background-color: var(--vocab-bg);
    background-clip: content-box, padding-box;
    min-height: 1000px;
  }

  #main-container.vocabpage #sidebar, #main-container.termpage #sidebar {
    background-color: var(--vocab-bg);
  }

  #main-container.vocabpage #sidebar .nav, #main-container.termpage #sidebar .nav {
    background-color: var(--sidebar-tab-inactive-bg);
  }

  #main-container.vocabpage #sidebar .nav-link, #main-container.termpage #sidebar .nav-link {
    color: var(--sidebar-tab-inactive-text) !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
  }

  #main-container.vocabpage #sidebar .nav .active, #main-container.termpage #sidebar .nav .active {
    background-color: var(--sidebar-tab-active-bg);
    color: var(--sidebar-tab-active-text) !important;
  }

  #main-container.vocabpage #sidebar .pagination, #main-container.termpage #sidebar .pagination {
    background-color: var(--sidebar-tab-active-bg);
    padding: 1rem;
    margin: 0;
    flex-wrap: wrap;
  }

  #main-container.vocabpage #sidebar .page-item, #main-container.vocabpage #sidebar .page-link,
  #main-container.termpage #sidebar .page-item, #main-container.termpage #sidebar .page-link {
    background-color: var(--sidebar-tab-active-bg);
    color: var(--sidebar-tab-active-text) !important;
    font-weight: normal !important;
    border: none;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: none;
    width: 35px;
  }

  #main-container.vocabpage #sidebar .page-link, #main-container.termpage #sidebar .page-link {
    display: flex;
    align-content: center;
    text-align: center;
  }

  /* what to do with these */
  #main-container.vocabpage #sidebar .page-link:hover, #main-container.vocabpage #sidebar .page-link:active, #main-container.vocabpage #sidebar .page-link:focus,
  #main-container.termpage #sidebar .page-link:hover, #main-container.termpage #sidebar .page-link:active, #main-container.termpage #sidebar .page-link:focus {
    background-color: var(--sidebar-tab-active-bg);
    color: var(--sidebar-tab-active-text);
    box-shadow: none;
  }

  #sidebar .loading-message {
    padding: 2rem 1rem;
  }

  .sidebar-list {
    padding: 2rem 1rem 0 1rem;
    overflow-y: scroll;
    scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-bg);
    position: absolute;
  }

  .sidebar-list::-webkit-scrollbar {
    background: var(--sidebar-scrollbar-bg);
  }

  .sidebar-list::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar-thumb);
  }

  .sidebar-list .list-group-item {
    border: none;
    border-radius: none;
  }

  .sidebar-list a {
    font-weight: bold !important;
  }

  /*** sidebar hierarchy tab ***/
  #tab-hierarchy .sidebar-list .list-group-item {
    border-left: 1px dashed var(--vocab-text);
    border-radius: 0;
    white-space: nowrap;
  }

  #tab-hierarchy .sidebar-list .list-group-item.top-concept {
    border: none;
  }

  #tab-hierarchy .sidebar-list .list-group-item .concept-label {
    display: inline-block;
    border-left: 1px dashed var(--vocab-text);
    margin-left: 16px;
    padding-left: 14px;
    white-space: wrap;
  }

  /* horizontal line before concept */
  #tab-hierarchy .sidebar-list .list-group-item .concept-label::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    width: 10px;
    height: 13px;
    border-bottom: 1px dashed var(--vocab-text);
  }

  /* hiding bottom of vertical line on last concept of list */
  #tab-hierarchy .sidebar-list .list-group-item .concept-label.last::before {
    top: auto;
    bottom: 0;
    height: calc(100% - 13px);
    border-left: 1px solid var(--vocab-bg);
    border-top: 1px dashed var(--vocab-text);
    border-bottom: none;
  }

  /* no border for children of the last concept */
  #tab-hierarchy .sidebar-list .list-group-item span.last + ul > li {
    border: none;
    margin-left: 1px !important; /* add a 1px margin to offset missing border */
  }

  #tab-hierarchy .sidebar-list .list-group-item a.selected {
    color: var(--vocab-text) !important;
  }

  #tab-hierarchy .sidebar-list .list-group-item .concept-notation {
    color: var(--dark-color);
  }

  #tab-hierarchy .sidebar-list .list-group-item a.selected .concept-notation {
    font-weight: bold;
  }

  .hierarchy-button {
    background-color: transparent;
    color: var(--vocab-text);
    border: none;
    padding: 0;
    font-size: 10px;
  }

  .hierarchy-button:hover, .hierarchy-button:active {
    background-color: transparent !important;
    color: var(--vocab-text) !important;
  }

  .hierarchy-button i {
    position: absolute;
    left: 11px;
    top: 7px;
  }

  .hierarchy-button img {
    transform: rotate(-45deg);
    position: absolute;
    top: 9px;
    left: 10px;
    width: 7px;
    z-index: 1;
  }

  .hierarchy-button.open img {
    transform: rotate(0deg);
    left: 12px;
  }

  /*** sidebar serachpage ***/
  #main-container.searchpage #sidebar {
    background-color: var(--sidebar-search-bg);
    color: var(--sidebar-search-text);
    height: 1000px; /* change */
  }

  #search-options input, #search-options select {
    border: none;
    border-radius: 0;
  }

  #search-options button {
    background-color: var(--sidebar-search-button-bg); /* Which bg color to use? */
    color: var(--sidebar-search-button-text);
    border: none;
    border-radius: 0;
  }

  #search-options select {
    background-image: none;
  }

  .select-wrapper { /* Also used in feedback form */
    position: relative;
  }

  .select-wrapper::after { /* Also used in feedback form */
    color: var(--vocab-text);
    content: '﹀';
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  /*****  Main content vocabpage & termpage *****/
  #main-content h1 {
    font-size: 2.5rem;
  }

  .main-content-section {
    background-color: var(--vocab-bg);
    margin-bottom: .2rem;
  }

  #concept-heading {
    margin-top: 2rem;
    padding-bottom: 4rem;
  }

  .property {
    border-top: 1px solid var(--vocab-table-border);
    padding: .5rem 0;
  }

  .property.prop-mapping {
    border-top: none;
  }

  .property-label h2 {
    font-weight: bold;
    font-size: 20px !important;
    margin-bottom: 0;
    display: inline;
  }

  .property-value {
    color: var(--vocab-text);
    border: none;
  }

  .property-value .property-value-notation {
    color: var(--vocab-text);
  }

  #resource-table th {
    color: var(--vocab-text);
    font-weight: bold;
    border-bottom: 1px solid var(--vocab-text);
  }

  #resource-table td {
    color: var(--vocab-text);
    border: none;
  }

  .resource-table-label {
    width: 40%;
  }

  /*** Main content termpage ***/
  nav#concept-breadcrumbs ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
  }

  nav#concept-breadcrumbs li, nav#concept-breadcrumbs li.collapse.show {
    display: inline;
  }

  nav#concept-breadcrumbs li.collapse, nav#concept-breadcrumbs li:has(a[aria-expanded="true"]) {
    display: none;
  }

  nav#concept-breadcrumbs li.breadcrumb + li::before {
    content: "> ";
  }

  nav#concept-breadcrumbs .breadcrumb-current {
    color: black;
    font-weight: normal;
  }

  #concept-property-label {
    align-self: start;
    padding-top: 1.25rem;
  }

  #concept-label h1 {
    display: inline;
  }

  #copy-preflabel, #copy-notation {
    color: var(--vocab-text);
    font-size: 30px;
    position: relative;
    bottom: 10px;
    left: 5px;
  }

  #copy-uri {
    color: var(--vocab-text);
    position: relative;
    bottom: 4px;
  }

  .copy-clipboard:focus {
    border: 1px solid var(--vocab-text);
    border-radius: 3px;
  }

  .property ul, .property li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;
  }

  .prop-skos_altLabel .property-value li, .altlabel {
    font-style: italic;
  }

  .prop-foreignlabels h3 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  #download-links li {
    display: inline-block;
  }

  #date-info {
    font-size: 0.85rem;
  }

  /***** Main content searchpage & searchpage multi vocab *****/
  #search-results {
    background-color: var(--vocab-bg);
  }
  .search-result {
    border-top: 1px solid var(--vocab-table-border);
    margin-top: 2.5rem;
  }

  .search-result-term a {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    text-decoration: none;
  }

  .search-result .list-group-item {
    color: var(--vocab-text);
    border: none;
  }

  .uri-icon {
    display: inline-block;
    width: 20px;
    font-size: 0.75rem;
    text-align: center;
  }
  
  .prefLabel.proplabel {
    font-weight: bold;
    color: var(--secondary-dark-color);
  }
  
  .altLabel.proplabel {
    font-style: italic;  
  }

  /***** Main container infopage & feedbackpage *****/
  #main-container.infopage, #main-container.feedbackpage {
    background-color: var(--main-bg-3);
    color: var(--infopage-text);
    padding: 4rem 0;
  }

  #main-container.infopage .container, #main-container.feedbackpage .container {
    padding: 0 12rem;
  }

  /*** Main container infopage ***/
  #main-container.infopage {
    background-image: var(--infopage-stripes);
    background-repeat: no-repeat;
    background-size: 650px;
    background-position: calc(100% + 41px) calc(100% + 55px);
  }

  #main-container.infopage a {
    color: var(--infopage-link);
    text-decoration: underline;
    font-weight: bold;
  }

  /*** Main container feedbackpage ***/
  #main-container.feedbackpage {
    background-image: var(--feedbackpage-stripes);
    background-repeat: no-repeat;
    background-size: 650px;
    background-position: var(--feedbackpage-stripes-pos);
  }

  #feedback-form {
    background-color: var(--feedback-form-bg);
    color: var(--feedback-form-text);
    padding: 2.5rem 2rem 5rem;
  }

  #feedback-form label {
    font-weight: bold;
  }

  #feedback-form input, #feedback-form select, #feedback-form textarea {
    background-color: var(--feedback-form-input);
    border: none;
    border-radius: 0;
  }

  #feedback-form input::placeholder {
    color: var(--feedback-form-text);
  }

  #feedback-form textarea {
    margin-bottom: 4rem;
  }

  #feedback-form button {
    background-color: var(--feedback-form-button-bg);
    border: none;
    border-radius: 0;
    font-weight: bold;
    float: right;
  }

  #feedback-form select {
    background-image: none;
  }

  #feedback-form select:valid {
    color: var(--feedback-form-text);
  }

  #feedback-form select:valid:focus {
    color: var(--feedback-form-text);
  }

  /* Error page
   *****************************************/
  .alert {
    background-color: var(--alert-color);
    color: var(--white-color);
    border-radius: 0;
  }

 /* About page
   *****************************************/
  #about-content a {
    font-size: 1.0em;
    color: var(--vocab-link);
    text-decoration: underline var(--secondary-medium-color) solid;
    font-weight: 700;
  }

  @media (min-width: 1200px) {
    .container {
      max-width: 1460px !important;
    }
  }

  #alphabetical-menu > .list-group > .list-group-item {
    border: none !important;
  }

  .vocab-statistics > h3 {
    font-size: 20px !important;
  }