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