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