openrat-cms

openrat-theme.less (13230B)

---

 /* OpenRat Theme */
 
 /*
  * The following variables beginning with '@cms-...' are overwritten by the CMS style configuration values
  */
 @cms-theme-id: 'theme-name'; /* technical name of theme */
 @cms-image-path: '/'; /* Image-path */
 @cms-name: name; /* Logic name of theme */
 
 @cms-main-title-background-color: white;
 @cms-main-title-text-color: black;
 @cms-main-text-color: black;
 @cms-main-background-color: silver;
 
 @cms-inactive-background-color: gray;
 
 @cms-nav-title-text-color: gray;
 @cms-nav-title-background-color: gray;
 @cms-nav-text-color: gray;
 @cms-nav-background-color: gray;
 
 @cms-dialog-title-text-color: gray;
 @cms-dialog-title-background-color: gray;
 @cms-dialog-text-color: gray;
 @cms-dialog-background-color: gray;
 
 @cms-image-color: gray;
 
 @cms-background-image: "@{cms-image-path}background/fog.jpeg";
 
 @cms-notice-ok-color: green;
 @cms-notice-info-color: blue;
 @cms-notice-warning-color: yellow;
 @cms-notice-error-color: red;
 
 @cms-fill-color: black;
 @cms-transition-duration: 0.1s;
 
 
 html {
 
     .box-shadow (@x, @y, @radius, @color) {
         -webkit-box-shadow: @x @y @radius @color;
         -moz-box-shadow: @x @y @radius @color;
         box-shadow: @x @y @radius @color;
     }
 
 
 
 
   * {
       transition: opacity  @cms-transition-duration ease-in-out,width  @cms-transition-duration ease-in-out,height  @cms-transition-duration ease-in-out,flex  @cms-transition-duration ease-in-out,transform   @cms-transition-duration ease-in-out;
 
       // Reduced Motion
       @media screen and (prefers-reduced-motion: reduce) {
         transition: none;
       }
     }
 
 
     .or {
 
       &-qrcode {
           &-value {
             background-color: @cms-dialog-background-color;
             fill: @cms-image-color;
             .box-shadow(3px, 3px, 10px, @cms-dialog-title-background-color);
           }
       }
 
       &-loader {
           border-color: @cms-inactive-background-color;
           border-top-color: @cms-image-color;
         }
 
         &-workbench {
           &-navigation {
             scrollbar-face-color: mix(@cms-nav-text-color,@cms-nav-background-color);
             scrollbar-arrow-color: @cms-image-color;
             scrollbar-base-color: @cms-nav-background-color;
 
             scrollbar-color: mix(@cms-nav-text-color,@cms-nav-background-color) @cms-nav-background-color;
             scrollbar-width: thin;
 
           }
           &-main {
             scrollbar-face-color: mix(@cms-main-text-color,@cms-main-background-color);
             scrollbar-arrow-color: @cms-image-color;
             scrollbar-base-color: @cms-main-text-color;
 
             scrollbar-color: mix(@cms-main-text-color,@cms-main-background-color) @cms-main-background-color;
             scrollbar-width: thin;
           }
         }
 
       &-workbench {
         visibility: visible;
 
         &-navigation {
           box-shadow: 1em 0 2em @cms-nav-background-color;
         }
       }
       &-dialog-content {
         box-shadow: -1em 0 2em @cms-dialog-background-color;
       }
 
         &-image-icon {
           color: @cms-image-color;
         }
 
         &-view {
             &-header {
                 color: @cms-main-title-background-color;
             }
         }
 
         &-notice {
           border-color: @cms-main-title-text-color;
           color: @cms-main-title-text-color;
           background-color: @cms-main-title-background-color;
           line-height: 1.5em;
           .box-shadow(3px, 3px, 10px, @cms-main-title-text-color);
 
             &--ok {
                 border-left-color: @cms-notice-ok-color;
 
                 &:after {
                     //border-left-color: darken(@cms-notice-ok-color, 10%);
                 }
             }
 
             &--warning {
                 border-left-color: @cms-notice-warning-color;
 
                 &:after {
                     //border-left-color: darken(@cms-notice-warning-color, 10%);
                 }
 
             }
 
             &--info {
                 border-left-color: @cms-notice-info-color;
 
                 &:after {
                     //border-left-color: darken(@cms-notice-info-color, 10%);
                 }
             }
 
             &--error {
                 border-left-color: @cms-notice-error-color;
 
                 &:after {
                     //border-left-color: darken(@cms-notice-error-color, 10%);
                 }
             }
         }
 
 
         &-preview {
             a:link, a:visited, a:active, a:hover {
             }
 
             color: @cms-main-background-color;
         }
 
 
         &-table {
 
             tr.headline > td,
             tr.headline > th {
                 border-bottom: 1px solid @cms-main-title-background-color;
             }
 
             tr > td {
                 border-bottom: 1px solid @cms-main-title-background-color;
             }
 
             tr:nth-child(2n) {
                 //background-color: @cms-inactive-background-color;
             }
 
             tr.or-data:hover,
             tr.or-table-data:hover{
                 background-color: @cms-main-title-background-color;
                 color: @cms-main-title-text-color;
             }
         }
 
 
         &-workbench {
 
           &-title {
             text-color: @cms-main-text-color;
             background-color: @cms-main-title-background-color;
             //background-image: linear-gradient(to bottom, lighten(@cms-main-background-color, 10%), @cms-main-title-background-color 90%, @cms-inactive-background-color);
             color: @cms-main-title-text-color;
 
             .or-toolbar-icon > a {
               color: @cms-main-title-text-color;
             }
           }
           &-workplace {
             text-color: @cms-main-text-color;
             background-color: @cms-main-background-color;
           }
 
           &-search {
             text-color: @cms-nav-title-text-color;
             background-color: @cms-nav-title-background-color;
 
           }
 
 
           &-navigation {
             &-container {
               text-color: @cms-nav-text-color;
               background-color: @cms-nav-background-color;
             }
 
             &-filler {
                 //background-color: @cms-nav-title-background-color;
                 background-color: @cms-fill-color;
             }
           }
 
 
 
             &-section {
                 border-color: @cms-main-text-color;
 
                 &.or-open {
                     background-color: lighten(@cms-main-background-color, 10%);
                 }
             }
 
 
 /*            &-navigation-container {
                 //background-color: @cms-main-title-background-color;
                 //color: @cms-main-title-text-color;
                 background-color: @cms-main-background-color;
                 .box-shadow(10px, 0px, 25px, @cms-main-background-color);
                 background-image: linear-gradient(to right, lighten(@cms-main-background-color, 10%), @cms-main-background-color);
             }*/
             &-navigation,
             &-navigation .or-link {
                 color: @cms-nav-text-color;
             }
         }
 
       &-search {
         &-input {
 
           border-color: @cms-nav-title-background-color;
 
           .or-input {
             background-color: @cms-nav-title-background-color;
             color: @cms-nav-title-text-color;
           }
         }
 
         &-result {
           //background-color: @cms-nav-background-color;
         }
       }
 
       &-dialog {
         &-title {
           background-color: @cms-dialog-title-background-color;
           color: @cms-dialog-title-text-color;
         }
         &-content {
           background-color: @cms-dialog-background-color;
           color: @cms-dialog-text-color;
           //.box-shadow();
 
           .or-view {
           }
         }
 
         &-filler {
           //background-color: @cms-main-background-color;
           background-color: @cms-fill-color;
         }
       }
 
         &-input {
             background-color: @cms-main-title-background-color;
             color: @cms-main-title-text-color;
             //border-color: mix(@cms-main-title-text-color, @cms-main-title-background-color);
             //.box-shadow(0px, 0px, 3px, @cms-main-title-text-color);
             border-color: @cms-main-text-color;
 
             &:focus {
               border-color: @cms-image-color;
             }
 
             //border-color: @cms-main-title-text-color;
 
             &--error {
                 //border-bottom: 1px dotted @cms-main-text-color ! important;
                 border-color: @cms-notice-error-color ! important;
             }
 
 
             &.or-hint {
                 color: @cms-main-title-background-color;
             }
 
         }
 
 
         &-group {
             border-color: mix(@cms-main-text-color, @cms-main-background-color);
 
           &-description {
             color: mix(@cms-main-text-color, @cms-main-background-color);
             font-size: 0.9em;
           }
         }
 
         &-act-clickable {
 
             //color: inherit;
             /*
             &.or-filtered > a {
                 color: @cms-text-color;
 
                 &.or-dropdown-entry--active:hover {
                     color: @cms-background-color;
                 }
             }
 
             &.or-filtered.or-dropdown-entry--active > a {
                 color: @cms-text-color;
 
                 &:hover {
                     color: @cms-background-color;
                 }
             }*/
         }
 
         &-dropdown {
             .or-link {
                 color: inherit;
             }
 
             .box-shadow(3px, 2px, 5px, @cms-nav-background-color);
             border: 1px solid mix(@cms-nav-background-color,@cms-inactive-background-color);
 
             background-color: @cms-nav-background-color;
             color: @cms-nav-text-color;
 
             &-entry {
 
                 background-color: @cms-nav-background-color;
                 color: @cms-nav-text-color;
 
                 &--inactive {
                     color: mix(@cms-nav-background-color, @cms-nav-text-color, 40%);
                 }
 
                 &--active:hover {
                     background-color: @cms-nav-text-color;
                     color: @cms-nav-background-color;
                 }
             }
 
 
             &-divide {
                 background-color: mix(@cms-nav-background-color,@cms-nav-background-color);
             }
         }
 
         &-toolbar-icon {
             //border-color: 1px solid @cms-main-title-background-color;
 
             &:hover {
              //   border: 1px solid @cms-main-title-text-color;
             }
         }
 
 
         &-dropzone-upload {
             background-color: @cms-main-title-text-color;
             border: 1px dotted @cms-main-text-color;
         }
 
         &-hover-effect:hover {
             background-color: darken(@cms-main-background-color, 10%);;
         }
 
         &-info-popup {
             background-color: @cms-main-title-background-color;
             color: @cms-main-title-text-color;
         }
 
 
         &-collapsible {
           &-title {
             border-color: @cms-main-background-color;
           }
           &--is-open {
             .or-collapsible-title {
               border-color: mix(@cms-main-text-color, @cms-main-background-color);
             }
 
           }
         }
 
         &-btn,
         &-link-btn {
             border-color: @cms-main-background-color;
             &--is-active {
                 background-color: @cms-inactive-background-color;
                 border-color: @cms-main-background-color;
             }
             color: @cms-main-title-text-color;
             .box-shadow(0, 0, 0.5em, @cms-main-background-color);
 
             &:hover {
                 border-color: @cms-main-title-text-color;
             }
 
             &--primary {
                 background-color: @cms-main-title-background-color;
             }
         }
 
         &-form {
           &-checkbox,
           &-radio {
             border-color: @cms-main-text-color;
             &:checked {
               background-color: @cms-image-color;
             }
           }
 
           &-content {
             padding-bottom: 5em;
           }
           &-actionbar {
             background-color: @cms-dialog-background-color;
             .box-shadow(0,-2em,2em,@cms-dialog-background-color);
           }
         }
 
         &-fieldset {
           &-label {
             color: mix(@cms-main-text-color, @cms-main-background-color);
           }
         }
     }
 
     small {
         color: @cms-main-title-background-color;
     }
 
     textarea.longtext {
         border-color: @cms-main-text-color;
     }
 
     body {
         color: @cms-main-text-color;
     }
     a {
         color: inherit;
     }
 
     body {
       background-color: @cms-main-background-color;
         &:before {
 
             // background image is not displayed now. So we should not use it here, the browser should not download it.
             //filter: hue-rotate(unit(hue(@cms-inactive-background-color),deg)) saturate(saturation(@cms-inactive-background-color)) brightness(lightness(@cms-inactive-background-color)  );
             //background-image: url(@cms-background-image);
             //@media (prefers-reduced-data: reduce) {
             //  background-image: none;
             //}
         }
     }
 }
 
 /* Theme Ende */