make all themes basically working with bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate buttons and badges

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

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
main
Michael Weimann 4 years ago
parent 9acaa03a71
commit 5f7fcb9018
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1

@ -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.

@ -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

@ -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');

@ -426,10 +426,10 @@ function form_select($name, $label, $values, $selected, $selectText = '')
function form_element($label, $input, $for = '')
{
if (empty($label)) {
return '<div class="form-group">' . $input . '</div>';
return '<div class="mb-3">' . $input . '</div>';
}
return '<div class="form-group">' . '<label for="' . $for . '">' . $label . '</label>' . $input . '</div>';
return '<div class="mb-3">' . '<label class="form-label" for="' . $for . '">' . $label . '</label>' . $input . '</div>';
}
/**

@ -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",

@ -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 {

@ -170,3 +170,4 @@ code {
background-color: $input-bg-disabled;
color: $input-color;
}

@ -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 `<body>`.
$text-color: $gray-light;
$text-muted: $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 `<code>`, `<kbd>`, and `<pre>`.
$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 `<body>`.
$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
//
//##
//** `<input>` background color
$input-bg: #000;
$input-bg: $gray-darker;
//** `<input disabled>` background color
$input-bg-disabled: $gray-darker;
//** Text color for `<input>`s
$input-color: $text-color;
//** `<input>` border color
$input-border: $gray-dark;
$input-border-color: $gray-dark;
//** `<input>` 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
//
//##

@ -1,31 +1,20 @@
// dark
@import "cyborg_variables";
// Variables
// --------------------------------------------------
//== changed Colors
$gray-dark: #282828; // #333
$gray-light: #888; // #999
$gray-lighter: #ADAFAE; // #eee
$primary: #428bca;
$success: #5cb85c;
$info: #5bc0de;
$warning: #f0ad4e;
//== changed Buttons
$gray-darker: #222;
$gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$btn-default-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$primary: #437aca;
$success: #00c960;
$info: #3dbddf;
$warning: #f6b345;
$danger: #e93a44;
$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";

@ -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;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design

@ -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;
$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,

@ -1,18 +1,23 @@
// 36c3
@import "cyborg_variables.scss";
//== Colors
$gray-dark: #282828; // #333
$gray-light: #888; // #999
$gray-lighter: #D0D0CE; // #eee
$gray-dark: #282828;
$gray-darker: #222;
$gray-light: #888;
$gray-lighter: #D0D0CE;
$black: #000;
$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 ======================================================================

@ -1,5 +1,4 @@
// rc3
@import "cyborg_variables.scss";
//== Colors
@ -11,10 +10,15 @@ $gray-lighter: lighten($gray-light, 15%);
$black: #000;
$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');
@ -48,7 +52,7 @@ $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 ======================================================================

@ -1,5 +1,4 @@
// rc3 teal
@import "cyborg_variables.scss";
//== Colors
@ -11,10 +10,15 @@ $gray-lighter: lighten($gray-light, 15%);
$black: #000;
$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');
@ -49,7 +53,7 @@ $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 ======================================================================

@ -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;
$success: $brand-success;
$brand-info: #00c466;
$info: $brand-info;
$brand-warning: #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 `<input>`s
$input-color: $text-color;
//** `<input>` border color
$input-border: $gray-dark;
$input-border-color: $gray-dark;
//** `<input>` 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

@ -1,11 +1,15 @@
// cccamp15
@import "~bootstrap/scss/variables";
$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;

@ -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%);

@ -1,21 +1,24 @@
// 33c3 (2016)
@import "cyborg_variables.scss";
// Variables
// --------------------------------------------------
//== changed 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: 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
@ -24,7 +27,7 @@ $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 ======================================================================

@ -1,11 +1,15 @@
// 34c3 light (2017)
@import "~bootstrap/scss/variables";
$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;

@ -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);
$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 =================================================================

@ -1,19 +1,8 @@
// 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
@ -21,10 +10,15 @@ $gray-light: $gray;
$gray-lighter: lighten($gray, 15%);
$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,6 +27,7 @@ $body-bg: #000;
$text-color: $gray-lighter;
$link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%);
@ -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;
@ -95,6 +94,7 @@ $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 {

@ -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;
$primary: #0076ba;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design

@ -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;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design

@ -1,4 +1,3 @@
{% set theme = theme|default(user.settings.theme|default(config('theme'))) %}
<!DOCTYPE html>
<html lang="{{ session_get('locale')|split('_')[0]|escape('html_attr') }}">
<head>
@ -9,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ theme ~ '.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ themeId ~ '.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/vendor.js') }}"></script>
{% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}

@ -7,7 +7,7 @@
</li>
{% endmacro %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark border-bottom border-dark">
<nav class="navbar fixed-top navbar-expand-lg border-bottom {{ theme['navbar_classes'] }}">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url('/') }}">
<span class="icon-icon_angel"></span>

@ -1,5 +1,5 @@
{% macro angel() %}
<span class="icon-icon_angel"></span>
<span class="icon-icon_angel bg-light"></span>
{% endmacro %}
{% macro glyphicon(glyph) %}

@ -1,7 +1,7 @@
{% macro input(name, label, type, opt) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}"{% if opt.hide_label|default(false) %} class="sr-only"{% endif %}>{{ label }}</label>
<label for="{{ name }}" class="form-label {% if opt.hide_label|default(false) %}sr-only{% endif %}">{{ label }}</label>
{%- endif %}
<input
type="{{ type|default('text') }}" class="form-control"
@ -22,9 +22,9 @@
{%- endmacro %}
{% macro textarea(name, label, opt) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}">{{ label }}</label>
<label class="form-label" for="{{ name }}">{{ label }}</label>
{%- endif %}
<textarea class="form-control" id="{{ name }}" name="{{ name }}"
{%- if opt.required|default(false) %}
@ -38,9 +38,9 @@
{%- endmacro %}
{% macro select(name, data, label, selected) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}">{{ label }}</label>
<label class="form-label" for="{{ name }}">{{ label }}</label>
{% endif %}
<select id="{{ name }}" name="{{ name }}" class="form-control">
{% for value,decription in data -%}

@ -5,7 +5,17 @@
{% block title %}{{ __('Design') }}{% endblock %}
{% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %}
{% set types=[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark'
]
%}
{% set types_color=[
['primary', 'light'],
['secondary', 'light'],
@ -23,7 +33,7 @@
{% block content %}
<div class="col-12">
<div class="container">
<h1>{{ block('title') }} <small class="text-muted">{{ themes[theme] }}</small></h1>
<h1>{{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small></h1>
<h2>Elements <small class="text-muted">small</small></h2>
<div class="row">
@ -54,10 +64,10 @@
<div class="col-md-4">
<h3>Themes</h3>
<ul>
{% for id,theme in themes|sort %}
{% for id,theme in themes %}
<li>
<a href="{{ url('design', {'theme': id}) }}">
{{ theme }}
{{ theme['name'] }}
</a>
</li>
{% endfor %}
@ -199,9 +209,11 @@
{{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
</div>
<div class="col-md-2">
Button<br>
<label class="form-label">Button</label>
<div>
{{ f.button('Button', {'btn_type': 'default'}) }}
</div>
</div>
<div class="col-md-2">
Submit button<br>
{{ f.submit() }}

@ -52,7 +52,7 @@ class DesignController extends BaseController
'arrived' => false,
]));
$themes = $this->config->get('available_themes');
$themes = $this->config->get('themes');
$data = [
'demo_user' => $demoUser,
@ -60,9 +60,12 @@ class DesignController extends BaseController
'themes' => $themes,
];
$theme = $request->get('theme');
if (isset($themes[$theme])) {
$data['theme'] = $theme;
$themeId = $request->get('theme');
$this->config->set('theme', (int) $themeId);
if (isset($themes[$themeId])) {
$data['theme'] = $themes[$themeId];
$data['themeId'] = $themeId;
}
return $this->response->withView(

@ -70,12 +70,12 @@ class Controller extends BaseController
$userTshirtSizes = $this->formatStats($this->stats->tshirtSizes(), 'tshirt_sizes', 'shirt_size', 'size');
$userLocales = $this->formatStats($this->stats->languages(), 'locales', 'language', 'locale');
$userThemes = $this->formatStats($this->stats->themes(), 'available_themes', 'theme');
$userThemes = $this->formatStats($this->stats->themes(), 'themes', 'theme');
$userOauth = $this->formatStats($this->stats->oauth(), 'oauth', 'provider');
$themes = $this->config->get('available_themes');
$themes = $this->config->get('themes');
foreach ($userThemes as $key => $theme) {
$userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']];
$userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']]['name'];
}
$oauthProviders = $this->config->get('oauth');

@ -34,9 +34,19 @@ class Globals extends TwigExtension implements GlobalsInterface
{
$user = $this->auth->user();
if ($user === null) {
$themeId = config('theme');
} else {
$themeId = $user->settings->theme;
}
$theme = config('themes')[$themeId];
return [
'user' => $user ? $user : [],
'user' => $user ?? [],
'request' => $this->request,
'themeId' => $themeId,
'theme' => $theme,
];
}
}

@ -15,7 +15,7 @@ class ControllerTest extends ApplicationFeatureTest
config([
'api_key' => null,
'metrics' => ['work' => [60 * 60], 'voucher' => [1]],
'available_themes' => ['1' => 'Test'],
'themes' => [1 => ['name' => 'Test']],
]);
/** @var Controller $controller */

