File modules/cms/ui/themes/default/style/openrat-theme.less

Last commit: Thu Dec 26 19:53:54 2024 +0100	Jan Dankert	The ThemeStyle is now able to mix colors and all colors are now internally hold as RGB; New Group background colors in the UI.


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



Download modules/cms/ui/themes/default/style/openrat-theme.less


History
Thu, 26 Dec 2024 19:53:54 +0100	Jan Dankert	The ThemeStyle is now able to mix colors and all colors are now internally hold as RGB; New Group background colors in the UI.
Fri, 6 Dec 2024 23:29:56 +0100	Jan Dankert	UI: Cleaner profile dialog in navigation menu.
Wed, 30 Oct 2024 22:17:22 +0100	Jan Dankert	UI-Refactoring: The navigation is now able to open its own dialog.
Sun, 13 Oct 2024 15:00:13 +0200	Jan Dankert	Refactoring CSS: Using native CSS variables for theme colors.