Page MenuHomeDevCentral
Files F32059124

app.css
No OneTemporary
Actions

app.css
View Options

@charset "utf-8";
/* -------------------------------------------------------------
Navigate to Nasqueron
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Author: Dereckson
Tags: Foundation, black, cold, stars, aurora
Filename: app.css
Version: 1.0
Created: 2014-01-08
Modified: 2014-01-09
Licence: Creative Commons BY 3.0
------------------------------------------------------------- */
/* -------------------------------------------------------------
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
:: Main styles
:: Backgrounds
:: Homepage content
:: Smartbar
:: Keyboard help
*/
/* -------------------------------------------------------------
Main styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* -------------------------------------------------------------
Backgrounds
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (orientation: portrait) {
body.deepspace, body.auroraborealis {
background-size: cover;
}
}
@media screen and (max-width: 400px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-400.jpg), url(/images/bg/DeepSpace-400-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 401px) and (max-width: 720px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-720.jpg), url(/images/bg/DeepSpace-720-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1280.jpg), url(/images/bg/DeepSpace-1280-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1440.jpg), url(/images/bg/DeepSpace-1440-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1441px) and (max-width: 1920px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1920.jpg), url(/images/bg/DeepSpace-1920-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1921px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-2880.jpg), url(/images/bg/DeepSpace-2880-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 400px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-400.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 401px) and (max-width: 720px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-720.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1280.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1440.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1441px) and (max-width: 1980px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1980.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1981px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-2880.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
/* -------------------------------------------------------------
Homepage content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 834px) {
.homepanel {
width: 100%;
background-color: rgba(0, 0, 0, 0.38);
position: fixed;
bottom: 0;
color: white;
padding: 1em 1em;
text-align: center;
}
.homepanel h1, .homepanel h2 {
color: white;
}
}
@media screen and (min-width: 835px) {
.homepanel {
background-color: rgba(255, 255, 255, 0.38);
color: white;
width: 746px;
position: fixed;
bottom: 88px;
left: 88px;
padding: 1em 1em;
}
.homepanel h1 {
font-size: 30pt;
color: white;
}
.homepanel h2 {
font-size: 20pt;
color: white;
}
.homepanel p {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 16pt;
font-weight: 300;
color: white;
}
}
/* -------------------------------------------------------------
Smartbar
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 720px) {
#logo {
margin: 5% auto;
width: 100%;
text-align: center;
}
#line {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}
@media screen and (min-width: 721px) {
#logo {
display: none;
}
#line {
height: 117px;
background-image: url(/images/logo-white.png);
background-repeat: no-repeat;
background-position: top left;
position: fixed;
left: 0;
width: 100%;
}
#smartbar {
background-color: rgba(0, 0, 0, 0.28);
height: 117px;
margin-left: 133px;
}
#smartbar input {
height: 53px;
margin: 0 0 0 0;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
#line {
bottom: 76px;
}
#smartbar {
padding: 30px 2em 0 153px;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
#line {
bottom: 154px;
}
#smartbar {
padding: 30px 2em 0 394px;
}
}
@media screen and (min-width: 1441px) and (max-width: 1980px) {
#line {
bottom: 250px;
}
#smartbar {
padding: 30px 2em 0 43px;
}
}
@media screen and (min-width: 1981px) {
#line {
bottom: 219px;
}
#smartbar {
padding: 30px 2em 0 43px;
}
}
@media screen and (max-height: 192px) {
#line {
bottom: 0 !important;
}
}
/* -------------------------------------------------------------
Keyboard help
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.help-underlay * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.help-underlay {
position: absolute;
background: #555;
background: rgba(0,0,0,0.5);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
transition: opacity .2s linear;
left: 0; right: 0; top: 0; bottom: 0;
}
.ie8 .help-underlay {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; /* for IE8 in IE7 mode */
filter: alpha(opacity=95); /* for IE8 */
visibility: hidden;
}
.help-modal {
position: fixed;
z-index: 99999;
left: 0; right: 0; top: 0; bottom: 0;
width: 80%;
margin: auto;
background: white;
color: #676767;
max-height: 80%;
overflow: auto;
font-family: Arial, sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
-webkit-transition: width .2s linear;
-moz-transition: width .2s linear;
-o-transition: width .2s linear;
transition: width .2s linear;
}
.help-modal-content {
padding: 0 20px;
}
.help-close {
position: absolute;
top: .4em;
right: .5em;
font-size: 1.8em;
cursor: pointer;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
.help-close:hover {
color: #000;
}
.help-modal h1 {
text-align: center;
margin: .5em;
font-size: 1.5em;
padding-bottom: .4em;
border-bottom: solid 2px #ccc;
font-weight: normal;
}
.help-modal h1 .help-key {
float: none;
line-height: 1.5;
position: relative;
bottom: 4px;
}
.help-isVisible {
opacity: 1;
visibility: visible;
height: auto;
z-index: 8888;
}
.ie8 .help-underlay.help-isVisible {
visibility: visible;
}
.help-list-wrap {
overflow: hidden;
margin: 0 auto;
-webkit-transition: width .2s linear;
-moz-transition: width .2s linear;
-o-transition: width .2s linear;
transition: width .2s linear;
}
.help-list {
list-style: none;
margin: 0;
padding: 0 0 10px 0;
overflow: hidden;
float: left;
width: 280px;
}
.help-list li {
margin-right: 40px;
}
.help-key-unit {
line-height: 1.8;
margin-right: 2em;
padding: 5px 0;
}
.help-key {
min-width: 60px;
float: left;
clear: left;
position: relative;
bottom: 2px;
}
.help-key span {
font-size: 15px;
color: #555;
display: inline-block;
padding: 0 8px;
text-align: center;
background-color: #eee;
background-repeat: repeat-x;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eee));
background-image: -webkit-linear-gradient(#f5f5f5 0%, #eee 100%);
background-image: -moz-linear-gradient(#f5f5f5 0%, #eee 100%);
background-image: -o-linear-gradient(#f5f5f5 0%, #eee 100%);
background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
}
.help-key-def {
display: inline-block;
margin-left: 1em;
}

File Metadata

Mime Type
text/plain
Expires
Mon, Jun 8, 08:04 (1 d, 4 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
3740249
Default Alt Text
app.css (10 KB)

Event Timeline

Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator