gradio/examples/css/index.css
2019-02-19 22:21:00 -08:00

115 lines
2.0 KiB
CSS

:root {
--jumbotron-padding-y: 3rem;
}
.lead{
color:white !important;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
background-image: url("https://static1.squarespace.com/static/5bf1fef3b27e396eb3c91f08/t/5c10b7b40e2e72725c2f3238/1544599520911/?format=2500w");
background-position: 10% 20%;
color:white
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
.codebox {
/* Below are styles for the codebox (not the code itself) */
border:1px solid black;
background-color:#e3f2fd;
width:600px;
overflow:auto;
padding:10px;
}
.codebox code {
/* Styles in here affect the text of the codebox */
font-size:0.9em;
/* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: bold;
}
.jumbotron .container {
max-width: 40rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
.btn-pink{
background-color: #FF6384;
color: white;
padding
}
.btn-pink:hover{
background-color: #f15d7c;
color: white;
}
/* Style all font awesome icons */
.fa {
padding: 12px;
font-size: 30px;
width: 40px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
/* Twitter */
.fa-github {
background: black;
color: white;
}
.footer {
position: static;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
padding: 0px;
}