openrat-ui.less (16448B)
1 /* Usage to this variable is safe to be removed */ 2 @color-overridden-by-theme: black; 3 4 /* oxygen-regular - latin */ 5 @font-face { 6 font-family: 'Oxygen'; 7 font-style: normal; 8 font-weight: 400; 9 src: local('Oxygen Regular'), local('Oxygen-Regular'), 10 url('../font/oxygen-v7-latin-regular.woff') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ 11 url('../font/oxygen-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 12 } 13 14 /* source-code-pro-regular - latin */ 15 @font-face { 16 font-family: 'Source Code Pro'; 17 font-style: normal; 18 font-weight: 400; 19 src: local('Source Code Pro'), local('SourceCodePro-Regular'), 20 url('../font/source-code-pro-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ 21 url('../font/source-code-pro-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 22 } 23 24 @font-face { 25 font-family: 'Material Icons'; 26 font-style: normal; 27 font-weight: 400; 28 src: local('Material Icons'), 29 local('MaterialIcons-Regular'), 30 url('../font/MaterialIcons-Regular.woff2') format('woff2'), 31 url('../font/MaterialIcons-Regular.woff') format('woff'); 32 } 33 34 .image-icon { 35 font-family: 'Material Icons'; 36 font-weight: normal; 37 font-style: normal; 38 display: inline-block; 39 text-transform: none; 40 letter-spacing: normal; 41 word-wrap: normal; 42 white-space: nowrap; 43 direction: ltr; 44 45 /* Support for all WebKit browsers. */ 46 //-webkit-font-smoothing: antialiased; 47 48 /* Support for Safari and Chrome. */ 49 //text-rendering: optimizeLegibility; 50 51 /* Support for Firefox. */ 52 //-moz-osx-font-smoothing: grayscale; 53 54 /* Support for IE. */ 55 font-feature-settings: 'liga'; 56 57 //&.image-icon--method-publish:after { content: "\F21E"; } 58 &.image-icon--action-el_text:after { content: "spellcheck"; } 59 &.image-icon--action-el_longtext:after { content: "view_headline"; } 60 &.image-icon--action-el_select:after { content: "list"; } 61 &.image-icon--action-el_number:after { content: "looks_one"; } 62 &.image-icon--action-el_link:after { content: "call_made"; } 63 &.image-icon--action-el_date:after { content: "date_range"; } 64 &.image-icon--action-el_insert:after { content: "keyboard_return"; } 65 &.image-icon--action-el_copy:after { content: "flip_to_back"; } 66 &.image-icon--action-el_linkinfo:after { content: "info"; } 67 &.image-icon--action-el_linkdate:after { content: "info"; } 68 &.image-icon--action-el_code:after { content: "code"; } 69 &.image-icon--action-el_dynamic:after { content: "play_circle_outline"; } 70 &.image-icon--action-el_info:after { content: "info"; } 71 &.image-icon--action-el_infodate:after { content: "info"; } 72 &.image-icon--action-el_checkbox:after { content: "check_box"; } 73 74 &.image-icon--action-image:after { content: "image"; } 75 &.image-icon--action-link:after { content: "call_made"; } 76 &.image-icon--action-url:after { content: "link"; } 77 &.image-icon--action-alias:after { content: "bookmark_border"; } 78 &.image-icon--action-text:after { content: "text_format"; } 79 &.image-icon--action-page:after { content: "insert_drive_file"; } 80 &.image-icon--action-file:after { content: "save"; } 81 &.image-icon--action-modellist:after { content: "device_hub"; } 82 &.image-icon--action-model:after { content: "device_hub"; } 83 &.image-icon--action-folder:after { content: "folder_open"; } 84 &.image-icon--action-languagelist:after { content: "language"; } 85 &.image-icon--action-language:after { content: "language"; } 86 &.image-icon--action-template:after { content: "receipt"; } 87 &.image-icon--action-templatelist:after { content: "receipt"; } 88 &.image-icon--action-groupllist:after { content: "group"; } 89 &.image-icon--action-group:after { content: "group"; } 90 &.image-icon--action-userlist:after { content: "person"; } 91 &.image-icon--action-user:after { content: "person"; } 92 &.image-icon--action-profile:after { content: "person_pin"; } 93 &.image-icon--method-settings:after { content: "settings"; } 94 &.image-icon--action-configuration:after { content: "settings"; } 95 &.image-icon--action-projectlist:after { content: "list"; } 96 &.image-icon--action-project:after { content: "account_balance"; } 97 //&.image-icon--action-alias:after { content: "forward"; } 98 &.image-icon--action-macro:after { content: "data_usage"; } 99 100 &.image-icon--action-membership { content: "card_membership"; } 101 &.image-icon--method-password:after { content: "lock"; } 102 &.image-icon--method-publish:after { content: "cloud_upload"; } 103 &.image-icon--method-show:after { content: "slideshow"; } 104 &.image-icon--method-src:after { content: "code"; } 105 &.image-icon--method-acl:after { content: "https"; } 106 &.image-icon--method-rights:after { content: "https"; } 107 &.image-icon--method-archive:after { content: "schedule"; } 108 &.image-icon--method-mail:after { content: "mail"; } 109 &.image-icon--method-search:after { content: "search"; } 110 &.image-icon--method-add:after { content: "add_box"; } 111 &.image-icon--menu-close:after { content: "close"; } 112 &.image-icon--menu-fullscreen:after { content: "fullscreen"; } 113 &.image-icon--menu-edit:after { content: "description"; } 114 &.image-icon--menu-extra:after { content: "build"; } 115 116 &.image-icon--menu-menu:after { content: "menu"; } 117 &.image-icon--menu-minimize:after { content: "compare_arrows"; } 118 &.image-icon--menu-qrcode:after { content: "phone_android"; } 119 120 &.image-icon--node-open:after { content: "expand_more"; } 121 &.image-icon--node-closed:after { content: "chevron_right"; } 122 123 &.image-icon--form-ok:after { content: "done"; } 124 &.image-icon--form-cancel:after { content: "clear"; } 125 126 &.image-icon--editor-bold:after { content: "format_bold"; } 127 &.image-icon--editor-italic:after { content: "format_italic"; } 128 &.image-icon--editor-headline:after { content: "format_size"; } 129 &.image-icon--editor-help:after { content: "help_outline"; } 130 &.image-icon--editor-fullscreen:after { content: "fullscreen"; } 131 &.image-icon--editor-quote:after { content: "format_quote"; } 132 &.image-icon--editor-unnumberedlist:after { content: "format_list_bulleted"; } 133 &.image-icon--editor-numberedlist:after { content: "format_list_numbered"; } 134 &.image-icon--editor-preview:after { content: "desktop_windows"; } 135 &.image-icon--editor-sidebyside:after { content: "flip"; } 136 &.image-icon--editor-link:after { content: "link"; } 137 &.image-icon--editor-image:after { content: "image"; } 138 &.image-icon--editor-undo:after { content: "undo"; } 139 &.image-icon--editor-redo:after { content: "redo"; } 140 &.image-icon--editor-code:after { content: "code"; } 141 &.image-icon--editor-horizontalrule:after { content: "remove"; } 142 &.image-icon--editor-table:after { content: "view_comfy"; } 143 } 144 145 .editor-toolbar { 146 font-size: 1.5em; 147 } 148 149 .border-radius (@radius) { 150 border-radius: @radius; 151 -moz-border-radius: @radius; 152 -webkit-border-radius: @radius; 153 -khtml-border-radius: @radius; 154 } 155 .box-shadow (@x, @y, @radius, @color) { 156 -webkit-box-shadow: @x @y @radius @color; 157 -moz-box-shadow: @x @y @radius @color; 158 box-shadow: @x @y @radius @color; 159 } 160 161 162 iframe { 163 width: 100%; 164 height: 500px; 165 display: block; 166 } 167 168 div.breadcrumb, 169 div.breadcrumb a, 170 div.panel > div.title { 171 font-weight: bold; 172 } 173 174 div#noticebar { 175 176 display: block; 177 position: fixed; 178 bottom: 40px; 179 /*top: 40px;*/ 180 right: 40px; 181 width: 25em; 182 z-index: 113; 183 184 185 div.notice { 186 border: 2px solid @color-overridden-by-theme; 187 padding: 1.1em; 188 margin: 5px; 189 position: relative; 190 191 .border-radius(5px); 192 .box-shadow(3px, 2px, 5px, @color-overridden-by-theme); 193 194 .or-notice-toolbar { 195 float: right; 196 margin:0 0.2em; 197 font-size: 2em; 198 color: gray; 199 cursor: pointer; 200 } 201 202 &:hover { 203 .or-notice-toolbar { 204 color: black; 205 } 206 } 207 208 &.full { 209 display: block; 210 position: fixed; 211 bottom: 10%; 212 top: 10%; 213 right:10%; 214 left: 10%; 215 width:80%; 216 z-index: 114; 217 } 218 219 220 &.error { 221 222 div.text { 223 font-weight: bold; 224 } 225 } 226 227 div.text { 228 font-size: 1.1em; 229 } 230 231 &:after { 232 content: ''; 233 position: absolute; 234 right: 0; 235 top: 50%; 236 width: 0; 237 height: 0; 238 border: 1em solid transparent; 239 border-right: 0; 240 margin-top: -1em; 241 margin-right: -1em; 242 } 243 244 div.log { 245 display: none; 246 position: relative; 247 max-height:90%; 248 overflow: auto; 249 font-family: 'Source Code Pro',Monospace, Monospaced, Courier; 250 } 251 252 &.full { 253 div.log { 254 display: block; 255 } 256 } 257 258 259 } 260 261 } 262 263 264 265 266 267 268 269 270 271 272 273 div.onrowvisible { 274 visibility: hidden; 275 display: inline; 276 } 277 278 /* Vorschau von Text-Inhalten */ 279 .preview { 280 } 281 282 /* Verweise */ 283 a:link, 284 a:visited { 285 font-weight: normal; 286 text-decoration: none; 287 } 288 289 a:active, 290 a:hover { 291 font-weight: normal; 292 text-decoration: none; 293 } 294 295 /* Icon-Innenabstand */ 296 img[align=left], 297 img[align=right] { 298 padding-right: 1px; 299 padding-left: 1px; 300 } 301 302 /* Vorformatierter Text */ 303 pre { 304 } 305 306 /* Lizenzhinweis */ 307 a.copyright { 308 // font-size: 0.7em; 309 // text-decoration: none; 310 } 311 312 div.logo h2 { 313 font-weight: normal; 314 font-size: 24px; 315 } 316 317 div.logo p { 318 font-size: 13px; 319 } 320 321 label, 322 .clickable { 323 cursor: pointer; 324 } 325 326 327 /* Drag and Drop */ 328 329 .or-droppable { 330 331 &--active { 332 333 background-color: #2E8B57 !important; 334 cursor: move; 335 } 336 337 &--hover { 338 background-color: #00d95a !important; 339 cursor: move; 340 } 341 } 342 343 344 /* T a b s */ 345 346 img.icon { 347 padding: 4px; 348 width: 16px; 349 height: 16px; 350 } 351 352 div.panel ul.views li { 353 vertical-align: middle; 354 padding: 0px; 355 356 cursor: pointer; 357 358 border-right: 1px solid @color-overridden-by-theme; 359 360 -moz-border-radius-topleft: 5px; /* Mozilla */ 361 -webkit-border-radius-topleft: 5px; /* Webkit */ 362 -khtml-border-top-radius-topleft: 5px; /* Konqui */ 363 border-top-right-radius: 5px; 364 -moz-border-radius-topright: 5px; /* Mozilla */ 365 -webkit-border-radius-topright: 5px; /* Webkit */ 366 -khtml-border-top-radius-topright: 5px; /* Konqui */ 367 border-top-right-radius: 5px; 368 369 display: inline; 370 white-space: nowrap; 371 float: left; 372 } 373 374 div.panel { 375 margin: 0px; 376 padding: 0px; 377 } 378 379 380 381 382 /* S t a t u s z e i l e */ 383 div.panel div.status { 384 padding: 10px; 385 } 386 387 div.panel div.status div.error, 388 div.message.error { 389 background: url(../images/notice_error.png) no-repeat; 390 background-position: 5px 7px; 391 } 392 393 div.panel div.status div.warn, 394 div.message.warn { 395 background: url(../images/notice_warning.png) no-repeat; 396 background-position: 5px 7px; 397 } 398 399 div.panel div.status div.ok, 400 div.message.ok { 401 background: url(../images/notice_ok.png) no-repeat; 402 background-position: 5px 7px; 403 } 404 405 div.panel div.status div.info, 406 div.message.info { 407 background: url(../images/notice_info.png) no-repeat; 408 background-position: 5px 7px; 409 } 410 411 div.panel div.status div, 412 div.message { 413 border: 1px solid @color-overridden-by-theme; 414 padding: 5px 0px 5px 25px; 415 margin: 10px 10px 20px 10px; 416 417 -moz-border-radius: 5px; 418 -webkit-border-radius: 5px; 419 -khtml-border-radius: 5px; 420 border-radius: 5px; 421 } 422 423 424 #workbench { 425 div.panel.fullscreen { 426 display: block; 427 z-index: 109; 428 position: fixed; 429 top: 0; 430 left: 0; 431 background-color: @color-overridden-by-theme; 432 margin: 0px; 433 width: 100% ! important; 434 height: 100% ! important; 435 } 436 437 div.panel.fullscreen > div.content { 438 width: 100% ! important; 439 height: 100% ! important; 440 } 441 442 div.panel { 443 border: 1px solid @color-overridden-by-theme; 444 margin: 0px; 445 padding: 0px; 446 -moz-border-radius: 5px; 447 -webkit-border-radius: 5px; 448 -khtml-border-radius: 5px; 449 border-radius: 5px; 450 } 451 452 div.container, div.panel, div.divider { 453 display: inline; 454 float: left; 455 margin: 0px; 456 } 457 458 div.panel > div.content { 459 overflow: auto; 460 } 461 } 462 463 .invisible { 464 visibility: hidden; 465 } 466 467 .visible { 468 visibility: visible; 469 } 470 471 /* 472 * Formular-Button-Leiste 473 */ 474 div.panel { 475 position: relative; 476 } 477 478 div.content div.bottom { 479 height: 55px; 480 width: 100%; 481 position: absolute; 482 padding-right: 40px; 483 bottom: 0px; 484 right: 0px; 485 xvisibility: hidden; 486 } 487 488 div.content div.bottom > div.command { 489 xvisibility: visible; 490 float: right; 491 z-index: 20; 492 } 493 494 div.content form[data-autosave='true'] div.command { 495 display: none; 496 } 497 498 div.content > form { 499 padding-bottom: 45px; 500 } 501 502 503 504 505 506 507 main .or-form .or-form-actionbar { 508 display: none; 509 } 510 511 512 /* R e s p o n s i v e f o r m s */ 513 .or-form { 514 input[type=checkbox] + label, 515 input[type=radio] + label { 516 width: 80%; 517 } 518 519 .headline { 520 font-size: 1.8em; 521 } 522 523 label div.description { 524 //font-size: 0.75em; 525 } 526 527 div.inputholder > div.dropdown { 528 width: 70%; 529 } 530 531 input.submit { 532 padding: 7px; 533 border: 0px; 534 -moz-border-radius: 7px; /* Mozilla */ 535 -webkit-border-radius: 7px; /* Webkit */ 536 -khtml-border-radius: 7px; /* Konqui */ 537 border-radius: 7px; 538 margin-left: 20px; 539 cursor: pointer; 540 } 541 542 543 544 padding: 1em; 545 546 /* Style inputs, select elements and textareas */ 547 input[type=text], select, textarea { 548 width: 100%; 549 padding: 12px; 550 border: 1px solid #ccc; 551 border-radius: 4px; 552 box-sizing: border-box; 553 resize: vertical; 554 } 555 556 /* Style the label to display next to the inputs */ 557 label { 558 padding: 12px 12px 12px 0; 559 display: inline-block; 560 } 561 562 /* Style the submit button */ 563 input[type=submit] { 564 color: white; 565 padding: 12px 20px; 566 border: none; 567 border-radius: 4px; 568 cursor: pointer; 569 float: right; 570 } 571 572 /* Floating column for labels: 25% width */ 573 div.label { 574 float: left; 575 width: 25%; 576 margin-top: 6px; 577 } 578 579 /* Floating column for inputs: 75% width */ 580 div.input { 581 float: left; 582 width: 75%; 583 margin-top: 6px; 584 } 585 586 /* Clear floats after the columns */ 587 .line:after { 588 content: ""; 589 display: table; 590 clear: both; 591 } 592 593 .or-form-row { 594 display: flex; 595 align-items: center; 596 597 .or-form-label { 598 width:25%; 599 } 600 .or-form-input { 601 width: 75%; 602 } 603 } 604 605 //padding-bottom: 4em; 606 //position: relative; 607 608 .or-form-actionbar { 609 610 position: sticky; 611 bottom: 0; 612 left: 0; 613 right: 0; 614 615 display: flex; 616 justify-content: end; 617 padding: 1em; 618 height: auto; 619 620 621 .or-form-btn { 622 padding: 1em 2em; 623 margin-left: 1.5em; 624 min-width: 14em; 625 border: 0; 626 627 .border-radius(0.5em); 628 cursor: pointer; 629 630 &--primary { 631 font-weight: bold; /* Primäre Aktion in Fettdruck */ 632 } 633 634 } 635 } 636 637 638 639 640 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ 641 @media screen and (max-width: 65rem) { 642 643 div.label, div.input { 644 width: 100%; 645 margin-top: 0; 646 } 647 648 .or-form-row { 649 flex-direction: column; 650 .or-form-label, 651 .or-form-input { 652 width: 100%; 653 } 654 } 655 656 .or-form-actionbar { 657 658 align-items: center; 659 display: block; 660 661 .or-form-btn { 662 width:90%; 663 } 664 } 665 666 } 667 } 668 669 670 671 .or-link-btn { 672 padding: 0.5em 1.0em; 673 min-width: 5em; 674 border: 0; 675 676 .border-radius(0.3em); 677 cursor: pointer; 678 } 679 680 681 682 683 684 div.search > div.inputholder { 685 padding-top: 1px; 686 } 687 688 div.inputholder > input, 689 div.inputholder > textarea, 690 div.inputholder > select { 691 padding: 2px; 692 margin: 0px; 693 } 694 695 /* Eingabfeld fuer Namen */ 696 fieldset > div input.name, 697 fieldset > div span.name { 698 font-weight: bold; 699 } 700 701 /* Eingabfelder fuer Dateiname */ 702 fieldset > div input.filename, 703 fieldset > div input.extension, 704 fieldset > div input.ansidate, 705 fieldset > div span.filename, 706 fieldset > div span.extension, 707 fieldset > div span.ansidate { 708 font-family: 'Source Code Pro',Monospace, Monospaced, Courier; 709 } 710 711 dl.notice { 712 padding: 15px; 713 } 714 715 716 div.content pre, 717 div.dropdown { 718 min-width: 150px; 719 max-width: 450px; 720 } 721 722 img.image-icon { 723 visibility: hidden; 724 } 725 726 /* Make Codemirror Auto-Resizable */ 727 .CodeMirror { 728 height: auto; 729 } 730 731 .or-linklist { 732 display: flex; 733 flex-direction: column; 734 padding: 10% 20%; 735 736 > .or-linklist-line { 737 border:1px solid; 738 margin-top:1em; 739 padding:1em; 740 .border-radius(0.5em); 741 } 742 } 743 744 745 .or-info { 746 747 position: relative; 748 749 &:hover { 750 .or-info-popup { 751 display: block; 752 } 753 } 754 755 .or-info-popup { 756 display: none; 757 position: absolute; 758 top: 0px; 759 left: 0px; 760 overflow: visible; 761 //width: 100%; 762 border: 0.5em; 763 font-size: 2em; 764 .border-radius(0.3em); 765 padding: 1.0em; 766 //text-align: center; 767 z-index: 105; 768 769 > div { 770 display: inline-block; 771 } 772 } 773 }