Initial work in restyling Quay to be more like CoreOS styles
This commit is contained in:
Joseph Schorr
parent
b9c6c4c2f2
commit
ab68126d8a
12 changed files with 408 additions and 215 deletions
|
|
@ -9,33 +9,120 @@
|
|||
}
|
||||
}
|
||||
|
||||
#quay-logo {
|
||||
width: 80px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
#padding-container {
|
||||
padding: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.d3-tip {
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
}
|
||||
|
||||
#co-l-footer-wrapper {
|
||||
clear: both;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin-bottom: -64px;
|
||||
}
|
||||
|
||||
#co-l-footer-wrapper #co-l-footer-push {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
#co-l-footer img {
|
||||
height: 50px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#co-l-footer .col-md-4 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#co-l-footer {
|
||||
clear: both;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.co-img-bg-network {
|
||||
background: url('/static/img/network-tile.png') left top repeat, linear-gradient(30deg, #2277ad, #144768) no-repeat left top fixed;
|
||||
background-color: #2277ad;
|
||||
background-size: auto, 100% 100%;
|
||||
}
|
||||
|
||||
.co-m-navbar {
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.co-fx-box-shadow {
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
-ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.co-fx-box-shadow-heavy {
|
||||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-ms-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
padding: 30px;
|
||||
|
||||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-ms-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
background-image: linear-gradient(to top, #535C66 0%,#6E8194 100%);
|
||||
}
|
||||
|
||||
nav.navbar-default .navbar-brand {
|
||||
padding-left: 14px;
|
||||
border-right: 1px solid rgb(134, 140, 163);
|
||||
padding-right: 14px;
|
||||
padding-top: 5px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav.navbar-default .navbar-nav>li>a {
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
color: #428bca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
nav.navbar-default .navbar-nav>li>a.active {
|
||||
color: #f04c5c;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
|
||||
color: #BEE1FF;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.4) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification-view-element {
|
||||
|
|
@ -399,17 +486,6 @@ i.toggle-icon:hover {
|
|||
margin: 0 auto -176px;
|
||||
}
|
||||
|
||||
.footer-container, .push {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.footer-container.fixed {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.button-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -671,12 +747,12 @@ i.toggle-icon:hover {
|
|||
.user-tools .user-tool {
|
||||
font-size: 24px;
|
||||
margin-top: 14px;
|
||||
color: white;
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.user-tools i.user-tool:hover {
|
||||
cursor: pointer;
|
||||
color: #BEE1FF;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-box a {
|
||||
|
|
@ -1040,6 +1116,10 @@ i.toggle-icon:hover {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.hidden-xs-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.visible-md-inline {
|
||||
display: inline;
|
||||
|
|
@ -1056,6 +1136,13 @@ i.toggle-icon:hover {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.hidden-xs-inline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.visible-xl {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1255,25 +1342,14 @@ i.toggle-icon:hover {
|
|||
color: #555;
|
||||
}
|
||||
|
||||
.landing-page .wrapper > nav {
|
||||
display: none;
|
||||
.landing-page #padding-container {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.landing-page .nav > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.landing-page .nav > li > a:hover, .landing-page .nav > li > a:focus {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.landing-page .nav .user-view {
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.landing-page .user-tool {
|
||||
color: white;
|
||||
.landing-page .main-panel {
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
|
|
@ -1284,10 +1360,6 @@ i.toggle-icon:hover {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.landing-content {
|
||||
|
||||
}
|
||||
|
||||
.landing-background {
|
||||
z-index: 0;
|
||||
|
||||
|
|
@ -1297,10 +1369,9 @@ i.toggle-icon:hover {
|
|||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
background-color: #1d1d1d;
|
||||
background-image: url(../img/landing-back-opt.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background: url('/static/img/network-tile.png') left top repeat, linear-gradient(30deg, #2277ad, #144768) no-repeat left top fixed;
|
||||
background-color: #2277ad;
|
||||
background-size: auto, 100% 100%;
|
||||
}
|
||||
|
||||
.landing-filter {
|
||||
|
|
@ -1320,6 +1391,55 @@ i.toggle-icon:hover {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.landing .call-to-action i.fa {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.landing .call-to-action {
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
background: rgba(15, 131, 203, 0.6);
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.landing .announcement {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
display: block;
|
||||
background: rgba(8, 61, 95, 0.6);
|
||||
min-height: 45px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.landing .announcement .spacer {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.landing .announcement img {
|
||||
height: 45px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.landing .announcement .plus {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
color: white;
|
||||
|
||||
|
|
@ -1346,104 +1466,6 @@ i.toggle-icon:hover {
|
|||
font-size: 40px;
|
||||
}
|
||||
|
||||
.landing .header-bar .navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing .header-bar form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing .header-bar {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.landing .header-bar .user-tools a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.landing .header-bar .user-tools i {
|
||||
margin-top: 0px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.landing .header-bar .user-tools i:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.landing .navbar-links a {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.landing .navbar-links li a:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.landing .nav .dropdown-menu a {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (max-width: 971px) {
|
||||
.landing .navbar-collapse {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 48px;
|
||||
line-height: 28px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
border-top: 1px solid transparent;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.navbar-collapse.collapse {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
float: none!important;
|
||||
margin: 7.5px -15px;
|
||||
}
|
||||
|
||||
.navbar-nav>li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapse.in { display: block!important; }
|
||||
}
|
||||
|
||||
.landing .messages b {
|
||||
color: #59B2FF;
|
||||
}
|
||||
|
||||
.landing .messages h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
|
@ -1651,10 +1673,15 @@ form input.ng-valid.ng-dirty,
|
|||
font-size: 26px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border-top: 1px solid #eee;
|
||||
.footer-container, .push {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.footer-container.fixed {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.page-footer-padder {
|
||||
|
|
|
|||
Reference in a new issue