118 lines
2.9 KiB
CSS
118 lines
2.9 KiB
CSS
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 150%;
|
|
}
|
|
.brand{
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
letter-spacing: 1px;
|
|
}
|
|
.nav > ul> li {
|
|
list-style-type: none;
|
|
}
|
|
.nav > ul> li > a {
|
|
text-decoration: none;
|
|
}
|
|
/* navbar */
|
|
.navbar-default {
|
|
background-color: #2C3963;
|
|
border-bottom: 2px solid white;
|
|
}
|
|
/* Title */
|
|
.navbar-default .navbar-brand {
|
|
color: white;
|
|
}
|
|
.navbar-default .navbar-brand:hover,
|
|
.navbar-default .navbar-brand:focus {
|
|
color: #5E5E5E;
|
|
}
|
|
/* Link */
|
|
.navbar-default .navbar-nav > li > a {
|
|
color: rgba(255,255,255,.8);
|
|
}
|
|
.navbar-default .navbar-nav > li > a:hover,
|
|
.navbar-default .navbar-nav > li > a:focus {
|
|
color: white;
|
|
}
|
|
.navbar-default .navbar-nav > .active > a,
|
|
.navbar-default .navbar-nav > .active > a:hover,
|
|
.navbar-default .navbar-nav > .active > a:focus {
|
|
color: white;
|
|
background-color: #2C3963;
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
/* Custom coloring */
|
|
.btn-primary{
|
|
background-color: #2C3963;
|
|
border-color: #2F3D68;
|
|
}
|
|
|
|
.panel-warning > .panel-heading{
|
|
background-color: #2C3963;
|
|
border-color: #2C3963;
|
|
color: white;
|
|
}
|
|
.panel-warning{
|
|
border-color: #2C3963;
|
|
}
|
|
|
|
/* Homepage */
|
|
.jumbotron.vertical-center {
|
|
margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
|
|
background-color: #2C3963;
|
|
}
|
|
.vertical-center {
|
|
min-height: 100%; /* Fallback for vh unit */
|
|
min-height: 100vh; /* You might also want to use
|
|
'height' property instead.
|
|
|
|
Note that for percentage values of
|
|
'height' or 'min-height' properties,
|
|
the 'height' of the parent element
|
|
should be specified explicitly.
|
|
|
|
In this case the parent of '.vertical-center'
|
|
is the <body> element */
|
|
|
|
/* Make it a flex container */
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
/* Align the bootstrap's container vertically */
|
|
-webkit-box-align : center;
|
|
-webkit-align-items : center;
|
|
-moz-box-align : center;
|
|
-ms-flex-align : center;
|
|
align-items : center;
|
|
|
|
/* In legacy web browsers such as Firefox 9
|
|
we need to specify the width of the flex container */
|
|
width: 100%;
|
|
|
|
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
|
|
hence the bootstrap's container won't be aligned to the center anymore.
|
|
|
|
Therefore, we should use the following declarations to get it centered again */
|
|
-webkit-box-pack : center;
|
|
-moz-box-pack : center;
|
|
-ms-flex-pack : center;
|
|
-webkit-justify-content : center;
|
|
justify-content : center;
|
|
}
|
|
.welcome {
|
|
color: white;
|
|
}
|
|
.subtitle {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|