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

Last commit: Thu Dec 26 19:53:54 2024 +0100	Jan Dankert	The ThemeStyle is now able to mix colors and all colors are now internally hold as RGB; New Group background colors in the UI.


     1 /* OpenRat Theme */
     2 /*
     3  * The following CSS variables beginning with '--cms-...' are overwritten by the CMS style configuration values
     4  */
     5 :root {
     6   --cms-main-title-background-color: white;
     7   --cms-main-title-text-color: black;
     8   --cms-main-text-color: black;
     9   --cms-main-background-color: silver;
    10   --cms-main-group-background-color: silver;
    11   --cms-inactive-background-color: gray;
    12   --cms-nav-title-text-color: gray;
    13   --cms-nav-title-background-color: gray;
    14   --cms-nav-text-color: gray;
    15   --cms-nav-background-color: gray;
    16   --cms-nav-group-background-color: gray;
    17   --cms-dialog-title-text-color: gray;
    18   --cms-dialog-title-background-color: gray;
    19   --cms-dialog-text-color: gray;
    20   --cms-dialog-background-color: gray;
    21   --cms-dialog-group-background-color: gray;
    22   --cms-image-color: gray;
    23   --cms-notice-ok-color: green;
    24   --cms-notice-info-color: blue;
    25   --cms-notice-warning-color: yellow;
    26   --cms-notice-error-color: red;
    27   --cms-fill-color: black;
    28   --cms-transition-duration: 0.1s;
    29   --cms-nav-scrollbar-color: gray;
    30   --cms-main-scrollbar-color: gray;
    31   --cms-theme-id: 'theme-name';
    32   /* technical name of theme */
    33   --cms-image-path: '/';
    34   /* Image-path */
    35   --cms-name: name;
    36   /* Logic name of theme */
    37 }
    38 html * {
    39   transition: opacity var(--cms-transition-duration) ease-in-out, width var(--cms-transition-duration) ease-in-out, height var(--cms-transition-duration) ease-in-out, flex var(--cms-transition-duration) ease-in-out, transform var(--cms-transition-duration) ease-in-out;
    40 }
    41 @media screen and (prefers-reduced-motion: reduce) {
    42   html * {
    43     transition: none;
    44   }
    45 }
    46 html .or {
    47   /*
    48       &-search {
    49         &-input {
    50 
    51           border-color: var(--cms-nav-title-background-color);
    52 
    53           .or-input {
    54             background-color: var(--cms-nav-title-background-color);
    55             color: var(--cms-nav-title-text-color);
    56           }
    57         }
    58 
    59         &-result {
    60           //background-color: var(--cms-nav-background-color);
    61         }
    62       }*/
    63 }
    64 html .or-qrcode-value {
    65   background-color: var(--cms-dialog-background-color);
    66   fill: var(--cms-image-color);
    67   box-shadow: 3px 3px 10px var(--cms-dialog-title-background-color);
    68 }
    69 html .or-loader {
    70   border-color: var(--cms-inactive-background-color);
    71   border-top-color: var(--cms-image-color);
    72 }
    73 html .or-workbench-navigation {
    74   scrollbar-face-color: var(--cms-nav-scrollbar-color);
    75   scrollbar-arrow-color: var(--cms-image-color);
    76   scrollbar-base-color: var(--cms-nav-background-color);
    77   scrollbar-color: var(--cms-nav-scrollbar-color) var(--cms-nav-background-color);
    78   scrollbar-width: thin;
    79 }
    80 html .or-workbench-main {
    81   scrollbar-face-color: var(--cms-main-scrollbar-color);
    82   scrollbar-arrow-color: var(--cms-image-color);
    83   scrollbar-base-color: var(--cms-main-text-color);
    84   scrollbar-color: var(--cms-main-scrollbar-color) var(--cms-main-background-color);
    85   scrollbar-width: thin;
    86 }
    87 html .or-workbench {
    88   visibility: visible;
    89 }
    90 html .or-workbench-navigation {
    91   box-shadow: 1em 0 2em var(--cms-nav-background-color);
    92 }
    93 html .or-dialog-content {
    94   box-shadow: -1em 0 2em var(--cms-dialog-background-color);
    95 }
    96 html .or-image-icon {
    97   color: var(--cms-image-color);
    98 }
    99 html .or-view-header {
   100   color: var(--cms-main-title-background-color);
   101 }
   102 html .or-notice {
   103   border-color: var(--cms-main-title-text-color);
   104   color: var(--cms-main-title-text-color);
   105   background-color: var(--cms-main-title-background-color);
   106   line-height: 1.5em;
   107   box-shadow: 3px 3px 10px var(--cms-main-title-text-color);
   108 }
   109 html .or-notice--ok {
   110   border-left-color: var(--cms-notice-ok-color);
   111 }
   112 html .or-notice--warning {
   113   border-left-color: var(--cms-notice-warning-color);
   114 }
   115 html .or-notice--info {
   116   border-left-color: var(--cms-notice-info-color);
   117 }
   118 html .or-notice--error {
   119   border-left-color: var(--cms-notice-error-color);
   120 }
   121 html .or-preview {
   122   color: var(--cms-main-background-color);
   123 }
   124 html .or-table tr.headline > td,
   125 html .or-table tr.headline > th {
   126   border-bottom: 1px solid var(--cms-image-color);
   127 }
   128 html .or-table tr > td {
   129   border-bottom: 1px solid var(--cms-image-color);
   130 }
   131 html .or-table tr.or-data:hover,
   132 html .or-table tr.or-table-data:hover {
   133   mix-blend-mode: difference;
   134 }
   135 html .or-workbench {
   136   /*            &-navigation-container {
   137                 //background-color: var(--cms-main-title-background-color);
   138                 //color: var(--cms-main-title-text-color);
   139                 background-color: var(--cms-main-background-color);
   140                 .box-shadow(10px, 0px, 25px, var(--cms-main-background-color));
   141                 background-image: linear-gradient(to right, lighten(var(--cms-main-background-color), 10%), var(--cms-main-background-color));
   142             }*/
   143 }
   144 html .or-workbench-main .or-workbench-title {
   145   color: var(--cms-main-title-text-color);
   146   background-color: var(--cms-main-title-background-color);
   147 }
   148 html .or-workbench-main .or-workbench-content {
   149   color: var(--cms-main-text-color);
   150   background-color: var(--cms-main-background-color);
   151 }
   152 html .or-workbench-main .or-workbench-content .or-group-value {
   153   background-color: var(--cms-main-group-background-color);
   154 }
   155 html .or-workbench-main .or-dialog .or-workbench-title {
   156   color: var(--cms-main-title-text-color);
   157   background-color: var(--cms-main-title-background-color);
   158 }
   159 html .or-workbench-main .or-dialog .or-workbench-content {
   160   color: var(--cms-main-text-color);
   161   background-color: var(--cms-main-background-color);
   162 }
   163 html .or-workbench-main .or-dialog .or-workbench-content .or-form-actionbar {
   164   background-color: var(--cms-main-background-color);
   165   box-shadow: 0 -2em 2em var(--cms-main-background-color);
   166 }
   167 html .or-workbench-main .or-dialog .or-workbench-content .or-input {
   168   background-color: var(--cms-main-title-background-color);
   169   color: var(--cms-main-title-text-color);
   170   border-color: var(--cms-main-text-color);
   171 }
   172 html .or-workbench-main .or-dialog .or-workbench-content .or-input:focus {
   173   border-color: var(--cms-image-color);
   174 }
   175 html .or-workbench-main .or-dialog .or-workbench-content .or-input--error {
   176   border-color: var(--cms-notice-error-color) !important;
   177 }
   178 html .or-workbench-main .or-dialog .or-workbench-content .or-input.or-hint {
   179   color: var(--cms-main-title-background-color);
   180 }
   181 html .or-workbench-main-filler {
   182   background-color: var(--cms-fill-color);
   183 }
   184 html .or-workbench-title .or-toolbar-icon > a {
   185   color: var(--cms-main-title-text-color);
   186 }
   187 html .or-workbench-title .or-search-input {
   188   border-color: var(--cms-image-color);
   189 }
   190 html .or-workbench-workplace {
   191   color: var(--cms-main-text-color);
   192   background-color: var(--cms-main-background-color);
   193 }
   194 html .or-workbench-title {
   195   border-color: var(--cms-main-title-background-color);
   196   /*
   197             .or-input {
   198               background-color: var(--cms-main-title-background-color);
   199               color: var(--cms-main-title-text-color);
   200             }*/
   201 }
   202 html .or-workbench-navigation .or-workbench-title {
   203   color: var(--cms-nav-title-text-color);
   204   background-color: var(--cms-nav-title-background-color);
   205 }
   206 html .or-workbench-navigation .or-workbench-content {
   207   color: var(--cms-nav-text-color);
   208   background-color: var(--cms-nav-background-color);
   209 }
   210 html .or-workbench-navigation .or-workbench-content .or-group-value {
   211   background-color: var(--cms-nav-group-background-color);
   212 }
   213 html .or-workbench-navigation .or-dialog .or-workbench-title {
   214   color: var(--cms-nav-title-text-color);
   215   background-color: var(--cms-nav-title-background-color);
   216 }
   217 html .or-workbench-navigation .or-dialog .or-workbench-content {
   218   color: var(--cms-nav-text-color);
   219   background-color: var(--cms-nav-background-color);
   220 }
   221 html .or-workbench-navigation .or-dialog .or-workbench-content .or-group-value {
   222   background-color: var(--cms-nav-group-background-color);
   223 }
   224 html .or-workbench-navigation .or-dialog .or-workbench-content .or-form-actionbar {
   225   background-color: var(--cms-nav-background-color);
   226   box-shadow: 0 -2em 2em var(--cms-nav-background-color);
   227 }
   228 html .or-workbench-navigation-filler {
   229   background-color: var(--cms-fill-color);
   230 }
   231 html .or-workbench-section {
   232   border-color: var(--cms-main-text-color);
   233 }
   234 html .or-workbench-section.or-open {
   235   background-color: var(--cms-main-background-color);
   236 }
   237 html .or-workbench-navigation,
   238 html .or-workbench-navigation .or-link {
   239   color: var(--cms-nav-text-color);
   240 }
   241 html .or-dialog-filler {
   242   background-color: var(--cms-fill-color);
   243 }
   244 html .or-group-description {
   245   color: var(--cms-main-scrollbar-color);
   246   font-size: 0.9em;
   247 }
   248 html .or-act-clickable {
   249   /*
   250             &.or-filtered > a {
   251                 color: var(--cms-text-color);
   252 
   253                 &.or-dropdown-entry--active:hover {
   254                     color: var(--cms-background-color);
   255                 }
   256             }
   257 
   258             &.or-filtered.or-dropdown-entry--active > a {
   259                 color: var(--cms-text-color);
   260 
   261                 &:hover {
   262                     color: var(--cms-background-color);
   263                 }
   264             }*/
   265 }
   266 html .or-dropdown {
   267   box-shadow: 3px 2px 5px var(--cms-nav-background-color);
   268   border: 1px solid var(--cms-nav-scrollbar-color);
   269   background-color: var(--cms-nav-background-color);
   270   color: var(--cms-nav-text-color);
   271 }
   272 html .or-dropdown .or-link {
   273   color: inherit;
   274 }
   275 html .or-dropdown-entry {
   276   background-color: var(--cms-nav-background-color);
   277   color: var(--cms-nav-text-color);
   278 }
   279 html .or-dropdown-entry--inactive {
   280   color: var(--cms-nav-scrollbar-color);
   281 }
   282 html .or-dropdown-entry--active:hover {
   283   background-color: var(--cms-nav-text-color);
   284   color: var(--cms-nav-background-color);
   285 }
   286 html .or-dropdown-divide {
   287   background-color: var(--cms-nav-background-color);
   288 }
   289 html .or-dropzone-upload {
   290   background-color: var(--cms-main-title-text-color);
   291   border: 1px dotted var(--cms-main-text-color);
   292 }
   293 html .or-hover-effect:hover {
   294   background-color: var(--cms-main-background-color);
   295 }
   296 html .or-info-popup {
   297   background-color: var(--cms-main-title-background-color);
   298   color: var(--cms-main-title-text-color);
   299 }
   300 html .or-collapsible-title {
   301   border-color: var(--cms-main-background-color);
   302 }
   303 html .or-collapsible--is-open .or-collapsible-title {
   304   border-color: var(--cms-main-scrollbar-color);
   305 }
   306 html .or-btn,
   307 html .or-link-btn {
   308   border-color: var(--cms-main-background-color);
   309   color: var(--cms-main-title-text-color);
   310   box-shadow: 0 0 0.5em var(--cms-main-background-color);
   311 }
   312 html .or-btn--is-active,
   313 html .or-link-btn--is-active {
   314   background-color: var(--cms-inactive-background-color);
   315   border-color: var(--cms-main-background-color);
   316 }
   317 html .or-btn:hover,
   318 html .or-link-btn:hover {
   319   border-color: var(--cms-main-title-text-color);
   320 }
   321 html .or-btn--primary,
   322 html .or-link-btn--primary {
   323   background-color: var(--cms-main-title-background-color);
   324 }
   325 html .or-form-checkbox,
   326 html .or-form-radio {
   327   border-color: var(--cms-main-text-color);
   328 }
   329 html .or-form-checkbox:checked,
   330 html .or-form-radio:checked {
   331   background-color: var(--cms-image-color);
   332 }
   333 html .or-form-content {
   334   padding-bottom: 5em;
   335 }
   336 html .or-fieldset-label {
   337   color: var(--cms-main-scrollbar-color);
   338 }
   339 html small {
   340   color: var(--cms-main-title-background-color);
   341 }
   342 html textarea.longtext {
   343   border-color: var(--cms-main-text-color);
   344 }
   345 html body {
   346   color: var(--cms-main-text-color);
   347 }
   348 html a {
   349   color: inherit;
   350 }
   351 html body {
   352   background-color: var(--cms-main-background-color);
   353 }
   354 /* Theme Ende */
   355 



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


History
Thu, 26 Dec 2024 19:53:54 +0100	Jan Dankert	The ThemeStyle is now able to mix colors and all colors are now internally hold as RGB; New Group background colors in the UI.
Fri, 6 Dec 2024 23:29:56 +0100	Jan Dankert	UI: Cleaner profile dialog in navigation menu.
Wed, 30 Oct 2024 22:17:22 +0100	Jan Dankert	UI-Refactoring: The navigation is now able to open its own dialog.
Sun, 13 Oct 2024 15:00:13 +0200	Jan Dankert	Refactoring CSS: Using native CSS variables for theme colors.