Clean up styles

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

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

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;
-}

resources/assets/themes/cyborg_styles.scss

@@ -113,9 +113,7 @@ table,
 
 .nav-tabs,
 .nav-pills,
-.breadcrumb,
 .pager {
-
   a {
     color: #fff;
   }

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
 //
 //##

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;

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;

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;

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;

resources/views/pages/login.twig

@@ -21,7 +21,7 @@
                 {% if date > date() %}
                     <div class="col-sm-3 text-center d-none d-sm-block">
                         <h4>{{ name }}</h4>
-                        <span class="moment-countdown text-big" data-timestamp="{{ date.getTimestamp }}">%c</span>
+                        <div class="moment-countdown h2 text-body" data-timestamp="{{ date.getTimestamp }}">%c</div>
                         <small>{{ date.format(__('Y-m-d')) }}</small>
                     </div>
                 {% endif %}