denny/ShinyCMS-ruby

// ShinyCMS ~ https://shinycms.org
//
// Copyright 2009-2024 Denny de la Haye ~ https://denny.me
//
// ShinyCMS is free software; you can redistribute it and/or modify it under the terms of the GPL (version 2 or later)

// Extra styles for admin area, including minor tweaks to CoreUI

// Import styles for Rails Email Preview (powers /admin/emails feature)
@import 'rails_email_preview/application';

// ==================== ( define some colours ) ====================

$very-light-blue:   #63c2de;
$lighter-blue:      #5da8b7;
$light-blue:        #3399fe;
$blue:              #20a8d8;
$dark-blue:         #0e5c75;

$indigo:            #6610f2;
$cyan:              #17a2b8;
$teal:              #20c997;

$green:             #4dbd74;
$yellow:            #ffc107;
$orange:            #f8cb00;
$red:               #f86c6b;

$light-green:       #dfd;
$light-red:         #fdd;

$purple:            #6f42c1;
$pink:              #e83e8c;

$white:             #fff;
$near-white:        #eee;
$light-grey:        #c0c0c0;
$grey:              #777;
$dark-grey:         #404040;
$near-black:        #111;
$black:             #000;

$near-white2:       #f0f3f5;
$light-grey2:       #c8ced3;
$light-grey3:       #d8dbe0;
$grey2:             #73818f;
$dark-grey2:        #2f353a;

$success:           $green;
$info:              $blue;
$warning:           $yellow;
$danger:            $red;

$alert-bg:          $light-red;
$notice-bg:         $light-green;

$highlight-colour:  $very-light-blue;
$dark-colour:       $dark-blue;
$light-colour:      $light-blue;
$lighter-colour:    $lighter-blue;

$button-text:       $dark-colour;
$input-border:      $lighter-colour;
$input-fg:          $dark-grey;
$input-bg:          $white;


// ==================== ( global styles ) ====================

body {
  color:            $dark-colour;
  font-family:      'Roboto', sans-serif;
  font-size:        11pt;
}


// ==================== ( sidebar ) ===================

.c-sidebar {
  width:            14em;
}

.c-sidebar-brand {
  background:       $white !important;
  border-bottom:    1px solid $light-grey3;
}

.c-sidebar-brand img {
  height:           47px;
}

.c-sidebar-nav-item i {
  padding:          0.2em 0.6em 0.2em 0.2em;
}

.c-sidebar-nav-dropdown-items .c-sidebar-nav-item i {
  padding:          0.2em 0.6em 0.2em 1.2em;
}

.c-sidebar-nav-link {
  color:            $white;
  padding:          0.4em !important;
}

.c-sidebar-nav-link:hover {
  background:       $highlight-colour !important;
}

.c-sidebar-nav-link.c-active {
  color:            $highlight-colour !important;
}

.c-sidebar-nav-link.c-active .c-sidebar-nav-icon {
  fill:             $highlight-colour !important;
}

.c-sidebar-nav-link.c-active:hover {
  color:            $white !important;
}

.c-sidebar-nav-link.c-active:hover .c-sidebar-nav-icon {
  fill:             $white !important;
}

.c-sidebar-footer {
  align-items:      center;
  height:           48px;
}

.c-sidebar-footer a {
  color:            $light-colour;
}

.c-sidebar-footer a:hover {
  color:            $white;
}


// ==================== ( header ) ====================

.breadcrumbs {
  font-family:      'Roboto Condensed', sans-serif;
  font-size:        1.3em;
}

.breadcrumbs a {
  color:            $dark-colour;
}

.breadcrumbs a:hover {
  color:            $highlight-colour;
  text-decoration:  none;
}

.breadcrumbs .active {
  color:            $dark-grey;
}

.user-menu-icon {
  padding: 0 0.8em 0 0;
}

.dropdown-menu a:active {
  background-color:  $dark-blue;
}

/* Blazer has its own top bar which ours is appearing on top of */

.topbar {
  margin: 4em 0 0 14em;
}


// ==================== ( main content area ) ====================

.c-wrapper {
  margin-left:      14em !important;
}

main {
  padding:          1em 2em;
  width:            100%;
}

main p {
  margin:           0.5em 0 0 0.5em;
}


.alert {
  border:           1px solid $grey;
  color:            $dark-grey;
  font-size:        1.1em;
  padding:          0.5em 1em;
}


// ========== ( drag-to-sort ) ==========

.table-striped .ui-sortable-handle {
  font-size:        1.2em;
  padding:          0 0 0 1em;
}

form .ui-sortable-handle {
  color:            $dark-colour;
  font-size:        1.3em;
  padding:          0.3em 0.2em 0 0;
  vertical-align:   top;
}

.ui-sortable-handle {
  cursor:           grab;
}

