The UI component of the AiteStory project.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
body { padding: 0; margin: 0;
font-size: 1.25em;
background-color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
#content-wrapper { position: absolute; left: 0; top: 0; width: 100%; min-height: 100%; }
/* Main Body */ main { position: absolute; top: 0; left: 18ch; right: 0; min-height: 100%;
padding: 0; margin: 0;
background-color: rgba(0, 0, 0, 0.50); }
article { width: 80ch; max-width: 95%; margin-left: auto; margin-right: auto; }
/* Front Page */ .menu-item { background-color: #222; margin-top: 0.5em; }
.mi-icon { display: inline-block; width: 2ch; height: 100%; text-align: center;
font-size: 2em;
background-color: #333; color: #ccc; }
.mi-body { display: inline-block; width: calc(95% - 5ch);
color: #777; }
.mi-title { display: block; color: #ccc; } .mi-meta { font-size: 0.50em; padding-top: 0.25em; }
.mi-segment { display: inline-block; padding-right: 1ch; }
.mi-tag { display: inline-block;
margin-right: 0.5ch; padding: 0.05em 0.50em; border-radius: 12px;
color: #ccc; border: 0.5px solid; background-color: #333; border-color: #777; }
.ttype-special { color: #000; background-color: #194; border-color: #000; }
.ttype-character { color: #2ad; border-color: #2ad; }
.ttype-location { color: #d93; border-color: #d93; } /* Side Menu */ nav { position: fixed; left: 0; top: 0; width: 18ch; height: 100%;
background-color: #222; color: #aaa;
padding: 0; margin: 0;
overflow-y: auto; }
nav h1 { text-align: center; }
nav a { display: block; cursor: pointer; }
nav ul { display: block; padding: 0; margin: 0;
margin-bottom: 0.5em; }
nav li { list-style: none; padding: 0.1em; padding-left: 1ch; }
nav li:hover { color: #ccc; background-color: #333; }
nav .mg-icon { display: inline-block; text-align: center; width: 2ch; padding: 0em 0.5ch; }
nav .mg-label { display: inline-block;
padding: 0 0.5ch;
color: #555; }
nav li:hover .mg-label { color: #777; }
@media screen and (max-width: 900px) { nav { width: 4ch; }
nav h1 { display: none; }
nav li { padding-left: 0; text-align: center; }
nav .mg-label { display: none; }
nav .mg-icon { width: 3ch; margin-left: 0; padding: 0; }
main { left: 4ch; }
.mi-icon { font-size: 2.55em; }
.mis-tags { display: block; padding-top: 0.25em; } }
|