@ -49,7 +49,7 @@ class DesignControllerTest extends TestCase
});
$request = new Request();
$request->attributes->set('theme', '42');
$config = new Config(['available_themes' => ['42' => 'Meaning of Live']]);
$config = new Config(['themes' => [42 => [ 'name' => 'Meaning of Live']]]);
$controller = new DesignController($response, $config);
$controller->index($request);

@ -151,9 +151,9 @@ class ControllerTest extends TestCase
'de_DE' => 'German',
'en_US' => 'US English',
]);
$config->set('available_themes', [
'0' => 'Nothing',
'1' => 'Testing',
$config->set('themes', [
0 => ['name' => 'Nothing'],
1 => ['name' => 'Testing'],
]);
$config->set('metrics', [
'work' => [60 * 60],

@ -8,7 +8,7 @@ const nodeEnv = (process.env.NODE_ENV || 'development').trim();
// eslint-disable-next-line
const __DEV__ = nodeEnv !== 'production';
const devtool = __DEV__ ? 'source-map' : '';
const devtool = __DEV__ ? 'source-map' : undefined
const plugins = [
new webpack.DefinePlugin({
@ -24,7 +24,7 @@ const plugins = [
const themeEntries = {};
for (let i = 0; i < 2; i++) {
for (let i = 0; i <= 15; i++) {
themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.scss`;
}
@ -61,14 +61,21 @@ module.exports = {
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: "postcss-loader",
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [ [ "postcss-preset-env", ], ],
plugins: [ [ 'autoprefixer', ], ],
},
},
},
{ loader: 'sass-loader' },
{
loader: 'sass-loader',
options: {
sassOptions: {
quietDeps: true
}
}
},
]
}
],

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save