mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-02-06 09:56:03 +00:00
Initial branding for Darmbulanz
This commit is contained in:
Sebastian Stein
parent
d751e7090f
commit
975f600e1d
@ -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.
|
||||
*
|
||||
*/
|
||||
*/
|
||||
|
||||
// Todo: Download and add locally
|
||||
// <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&display=swap" rel="stylesheet">
|
||||
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<nuxt-link to="/password-reset/request">
|
||||
{{ $t('login.forgotPassword') }}
|
||||
</nuxt-link>
|
||||
<base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
|
||||
<base-button :loading="pending" name="submit" type="submit" icon="sign-in">
|
||||
{{ $t('login.login') }}
|
||||
</base-button>
|
||||
<p>
|
||||
|
||||
@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
1
webapp/static/favicon.svg
Normal file
1
webapp/static/favicon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.1 80.1"><defs><style>.cls-1{fill:#fbfbfd;}.cls-2{fill:#dd3b21;}.cls-3{fill:#3e74b7;}.cls-4{fill:#eac8a6;}</style></defs><rect class="cls-1" width="80.1" height="80.1" rx="16.03"/><path class="cls-2" d="M73.58,25.17a12.88,12.88,0,0,0-4.87-4.75,12.3,12.3,0,0,0-6-1.62,12.47,12.47,0,0,0-6.21,1.67,13.81,13.81,0,0,0-4.92,4.76,13.3,13.3,0,0,0-2,7.32V62.86s0,.11,0,.16H75.48V33.11A15.06,15.06,0,0,0,73.58,25.17Z"/><path class="cls-2" d="M42.26,62.74V33.11a15.06,15.06,0,0,0-1.9-7.94,12.88,12.88,0,0,0-4.87-4.75,12.34,12.34,0,0,0-5.92-1.62,12.78,12.78,0,0,0-5.9,1.51l.47.27a13.9,13.9,0,0,1,4.64,4.92,14.22,14.22,0,0,1,1.79,7.16v30.2a.86.86,0,0,0,0,.16h11.7A2.46,2.46,0,0,1,42.26,62.74Z"/><path class="cls-3" d="M16.44,33.11a14.6,14.6,0,0,1,1.95-7.77,13.57,13.57,0,0,1,5-4.87l.3-.16a11.75,11.75,0,0,0-5.85-1.51,12.8,12.8,0,0,0-6.26,1.67,13.49,13.49,0,0,0-5,4.87,14.51,14.51,0,0,0-2,7.77V63h11.8a2.46,2.46,0,0,0,0-.28Z"/><path class="cls-4" d="M30.57,32.66a14.22,14.22,0,0,0-1.79-7.16,13.9,13.9,0,0,0-4.64-4.92l-.47-.27-.3.16a13.57,13.57,0,0,0-5,4.87,14.6,14.6,0,0,0-1.95,7.77V62.74a2.46,2.46,0,0,1,0,.28H30.58a.86.86,0,0,1,0-.16Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
64
webapp/static/img/custom/logo-horizontal.svg
Normal file → Executable file
64
webapp/static/img/custom/logo-horizontal.svg
Normal file → Executable file
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 6.3 KiB |
66
webapp/static/img/custom/logo-squared.svg
Normal file → Executable file
66
webapp/static/img/custom/logo-squared.svg
Normal file → Executable file
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 6.3 KiB |
Loading…
x
Reference in New Issue
Block a user