.ui-sortable-handle:active {
  cursor:           grabbing;
}


// ==================== ( index/list pages ) ====================

.table-striped {
  color:            $dark-colour;
}

.table-striped tr {
  vertical-align:   middle;
}

.table-striped th {
  border-top:       0;
}

.table-striped th.page {
  padding-left:     0.5em;
}

.table-striped .width5pc {
  width:            5%;
}

.table-striped .width16pc {
  width:            16%;
}

.table-striped .width20pc {
  width:            20%;
}

.table-striped .width25pc {
  width:            25%;
}

.table-striped .width50pc {
  width:            50%;
}

.table-striped .collapse-toggle {
  color:            $dark-blue;
  display:          block;
  text-decoration:  none;
}

.table-striped .hidden {
  color:            $grey;
}

.table-striped td {
  vertical-align:   middle;
}

.table-striped .shorter {
  width:            16%;
}

.table-striped .longer {
  width:            21%;
}

.table-striped .actions {
  text-align:       right;
}

.table-striped td [type=checkbox] {
  height:           1em;
  vertical-align:   middle;
}

.table-striped td label {
  margin:           0;
  padding:          0;
}

.table-striped .actions a {
  background:       $input-bg;
  border:           1px solid $input-border;
  border-radius:    0.2em;
  color:            $button-text;
  height:           2em;
  padding:          0.3em 0.5em;
  text-decoration:  none;
}

.table-striped .actions a:hover {
  background:       $input-border;
  color:            $input-bg;
  text-decoration:  none;
}

.pager {
  font-size:        0.8em;
  margin-top:       2em;
}

.pagy-bootstrap-nav {
  -webkit-align-items:     center;
  -webkit-justify-content: center;
  align-items:             center;
  display:                 -webkit-flex;
  display:                 flex;
  justify-content:         center;
}

.pagination {
  -webkit-align-self: center;
  align-self:         center;
  font-size:          0.8em;
  margin:             1em;
}

.pager .page-link,
.pagination .page-link,
.pagination .disabled .page-link {
  background:       none;
  color:            $dark-colour;
}

.pager .active .page-link,
.pagination .active .page-link {
  background:       $dark-colour;
  border-color:     $dark-colour;
  color:            $white;
}

.pager-info {
  color:            $dark-colour;
  font-size:        0.8em;
  text-align:       center;
}


// ==================== ( new/edit pages ) ====================

main label {
  color:            $dark-colour;
  margin:           0.5em 1px 0.1em;
  padding-bottom:   0;
}

main input, select, textarea {
  background:       $input-bg;
  border:           1px solid $input-border;
  color:            $input-fg;
  margin:           0.2em 0.2em 0.2em 0;
  padding:          0.3em 0.5em;
}

main input {
  height:           2em;
  line-height:      1.5;
}

main [type=file] {
  background: none;
  border: 0;
  text-indent: -7px;
  width: 100%;
}

main select {
  height:           2em;
  min-width:        10em;
  padding:          0.3em;
}

main textarea {
  min-width:        800px;
}

main [type=text] {
  width:            20em;
}

main .textnumber {
  text-align:       right;
  width:            3em;
}

main .textveryshort {
  width:            5em;
}

main .textshort {
  width:            10em;
}

main .textlong {
  width:            30em;
}

main .textverylong {
  width:            40em;
}

main [type=checkbox] {
  margin:           0;
  padding:          0;
}

main [type=button],
main [type=submit],
main [type=reset] {
  border-radius:    0.2em;
  color:            $button-text;
}

main [type=button]:hover,
main [type=submit]:hover,
main [type=reset]:hover {
  background:       $input-border;
  color:            $input-bg;
}

main .top-margin {
  margin-top:       1.5em;
}

table.elements {
  margin-left:      0.5em;
}

input.field_with_errors, select.field_with_errors, textarea.field_with_errors {
  border:           2px solid $red;
}

// preview thumbnails for ShinyCMS::Elements with type='image' (in edit forms for templated content, e.g. Pages)
.admin-image-thumbnail {
  border:           1px solid $light-grey;
  max-height:       150px;
  max-width:        100%;
  vertical-align:   top;
}

// fieldset for bottom-of-page 'add new element' forms
main fieldset {
  border:           1px solid $input-border;
  border-radius:    3px;
  display:          inline-block;
  margin:           2em 0 0;
  padding:          0 0.5em 1em;
}

main fieldset legend {
  color:            $dark-colour;
  font-size:        1em;
  margin:           0 0 0 0.5em;
  width:            initial;
}


// ==================== ( footer ) ====================

.c-footer {
  background:       $near-white;
  flex:             0 0 48px;
  height:           48px;
}

footer a {
  color:            $dark-colour;
}

footer a:hover {
  color:            $light-colour;
  text-decoration:  none;
}