From 5f7fcb90189f28152132fd627ce87d3ea85812a4 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Thu, 29 Apr 2021 21:58:20 +0200 Subject: [PATCH] make all themes basically working with bs5 Signed-off-by: Michael Weimann migrate buttons and badges Signed-off-by: Michael Weimann upgrade bootstrap, fix devtool remove postcss-preset-env remove npm-run-all add theme info to design add theme configs for 2-15 make all themes compile fix node env in script refactor theme config make all themes basically working fix sass 3rd party warnings replace slash div by math.div --- README.md | 2 +- config/config.default.php | 83 +- includes/pages/user_settings.php | 8 +- includes/sys_form.php | 4 +- package.json | 13 +- resources/assets/themes/base.scss | 15 +- resources/assets/themes/cyborg_styles.scss | 1 + resources/assets/themes/cyborg_variables.scss | 93 +- resources/assets/themes/theme1.scss | 64 +- resources/assets/themes/theme10.scss | 13 +- resources/assets/themes/theme11.scss | 29 +- resources/assets/themes/theme12.scss | 29 +- resources/assets/themes/theme13.scss | 28 +- resources/assets/themes/theme14.scss | 28 +- resources/assets/themes/theme15.scss | 24 +- resources/assets/themes/theme2.scss | 16 +- resources/assets/themes/theme3.scss | 6 +- resources/assets/themes/theme4.scss | 32 +- resources/assets/themes/theme5.scss | 16 +- resources/assets/themes/theme6.scss | 28 +- resources/assets/themes/theme7.scss | 49 +- resources/assets/themes/theme8.scss | 14 +- resources/assets/themes/theme9.scss | 13 +- resources/views/layouts/app.twig | 3 +- resources/views/layouts/parts/navbar.twig | 2 +- resources/views/macros/base.twig | 2 +- resources/views/macros/form.twig | 12 +- resources/views/pages/design.twig | 24 +- src/Controllers/DesignController.php | 11 +- src/Controllers/Metrics/Controller.php | 6 +- src/Renderer/Twig/Extensions/Globals.php | 14 +- .../Controllers/Metrics/ControllerTest.php | 2 +- .../Unit/Controllers/DesignControllerTest.php | 2 +- .../Controllers/Metrics/ControllerTest.php | 6 +- webpack.config.js | 17 +- yarn.lock | 2679 ++++++----------- 36 files changed, 1370 insertions(+), 2018 deletions(-) diff --git a/README.md b/README.md index 1a3e9a5d..aa029c90 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ The Engelsystem may be installed manually or by using the provided [docker setup * Recommended: Directory Listing should be disabled. * There must be a MySQL database set up with a user who has full rights to that database. * If necessary, create a ```config/config.php``` to override values from ```config/config.default.php```. - * To remove values from the `footer_items`, `available_themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed. + * To remove values from the `footer_items`, `themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed. * To import the database, the ```bin/migrate``` script has to be run. If you can't execute scripts, you can use the `initial-install.sql` file from the release zip. * In the browser, login with credentials ```admin``` : ```asdfasdf``` and change the password. diff --git a/config/config.default.php b/config/config.default.php index b42c11c8..e9e0a265 100644 --- a/config/config.default.php +++ b/config/config.default.php @@ -106,24 +106,71 @@ return [ // Default theme, 1=style1.css 'theme' => env('THEME', 1), - // Available themes - 'available_themes' => [ - '15' => 'Engelsystem DiVOC R2R', - '14' => 'Engelsystem rC3 teal (2020)', - '13' => 'Engelsystem rC3 violet (2020)', - '12' => 'Engelsystem 36c3 (2019)', - '10' => 'Engelsystem cccamp19 green (2019)', - '9' => 'Engelsystem cccamp19 yellow (2019)', - '8' => 'Engelsystem cccamp19 blue (2019)', - '7' => 'Engelsystem 35c3 dark (2018)', - '6' => 'Engelsystem 34c3 dark (2017)', - '5' => 'Engelsystem 34c3 light (2017)', - '4' => 'Engelsystem 33c3 (2016)', - '3' => 'Engelsystem 32c3 (2015)', - '2' => 'Engelsystem cccamp15', - '11' => 'Engelsystem high contrast', - '0' => 'Engelsystem light', - '1' => 'Engelsystem dark', + 'themes' => [ + 15 => [ + 'name' => 'Engelsystem DiVOC R2R', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 14 => [ + 'name' => 'Engelsystem rC3 teal (2020)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 13 => [ + 'name' => 'Engelsystem rC3 violet (2020)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 12 => [ + 'name' => 'Engelsystem 36c3 (2019)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 10 => [ + 'name' => 'Engelsystem cccamp19 green (2019)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 9 => [ + 'name' => 'Engelsystem cccamp19 yellow (2019)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 8 => [ + 'name' => 'Engelsystem cccamp19 blue (2019)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 7 => [ + 'name' => 'Engelsystem 35c3 dark (2018)', + 'navbar_classes' => 'navbar-primary bg-black border-primary', + ], + 6 => [ + 'name' => 'Engelsystem 34c3 dark (2017)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 5 => [ + 'name' => 'Engelsystem 34c3 light (2017)', + 'navbar_classes' => 'navbar-light bg-light', + ], + 4 => [ + 'name' => 'Engelsystem 33c3 (2016)', + 'navbar_classes' => 'navbar-dark bg-darker border-dark', + ], + 3 => [ + 'name' => 'Engelsystem 32c3 (2015)', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 2 => [ + 'name' => 'Engelsystem cccamp15', + 'navbar_classes' => 'navbar-light bg-light', + ], + 11 => [ + 'name' => 'Engelsystem high contrast', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], + 0 => [ + 'name' => 'Engelsystem light', + 'navbar_classes' => 'navbar-light bg-light', + ], + 1 => [ + 'name' => 'Engelsystem dark', + 'navbar_classes' => 'navbar-dark bg-black border-dark', + ], ], // Redirect to this site after logging in or when pressing the top-left button diff --git a/includes/pages/user_settings.php b/includes/pages/user_settings.php index 4469db47..32302af7 100644 --- a/includes/pages/user_settings.php +++ b/includes/pages/user_settings.php @@ -169,7 +169,13 @@ function user_settings() { $request = request(); $config = config(); - $themes = config('available_themes'); + $themesConfig = config('themes'); + + $themes = []; + + foreach ($themesConfig as $themeIndex => $themeConfig) { + $themes[$themeIndex] = $themeConfig['name']; + } $enable_tshirt_size = config('enable_tshirt_size'); $tshirt_sizes = config('tshirt_sizes'); diff --git a/includes/sys_form.php b/includes/sys_form.php index 82dcb3bb..1a09a58a 100644 --- a/includes/sys_form.php +++ b/includes/sys_form.php @@ -426,10 +426,10 @@ function form_select($name, $label, $values, $selected, $selectText = '') function form_element($label, $input, $for = '') { if (empty($label)) { - return '
' . $input . '
'; + return '
' . $input . '
'; } - return '
' . '' . $input . '
'; + return '
' . '' . $input . '
'; } /** diff --git a/package.json b/package.json index 80a55ef3..95ad7790 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,14 @@ "author": "https://github.com/engelsystem/engelsystem/contributors", "license": "GPL-2.0-or-later", "scripts": { - "build": "NODE_ENV=production run-s build:clean build:webpack", + "build": "(export NODE_ENV=production && yarn build:clean && yarn build:webpack)", "build:clean": "rimraf public/assets", "build:webpack": "webpack", "build:watch": "webpack --watch" }, "dependencies": { "@popperjs/core": "^2.9.2", - "bootstrap": "5.0.0-beta3", + "bootstrap": "^5.0.0", "chart.js": "^2.9.3", "core-js": "^3.6.5", "eonasdan-bootstrap-datetimepicker": "^4.17.47", @@ -32,15 +32,12 @@ "css-loader": "^5.2.2", "css-minimizer-webpack-plugin": "^2.0.0", "file-loader": "^6.1.0", - "mini-css-extract-plugin": "^1.4.1", - "mkdirp": "^1.0.4", - "npm-run-all": "^4.1.3", + "mini-css-extract-plugin": "^1.6.0", "postcss": "^8.2.8", "postcss-loader": "^5.2.0", - "postcss-preset-env": "^6.7.0", "rimraf": "^3.0.2", - "sass": "^1.32.8", - "sass-loader": "^10.1.1", + "sass": "^1.35.1", + "sass-loader": "^12.0.0", "style-loader": "^2.0.0", "terser-webpack-plugin": "^5.1.1", "webpack": "^5.33.2", diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss index 29b6ce4a..9b2b1234 100644 --- a/resources/assets/themes/base.scss +++ b/resources/assets/themes/base.scss @@ -4,7 +4,18 @@ $cursor-disabled: false; $link-decoration: none !default; $link-hover-decoration: underline !default; +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; + +$custom-colors: ( + black: #000 +); + +$theme-colors: map-merge($theme-colors, $custom-colors); + @import "~bootstrap/scss/bootstrap"; + @import "~bootstrap-icons/font/bootstrap-icons.css"; @import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"; @import "~select2/dist/css/select2.css"; @@ -13,7 +24,7 @@ $link-hover-decoration: underline !default; $navbar-height: 3.125rem; body { - padding-top: 50px; + padding-top: 70px; } .footer a { @@ -47,7 +58,7 @@ a .icon-icon_angel { } .navbar-brand .icon-icon_angel { - background-color: $navbar-dark-brand-color; + background-color: $body-color; } table a > .icon-icon_angel { diff --git a/resources/assets/themes/cyborg_styles.scss b/resources/assets/themes/cyborg_styles.scss index 27fddcce..462e7a83 100644 --- a/resources/assets/themes/cyborg_styles.scss +++ b/resources/assets/themes/cyborg_styles.scss @@ -170,3 +170,4 @@ code { background-color: $input-bg-disabled; color: $input-color; } + diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss index 4ea19257..72280259 100644 --- a/resources/assets/themes/cyborg_variables.scss +++ b/resources/assets/themes/cyborg_variables.scss @@ -24,36 +24,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +@use "sass:math"; + // Cyborg 3.2.0 // Variables // -------------------------------------------------- //== Colors -// + //## Gray and brand colors for use across Bootstrap. - // needs change $gray-darker: #222; // #222 $gray-dark: #333; // #333 $gray: #555; // #555 $gray-light: #999; // #999 $gray-lighter: #eee; // #eee -$primary: #99ba00; -$success: #99ba00; -$info: #0076ba; -$warning: #ffc600; -$danger: #d9534f; +$primary: #437aca !default; +$success: #99ba00 !default; +$info: #0076ba !default; +$warning: #ffc600 !default; +$danger: #d9534f !default; //== Scaffolding // //## Settings for some of the most global styles. -$body-bg: #060606; +$body-bg: #060606 !default; $body-color: $gray-light; //** Global text color on ``. -$text-color: $gray-light; -$text-muted: $gray-light; +$text-color: $gray-light; +$text-muted: $gray-light !default; //** Global textual link color. $link-color: $primary; @@ -65,8 +66,8 @@ $link-hover-color: $link-color; // //## Font, line-height, and color for body text, headings, and more. -$font-family-serif: Georgia, "Times New Roman", Times, serif; -$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif !default; //** Default monospace fonts for ``, ``, and `
`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-family-base:        $font-family-sans-serif;
@@ -88,7 +89,7 @@ $line-height-base:        1.428571429; // 20/14
 $line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
 
 //** By default, this inherits from the ``.
-$headings-font-family:    $font-family-base;
+$headings-font-family:    $font-family-base !default;
 $headings-font-weight:    500;
 $headings-line-height:    1.1;
 $headings-color:          #fff;
@@ -160,53 +161,19 @@ $table-bg-active:               $table-bg-hover;
 //** Border color for table and cell borders.
 $table-border-color:            $gray-dark;
 
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-$btn-font-weight:                normal;
-
-$btn-default-color:              #000;
-$btn-default-bg:                 $gray-light;
-$btn-default-border:             darken($btn-default-bg, 10%);
-
-$btn-primary-color:              $btn-default-color;
-$btn-primary-bg:                 $primary;
-$btn-primary-border:             darken($btn-primary-bg, 10%);
-
-$btn-success-color:              $btn-default-color;
-$btn-success-bg:                 $success;
-$btn-success-border:             darken($btn-success-bg, 10%);
-
-$btn-info-color:                 $btn-default-color;
-$btn-info-bg:                    $info;
-$btn-info-border:                darken($btn-info-bg, 10%);
-
-$btn-warning-color:              $btn-default-color;
-$btn-warning-bg:                 $warning;
-$btn-warning-border:             darken($btn-warning-bg, 10%);
-
-$btn-danger-color:               $btn-default-color;
-$btn-danger-bg:                  $danger;
-$btn-danger-border:              darken($btn-danger-bg, 10%);
-
-$btn-link-disabled-color:        $gray-light;
-
-
 //== Forms
 //
 //##
 
 //** `` background color
-$input-bg:                       #000;
+$input-bg:                       $gray-darker;
 //** `` background color
 $input-bg-disabled:              $gray-darker;
 
 //** Text color for ``s
 $input-color:                    $text-color;
 //** `` border color
-$input-border:                   $gray-dark;
+$input-border-color:             $gray-dark;
 //** `` border radius
 $input-border-radius:            $border-radius-base;
 //** Border color for inputs on focus
@@ -228,8 +195,9 @@ $legend-border-color:            $gray-dark;
 //** Background color for textual input addons
 $input-group-addon-bg:           $gray-light;
 //** Border color for textual input addons
-$input-group-addon-border-color: $input-border;
+$input-group-addon-border-color: $input-border-color;
 
+$form-label-font-weight: bold;
 
 //== Dropdowns
 //
@@ -364,8 +332,8 @@ $container-lg:                 $container-large-desktop;
 $navbar-height:                    3.125rem;
 $navbar-margin-bottom:             $line-height-computed;
 $navbar-border-radius:             $border-radius-base;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2));
-$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2);
+$navbar-padding-horizontal:        floor(math.div($grid-gutter-width, 2));
+$navbar-padding-vertical:          math.div($navbar-height - $line-height-computed, 2);
 $navbar-collapse-max-height:       340px;
 
 $navbar-default-color:             $text-color;
@@ -569,7 +537,6 @@ $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%
 //
 //##
 
-$label-default-bg:            $btn-default-bg;
 $label-primary-bg:            $primary;
 $label-success-bg:            $success;
 $label-info-bg:               $info;
@@ -761,26 +728,6 @@ $thumbnail-caption-padding:   9px;
 $well-bg:                     darken($gray-darker, 5%);
 $well-border:                 darken($well-bg, 7%);
 
-
-//== Badges
-//
-//##
-
-$badge-color:                 #000;
-//** Linked badge text color on hover
-$badge-link-hover-color:      #000;
-$badge-bg:                    $primary;
-
-//** Badge text color in active nav link
-$badge-active-color:          $primary;
-//** Badge background color in active nav link
-$badge-active-bg:             #fff;
-
-$badge-font-weight:           bold;
-$badge-line-height:           1;
-$badge-border-radius:         10px;
-
-
 //== Breadcrumbs
 //
 //##
diff --git a/resources/assets/themes/theme1.scss b/resources/assets/themes/theme1.scss
index 24bce0dc..11d11411 100644
--- a/resources/assets/themes/theme1.scss
+++ b/resources/assets/themes/theme1.scss
@@ -1,31 +1,20 @@
-// dark
-@import "cyborg_variables";
-
 // Variables
 // --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-darker:  #222;
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
 
-$primary:         #428bca;
-$success:         #5cb85c;
-$info:            #5bc0de;
-$warning:         #f0ad4e;
+$primary:         #437aca;
+$success:         #00c960;
+$info:            #3dbddf;
+$warning:         #f6b345;
+$danger:          #e93a44;
 
-
-//== changed Buttons
-
-$btn-default-color:              #fff;
-$btn-default-bg:                 lighten($gray-dark, 10%);
-
-$btn-primary-border:             darken($btn-default-bg, 10%);
-$btn-success-border:             $btn-primary-border;
-$btn-info-border:                $btn-primary-border;
-$btn-warning-border:             $btn-primary-border;
-$btn-danger-border:              $btn-primary-border;
+$text-muted: $gray-light;
 
 $btn-link-disabled-color:        $gray-light;
 
@@ -61,30 +50,21 @@ $state-danger-text:              #fff;
 $state-danger-bg:                $danger;
 $state-danger-border:            darken($state-danger-bg, 3%);
 
-
-//== changed Badges
-
-$badge-color:                 #fff;
-$badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
 $headings-small-color:        $gray-light;
 
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles";
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: $btn-default-bg;
-}
-
-// different code tag
 code {
   background-color: $state-info-bg;
   color: $state-info-text;
 }
+
+$alert-bg-scale: 0%;
+$alert-border-scale: 0%;
+$alert-color-scale: 0%;
+
+.alert {
+  color: #fff !important;
+}
+
+// dark
+@import "cyborg_variables";
+@import "cyborg_styles";
diff --git a/resources/assets/themes/theme10.scss b/resources/assets/themes/theme10.scss
index 9f7e7cdc..5775e9ba 100644
--- a/resources/assets/themes/theme10.scss
+++ b/resources/assets/themes/theme10.scss
@@ -1,17 +1,20 @@
 // cccamp19 green (2019)
-@import "cyborg_variables.scss";
 
 // Variables
 // --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
 
-$brand-primary:         #99ba00;
+$brand-primary: #99ba00;
+$primary:       $brand-primary;
 
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
diff --git a/resources/assets/themes/theme11.scss b/resources/assets/themes/theme11.scss
index 62fb80a6..575640d7 100644
--- a/resources/assets/themes/theme11.scss
+++ b/resources/assets/themes/theme11.scss
@@ -1,18 +1,24 @@
 // high contrast
-@import "cyborg_variables.scss";
 // Variables
 // --------------------------------------------------
 
 //== Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
 
-$brand-primary:         #72abfa;
-$brand-success:         #5cb85c;
-$brand-info:            #5bc0de;
-$brand-warning:         #f0ad4e;
+$brand-primary: #72abfa;
+$primary:       $brand-primary;
+$brand-success: #5cb85c;
+$success:       $brand-success;
+$brand-info:    #5bc0de;
+$info:          $brand-info;
+$brand-danger:  #d9534f;
+$danger:        $brand-danger;
+$brand-warning: #f0ad4e;
+$warning:       $brand-warning;
 
 //== Scaffolding
 
@@ -21,7 +27,7 @@ $text-color:            #fff;
 
 //== Buttons
 
-$btn-default-color:              #fff;
+$btn-color:                      #fff;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-color:              #000;
@@ -60,9 +66,6 @@ $label-default-bg:            lighten($btn-default-bg, 20%);
 $label-color:                 #000;
 $label-link-hover-color:      #000;
 
-//== Badges
-
-$badge-link-hover-color:      #fff;
 
 //== Type
 
@@ -72,7 +75,9 @@ $headings-small-color:        $gray-lighter;
 
 // Bootswatch
 // -----------------------------------------------------
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
+
 // Typography =================================================================
 
 .text-danger,
diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss
index 57e22e4b..7402cc7d 100644
--- a/resources/assets/themes/theme12.scss
+++ b/resources/assets/themes/theme12.scss
@@ -1,18 +1,23 @@
 // 36c3
-@import "cyborg_variables.scss";
 
 //== Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #D0D0CE; // #eee
-$black:                  #000;
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #D0D0CE;
+$black:        #000;
 
-$brand-primary:         #fe5000;
-$brand-success:         #00bb31;
-$brand-info:            #5bc0de;
-$brand-warning:         #febb00;
-$brand-danger:          #bb3100;
+$brand-primary: #fe5000;
+$primary:       $brand-primary;
+$brand-success: #00bb31;
+$success:       $brand-success;
+$brand-info:    #5bc0de;
+$info:          $brand-info;
+$brand-warning: #febb00;
+$warning:       $brand-warning;
+$brand-danger:  #bb3100;
+$danger:        $brand-danger;
 
 //== Scaffolding
 
@@ -21,7 +26,7 @@ $text-color:            $gray-lighter;
 
 //== Buttons
 
-$btn-default-color:              $gray-lighter;
+$btn-color:                      $gray-lighter;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-color:              $black;
@@ -63,7 +68,6 @@ $panel-primary-text:          #000;
 //== Badges
 
 $badge-color:                 $black;
-$badge-link-hover-color:      $black;
 
 //== Type
 
@@ -71,6 +75,7 @@ $headings-small-color:        $gray-light;
 
 // Bootswatch
 // -----------------------------------------------------
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 // Forms ======================================================================
 
diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss
index fddb47e7..46cd22a1 100644
--- a/resources/assets/themes/theme13.scss
+++ b/resources/assets/themes/theme13.scss
@@ -1,5 +1,4 @@
 // rc3
-@import "cyborg_variables.scss";
 
 //== Colors
 
@@ -10,11 +9,16 @@ $gray-light:             lighten($gray, 15%);
 $gray-lighter:           lighten($gray-light, 15%);
 $black:                  #000;
 
-$brand-primary:         #6800e7;
-$brand-success:         #05b9ec;
-$brand-info:            #670295;
-$brand-warning:         #fff900;
-$brand-danger:          #b239ff;
+$brand-primary: #6800e7;
+$primary:       $brand-primary;
+$brand-success: #05b9ec;
+$success:       $brand-success;
+$brand-info:    #670295;
+$info:          $brand-info;
+$brand-warning: #fff900;
+$warning:       $brand-warning;
+$brand-danger:  #b239ff;
+$danger:        $brand-danger;
 
 //== Scaffolding
 
@@ -24,7 +28,7 @@ $link-color:            #fff;
 
 //== Typography
 
-$font-face {
+@font-face {
     font-family: 'Montserrat';
     src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
         url('theme13/Montserrat-Regular.woff') format('woff');
@@ -33,7 +37,7 @@ $font-face {
     font-display: swap;
 }
 
-$font-face {
+@font-face {
     font-family: 'Orbitron';
     src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
         url('theme13/Orbitron-Regular.woff') format('woff');
@@ -43,12 +47,12 @@ $font-face {
 }
 
 $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-$font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-$headings-font-family:    $font-family-serif;
+$font-family-serif:      'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:   $font-family-serif;
 
 //== Buttons
 
-$btn-default-color:              #fff;
+$btn-color:                      #fff;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-color:              #fff;
@@ -110,7 +114,6 @@ $panel-danger-text:           #fff;
 //== Badges
 
 $badge-color:                 $black;
-$badge-link-hover-color:      $black;
 
 //== Type
 
@@ -118,6 +121,7 @@ $headings-small-color:        $gray-light;
 
 // Bootswatch
 // -----------------------------------------------------
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 // Forms ======================================================================
 
diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss
index 77ea6ce1..27ab5896 100644
--- a/resources/assets/themes/theme14.scss
+++ b/resources/assets/themes/theme14.scss
@@ -1,5 +1,4 @@
 // rc3 teal
-@import "cyborg_variables.scss";
 
 //== Colors
 
@@ -10,11 +9,16 @@ $gray-light:             lighten($gray, 15%);
 $gray-lighter:           lighten($gray-light, 15%);
 $black:                  #000;
 
-$brand-primary:         #05b9ec;
-$brand-success:         #02fae0;
-$brand-info:            #025d83;
-$brand-warning:         #6800e7;
-$brand-danger:          #b239ff;
+$brand-primary: #05b9ec;
+$primary:       $brand-primary;
+$brand-success: #02fae0;
+$success:       $brand-success;
+$brand-info:    #025d83;
+$info:          $brand-info;
+$brand-warning: #6800e7;
+$warning:       $brand-warning;
+$brand-danger:  #b239ff;
+$danger:        $brand-danger;
 
 
 //== Scaffolding
@@ -25,7 +29,7 @@ $link-color:            #fff;
 
 //== Typography
 
-$font-face {
+@font-face {
     font-family: 'Montserrat';
     src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
         url('theme13/Montserrat-Regular.woff') format('woff');
@@ -34,7 +38,7 @@ $font-face {
     font-display: swap;
 }
 
-$font-face {
+@font-face {
     font-family: 'Orbitron';
     src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
         url('theme13/Orbitron-Regular.woff') format('woff');
@@ -44,12 +48,12 @@ $font-face {
 }
 
 $font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-$font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-$headings-font-family:    $font-family-serif;
+$font-family-serif:      'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:   $font-family-serif;
 
 //== Buttons
 
-$btn-default-color:              #fff;
+$btn-color:                      #fff;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-color:              #fff;
@@ -111,7 +115,6 @@ $panel-danger-text:           #fff;
 //== Badges
 
 $badge-color:                 $black;
-$badge-link-hover-color:      $black;
 
 //== Type
 
@@ -119,6 +122,7 @@ $headings-small-color:        $gray-light;
 
 // Bootswatch
 // -----------------------------------------------------
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 // Forms ======================================================================
 
diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss
index f16b8252..6f04ea26 100644
--- a/resources/assets/themes/theme15.scss
+++ b/resources/assets/themes/theme15.scss
@@ -24,6 +24,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
+@use "sass:math";
+
 // Cyborg 3.2.0
 // Variables
 // --------------------------------------------------
@@ -39,10 +41,15 @@ $gray-light: #888; // #999
 $gray-lighter: #adafae; // #eee
 
 $brand-primary: #fe7900;
+$primary:       $brand-primary;
 $brand-success: #00c466;
-$brand-info: #00c466;
+$success:       $brand-success;
+$brand-info:    #00c466;
+$info:          $brand-info;
 $brand-warning: #d10069;
-$brand-danger: #d10069;
+$warning:       $brand-warning;
+$brand-danger:  #d10069;
+$danger:        $brand-danger;
 
 $plum: #1f0229;
 $dark-green: #00292d;
@@ -170,12 +177,12 @@ $table-border-color: $gray-dark;
 
 $btn-font-weight: normal;
 
-$btn-default-color: $dark-green;
+$btn-color: $dark-green;
 $btn-default-bg: $brand-primary;
 
 $btn-default-border: $brand-primary;
 
-$btn-primary-color: $btn-default-color;
+$btn-primary-color: $btn-color;
 $btn-primary-bg: $btn-default-bg;
 $btn-primary-border: $btn-default-border;
 
@@ -209,7 +216,7 @@ $input-bg-disabled: $gray-darker;
 //** Text color for ``s
 $input-color: $text-color;
 //** `` border color
-$input-border: $gray-dark;
+$input-border-color: $gray-dark;
 //** `` border radius
 $input-border-radius: $border-radius-base;
 //** Border color for inputs on focus
@@ -236,7 +243,7 @@ $legend-border-color: $gray-dark;
 //** Background color for textual input addons
 $input-group-addon-bg: $gray-lighter;
 //** Border color for textual input addons
-$input-group-addon-border-color: $input-border;
+$input-group-addon-border-color: $input-border-color;
 
 //== Dropdowns
 //
@@ -366,8 +373,8 @@ $container-lg: $container-large-desktop;
 $navbar-height: 3.125rem;
 $navbar-margin-bottom: $line-height-computed;
 $navbar-border-radius: $border-radius-base;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
-$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
+$navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2));
+$navbar-padding-vertical: math.div($navbar-height - $line-height-computed, 2);
 $navbar-collapse-max-height: 340px;
 
 $navbar-default-color: $text-color;
@@ -762,7 +769,6 @@ $well-border: darken($well-bg, 7%);
 
 $badge-color: $dark-green;
 //** Linked badge text color on hover
-$badge-link-hover-color: $dark-green;
 $badge-bg: $brand-primary;
 
 //** Badge text color in active nav link
diff --git a/resources/assets/themes/theme2.scss b/resources/assets/themes/theme2.scss
index 3511807a..9624e7dc 100644
--- a/resources/assets/themes/theme2.scss
+++ b/resources/assets/themes/theme2.scss
@@ -1,11 +1,15 @@
 // cccamp15
-@import "~bootstrap/scss/variables";
 
-$brand-primary:         #758499;
-$brand-success:         #7b9c41;
-$brand-info:            #9c7357;
-$brand-warning:         #e3a14d;
-$brand-danger:          #7f528b;
+$brand-primary: #758499;
+$primary:       #758499;
+$brand-success: #7b9c41;
+$success: #7b9c41;
+$brand-info:    #9c7357;
+$info:    #9c7357;
+$brand-warning: #e3a14d;
+$warning: #e3a14d;
+$brand-danger:  #7f528b;
+$danger:  #7f528b;
 
 $link-color:            #58585a;
 
diff --git a/resources/assets/themes/theme3.scss b/resources/assets/themes/theme3.scss
index 81cca40c..2c8f35af 100644
--- a/resources/assets/themes/theme3.scss
+++ b/resources/assets/themes/theme3.scss
@@ -1,11 +1,15 @@
 // 32c3 (2015)
-@import "~bootstrap/scss/variables";
 
 $brand-primary:         #f19224;
+$primary:         #f19224;
 $brand-success:         #39AB50;
+$success:         #39AB50;
 $brand-info:            #6618F9;
+$info:            #6618F9;
 $brand-warning:         #DAD216;
+$warning:         #DAD216;
 $brand-danger:          #DA1639;
+$danger:          #DA1639;
 
 $state-success-text:             $brand-success;
 $state-success-bg:               lighten($brand-success,40%);
diff --git a/resources/assets/themes/theme4.scss b/resources/assets/themes/theme4.scss
index 0090b2ee..ac4c6085 100644
--- a/resources/assets/themes/theme4.scss
+++ b/resources/assets/themes/theme4.scss
@@ -1,30 +1,33 @@
 // 33c3 (2016)
-@import "cyborg_variables.scss";
 
 // Variables
-// --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
-
-$brand-primary:         rgb(0, 156, 139);
-$brand-success:         rgb(141, 193, 35);
-$brand-info:            rgb(70, 71, 73);
-$brand-warning:         rgb(255, 244, 95);
-$brand-danger:          rgb(277, 38, 60);
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
 
+$brand-primary: rgb(0, 156, 139);
+$primary: rgb(0, 156, 139);
+$brand-success: rgb(141, 193, 35);
+$success: rgb(141, 193, 35);
+$brand-info:    rgb(70, 71, 73);
+$info:    rgb(70, 71, 73);
+$brand-warning: rgb(255, 244, 95);
+$warning: rgb(255, 244, 95);
+$brand-danger:  rgb(277, 38, 60);
+$danger:  rgb(277, 38, 60);
 
 //== changed Scaffolding
 
-$body-bg:               #1d1d1b;
+$body-bg:  #1d1d1b;
 
 
 //== changed Buttons
 
-$btn-default-color:              #fff;
+$btn-color:                      #fff;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-border:             darken($btn-default-bg, 10%);
@@ -77,8 +80,6 @@ $state-danger-border:            darken($state-danger-bg, 3%);
 
 $badge-color:                 #fff;
 
-$badge-link-hover-color:      #fff;
-
 
 //== changed Type
 
@@ -87,6 +88,7 @@ $headings-small-color:        $gray-light;
 
 // Bootswatch
 // -----------------------------------------------------
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 // added Forms ======================================================================
diff --git a/resources/assets/themes/theme5.scss b/resources/assets/themes/theme5.scss
index 10e856b7..48649c0c 100644
--- a/resources/assets/themes/theme5.scss
+++ b/resources/assets/themes/theme5.scss
@@ -1,11 +1,15 @@
 // 34c3 light (2017)
-@import "~bootstrap/scss/variables";
 
-$brand-primary:         rgb(164, 28, 49);
-$brand-success:         rgb(153, 204, 0);
-$brand-info:            rgb(0, 204, 255);
-$brand-warning:         rgb(255, 255, 51);
-$brand-danger:          rgb(255, 102, 0);
+$brand-primary: rgb(164, 28, 49);
+$primary: rgb(164, 28, 49);
+$brand-success: rgb(153, 204, 0);
+$success: rgb(153, 204, 0);
+$brand-info:    rgb(0, 204, 255);
+$info:    rgb(0, 204, 255);
+$brand-warning: rgb(255, 255, 51);
+$warning: rgb(255, 255, 51);
+$brand-danger:  rgb(255, 102, 0);
+$danger:  rgb(255, 102, 0);
 
 $link-color:            $brand-primary;
 
diff --git a/resources/assets/themes/theme6.scss b/resources/assets/themes/theme6.scss
index 3fab76c2..08d507a6 100644
--- a/resources/assets/themes/theme6.scss
+++ b/resources/assets/themes/theme6.scss
@@ -1,19 +1,24 @@
 // 34c3 dark (2017)
-@import "cyborg_variables.scss";
 // Variables
 // --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-darker:  #222;
+$gray-lighter: #ADAFAE;
 
-$brand-primary:         rgb(164, 28, 49);
-$brand-success:         rgb(153, 204, 0);
-$brand-info:            rgb(0, 204, 255);
-$brand-warning:         rgb(255, 255, 51);
-$brand-danger:          rgb(255, 102, 0);
+$brand-primary: rgb(164, 28, 49);
+$primary:       rgb(164, 28, 49);
+$brand-success: rgb(153, 204, 0);
+$success:       rgb(153, 204, 0);
+$brand-info:    rgb(0, 204, 255);
+$info:          rgb(0, 204, 255);
+$brand-warning: rgb(255, 255, 51);
+$warning:       rgb(255, 255, 51);
+$brand-danger:  rgb(255, 102, 0);
+$danger:        rgb(255, 102, 0);
 
 .label.label-warning, .progress-bar.progress-bar-warning {
   color: #000;
@@ -22,7 +27,7 @@ $brand-danger:          rgb(255, 102, 0);
 
 //== changed Buttons
 
-$btn-default-color:              #fff;
+$btn-color:                      #fff;
 $btn-default-bg:                 lighten($gray-dark, 10%);
 
 $btn-primary-border:             darken($btn-default-bg, 10%);
@@ -89,8 +94,6 @@ $panel-default-heading-bg:    darken($gray-darker, 5%);
 
 $badge-color:                 #fff;
 
-$badge-link-hover-color:      #fff;
-
 
 //== changed Type
 
@@ -100,6 +103,7 @@ $headings-small-color:        $gray-light;
 // Bootswatch
 // -----------------------------------------------------
 
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 // Typography =================================================================
diff --git a/resources/assets/themes/theme7.scss b/resources/assets/themes/theme7.scss
index 8dcac2aa..26717669 100644
--- a/resources/assets/themes/theme7.scss
+++ b/resources/assets/themes/theme7.scss
@@ -1,30 +1,24 @@
 // 35c3 dark (2018)
-@import "cyborg_variables.scss";
 
 // Variables
 // --------------------------------------------------
 
-//== changed Colors
-
-// gray BEBOOT: #4d4d4c
-// blue FRESH: #0084b0
-// green HOPE: #00a356
-// dark blue BASE: #18386b
-// orange GLINT: #f9b000
-// rot BEAT: #e40429
-// violet TENACY: #44357e
-
 $gray-darker:            #000;
 $gray-dark:              #000;
 $gray:                   #4d4d4c; // BEBOOT
 $gray-light:             $gray;
 $gray-lighter:           lighten($gray, 15%);
 
-$brand-primary:         #0084b0; // FRESH
-$brand-success:         #00a356; // HOPE
-$brand-info:            $brand-primary;
-$brand-warning:         #f9b000; // GLINT
-$brand-danger:          #e40429; // BEAT
+$brand-primary: #0084b0; // FRESH
+$primary:       #0084b0;
+$brand-success: #00a356; // HOPE
+$success:       #00a356; // HOPE
+$brand-info:    $brand-primary;
+$info:          $brand-primary;
+$brand-warning: #f9b000; // GLINT
+$warning:       #f9b000; // GLINT
+$brand-danger:  #e40429; // BEAT
+$danger:        #e40429; // BEAT
 
 
 //== changed Scaffolding
@@ -33,7 +27,8 @@ $body-bg:               #000;
 
 $text-color:            $gray-lighter;
 
-$link-hover-color:      lighten($link-color, 10%);
+$link-color:       $brand-primary;
+$link-hover-color: lighten($link-color, 10%);
 
 
 //== changed Typography
@@ -44,15 +39,19 @@ $headings-color:          $brand-primary;
 //== changed Tables
 
 $table-bg:                      $gray-darker;
-
 $table-bg-accent:               #111;
-
 $table-border-color:            $gray;
 
 
+// component
+
+$component-active-color:    #fff;
+$component-active-bg:       $primary;
+
+
 //== changed Buttons
 
-$btn-default-color:              $link-color;
+$btn-color:              $link-color;
 $btn-default-bg:                 $gray-darker;
 
 $btn-default-border:             $brand-primary;
@@ -78,7 +77,7 @@ $input-bg:                       $gray-darker;
 
 $input-color:                    $link-color;
 
-$input-border:                   $brand-primary;
+$input-border-color:             $brand-primary;
 
 $input-group-addon-bg:           $gray-lighter;
 
@@ -91,10 +90,11 @@ $dropdown-fallback-border:       $brand-primary;
 
 $dropdown-divider-bg:            $dropdown-border;
 
-$dropdown-link-color:            $link-color;
+$dropdown-link-color: $link-color;
 
 $dropdown-link-hover-color:      $link-hover-color;
 
+$dropdown-bg:                    $gray-darker;
 $dropdown-link-hover-bg:         $dropdown-bg;
 
 
@@ -109,13 +109,13 @@ $navbar-default-link-active-color:         $brand-primary;
 $navbar-default-brand-color:               $brand-primary;
 $navbar-default-brand-hover-color:         lighten($brand-primary, 10%);
 
-
 //== changed Pagination
 
 $pagination-color:                     $brand-primary;
 $pagination-border:                    $brand-primary;
 
 $pagination-hover-color:               $gray-darker;
+$pagination-hover-bg:                  $component-active-bg;
 $pagination-hover-border:              $pagination-border;
 
 $pagination-active-color:              $pagination-hover-color;
@@ -160,13 +160,12 @@ $panel-primary-text:          $gray-darker;
 
 $badge-color:                 #fff;
 
-$badge-link-hover-color:      #fff;
-
 
 //== changed Type
 
 $headings-small-color:        $gray-light;
 
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 .messages .text-danger {
diff --git a/resources/assets/themes/theme8.scss b/resources/assets/themes/theme8.scss
index 247774ab..a66c3dc8 100644
--- a/resources/assets/themes/theme8.scss
+++ b/resources/assets/themes/theme8.scss
@@ -1,17 +1,19 @@
 // cccamp19 blue (2019)
-@import "cyborg_variables.scss";
 
 // Variables
-// --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
 
-$brand-primary:         #0076ba;
+$brand-primary: #0076ba;
+$primary:       #0076ba;
 
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
diff --git a/resources/assets/themes/theme9.scss b/resources/assets/themes/theme9.scss
index 77b77358..d476f3b0 100644
--- a/resources/assets/themes/theme9.scss
+++ b/resources/assets/themes/theme9.scss
@@ -1,17 +1,20 @@
 // cccamp19 yellow (2019)
-@import "cyborg_variables.scss";
 
 // Variables
 // --------------------------------------------------
 
 //== changed Colors
 
-$gray-dark:              #282828;   // #333
-$gray-light:             #888;   // #999
-$gray-lighter:           #ADAFAE; // #eee
+$gray-dark:              #282828;
+$gray-light:             #888;
+$gray-lighter:           #ADAFAE;
 
-$brand-primary:         #ffc600;
+$brand-primary: #ffc600;
+$primary:       $brand-primary;
 
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
 @import "cyborg_styles.scss";
 
 // Specials for cccamp19 design
diff --git a/resources/views/layouts/app.twig b/resources/views/layouts/app.twig
index 12e81ac0..f1c6a31a 100644
--- a/resources/views/layouts/app.twig
+++ b/resources/views/layouts/app.twig
@@ -1,4 +1,3 @@
-{% set theme = theme|default(user.settings.theme|default(config('theme'))) %}
 
 
 
@@ -9,7 +8,7 @@
         
         
 
-        
+        
         
 
         {% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}
diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig
index 81ce5105..77c7488c 100644
--- a/resources/views/layouts/parts/navbar.twig
+++ b/resources/views/layouts/parts/navbar.twig
@@ -7,7 +7,7 @@
     
 {% endmacro %}
 
-