2020-05-11 18:20:13 +00:00
|
|
|
:root {
|
|
|
|
|
--color-primary: #FFB700;
|
|
|
|
|
--color-secondary: #3C3F57;
|
|
|
|
|
--color-complementary: #6259E5;
|
|
|
|
|
--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);
|
|
|
|
|
|
|
|
|
|
/* 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: #FFD759;
|
|
|
|
|
--color-menu-background: var(--color-secondary);
|
|
|
|
|
--color-menu-text: var(--color-white);
|
|
|
|
|
--color-menu-text-active: var(--color-secondary);
|
|
|
|
|
--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: #DAE2F3;
|
|
|
|
|
--color-right-menu-text: var(--color-secondary);
|
|
|
|
|
--color-right-menu-link-border: #BDC2D7;
|
|
|
|
|
--color-right-menu-active-text: var(--color-primary);
|
|
|
|
|
--color-right-menu-active-background: var(--color-secondary);
|
|
|
|
|
--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-dark: var(--color-complementary);
|
|
|
|
|
--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);
|
2020-05-27 06:44:54 +00:00
|
|
|
|
|
|
|
|
/* 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);
|
2020-05-11 18:20:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button to edit a channel or a project (in project-profile) */
|
|
|
|
|
#project sib-link[next="project-edit"],
|
|
|
|
|
#circle sib-link[next="circle-edit"] {
|
|
|
|
|
background: var(--color-complementary);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#project sib-link[next="project-edit"]:hover,
|
|
|
|
|
#circle sib-link[next="circle-edit"]:hover {
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button to delete a channel */
|
|
|
|
|
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
|
|
|
|
|
background: var(--color-complementary);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button with a pen to edit a user */
|
|
|
|
|
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link {
|
|
|
|
|
background: var(--color-complementary);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link:hover {
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button to join a channel */
|
|
|
|
|
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form {
|
|
|
|
|
background: var(--color-complementary);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover {
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
2020-05-27 06:44:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Directory - my profile*/
|
|
|
|
|
|
|
|
|
|
/* Button to update the avatar */
|
|
|
|
|
#sib-picture-browse,
|
|
|
|
|
#sib-picture-remove {
|
|
|
|
|
background-color: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-complementary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#sib-picture-browse:hover,
|
|
|
|
|
#sib-picture-remove:hover {
|
|
|
|
|
background-color: var(--color-complementary);
|
|
|
|
|
border: 1px solid var(--color-complementary);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
