openrat-cms

openrat-theme.less (9122B)

---

 /* OpenRat Theme */
 
 /*
  * The following variables beginning with '@cms-...' are overwritten by the CMS style configuration values
  */
 @cms-theme-id: 'theme-name'; /* technical name of theme */
 @cms-image-path: '/'; /* Image-path */
 @cms-name: name; /* Logic name of theme */
 @cms-title-background-color: white;
 @cms-title-text-color: black;
 @cms-text-color: black;
 @cms-background-color: silver;
 @cms-inactive-background-color: gray;
 
 html.theme-@{cms-theme-id} {
 
   .border-radius (@radius) {
     border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
     -khtml-border-radius: @radius;
   }
   .box-shadow (@x, @y, @radius, @color) {
     -webkit-box-shadow: @x @y @radius @color;
     -moz-box-shadow: @x @y @radius @color;
     box-shadow: @x @y @radius @color;
   }
 
   scrollbar-face-color: @cms-title-background-color;
   scrollbar-arrow-color: @cms-title-background-color;
   scrollbar-base-color: @cms-title-text-color;
 
   div#dialog {
     > .view {
       background-color: @cms-background-color;
       color: @cms-text-color;
       border-color: @cms-text-color ! important;
       .box-shadow(0px, 0px, 40px, @cms-text-color);
     }
 
     .filler {
       background-color: @cms-background-color;
 
       span.icon {
         color: @cms-background-color;
       }
 
     }
   }
 
   div#noticebar {
 
     @notice-ok-color: #00d95a;
     @notice-info-color: #86caff;
     @notice-warning-color: #FBDE2D;
     @notice-error-color: #f54b07;
 
     div.notice {
       color: black;
       line-height: 1.5em;
 
       &.ok {
         background-color: @notice-ok-color;
         border-color: darken(@notice-ok-color, 10%);
 
         &:after {
           border-left-color: darken(@notice-ok-color, 10%);
         }
 
         .box-shadow(3px, 3px, 10px, mix(@cms-background-color, @notice-ok-color, 20%));
       }
 
       &.warning {
         background-color: @notice-warning-color;
         border-color: darken(@notice-warning-color, 10%);
 
         &:after {
           border-left-color: darken(@notice-warning-color, 10%);
         }
 
         .box-shadow(3px, 3px, 10px, mix(@cms-background-color, @notice-warning-color, 20%));
       }
 
       &.info {
         background-color: @notice-info-color;
         border-color: darken(@notice-info-color, 10%);
 
         &:after {
           border-left-color: darken(@notice-info-color, 10%);
         }
 
         .box-shadow(3px, 3px, 10px, mix(@cms-background-color, @notice-info-color, 20%));
       }
 
       &.error {
         background-color: @notice-error-color;
         border-color: darken(@notice-error-color, 10%);
 
         &:after {
           border-left-color: darken(@notice-error-color, 10%);
         }
 
         .box-shadow(3px, 3px, 10px, mix(@cms-background-color, @notice-error-color, 20%));
 
       }
     }
     dl.notice {
       border-left: 10px @cms-inactive-background-color solid;
       border-right: 1px @cms-inactive-background-color solid;
 
       & > dt {
         border-top: 1px @cms-inactive-background-color solid;
       }
 
       & > dd {
         border-bottom: 1px @cms-inactive-background-color solid;
       }
     }
   }
 
   .preview {
     a:link, a:visited, a:active, a:hover {
     }
     color: blue;
   }
 
   small {
     color: @cms-title-background-color;
   }
 
   textarea.longtext {
     border: 1px solid @cms-text-color;
   }
 
   table.calendar td {
     border: 1px dotted;
   }
 
   div.structure em {
     font-style: italic;
   }
 
 
   table {
 
     tr.headline > td,
     tr.headline > th {
       border-bottom: 1px solid @cms-title-background-color;
     }
 
     tr > td {
       border-bottom: 1px solid @cms-title-background-color;
     }
 
     tr:nth-child(2n) {
       //background-color: @cms-inactive-background-color;
     }
 
     tr.data:hover {
       background-color: @cms-title-background-color;
       color: @cms-title-text-color;
     }
   }
 
   #navigation div.clickable:hover {
     background-color: @cms-inactive-background-color;
   }
 
   #workbench  {
 
     & > div {
       background-color: @cms-background-color;
       background-image: linear-gradient(to bottom, @cms-background-color 0%, lighten(@cms-background-color, 20%) 100%);
 
       main section {
         //.box-shadow(5px,5px,5px,@cms-text-color);
         border-color: @cms-text-color;
 
         &.open {
           background-color: lighten(@cms-background-color, 10%);
         }
       }
     }
 
   }
 
 
   input.submit,
   .or-form-btn,
   .or-link-btn {
     background-color: @cms-inactive-background-color;
     color: @cms-title-text-color;
     .box-shadow(0px, 0px, 15px, @cms-background-color);
 
     &--primary {
       background-color: @cms-title-background-color;
     }
   }
 
   #title {
 
     background-color: @cms-title-background-color;
     background-image: linear-gradient(to bottom, lighten(@cms-title-background-color, 10%), @cms-title-background-color 80%, @cms-background-color);
     color: @cms-title-text-color;
 
     div.toolbar-icon > a {
       color: @cms-title-text-color;
     }
 
     .search {
       .inputholder {
         background-color: transparent;
         .box-shadow(0, 0, 0, transparent);
 
         input {
           background-color: transparent;
           color: @cms-title-text-color;
 
           &::placeholder {
             opacity: 1;
             color: @cms-title-text-color;
           }
 
           &:focus {
             &::placeholder {
               color: fadeout(@cms-title-text-color, 50%);
             }
           }
         }
       }
     }
 
     div.dropdown {
       .border-radius(5px);
       .box-shadow(3px, 2px, 10px, @cms-title-background-color);
       opacity: 0.95;
       border: 2px solid @cms-title-background-color;
 
       background-color: @cms-title-text-color;
       color: @cms-title-background-color;
 
 
       > div.entry,
       > div.entry > a {
         background-color: @cms-title-text-color;
         color: @cms-title-background-color;
       }
 
       > div.entry.inactive,
       > div.entry.inactive > a {
         color: mix(@cms-title-background-color, @cms-title-text-color, 40%);
       }
 
       > div.entry.active:hover,
       > div.entry.active:hover > a {
         background-color: @cms-title-background-color;
         color: @cms-title-text-color;
       }
 
       > div.divide {
         background-color: @cms-title-background-color;
       }
 
     }
   }
 
   div.toolbar-icon {
     border: 1px solid @cms-title-background-color;
     .border-radius(3px);
 
     &.inactive {
       opacity: 0.5;
     }
 
     &:hover {
       border: 1px solid @cms-title-text-color;
     }
   }
 
   label div.description {
     color: @cms-title-background-color;
   }
 
   form {
     div.inputholder, textarea {
       background-color: @cms-title-background-color;
       color: @cms-title-text-color;
       border: 1px solid mix(@cms-title-text-color, @cms-title-background-color);
       .box-shadow(0px, 0px, 3px, @cms-title-text-color);
     }
   }
 
   .or-table-filter {
     input {
       background-color: inherit;
       color: inherit;
       border-color: mix(@cms-text-color, @cms-background-color);
     }
   }
 
   input[type='checkbox'],
   input[type='radio'] {
     background-color: @cms-title-background-color;
     .border-radius(3px);
   }
 
   div.inputholder > input, div.inputholder > textarea, div.inputholder > select {
     border: 0px;
     border-bottom: 1px solid @cms-text-color;
   }
 
   input:focus, textarea:focus, select:focus {
     border: 0px;
     border-bottom: 1px solid @cms-inactive-background-color;
   }
 
   input.error, textarea.error, select.error {
     border-bottom: 1px dotted @cms-text-color ! important;
   }
 
   div.inputholder.error {
     border: 1px solid red ! important;
   }
 
   input.hint {
     color: @cms-title-background-color;
   }
 
   fieldset {
     border-color: mix(@cms-text-color, @cms-background-color);
 
     > div input.name, > div span.name {
       font-weight: bold;
     }
 
   }
 
   table {
 
     tr.diff {
 
       & > td.equal {
       }
 
       & > td.old {
         background-color: red;
       }
 
       & > td.new {
         background-color: green;
       }
 
       & > td.notequal {
         background-color: yellow;
       }
     }
   }
 
   div.content a.action, div.content a.help {
     .box-shadow(3px, 2px, 5px, @cms-title-background-color);
   }
 
   .or-main-area {
     background-color: @cms-inactive-background-color;
     background-image: linear-gradient(@cms-inactive-background-color, lighten(@cms-inactive-background-color, 10%));
   }
 
   body, a {
     color: @cms-text-color;
   }
 
 
 
   div.or-dropzone-upload > div.input {
     background-color: @cms-title-text-color;
     border: 1px dotted @cms-text-color;
   }
 
   div.clickable.filtered > a {
     color: @cms-inactive-background-color;
   }
 
   div.clickable.filtered.active > a {
     color: @cms-background-color;
   }
 
   .or-round-corners {
     .border-radius(1em);
   }
 
   .or-hover-effect:hover {
     background-color: darken(@cms-background-color, 10%);;
   }
 
   .or-info-popup {
     background-color: @cms-title-background-color;
     color: @cms-title-text-color;
   }
 
   .or-navigation {
     background-color: inherit;
     background-image: inherit;
     border-right-color: @cms-text-color;
     .box-shadow(10px, 0px, 25px, @cms-background-color);
   }
 }
 /* Theme Ende */