Subversion Repositories oidplus

Rev

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

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