Subversion Repositories oidplus

Rev

Rev 362 | 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.  ** 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.         #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.         cursor: pointer;
  338. }
  339.  
  340. /**
  341.  *      Splitter / uiLayout
  342.  */
  343. .ui-layout-pane { /* all 'panes' */
  344.         border: 1px solid #BBB;
  345. }
  346. .ui-layout-pane-center { /* content body */
  347.         padding: 0;
  348.         margin:  0;
  349. }
  350. .ui-layout-pane-west { /* west pane */
  351.         padding: 0 10px;
  352.         background-color: #f9f9f9 !important;
  353.         overflow: auto;
  354. }
  355. .ui-layout-resizer { /* all 'resizer-bars' */
  356.         background: #DDD;
  357.         top:55px !important; /* DM 13.03.2019 */
  358. }
  359. .ui-layout-resizer-open:hover { /* mouse-over */
  360.         background: #9D9;
  361. }
  362. .ui-layout-resizer-north {
  363.         background:#2b336f !important;
  364.         z-index:10 !important; /* DM 13.03.2019 */
  365. }
  366. .ui-layout-toggler { /* all 'toggler-buttons' */
  367.         background: #AAA;
  368.         }
  369. .ui-layout-toggler-closed { /* closed toggler-button */
  370.         background: #CCC;
  371.         border-bottom: 1px solid #BBB;
  372. }
  373. .ui-layout-toggler .content { /* toggler-text */
  374.         font-size: 14px;
  375.         font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
  376.         font-weight: bold;
  377. }
  378. .ui-layout-toggler:hover { /* mouse-over */
  379.         background: #DCA;
  380. }
  381. .ui-layout-toggler:hover .content { /* mouse-over */
  382.         color: #009;
  383. }
  384.  
  385. /* masks are usually transparent - make them visible (must 'override' default) */
  386. .ui-layout-mask {
  387.         background: #C00 !important;
  388.         opacity: .20 !important;
  389.         filter: alpha(opacity=20) !important;
  390. }
  391.  
  392. /* Language box */
  393.  
  394. @media only screen and (min-width: 801px) {
  395.         /* Desktop */
  396.  
  397.         #languageBox {
  398.                 position:absolute;
  399.                 right:420px;
  400.                 top:15px;
  401.         }
  402.  
  403. }
  404.  
  405. .lng_flag {
  406.         cursor: pointer;
  407.         border: 1px solid #000 !important;
  408. }
  409.  
  410. .picture_ghost {
  411.         opacity: 0.4;
  412. }
  413.  
  414. /* Goto box */
  415.  
  416. @media only screen and (max-width: 800px) {
  417.         /* Mobile */
  418.  
  419.         #gotobox {
  420.                 /*max-width:350px;*/
  421.                 width:75%;
  422.         }
  423.  
  424.         .mobilehidden {
  425.                 display:none !important;
  426.         }
  427.  
  428. }
  429.  
  430. @media only screen and (min-width: 801px) {
  431.         /* Desktop */
  432.  
  433.         #gotobox {
  434.                 position:absolute;
  435.                 right:10px;
  436.                 top:10px;
  437.                 width:30%;
  438.                 max-width:400px;
  439.         }
  440.  
  441. }
  442.  
  443. #gotobox {
  444.         display: none; /* will be set to 'block' by JavaScript */
  445.  
  446.         line-height:1.75em;
  447.  
  448.         height:55px !important;
  449.  
  450.         font-style:italic;
  451.         font-weight:bolder;
  452.         float:left;
  453.         border-bottom:1px;
  454.  
  455.         width:100%; /* required for NoScript */
  456.         padding-left:5px;/* required for NoScript */
  457.         padding-right:5px;/* required for NoScript */
  458.  
  459.         padding-left:0px;
  460.         margin-left:0px;
  461. }
  462.  
  463. #gotobox input[type="text"] {
  464.         width:calc(100% - 45px);
  465. }
  466.  
  467. #gotobox input[type="button"] {
  468.         width:40px;
  469. }
  470.  
  471. /* Logbook severities (shared between plugins ra099, ra200, admin600) */
  472.  
  473. .severity_0 {
  474.         /* Undefined */
  475. }
  476.  
  477. .severity_1 {
  478.         /* Success */
  479.         color: DarkGreen;
  480. }
  481.  
  482. .severity_2 {
  483.         /* Informational */
  484.         color: CornflowerBlue;
  485. }
  486.  
  487. .severity_3 {
  488.         /* Warning */
  489.         color: DarkGoldenRod;
  490. }
  491.  
  492. .severity_4 {
  493.         /* Error */
  494.         color: DarkRed;
  495. }
  496.  
  497. .severity_5 {
  498.         /* Critical */
  499.         color: DarkMagenta;
  500. }
  501.