Subversion Repositories oidplus

Rev

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

  1. /*
  2.  * OIDplus 2.0
  3.  * Copyright 2019 - 2021 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. /* Logo */
  35.  
  36. @media only screen and (min-width: 801px) {
  37.         /* Desktop */
  38.         #system_title_logo {
  39.                 background-image: url(logo_anim.gif);
  40.                 background-position: left;
  41.                 background-repeat: no-repeat;
  42.                 background-size: 45px 45px;
  43.                 position:absolute;
  44.                 top:0px;
  45.                 left:0px;
  46.                 width:50px;
  47.                 height:50px;
  48.                 margin-left:5px;
  49.         }
  50.  
  51.         #system_title_1 {
  52.                 padding-left: 50px;
  53.         }
  54.  
  55.         #system_title_2 {
  56.                 padding-left: 50px;
  57.         }
  58. }
  59.  
  60. /* Basic stuff */
  61.  
  62. @media print {
  63.         /* Printing */
  64.         .ui-layout-west, .ui-layout-resizer {
  65.                 display:none !important;
  66.         }
  67.         .ui-layout-center {
  68.                 left:0px !important;
  69.                 width:100% !important;
  70.         }
  71.         #oidtree, .ui-layout-center {
  72.                 position:relative !important;
  73.                 width:100% !important;
  74.                 top: 0 !important;
  75.  
  76.         }
  77.         #content_window {
  78.                 top: 0 !important;
  79.         }
  80. }
  81.  
  82. @media only screen and (max-width: 800px) {
  83.         /* Mobile */
  84.         .ui-layout-west, .ui-layout-resizer {
  85.                 display:none !important;
  86.         }
  87.         .ui-layout-center {
  88.                 left:0px !important;
  89.                 width:100% !important;
  90.         }
  91.         #oidtree, .ui-layout-center {
  92.                 position:relative !important;
  93.                 width:100% !important;
  94.                 padding-right:10px !important;
  95.                 top: 0 !important;
  96.                 padding-bottom:80px !important; /* because iPhone Safari bar at the bottom */
  97.                                                 /* Attention: If you incrase .lng_flag.margin, then you need to increase this, too */
  98.         }
  99.         #content_window {
  100.                 top: 0 !important;
  101.         }
  102.         #frames {
  103.                 display:flex;
  104.                 flex-direction:column;
  105.                 align-items: flex-start;
  106.         }
  107.         #system_title_bar {
  108.                 order:0;
  109.                 flex:none;
  110.         }
  111.         #oidtree {
  112.                 order:1;
  113.                 flex:none;
  114.         }
  115.         #content_window {
  116.                 order:2;
  117.                 flex:none;
  118.         }
  119.         #system_title_text {
  120.                 overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
  121.         }
  122. }
  123.  
  124. @media only screen and (min-width: 801px) {
  125.         /* Desktop */
  126.         #system_title_menu {
  127.                 display:none !important;
  128.         }
  129. }
  130.  
  131. #system_title_bar {
  132.         width:100% !important;
  133.         position:relative !important;
  134.         white-space: nowrap;
  135. }
  136.  
  137. body, #frames {
  138.         width:100%;
  139.         height:100%;
  140. }
  141.  
  142. .wrap {
  143.         overflow-x: auto;
  144.         margin: 0 auto;
  145.         width:100%;
  146. }
  147.  
  148. .gray_footer_font {
  149.         color:#808080;
  150.         font-size:0.9em;
  151. }
  152.  
  153. label.padding_label {
  154.         font-weight: normal !important;
  155.         display: inline-block;
  156.         clear: left;
  157.         width: 100px;
  158.         text-align: right;
  159.         padding-top: 3px;
  160.         margin-right: 8px;
  161. }
  162.  
  163. .box {
  164.         width:auto !important;
  165.         padding:20px;
  166.         background-color:#fff;
  167.         color:#000;
  168.         border:1px solid #ccc;
  169.         border-radius:5px;
  170.         margin-top:10px;
  171. }
  172. #titleedit {
  173.         width:100%;
  174. }
  175. #system_title_1 {
  176.         color:#2D6A9F;
  177.         margin-left:5px;
  178. }
  179. #system_title_2 {
  180.         color:#2B336F;
  181.         font-size:2em;
  182.         margin-left:5px;
  183. }
  184.  
  185. /* Mobile menu button */
  186.  
  187. #bar1, #bar2, #bar3 {
  188.         width: 27px;
  189.         height: 5px;
  190.         background-color: #FFA500;
  191.         margin: 6px 0;
  192.         transition: 0.4s;
  193.         margin-left:14px;
  194. }
  195.  
  196. #system_title_menu.active {
  197.         background-color: #FFA500;
  198. }
  199.  
  200. .active #bar1 {
  201.         -webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
  202.         transform: rotate(-45deg) translate(-7.5px, 7.5px);
  203.         background-color: #000;
  204. }
  205.  
  206. .active #bar2 {
  207.         opacity: 0;
  208.         background-color: #000;
  209. }
  210.  
  211. .active #bar3 {
  212.         -webkit-transform: rotate(45deg) translate(-8px, -8px);
  213.         transform: rotate(45deg) translate(-8px, -8px);
  214.         background-color: #000;
  215. }
  216.  
  217. .hover #bar1, .hover #bar2, .hover #bar3 {
  218.         background-color:#fff;
  219. }
  220.  
  221. #system_title_menu {
  222.         width:55px;
  223.         height:55px;
  224.         padding-top:8px;
  225.         text-decoration: none;
  226.         font-size: 19px;
  227.         display: none; /* will be set to 'block' by JavaScript */
  228.         background-color: #000;
  229.         float:left;
  230.         cursor: pointer;
  231. }
  232.  
  233. /* Title bar */
  234.  
  235. #system_title_bar {
  236.         line-height:1.75em;
  237.  
  238.         height:55px !important;
  239.  
  240.         font-style:italic;
  241.         font-weight:bolder;
  242.         float:left;
  243.         border-bottom:1px;
  244.  
  245.         width:100%; /* required for NoScript */
  246.         padding-left:5px;/* required for NoScript */
  247.         padding-right:5px;/* required for NoScript */
  248.  
  249.         padding-left:0px;
  250.         margin-left:0px;
  251.  
  252.         display:block;
  253.  
  254.         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
  255.         background: #a0d8ef; /* Old browsers */
  256.         background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */
  257.         background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
  258.         background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  259.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */
  260.        
  261.         color:#000;
  262.  
  263.         overflow:hidden;
  264. }
  265. #system_title_bar a {
  266.         text-decoration:none;
  267. }
  268.  
  269. /* OID-Tree */
  270.  
  271. @media only screen and (max-width: 800px) {
  272.         /* Mobile */
  273.  
  274.         #content_window {
  275.                 padding-left:16px;
  276.                 padding-top:0px;
  277.         }
  278.  
  279. }
  280. @media only screen and (min-width: 801px) {
  281.         /* Desktop */
  282.  
  283.         #oidtree {
  284.                 position:absolute;
  285.                 left:0px;
  286.                 bottom:0px;
  287.                 top:55px; /* required for NoScript */
  288.                 width:400px; /* required for NoScript */
  289.                 padding-top:5px;
  290.                 white-space:nowrap; /* required for NoScript */
  291.                 overflow:scroll; /* required for NoScript */
  292.                 padding-bottom:10px !important;
  293.         }
  294.        
  295.         #content_window {
  296.                 position:absolute;
  297.                 left:400px;
  298.                 right:0px;
  299.                 bottom:0px;
  300.                 top:55px; /* required for NoScript */
  301.                 padding-left:20px;
  302.                 padding-right:20px;
  303.         }
  304. }
  305.  
  306. #oidtree {
  307.         padding-top:5px !important;
  308.         padding-left:5px;/* required for NoScript */
  309.         padding-right:5px;/* required for NoScript */
  310. }
  311.  
  312. html {
  313.         margin:0;
  314.         padding:0;
  315.         height:100%;
  316.         font-family:"Helvetica";
  317. }
  318. body {
  319.         margin:0px;
  320.         padding:0px;
  321.         height:100%;
  322.         /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
  323.         font-family:"Arial","sans-serif" !important;
  324. }
  325.  
  326. @media only screen and (min-width: 801px) {
  327.         /* Desktop */
  328.         body {
  329.                 overflow:hidden;
  330.         }
  331.         .borderbox {
  332.                 border:1px solid silver;
  333.         }
  334. }
  335.  
  336. .borderbox {
  337.         overflow:auto;
  338. }
  339.  
  340. h1 {
  341.         font-size:2.2em;
  342. }
  343. h2 {
  344.         font-size:1.6em !important;
  345. }
  346. h3 {
  347.         font-size:1.5em !important;
  348. }
  349.  
  350. textarea,input[type="text"],input[type="password"],select {
  351.         /* for dark themes, this looks better */
  352.         /*background:transparent;*/
  353.         background:#fff;
  354.         background-opacity: 0.4;
  355.         border: #AAAAAA 1px solid;
  356.         color:#000;
  357. }
  358.  
  359. input[type=button], input[type=submit], input[type=reset],
  360. input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
  361. input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
  362. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  363.         border: 1px solid #a2a2a2;
  364.         padding-top:2px;
  365.         padding-bottom:2px;
  366.         padding-left:7px;
  367.         padding-right:7px;
  368.         text-decoration:none;
  369.         background: #ffffff;
  370.         color: #0066CC;
  371. }
  372. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  373.         background: #f4f4ff;
  374.         color:#000;
  375. }
  376. .hand, input[type=button], input[type=submit], input[type=reset] {
  377.         cursor: pointer;
  378. }
  379.  
  380. /**
  381.  *      Splitter / uiLayout
  382.  */
  383. .ui-layout-pane { /* all 'panes' */
  384.         border: 1px solid #BBB;
  385. }
  386. .ui-layout-pane-center { /* content body */
  387.         padding: 0;
  388.         margin:  0;
  389. }
  390. .ui-layout-pane-west { /* west pane */
  391.         padding: 0 10px;
  392.         background-color: #f9f9f9 !important;
  393.         overflow: auto;
  394. }
  395. .ui-layout-resizer { /* all 'resizer-bars' */
  396.         background: #DDD;
  397.         top:55px !important; /* DM 13.03.2019 */
  398.         color:#000;
  399. }
  400. .ui-layout-resizer-open:hover { /* mouse-over */
  401.         background: #9D9;
  402.         color:#000;
  403. }
  404. .ui-layout-resizer-north {
  405.         background:#2b336f !important;
  406.         color:#000;
  407.         z-index:10 !important; /* DM 13.03.2019 */
  408. }
  409. .ui-layout-toggler { /* all 'toggler-buttons' */
  410.         background: #AAA;
  411.         color:#000;
  412.         }
  413. .ui-layout-toggler-closed { /* closed toggler-button */
  414.         background: #CCC;
  415.         color:#000;
  416.         border-bottom: 1px solid #BBB;
  417. }
  418. .ui-layout-toggler .content { /* toggler-text */
  419.         font-size: 14px;
  420.         font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
  421.         font-weight: bold;
  422. }
  423. .ui-layout-toggler:hover { /* mouse-over */
  424.         background: #DCA;
  425.         color:#000;
  426. }
  427. .ui-layout-toggler:hover .content { /* mouse-over */
  428.         color: #009;
  429. }
  430.  
  431. /* masks are usually transparent - make them visible (must 'override' default) */
  432. .ui-layout-mask {
  433.         background: #C00 !important;
  434.         color:#000;
  435.         opacity: .20 !important;
  436.         filter: alpha(opacity=20) !important;
  437. }
  438.  
  439. /* Language box */
  440.  
  441. @media only screen and (min-width: 801px) {
  442.         /* Desktop */
  443.  
  444.         #languageBox {
  445.                 position:absolute;
  446.                 right:420px;
  447.                 top:15px;
  448.         }
  449.  
  450. }
  451.  
  452. @media only screen and (max-width: 800px) {
  453.         /* Mobile */
  454.  
  455.         #languageBox {
  456.                 margin: 10px;
  457.         }
  458.        
  459.         .lang_flag_bg {
  460.                 margin-right: 10px;
  461.         }
  462.  
  463. }
  464.  
  465. .lng_flag {
  466.         cursor: pointer;
  467.         border: 1px solid #000 !important;
  468.         height: 20px;
  469.         margin: 0px;
  470. }
  471.  
  472. .lang_flag_bg {
  473.         /* to avoid that the stripes shine through a ghost image */
  474.         background:#fff;
  475.         color:#000;
  476.         display: inline-block;
  477. }
  478.  
  479. .picture_ghost {
  480.         opacity: 0.4;
  481. }
  482.  
  483. /* Goto box */
  484.  
  485. @media only screen and (max-width: 800px) {
  486.         /* Mobile */
  487.  
  488.         #gotobox {
  489.                 /*max-width:350px;*/
  490.                 width:75%;
  491.         }
  492.  
  493.         .mobilehidden {
  494.                 display:none !important;
  495.         }
  496.  
  497. }
  498.  
  499. @media only screen and (min-width: 801px) {
  500.         /* Desktop */
  501.  
  502.         #gotobox {
  503.                 position:absolute;
  504.                 right:10px;
  505.                 top:10px;
  506.                 width:30%;
  507.                 max-width:400px;
  508.         }
  509.  
  510. }
  511.  
  512. #gotoedit {
  513.         font-style:italic;
  514.         font-weight:bolder;
  515. }
  516.  
  517. #gotobox {
  518.         display: none; /* will be set to 'block' by JavaScript */
  519.  
  520.         line-height:1.75em;
  521.  
  522.         height:55px !important;
  523.  
  524.         float:left;
  525.         border-bottom:1px;
  526.  
  527.         width:100%; /* required for NoScript */
  528.         padding-left:5px;/* required for NoScript */
  529.         padding-right:5px;/* required for NoScript */
  530.  
  531.         padding-left:0px;
  532.         margin-left:0px;
  533. }
  534.  
  535. #gotobox input[type="text"] {
  536.         width:calc(100% - 45px);
  537. }
  538.  
  539. #gotobox input[type="button"] {
  540.         width:40px;
  541. }
  542.  
  543. /* Logbook severities (shared between plugins ra099, ra200, admin600) */
  544.  
  545. .severity_0 {
  546.         /* Undefined */
  547. }
  548.  
  549. .severity_1 {
  550.         /* Success */
  551.         color: DarkGreen;
  552. }
  553.  
  554. .severity_2 {
  555.         /* Informational */
  556.         color: CornflowerBlue;
  557. }
  558.  
  559. .severity_3 {
  560.         /* Warning */
  561.         color: DarkGoldenRod;
  562. }
  563.  
  564. .severity_4 {
  565.         /* Error */
  566.         color: DarkRed;
  567. }
  568.  
  569. .severity_5 {
  570.         /* Critical */
  571.         color: DarkMagenta;
  572. }
  573.  
  574. /* Tabs */
  575.  
  576. .tab-content {
  577.         color: #000;
  578.         background-color: #eeeeee;
  579.         padding : 15px;
  580. }
  581.  
  582. .nav-link.active {
  583.         color: #000;
  584.         font-weight: bold;
  585.         background-color: #eeeeee !important;
  586.         border-radius: 0;
  587. }
  588.  
  589. /* Let Bootstrap 4 look like Bootstrap 3 (more or less) */
  590. /* see https://www.geeksforgeeks.org/difference-between-bootstrap-3-and-bootstrap-4/ */
  591.  
  592. .container {
  593.         max-width: unset !important;
  594. }
  595.  
  596. body {
  597.         font-size:14px;
  598. }
  599.  
  600. h1, h2, h3 {
  601.         margin-top: 20px;
  602.         margin-bottom: 10px;
  603. }
  604.