openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

openrat-theme.less (13230B)


      1 /* OpenRat Theme */
      2 
      3 /*
      4  * The following variables beginning with '@cms-...' are overwritten by the CMS style configuration values
      5  */
      6 @cms-theme-id: 'theme-name'; /* technical name of theme */
      7 @cms-image-path: '/'; /* Image-path */
      8 @cms-name: name; /* Logic name of theme */
      9 
     10 @cms-main-title-background-color: white;
     11 @cms-main-title-text-color: black;
     12 @cms-main-text-color: black;
     13 @cms-main-background-color: silver;
     14 
     15 @cms-inactive-background-color: gray;
     16 
     17 @cms-nav-title-text-color: gray;
     18 @cms-nav-title-background-color: gray;
     19 @cms-nav-text-color: gray;
     20 @cms-nav-background-color: gray;
     21 
     22 @cms-dialog-title-text-color: gray;
     23 @cms-dialog-title-background-color: gray;
     24 @cms-dialog-text-color: gray;
     25 @cms-dialog-background-color: gray;
     26 
     27 @cms-image-color: gray;
     28 
     29 @cms-background-image: "@{cms-image-path}background/fog.jpeg";
     30 
     31 @cms-notice-ok-color: green;
     32 @cms-notice-info-color: blue;
     33 @cms-notice-warning-color: yellow;
     34 @cms-notice-error-color: red;
     35 
     36 @cms-fill-color: black;
     37 @cms-transition-duration: 0.1s;
     38 
     39 
     40 html {
     41 
     42     .box-shadow (@x, @y, @radius, @color) {
     43         -webkit-box-shadow: @x @y @radius @color;
     44         -moz-box-shadow: @x @y @radius @color;
     45         box-shadow: @x @y @radius @color;
     46     }
     47 
     48 
     49 
     50 
     51   * {
     52       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;
     53 
     54       // Reduced Motion
     55       @media screen and (prefers-reduced-motion: reduce) {
     56         transition: none;
     57       }
     58     }
     59 
     60 
     61     .or {
     62 
     63       &-qrcode {
     64           &-value {
     65             background-color: @cms-dialog-background-color;
     66             fill: @cms-image-color;
     67             .box-shadow(3px, 3px, 10px, @cms-dialog-title-background-color);
     68           }
     69       }
     70 
     71       &-loader {
     72           border-color: @cms-inactive-background-color;
     73           border-top-color: @cms-image-color;
     74         }
     75 
     76         &-workbench {
     77           &-navigation {
     78             scrollbar-face-color: mix(@cms-nav-text-color,@cms-nav-background-color);
     79             scrollbar-arrow-color: @cms-image-color;
     80             scrollbar-base-color: @cms-nav-background-color;
     81 
     82             scrollbar-color: mix(@cms-nav-text-color,@cms-nav-background-color) @cms-nav-background-color;
     83             scrollbar-width: thin;
     84 
     85           }
     86           &-main {
     87             scrollbar-face-color: mix(@cms-main-text-color,@cms-main-background-color);
     88             scrollbar-arrow-color: @cms-image-color;
     89             scrollbar-base-color: @cms-main-text-color;
     90 
     91             scrollbar-color: mix(@cms-main-text-color,@cms-main-background-color) @cms-main-background-color;
     92             scrollbar-width: thin;
     93           }
     94         }
     95 
     96       &-workbench {
     97         visibility: visible;
     98 
     99         &-navigation {
    100           box-shadow: 1em 0 2em @cms-nav-background-color;
    101         }
    102       }
    103       &-dialog-content {
    104         box-shadow: -1em 0 2em @cms-dialog-background-color;
    105       }
    106 
    107         &-image-icon {
    108           color: @cms-image-color;
    109         }
    110 
    111         &-view {
    112             &-header {
    113                 color: @cms-main-title-background-color;
    114             }
    115         }
    116 
    117         &-notice {
    118           border-color: @cms-main-title-text-color;
    119           color: @cms-main-title-text-color;
    120           background-color: @cms-main-title-background-color;
    121           line-height: 1.5em;
    122           .box-shadow(3px, 3px, 10px, @cms-main-title-text-color);
    123 
    124             &--ok {
    125                 border-left-color: @cms-notice-ok-color;
    126 
    127                 &:after {
    128                     //border-left-color: darken(@cms-notice-ok-color, 10%);
    129                 }
    130             }
    131 
    132             &--warning {
    133                 border-left-color: @cms-notice-warning-color;
    134 
    135                 &:after {
    136                     //border-left-color: darken(@cms-notice-warning-color, 10%);
    137                 }
    138 
    139             }
    140 
    141             &--info {
    142                 border-left-color: @cms-notice-info-color;
    143 
    144                 &:after {
    145                     //border-left-color: darken(@cms-notice-info-color, 10%);
    146                 }
    147             }
    148 
    149             &--error {
    150                 border-left-color: @cms-notice-error-color;
    151 
    152                 &:after {
    153                     //border-left-color: darken(@cms-notice-error-color, 10%);
    154                 }
    155             }
    156         }
    157 
    158 
    159         &-preview {
    160             a:link, a:visited, a:active, a:hover {
    161             }
    162 
    163             color: @cms-main-background-color;
    164         }
    165 
    166 
    167         &-table {
    168 
    169             tr.headline > td,
    170             tr.headline > th {
    171                 border-bottom: 1px solid @cms-main-title-background-color;
    172             }
    173 
    174             tr > td {
    175                 border-bottom: 1px solid @cms-main-title-background-color;
    176             }
    177 
    178             tr:nth-child(2n) {
    179                 //background-color: @cms-inactive-background-color;
    180             }
    181 
    182             tr.or-data:hover,
    183             tr.or-table-data:hover{
    184                 background-color: @cms-main-title-background-color;
    185                 color: @cms-main-title-text-color;
    186             }
    187         }
    188 
    189 
    190         &-workbench {
    191 
    192           &-title {
    193             text-color: @cms-main-text-color;
    194             background-color: @cms-main-title-background-color;
    195             //background-image: linear-gradient(to bottom, lighten(@cms-main-background-color, 10%), @cms-main-title-background-color 90%, @cms-inactive-background-color);
    196             color: @cms-main-title-text-color;
    197 
    198             .or-toolbar-icon > a {
    199               color: @cms-main-title-text-color;
    200             }
    201           }
    202           &-workplace {
    203             text-color: @cms-main-text-color;
    204             background-color: @cms-main-background-color;
    205           }
    206 
    207           &-search {
    208             text-color: @cms-nav-title-text-color;
    209             background-color: @cms-nav-title-background-color;
    210 
    211           }
    212 
    213 
    214           &-navigation {
    215             &-container {
    216               text-color: @cms-nav-text-color;
    217               background-color: @cms-nav-background-color;
    218             }
    219 
    220             &-filler {
    221                 //background-color: @cms-nav-title-background-color;
    222                 background-color: @cms-fill-color;
    223             }
    224           }
    225 
    226 
    227 
    228             &-section {
    229                 border-color: @cms-main-text-color;
    230 
    231                 &.or-open {
    232                     background-color: lighten(@cms-main-background-color, 10%);
    233                 }
    234             }
    235 
    236 
    237 /*            &-navigation-container {
    238                 //background-color: @cms-main-title-background-color;
    239                 //color: @cms-main-title-text-color;
    240                 background-color: @cms-main-background-color;
    241                 .box-shadow(10px, 0px, 25px, @cms-main-background-color);
    242                 background-image: linear-gradient(to right, lighten(@cms-main-background-color, 10%), @cms-main-background-color);
    243             }*/
    244             &-navigation,
    245             &-navigation .or-link {
    246                 color: @cms-nav-text-color;
    247             }
    248         }
    249 
    250       &-search {
    251         &-input {
    252 
    253           border-color: @cms-nav-title-background-color;
    254 
    255           .or-input {
    256             background-color: @cms-nav-title-background-color;
    257             color: @cms-nav-title-text-color;
    258           }
    259         }
    260 
    261         &-result {
    262           //background-color: @cms-nav-background-color;
    263         }
    264       }
    265 
    266       &-dialog {
    267         &-title {
    268           background-color: @cms-dialog-title-background-color;
    269           color: @cms-dialog-title-text-color;
    270         }
    271         &-content {
    272           background-color: @cms-dialog-background-color;
    273           color: @cms-dialog-text-color;
    274           //.box-shadow();
    275 
    276           .or-view {
    277           }
    278         }
    279 
    280         &-filler {
    281           //background-color: @cms-main-background-color;
    282           background-color: @cms-fill-color;
    283         }
    284       }
    285 
    286         &-input {
    287             background-color: @cms-main-title-background-color;
    288             color: @cms-main-title-text-color;
    289             //border-color: mix(@cms-main-title-text-color, @cms-main-title-background-color);
    290             //.box-shadow(0px, 0px, 3px, @cms-main-title-text-color);
    291             border-color: @cms-main-text-color;
    292 
    293             &:focus {
    294               border-color: @cms-image-color;
    295             }
    296 
    297             //border-color: @cms-main-title-text-color;
    298 
    299             &--error {
    300                 //border-bottom: 1px dotted @cms-main-text-color ! important;
    301                 border-color: @cms-notice-error-color ! important;
    302             }
    303 
    304 
    305             &.or-hint {
    306                 color: @cms-main-title-background-color;
    307             }
    308 
    309         }
    310 
    311 
    312         &-group {
    313             border-color: mix(@cms-main-text-color, @cms-main-background-color);
    314 
    315           &-description {
    316             color: mix(@cms-main-text-color, @cms-main-background-color);
    317             font-size: 0.9em;
    318           }
    319         }
    320 
    321         &-act-clickable {
    322 
    323             //color: inherit;
    324             /*
    325             &.or-filtered > a {
    326                 color: @cms-text-color;
    327 
    328                 &.or-dropdown-entry--active:hover {
    329                     color: @cms-background-color;
    330                 }
    331             }
    332 
    333             &.or-filtered.or-dropdown-entry--active > a {
    334                 color: @cms-text-color;
    335 
    336                 &:hover {
    337                     color: @cms-background-color;
    338                 }
    339             }*/
    340         }
    341 
    342         &-dropdown {
    343             .or-link {
    344                 color: inherit;
    345             }
    346 
    347             .box-shadow(3px, 2px, 5px, @cms-nav-background-color);
    348             border: 1px solid mix(@cms-nav-background-color,@cms-inactive-background-color);
    349 
    350             background-color: @cms-nav-background-color;
    351             color: @cms-nav-text-color;
    352 
    353             &-entry {
    354 
    355                 background-color: @cms-nav-background-color;
    356                 color: @cms-nav-text-color;
    357 
    358                 &--inactive {
    359                     color: mix(@cms-nav-background-color, @cms-nav-text-color, 40%);
    360                 }
    361 
    362                 &--active:hover {
    363                     background-color: @cms-nav-text-color;
    364                     color: @cms-nav-background-color;
    365                 }
    366             }
    367 
    368 
    369             &-divide {
    370                 background-color: mix(@cms-nav-background-color,@cms-nav-background-color);
    371             }
    372         }
    373 
    374         &-toolbar-icon {
    375             //border-color: 1px solid @cms-main-title-background-color;
    376 
    377             &:hover {
    378              //   border: 1px solid @cms-main-title-text-color;
    379             }
    380         }
    381 
    382 
    383         &-dropzone-upload {
    384             background-color: @cms-main-title-text-color;
    385             border: 1px dotted @cms-main-text-color;
    386         }
    387 
    388         &-hover-effect:hover {
    389             background-color: darken(@cms-main-background-color, 10%);;
    390         }
    391 
    392         &-info-popup {
    393             background-color: @cms-main-title-background-color;
    394             color: @cms-main-title-text-color;
    395         }
    396 
    397 
    398         &-collapsible {
    399           &-title {
    400             border-color: @cms-main-background-color;
    401           }
    402           &--is-open {
    403             .or-collapsible-title {
    404               border-color: mix(@cms-main-text-color, @cms-main-background-color);
    405             }
    406 
    407           }
    408         }
    409 
    410         &-btn,
    411         &-link-btn {
    412             border-color: @cms-main-background-color;
    413             &--is-active {
    414                 background-color: @cms-inactive-background-color;
    415                 border-color: @cms-main-background-color;
    416             }
    417             color: @cms-main-title-text-color;
    418             .box-shadow(0, 0, 0.5em, @cms-main-background-color);
    419 
    420             &:hover {
    421                 border-color: @cms-main-title-text-color;
    422             }
    423 
    424             &--primary {
    425                 background-color: @cms-main-title-background-color;
    426             }
    427         }
    428 
    429         &-form {
    430           &-checkbox,
    431           &-radio {
    432             border-color: @cms-main-text-color;
    433             &:checked {
    434               background-color: @cms-image-color;
    435             }
    436           }
    437 
    438           &-content {
    439             padding-bottom: 5em;
    440           }
    441           &-actionbar {
    442             background-color: @cms-dialog-background-color;
    443             .box-shadow(0,-2em,2em,@cms-dialog-background-color);
    444           }
    445         }
    446 
    447         &-fieldset {
    448           &-label {
    449             color: mix(@cms-main-text-color, @cms-main-background-color);
    450           }
    451         }
    452     }
    453 
    454     small {
    455         color: @cms-main-title-background-color;
    456     }
    457 
    458     textarea.longtext {
    459         border-color: @cms-main-text-color;
    460     }
    461 
    462     body {
    463         color: @cms-main-text-color;
    464     }
    465     a {
    466         color: inherit;
    467     }
    468 
    469     body {
    470       background-color: @cms-main-background-color;
    471         &:before {
    472 
    473             // background image is not displayed now. So we should not use it here, the browser should not download it.
    474             //filter: hue-rotate(unit(hue(@cms-inactive-background-color),deg)) saturate(saturation(@cms-inactive-background-color)) brightness(lightness(@cms-inactive-background-color)  );
    475             //background-image: url(@cms-background-image);
    476             //@media (prefers-reduced-data: reduce) {
    477             //  background-image: none;
    478             //}
    479         }
    480     }
    481 }
    482 
    483 /* Theme Ende */