diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 8642cc0..8cdb1bf 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -112,21 +112,30 @@ --color-chat-grey-3: var(--color-grey-10); /* Directory */ - --color-directory-grey-4: #7A7F85; - --color-directory-grey-5: #F0F3F6; + --color-directory-grey-4: #7A7F85 !important; + --color-directory-grey-5: #F0F3F6 !important; - --color-directory-avatar-background: #E4E8ED; - --color-directory-back-link: #36383B; - --color-directory-border: #DAE2F3; - --color-directory-content-header-border: #DAE2F3; + --color-directory-avatar-background: #E4E8ED !important; + --color-directory-back-link: #36383B !important; + --color-directory-border: #DAE2F3 !important; + --color-directory-content-header-border: #DAE2F3 !important; --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); + --color-directory-send-border: var(--color-complementary) !important; + --color-directory-list-icon: var(--color-primary) !important; + --color-directory-counter-background: var(--color-directory-grey-5) !important; + --color-directory-counter-border: #9BA0A7 !important; + --color-directory-counter-text: #4A4A4A !important; + + --color-directory-paginate: #36383B !important; + --color-directory-paginate-disabled: #9BA0A7 !important; + + --color-directory-form-input: #EDF1FA !important; + --color-directory-form-input-text: var(--color-directory-grey-4) !important; + --color-directory-form-input-active: var(--color-complementary) !important; + --color-directory-form-select-icon: var(--color-complementary) !important; } /* Button to edit a channel or a project (in project-profile) */ @@ -202,17 +211,36 @@ /* 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); +/* Colors for buttons to send a message to a member and to update or remove your profile picture */ +#member-profile>div.profile-card>div.user-profile>div>sib-display>div>sib-action.button.button-primary.bordered, +button#sib-picture-browse.button.button-primary, +button#sib-picture-remove.button.button-primary { + border: 1px solid var(--color-directory-complementary) !important; } -#sib-picture-browse:hover, -#sib-picture-remove:hover { - background-color: var(--color-complementary); - border: 1px solid var(--color-complementary); - color: var(--color-white); +#member-profile sib-action.button.button-primary>sib-link, +button#sib-picture-browse.button.button-primary, +button#sib-picture-remove.button.button-primary { + color: var(--color-directory-complementary) !important; +} + +#member-profile>div.profile-card>div.user-profile>div>sib-display>div>sib-action.button.button-primary.bordered>sib-link::before { + background-color: var(--color-directory-complementary) !important; +} + +/* Hover */ +#member-profile sib-action.button.button-primary:hover, +#member-profile sib-action.button.button-primary:hover>sib-link, +button#sib-picture-browse.button.button-primary:hover, +button#sib-picture-remove.button.button-primary:hover { + color: var(--color-directory-white) !important; + background-color: var(--color-directory-complementary) !important; +} + +#member-profile>div.profile-card>div.user-profile>div>sib-display>div>sib-action.button.button-primary.bordered:hover>sib-link::before { + background-color: var(--color-directory-white) !important; +} + +#members-list .send-display sib-link::before { + background-color: var(--color-directory-complementary)!important; } diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 13c0135..93a91d4 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -131,4 +131,4 @@ $color-212-4-50: hsl(212.7,4.3%,50%); $color-0-0-22: hsl(0,0%,22.7%); $color-203-87-19: hsl(203, 87.8%, 19.2%); -$color-357-67-45: hsl(357,67.5%,45.9%); \ No newline at end of file +$color-357-67-45: hsl(357,67.5%,45.9%); diff --git a/src/styles/base/about.scss b/src/styles/base/about.scss index c7b6230..ead128a 100644 --- a/src/styles/base/about.scss +++ b/src/styles/base/about.scss @@ -44,7 +44,7 @@ cursor: pointer; font-weight: bold; text-transform: uppercase; - width: 25%; + width: 50%; font-size: 1.1rem; align-self: center; padding: 0.5rem 1.5rem;