Subversion Repositories oidplus

Rev

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