Name: cockpit/lib/ui.css
| 1: | /* |
| 2: | This file is part of CPEE. |
| 3: | |
| 4: | CPEE is free software: you can redistribute it and/or modify it under the terms |
| 5: | of the GNU General Public License as published by the Free Software Foundation, |
| 6: | either version 3 of the License, or (at your option) any later version. |
| 7: | |
| 8: | CPEE is distributed in the hope that it will be useful, but WITHOUT ANY |
| 9: | WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A |
| 10: | PARTICULAR PURPOSE. See the GNU General Public License for more details. |
| 11: | |
| 12: | You should have received a copy of the GNU General Public License along with |
| 13: | CPEE (file COPYING in the main directory). If not, see |
| 14: | <http://www.gnu.org/licenses/>. |
| 15: | */ |
| 16: | |
| 17: | html, body { |
| 18: | font-family: sans-serif,Arial,Verdana,Helvetica; |
| 19: | font-size: 0.85em; |
| 20: | } |
| 21: | |
| 22: | body { |
| 23: | background-color:#FFFFFF; |
| 24: | padding:0; |
| 25: | margin:0; |
| 26: | color: #000000; |
| 27: | overflow: hidden; |
| 28: | } |
| 29: | |
| 30: | /* Browser Bug, set textarea explicitly */ |
| 31: | textarea, input, select, button { |
| 32: | font-family: Verdana, Helvetica, sans-serif; |
| 33: | font-size: 1em; |
| 34: | resize: none; |
| 35: | } |
| 36: | |
| 37: | input::-webkit-input-placeholder { color: red; } |
| 38: | input:-moz-placeholder { color: red; } |
| 39: | |
| 40: | a:link { color:#425d73; text-decoration:none; } |
| 41: | a:visited { color:#425d73; text-decoration:none; } |
| 42: | a:hover { color:#000000; text-decoration:underline; } |
| 43: | a:active { color:#000000; text-decoration:underline; } |
| 44: | |
| 45: | div.tabbed table.tabbar { |
| 46: | padding: 0; |
| 47: | margin: 0; |
| 48: | margin-left: 1em; |
| 49: | margin-right: 1em; |
| 50: | margin-top: 1em; |
| 51: | border-spacing:0; |
| 52: | border-collapse: separate; |
| 53: | } |
| 54: | |
| 55: | div.tabbed.rest table.tabbar { |
| 56: | padding: 0; |
| 57: | margin: 0; |
| 58: | margin-left: 0em; |
| 59: | margin-right: 0em; |
| 60: | margin-top: 1.3em; |
| 61: | border-spacing:0; |
| 62: | border-collapse: separate; |
| 63: | } |
| 64: | |
| 65: | div.tabbed table.tabbar h1 { |
| 66: | font-size: 1.4em; |
| 67: | margin-top: 0em; |
| 68: | padding-top: 0em; |
| 69: | padding-bottom: 0em; |
| 70: | } |
| 71: | |
| 72: | div.tabbed table.tabbar .switch h1:before { |
| 73: | content: "▽"; |
| 74: | vertical-align:top; |
| 75: | color: ButtonText; |
| 76: | } |
| 77: | div.tabbed table.tabbar .switch h1.margin:before { |
| 78: | content: "▶"; |
| 79: | color: ButtonText; |
| 80: | vertical-align:top; |
| 81: | } |
| 82: | |
| 83: | div.tabbed table.tabbar tr:first-child { height: 2.6em; } |
| 84: | div.tabbed table.tabbar .tab { |
| 85: | cursor: pointer; |
| 86: | padding: 0em; |
| 87: | padding-left: 1em; |
| 88: | padding-right: 1em; |
| 89: | border: 1pt solid ButtonShadow; |
| 90: | border-bottom: 1pt solid white; |
| 91: | border-radius: 1em; |
| 92: | border-bottom-left-radius: 0em; |
| 93: | border-bottom-right-radius: 0em; |
| 94: | width:0%; |
| 95: | -moz-border-radius: 1em; |
| 96: | -moz-border-radius-bottomleft: 0em; |
| 97: | -moz-border-radius-bottomright: 0em; |
| 98: | -webkit-border-radius: 1em; |
| 99: | -webkit-border-bottom-left-radius: 0em; |
| 100: | -webkit-border-bottom-right-radius: 0em; |
| 101: | } |
| 102: | div.tabbed table.tabbar .tab h1 { margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em; } |
| 103: | div.tabbed table.tabbar .tab h1 { white-space: nowrap; } |
| 104: | div.tabbed table.tabbar .tab.inactive { |
| 105: | border: 1pt solid ButtonShadow; |
| 106: | border-radius: 1em; |
| 107: | border-bottom-left-radius: 0em; |
| 108: | border-bottom-right-radius: 0em; |
| 109: | -moz-border-radius: 1em; |
| 110: | -moz-border-radius-bottomleft: 0em; |
| 111: | -moz-border-radius-bottomright: 0em; |
| 112: | -webkit-border-radius: 1em; |
| 113: | -webkit-border-bottom-left-radius: 0em; |
| 114: | -webkit-border-bottom-right-radius: 0em; |
| 115: | } |
| 116: | |
| 117: | div.tabbed table.tabbar td.tabbehind { |
| 118: | vertical-align:bottom; |
| 119: | padding:0.2em 0em; |
| 120: | border-bottom: 1pt solid buttonshadow; |
| 121: | border-radius: 1em; |
| 122: | border-bottom-left-radius: 0em; |
| 123: | border-bottom-right-radius: 0em; |
| 124: | width:100%; |
| 125: | -moz-border-radius: 1em; |
| 126: | -moz-border-radius-bottomleft: 0em; |
| 127: | -moz-border-radius-bottomright: 0em; |
| 128: | -webkit-border-radius: 1em; |
| 129: | -webkit-border-bottom-left-radius: 0em; |
| 130: | -webkit-border-bottom-right-radius: 0em; |
| 131: | text-align:right; |
| 132: | white-space: nowrap; |
| 133: | overflow: hidden; |
| 134: | } |
| 135: | div.tabbed.rest table.tabbar td.tabbehind { |
| 136: | padding-right: 1em; |
| 137: | } |
| 138: | |
| 139: | div.tabbed table.tabbar td.tabbefore { |
| 140: | border-bottom: 1pt solid buttonshadow; |
| 141: | padding-left:1em; |
| 142: | } |
| 143: | |
| 144: | div.tabbed table.tabbar tr.border td { |
| 145: | height:0.1em; |
| 146: | background-color: ButtonShadow; |
| 147: | border-left: 1pt solid ButtonShadow; |
| 148: | border-right: 1pt solid ButtonShadow; |
| 149: | border-bottom: 1pt solid ButtonShadow; |
| 150: | } |
| 151: | |
| 152: | div.tabbed table.tabbar td.switch { |
| 153: | background-color: ButtonFace; |
| 154: | border-bottom: 1pt solid ButtonShadow; |
| 155: | } |
| 156: | |
| 157: | div.tabbed .tabbelow { |
| 158: | margin-left: 1em; |
| 159: | margin-right: 1em; |
| 160: | padding: 1em; |
| 161: | border-bottom: 1pt solid ButtonShadow; |
| 162: | border-left: 1pt solid ButtonShadow; |
| 163: | border-right: 1pt solid ButtonShadow; |
| 164: | border-radius: 1em; |
| 165: | border-top-left-radius: 0em; |
| 166: | border-top-right-radius: 0em; |
| 167: | -moz-border-radius: 1em; |
| 168: | -moz-border-radius-topleft: 0em; |
| 169: | -moz-border-radius-topright: 0em; |
| 170: | -webkit-border-radius: 1em; |
| 171: | -webkit-border-top-left-radius: 0em; |
| 172: | -webkit-border-top-right-radius: 0em; |
| 173: | } |
| 174: | |
| 175: | div.tabbed.rest .tabbelow { |
| 176: | /* to correctly set the height when resizing with changing height with $.height() -> include padding */ |
| 177: | -moz-box-sizing: border-box; |
| 178: | -webkit-box-sizing: border-box; |
| 179: | box-sizing: border-box; |
| 180: | |
| 181: | padding: 1em; |
| 182: | margin: 0; |
| 183: | border-radius: 0; |
| 184: | border: 0 none; |
| 185: | -moz-border-radius: 0; |
| 186: | -webkit-border-radius: 0; |
| 187: | |
| 188: | overflow: auto; |
| 189: | } |
| 190: | |
| 191: | div.tabbed.rest .tabbelow.columns { |
| 192: | padding:0; |
| 193: | overflow: hidden; |
| 194: | border-collapse:collapse; |
| 195: | border-spacing:0; |
| 196: | width:100% |
| 197: | } |
| 198: | div.tabbed.rest .tabbelow.columns > tbody > tr > td { |
| 199: | margin: 0; |
| 200: | padding: 0; |
| 201: | border: 0 none; |
| 202: | vertical-align: top; |
| 203: | } |
| 204: | div.tabbed.rest .tabbelow.columns .column { |
| 205: | -moz-box-sizing: border-box; |
| 206: | -webkit-box-sizing: border-box; |
| 207: | box-sizing: border-box; |
| 208: | |
| 209: | margin:0; |
| 210: | padding: 1em; |
| 211: | |
| 212: | overflow: auto; |
| 213: | top: 0; |
| 214: | } |
| 215: | |
| 216: | div.tabbed .tabbelow.inactive, div.tabbed .tabbelow .inactive { display: none; } |
| 217: | div.tabbed .tabbelow .layout { |
| 218: | width: 100%; |
| 219: | border-collapse:collapse; |
| 220: | border-spacing:0; |
| 221: | border:0 none; |
| 222: | padding:0; |
| 223: | margin:0; |
| 224: | } |
| 225: | div.tabbed .tabbelow .layout td { |
| 226: | border:0 none; |
| 227: | padding:0; |
| 228: | margin:0; |
| 229: | } |
| 230: | div.tabbed .tabbelow .layout tr { |
| 231: | border:0 none; |
| 232: | padding:0; |
| 233: | margin:0; |
| 234: | } |
| 235: | div.tabbed .tabbelow .compact { |
| 236: | border-collapse:collapse; |
| 237: | border-spacing:0; |
| 238: | border:0 none; |
| 239: | padding:0; |
| 240: | margin:0; |
| 241: | } |
| 242: | |
| 243: | div.tabbed .tabbelow .compact td { |
| 244: | border:0 none; |
| 245: | padding:0; |
| 246: | margin:0; |
| 247: | } |
| 248: | div.tabbed .tabbelow .compact tr { |
| 249: | border:0 none; |
| 250: | padding:0; |
| 251: | margin:0; |
| 252: | } |
| 253: | div.tabbed .tabbelow .layout .fixed { white-space:nowrap; } |
| 254: | div.tabbed .tabbelow .layout .top { vertical-align: top; } |
| 255: | |
| 256: | .hidden { |
| 257: | display: none; |
| 258: | } |
| 259: | |
| 260: | .fixedstate { |
| 261: | background-color: white; |
| 262: | margin:0; |
| 263: | padding:1em; |
| 264: | position:fixed; |
| 265: | padding-top:0em; |
| 266: | bottom:0; |
| 267: | left:0; |
| 268: | right:0; |
| 269: | } |
| 270: | .fixedstate div.tabbed { margin-bottom:0; } |
