Version 5.1 - All the GraphQL #32

Closed
timw4mail wants to merge 1160 commits from develop into master
4 changed files with 842 additions and 959 deletions
Showing only changes of commit 9c8df03c36 - Show all commits

View File

@ -1,12 +1,18 @@
template, :root {
[hidden="hidden"], --link-shadow: 1px 1px 1px #000;
.media[hidden] { --shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
display: none; --title-overlay: rgba(0, 0, 0, 0.45);
--text-color: #ffffff;
--normal-padding: 0.25em 0.125em;
--link-hover-color: #7d12db;
--edit-link-hover-color: #db7d12;
--edit-link-color: #12db18;
--radius: 5px;
} }
body { template, [hidden="hidden"], .media[hidden] {display:none}
margin: 0.5em;
} body {margin: 0.5em;}
button { button {
background:rgba(255,255,255,0.65); background:rgba(255,255,255,0.65);
@ -23,8 +29,7 @@ td {
padding:1rem; padding:1rem;
} }
thead td, thead td, thead th {
thead th {
padding:0.5em; padding:0.5em;
padding:0.5rem; padding:0.5rem;
} }
@ -37,9 +42,8 @@ tbody > tr:nth-child(odd) {
background: #ddd; background: #ddd;
} }
a:hover, a:hover, a:active {
a:active { color: var(--link-hover-color)
color: #7d12db;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
@ -47,105 +51,38 @@ a:active {
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.bracketed { .bracketed {
color: #12db18; color: var(--edit-link-color);
}
.bracketed, h1 a {
text-shadow: var(--link-shadow);
}
.bracketed:before {content: '[\00a0'}
.bracketed:after {content: '\00a0]'}
.bracketed:hover, .bracketed:active {
color: var(--edit-link-hover-color)
} }
.bracketed, .grow-1 {-webkit-box-flex: 1;flex-grow: 1}
h1 a { .flex-wrap {flex-wrap: wrap}
text-shadow: 1px 1px 1px #000; .flex-no-wrap {flex-wrap: nowrap}
} .flex-align-end {-webkit-box-align: end;align-items: flex-end}
.flex-align-space-around {align-content: space-around}
.bracketed:before { .flex-justify-space-around {justify-content: space-around}
content: '[\00a0'; .flex-self-center {align-self:center}
} .flex {display: -webkit-box;display: flex}
.bracketed:after {
content: '\00a0]';
}
.bracketed:hover,
.bracketed:active {
color: #db7d12;
}
.grow-1 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-no-wrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-align-end {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.flex-align-space-around {
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.flex-justify-space-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.flex-self-center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.small-font { .small-font {
font-size:1.6rem; font-size:1.6rem;
} }
.justify { .justify {text-align:justify}
text-align: justify; .align_center {text-align:center}
} .align_left {text-align:left}
.align_right {text-align:right}
.align_center { .valign_top {vertical-align:top}
text-align: center;
}
.align_left { .no_border {border:none}
text-align: left;
}
.align_right {
text-align: right;
}
.valign_top {
vertical-align: top;
}
.no_border {
border: none;
}
.media-wrap { .media-wrap {
text-align:center; text-align:center;
@ -158,25 +95,22 @@ h1 a {
color:#fff; color:#fff;
} }
.danger:hover, .danger:hover, .danger:active {
.danger:active {
background-color: #924949; background-color: #924949;
border-color: #ff4136; border-color: #ff4136;
color:#fff; color:#fff;
} }
.user-btn { .user-btn {
border-color: #12db18; border-color: var(--edit-link-color);
color: #12db18; color: var(--edit-link-color);
text-shadow: 1px 1px 1px #000; text-shadow: var(--link-shadow);
padding:0 0.5em; padding:0 0.5em;
padding:0 0.5rem; padding:0 0.5rem;
} }
.user-btn:hover, .user-btn:active {
.user-btn:hover, border-color: var(--edit-link-hover-color);
.user-btn:active { background-color: var(--edit-link-hover-color);
border-color: #db7d12;
background-color: #db7d12;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
@ -230,7 +164,6 @@ h1 a {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
@ -242,7 +175,6 @@ h1 a {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
@ -254,7 +186,6 @@ h1 a {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
@ -266,7 +197,6 @@ h1 a {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
@ -278,7 +208,6 @@ h1 a {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
@ -290,7 +219,6 @@ h1 a {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
} }
100% { 100% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
@ -300,31 +228,24 @@ h1 a {
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Table sorting and form styles Table sorting and form styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.sorting, .sorting,
.sorting_asc, .sorting_asc,
.sorting_desc { .sorting_desc {
vertical-align:text-bottom; vertical-align:text-bottom;
} }
.sorting::before { .sorting::before {
content: " ↕\00a0"; content: " ↕\00a0";
} }
.sorting_asc::before { .sorting_asc::before {
content: " ↑\00a0"; content: " ↑\00a0";
} }
.sorting_desc::before { .sorting_desc::before {
content: " ↓\00a0"; content: " ↓\00a0";
} }
.form { .form { width:100%; }
width: 100%;
}
.form thead th, .form thead th, .form thead tr {
.form thead tr {
background: inherit; background: inherit;
border:0; border:0;
} }
@ -334,7 +255,6 @@ h1 a {
min-width:25px; min-width:25px;
max-width:30%; max-width:30%;
} }
.form tr > td:nth-child(even) { .form tr > td:nth-child(even) {
text-align:left; text-align:left;
width:70%; width:70%;
@ -343,10 +263,7 @@ h1 a {
.invisible tbody > tr:nth-child(odd) { .invisible tbody > tr:nth-child(odd) {
background: inherit; background: inherit;
} }
.invisible tr, .invisible td, .invisible th {
.invisible tr,
.invisible td,
.invisible th {
border:0; border:0;
} }
@ -399,9 +316,8 @@ h1 a {
border:1px solid #1f8454; border:1px solid #1f8454;
background: #70dda9; background: #70dda9;
} }
.message.success .icon::after { .message.success .icon::after {
content: '✔'; content: '✔'
} }
.message.info{ .message.info{
@ -423,8 +339,8 @@ h1 a {
display:inline-block; display:inline-block;
text-align:center; text-align:center;
width:220px; width:220px;
height: 319px; height:311px;
margin: 0.25em 0.125em; margin: var(--normal-padding);
} }
.media .edit_buttons > button { .media .edit_buttons > button {
@ -435,15 +351,14 @@ h1 a {
.media_metadata > div, .media_metadata > div,
.medium_metadata > div, .medium_metadata > div,
.row { .row {
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); text-shadow: var(--shadow);
background: rgba(0, 0, 0, 0.45); background: var(--title-overlay);
color: #ffffff; color: var(--text-color);
padding: 0.25em 0.125em; padding: var(--normal-padding);
text-align:right; text-align:right;
} }
.media_type, .media_type, .age_rating {
.age_rating {
text-align:left; text-align:left;
} }
@ -467,14 +382,16 @@ h1 a {
.media:hover > .name, .media:hover > .name,
.media:hover > .media_metadata > div, .media:hover > .media_metadata > div,
.media:hover > .medium_metadata > div, .media:hover > .medium_metadata > div,
.media:hover > .table .row { .media:hover > .table .row
{
-webkit-transition: .25s ease; -webkit-transition: .25s ease;
transition: .25s ease; transition: .25s ease;
background:rgba(0,0,0,0.75); background:rgba(0,0,0,0.75);
} }
.media:hover > button[hidden], .media:hover > button[hidden],
.media:hover > .edit_buttons[hidden] { .media:hover > .edit_buttons[hidden]
{
-webkit-transition: .25s ease; -webkit-transition: .25s ease;
transition: .25s ease; transition: .25s ease;
display:block; display:block;
@ -483,15 +400,15 @@ h1 a {
.media > .name > a { .media > .name > a {
background:none; background:none;
color:#fff; color:#fff;
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); text-shadow: var(--shadow);
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Anime-list-specific styles Anime-list-specific styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.anime .name, .manga .name {
.anime .name,
.manga .name {
text-align:center; text-align:center;
width:100%; width:100%;
padding:0.5em 0.25em; padding:0.5em 0.25em;
@ -508,43 +425,32 @@ h1 a {
text-align:center; text-align:center;
} }
.anime .table,
.manga .table { .anime .table, .manga .table {
position:absolute; position:absolute;
bottom:0; bottom:0;
left:0; left:0;
width:100%; width:100%;
} }
.anime .row, .anime .row, .manga .row {
.manga .row {
width:100%; width:100%;
background: rgba(0, 0, 0, 0.45); background: var(--title-overlay);
display: -webkit-box; display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around; align-content: space-around;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around; justify-content: space-around;
text-align:center; text-align:center;
padding:0 inherit; padding:0 inherit;
} }
.anime .row > span, .anime .row > span, .manga .row > span {
.manga .row > span {
text-align:left; text-align:left;
} }
.anime .row > div, .anime .row > div, .manga .row > div {
.manga .row > div {
font-size:0.8em; font-size:0.8em;
display:flex-item; display:flex-item;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self:center; align-self:center;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
@ -561,15 +467,13 @@ h1 a {
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Manga-list-specific styles Manga-list-specific styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.manga .row { .manga .row {
padding:1px; padding:1px;
} }
.manga .media { .manga .media {
border:1px solid #ddd; border:1px solid #ddd;
width: 200px; height:310px;
height: 290px;
margin:0.25em; margin:0.25em;
} }
@ -581,10 +485,10 @@ h1 a {
left: calc(50% - 95px); left: calc(50% - 95px);
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Search page styles Search page styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.media.search > .name { .media.search > .name {
background-color:#555; background-color:#555;
background-color: rgba(000,000,000,0.35); background-color: rgba(000,000,000,0.35);
@ -619,9 +523,7 @@ h1 a {
#series_list article.media { #series_list article.media {
position:relative; position:relative;
} }
#series_list .name, #series_list .name label {
#series_list .name,
#series_list .name label {
position:absolute; position:absolute;
display:block; display:block;
top:0; top:0;
@ -633,7 +535,6 @@ h1 a {
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
Details page styles Details page styles
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
.details { .details {
margin: 1.5rem auto 0 auto; margin: 1.5rem auto 0 auto;
max-width:93rem; max-width:93rem;
@ -657,7 +558,6 @@ h1 a {
.details table { .details table {
max-width:300px; max-width:300px;
} }
.details td { .details td {
padding:0 1.5rem; padding:0 1.5rem;
} }
@ -671,7 +571,6 @@ h1 a {
white-space:nowrap; white-space:nowrap;
text-align:right; text-align:right;
} }
.details td:nth-child(even) { .details td:nth-child(even) {
text-align:left; text-align:left;
} }

View File

@ -296,7 +296,7 @@ a:hover, a:active {
display:inline-block; display:inline-block;
text-align:center; text-align:center;
width:220px; width:220px;
height:319px; height:311px;
margin: var(--normal-padding); margin: var(--normal-padding);
} }
@ -427,8 +427,7 @@ a:hover, a:active {
.manga .media { .manga .media {
border:1px solid #ddd; border:1px solid #ddd;
width:200px; height:310px;
height:290px;
margin:0.25em; margin:0.25em;
} }

View File

@ -1,45 +1,52 @@
:root { :root
{
--default-font-list:'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
-ms-text-size-adjust:100%; -ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%; -webkit-text-size-adjust:100%;
box-sizing:border-box; box-sizing:border-box;
cursor:default; cursor:default;
font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; font-family:var(--default-font-list);
line-height:1.4; line-height:1.4;
overflow-y:scroll; overflow-y:scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust:100%; text-size-adjust:100%;
scroll-behavior: smooth;
} }
audio:not([controls]) { audio:not([controls])
{
display:none; display:none;
} }
details { details
{
display:block; display:block;
} }
input[type=search] { input[type=search]
{
-webkit-appearance:textfield; -webkit-appearance:textfield;
} }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration
input[type=search]::-webkit-search-decoration { {
-webkit-appearance:none; -webkit-appearance:none;
} }
main { main
{
display:block; display:block;
margin:0 auto; margin:0 auto;
padding:0 1.6em 1.6em; padding:0 1.6em 1.6em;
padding:0 1.6rem 1.6rem; padding:0 1.6rem 1.6rem;
} }
summary { summary
{
display:block; display:block;
} }
pre { pre
{
background:#efefef; background:#efefef;
color:#444; color:#444;
display:block; display:block;
@ -55,24 +62,29 @@ pre {
word-wrap:break-word; word-wrap:break-word;
} }
progress { progress
{
display:inline-block; display:inline-block;
} }
small { small
{
color:#777; color:#777;
font-size:75%; font-size:75%;
} }
big { big
{
font-size:125%; font-size:125%;
} }
template { template
{
display:none; display:none;
} }
textarea { textarea
{
border:.1rem solid #ccc; border:.1rem solid #ccc;
border-radius:0; border-radius:0;
display:block; display:block;
@ -83,59 +95,53 @@ textarea {
vertical-align:middle; vertical-align:middle;
} }
[hidden] { [hidden]
{
display:none; display:none;
} }
[unselectable] { [unselectable]
-moz-user-select: none; {
-ms-user-select: none;
-webkit-user-select:none; -webkit-user-select:none;
user-select:none; user-select:none;
} }
*, *,::before,::after
::before, {
::after {
border-style:solid; border-style:solid;
border-width:0; border-width:0;
box-sizing:inherit; box-sizing:inherit;
} }
* { *
{
font-size:inherit; font-size:inherit;
line-height:inherit; line-height:inherit;
margin:0; margin:0;
padding:0; padding:0;
} }
::before, ::before,::after
::after { {
text-decoration:inherit; text-decoration:inherit;
vertical-align:inherit; vertical-align:inherit;
} }
a { a
{
-webkit-transition:.25s ease; -webkit-transition:.25s ease;
color:#1271db; color:#1271db;
text-decoration:none; text-decoration:none;
-webkit-transition: .25s ease;
transition:.25s ease; transition:.25s ease;
} }
audio, audio,canvas,iframe,img,svg,video
canvas, {
iframe,
img,
svg,
video {
vertical-align:middle; vertical-align:middle;
} }
button, button,input,select,textarea
input, {
select,
textarea {
border:.1rem solid #ccc; border:.1rem solid #ccc;
color:inherit; color:inherit;
font-family:inherit; font-family:inherit;
@ -144,58 +150,53 @@ textarea {
min-height:1.4em; min-height:1.4em;
} }
code, code,kbd,pre,samp
kbd, {
pre,
samp {
font-family:Menlo, Monaco, Consolas, 'Courier New', monospace, monospace; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace, monospace;
} }
table { table
{
border-collapse:collapse; border-collapse:collapse;
border-spacing:0; border-spacing:0;
margin-bottom:1.6rem; margin-bottom:1.6rem;
} }
::-moz-selection { ::selection
{
background-color:#b3d4fc; background-color:#b3d4fc;
text-shadow:none; text-shadow:none;
} }
::selection { button::-moz-focus-inner
background-color: #b3d4fc; {
text-shadow: none;
}
button::-moz-focus-inner {
border:0; border:0;
} }
body { body
{
color:#444; color:#444;
font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; font-family:var(--default-font-list);
font-size:1.6rem; font-size:1.6rem;
font-style:normal; font-style:normal;
font-weight:400; font-weight:400;
padding:0; padding:0;
} }
p { p
{
margin:0 0 1.6rem; margin:0 0 1.6rem;
} }
h1, h1,h2,h3,h4,h5,h6
h2, {
h3, font-family:Lato, var(--default-font-list);
h4,
h5,
h6 {
font-family: Lato, 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif;
margin:2em 0 1.6em; margin:2em 0 1.6em;
margin:2rem 0 1.6rem; margin:2rem 0 1.6rem;
} }
h1 { h1
{
border-bottom:.1rem solid rgba(0,0,0,0.2); border-bottom:.1rem solid rgba(0,0,0,0.2);
font-size:3.6em; font-size:3.6em;
font-size:3.6rem; font-size:3.6rem;
@ -203,14 +204,16 @@ h1 {
font-weight:500; font-weight:500;
} }
h2 { h2
{
font-size:3em; font-size:3em;
font-size:3rem; font-size:3rem;
font-style:normal; font-style:normal;
font-weight:500; font-weight:500;
} }
h3 { h3
{
font-size:2.4em; font-size:2.4em;
font-size:2.4rem; font-size:2.4rem;
font-style:normal; font-style:normal;
@ -218,7 +221,8 @@ h3 {
margin:1.6rem 0 .4rem; margin:1.6rem 0 .4rem;
} }
h4 { h4
{
font-size:1.8em; font-size:1.8em;
font-size:1.8rem; font-size:1.8rem;
font-style:normal; font-style:normal;
@ -226,7 +230,8 @@ h4 {
margin:1.6rem 0 .4rem; margin:1.6rem 0 .4rem;
} }
h5 { h5
{
font-size:1.6em; font-size:1.6em;
font-size:1.6rem; font-size:1.6rem;
font-style:normal; font-style:normal;
@ -234,7 +239,8 @@ h5 {
margin:1.6rem 0 .4rem; margin:1.6rem 0 .4rem;
} }
h6 { h6
{
color:#777; color:#777;
font-size:1.4em; font-size:1.4em;
font-size:1.4rem; font-size:1.4rem;
@ -243,7 +249,8 @@ h6 {
margin:1.6rem 0 .4rem; margin:1.6rem 0 .4rem;
} }
code { code
{
background:#efefef; background:#efefef;
color:#444; color:#444;
font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;
@ -252,26 +259,29 @@ code {
word-wrap:break-word; word-wrap:break-word;
} }
a:hover, a:hover,a:focus
a:focus { {
text-decoration:none; text-decoration:none;
} }
dl { dl
{
margin-bottom:1.6rem; margin-bottom:1.6rem;
} }
dd { dd
{
margin-left:4rem; margin-left:4rem;
} }
ul, ul,ol
ol { {
margin-bottom:.8rem; margin-bottom:.8rem;
padding-left:2rem; padding-left:2rem;
} }
blockquote { blockquote
{
border-left:.2rem solid #1271db; border-left:.2rem solid #1271db;
font-family:Georgia, Times, 'Times New Roman', serif; font-family:Georgia, Times, 'Times New Roman', serif;
font-style:italic; font-style:italic;
@ -279,29 +289,26 @@ blockquote {
padding-left:1.6rem; padding-left:1.6rem;
} }
figcaption { figcaption
{
font-family:Georgia, Times, 'Times New Roman', serif; font-family:Georgia, Times, 'Times New Roman', serif;
} }
html { html
{
font-size:62.5%; font-size:62.5%;
} }
main, main,header,footer,article,section,aside,details,summary
header, {
footer,
article,
section,
aside,
details,
summary {
display:block; display:block;
height:auto; height:auto;
margin:0 auto; margin:0 auto;
width:100%; width:100%;
} }
footer { footer
{
border-top:.1rem solid rgba(0,0,0,0.2); border-top:.1rem solid rgba(0,0,0,0.2);
clear:both; clear:both;
display:inline-block; display:inline-block;
@ -311,34 +318,23 @@ footer {
text-align:center; text-align:center;
} }
hr { hr
{
border-top:.1rem solid rgba(0,0,0,0.2); border-top:.1rem solid rgba(0,0,0,0.2);
display:block; display:block;
margin-bottom:1.6rem; margin-bottom:1.6rem;
width:100%; width:100%;
} }
img { img
{
height:auto; height:auto;
max-width:100%; max-width:100%;
vertical-align:baseline; vertical-align:baseline;
} }
input[type=text], input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=month],input[type=time],input[type=datetime],input[type=datetime-local],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=color],select
input[type=password], {
input[type=email],
input[type=url],
input[type=date],
input[type=month],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=week],
input[type=number],
input[type=search],
input[type=tel],
input[type=color],
select {
border:.1rem solid #ccc; border:.1rem solid #ccc;
border-radius:0; border-radius:0;
display:inline-block; display:inline-block;
@ -346,7 +342,8 @@ select {
vertical-align:middle; vertical-align:middle;
} }
input:not([type]) { input:not([type])
{
-webkit-appearance:none; -webkit-appearance:none;
background-clip:padding-box; background-clip:padding-box;
background-color:#fff; background-color:#fff;
@ -358,112 +355,88 @@ input:not([type]) {
text-align:left; text-align:left;
} }
input[type=color] { input[type=color]
{
padding:.8rem 1.6rem; padding:.8rem 1.6rem;
} }
input[type=text]:focus, input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=week]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus,select:focus,textarea:focus
input[type=password]:focus, {
input[type=email]:focus,
input[type=url]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus,
select:focus,
textarea:focus {
border-color:#b3d4fc; border-color:#b3d4fc;
} }
input:not([type]):focus { input:not([type]):focus
{
border-color:#b3d4fc; border-color:#b3d4fc;
} }
input[type=radio], input[type=radio],input[type=checkbox]
input[type=checkbox] { {
vertical-align:middle; vertical-align:middle;
} }
input[type=file]:focus, input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus
input[type=radio]:focus, {
input[type=checkbox]:focus {
outline:.1rem solid thin #444; outline:.1rem solid thin #444;
} }
input[type=text][disabled], input[type=text][disabled],input[type=password][disabled],input[type=email][disabled],input[type=url][disabled],input[type=date][disabled],input[type=month][disabled],input[type=time][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=week][disabled],input[type=number][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=color][disabled],select[disabled],textarea[disabled]
input[type=password][disabled], {
input[type=email][disabled],
input[type=url][disabled],
input[type=date][disabled],
input[type=month][disabled],
input[type=time][disabled],
input[type=datetime][disabled],
input[type=datetime-local][disabled],
input[type=week][disabled],
input[type=number][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=color][disabled],
select[disabled],
textarea[disabled] {
background-color:#efefef; background-color:#efefef;
color:#777; color:#777;
cursor:not-allowed; cursor:not-allowed;
} }
input:not([type])[disabled] { input:not([type])[disabled]
{
background-color:#efefef; background-color:#efefef;
color:#777; color:#777;
cursor:not-allowed; cursor:not-allowed;
} }
input[readonly], input[readonly],select[readonly],textarea[readonly]
select[readonly], {
textarea[readonly] {
background-color:#efefef; background-color:#efefef;
border-color:#ccc; border-color:#ccc;
color:#777; color:#777;
} }
input:focus:invalid, input:focus:invalid,textarea:focus:invalid,select:focus:invalid
textarea:focus:invalid, {
select:focus:invalid {
border-color:#e9322d; border-color:#e9322d;
color:#b94a48; color:#b94a48;
} }
input[type=file]:focus:invalid:focus, input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus,input[type=checkbox]:focus:invalid:focus
input[type=radio]:focus:invalid:focus, {
input[type=checkbox]:focus:invalid:focus {
outline-color:#ff4136; outline-color:#ff4136;
} }
select { select
{
background-color:#fff; background-color:#fff;
border:.1rem solid #ccc; border:.1rem solid #ccc;
} }
select[multiple] { select[multiple]
{
height:auto; height:auto;
} }
label { label
{
line-height:2; line-height:2;
} }
fieldset { fieldset
{
border:0; border:0;
margin:0; margin:0;
padding:.8rem 0; padding:.8rem 0;
} }
legend { legend
{
border-bottom:.1rem solid #ccc; border-bottom:.1rem solid #ccc;
color:#444; color:#444;
display:block; display:block;
@ -472,8 +445,8 @@ legend {
width:100%; width:100%;
} }
input[type=submit], input[type=submit],button
button { {
-moz-user-select:none; -moz-user-select:none;
-ms-user-select:none; -ms-user-select:none;
-webkit-transition:.25s ease; -webkit-transition:.25s ease;
@ -490,113 +463,117 @@ button {
text-align:center; text-align:center;
text-decoration:none; text-decoration:none;
text-transform:uppercase; text-transform:uppercase;
-webkit-transition: .25s ease;
transition:.25s ease; transition:.25s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none; user-select:none;
vertical-align:baseline; vertical-align:baseline;
} }
input[type=submit] a, input[type=submit] a,button a
button a { {
color:#444; color:#444;
} }
input[type=submit]::-moz-focus-inner, input[type=submit]::-moz-focus-inner,button::-moz-focus-inner
button::-moz-focus-inner { {
padding:0; padding:0;
} }
input[type=submit]:hover, input[type=submit]:hover,button:hover
button:hover { {
background:#444; background:#444;
border-color:#444; border-color:#444;
color:#fff; color:#fff;
} }
input[type=submit]:hover a, input[type=submit]:hover a,button:hover a
button:hover a { {
color:#fff; color:#fff;
} }
input[type=submit]:active, input[type=submit]:active,button:active
button:active { {
background:#6a6a6a; background:#6a6a6a;
border-color:#6a6a6a; border-color:#6a6a6a;
color:#fff; color:#fff;
} }
input[type=submit]:active a, input[type=submit]:active a,button:active a
button:active a { {
color:#fff; color:#fff;
} }
input[type=submit]:disabled, input[type=submit]:disabled,button:disabled
button:disabled { {
box-shadow:none; box-shadow:none;
cursor:not-allowed; cursor:not-allowed;
opacity:.40; opacity:.40;
} }
nav ul { nav ul
{
list-style:none; list-style:none;
margin:0; margin:0;
padding:0; padding:0;
text-align:center; text-align:center;
} }
nav ul li { nav ul li
{
display:inline; display:inline;
} }
nav a { nav a
{
-webkit-transition:.25s ease; -webkit-transition:.25s ease;
border-bottom:.2rem solid transparent; border-bottom:.2rem solid transparent;
color:#444; color:#444;
padding:.8rem 1.6rem; padding:.8rem 1.6rem;
text-decoration:none; text-decoration:none;
-webkit-transition: .25s ease;
transition:.25s ease; transition:.25s ease;
} }
nav a:hover, nav a:hover,nav li.selected a
nav li.selected a { {
border-color:rgba(0,0,0,0.2); border-color:rgba(0,0,0,0.2);
} }
nav a:active { nav a:active
{
border-color:rgba(0,0,0,0.56); border-color:rgba(0,0,0,0.56);
} }
caption { caption
{
padding:.8rem 0; padding:.8rem 0;
} }
thead th { thead th
{
background:#efefef; background:#efefef;
color:#444; color:#444;
} }
tr { tr
{
background:#fff; background:#fff;
margin-bottom:.8rem; margin-bottom:.8rem;
} }
th, th,td
td { {
border:.1rem solid #ccc; border:.1rem solid #ccc;
padding:.8rem 1.6rem; padding:.8rem 1.6rem;
text-align:center; text-align:center;
vertical-align:inherit; vertical-align:inherit;
} }
tfoot tr { tfoot tr
{
background:none; background:none;
} }
tfoot td { tfoot td
{
color:#efefef; color:#efefef;
font-size:.8rem; font-size:.8rem;
font-style:italic; font-style:italic;
@ -604,26 +581,28 @@ tfoot td {
} }
@media screen { @media screen {
[hidden~=screen] { [hidden~=screen]
{
display:inherit; display:inherit;
} }
[hidden~=screen]:not(:active):not(:focus):not(:target) { [hidden~=screen]:not(:active):not(:focus):not(:target)
{
clip:rect(0000)!important; clip:rect(0000)!important;
position:absolute!important; position:absolute!important;
} }
} }
@media screen and max-width 40rem { @media screen and max-width 40rem {
article, article,section,aside
section, {
aside {
clear:both; clear:both;
display:block; display:block;
max-width:100%; max-width:100%;
} }
img { img
{
margin-right:1.6rem; margin-right:1.6rem;
} }
} }

View File

@ -1,11 +1,17 @@
{ {
"scripts": { "scripts": {
"build": "npm-run-all --parallel build:base build:marx",
"build:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/base.css css/base.myth.css",
"build:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/marx.css css/marx.myth.css",
"watch": "npm-run-all --parallel watch:base watch:marx", "watch": "npm-run-all --parallel watch:base watch:marx",
"watch:base": "myth -w css/base.myth.css css/base.css", "watch:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/base.css css/base.myth.css",
"watch:marx": "myth -w css/marx.myth.css css/marx.css" "watch:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/marx.css css/marx.myth.css"
}, },
"devDependencies": { "devDependencies": {
"myth": "^1.5.0", "autoprefixer": "^6.6.1",
"npm-run-all": "^1.7.0" "npm-run-all": "^4.0.0",
"postcss-cachify": "^1.3.1",
"postcss-cli": "^2.6.0",
"postcss-cssnext": "^2.9.0"
} }
} }