Subversion Repositories oidplus

Rev

Rev 419 | 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.         }
  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.         height:100%;
  291.         /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
  292.         font-family:"Arial","sans-serif" !important;
  293. }
  294.  
  295. @media only screen and (min-width: 801px) {
  296.         /* Desktop */
  297.         body {
  298.                 overflow:hidden;
  299.         }
  300.         .borderbox {
  301.                 border:1px solid silver;
  302.         }
  303. }
  304.  
  305. .borderbox {
  306.         overflow:auto;
  307. }
  308.  
  309. h1 {
  310.         font-size:2.2em;
  311. }
  312. h2 {
  313.         font-size:1.6em !important;
  314. }
  315. h3 {
  316.         font-size:1.5em !important;
  317. }
  318.  
  319. textarea,input[type="text"],input[type="password"],select {
  320.         /* for dark themes, this looks better */
  321.         /*background:transparent;*/
  322.         background:rgba(255,255,255,0.4);
  323.         border: #AAAAAA 1px solid;
  324. }
  325.  
  326. input[type=button], input[type=submit], input[type=reset],
  327. input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
  328. input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
  329. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  330.         border: 1px solid #a2a2a2;
  331.         padding-top:2px;
  332.         padding-bottom:2px;
  333.         padding-left:7px;
  334.         padding-right:7px;
  335.         text-decoration:none;
  336.         background: #ffffff;
  337.         color: #0066CC;
  338. }
  339. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  340.         background: #f4f4ff;
  341. }
  342. .hand, input[type=button], input[type=submit], input[type=reset] {
  343.         cursor: pointer;
  344. }
  345.  
  346. /**
  347.  *      Splitter / uiLayout
  348.  */
  349. .ui-layout-pane { /* all 'panes' */
  350.         border: 1px solid #BBB;
  351. }
  352. .ui-layout-pane-center { /* content body */
  353.         padding: 0;
  354.         margin:  0;
  355. }
  356. .ui-layout-pane-west { /* west pane */
  357.         padding: 0 10px;
  358.         background-color: #f9f9f9 !important;
  359.         overflow: auto;
  360. }
  361. .ui-layout-resizer { /* all 'resizer-bars' */
  362.         background: #DDD;
  363.         top:55px !important; /* DM 13.03.2019 */
  364. }
  365. .ui-layout-resizer-open:hover { /* mouse-over */
  366.         background: #9D9;
  367. }
  368. .ui-layout-resizer-north {
  369.         background:#2b336f !important;
  370.         z-index:10 !important; /* DM 13.03.2019 */
  371. }
  372. .ui-layout-toggler { /* all 'toggler-buttons' */
  373.         background: #AAA;
  374.         }
  375. .ui-layout-toggler-closed { /* closed toggler-button */
  376.         background: #CCC;
  377.         border-bottom: 1px solid #BBB;
  378. }
  379. .ui-layout-toggler .content { /* toggler-text */
  380.         font-size: 14px;
  381.         font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
  382.         font-weight: bold;
  383. }
  384. .ui-layout-toggler:hover { /* mouse-over */
  385.         background: #DCA;
  386. }
  387. .ui-layout-toggler:hover .content { /* mouse-over */
  388.         color: #009;
  389. }
  390.  
  391. /* masks are usually transparent - make them visible (must 'override' default) */
  392. .ui-layout-mask {
  393.         background: #C00 !important;
  394.         opacity: .20 !important;
  395.         filter: alpha(opacity=20) !important;
  396. }
  397.  
  398. /* Language box */
  399.  
  400. @media only screen and (min-width: 801px) {
  401.         /* Desktop */
  402.  
  403.         #languageBox {
  404.                 position:absolute;
  405.                 right:420px;
  406.                 top:15px;
  407.         }
  408.  
  409. }
  410.  
  411. @media only screen and (max-width: 800px) {
  412.         /* Mobile */
  413.  
  414.         .lng_flag {
  415.                 margin: 10px;
  416.         }
  417.  
  418. }
  419.  
  420. .lng_flag {
  421.         cursor: pointer;
  422.         border: 1px solid #000 !important;
  423.         height: 20px;
  424. }
  425.  
  426. .picture_ghost {
  427.         opacity: 0.4;
  428. }
  429.  
  430. /* Goto box */
  431.  
  432. @media only screen and (max-width: 800px) {
  433.         /* Mobile */
  434.  
  435.         #gotobox {
  436.                 /*max-width:350px;*/
  437.                 width:75%;
  438.         }
  439.  
  440.         .mobilehidden {
  441.                 display:none !important;
  442.         }
  443.  
  444. }
  445.  
  446. @media only screen and (min-width: 801px) {
  447.         /* Desktop */
  448.  
  449.         #gotobox {
  450.                 position:absolute;
  451.                 right:10px;
  452.                 top:10px;
  453.                 width:30%;
  454.                 max-width:400px;
  455.         }
  456.  
  457. }
  458.  
  459. #gotoedit {
  460.         font-style:italic;
  461.         font-weight:bolder;
  462. }
  463.  
  464. #gotobox {
  465.         display: none; /* will be set to 'block' by JavaScript */
  466.  
  467.         line-height:1.75em;
  468.  
  469.         height:55px !important;
  470.  
  471.         float:left;
  472.         border-bottom:1px;
  473.  
  474.         width:100%; /* required for NoScript */
  475.         padding-left:5px;/* required for NoScript */
  476.         padding-right:5px;/* required for NoScript */
  477.  
  478.         padding-left:0px;
  479.         margin-left:0px;
  480. }
  481.  
  482. #gotobox input[type="text"] {
  483.         width:calc(100% - 45px);
  484. }
  485.  
  486. #gotobox input[type="button"] {
  487.         width:40px;
  488. }
  489.  
  490. /* Logbook severities (shared between plugins ra099, ra200, admin600) */
  491.  
  492. .severity_0 {
  493.         /* Undefined */
  494. }
  495.  
  496. .severity_1 {
  497.         /* Success */
  498.         color: DarkGreen;
  499. }
  500.  
  501. .severity_2 {
  502.         /* Informational */
  503.         color: CornflowerBlue;
  504. }
  505.  
  506. .severity_3 {
  507.         /* Warning */
  508.         color: DarkGoldenRod;
  509. }
  510.  
  511. .severity_4 {
  512.         /* Error */
  513.         color: DarkRed;
  514. }
  515.  
  516. .severity_5 {
  517.         /* Critical */
  518.         color: DarkMagenta;
  519. }
  520.  
  521. /* Tabs */
  522.  
  523. .tab-content {
  524.         color: #000;
  525.         background-color: #eeeeee;
  526.         padding : 15px;
  527. }
  528.  
  529. .nav-link.active {
  530.         color: #000;
  531.         font-weight: bold;
  532.         background-color: #eeeeee !important;
  533.         border-radius: 0;
  534. }
  535.  
  536. /* Let Bootstrap 4 look like Bootstrap 3 (more or less) */
  537. /* see https://www.geeksforgeeks.org/difference-between-bootstrap-3-and-bootstrap-4/ */
  538.  
  539. .container {
  540.         max-width: unset !important;
  541. }
  542.  
  543. body {
  544.         font-size:14px;
  545. }
  546.  
  547. h1, h2, h3 {
  548.         margin-top: 20px;
  549.         margin-bottom: 10px;
  550. }
  551.