Subversion Repositories oidplus

Rev

Rev 356 | Go to most recent revision | View as "text/css" | Blame | Last modification | View Log | RSS feed

  1. /*
  2.  * OIDplus 2.0
  3.  * Copyright 2019 Daniel Marschall, ViaThinkSoft
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  17.  
  18.  
  19. /*************************************************************************************
  20.  ** ATTENTION:                                                                      **
  21.  *************************************************************************************
  22.  ** Please do NOT edit this file, since a software update might override            **
  23.  ** your changes.                                                                   **
  24.  ** To create an individual theme, please clone this file to oidplus_base.local.css **
  25.  ** When the file oidplus_base.local.css is present, OIDplus will use               **
  26.  ** this file instead of oidplus_base.css                                           **
  27.  ** Note:                                                                           **
  28.  ** - If you just want to change colors, then the color plugin in the admin area    **
  29.  **   could an option for you.                                                      **
  30.  ** - Please regularly check if oidplus_base.css gets changed or extended           **
  31.  **   during software updates, and apply the changes to your oidplus_base.local.css **
  32.  *************************************************************************************/
  33.  
  34. @media print {
  35.         /* Printing */
  36.         .ui-layout-west, .ui-layout-resizer {
  37.                 display:none !important;
  38.         }
  39.         .ui-layout-center {
  40.                 left:0px !important;
  41.                 width:100% !important;
  42.         }
  43.         #oidtree, .ui-layout-center {
  44.                 position:relative !important;
  45.                 width:100% !important;
  46.                 top: 0 !important;
  47.         }
  48.         #content_window {
  49.                 top: 0 !important;
  50.         }
  51. }
  52.  
  53. @media only screen and (max-width: 800px) {
  54.         /* Mobile */
  55.         .ui-layout-west, .ui-layout-resizer {
  56.                 display:none !important;
  57.         }
  58.         .ui-layout-center {
  59.                 left:0px !important;
  60.                 width:100% !important;
  61.         }
  62.         #oidtree, .ui-layout-center {
  63.                 position:relative !important;
  64.                 width:100% !important;
  65.                 padding-right:10px !important;
  66.                 top: 0 !important;
  67.         }
  68.         #content_window {
  69.                 top: 0 !important;
  70.         }
  71.         #frames {
  72.                 display:flex;
  73.                 flex-direction:column;
  74.                 align-items: flex-start;
  75.         }
  76.         #system_title_bar {
  77.                 order:0;
  78.                 flex:none;
  79.         }
  80.         #oidtree {
  81.                 order:1;
  82.                 flex:none;
  83.         }
  84.         #content_window {
  85.                 order:2;
  86.                 flex:none;
  87.         }
  88.         #system_title_text {
  89.                 overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
  90.         }
  91. }
  92.  
  93. @media only screen and (min-width: 801px) {
  94.         /* Desktop */
  95.         #system_title_menu {
  96.                 display:none !important;
  97.         }
  98. }
  99.  
  100. #system_title_bar {
  101.         width:100% !important;
  102.         position:relative !important;
  103.         white-space: nowrap;
  104. }
  105.  
  106. body, #frames {
  107.         width:100%;
  108.         height:100%;
  109. }
  110.  
  111. .wrap {
  112.         overflow-x: auto;
  113.         margin: 0 auto;
  114.         width:100%;
  115. }
  116.  
  117. .gray_footer_font {
  118.         color:#808080;
  119.         font-size:0.9em;
  120. }
  121.  
  122. label.padding_label {
  123.         font-weight: normal !important;
  124.         display: inline-block;
  125.         clear: left;
  126.         width: 100px;
  127.         text-align: right;
  128.         padding-top: 3px;
  129.         margin-right: 8px;
  130. }
  131.  
  132. .box {
  133.         width:auto !important;
  134.         padding:20px;
  135.         background-color:#fff;
  136.         border:1px solid #ccc;
  137.         border-radius:5px;
  138.         margin-top:10px;
  139. }
  140. #titleedit {
  141.         width:100%;
  142. }
  143. #system_title_1 {
  144.         color:#2D6A9F;
  145.         margin-left:5px;
  146. }
  147. #system_title_2 {
  148.         color:#2B336F;
  149.         font-size:2em;
  150.         margin-left:5px;
  151. }
  152.  
  153. /* Mobile menu button */
  154.  
  155. #bar1, #bar2, #bar3 {
  156.         width: 27px;
  157.         height: 5px;
  158.         background-color: #FFA500;
  159.         margin: 6px 0;
  160.         transition: 0.4s;
  161.         margin-left:14px;
  162. }
  163.  
  164. #system_title_menu.active {
  165.         background-color: #FFA500;
  166. }
  167.  
  168. .active #bar1 {
  169.         -webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
  170.         transform: rotate(-45deg) translate(-7.5px, 7.5px);
  171.         background-color: #000;
  172. }
  173.  
  174. .active #bar2 {
  175.         opacity: 0;
  176.         background-color: #000;
  177. }
  178.  
  179. .active #bar3 {
  180.         -webkit-transform: rotate(45deg) translate(-8px, -8px);
  181.         transform: rotate(45deg) translate(-8px, -8px);
  182.         background-color: #000;
  183. }
  184.  
  185. .hover #bar1, .hover #bar2, .hover #bar3 {
  186.         background-color:#fff;
  187. }
  188.  
  189. #system_title_menu {
  190.         width:55px;
  191.         height:55px;
  192.         padding-top:8px;
  193.         text-decoration: none;
  194.         font-size: 19px;
  195.         display: none; /* will be set to 'block' by JavaScript */
  196.         background-color: #000;
  197.         float:left;
  198.         cursor: pointer;
  199. }
  200.  
  201. /* Title bar */
  202.  
  203. #system_title_bar {
  204.         line-height:1.75em;
  205.  
  206.         height:55px !important;
  207.  
  208.         font-style:italic;
  209.         font-weight:bolder;
  210.         float:left;
  211.         border-bottom:1px;
  212.  
  213.         width:100%; /* required for NoScript */
  214.         padding-left:5px;/* required for NoScript */
  215.         padding-right:5px;/* required for NoScript */
  216.  
  217.         padding-left:0px;
  218.         margin-left:0px;
  219.  
  220.         display:block;
  221.  
  222.         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
  223.         background: #a0d8ef; /* Old browsers */
  224.         background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */
  225.         background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
  226.         background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  227.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */
  228.  
  229.         overflow:hidden;
  230. }
  231. #system_title_bar a {
  232.         text-decoration:none;
  233. }
  234.  
  235. /* OID-Tree */
  236.  
  237. @media only screen and (max-width: 800px) {
  238.         /* Mobile */
  239.  
  240.         #content_window {
  241.                 padding-left:16px;
  242.                 padding-top:0px;
  243.         }
  244.  
  245. }
  246. @media only screen and (min-width: 801px) {
  247.         /* Desktop */
  248.  
  249.         #oidtree {
  250.                 position:absolute;
  251.                 left:0px;
  252.                 bottom:0px;
  253.                 top:55px; /* required for NoScript */
  254.                 width:400px; /* required for NoScript */
  255.                 padding-top:5px;
  256.                 white-space:nowrap; /* required for NoScript */
  257.                 overflow:scroll; /* required for NoScript */
  258.         }
  259.        
  260.         #content_window {
  261.                 position:absolute;
  262.                 left:400px;
  263.                 right:0px;
  264.                 bottom:0px;
  265.                 top:55px; /* required for NoScript */
  266.                 padding-left:20px;
  267.                 padding-right:20px;
  268.         }
  269. }
  270.  
  271. #oidtree {
  272.         padding-top:5px !important;
  273.         padding-left:5px;/* required for NoScript */
  274.         padding-right:5px;/* required for NoScript */
  275. }
  276.  
  277. html {
  278.         margin:0;
  279.         padding:0;
  280.         height:100%;
  281.         font-family:Helvetica;
  282. }
  283. body {
  284.         margin:0px;
  285.         padding:0px;
  286.         font-size:0.85em;
  287.         height:100%;
  288.         /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
  289.         font-family:Arial,sans-serif !important;
  290. }
  291.  
  292. @media only screen and (min-width: 801px) {
  293.         /* Desktop */
  294.         body {
  295.                 overflow:hidden;
  296.         }
  297.         .borderbox {
  298.                 border:1px solid silver;
  299.         }
  300. }
  301.  
  302. .borderbox {
  303.         overflow:auto;
  304. }
  305.  
  306. h1 {
  307.         font-size:1.8em;
  308. }
  309. h2 {
  310.         font-size:1.6em !important;
  311. }
  312.  
  313. textarea,input[type="text"],input[type="password"],select {
  314.         /* for dark themes, this looks better */
  315.         /*background:transparent;*/
  316.         background:rgba(255,255,255,0.4);
  317.         border: #AAAAAA 1px solid;
  318. }
  319.  
  320. input[type=button], input[type=submit], input[type=reset],
  321. input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
  322. input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
  323. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  324.         border: 1px solid #a2a2a2;
  325.         padding-top:2px;
  326.         padding-bottom:2px;
  327.         padding-left:7px;
  328.         padding-right:7px;
  329.         text-decoration:none;
  330.         background: #ffffff;
  331.         color: #0066CC;
  332. }
  333. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  334.         background: #f4f4ff;
  335. }
  336. .hand, input[type=button], input[type=submit], input[type=reset] {
  337.         /* www.drweb.de/magazin/browser-cursor-hand */
  338.         cursor: hand; cursor: pointer;
  339. }
  340.  
  341. /**
  342.  *      Splitter / uiLayout
  343.  */
  344. .ui-layout-pane { /* all 'panes' */
  345.         border: 1px solid #BBB;
  346. }
  347. .ui-layout-pane-center { /* content body */
  348.         padding: 0;
  349.         margin:  0;
  350. }
  351. .ui-layout-pane-west { /* west pane */
  352.         padding: 0 10px;
  353.         background-color: #f9f9f9 !important;
  354.         overflow: auto;
  355. }
  356. .ui-layout-resizer { /* all 'resizer-bars' */
  357.         background: #DDD;
  358.         top:55px !important; /* DM 13.03.2019 */
  359. }
  360. .ui-layout-resizer-open:hover { /* mouse-over */
  361.         background: #9D9;
  362. }
  363. .ui-layout-resizer-north {
  364.         background:#2b336f !important;
  365.         z-index:10 !important; /* DM 13.03.2019 */
  366. }
  367. .ui-layout-toggler { /* all 'toggler-buttons' */
  368.         background: #AAA;
  369.         }
  370. .ui-layout-toggler-closed { /* closed toggler-button */
  371.         background: #CCC;
  372.         border-bottom: 1px solid #BBB;
  373. }
  374. .ui-layout-toggler .content { /* toggler-text */
  375.         font: 14px bold Verdana, Verdana, Arial, Helvetica, sans-serif;
  376. }
  377. .ui-layout-toggler:hover { /* mouse-over */
  378.         background: #DCA;
  379. }
  380. .ui-layout-toggler:hover .content { /* mouse-over */
  381.         color: #009;
  382. }
  383.  
  384. /* masks are usually transparent - make them visible (must 'override' default) */
  385. .ui-layout-mask {
  386.         background: #C00 !important;
  387.         opacity: .20 !important;
  388.         filter: alpha(opacity=20) !important;
  389. }
  390.  
  391. /* Language box */
  392.  
  393. @media only screen and (min-width: 801px) {
  394.         /* Desktop */
  395.  
  396.         #languageBox {
  397.                 position:absolute;
  398.                 right:420px;
  399.                 top:15px;
  400.         }
  401.  
  402. }
  403.  
  404. .lng_flag {
  405.         cursor: pointer;
  406.         border: 1px solid #000 !important;
  407. }
  408.  
  409. .picture_ghost {
  410.         opacity: 0.5;
  411. }
  412.  
  413. /* Goto box */
  414.  
  415. @media only screen and (max-width: 800px) {
  416.         /* Mobile */
  417.  
  418.         #gotobox {
  419.                 /*max-width:350px;*/
  420.                 width:75%;
  421.         }
  422.  
  423.         .mobilehidden {
  424.                 display:none !important;
  425.         }
  426.  
  427. }
  428.  
  429. @media only screen and (min-width: 801px) {
  430.         /* Desktop */
  431.  
  432.         #gotobox {
  433.                 position:absolute;
  434.                 right:10px;
  435.                 top:10px;
  436.                 width:30%;
  437.                 max-width:400px;
  438.         }
  439.  
  440. }
  441.  
  442. #gotobox {
  443.         display: none; /* will be set to 'block' by JavaScript */
  444.  
  445.         line-height:1.75em;
  446.  
  447.         height:55px !important;
  448.  
  449.         font-style:italic;
  450.         font-weight:bolder;
  451.         float:left;
  452.         border-bottom:1px;
  453.  
  454.         width:100%; /* required for NoScript */
  455.         padding-left:5px;/* required for NoScript */
  456.         padding-right:5px;/* required for NoScript */
  457.  
  458.         padding-left:0px;
  459.         margin-left:0px;
  460. }
  461.  
  462. #gotobox input[type="text"] {
  463.         width:calc(100% - 45px);
  464. }
  465.  
  466. #gotobox input[type="button"] {
  467.         width:40px;
  468. }
  469.  
  470. /* Logbook severities (shared between plugins ra099, ra200, admin600)
  471.  
  472. .severity_0 {
  473.         /* Undefined */
  474. }
  475.  
  476. .severity_1 {
  477.         /* Success */
  478.         color: DarkGreen;
  479. }
  480.  
  481. .severity_2 {
  482.         /* Informational */
  483.         color: CornflowerBlue;
  484. }
  485.  
  486. .severity_3 {
  487.         /* Warning */
  488.         color: DarkGoldenRod;
  489. }
  490.  
  491. .severity_4 {
  492.         /* Error */
  493.         color: DarkRed;
  494. }
  495.  
  496. .severity_5 {
  497.         /* Critical */
  498.         color: DarkMagenta;
  499. }
  500.