diff options
Diffstat (limited to 'tools/infra-dashboard/css/theme.css')
-rw-r--r-- | tools/infra-dashboard/css/theme.css | 387 |
1 files changed, 387 insertions, 0 deletions
diff --git a/tools/infra-dashboard/css/theme.css b/tools/infra-dashboard/css/theme.css new file mode 100644 index 00000000..59ae59f0 --- /dev/null +++ b/tools/infra-dashboard/css/theme.css @@ -0,0 +1,387 @@ +.container { + width: 100% +} +#hs-component { + background-color: inherit; + padding: 0 +} +#hs-component .container { + padding: 0; + width: 100% +} +#comp-menu { + background-color: #FFFFFF; + z-index: 1; + padding: 0 +} +#comp-menu .cont, +.demo { + padding: 0 50px +} +#comp-menu h2, +#comp-menu h2 a { + color: #000000; + font-weight: lighter; + text-transform: inherit +} +#comp-menu h2 a:hover { + color: #8085e8 +} + +.blink_me { + animation: blinker 1.5s linear infinite; +} + +@keyframes blinker { + 20% { opacity: 0.4; } +} + + +a.btn.btn-theme { + color: #eeeaea; + background-color: #007E88; + border: 1px solid #007E88; + border-bottom: 0; + border-radius: 0; + font-weight: 400; + margin: 0 5px 0 0 +} +a.btn.btn-theme:hover { + color: #90ef7f +} + + +.btn-book { + color: #fff; + background-color: #337ab7; + border-color: #2e6da4; + display: inline-block; + white-space: nowrap; + vertical-align: middle; + border: 1px solid transparent; + touch-action: manipulation; + cursor: pointer; + padding: 2px 6px; + font-size: 10px; + font-weight: bold; + line-height: 1.1333333; + border-radius: 6px; + background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%); +} + +a.btn.btn-theme.noselected { + background-color: #FFF; + color: #313131; + opacity: 1 +} + +a.btn.btn-theme.disabled { + background-color: #FFF; + color: #313131; + opacity: 1 +} +.demo { + background-color: #f6f6f6 +} +.demo .demo-name { + color: #000000; + font-weight: lighter; + text-transform: none; + padding-left: 15px; + text-align: center; + display: inline; + margin: 0 10px +} +#chart-switcher { + text-align: center; + padding: 30px 0 +} +.demo #chart-switcher #next-example, +.demo #chart-switcher #previous-example { + font-size: 30px; + padding: 0 10px; + color: #888 +} +#demo-buttons { + text-align: center; + padding: 30px 0 +} +#demo-buttons a { + background-color: #ddd +} +#demo-buttons a:hover { + background-color: #40818b +} +.demo .chart-container { + position: relative; + background-color: #fff; + padding: 30px 0 +} +.demo .chart-container #previous-example { + position: absolute; + top: 50%; + left: -30px; + font-size: 70px; + color: #888 +} +.demo .chart-container #next-example { + position: absolute; + top: 50%; + right: -30px; + font-size: 70px; + color: #888 +} +.sidebar-eq-fill { + background-color: #f6f6f6 +} +@media screen and (max-width: 400px) { + #chart-switcher, + .demo .chart-container, + .sidebar-wrapper .sidebar-eq { + padding: 0 + } + #small-switcher { + text-align: center + } + .demo #chart-switcher #next-example, + .demo #chart-switcher #previous-example { + font-size: 20px + } + #sidebar-close { + position: absolute; + top: 0; + left: 0; + background-color: #FFFFFF; + color: #fff; + border-radius: 0; + z-index: 100; + cursor: pointer; + padding: 10px; + visibility: hidden + } + .toggled #sidebar-close { + visibility: visible + } +} +@media screen and (min-width: 400px) and (max-width: 768px) { + .demo { + padding: 15px + } + #sidebar-close { + position: absolute; + top: 0; + left: 0; + background-color: #FFFFFF; + color: #fff; + border-radius: 0; + z-index: 100; + cursor: pointer; + padding: 10px; + visibility: hidden + } + .toggled #sidebar-close { + visibility: visible + } +} +#hs-below { + background-color: #eeeaea; + font-size: 18px; + line-height: 26px +} +#hs-below h3 { + font-size: 30px; + line-height: 30px; + font-weight: bolder; + margin-top: 0; + margin-bottom: 15px +} +#hs-below p, +ul { + font-size: 1pc +} +#hs-below .box { + position: relative; + background-color: #fff; + padding: 14px 22px +} +#hs-below .box .box-content { + margin-bottom: 40px +} +#hs-below .box .button { + position: absolute; + bottom: 0; + margin-bottom: 10px +} +#hs-below .box.purple { + border-bottom: 8px solid #8085e8 +} +#hs-below .box.green { + border-bottom: 8px solid #90ef7f +} +#hs-below .box .book { + text-align: center +} +#hs-below .box .book img { + max-height: 200px +} +@media screen and (max-width: 768px) { + #hs-below h3 { + margin-top: 30px + } + #hs-below .box-1 h3 { + margin-top: 0 + } + #hs-below .box .book { + text-align: left + } +} +@media screen and (min-width: 768px) and (max-width: 992px) { + #hs-below h3 { + margin-top: 30px + } + #hs-below .box-1 h3, + #hs-below .box-2 h3 { + margin-top: 0 + } + #hs-below .box-1 .box, + #hs-below .box-2 .box { + min-height: 260px + } + #hs-below .box-3 .box, + #hs-below .box-4 .box { + min-height: 280px + } +} +@media screen and (min-width: 992px) and (max-width: 1200px) { + #hs-below h3 { + margin-top: 30px + } + #hs-below .box-1 h3, + #hs-below .box-2 h3 { + margin-top: 0 + } + #hs-below .box-1 .box, + #hs-below .box-2 .box { + min-height: 255px + } + #hs-below .box-3 .box, + #hs-below .box-4 .box { + min-height: 280px + } +} +@media screen and (min-width: 1200px) { + #hs-below .box { + min-height: 390px + } +} +#hs-bottom, +#hs-bottom a { + color: #eeeaea +} +#hs-bottom { + background-color: #FFFFFF; + font-size: 1pc; + line-height: 20px +} +#hs-bottom a:focus, +#hs-bottom a:hover { + color: #90ef7f +} +#hs-bottom a.button { + color: #313131 +} +#hs-bottom a.button:focus, +#hs-bottom a.button:hover { + color: #eeeaea +} +#hs-bottom h3 { + font-size: 24px; + line-height: 24px; + font-weight: lighter +} +#hs-bottom h4 { + font-size: 14px +} +#hs-bottom .grayed { + color: #d6d1d1; + margin: 0 +} +@media screen and (max-width: 768px) { + #hs-bottom [class*=col-] { + border-bottom: 1px dotted #eeeaea; + padding-bottom: 15px + } + #hs-bottom [class*=col-]:nth-child(1) h3 { + margin-top: 0 + } + #hs-bottom [class*=col-]:last-child { + border-bottom: 0; + padding-bottom: 0 + } +} +@media screen and (min-width: 768px) and (max-width: 992px) { + #hs-bottom [class*=col-] { + min-height: 350px; + border-right: 1px dotted #eeeaea + } + #hs-bottom [class*=col-]:last-child, + #hs-bottom [class*=col-]:nth-child(2) { + border-right: 0 + } +} +@media screen and (min-width: 992px) and (max-width: 1200px) { + #hs-bottom [class*=col-] { + min-height: 300px; + border-right: 1px dotted #eeeaea + } + #hs-bottom [class*=col-]:last-child, + #hs-bottom [class*=col-]:nth-child(2) { + border-right: 0 + } +} +@media screen and (min-width: 1200px) { + #hs-bottom [class*=col-] { + min-height: 25pc; + border-right: 1px dotted #eeeaea + } + #hs-bottom [class*=col-]:last-child { + border-right: 0 + } +} + + + +.button{ + border:1px solid #333; + background:#6479fd; +} +.button:hover{ + background:#a4a9fd; +} +.dialog{ + border:5px solid #666; + padding:10px; + background:#3A3A3A; + position:absolute; + display:none; +} +.dialog label{ + display:inline-block; + color:#cecece; +} +input[type=text]{ + border:1px solid #333; + display:inline-block; + margin:5px; +} +#btnOK{ + border:1px solid #000; + background:#ff9999; + margin:5px; +} + +#btnOK:hover{ + border:1px solid #000; + background:#ffacac; +} + |