From 6ea938460ac8d30bd5b9f15c19c1140aaae29494 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Thu, 21 Apr 2022 11:16:16 +0200 Subject: [PATCH] Clean up styles --- includes/sys_template.php | 2 +- includes/view/PublicDashboard_view.php | 2 +- resources/assets/themes/base.scss | 107 +++++------------- resources/assets/themes/cyborg_styles.scss | 2 - resources/assets/themes/cyborg_variables.scss | 82 -------------- resources/assets/themes/theme12.scss | 20 ---- resources/assets/themes/theme13.scss | 20 ---- resources/assets/themes/theme14.scss | 20 ---- resources/assets/themes/theme15.scss | 19 ---- resources/views/pages/login.twig | 2 +- 10 files changed, 34 insertions(+), 242 deletions(-) diff --git a/includes/sys_template.php b/includes/sys_template.php index 9468355f..9585202a 100644 --- a/includes/sys_template.php +++ b/includes/sys_template.php @@ -20,7 +20,7 @@ function stats($label, $number, $style = null) $style = 'success'; } } - return div('col stats stats-' . $style, [ + return div('col stats text-' . $style, [ $label, div('number', [ $number diff --git a/includes/view/PublicDashboard_view.php b/includes/view/PublicDashboard_view.php index b07c8b25..3f51619b 100644 --- a/includes/view/PublicDashboard_view.php +++ b/includes/view/PublicDashboard_view.php @@ -55,7 +55,7 @@ function public_dashboard_view($stats, $free_shifts) div('first col-md-12 text-center', [buttons([ button_js( ' - $(\'#navbar-collapse-1,.navbar-nav,.navbar-toggle,#footer,#fullscreen-button\').remove(); + $(\'#navbar-collapse-1,.navbar-nav,.navbar-toggler,#footer,#fullscreen-button\').remove(); $(\'.navbar-brand\').append(\' ' . __('Public Dashboard') . '\'); ', icon('fullscreen') . __('Fullscreen') diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss index 8330a7fa..af5fda3f 100644 --- a/resources/assets/themes/base.scss +++ b/resources/assets/themes/base.scss @@ -20,19 +20,41 @@ $custom-colors: ( $theme-colors: map-merge($theme-colors, $custom-colors); -@import "~bootstrap/scss/bootstrap"; +$form-label-font-weight: $font-weight-bold; + +@import "~bootstrap/scss/utilities"; + +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +@import "~bootstrap/scss/containers"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/nav"; +@import "~bootstrap/scss/navbar"; +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/pagination"; +@import "~bootstrap/scss/badge"; +@import "~bootstrap/scss/alert"; +@import "~bootstrap/scss/progress"; +@import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/close"; +@import "~bootstrap/scss/popover"; + +@import "~bootstrap/scss/helpers"; + +@import "~bootstrap/scss/utilities/api"; @import "~bootstrap-icons/font/bootstrap-icons"; @import "~select2/src/scss/core"; @import "~select2-bootstrap-5-theme/src/include-all"; @import "error"; -// temporary bg-body fix (remove once Bootstrap 5.1.1 has been released) -.bg-body { - --bs-bg-opacity: 1; - background-color: $body-bg !important; -} - $navbar-height: 3.125rem; body { @@ -51,13 +73,6 @@ body { } } -.text-big { - display: block; - font-size: 30px; - line-height: 30px; - margin: 0; -} - .icon-icon_angel { background-color: $body-color; @@ -85,7 +100,8 @@ a .icon-icon_angel { background-color: $nav-link-disabled-color; } -.navbar-brand .icon-icon_angel { +.navbar-brand .icon-icon_angel, +table a > .icon-icon_angel { background-color: $body-color; } @@ -97,26 +113,10 @@ a .icon-icon_angel { margin-bottom: 0; } -table a > .icon-icon_angel { - background-color: $body-color; -} - .table .form-group { margin-bottom: 0; } -.table-striped > tbody > tr:nth-of-type(2n+1) { - color: var(--bs-table-color); -} - -.input-group.date, -.input-group.datetime, -.input-group.time { - .bootstrap-datetimepicker-widget { - inset: 42px auto auto 0 !important; - } -} - .stats { font-size: 20px; height: 150px; @@ -135,19 +135,6 @@ table a > .icon-icon_angel { } } - -.stats-danger { - color: map-get($theme-colors, 'danger'); -} - -.stats-warning { - color: map-get($theme-colors, 'warning'); -} - -.stats-success { - color: map-get($theme-colors, 'success'); -} - .dashboard-card { position: relative; font-size: 20px; @@ -361,35 +348,3 @@ code { content: ""; } } - -.navbar-toggle { - transform: scale(1.25, 0.96); - padding: 2px 6px; - margin-top: 6px; - margin-bottom: 4px; - max-height: $navbar-height; - - .icon { - border-color: $primary; - font-weight: bold; - color: $primary; - font-size: 25px; - &-close { - padding: 0 3px; - display: none; - } - } - &.is-open .icon { - &-open { - display: none; - } - &-close { - display: block; - } - } -} - -// Forms -.form-label { - font-weight: $font-weight-bold; -} diff --git a/resources/assets/themes/cyborg_styles.scss b/resources/assets/themes/cyborg_styles.scss index b34ba050..708ee6e5 100644 --- a/resources/assets/themes/cyborg_styles.scss +++ b/resources/assets/themes/cyborg_styles.scss @@ -113,9 +113,7 @@ table, .nav-tabs, .nav-pills, -.breadcrumb, .pager { - a { color: #fff; } diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss index 0b27d890..2ceffbaf 100644 --- a/resources/assets/themes/cyborg_variables.scss +++ b/resources/assets/themes/cyborg_variables.scss @@ -204,10 +204,7 @@ $dropdown-caret-color: #000 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; $zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; -$zindex-modal-background: 1040 !default; -$zindex-modal: 1050 !default; //== Media queries breakpoints @@ -446,22 +443,7 @@ $state-danger-bg: darken($danger, 40%) !default; $state-danger-border: $danger !default; -//== Tooltips -// -//## - -$tooltip-max-width: 200px !default; -$tooltip-color: #fff !default; -$tooltip-bg: rgba(0,0,0,.9) !default; -$tooltip-opacity: .9 !default; - -$tooltip-arrow-width: 5px !default; -$tooltip-arrow-color: $tooltip-bg !default; - - //== Popovers -// -//## $popover-bg: lighten($body-bg, 10%) !default; $popover-max-width: 276px !default; @@ -500,39 +482,6 @@ $label-color: #fff !default; $label-link-hover-color: #fff !default; -//== Modals -// -//## - -//** Padding applied to the modal body -$modal-inner-padding: 1.25rem !default; - -//** Padding applied to the modal title -$modal-title-padding: 15px !default; -//** Modal title line-height -$modal-title-line-height: $line-height-base !default; - -//** Background color of modal content area -$modal-content-bg: lighten($body-bg, 10%) !default; -//** Modal content border color -$modal-content-border-color: rgba(0,0,0,.2) !default; -//** Modal content border color **for IE8** -$modal-content-fallback-border-color: #999 !default; - -//** Modal backdrop background color -$modal-backdrop-bg: #000 !default; -//** Modal backdrop opacity -$modal-backdrop-opacity: .5 !default; -//** Modal header border color -$modal-header-border-color: $gray-dark !default; -//** Modal footer border color -$modal-footer-border-color: $modal-header-border-color !default; - -$modal-lg: 900px !default; -$modal-md: 600px !default; -$modal-sm: 300px !default; - - //== Alerts // //## Define alert colors, border radius, and padding. @@ -613,37 +562,6 @@ $list-group-link-hover-color: $list-group-link-color !default; $list-group-link-heading-color: #fff !default; -//== Breadcrumbs -// -//## - -$breadcrumb-padding-vertical: 8px !default; -$breadcrumb-padding-horizontal: 15px !default; -$breadcrumb-bg: $gray-darker !default; -$breadcrumb-color: #fff !default; -//** Text color of current page in the breadcrumb -$breadcrumb-active-color: $text-color !default; -//** Textual separator for between breadcrumb elements -$breadcrumb-separator: "/" !default; - - -//== Carousel -// -//## - -$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; - -$carousel-control-color: #fff !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; -$carousel-control-font-size: 20px !default; - -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; - -$carousel-caption-color: #fff !default; - - //== Close // //## diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss index 114bf802..e2684fae 100644 --- a/resources/assets/themes/theme12.scss +++ b/resources/assets/themes/theme12.scss @@ -82,26 +82,6 @@ $headings-small-color: $gray-light; // Containers ================================================================= -// datetimepicker - -.bootstrap-datetimepicker-widget { - - .timepicker-hour, - .timepicker-minute, - [data-action='selectHour'], - [data-action='selectMinute'], - [data-action='incrementHours'], - [data-action='decrementHours'], - [data-action='incrementMinutes'], - [data-action='decrementMinutes'] { - - &:hover { - - color: $gray; - } - } -} - // code tag code { background-color: $btn-default-bg; diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss index ddc44551..586c955b 100644 --- a/resources/assets/themes/theme13.scss +++ b/resources/assets/themes/theme13.scss @@ -121,26 +121,6 @@ $headings-small-color: $gray-light; // Containers ================================================================= -// datetimepicker - -.bootstrap-datetimepicker-widget { - - .timepicker-hour, - .timepicker-minute, - [data-action='selectHour'], - [data-action='selectMinute'], - [data-action='incrementHours'], - [data-action='decrementHours'], - [data-action='incrementMinutes'], - [data-action='decrementMinutes'] { - - &:hover { - - color: $gray; - } - } -} - // code tag code { background-color: $input-bg-disabled; diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss index 265c3e38..e8618f04 100644 --- a/resources/assets/themes/theme14.scss +++ b/resources/assets/themes/theme14.scss @@ -121,26 +121,6 @@ $headings-small-color: $gray-light; // Containers ================================================================= -// datetimepicker - -.bootstrap-datetimepicker-widget { - - .timepicker-hour, - .timepicker-minute, - [data-action='selectHour'], - [data-action='selectMinute'], - [data-action='incrementHours'], - [data-action='decrementHours'], - [data-action='incrementMinutes'], - [data-action='decrementMinutes'] { - - &:hover { - - color: $gray; - } - } -} - // code tag code { background-color: $input-bg-disabled; diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss index 6f0ca85e..94116052 100644 --- a/resources/assets/themes/theme15.scss +++ b/resources/assets/themes/theme15.scss @@ -142,25 +142,6 @@ $headings-small-color: $gray-light; // Containers ================================================================= -// datetimepicker - -.bootstrap-datetimepicker-widget { - - .timepicker-hour, - .timepicker-minute, - [data-action='selectHour'], - [data-action='selectMinute'], - [data-action='incrementHours'], - [data-action='decrementHours'], - [data-action='incrementMinutes'], - [data-action='decrementMinutes'] { - - &:hover { - color: $gray; - } - } -} - // code tag code { background-color: $input-bg-disabled; diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig index 2b8a3846..cf012078 100644 --- a/resources/views/pages/login.twig +++ b/resources/views/pages/login.twig @@ -21,7 +21,7 @@ {% if date > date() %}

{{ name }}

- %c +
%c
{{ date.format(__('Y-m-d')) }}
{% endif %}