From 7653b7a9814858c918c9bd5b594d69879b658f21 Mon Sep 17 00:00:00 2001 From: schr16 <Samuel.cyrus.herrmann@mni.thm.de> Date: Mon, 4 Jan 2021 12:54:08 +0100 Subject: [PATCH 1/4] Samuel Cyrus Herrmann 5127661 --- angular.json | 15 ++ docker-compose.yml | 8 +- src/app/lib/available-themes.ts | 6 + src/app/lib/enums/QuizTheme.ts | 1 + src/assets/i18n/de.json | 4 + src/assets/i18n/en.json | 5 + src/assets/theme-hashes.json | 3 + src/assets/themeData.json | 28 ++++ src/environments/environment.ts | 5 +- .../themes/theme-The_Herrmann_Theme.scss | 149 ++++++++++++++++++ 10 files changed, 218 insertions(+), 6 deletions(-) create mode 100644 src/styles/themes/theme-The_Herrmann_Theme.scss diff --git a/angular.json b/angular.json index 6da27969..a236e3b8 100644 --- a/angular.json +++ b/angular.json @@ -58,6 +58,11 @@ "node_modules/@fortawesome/fontawesome-svg-core/styles.css", "node_modules/prism-themes/themes/prism-ghcolors.css", "src/styles/styles.scss", + { + "inject": false, + "input": "src/styles/themes/theme-The_Herrmann_Theme.scss", + "bundleName": "theme-The_Herrmann_Theme-__CSS_FILE_HASH__" + }, { "inject": false, "input": "src/styles/themes/theme-blackbeauty.scss", @@ -116,6 +121,11 @@ "node_modules/@fortawesome/fontawesome-svg-core/styles.css", "node_modules/prism-themes/themes/prism-ghcolors.css", "src/styles/styles.scss", + { + "inject": false, + "input": "src/styles/themes/theme-The_Herrmann_Theme.scss", + "bundleName": "theme-The_Herrmann_Theme-__CSS_FILE_HASH__" + }, { "inject": false, "input": "src/styles/themes/theme-blackbeauty.scss", @@ -168,6 +178,11 @@ "node_modules/@fortawesome/fontawesome-svg-core/styles.css", "node_modules/prism-themes/themes/prism-ghcolors.css", "src/styles/styles.scss", + { + "inject": false, + "input": "src/styles/themes/theme-The_Herrmann_Theme.scss", + "bundleName": "theme-The_Herrmann_Theme-__CSS_FILE_HASH__" + }, { "inject": false, "input": "src/styles/themes/theme-blackbeauty.scss", diff --git a/docker-compose.yml b/docker-compose.yml index 0caad3ed..a0906176 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,7 +10,7 @@ services: args: buildCmd: "PROD" targetUrl: "https://arsnova.click" - themes: "[\"Material\",\"blackbeauty\"]" + themes: "[\"Material\",\"blackbeauty\",\"The_Herrmann_Theme\"]" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true" CHROMIUM_PATH: "/usr/bin/chromium-browser" CHROME_BIN: "/usr/bin/chromium-browser" @@ -26,7 +26,7 @@ services: args: buildCmd: "STAGING_THM" targetUrl: "https://staging.arsnova.click" - themes: "[\"Material\",\"blackbeauty\"]" + themes: "[\"Material\",\"blackbeauty\",\"The_Herrmann_Theme\"]" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true" CHROMIUM_PATH: "/usr/bin/chromium-browser" CHROME_BIN: "/usr/bin/chromium-browser" @@ -42,7 +42,7 @@ services: args: buildCmd: "BETA_THM" targetUrl: "https://beta.arsnova.click" - themes: "[\"westermann-blue\",\"blackbeauty\"]" + themes: "[\"westermann-blue\",\"blackbeauty\",\"The_Herrmann_Theme\"]" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true" CHROMIUM_PATH: "/usr/bin/chromium-browser" CHROME_BIN: "/usr/bin/chromium-browser" @@ -67,7 +67,7 @@ services: args: buildCmd: "WESTERMANN" targetUrl: "https://test01.ars.sbzo.de" - themes: "[\"westermann-blue\",\"blackbeauty\"]" + themes: "[\"westermann-blue\",\"blackbeauty\",\"The_Herrmann_Theme\"]" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true" CHROMIUM_PATH: "/usr/bin/chromium-browser" CHROME_BIN: "/usr/bin/chromium-browser" diff --git a/src/app/lib/available-themes.ts b/src/app/lib/available-themes.ts index f57f8082..7604cea7 100644 --- a/src/app/lib/available-themes.ts +++ b/src/app/lib/available-themes.ts @@ -17,5 +17,11 @@ export const themes: Array<ITheme> = [ preview: 'component.theme_switcher.themes.westermann-blue.preview', description: 'component.theme_switcher.themes.westermann-blue.description', id: QuizTheme.WestermannBlue, + }, { + name: 'component.theme_switcher.themes.The_Herrmann_Theme.name', + preview: 'component.theme_switcher.themes.The_Herrmann_Theme.preview', + description: 'component.theme_switcher.themes.The_Herrmann_Theme.description', + id: QuizTheme.TheHerrmannTheme, }, + ]; diff --git a/src/app/lib/enums/QuizTheme.ts b/src/app/lib/enums/QuizTheme.ts index f7414f79..9f15f0bf 100644 --- a/src/app/lib/enums/QuizTheme.ts +++ b/src/app/lib/enums/QuizTheme.ts @@ -2,6 +2,7 @@ export enum QuizTheme { // ArsnovaDotClickContrast = 'arsnova-dot-click-contrast', // Material = 'Material', // Blackbeauty = 'blackbeauty', // + TheHerrmannTheme = 'The_Herrmann_Theme', // // DecentBlue = 'decent-blue', // // Elegant = 'elegant', // // GreyBlueLime = 'GreyBlue-Lime', // diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 7eb37e7f..fc412d49 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -565,6 +565,10 @@ "black_beauty": { "name": "Black Beauty (beamertauglich)", "description": "Dunkles Design" + }, + "The_Herrmann_Theme": { + "name": "TheHerrmannTheme", + "description": "TheHerrmannTheme" }, "material": { "name": "Material Design Colors", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 7a1161d6..0aa6a8c7 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -562,6 +562,11 @@ "theme_switcher": { "set_theme": "Choose a theme", "themes": { + + "The_Herrmann_Theme": { + "name": "TheHerrmannTheme", + "description": "TheHerrmannTheme" + }, "black_beauty": { "name": "Black Beauty (beamer-suitable)", "description": "Dark mode" diff --git a/src/assets/theme-hashes.json b/src/assets/theme-hashes.json index 7f8c7018..76df205c 100644 --- a/src/assets/theme-hashes.json +++ b/src/assets/theme-hashes.json @@ -18,4 +18,7 @@ "theme": "spiritual-purple" },{"hash": "__CSS_FILE_HASH__", "theme": "westermann-blue" +},{"hash": "__CSS_FILE_HASH__", + "theme": "The_Herrmann_Theme" }] + diff --git a/src/assets/themeData.json b/src/assets/themeData.json index 0a1506aa..0e46901a 100644 --- a/src/assets/themeData.json +++ b/src/assets/themeData.json @@ -258,5 +258,33 @@ "fg": "#000000", "bg": "#B2DFDB" } + +}, + "The_Herrmann_Theme": { + "quizNameRowStyle": { + "fg": "#FFFFFF", + "bg": "#408743" + }, + + "exportedAtRowStyle": { + "fg": "#FFFFFF", + "bg": "#EFF4FA" + }, + "statisticsRowStyle": { + "fg": "#000000", + "bg": "#B2DFDB" + }, + "attendeeHeaderGroupRowStyle": { + "fg": "#FFFFFF", + "bg": "#009688" + }, + "attendeeHeaderRowStyle": { + "fg": "#000000", + "bg": "#FF9800" + }, + "attendeeEntryRowStyle": { + "fg": "#000000", + "bg": "#B2DFDB" + } } } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7ce883e7..0bdcdf65 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -11,8 +11,8 @@ export const environment: IEnvironment = { serverEndpoint: '', stompConfig: { endpoint: 'ws://localhost:15674/ws', - user: 'arsnova-click', - password: 'K3BHZQMHsxh6XQ5a', + user: 'sammy', + password: 'cyrocy', vhost: '/', }, leaderboardAmount: 5, @@ -32,6 +32,7 @@ export const environment: IEnvironment = { availableQuizThemes: [ QuizTheme.Material, QuizTheme.Blackbeauty, + QuizTheme.TheHerrmannTheme, ], defaultTheme: QuizTheme.Material, darkModeCheckEnabled: true, diff --git a/src/styles/themes/theme-The_Herrmann_Theme.scss b/src/styles/themes/theme-The_Herrmann_Theme.scss new file mode 100644 index 00000000..f2a20b13 --- /dev/null +++ b/src/styles/themes/theme-The_Herrmann_Theme.scss @@ -0,0 +1,149 @@ +$primary: #C6EBF5; +$secondary: #C6EBF5; +$invers: #4EC79E; +$light: #212121; +$dark: #c6ebf5; +$info: #212121; +$success: #49C79E; +$warning: #F17871; +$danger: #E6195B; + +$primary_text_color: #C6EBF5; +$secondary_text_color: #C6EBF5; + +$modal-content-bg: #212121; +$modal-content-color: $dark; +$modal-header-border-color: transparent; + +$body-bg: $light; +$body-color: $primary_text_color; + +$text-muted: $secondary_text_color; + +$bg-pre: $light; + +$border-loader_wrapper-outer_spin: $dark; +$border-loader_wrapper-middle_spin: #f05454; +$border-loader_wrapper-inner_spin: #f05454; + +$bg-answer-result-correct: #4EC79E; // change +$fg-answer-result-correct: $primary_text_color; +$bg-answer-result-partially-correct: $invers; +$fg-answer-result-partially-correct: $primary_text_color; +$bg-answer-result-wrong: #E6195B; +$fg-answer-result-wrong: $primary_text_color; + +$progress-bg: $light; + +$link-color: $danger; +$link-decoration: none; +$link-hover-color: $warning; +$link-hover-decoration: underline; + +$corner-radius: 10px; +$splash-screen-corner-radius: 10px; + +$font-size-base: 1rem; +$small-font-size: 80%; + +$statistics-icon-opacity: 0.2; + +$paragraph-margin-bottom: 0; + +$input-focus-border-color: none; + +@import "prebuild"; + +$modal-footer-border-color: $border-color; + +$theme-colors: map-merge( + $theme-colors, + ( + invers:$invers, + ) +); + +$colors: map-merge( + $colors, + ( + ) +); + +$bg-footer: $light; +$footer-color: $dark; + +$colorChangingBg: ( + 0: (fg: #212121, bg: #49C79E), + 50: (fg: $dark, bg: $light), + 100: (fg: $dark, bg: $light) +); + +$colorChangingOwnNick: ( + 0: (fg: $dark, bg: $danger), + 100: (fg: $dark, bg: $danger) +); + +$colorChangingArs: ( + 0: (fg: $dark, bg: transparent), + 25: (fg: $danger, bg: transparent), + 50: (fg: $dark, bg: transparent), + 75: (fg: $dark, bg: transparent), + 100: (fg: $dark, bg: transparent) +); + +$colorChangingNova: ( + 0: (fg: $dark, bg: transparent), + 25: (fg: $dark, bg: transparent), + 50: (fg: $danger, bg: transparent), + 75: (fg: $dark, bg: transparent), + 100: (fg: $dark, bg: transparent) +); + +$colorChangingDot: ( + 0: (fg: $dark, bg: transparent), + 25: (fg: $dark, bg: transparent), + 50: (fg: $dark, bg: transparent), + 75: (fg: $danger, bg: transparent), + 100: (fg: $dark, bg: transparent) +); + +$colorChangingClick: ( + 0: (fg: $danger, bg: transparent), + 25: (fg: $dark, bg: transparent), + 50: (fg: $dark, bg: transparent), + 75: (fg: $dark, bg: transparent), + 100: (fg: $danger, bg: transparent) +); + +$logo-bg: transparent; +$logo-fg: (".arsnova-logo-ars": $dark, ".arsnova-logo-nova": $danger, ".arsnova-logo-click": $dark); + +$popover-body-color: initial; + +$code-color: $primary_text_color; + +@import "postbuild"; + +.btn-secondary { + color: $dark; + border-color: $dark; + background-color:$light; +} + +.card { + color: $dark; + background-color:$light; +} + +universal-cookie-consent { + --ucc-color-primary: rebeccapurple; + --ucc-color-primary-contrast: $dark; + --ucc-color-secondary: #00796B; + --ucc-color-secondary-contrast: $dark; + --ucc-text-color: $light; + --ucc-link-color: $danger; + --ucc-backdrop-color: rgba(0, 0, 0, 0.6); + --ucc-modal-background: $light; + --ucc-switch-background: $light; + --ucc-consent-type-description-color: rgba(0,0,0,0.8); +} -- GitLab From 3aa7fe36fc34a9a2f31660c554398edbe0b56bf7 Mon Sep 17 00:00:00 2001 From: schr16 <Samuel.cyrus.herrmann@mni.thm.de> Date: Mon, 4 Jan 2021 16:52:35 +0100 Subject: [PATCH 2/4] Samuel Cyrus Herrmann 5127661 --- src/styles/themes/theme-The_Herrmann_Theme.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/styles/themes/theme-The_Herrmann_Theme.scss b/src/styles/themes/theme-The_Herrmann_Theme.scss index f2a20b13..79052a7f 100644 --- a/src/styles/themes/theme-The_Herrmann_Theme.scss +++ b/src/styles/themes/theme-The_Herrmann_Theme.scss @@ -1,4 +1,4 @@ -$primary: #C6EBF5; +$primary: #212121; $secondary: #C6EBF5; $invers: #4EC79E; $light: #212121; @@ -9,7 +9,7 @@ $warning: #F17871; $danger: #E6195B; $primary_text_color: #C6EBF5; -$secondary_text_color: #C6EBF5; +$secondary_text_color: #212121; $modal-content-bg: #212121; $modal-content-color: $dark; @@ -26,7 +26,7 @@ $border-loader_wrapper-outer_spin: $dark; $border-loader_wrapper-middle_spin: #f05454; $border-loader_wrapper-inner_spin: #f05454; -$bg-answer-result-correct: #4EC79E; // change +$bg-answer-result-correct: #4EC79E; $fg-answer-result-correct: $primary_text_color; $bg-answer-result-partially-correct: $invers; $fg-answer-result-partially-correct: $primary_text_color; @@ -147,3 +147,7 @@ universal-cookie-consent { --ucc-switch-background: $light; --ucc-consent-type-description-color: rgba(0,0,0,0.8); } +.modal-body{ + color: $dark; + background-color: $light; +} -- GitLab From 3ac4d1d97aaaeceac536ccfbe464b3e74a908525 Mon Sep 17 00:00:00 2001 From: schr16 <Samuel.cyrus.herrmann@mni.thm.de> Date: Mon, 4 Jan 2021 16:52:35 +0100 Subject: [PATCH 3/4] Samuel Cyrus Herrmann 5127661 --- src/styles/themes/theme-The_Herrmann_Theme.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/styles/themes/theme-The_Herrmann_Theme.scss b/src/styles/themes/theme-The_Herrmann_Theme.scss index f2a20b13..79052a7f 100644 --- a/src/styles/themes/theme-The_Herrmann_Theme.scss +++ b/src/styles/themes/theme-The_Herrmann_Theme.scss @@ -1,4 +1,4 @@ -$primary: #C6EBF5; +$primary: #212121; $secondary: #C6EBF5; $invers: #4EC79E; $light: #212121; @@ -9,7 +9,7 @@ $warning: #F17871; $danger: #E6195B; $primary_text_color: #C6EBF5; -$secondary_text_color: #C6EBF5; +$secondary_text_color: #212121; $modal-content-bg: #212121; $modal-content-color: $dark; @@ -26,7 +26,7 @@ $border-loader_wrapper-outer_spin: $dark; $border-loader_wrapper-middle_spin: #f05454; $border-loader_wrapper-inner_spin: #f05454; -$bg-answer-result-correct: #4EC79E; // change +$bg-answer-result-correct: #4EC79E; $fg-answer-result-correct: $primary_text_color; $bg-answer-result-partially-correct: $invers; $fg-answer-result-partially-correct: $primary_text_color; @@ -147,3 +147,7 @@ universal-cookie-consent { --ucc-switch-background: $light; --ucc-consent-type-description-color: rgba(0,0,0,0.8); } +.modal-body{ + color: $dark; + background-color: $light; +} -- GitLab From 346ccbbb93b8dc17772ce61f0951412a1da8bb88 Mon Sep 17 00:00:00 2001 From: schr16 <Samuel.cyrus.herrmann@mni.thm.de> Date: Thu, 7 Jan 2021 14:20:47 +0100 Subject: [PATCH 4/4] Samuel Cyrus Herrmann 5127661 --- .../themes/theme-The_Herrmann_Theme.scss | 107 +++++++++++------- 1 file changed, 63 insertions(+), 44 deletions(-) diff --git a/src/styles/themes/theme-The_Herrmann_Theme.scss b/src/styles/themes/theme-The_Herrmann_Theme.scss index 79052a7f..e788af90 100644 --- a/src/styles/themes/theme-The_Herrmann_Theme.scss +++ b/src/styles/themes/theme-The_Herrmann_Theme.scss @@ -1,28 +1,28 @@ $primary: #212121; -$secondary: #C6EBF5; +$secondary: #c6ebf5; $invers: #4EC79E; -$light: #212121; -$dark: #c6ebf5; +$light: #c6ebf5; +$dark: #212121 ; $info: #212121; $success: #49C79E; $warning: #F17871; $danger: #E6195B; -$primary_text_color: #C6EBF5; -$secondary_text_color: #212121; +$primary_text_color: $light; +$secondary_text_color: $dark; $modal-content-bg: #212121; -$modal-content-color: $dark; +$modal-content-color: $primary_text_color; $modal-header-border-color: transparent; -$body-bg: $light; -$body-color: $primary_text_color; +$body-bg: $dark; +$body-color: $light; $text-muted: $secondary_text_color; -$bg-pre: $light; +$bg-pre: $dark; -$border-loader_wrapper-outer_spin: $dark; +$border-loader_wrapper-outer_spin: $light; $border-loader_wrapper-middle_spin: #f05454; $border-loader_wrapper-inner_spin: #f05454; @@ -33,7 +33,7 @@ $fg-answer-result-partially-correct: $primary_text_color; $bg-answer-result-wrong: #E6195B; $fg-answer-result-wrong: $primary_text_color; -$progress-bg: $light; +$progress-bg: $dark; $link-color: $danger; $link-decoration: none; @@ -69,54 +69,54 @@ $colors: map-merge( ) ); -$bg-footer: $light; -$footer-color: $dark; +$bg-footer: $dark; +$footer-color: $light; $colorChangingBg: ( 0: (fg: #212121, bg: #49C79E), - 50: (fg: $dark, bg: $light), - 100: (fg: $dark, bg: $light) + 50: (fg: $light, bg: $dark), + 100: (fg: $light, bg: $dark) ); $colorChangingOwnNick: ( - 0: (fg: $dark, bg: $danger), - 100: (fg: $dark, bg: $danger) + 0: (fg: $light, bg: $danger), + 100: (fg: $light, bg: $danger) ); $colorChangingArs: ( - 0: (fg: $dark, bg: transparent), + 0: (fg: $light, bg: transparent), 25: (fg: $danger, bg: transparent), - 50: (fg: $dark, bg: transparent), - 75: (fg: $dark, bg: transparent), - 100: (fg: $dark, bg: transparent) + 50: (fg: $light, bg: transparent), + 75: (fg: $light, bg: transparent), + 100: (fg: $light, bg: transparent) ); $colorChangingNova: ( - 0: (fg: $dark, bg: transparent), - 25: (fg: $dark, bg: transparent), + 0: (fg: $light, bg: transparent), + 25: (fg: $light, bg: transparent), 50: (fg: $danger, bg: transparent), - 75: (fg: $dark, bg: transparent), - 100: (fg: $dark, bg: transparent) + 75: (fg: $light, bg: transparent), + 100: (fg: $light, bg: transparent) ); $colorChangingDot: ( - 0: (fg: $dark, bg: transparent), - 25: (fg: $dark, bg: transparent), - 50: (fg: $dark, bg: transparent), + 0: (fg: $light, bg: transparent), + 25: (fg: $light, bg: transparent), + 50: (fg: $light, bg: transparent), 75: (fg: $danger, bg: transparent), - 100: (fg: $dark, bg: transparent) + 100: (fg: $light, bg: transparent) ); $colorChangingClick: ( 0: (fg: $danger, bg: transparent), - 25: (fg: $dark, bg: transparent), - 50: (fg: $dark, bg: transparent), - 75: (fg: $dark, bg: transparent), + 25: (fg: $light, bg: transparent), + 50: (fg: $light, bg: transparent), + 75: (fg: $light, bg: transparent), 100: (fg: $danger, bg: transparent) ); $logo-bg: transparent; -$logo-fg: (".arsnova-logo-ars": $dark, ".arsnova-logo-nova": $danger, ".arsnova-logo-click": $dark); +$logo-fg: (".arsnova-logo-ars": $light, ".arsnova-logo-nova": $danger, ".arsnova-logo-click": $light); $popover-body-color: initial; @@ -125,29 +125,48 @@ $code-color: $primary_text_color; @import "postbuild"; .btn-secondary { - color: $dark; - border-color: $dark; - background-color:$light; + color: $light; + border-color: $light; + background-color:$dark; } .card { + color: $light; + background-color:$dark; +} +.card-body{ + color: $light; + background-color:$dark; +} +.card-header{ + color: $light; + background-color:$dark; +} +input{ + color: $light; + background-color:$dark; +} +.custom-select{ + color: $light; + background-color:$dark; +} +.list-group-item, .d-inline-block{ color: $dark; - background-color:$light; } universal-cookie-consent { --ucc-color-primary: rebeccapurple; - --ucc-color-primary-contrast: $dark; + --ucc-color-primary-contrast: $light; --ucc-color-secondary: #00796B; - --ucc-color-secondary-contrast: $dark; - --ucc-text-color: $light; + --ucc-color-secondary-contrast: $light; + --ucc-text-color: $dark; --ucc-link-color: $danger; --ucc-backdrop-color: rgba(0, 0, 0, 0.6); - --ucc-modal-background: $light; - --ucc-switch-background: $light; + --ucc-modal-background: $dark; + --ucc-switch-background: $dark; --ucc-consent-type-description-color: rgba(0,0,0,0.8); } .modal-body{ - color: $dark; - background-color: $light; + color: $light; + background-color: $dark; } -- GitLab