forked from rc/aircox
merge aircox and aircox_instance
This commit is contained in:
bkfox
357
aircox_cms/static/aircox_cms/css/layout.css
Normal file
357
aircox_cms/static/aircox_cms/css/layout.css
Normal file
@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Define rules for the default layouts, and some useful classes
|
||||
*/
|
||||
body {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: 0.4em 0em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
|
||||
/** classes **/
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
max-width: 2em;
|
||||
max-height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.small_icon {
|
||||
max-height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.flex_row {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex_row > .flex_item,
|
||||
.flex_column > .flex_item {
|
||||
-webkit-flex: auto;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
|
||||
/** content: menus **/
|
||||
nav.menu {
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.menu.top {
|
||||
padding: 0.2em;
|
||||
height: 2.5em;
|
||||
margin-bottom: 1em;
|
||||
background-color: white;
|
||||
box-shadow: 0em 0em 0.2em black;
|
||||
}
|
||||
.menu.top * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.menu.top > section {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu.top a {
|
||||
display: inline-block;
|
||||
margin: 0.2em 1em;
|
||||
}
|
||||
|
||||
.page_left, .page_right {
|
||||
max-width: 16em;
|
||||
}
|
||||
|
||||
.page_left > section,
|
||||
.page_right > section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/** content: list & items **/
|
||||
.list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.list {
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.list_item {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
|
||||
.list_item > *:not(:last-child) {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.list_item img.cover.big {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list_item img.cover.small {
|
||||
margin-right: 0.4em;
|
||||
border-radius: 0.4em;
|
||||
float: left;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.list_item > * {
|
||||
margin: 0em 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.list nav {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
/** content: date list **/
|
||||
.date_list nav {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.date_list nav a {
|
||||
display: inline-block;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.date_list nav a[selected] {
|
||||
color: #007EDF;
|
||||
border-bottom: 0.2em #007EDF dotted;
|
||||
}
|
||||
|
||||
.date_list ul:not([selected]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.date_list ul:target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date_list h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.date_list_item .cover.small {
|
||||
width: 64px;
|
||||
margin: 0.4em;
|
||||
}
|
||||
|
||||
.date_list_item h3 {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
|
||||
/** content: comments **/
|
||||
.comments form input:not([type=checkbox]),
|
||||
.comments form textarea {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-height: 6em;
|
||||
margin: 0.2em 0em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.comments form input[type=checkbox],
|
||||
.comments form button[type=submit] {
|
||||
vertical-align:bottom;
|
||||
margin: 0.2em 0em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comments form button[type=submit] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.comments form #show_more:not(:checked) ~ .extra {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comments label[for="show_more"] {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.comments ul {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.comment {
|
||||
list-style: none;
|
||||
border: 1px #818181 dotted;
|
||||
margin: 0.4em 0em;
|
||||
}
|
||||
|
||||
.comment .metadata {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.comment time {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/** content: player **/
|
||||
.player {
|
||||
}
|
||||
|
||||
.player:not([seekable]) > .controls > .progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.player .controls {
|
||||
margin-top: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
.player .controls > * {
|
||||
margin: 0em 0.2em;
|
||||
}
|
||||
|
||||
.player .controls .single {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player .controls .single + label {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
padding: 0.1em;
|
||||
width: 1.5em;
|
||||
height: 1.0em;
|
||||
text-align: center;
|
||||
box-shadow: inset 0em 0em 0.1em #818181;
|
||||
}
|
||||
|
||||
.player .controls .single:not(:checked) + label {
|
||||
border-left: 2px #818181 solid;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.player .controls .single:checked + label {
|
||||
border-right: 2px #818181 solid;
|
||||
}
|
||||
|
||||
.player .playlist .item {
|
||||
margin: 0em;
|
||||
padding: 0.2em 0.4em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.player .playlist .item:hover {
|
||||
color: #007EDF;
|
||||
}
|
||||
|
||||
.player .item > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.player .playlist .item .actions {
|
||||
display: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.player .playlist .item:hover .actions {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.player .item[selected] {
|
||||
border-left: 1px #007EDF solid;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.player .item:not([selected]) {
|
||||
}
|
||||
|
||||
.player .button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 2.0em;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.player .button > img {
|
||||
max-height: 2.0em;
|
||||
}
|
||||
|
||||
|
||||
.player:not([state]) .item[selected] .button > img:not(.play),
|
||||
.player[state="paused"] .item[selected] .button > img:not(.play),
|
||||
.player[state="playing"] .item[selected] .button > img:not(.pause),
|
||||
.player[state="loading"] .item[selected] .button > img:not(.loading)
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player .item:not([selected]) .button > img.play {
|
||||
display: block;
|
||||
}
|
||||
.player .item:not([selected]) .button > img:not(.play) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
main .player .actions .action:not(.add),
|
||||
.section_player .actions .action.add,
|
||||
.player .list_item.live:hover .actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/** content: page **/
|
||||
main .body ~ section:not(.comments) {
|
||||
width: calc(50% - 1em);
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.meta > .share {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
.meta .author .summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/** content: others **/
|
||||
.list_item.track .title {
|
||||
display: inline;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user