Subversion Repositories oidplus

Rev

Rev 1388 | View as "text/css" | Blame | Compare with Previous | Last modification | View Log | RSS feed

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