hubl/client.sample.etuc.scss

:root {
  --color-primary: #063B5C;
  --color-secondary: #3A3A3A;
  --color-complementary: #C4262E;
  --color-complementary-darken: #36383B;
  --color-white: #FFFFFF;

  --color-black-h: 216;
  --color-black-s: 4%;
  --color-black-l: 22%;

  --color-main-background: var(--color-grey-13);
  --color-main-text: #7A7F85;
  --color-highlight-primary: var(--color-primary);
  --color-user-panel: var(--color-black);
  --color-bell: var(--color-secondary);
  --color-avatar-background: #E4E8ED;
  --color-title: #36383B;
  --color-h1: var(--color-title);
  --color-h2: var(--color-title);

  /* Depreciated */
  --color-tag-group-text: #9BA0A7;
  --color-tag-group-border: var(--color-primary);
  --color-label-dark: var(--color-grey-6);

  /* Header's elements */
  --color-header-background: var(--color-white);
  --color-bell: var(--color-complementary-darken);
  --color-user-panel-header-text: var(--color-complementary-darken);
  --color-user-panel-header-background: var(--color-white);
  --color-user-panel-header-text-open: var(--color-white);
  --color-user-panel-header-background-open: var(--color-secondary);
  --color-user-panel-list-background: var(--color-white);
  --color-user-panel-list-text-hover: var(--color-complementary);
  --color-user-panel-list-border: #E4E8ED;

  /* Left menu */
  --color-menu-highlight-primary:var(--color-white);
  --color-menu-background: var(--color-secondary);
  --color-menu-text: var(--color-white);
  --color-menu-text-active: var(--color-complementary);
  --color-menu-background-active: var(--color-menu-highlight-primary);
  --color-menu-badge-background: var(--color-menu-highlight-primary);
  --color-menu-badge-text-active: var(--color-menu-highlight-primary);
  --color-menu-badge-background-active: var(--color-secondary);
  --color-menu-icon-background-active: var(--color-secondary);

  /* Right menu */
  --color-right-menu-background: #e8e8e8;
  --color-right-menu-text: #3c3F57;
  --color-right-menu-link-border: #BDC2D7;
  --color-right-menu-active-text: var(--color-white);
  --color-right-menu-active-background: var(--color-complementary);
  --color-right-menu-active-icon: var(--color-primary);

  /* Scrollbar */
  --color-scrollbar-right-background: var(--color-white);
  --color-scrollbar-right-track: var(--color-grey-6);
  --color-scrollbar-left-background: var(--color-secondary);
  --color-scrollbar-left-track: var(--color-grey-11);

  /* Tags */
  --color-tag-admin-text: var(--color-complementary);
  --color-tag-admin-border: var(--color-complementary);

  /* Form elements */
  --color-button-white: var(--color-white);
  --color-button-primary: var(--color-primary);
  --color-button-secondary: var(--color-complementary);
  --color-button-complementary: var(--color-secondary);

  --color-input-background: #EDF1FA;
  --color-input-text: var(--color-secondary);
  --color-input-icon: var(--color-complementary);
  --color-input-active: var(--color-complementary);
  --color-fieldset: var(--color-title);
  --color-fieldset-border: #DAE2F3;
  --color-button-modal: var(--color-title);
  --color-select-list: var(--color-secondary);
  --color-select-add-button: var(--color-button-secondary);
  --color-select-add-button-background: var(--color-button-white);

  --color-label-light: var(--color-grey-6);

  /* Skill */
  --color-skill-background: var(--color-primary);
  --color-skill-text: var(--color-white);

  /* Icon */
  --color-icon: var(--color-primary);

  /* Table */
  --color-table-header-background: #BDC2D7;
  --color-table-header-text: var(--color-white);
  --color-table-border: #BDC2D7;

  /* User thumb */
  --color-user-thumb-name: #7A7F85;

  --color-backlink: var(--color-secondary);
  --color-content-header: #DAE2F3;

  /* Chat */
  --color-chat-white: var(--color-white);
  --color-chat-primary: var(--color-primary);
  --color-chat-complementary: var(--color-complementary);
  --color-chat-secondary: var(--color-secondary);
  --color-chat-complementary-darken: var(--color-complementary-darken);
  --color-chat-grey-1: var(--color-grey-4);
  --color-chat-grey-2: var(--color-grey-6);
  --color-chat-grey-3: var(--color-grey-10);

  /* Directory */
  --color-directory-grey-4: #7A7F85;
  --color-directory-grey-5: #F0F3F6;

  --color-directory-avatar-background: #E4E8ED;
  --color-directory-back-link: #36383B;
  --color-directory-border: #DAE2F3;
  --color-directory-content-header-border: #DAE2F3;
  --color-directory-h1: var(--color-complementary-darken);
  --color-directory-list-icon: var(--color-primary);
  --color-directory-text: var(--color-directory-grey-4);

  --color-directory-form-input: #EDF1FA;
  --color-directory-form-input-text: var(--color-directory-grey-4);
  --color-directory-form-input-active: var(--color-complementary);
  --color-directory-form-select-icon: var(--color-complementary);
}

#main__menu {
    font-family: "RefrigeratorDelxW01Bold";
}
#main__menu .menu {
    font-size: 2rem;
}
#main__menu .unread {
    font-weight: bold;
}
#main__menu .menu[active=""] {
    color: var(--color-complementary);
}
#main__menu .sub-menu.menu-notification {
    font-family: Facit;
}
#main__menu solid-router sib-route.menu, #main__menu sib-router sib-route.menu {
    padding: 1.2rem 0;
}
#viewport .content-box {
    font-family: Facit;
}
#viewport #circle .content-box__header solid-display div {
    text-align: center;
}
#viewport #circle .content-box__header .h1-like {
    font-family: "RefrigeratorDelxW01Bold";
    font-size: 3.2rem;
    color: var(--color-primary);
}
#viewport #circle .content-box__header solid-display div .h1-aside {
    
    margin: 10px 0;
}
#viewport .with-sidebar nav > solid-router {
    color: #3C3F57;
}
#viewport .with-sidebar nav > solid-router > ul > sib-route[active] {
    background-color: var(--color-right-menu-active-background);
    color: var(--color-right-menu-active-text);
    display: inline-block;
}
@media (min-width: 992px) {
    .content-box__height {
        min-height: calc(100vh - 83px - 98px);
    }
    #viewport .chat-view {
        height: calc(100vh - 84px - 98px);
    }
}