From 5e74a26b296fffdff7a8f1d5d41bde821746d258 Mon Sep 17 00:00:00 2001 From: Scott Baker Date: Thu, 27 Mar 2014 09:21:16 -0700 Subject: [PATCH] planetstack.css from node33 --- planetstack/core/static/planetstack.css | 508 ++++++++++++++++++------ 1 file changed, 388 insertions(+), 120 deletions(-) diff --git a/planetstack/core/static/planetstack.css b/planetstack/core/static/planetstack.css index 76bc23b..c780f5c 100644 --- a/planetstack/core/static/planetstack.css +++ b/planetstack/core/static/planetstack.css @@ -1,3 +1,141 @@ +/************************* +colors: + tab - active/focus color + background-color: #105E9E !important; + +ONLab darker blue select :: background-color: #004775; +#0170BB + left-nav + background-color: #448CCA; + background-color // normal: #B4CADF +91BFE4 + +*************************/ + +/* CSS for jquery Tabs */ +#hometabs { +border-bottom: 1px solid #105E9E; +font-size: 12px; +border: 0px; +} + +.ui-tabs-active { + color: #ffffff; + background-color: #105E9E; + text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; + font-weight: normal; +} +.nav > li > a:active { + color: #ffffff; + background-color: #105E9E; + text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; + +} +.nav > li > a:focus { + color: #ffffff; + background-color: #105E9E; + text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; + +} +.ui-state-focus a, +.ui-state-focus a:link{ + color: #ffffff; + background-color: #105E9E; + text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; +} +.ui-state-active a, +.ui-state-active a:link{ + color: #ffffff !important; + background-color: #105E9E !important; + text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; + font-weight: normal; +} +/*************************/ +/* Header elements */ + +.logo { +} +.header{ + background-color: #ffffff !important; + /*background-image: url('bg2.jpg');*/ + background-size: 100% auto; + background-image: none !important; + text-shadow: none; + border-bottom: 3px solid #C5CCD4; + margin-bottom: 14px; + margin-top: -120px; + height: 85px; + /*min-width: 1321px;*/ +} + +.nav-quick-search{ +margin: 30px -10px 0px 0px !important; +padding:0 25px 0 0 !important; +float:right !important; +} + +.nav-quick-search .search-query{ +border-radius:5px; +border:none; +box-shadow:0px; +background-color:lightGrey; +padding-left: 27px; +} + + +.header #branding { +width: 100%; +height:60px; +} + +.header a { +color: #08C; +font-weight: bold; +/*border-bottom: 1px solid #C5CCD4;*/ +} +a { +color: #08C; +font-weight: bold; +/*border-bottom: 1px solid #C5CCD4;*/ +} + +.header #branding { +border-right:none; +} + +#branding2{ +height:20px; +width:100%; +color: #333; +/*background-color: #000000;*/ +margin-bottom: 10px; +} + +.header #user-tools { + padding: 12px 20px 0px 0px; + float: right; + margin-top: -5px; +} + +.header .header-content .date{ +padding-left:10px; +} + +.header .header-content .time { +font-weight: normal; +} +.header .header-content.header-content-first{ +height: 15px; +padding-bottom: 0px; +} + +.header .header-content { +padding-bottom: 0px; +padding: 7px 0 0 0px; +} + +/*************************/ + .alignCenter { text-align: center !important; align: center !important; @@ -25,12 +163,18 @@ border-bottom-right-radius: 0px !important; } #suit-center { - min-width: 977px !important; + /* min-width: 977px !important; */ +} +#openCloudTopPage { + margin-top: -25px; + margin-right: -90; + float: right; } #minDashboard { - min-width:625px; + /*min-width:625px; */ display:inline; float: right; + border: 2px darkGrey; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ background: none !important; @@ -45,19 +189,53 @@ border-left: 0px !important; border-right: 0px !important; } #suit_form_tabs { -border-bottom: 1px solid #B5D1EA; -border-bottom-width: 1px; +/*border-bottom: 1px solid #B5D1EA;*/ +border-bottom: 1px solid #105E9E !important; +border-bottom-width: 5px !important; border-bottom-style: solid; -border-bottom-color: rgb(181, 209, 234); +/*border-bottom-color: rgb(181, 209, 234);*/ +border-bottom-color: #448CCA; color:#105E9E; } -#tabs { -font-size: 12px; -border: 0px; -} .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #105E9E ; } +.save-box { + background-color: #ffffff; + margin: 2px; +} +.save-box .btn-info { + font-size: 14px; + padding: 10px 20px 10px 20px; +} +.btn-success { + font-size: 12px; + font-weight: normal; + padding: 5px 10px 5px 10px; +} +.btn-success, .save-box .btn-info { + background: #27AE5F; + background-image: -webkit-linear-gradient(top, #27AE5F, #27ae60); + background-image: -moz-linear-gradient(top, #27AE5F, #27ae60); + background-image: -ms-linear-gradient(top, #27AE5F, #27ae60); + background-image: -o-linear-gradient(top, #27AE5F, #27ae60); + background-image: linear-gradient(to bottom, #27AE5F, #27ae60); + -webkit-border-radius: 5; + -moz-border-radius: 5; + border-radius: 5px; + text-shadow: 1px 1px 3px #666666; + font-family: Arial; + color: #ffffff; + text-decoration: none; + letter-spacing: 1px; +} + +.btn-success:hover, .save-box .btn-info:hover { + background: #2ecc71; + text-decoration: none; +} + + .required:after {color: red ! important; font-size: 18px } #.btn-success {color:black} @@ -67,9 +245,10 @@ width: 100%; min-width:650px; } .inner-two-columns .inner-center-column .tab-content { -overflow: inherit; +overflow-x: auto; margin-bottom: 15px; -min-width: 650px; +/*min-width: auto;*/ +width:100%; } .inner-two-columns .inner-center-column { #margin-right: 200px; @@ -82,21 +261,24 @@ margin-bottom: 5px; } -/*Added by Beena*/ -/*For increasing the header height*/ -.header { -height: 90px; -min-width: 1321px; -} - /*For changing the background color of the left side navigation list items*/ /*For changing the color of the left side navigation list items*/ /*For changing the font of the left side navigation list items*/ .left-nav>ul>li>a { -background-color: #CDE7FF; -font-weight: bold; -color: #105E9E; -font-size: 13px; +/*background-color: #CDE7FF;*/ +/* Light color nav choices */ +/*background-color: #DFECF8;*/ +/*background-color: #91BFE4;*/ +/*background-color: #DAECFC;*/ +background-color: #448CCA; +/*ONlab.us reg color blue*/ +/*background-color: #ccffff;*/ +font-weight: normal; +/*color: #105E9E;*/ +color: #ffffff; +text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; +letter-spacing: 1px; +font-size: 12px; border-bottom: none; } @@ -109,16 +291,24 @@ padding-left: 5px; .left-nav>ul>li { padding-top:4px; line-height: 35px; -width: 180px; +width: 200px; } -/*For changing background color of suit enter*/ +/*For changing background color of suit center*/ #suit-center { background-color: #ffffff; } .left-nav>ul>li.active>a { -background-color: #448CCA; +/*background-color: #448CCA;*/ +/* Last Active +background-color: #0061B7; */ +background-color: #515151; +/*background-color: #448CCA;*/ +font-weight:normal; +color:#ffffff; +text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; +letter-spacing: 1px; left: 10px; background-image: url("right_arrow.png"); @@ -127,33 +317,49 @@ background-image: url("right_arrow.png"); .nav-tabs-suit li{ -background-color: #CDE7FF; -/*background-color: #FFFFFF;*/ +/*background-color: #CDE7FF;*/ +background-color: #FFFFFF; +border-top-left-radius: 3px; +border-top-right-radius: 3px; +border-bottom-left-radius: 0px; +border-bottom-right-radius: 0px; } .nav-tabs-suit li a { -background-color: #CDE7FF; -font-weight: bold; +background-color: +/*background-color: #CDE7FF;*/ +font-weight: normal; color: #105E9E; -border-radius: 0px; +/*border-radius: 3px;*/ +border-top-left-radius: 3px; +border-top-right-radius: 3px; +border-bottom-left-radius: 0px; +border-bottom-right-radius: 0px; border: none; box-shadow: none; } + .nav-tabs-suit li.active{ /*Changed on Dec 11*/ -background-color: #448CCA; - /*background-position: 50% 100%; -background-image:url('donw_arrow.png');*/ +/*background-color: #448CCA;*/ + background-position: 50% 100%; +background-image:url('down_arrow.png'); } .nav-tabs-suit li.hover{ /*Changed on Dec 11*/ -background-color: #448CCA; +/*background-color: #448CCA;*/ +color:#ffffff; +/*font-size: 1.2em;*/ +font-weight: bold; } .nav-tabs-suit li.active a { -background-color: #448CCA; +background-color: #ffffff; +/*background-color: #448CCA;*/ +background-color: #105E9E; color:#ffffff; +font-weight:normal; padding-top:10px; text-decoration:none; } @@ -173,32 +379,49 @@ line-height: 0; .left-nav>ul>li.active>a:hover{ -background-color: #448CCA; +/*background-color: #448CCA;*/ +/*background-color: #91BFE4;*/ +/*background-color: #D6E7F8;*/ +font-weight:normal; +font-size: 1.2em; +font-weight: bold; color:#ffffff; -/*padding-top:10px;*/ +padding-top:10px; text-decoration:none; } +/* Adjust font weight to normal on hover, else white blurs */ .left-nav>ul>li>a:hover{ -background-color: #448CCA; +/*background-color: #448CCA;*/ +/*background-color: #004775;*/ +background-color: #515151; color:#ffffff; +font-weight:normal; +font-size: 1.2em; /*padding-top:10px;*/ text-decoration:none; -border-left: 15px solid #105E9E ; +/*border-left: 15px solid #105E9E ;*/ +border-left: 10px solid #ffffff; +text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; +letter-spacing: 1px; } .nav-tabs-suit li.active a:hover,.nav-tabs-suit li a:hover{ -background-color: #448CCA; -color:#ffffff; +/*background-color: #448CCA;*/ +background-color: #515151; +font-weight:normal; +font-size: 1.2em; +/*color:#ffffff;*/ padding-top:10px; text-decoration:none; } .breadcrumb li a { -font-weight:bold; +/*font-weight:bold;*/ } .nav-tabs { -border-bottom: 1px solid #B5D1EA; +/* +border-bottom: 1px solid #B5D1EA;*/ } .nav-tabs>li { @@ -225,53 +448,11 @@ vertical-align: middle; */ -.header #branding{ -height:60px; -} - -#branding2{ -padding-top:60px; -height:20px; -width:100%; -/*background-color: #000000;*/ -/*margin-bottom: 10px;*/ -} -.header .header-content .date{ -padding-left:10px; -} - -.header .header-content .time { -font-weight: normal; -} -.header .header-content.header-content-first{ -height: 15px; -padding-bottom: 0px; -} - -.header .header-content { -padding-bottom: 0px; -padding: 7px 0 0 0px; -} - -.header #branding { -border-right:none; -} - .left-nav>ul>li.active>a:after { content: none; } -.nav-quick-search{ -margin: 0px 0 0px 0px; -padding:0 20px 0 0; -float:right; -} - -.header #branding { -width: 100%; -} - /** * login page */ @@ -282,12 +463,16 @@ background-color: #ffffff; }*/ .login #content-main { -width: 280px; -height: 365px; -border-radius: 0px; +width: 280px !important; +min-width: 180px; +height: 265px; + -webkit-border-radius: 5; + -moz-border-radius: 5; + border-radius: 5px; /*background: #EBF0F2;*/ background: rgba(255,255,255,0.85); /*background: rgba(235,240,242,0.6);*/ +overflow: visible !important; } .login #content-main h1 { @@ -367,10 +552,13 @@ padding-left: 45px; /*Dec 11 2013*/ .nav-tabs-suit li.active a{ -text-shadow: none; +letter-spacing: 1px; +text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; +/*text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; +*/ } .nav-tabs>.active>a{ @@ -379,6 +567,9 @@ border: none; .nav-tabs-suit li a:hover{ border: none; +color: #ffffff; +letter-spacing: 1px; +text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em; } .nav-tabs-suit li.active a:hover{ @@ -411,18 +602,30 @@ background-repeat: no-repeat; width: 265px; } +/** Leave room for scroll bar now that contents can be appropriately scrolled **/ +.form-horizontal .inline-group .add-row { + margin: -1px -1px 15px 0px; +} -.header{ -background-color: #000000; -background-image: url('bg2.jpg'); -background-size: 100% auto; +/** Setting overflow and 1kpx to deal with inlines/forms overlapping on + browser resizes **/ +#content-main { + overflow-x:auto; + min-width: 1000px; } +.tab-content tab-content-main { + overflow-x: auto !important; +} #wrap{ background:none; } +.noclearfix { + display:block; clear:left; width:0px; height:0px; +} + body{ background-color:#ffffff; } @@ -430,14 +633,6 @@ background-color:#ffffff; .suit-column{ background-color:#ffffff; } -.nav-quick-search .search-query{ -border-radius:0px; -border:none; -box-shadow:0px; -background-color:#282828; -padding-left: 27px; -} - /*Added on 13th*/ /*.input-icon { @@ -491,7 +686,8 @@ height: 84.5%; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { - background-color: #448CCA; + /*background-color: #448CCA;*/ + background-color: #105E9E; color: #FFF; border: none; } @@ -505,27 +701,31 @@ height: 84.5%; } .nodetextbox{ - background-color: #ededed; + /*background-color: #ededed;*/ line-height: 25px; width: 150px; text-align: center; font-weight: bold; - margin-left:5px; + margin-left:0px; display:inline-block; border:none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 13px; + font-size: 8px; } .nodelabel{ -width: 40px; +width: 20px; display: inline-block; border-radius: 0px; border:1px solid #000; -line-height: 23px; +/*line-height: 23px;*/ text-align: center; +font-weight: normal; } +#user-tools { + font-weight: bold; +} .header-content .header-column { display: none; } @@ -560,22 +760,23 @@ height:22px; background-image: url("opencloudApp.png"); } .icon-home { -background-image: url("Home.png"); +/* Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */ +background-image: url("Home_over.png"); } .icon-deployment{ -background-image: url("Deployments.png"); +background-image: url("Deployments_over.png"); } .icon-site{ -background-image: url("Sites.png"); +background-image: url("Sites_over.png"); } .icon-slice{ -background-image: url("Slices.png"); +background-image: url("Slices_over.png"); } .icon-user{ -background-image: url("Users.png"); +background-image: url("Users_over.png"); } .icon-reservation{ -background-image: url("Reservations.png"); +background-image: url("Reservations_over.png"); } .left-nav>ul>li.active>a>.icon-home , .left-nav>ul>li:hover>a>.icon-home , .left-nav>ul>li.focus>a>.icon-home{ @@ -627,10 +828,60 @@ text-decoration: underline; height: 400px; } +.minidashbutton { + -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; + -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; + box-shadow:inset 0px 1px 0px 0px #ffffff; + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6)); + background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0); + background-color:#ffffff; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + border:1px solid #dcdcdc; + display:inline-block; + cursor:pointer; + color:#666666; + font-family:arial; + font-size:15px; + font-weight:bold; + padding:6px 24px; + text-decoration:none; + text-shadow:0px 1px 0px #ffffff; +} +.minidashbutton:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff)); + background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); + background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); + background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); + background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); + background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0); + background-color:#f6f6f6; +} +.newMiniDashboard { + border: 1px solid green; + width: auto; +} +.endDashPair { + clear: left; +} +.miniDashPair { + float: left; + width: auto; + margin-left: 20px; +} - +.miniDashPair label { + text-align: center; +} /* Charts CSS */ p.numeral { @@ -669,11 +920,11 @@ p.osobject p.heading { - font-size:20pt; - color:#ffffff; - opacity: 0.7; - font-family:Helvetica Neue; - font-weight:200; + font-size:20px; + letter-spacing: 1px; + color: black; + font-family:Arial; + font-weight:bold; text-align:center; } @@ -709,7 +960,7 @@ div.padding div.chartContainer { - background-image:url('chartsBg.jpg'); + /*background-image:url('chartsBg.jpg');*/ width:527px; height:400px; border:1px; @@ -754,4 +1005,21 @@ div.chartContainer } +/****** Added in so that we can have a loader show as charts get ready to render ***/ +.loading { + //background-color: orange; + background-image: url(spinner.gif) no-repeat center middle; + text-align: center; + font-size: 20px; + height: 100% +/* width: auto;*/ + float: left; + padding: 10px; +} /* Charts CSS */ + +#tabs-4 { + margin: 40px; + font-size: 24px; + font-weight: bold; +} -- 2.47.0