a4d8abb631
Use CSS3 Animation for the "loading icon" blinking and move the definition of the loading icon to CSS as well. CSS3 Animations are supported by IE10, Firefox and using the -webkit prefix by Chrome and Safari. I've dropped the usage of element.classList in favour of supporting refreshing/ article downloading in IE9 (again). The classList stuff isn't necessarily needed, as the elements in question only get one or no class assigned. I've dropped no longer supported css options like: the appearance option isn't supported by any browser, the -webkit-appearance doesn't change anything visible. -webkit-font-smoothing support was dropped in chrome 22 and font-smoothing isn't specified anywhere.
183 lines
2.4 KiB
CSS
183 lines
2.4 KiB
CSS
@import url("../../../assets/css/app.css");
|
|
|
|
@font-face {
|
|
font-family: roboto;
|
|
src: url("../fonts/Roboto-Light.ttf");
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
background: #222;
|
|
color: #efefef;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
color: #999;
|
|
}
|
|
|
|
a {
|
|
color: #aaa;
|
|
text-decoration : none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #eee;
|
|
}
|
|
|
|
.items a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.items #current-item {
|
|
border: 1px solid #be0000;
|
|
}
|
|
|
|
pre, code {
|
|
color: #fff;
|
|
background: #555;
|
|
border-color: #888;
|
|
}
|
|
|
|
.page-header h2 {
|
|
border-bottom: 1px dotted #555;
|
|
}
|
|
|
|
.items article {
|
|
border: 1px dotted #333;
|
|
background-color: #222;
|
|
margin-top: 20px
|
|
}
|
|
|
|
.items h2 {
|
|
font-weight : normal;
|
|
}
|
|
|
|
.items article:hover .preview,
|
|
.items #current-item .preview {
|
|
color: #666;
|
|
}
|
|
|
|
#item-content {
|
|
text-align: justify;
|
|
font-family: roboto;
|
|
}
|
|
|
|
.items .preview {
|
|
font-family: roboto;
|
|
text-align: justify;
|
|
color: #aaa;
|
|
}
|
|
|
|
.items a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.item h1 a {
|
|
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
color: #eee;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.item h1 a:visited {
|
|
color: #888;
|
|
}
|
|
|
|
.infos {
|
|
color: #777;
|
|
}
|
|
|
|
.item .infos a {
|
|
color: #666;
|
|
}
|
|
|
|
.item {
|
|
color: #666;
|
|
}
|
|
|
|
.item nav span,
|
|
.item nav a,
|
|
.item nav a:visited {
|
|
color: #bbb;
|
|
}
|
|
|
|
blockquote {
|
|
color: #999;
|
|
font-family: roboto;
|
|
}
|
|
|
|
blockquote + p {
|
|
color: #999;
|
|
}
|
|
|
|
nav .active a {
|
|
color: #ccc;
|
|
}
|
|
|
|
.logo {
|
|
color: #efefef;
|
|
}
|
|
|
|
.alert,
|
|
.alert-success,
|
|
.alert-error,
|
|
.alert-info,
|
|
.alert-normal {
|
|
color: #efefef;
|
|
background-color: #333;
|
|
border-color: #444;
|
|
}
|
|
|
|
input[type="email"],
|
|
input[type="tel"],
|
|
input[type="password"],
|
|
input[type="text"] {
|
|
border: 1px solid #333;
|
|
background: #111;
|
|
color: #ccc;
|
|
}
|
|
|
|
input[type="email"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="text"]:focus,
|
|
textarea:focus {
|
|
color: #efefef;
|
|
border-color: rgba(82, 168, 236, 0.8);
|
|
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
::-ms-input-placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
::-moz-placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
.btn-red,
|
|
.btn-blue {
|
|
border-color: #444;
|
|
background: #333;
|
|
color: #efefef;
|
|
}
|
|
|
|
.btn-red:hover,
|
|
.btn-red:focus,
|
|
.btn-blue:hover,
|
|
.btn-blue:focus {
|
|
border-color: #888;
|
|
background: #555;
|
|
}
|
|
|
|
.menu-more a {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.loading-icon:before {
|
|
color: #fff;
|
|
} |