From 975f600e1d11392ceca63edb3a8cfa1d6c436dbc Mon Sep 17 00:00:00 2001 From: Sebastian Stein Date: Sat, 13 Dec 2025 16:56:14 +0100 Subject: [PATCH] Initial branding for Darmbulanz --- webapp/assets/styles/imports/_branding.scss | 406 ++++++++++++++++++- webapp/components/LoginForm/LoginForm.vue | 2 +- webapp/nuxt.config.js | 4 + webapp/static/favicon.ico | Bin 5558 -> 0 bytes webapp/static/favicon.svg | 1 + webapp/static/img/custom/logo-horizontal.svg | 64 +-- webapp/static/img/custom/logo-squared.svg | 66 +-- 7 files changed, 411 insertions(+), 132 deletions(-) delete mode 100644 webapp/static/favicon.ico create mode 100644 webapp/static/favicon.svg mode change 100644 => 100755 webapp/static/img/custom/logo-horizontal.svg mode change 100644 => 100755 webapp/static/img/custom/logo-squared.svg diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss index 75058595d..ab381763e 100644 --- a/webapp/assets/styles/imports/_branding.scss +++ b/webapp/assets/styles/imports/_branding.scss @@ -1,5 +1,405 @@ -/* +/* * - * Here, all SCSS variables and classes can be adapted to your custom design. + * Here, all SCSS variables and classes can be adapted to your custom design. * -*/ \ No newline at end of file +*/ + +// Todo: Download and add locally +// + +$font-family-heading: 'Dosis', Helvetica, Arial, Lucida, sans-serif; +$font-family-text: 'Dosis', Helvetica, Arial, Lucida, sans-serif; + +// Brand colors +$color-brand: #DC3C22; // MARKE (red) +$color-headings: #3D7AB6; // ÜBERSCHRIFTEN (blue) +$color-text: #112033; // TEXT (dark blue/black) +$color-borders: #FBF5DE; // RÄNDER (beige) +$color-bg: #FBFBFD; // BG (white) +$color-bg-alt: #EAC8A6; // BG ALT (light brown) + +// Primary colors +$color-primary: $color-headings; // Blue for primary button outline +$color-primary-hover: $color-brand; // Red for hover state +$color-primary-active: $color-text; // Dark blue/black for active state +$color-primary-light: color.adjust($color-brand, $lightness: 10%); +$color-primary-dark: color.adjust($color-brand, $lightness: -20%); +$color-primary-inverse: $color-bg; + +// Secondary colors +$color-secondary: $color-headings; +$color-secondary-light: color.adjust($color-headings, $lightness: 30%); +$color-secondary-dark: #112033; // TEXT color for dark variant +$color-secondary-active: color.adjust($color-headings, $lightness: -10%); +$color-secondary-inverse: $color-bg; + +// Tertiary colors for compatibility +$color-tertiary: $color-headings; +$color-tertiary-light: color.adjust($color-headings, $lightness: 30%); + +$text-color-link: $color-primary; +$text-color-link-active: $color-primary-light; + +$background-color-primary: $color-primary; +$background-color-primary-active: $color-primary-active; +$background-color-primary-inverse: $color-bg-alt; + +$border-color-active: $color-primary; + +// Header uses alternative background color (beige) +$color-header-background: $color-bg-alt; +$color-footer-background: $color-secondary-dark; +$color-body-background: $color-bg; +$color-filter-menu-background: $color-bg; + +// Logo dimensions (desktop) +$logo-header-max-width: 60px; +$logo-header-margin-left: 20px; +$logo-header-margin-right: 10px; + +// Logo dimensions (mobile) +$logo-header-max-width-mobile: 60px; +$logo-header-margin-left-mobile: 10px; +$logo-header-margin-right-mobile: 10px; + +$color-locale-menu: $color-primary; + +$color-donation-bar: $color-secondary; +$color-donation-bar-light: $color-secondary-light; +$color-donation-bar-background: $color-borders; // Beige background for empty part +$color-donation-bar-border: $color-secondary; // Blue border + +$color-toast-blue: $color-secondary; +$color-toast-green: $color-tertiary-light; + +$color-ribbon-announcement: $color-secondary; +$color-ribbon-announcement-shadow: color.adjust($color-ribbon-announcement, $lightness: -20%); +$color-ribbon-article: $color-tertiary; +$color-ribbon-article-shadow: color.adjust($color-ribbon-article, $lightness: -20%); +$color-ribbon-event: $color-bg-alt; +$color-ribbon-event-shadow: color.adjust($color-bg-alt, $lightness: -20%); + +$chat-sidemenu-background-over: color.adjust($color-bg-alt, $lightness: -10%); +$chat-sidemenu-background-active: $color-bg-alt; +$chat-message-color: $color-text; +$chat-message-bg-me: $color-bg-alt; +$chat-message-bg-others: $color-bg; +$chat-message-checkmark-seen: $color-primary; +$chat-message-checkmark: white; +$chat-room-color-counter-badge: white; +$chat-room-background-counter-badge: $color-primary; +$chat-icon-add: $color-secondary; +$chat-icon-send: $color-secondary; +$chat-icon-emoji: $color-secondary; + +.vac-avatar { + background-color: $color-secondary !important; +} + +body { + background-color: $color-body-background !important; + font-family: $font-family-text !important; +} + +.ds-button, .ds-chip, .ds-copy-field, .ds-list, .ds-select-search, .ds-tag, .ds-text { + font-family: $font-family-text !important; +} +.ds-heading { + font-family: $font-family-heading !important; +} + +/* "a" link colors */ +a { + color: $color-primary; +} +a:hover { + color: $color-primary-light; +} + +.base-button.--circle.post-add-button-top { + background-color: $color-secondary-active; + border-color: $color-secondary-active; +} +a:hover > .base-button.--circle.post-add-button-top { + background-color: $color-secondary; + border-color: $color-secondary-dark; +} + +/* ds-menu-item link colors */ +a.ds-menu-item-link { + color: $color-secondary; +} +a:hover.ds-menu-item-link { + color: black; +} +.ds-menu-item-link.router-link-exact-active { + color: $color-secondary; + border-left-color: $color-secondary; +} + +/* Avatar menu dropdown text color */ +.avatar-menu-popover { + color: $color-text; + + .ds-menu-item { + color: $color-text; + } + + a { + color: $color-text; + + &:hover { + color: $color-primary-hover; + } + } +} + +.v-popover.open .trigger a { + color: $color-primary; +} + +.main-navigation a { + color: $color-text; +} +.main-navigation .router-link-exact-active { + color: $color-primary !important; +} + +.main-navigation .locale-menu { + color: $color-text; +} + +.main-navigation .base-button { + color: $color-text; + + &:hover { + background-color: $color-primary; + color: white; + border-color: $color-primary; + } +} + +.hc-hashtag a { + color: $color-primary; +} +.hc-hashtag a:hover { + color: $color-primary-light; +} + +.user-teaser .info { + a .slug { + color: $color-text; + } + a:hover .slug { + color: $color-primary; + } +} +.profile-avatar.--no-image { + background-color: $color-secondary; +} +.profile-avatar.--no-image .initials { + font-weight: 600; + color: white; +} +.profile-page-avatar.profile-avatar.--no-image { + background-color: $color-primary; +} +.profile-page-avatar.profile-avatar.--no-image .initials { + color: white; +} + +#footer { + background-color: $color-secondary-dark; +} +#footer a { + color: white; + font-weight: 400; +} +#footer a:hover { + color: $color-bg-alt; +} + +.avatar-menu .profile-avatar { + color: $color-primary; +} + +.profile-avatar .initials { + color: white; +} + +/* chips with primary color */ +.ds-chip-primary { + background-color: $color-tertiary; +} + +/* number count color */ +div.ds-number > p.ds-number-count { + color: $text-color-base; +} + +/* active tab border bottom color */ +div.tab-navigation li.Tabs__tab { + border-bottom-color: $color-primary; + + +/* ds-button with primary color */ +.ds-button-primary { + background-color: transparent; + color: $color-headings; // Blue text + border-color: $color-headings; // Blue border + + &:hover { + background-color: transparent; + color: $color-brand; // Red text on hover + border-color: $color-brand; // Red border on hover + } + + &:active, &.active { + background-color: transparent; + color: $color-headings; // Blue text when active + border-color: $color-text; // Black border when active + } +} + +/* ds-button with secondary color */ +.ds-button-secondary { + background-color: $color-headings; // Blue background + color: white; + border-color: $color-headings; + + &:hover { + background-color: $color-text; // Dark/black background on hover + color: white; + border-color: $color-text; + } + + &:active, &.active { + background-color: $color-headings; // Blue background when active + color: white; + border-color: $color-headings; + } +} + +/* base-button default (non-filled) */ +.base-button:not(.--filled):not(.--danger) { + background-color: transparent; + color: $color-primary; // Blue text + border-color: $color-primary; // Blue border + + &:enabled:hover { + background-color: transparent; + color: $color-primary-hover; // Red text on hover + border-color: $color-primary-hover; // Red border on hover + } + + &:enabled:active { + background-color: transparent; + color: $color-primary; // Blue text when active + border-color: $color-primary-active; // Black border when active + } +} + +/* base-button with filled prop */ +.base-button.--filled { + background-color: $color-secondary; // Blue background + color: white; + border-color: $color-secondary; + + &:enabled:hover { + background-color: $color-secondary-dark; // Dark/black background on hover + color: white; + border-color: $color-secondary-dark; + } + + &:enabled:active { + background-color: $color-secondary; // Blue background when active + color: white; + border-color: $color-secondary; + } +} + +/* color of active filter tags in post teaser */ +span.category-tag.filterActive { + background-color: $color-primary; +} + +/* input */ +div.ds-input-wrap > input:focus-within.ds-input { + border-color: $color-primary; +} +.ds-input:focus { + border-color: $color-primary; +} +.ds-form-item.ds-input-has-focus { + .ds-select, + .ds-select-dropdown { + border-color: $color-primary; + } +} + + +// div .ds-form-item .ds-input-has-focus { +// border-color: $color-primary; +// } +// div.ds-input-has-focus { +// border-color: $color-primary; +// } +// div.ds-select:focus { +// border-color: $color-primary; +// } + +/* checkbox */ +[type="checkbox"] { + accent-color: $color-primary-light; +} + +/* Donation progress bar */ +.progress-bar__goal { + border-color: $color-donation-bar-border !important; + background: $color-donation-bar-background !important; +} + +.progress-bar__progress.color-repeating-linear-gradient { + background: repeating-linear-gradient( + 120deg, + $color-donation-bar 0px, + $color-donation-bar 30px, + $color-donation-bar-light 50px, + $color-donation-bar-light 75px, + $color-donation-bar 95px + ) !important; +} + +.progress-bar__label { + color: $color-text; + font-weight: $font-weight-bold; +} + +/* Main navigation logo max-width and spacing */ +.logo-wrapper { + max-width: $logo-header-max-width; + margin-left: $logo-header-margin-left; + margin-right: $logo-header-margin-right; +} + +.mobil-header-box .logo-container { + max-width: $logo-header-max-width-mobile !important; + margin-left: $logo-header-margin-left-mobile; + margin-right: $logo-header-margin-right-mobile; +} + +/* Filter button menu background */ +.filterButtonMenu { + background-color: $color-filter-menu-background !important; +} + +.editor .base-button { + color: $color-secondary; + border-color: $color-secondary; + + &:hover { + color: white; + background-color: black; + border-color: black; + } +} diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue index 332b3138a..e2013aa85 100644 --- a/webapp/components/LoginForm/LoginForm.vue +++ b/webapp/components/LoginForm/LoginForm.vue @@ -36,7 +36,7 @@ {{ $t('login.forgotPassword') }} - + {{ $t('login.login') }}

diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index edade8f62..3f02e7f2d 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -75,6 +75,10 @@ export default { type: 'image/x-icon', href: '/favicon.ico', }, + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&display=swap', + }, ], }, diff --git a/webapp/static/favicon.ico b/webapp/static/favicon.ico deleted file mode 100644 index b535a3db8c4f259b421d370c3b319d43ed2130b7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5558 zcmeHLc~F$+8UOZV?}NQpj%9&miQoZ2KoJxH6%Z6}$Ail&DxwmMQ9wkDS0ruIWa^}i zO>=aNGfne{b=qi~w3#*?8+F>;X;Q0+F(e+b$=G%>zdp~qEH1d9v8I3Zoq1-z{odz& z?(6*|NhZl9pHHG+pA@u8Qb3X?I(`(gN8td!P($b2hwRKolSBFiT zTCu#b5w!O;@h|$8WQZfW$715LVNA?{QZ8X!au#w^?u9~HhHKU5|Uu5 zJ_v8e7earIL-qs5oae!dA}+lhS7Dy}3`Qg*W81cNah7Q?Eu#58@ps>b40ZYWAvk57F zKki8hAh1abM}Y=u%_i7#B$&z$g#6y;1C9f8)st`*NC>Po!Z9HRsq3{!OY|c>m=3*8 zgVK`HaK5Y^hJTsLok{h}E%Mh?{R8N;8(~PX!W58TPM4rb84uTncSO8}^=DtW@BbTg zqbgwvN-(BM(EF`aGgiPn=P4*D7v*{f)Nwg1L(?$)gE2`(*X@nRMSbJgX0X@)nsnX^ zbH!t@Ejt>D|3UG`Ibg4UiG1@U;XNwOgwJ!nI##?4O|X*rR}8~HN#)J@Qp7ja*na)! zc|_+|h+Xg;>5@VHOE+W-#{khcjBkQmV}`5wje-6l9F7r7MGw^`#R=j=)6z|= zQe{3I(K{gEgiE4D84ca64x0y=2Zo&T& zV&^>#xi;sN7 z*0*1GibtlYFnS2@y}tMxLVv22+L1LJ1D$=$X?&BOF;3bNHD;KHcPqtK?Jq=cx6V04 zwaE*2%U^{IoC_R#Dpv+fr8{A*c|zoAv>qjBZKGN_eJ>=r;%VY5CkQGX>Hl(5>?L@P;4s0FzUPPNcZMWW9=B9~fA|<^ zyDVlG!k?CKf>(*lt-j!CIwdon{u(#tH_1WjCC(~VoW+O3Q(l-(7Y`PoKp11Q$m@9ieqw`^Z z%C#A@4)Zq*?z7(ZP;Iv@eNpspp4S{S_nS&OMco&@m}XwxsCmbThLYtlm33XXQKLT< z_igjkU48s{201{p=L;cvJU39^G?#T>rL){SQtA0h|Ljclo&BvFvsm;9qrM*K*)a?hQijfa;>FDlTvzE6PR|GX0rn{AATfe zBf=4L^L?+;yb`xqQff-XT+Fi>(J+^Got3o4e3EP6Qfej|C%2vBe$2YsYmY*TF_#jO zUYA{e(z*6eFicqgI{hCx@Zf-dnfm-Sr<`j}(zlpZC;4pOZZdtBSwheD0oc+1*cEyw M<0ePn{$_9g14$7TjsO4v diff --git a/webapp/static/favicon.svg b/webapp/static/favicon.svg new file mode 100644 index 000000000..f59da4542 --- /dev/null +++ b/webapp/static/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webapp/static/img/custom/logo-horizontal.svg b/webapp/static/img/custom/logo-horizontal.svg old mode 100644 new mode 100755 index 4121fa08e..7bb5214cc --- a/webapp/static/img/custom/logo-horizontal.svg +++ b/webapp/static/img/custom/logo-horizontal.svg @@ -1,63 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/webapp/static/img/custom/logo-squared.svg b/webapp/static/img/custom/logo-squared.svg old mode 100644 new mode 100755 index 2a926f0a9..7bb5214cc --- a/webapp/static/img/custom/logo-squared.svg +++ b/webapp/static/img/custom/logo-squared.svg @@ -1,65 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +