NewTabPage/main.css
2017-12-13 19:52:21 -08:00

107 lines
1.7 KiB
CSS

html {
/* set these manually to fix background images on chrome mobile */
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: white no-repeat center center fixed;
background-size: cover;
tab-size: 4;
-moz-tab-size: 4;
}
.card-header {
background-color: #FEA63C;
color: white;
font-size: 16px;
font-weight: 600;
vertical-align: middle;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.list-group-item {
padding-top: .4rem;
padding-bottom: .4rem;
}
.card, .btn {
border: 0px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.navbar {
background: transparent !important;
}
pre {
tab-size: 4;
-moz-tab-size: 4;
background-color: rgb(245, 245, 245);
padding: 10px;
}
/* Move the navbar contents onto the same line as the toggler */
#navbarCollapse {
margin-top: -2.5rem !important;
margin-right: 50px;
}
.toggler-bg-dark {
background: rgba(0, 0, 0, 0.24);
}
.toggler-bg-light {
background: rgba(255, 255, 255, 0.24);
}
/* set the width of the main container based on element width */
@media (max-width: 34em) {
#wrapper {
width: 90%;
}
}
@media (min-width: 34em) {
#wrapper {
width: 60%;
}
}
/* change the number of columns in card-columns */
@media (min-width: 34em) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
@media (min-width: 48em) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
@media (min-width: 62em) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 75em) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}