1
0
mirror of https://github.com/danog/schema.tl.git synced 2024-12-12 17:37:25 +01:00
schema.tl/css/styles.css
2017-08-21 18:54:14 -07:00

239 lines
3.8 KiB
CSS

*, * * {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
width: 100%;
font-family: "Avenir Next", sans-serif;
background: #F5F5F5;
color: #212121;
}
header {
width: 100%;
background: #2196F3;
padding: 20px;
}
.header-inner {
max-width: 1100px;
margin: 0 auto;
padding: 5px;
}
.header-inner a {
color: white;
text-decoration: none;
margin-right: 10px;
}
.header-inner a.home {
font-weight: bold;
margin-right: 15px;
color: white;
}
.header-right {
display: inline-block;
float: right;
}
.header-search {
outline: none;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 5px;
padding: 5px;
position: relative;
font-family: "Avenir Next", sans-serif;
width: 200px;
bottom: 2px;
}
/* index */
.hero {
width: 100%;
text-align: center;
background: #2196F3;
color: white;
padding: 100px 0;
}
.hero-title {
font-size: 1.6em;
margin-bottom: 40px;
}
.hero-search {
border: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border-radius: 10px;
padding: 10px;
padding-left: 40px;
outline: none;
font-size: 1.3em;
width: 500px;
background-image: url(/img/ic_search_black_24dp_1x.png);
background-size: 20px 20px;
background-position: 13px center;
background-repeat: no-repeat;
transition: box-shadow .5s;
font-family: "Avenir Next", sans-serif;
}
.hero-search:focus {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.hero-input {
position: relative;
width: 500px;
margin: 0 auto;
z-index: 10;
}
.hero-typeahead {
width: 500px;
margin: 0 auto;
position: absolute;
top: calc(100% - 10px);
left: 0;
max-height: 300px;
background: white;
color: #212121;
overflow: auto;
text-align: left;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 4px 3px rgba(0,0,0,0.23);
border-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
z-index: 5;
}
.hero-typeahead .typeahead-result {
padding: 15px;
cursor: pointer;
}
.hero-typeahead .typeahead-result.selected {
background: #E0E0E0;
}
.hero-typeahead .typeahead-result::before {
content: "";
padding: 2px;
font-size: 0.9em;
border-radius: 3px;
height: 20px;
width: 20px;
text-align: center;
display: inline-block;
color: white;
margin-right: 5px;
position: relative;
bottom: 1px;
}
.hero-typeahead .typeahead-result.constructor::before {
background: #ef5350;
content: "C";
}
.hero-typeahead .typeahead-result.method::before {
background: #66BB6A;
content: "M";
}
.hero-typeahead .typeahead-result.type::before {
background: #29B6F6;
content: "T";
}
.index-listing {
max-width: 900px;
margin: 0 auto;
}
.index-listing h2 {
text-transform: uppercase;
font-size: 1.1em;
color: #424242;
}
/* method/constructor pages */
.content-inner {
max-width: 1100px;
margin: 0 auto;
margin-top: 10px;
}
h1.title {
font-family: "Fira Code", monospace;
}
h1.title::before {
content: "";
padding: 2px;
font-size: 0.7em;
border-radius: 3px;
height: 30px;
width: 30px;
text-align: center;
display: inline-block;
color: white;
margin-right: 10px;
position: relative;
bottom: 2px;
font-weight: normal;
font-family: "Avenir Next", sans-serif;
}
h1.title.title-constructor::before {
background: #ef5350;
content: "C";
}
h1.title.title-method::before {
background: #66BB6A;
content: "M";
}
h1.title.title-type::before {
background: #29B6F6;
content: "T";
}
table{
width: 100%;
}
th{
text-align: left;
}
td{
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #BDBDBD;
}
th{
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
}
a {
cursor: pointer;
color: #1E88E5;
text-decoration: none;
}
a:active {
color: #1976D2;
}