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

Last commit: Tue Feb 22 21:37:08 2022 +0100	dankert	Fix: Displaying the QRCode was broken. Now the QR code is styled with CSS :)


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



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


History
Tue, 22 Feb 2022 21:37:08 +0100	dankert	Fix: Displaying the QRCode was broken. Now the QR code is styled with CSS :)
Sat, 18 Dec 2021 03:44:18 +0100	dankert	New: Display Workbench after Theme-CSS is loaded.
Mon, 6 Dec 2021 01:38:41 +0100	dankert	Fixed the file/image upload.
Tue, 30 Nov 2021 23:56:16 +0100	dankert	New: Checkboxes and Radio buttons with theme colors.
Tue, 30 Nov 2021 00:25:32 +0100	Jan Dankert	Cleanup the notices.
Mon, 29 Nov 2021 23:54:33 +0100	Jan Dankert	New: Spinner image with pure css. So we can colorize it now.
Mon, 29 Nov 2021 01:38:05 +0100	Jan Dankert	Only a comment for prefers-reduced-data (not supported yet)
Mon, 29 Nov 2021 01:22:40 +0100	Jan Dankert	New: Themes may contain multiple color schemes (for now only "dark" and "light"), modern browsers are selecting the right scheme.
Sun, 18 Apr 2021 01:21:33 +0200	Jan Dankert	Fix: Correct CSS3 syntax for transitions on multiple properties; New: Using a transition for open/close collapsibles.
Sat, 27 Mar 2021 10:40:59 +0100	Jan Dankert	Only generate the actual necessary theme style.
Sat, 6 Mar 2021 00:41:10 +0100	Jan Dankert	New: Notice are collapsible.
Thu, 25 Feb 2021 01:22:10 +0100	Jan Dankert	New: Edit all page elements in 1 view.
Mon, 22 Feb 2021 23:51:21 +0100	Jan Dankert	Better look of styles.
Mon, 15 Feb 2021 00:47:53 +0100	Jan Dankert	Fix: Displaying global search results instead of navigation.
Sun, 14 Feb 2021 23:18:14 +0100	Jan Dankert	New: Confirmation needed if a dialog is closed which has unsaved changes.
Sat, 13 Feb 2021 00:15:21 +0100	Jan Dankert	Fix: Disable background-image. It is not used now.
Sat, 13 Feb 2021 00:11:23 +0100	Jan Dankert	New: Transition-Duration is controllable via style configuration. So there is no need for a dedicated FX on/off-switch in the profile.
Sat, 13 Feb 2021 00:01:53 +0100	Jan Dankert	Fix: Navigation is available, while dialog is open; Fix: Shrink Action title text if necessary.
Fri, 12 Feb 2021 22:41:40 +0100	Jan Dankert	Nicer look of the search input field (outline:none was the key)
Fri, 12 Feb 2021 20:08:11 +0100	Jan Dankert	Fix: Show search result on top of the navigation.
Fri, 12 Feb 2021 00:43:08 +0100	Jan Dankert	New: Style colors; Fix: Mobile navigation, global search.
Wed, 10 Feb 2021 23:56:07 +0100	Jan Dankert	Fix: Colourize images; Fix: Mobile navigation.
Wed, 10 Feb 2021 23:05:46 +0100	Jan Dankert	Moving the search form upon the navigation, because the search is more like a navigation.
Wed, 10 Feb 2021 22:04:26 +0100	Jan Dankert	Provide the theme configuration through a class.
Wed, 10 Feb 2021 00:00:21 +0100	Jan Dankert	Using only fullscreen views; Navigate to parent instead of complete breadcrumb.
Tue, 1 Dec 2020 00:07:39 +0100	Jan Dankert	New: Visibility-Button for password fields, fix: QR-code button for mobile devices.
Fri, 27 Nov 2020 20:14:22 +0100	Jan Dankert	Fix: Mark input fields on input error.
Fri, 13 Nov 2020 00:12:44 +0100	Jan Dankert	Fixing Pagelement-History and Diff.
Wed, 11 Nov 2020 23:24:28 +0100	Jan Dankert	Fixing editing value of files,images,texts.
Wed, 11 Nov 2020 13:30:22 +0100	Jan Dankert	 A little transparent background for the menu.
Wed, 11 Nov 2020 13:11:14 +0100	Jan Dankert	Fixed navigation layout issues.
Wed, 11 Nov 2020 01:44:59 +0100	Jan Dankert	Fix: The search results are opened with the menu.
Tue, 10 Nov 2020 23:52:55 +0100	Jan Dankert	Every link should inherit its color.
Tue, 10 Nov 2020 23:46:00 +0100	Jan Dankert	Fix: Correct Background color in active menu entrys.
Tue, 10 Nov 2020 23:30:07 +0100	Jan Dankert	The background image is now configurable by the style configuration.
Tue, 10 Nov 2020 23:02:27 +0100	Jan Dankert	Colorize the background image with the theme background color.
Tue, 10 Nov 2020 01:16:21 +0100	Jan Dankert	New: Background image
Tue, 10 Nov 2020 00:35:56 +0100	Jan Dankert	Navigation gets same color as the view.
Tue, 10 Nov 2020 00:05:30 +0100	Jan Dankert	a background color for view content.
Mon, 9 Nov 2020 22:29:34 +0100	Jan Dankert	UI-Refactoring: The navigation is now on the left side with full height.
Thu, 5 Nov 2020 22:56:49 +0100	Jan Dankert	box-shadow should only be set in the theme css (because a color is needed and a color is theming)
Thu, 5 Nov 2020 22:51:14 +0100	Jan Dankert	Cleaned up the LESS files, more use of the BEM schema.
Mon, 26 Oct 2020 21:36:14 +0100	Jan Dankert	Rename css class 'clickable' to 'act-clickable'; enhanced view 'info' for projects.
Sat, 24 Oct 2020 23:51:11 +0200	Jan Dankert	Cleanup LESS files, introduce BEM.
Sun, 18 Oct 2020 01:30:49 +0200	Jan Dankert	New component "fieldset" for better form layout.
Sun, 11 Oct 2020 22:22:33 +0200	Jan Dankert	Fix: Filler-Layer must have a background-color
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Tue, 6 Oct 2020 22:23:11 +0200	Jan Dankert	Fix: Selecting a link with the selector (this was unusable since the last template refactoring). Searching is implemented, the selector tree must be fixed soon.
Mon, 5 Oct 2020 23:32:06 +0200	Jan Dankert	UI: Nicer buttons
Sun, 4 Oct 2020 23:53:25 +0200	Jan Dankert	New: The tree is now hidable with a dedicated button. No more hover effect in the navigation.
Fri, 2 Oct 2020 23:11:48 +0200	Jan Dankert	Cleanup: No '.inputholder' any more, notices with links to objects.
Tue, 29 Sep 2020 23:29:40 +0200	Jan Dankert	Cleanup the 'moorweide'-theme.
Sun, 27 Sep 2020 00:49:48 +0200	Jan Dankert	New: A form in the UI has now a scrollable content and the action bar is fixed at the bottom.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.