From 24edf55f4481d3de6f2f875e93ab5b11e8a3c268 Mon Sep 17 00:00:00 2001 From: Timothy J Warren Date: Mon, 5 Nov 2018 09:47:05 -0500 Subject: [PATCH] Responsive updates for smaller screen sizes --- public/css/all.css | 4 + public/css/app.min.css | 2 +- public/css/components.css | 264 +++++++++++++++++++++ public/css/{base.css => general.css} | 334 ++++----------------------- public/css/responsive.css | 99 ++++++++ public/tools/css.js | 4 +- 6 files changed, 415 insertions(+), 292 deletions(-) create mode 100644 public/css/all.css create mode 100644 public/css/components.css rename public/css/{base.css => general.css} (73%) create mode 100644 public/css/responsive.css diff --git a/public/css/all.css b/public/css/all.css new file mode 100644 index 00000000..ff810e2e --- /dev/null +++ b/public/css/all.css @@ -0,0 +1,4 @@ +@import "./marx.css"; +@import "./general.css"; +@import "./components.css"; +@import "./responsive.css"; diff --git a/public/css/app.min.css b/public/css/app.min.css index ca46db2b..019d5754 100644 --- a/public/css/app.min.css +++ b/public/css/app.min.css @@ -1 +1 @@ -:root{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:default;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;overflow-y:scroll;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}audio:not([controls]){display:none}details{display:block}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}main{margin:0 auto;padding:0 1.6rem 1.6rem}main,pre,summary{display:block}pre{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.4em;font-size:14px;font-size:1.4rem;margin:1.6rem 0;overflow:auto;padding:1.6rem;word-break:break-all;word-wrap:break-word}progress{display:inline-block}small{color:#777;font-size:75%}big{font-size:125%}template{display:none}textarea{border:.1rem solid #ccc;border-radius:0;display:block;margin-bottom:.8rem;overflow:auto;padding:.8rem;resize:vertical;vertical-align:middle}[hidden]{display:none}[unselectable]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}*,:after,:before{border-style:solid;border-width:0;-webkit-box-sizing:inherit;box-sizing:inherit}*{font-size:inherit;line-height:inherit;margin:0;padding:0}:after,:before{text-decoration:inherit;vertical-align:inherit}a{-webkit-transition:.25s ease;color:#1271db;text-decoration:none;transition:.25s ease}audio,canvas,iframe,img,svg,video{vertical-align:middle}button,input,select,textarea{border:.1rem solid #ccc;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.4em}code,kbd,pre,samp{font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace}table{border-collapse:collapse;border-spacing:0;margin-bottom:1.6rem}::-moz-selection{background-color:#b3d4fc;text-shadow:none}::selection{background-color:#b3d4fc;text-shadow:none}button::-moz-focus-inner{border:0}body{color:#444;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;font-size:1.6rem;font-style:normal;font-weight:400;padding:0}p{margin:0 0 1.6rem}h1,h2,h3,h4,h5,h6{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem}h1{border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem}h1,h2{font-style:normal;font-weight:500}h2{font-size:3em;font-size:30px;font-size:3rem}h3{font-size:2.4em;font-size:24px;font-size:2.4rem;font-style:normal;font-weight:500;margin:1.6rem 0 .4rem}h4{font-size:1.8em;font-size:18px;font-size:1.8rem}h4,h5{font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}h5{font-size:1.6em;font-size:16px;font-size:1.6rem}h6{color:#777;font-size:1.4em;font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}code,h6{font-size:14px;font-size:1.4rem}code{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;word-break:break-all;word-wrap:break-word}a:focus,a:hover{text-decoration:none}dl{margin-bottom:1.6rem}dd{margin-left:4rem}ol,ul{margin-bottom:.8rem;padding-left:2rem}blockquote{border-left:.2rem solid #1271db;font-style:italic;margin:1.6rem 0;padding-left:1.6rem}blockquote,figcaption{font-family:Georgia,Times,Times New Roman,serif}html{font-size:62.5%}article,aside,details,footer,header,main,section,summary{display:block;height:auto;margin:0 auto;width:100%}footer{clear:both;display:inline-block;float:left;max-width:100%;padding:1rem 0;text-align:center}footer,hr{border-top:.1rem solid rgba(0,0,0,.2)}hr{display:block;margin-bottom:1.6rem;width:100%}img{height:auto;vertical-align:baseline}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select{border:.1rem solid #ccc;border-radius:0;display:inline-block;padding:.8rem;vertical-align:middle}input:not([type]){-webkit-appearance:none;background-clip:padding-box;background-color:#fff;border:.1rem solid #ccc;border-radius:0;color:#444;display:inline-block;padding:.8rem;text-align:left}input[type=color]{padding:.8rem 1.6rem}input:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#b3d4fc}input[type=checkbox],input[type=radio]{vertical-align:middle}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin solid #444;outline:.1rem thin solid #444}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{background-color:#efefef;color:#777;cursor:not-allowed}input[readonly],select[readonly],textarea[readonly]{background-color:#efefef;border-color:#ccc;color:#777}input:focus:invalid,select:focus:invalid,textarea:focus:invalid{border-color:#e9322d;color:#b94a48}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:#ff4136}select{background-color:#fff;border:.1rem solid #ccc}select[multiple]{height:auto}label{line-height:2}fieldset{border:0;margin:0;padding:.8rem 0}legend{border-bottom:.1rem solid #ccc;color:#444;display:block;margin-bottom:.8rem;padding:.8rem 0;width:100%}button,input[type=submit]{-moz-user-select:none;-ms-user-select:none;-webkit-transition:.25s ease;-webkit-user-drag:none;-webkit-user-select:none;border:.2rem solid #444;border-radius:0;color:#444;cursor:pointer;display:inline-block;margin-bottom:.8rem;margin-right:.4rem;padding:.8rem 1.6rem;text-align:center;text-decoration:none;text-transform:uppercase;transition:.25s ease;user-select:none;vertical-align:baseline}button a,input[type=submit] a{color:#444}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,input[type=submit]:hover{background:#444;border-color:#444;color:#fff}button:hover a,input[type=submit]:hover a{color:#fff}button:active,input[type=submit]:active{background:#6a6a6a;border-color:#6a6a6a;color:#fff}button:active a,input[type=submit]:active a{color:#fff}button:disabled,input[type=submit]:disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:.4}nav ul{list-style:none;margin:0;padding:0;text-align:center}nav ul li{display:inline}nav a{-webkit-transition:.25s ease;border-bottom:.2rem solid transparent;color:#444;padding:.8rem 1.6rem;text-decoration:none;transition:.25s ease}nav a:hover,nav li.selected a{border-color:rgba(0,0,0,.2)}nav a:active{border-color:rgba(0,0,0,.56)}caption{padding:.8rem 0}thead th{background:#efefef;color:#444}tr{background:#fff;margin-bottom:.8rem}td,th{border:.1rem solid #ccc;padding:.8rem 1.6rem;text-align:center;vertical-align:inherit}tfoot tr{background:none}tfoot td{color:#efefef;font-size:8px;font-size:.8rem;font-style:italic;padding:1.6rem .4rem}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0)!important;position:absolute!important}}@media screen and max-width 40rem{article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:1.6rem}}.media[hidden],[hidden=hidden],template{display:none}body{margin:.5em}button{background:hsla(0,0%,100%,.65);margin:0}table{-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin:0 auto}td{padding:1rem}thead td,thead th{padding:.5rem}input[type=number]{width:4em}tbody>tr:nth-child(odd){background:#ddd}a:active,a:hover{color:#7d12db}.bracketed{color:#12db18}#main-nav a,.bracketed{text-shadow:1px 1px 1px #000}.bracketed:before{content:"[\00a0"}.bracketed:after{content:"\00a0]"}.bracketed:active,.bracketed:hover{color:#db7d12}.grow-1{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-align-start{-ms-flex-line-pack:start;align-content:flex-start}.flex-align-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.flex-align-space-around{-ms-flex-line-pack:distribute;align-content:space-around}.flex-justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.flex-self-center{-ms-flex-item-align:center;align-self:center}.flex-space-evenly{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.flex{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex}.small-font{font-size:16px;font-size:1.6rem}.justify{text-align:justify}.align-center{text-align:center!important}.align-left{text-align:left!important}.align-right{text-align:right!important}.valign-top{vertical-align:top}.no-border{border:none}.media-wrap{text-align:center;margin:0 auto;position:relative}.media-wrap-flex{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:space-evenly;align-content:space-evenly;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}td .media-wrap-flex{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.danger{background-color:#ff4136;border-color:#924949;color:#fff}.danger:active,.danger:hover{background-color:#924949;border-color:#ff4136;color:#fff}.user-btn{border-color:#12db18;color:#12db18;text-shadow:1px 1px 1px #000;padding:0 .5rem}.user-btn:active,.user-btn:hover{border-color:#db7d12;background-color:#db7d12}.full-width{width:100%}.full-height{max-height:none}.toph{margin-top:0}#main-nav{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem;border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem;font-style:normal;font-weight:500}.cssload-loader{position:relative;left:calc(50% - 31px);width:62px;height:62px;border-radius:50%;-webkit-perspective:780px;perspective:780px}.cssload-inner{position:absolute;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%}.cssload-inner.cssload-one{left:0;top:0;-webkit-animation:cssload-rotate-one 1.15s linear infinite;animation:cssload-rotate-one 1.15s linear infinite;border-bottom:3px solid #000}.cssload-inner.cssload-two{right:0;top:0;-webkit-animation:cssload-rotate-two 1.15s linear infinite;animation:cssload-rotate-two 1.15s linear infinite;border-right:3px solid #000}.cssload-inner.cssload-three{right:0;bottom:0;-webkit-animation:cssload-rotate-three 1.15s linear infinite;animation:cssload-rotate-three 1.15s linear infinite;border-top:3px solid #000}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}@keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}.sorting,.sorting-asc,.sorting-desc{vertical-align:text-bottom}.sorting:before{content:" ↕\00a0"}.sorting-asc:before{content:" ↑\00a0"}.sorting-desc:before{content:" ↓\00a0"}.form thead th,.form thead tr{background:inherit;border:0}.form tr>td:nth-child(odd){text-align:right;min-width:25px;max-width:30%}.form tr>td:nth-child(2n){text-align:left}.invisible tbody>tr:nth-child(odd){background:inherit}.borderless,.borderless td,.borderless th,.borderless tr,.invisible td,.invisible th,.invisible tr{-webkit-box-shadow:none;box-shadow:none;border:0}.message,.static-message{position:relative;margin:.5em auto;padding:.5em;width:95%}.message .close{width:1em;height:1em;position:absolute;right:.5em;top:.5em;text-align:center;vertical-align:middle;line-height:1em}.message:hover .close:after{content:"☒"}.message:hover{cursor:pointer}.message .icon{left:.5em;top:.5em;margin-right:1em}.message.error,.static-message.error{border:1px solid #924949;background:#f3e6e6}.message.error .icon:after{content:"✘"}.message.success,.static-message.success{border:1px solid #1f8454;background:#70dda9}.message.success .icon:after{content:"✔"}.message.info,.static-message.info{border:1px solid #bfbe3a;background:#ffc}.message.info .icon:after{content:"⚠"}.character,.media,.small-character{position:relative;vertical-align:top;display:inline-block;text-align:center;width:220px;height:311px;margin:.25em .125em;z-index:0;background:rgba(0,0,0,.15)}.details picture.cover,picture.cover{display:inline;display:initial;width:100%}.character>img,.media>img,.small-character>img{width:100%}.media .edit-buttons>button{margin:.5em auto}.media-metadata>div,.medium-metadata>div,.name,.row{text-shadow:2px 2px 2px #000;color:#fff;padding:.25em .125em;text-align:right;z-index:2}.age-rating,.media-type{text-align:left}.media>.media-metadata{position:absolute;bottom:0;right:0}.media>.medium-metadata{position:absolute;bottom:0;left:0}.media>.name{position:absolute;top:0}.media>.name a{display:inline-block;-webkit-transition:none;transition:none}.media .name a:before{content:"";display:block;height:311px;left:0;position:absolute;top:0;width:220px;z-index:-1}.media-list .media:hover .name a:before{background:rgba(0,0,0,.75)}.media>.name span.canonical{font-weight:700}.media>.name small{font-weight:400}.media:hover .name{background:rgba(0,0,0,.75)}.media-list .media>.name a:hover,.media-list .media>.name a:hover small{color:#1271db}.media:hover>.edit-buttons[hidden],.media:hover>button[hidden]{-webkit-transition:.25s ease;transition:.25s ease;display:block}.media:hover{-webkit-transition:.25s ease;transition:.25s ease}.character>.name a,.character>.name a small,.media>.name a,.media>.name a small,.small-character>.name a,.small-character>.name a small{background:none;color:#fff;text-shadow:2px 2px 2px #000}.anime .name,.manga .name{background:#000;background:rgba(0,0,0,.45);text-align:center;width:100%;padding:.5em .25em}.anime .age-rating,.anime .airing-status,.anime .completion,.anime .delete,.anime .edit,.anime .media-type,.anime .user-rating{background:none;text-align:center}.anime .table,.manga .table{position:absolute;bottom:0;left:0;width:100%}.anime .row,.manga .row{width:100%;display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:distribute;align-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;text-align:center;padding:0 inherit}.anime .row>span,.manga .row>span{text-align:left;z-index:2}.anime .row>div,.manga .row>div{font-size:.8em;display:inline-block;display:flex-item;-ms-flex-item-align:center;align-self:center;text-align:center;vertical-align:middle;z-index:2}.anime .media>button.plus-one{border-color:hsla(0,0%,100%,.65);position:absolute;top:138px;top:calc(50% - 21.5px);left:44px;left:calc(50% - 66.5px);z-index:50}.anime .media>button.plus-one:hover{color:hsla(0,0%,100%,.65);background:#888}.anime .media>button.plus-one:active{background:#444}.manga .row{padding:1px}.manga .media{height:310px;margin:.25em}.manga .media>.edit-buttons{position:absolute;top:86px;top:calc(50% - 22.4px);left:43.5px;left:calc(50% - 66.5px);z-index:40}.manga .media>.edit-buttons button{border-color:hsla(0,0%,100%,.65)}.manga .media>.edit-buttons:hover button{color:hsla(0,0%,100%,.65);background:#888}.manga .media>.edit-buttons button:active{background:#444}.media.search>.name{background-color:#555;background-color:rgba(0,0,0,.35);background-size:cover;background-size:contain;background-repeat:no-repeat}.media.search>.row{z-index:6}.big-check,.mal-check{display:none}.big-check:checked+label{-webkit-transition:.25s ease;transition:.25s ease;background:rgba(0,0,0,.75)}.big-check:checked+label:after{content:"✓";font-size:15em;font-size:150px;font-size:15rem;text-align:center;color:#adff2f;position:absolute;top:147px;left:0;height:100%;width:100%;z-index:5}#series-list article.media{position:relative}#series-list .name,#series-list .name label{position:absolute;display:block;top:0;left:0;height:100%;width:100%;vertical-align:middle;line-height:1.25em}#series-list .name small{color:#fff}.details{margin:1.5rem auto 0;padding:1rem;font-size:inherit}.description{max-width:800px;max-width:80rem}.fixed{max-width:1000px;max-width:100rem;margin:0 auto}.fixed .text{max-width:600px}.details .cover{display:block}.details .flex>*{margin:1rem}.details .media-details td{padding:0 1.5rem}.details p{text-align:justify}.details .media-details td:nth-child(odd){width:1%;white-space:nowrap;text-align:right}.details .media-details td:nth-child(2n){text-align:left}.details a h1,.details a h2{margin-top:0}.character,.person,.small-character{width:225px;height:350px;vertical-align:middle;white-space:nowrap;position:relative}.person{width:225px;height:338px}.small-person{width:200px;height:300px}.character a{height:350px}.character:hover .name,.small-character:hover .name{background:rgba(0,0,0,.8)}.small-character a{display:inline-block;width:100%;height:100%}.character .name,.small-character .name{position:absolute;bottom:0;left:0;z-index:10}.character img,.character picture,.person img,.person picture,.small-character img,.small-character picture{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5;max-height:350px;max-width:225px}.person img,.person picture{max-height:338px}.small-person img,.small-person picture{max-height:300px;max-width:200px}.min-table{min-width:0;margin-left:0}.max-table{min-width:100%;margin:0}aside.info{max-width:390px}aside.info img,aside.info picture{display:block;margin:0 auto}.small-character{width:160px;height:250px}.small-character img,.small-character picture{max-height:250px;max-width:160px}.user-page .media-wrap{text-align:left}.media a{display:inline-block;width:100%;height:100%}@media screen and (max-width:40em){nav a{line-height:4em;line-height:4rem}.media{margin:2px 0}main{padding:0 .5rem .5rem}}.streaming-logo{width:50px;height:50px;vertical-align:middle}.cover-streaming-link{display:none}.media:hover .cover-streaming-link{display:block}.cover-streaming-link .streaming-logo{width:20px;height:20px;-webkit-filter:drop-shadow(0 -1px 4px #fff);filter:drop-shadow(0 -1px 4px #fff)}#loading-shadow{background:rgba(0,0,0,.8);z-index:500}#loading-shadow,#loading-shadow .loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%}#loading-shadow .loading-wrapper{z-index:501;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#loading-shadow .loading-content{position:relative;color:#fff}.loading-content .cssload-inner.cssload-one,.loading-content .cssload-inner.cssload-three,.loading-content .cssload-inner.cssload-two{border-color:#fff}.tabs{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#efefef;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin-top:1.5em}.tabs>label{border:1px solid #e5e5e5;width:100%;padding:20px 30px;background:#e5e5e5;cursor:pointer;font-weight:700;font-size:18px;color:#7f7f7f;-webkit-transition:background .1s,color .1s;transition:background .1s,color .1s}.tabs>label:hover{background:#d8d8d8}.tabs>label:active{background:#ccc}.tabs>[type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.tabs>[type=radio]{position:absolute;opacity:0}.tabs>[type=radio]:checked+label{border-bottom:1px solid #fff;background:#fff;color:#000}.tabs>[type=radio]:checked+label+.content{border:1px solid #e5e5e5;border-top:0;display:block;padding:15px;background:#fff;width:100%;margin:0 auto;overflow:auto}.tabs .content{display:none;max-height:950px}.tabs .content.full-height{max-height:none}@media (min-width:600px){.tabs>label{width:auto}.tabs .content{-webkit-box-ordinal-group:100;-ms-flex-order:99;order:99}}.vertical-tabs{border:1px solid #e5e5e5;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin:0 auto;position:relative;width:100%}.vertical-tabs input[type=radio]{display:none}.vertical-tabs .tab{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.vertical-tabs .tab,.vertical-tabs .tab label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vertical-tabs .tab label{background:#e5e5e5;border:1px solid #e5e5e5;color:#7f7f7f;cursor:pointer;font-size:18px;font-weight:700;padding:0 20px;width:28%}.vertical-tabs .tab label:hover{background:#d8d8d8}.vertical-tabs .tab label:active{background:#ccc}.vertical-tabs .tab .content{display:none;border:1px solid #e5e5e5;border-left:0;border-right:0;max-height:950px;overflow:auto}.vertical-tabs .tab .content.full-height{max-height:none}.vertical-tabs [type=radio]:checked+label{border:0;background:#fff;color:#000;width:38%}.vertical-tabs [type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.vertical-tabs [type=radio]:checked~.content{display:block}.settings.form .content article{margin:1em;display:inline-block;width:auto} \ No newline at end of file +:root{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:default;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;overflow-y:scroll;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}audio:not([controls]){display:none}details{display:block}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}main{margin:0 auto;padding:0 1.6rem 1.6rem}main,pre,summary{display:block}pre{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.4em;font-size:14px;font-size:1.4rem;margin:1.6rem 0;overflow:auto;padding:1.6rem;word-break:break-all;word-wrap:break-word}progress{display:inline-block}small{color:#777;font-size:75%}big{font-size:125%}template{display:none}textarea{border:.1rem solid #ccc;border-radius:0;display:block;margin-bottom:.8rem;overflow:auto;padding:.8rem;resize:vertical;vertical-align:middle}[hidden]{display:none}[unselectable]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}*,:after,:before{border-style:solid;border-width:0;-webkit-box-sizing:inherit;box-sizing:inherit}*{font-size:inherit;line-height:inherit;margin:0;padding:0}:after,:before{text-decoration:inherit;vertical-align:inherit}a{-webkit-transition:.25s ease;color:#1271db;text-decoration:none;transition:.25s ease}audio,canvas,iframe,img,svg,video{vertical-align:middle}button,input,select,textarea{border:.1rem solid #ccc;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.4em}code,kbd,pre,samp{font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace}table{border-collapse:collapse;border-spacing:0;margin-bottom:1.6rem}::-moz-selection{background-color:#b3d4fc;text-shadow:none}::selection{background-color:#b3d4fc;text-shadow:none}button::-moz-focus-inner{border:0}body{color:#444;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;font-size:1.6rem;font-style:normal;font-weight:400;padding:0}p{margin:0 0 1.6rem}h1,h2,h3,h4,h5,h6{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem}h1{border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem}h1,h2{font-style:normal;font-weight:500}h2{font-size:3em;font-size:30px;font-size:3rem}h3{font-size:2.4em;font-size:24px;font-size:2.4rem;font-style:normal;font-weight:500;margin:1.6rem 0 .4rem}h4{font-size:1.8em;font-size:18px;font-size:1.8rem}h4,h5{font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}h5{font-size:1.6em;font-size:16px;font-size:1.6rem}h6{color:#777;font-size:1.4em;font-style:normal;font-weight:600;margin:1.6rem 0 .4rem}code,h6{font-size:14px;font-size:1.4rem}code{background:#efefef;color:#444;font-family:Anonymous Pro,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace;word-break:break-all;word-wrap:break-word}a:focus,a:hover{text-decoration:none}dl{margin-bottom:1.6rem}dd{margin-left:4rem}ol,ul{margin-bottom:.8rem;padding-left:2rem}blockquote{border-left:.2rem solid #1271db;font-style:italic;margin:1.6rem 0;padding-left:1.6rem}blockquote,figcaption{font-family:Georgia,Times,Times New Roman,serif}html{font-size:62.5%}article,aside,details,footer,header,main,section,summary{display:block;height:auto;margin:0 auto;width:100%}footer{clear:both;display:inline-block;float:left;max-width:100%;padding:1rem 0;text-align:center}footer,hr{border-top:.1rem solid rgba(0,0,0,.2)}hr{display:block;margin-bottom:1.6rem;width:100%}img{height:auto;vertical-align:baseline}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select{border:.1rem solid #ccc;border-radius:0;display:inline-block;padding:.8rem;vertical-align:middle}input:not([type]){-webkit-appearance:none;background-clip:padding-box;background-color:#fff;border:.1rem solid #ccc;border-radius:0;color:#444;display:inline-block;padding:.8rem;text-align:left}input[type=color]{padding:.8rem 1.6rem}input:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#b3d4fc}input[type=checkbox],input[type=radio]{vertical-align:middle}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin solid #444;outline:.1rem thin solid #444}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{background-color:#efefef;color:#777;cursor:not-allowed}input[readonly],select[readonly],textarea[readonly]{background-color:#efefef;border-color:#ccc;color:#777}input:focus:invalid,select:focus:invalid,textarea:focus:invalid{border-color:#e9322d;color:#b94a48}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:#ff4136}select{background-color:#fff;border:.1rem solid #ccc}select[multiple]{height:auto}label{line-height:2}fieldset{border:0;margin:0;padding:.8rem 0}legend{border-bottom:.1rem solid #ccc;color:#444;display:block;margin-bottom:.8rem;padding:.8rem 0;width:100%}button,input[type=submit]{-moz-user-select:none;-ms-user-select:none;-webkit-transition:.25s ease;-webkit-user-drag:none;-webkit-user-select:none;border:.2rem solid #444;border-radius:0;color:#444;cursor:pointer;display:inline-block;margin-bottom:.8rem;margin-right:.4rem;padding:.8rem 1.6rem;text-align:center;text-decoration:none;text-transform:uppercase;transition:.25s ease;user-select:none;vertical-align:baseline}button a,input[type=submit] a{color:#444}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,input[type=submit]:hover{background:#444;border-color:#444;color:#fff}button:hover a,input[type=submit]:hover a{color:#fff}button:active,input[type=submit]:active{background:#6a6a6a;border-color:#6a6a6a;color:#fff}button:active a,input[type=submit]:active a{color:#fff}button:disabled,input[type=submit]:disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:.4}nav ul{list-style:none;margin:0;padding:0;text-align:center}nav ul li{display:inline}nav a{-webkit-transition:.25s ease;border-bottom:.2rem solid transparent;color:#444;padding:.8rem 1.6rem;text-decoration:none;transition:.25s ease}nav a:hover,nav li.selected a{border-color:rgba(0,0,0,.2)}nav a:active{border-color:rgba(0,0,0,.56)}caption{padding:.8rem 0}thead th{background:#efefef;color:#444}tr{background:#fff;margin-bottom:.8rem}td,th{border:.1rem solid #ccc;padding:.8rem 1.6rem;text-align:center;vertical-align:inherit}tfoot tr{background:none}tfoot td{color:#efefef;font-size:8px;font-size:.8rem;font-style:italic;padding:1.6rem .4rem}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0)!important;position:absolute!important}}@media screen and max-width 40rem{article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:1.6rem}}.media[hidden],[hidden=hidden],template{display:none}body{margin:.5em}button{background:hsla(0,0%,100%,.65);margin:0}table{-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin:0 auto}td{padding:1rem}thead td,thead th{padding:.5rem}input[type=number]{width:4em}tbody>tr:nth-child(odd){background:#ddd}a:active,a:hover{color:#7d12db}iframe{display:block;margin:0 auto}.bracketed{color:#12db18}#main-nav a,.bracketed{text-shadow:1px 1px 1px #000}.bracketed:before{content:"[\00a0"}.bracketed:after{content:"\00a0]"}.bracketed:active,.bracketed:hover{color:#db7d12}.grow-1{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-align-start{-ms-flex-line-pack:start;align-content:flex-start}.flex-align-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.flex-align-space-around{-ms-flex-line-pack:distribute;align-content:space-around}.flex-justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.flex-self-center{-ms-flex-item-align:center;align-self:center}.flex-space-evenly{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.flex{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex}.small-font{font-size:16px;font-size:1.6rem}.justify{text-align:justify}.align-center{text-align:center!important}.align-left{text-align:left!important}.align-right{text-align:right!important}.valign-top{vertical-align:top}.no-border{border:none}.media-wrap{text-align:center;margin:0 auto;position:relative}.media-wrap-flex{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:space-evenly;align-content:space-evenly;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}td .media-wrap-flex{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.danger{background-color:#ff4136;border-color:#924949;color:#fff}.danger:active,.danger:hover{background-color:#924949;border-color:#ff4136;color:#fff}.user-btn{border-color:#12db18;color:#12db18;text-shadow:1px 1px 1px #000;padding:0 .5rem}.user-btn:active,.user-btn:hover{border-color:#db7d12;background-color:#db7d12}.full-width{width:100%}.full-height{max-height:none}.toph{margin-top:0}#main-nav{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;margin:2rem 0 1.6rem;border-bottom:.1rem solid rgba(0,0,0,.2);font-size:3.6em;font-size:36px;font-size:3.6rem;font-style:normal;font-weight:500}.sorting,.sorting-asc,.sorting-desc{vertical-align:text-bottom}.sorting:before{content:" ↕\00a0"}.sorting-asc:before{content:" ↑\00a0"}.sorting-desc:before{content:" ↓\00a0"}.form thead th,.form thead tr{background:inherit;border:0}.form tr>td:nth-child(odd){text-align:right;min-width:25px;max-width:30%}.form tr>td:nth-child(2n){text-align:left}.invisible tbody>tr:nth-child(odd){background:inherit}.borderless,.borderless td,.borderless th,.borderless tr,.invisible td,.invisible th,.invisible tr{-webkit-box-shadow:none;box-shadow:none;border:0}.message,.static-message{position:relative;margin:.5em auto;padding:.5em;width:95%}.message .close{width:1em;height:1em;position:absolute;right:.5em;top:.5em;text-align:center;vertical-align:middle;line-height:1em}.message:hover .close:after{content:"☒"}.message:hover{cursor:pointer}.message .icon{left:.5em;top:.5em;margin-right:1em}.message.error,.static-message.error{border:1px solid #924949;background:#f3e6e6}.message.error .icon:after{content:"✘"}.message.success,.static-message.success{border:1px solid #1f8454;background:#70dda9}.message.success .icon:after{content:"✔"}.message.info,.static-message.info{border:1px solid #bfbe3a;background:#ffc}.message.info .icon:after{content:"⚠"}.character,.media,.small-character{position:relative;vertical-align:top;display:inline-block;text-align:center;width:220px;height:311px;margin:.25em .125em;z-index:0;background:rgba(0,0,0,.15)}.details picture.cover,picture.cover{display:inline;display:initial;width:100%}.character>img,.media>img,.small-character>img{width:100%}.media .edit-buttons>button{margin:.5em auto}.media-metadata>div,.medium-metadata>div,.name,.row{text-shadow:2px 2px 2px #000;color:#fff;padding:.25em .125em;text-align:right;z-index:2}.age-rating,.media-type{text-align:left}.media>.media-metadata{position:absolute;bottom:0;right:0}.media>.medium-metadata{position:absolute;bottom:0;left:0}.media>.name{position:absolute;top:0}.media>.name a{display:inline-block;-webkit-transition:none;transition:none}.media .name a:before{content:"";display:block;height:311px;left:0;position:absolute;top:0;width:220px;z-index:-1}.media-list .media:hover .name a:before{background:rgba(0,0,0,.75)}.media>.name span.canonical{font-weight:700}.media>.name small{font-weight:400}.media:hover .name{background:rgba(0,0,0,.75)}.media-list .media>.name a:hover,.media-list .media>.name a:hover small{color:#1271db}.media:hover>.edit-buttons[hidden],.media:hover>button[hidden]{-webkit-transition:.25s ease;transition:.25s ease;display:block}.media:hover{-webkit-transition:.25s ease;transition:.25s ease}.character>.name a,.character>.name a small,.media>.name a,.media>.name a small,.small-character>.name a,.small-character>.name a small{background:none;color:#fff;text-shadow:2px 2px 2px #000}.anime .name,.manga .name{background:#000;background:rgba(0,0,0,.45);text-align:center;width:100%;padding:.5em .25em}.anime .age-rating,.anime .airing-status,.anime .completion,.anime .delete,.anime .edit,.anime .media-type,.anime .user-rating{background:none;text-align:center}.anime .table,.manga .table{position:absolute;bottom:0;left:0;width:100%}.anime .row,.manga .row{width:100%;display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:distribute;align-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;text-align:center;padding:0 inherit}.anime .row>span,.manga .row>span{text-align:left;z-index:2}.anime .row>div,.manga .row>div{font-size:.8em;display:inline-block;display:flex-item;-ms-flex-item-align:center;align-self:center;text-align:center;vertical-align:middle;z-index:2}.anime .media>button.plus-one{border-color:hsla(0,0%,100%,.65);position:absolute;top:138px;top:calc(50% - 21.5px);left:44px;left:calc(50% - 66.5px);z-index:50}.anime .media>button.plus-one:hover{color:hsla(0,0%,100%,.65);background:#888}.anime .media>button.plus-one:active{background:#444}.manga .row{padding:1px}.manga .media{height:310px;margin:.25em}.manga .media>.edit-buttons{position:absolute;top:86px;top:calc(50% - 22.4px);left:43.5px;left:calc(50% - 66.5px);z-index:40}.manga .media>.edit-buttons button{border-color:hsla(0,0%,100%,.65)}.manga .media>.edit-buttons:hover button{color:hsla(0,0%,100%,.65);background:#888}.manga .media>.edit-buttons button:active{background:#444}.media.search>.name{background-color:#555;background-color:rgba(0,0,0,.35);background-size:cover;background-size:contain;background-repeat:no-repeat}.media.search>.row{z-index:6}.big-check,.mal-check{display:none}.big-check:checked+label{-webkit-transition:.25s ease;transition:.25s ease;background:rgba(0,0,0,.75)}.big-check:checked+label:after{content:"✓";font-size:15em;font-size:150px;font-size:15rem;text-align:center;color:#adff2f;position:absolute;top:147px;left:0;height:100%;width:100%;z-index:5}#series-list article.media{position:relative}#series-list .name,#series-list .name label{position:absolute;display:block;top:0;left:0;height:100%;width:100%;vertical-align:middle;line-height:1.25em}#series-list .name small{color:#fff}.details{margin:1.5rem auto 0;padding:1rem;font-size:inherit}.description{max-width:800px;max-width:80rem}.fixed{max-width:80%;margin:0 auto}.fixed .text{max-width:40em}.details .cover{display:block}.details .flex>*{margin:1rem}.details .media-details td{padding:0 1.5rem}.details p{text-align:justify}.details .media-details td:nth-child(odd){width:1%;white-space:nowrap;text-align:right}.details .media-details td:nth-child(2n){text-align:left}.details a h1,.details a h2{margin-top:0}.character,.person,.small-character{width:225px;height:350px;vertical-align:middle;white-space:nowrap;position:relative}.person{width:225px;height:338px}.small-person{width:200px;height:300px}.character a{height:350px}.character:hover .name,.small-character:hover .name{background:rgba(0,0,0,.8)}.small-character a{display:inline-block;width:100%;height:100%}.character .name,.small-character .name{position:absolute;bottom:0;left:0;z-index:10}.character img,.character picture,.person img,.person picture,.small-character img,.small-character picture{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5;max-height:350px;max-width:225px}.person img,.person picture{max-height:338px}.small-person img,.small-person picture{max-height:300px;max-width:200px}.min-table{min-width:0;margin-left:0}.max-table{min-width:100%;margin:0}aside.info{max-width:33%}.fixed aside.info{max-width:390px}aside.info img,aside.info picture{display:block;margin:0 auto}aside.info+article{max-width:66%}.small-character{width:160px;height:250px}.small-character img,.small-character picture{max-height:250px;max-width:160px}.user-page .media-wrap{text-align:left}.media a{display:inline-block;width:100%;height:100%}.streaming-logo{width:50px;height:50px;vertical-align:middle}.cover-streaming-link{display:none}.media:hover .cover-streaming-link{display:block}.cover-streaming-link .streaming-logo{width:20px;height:20px;-webkit-filter:drop-shadow(0 -1px 4px #fff);filter:drop-shadow(0 -1px 4px #fff)}.settings.form .content article{margin:1em;display:inline-block;width:auto}.responsive-iframe{margin-top:1em;overflow:hidden;padding-bottom:56.25%;position:relative;height:0}.responsive-iframe iframe{left:0;top:0;height:100%;width:100%;position:absolute}.cssload-loader{position:relative;left:calc(50% - 31px);width:62px;height:62px;border-radius:50%;-webkit-perspective:780px;perspective:780px}.cssload-inner{position:absolute;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%}.cssload-inner.cssload-one{left:0;top:0;-webkit-animation:cssload-rotate-one 1.15s linear infinite;animation:cssload-rotate-one 1.15s linear infinite;border-bottom:3px solid #000}.cssload-inner.cssload-two{right:0;top:0;-webkit-animation:cssload-rotate-two 1.15s linear infinite;animation:cssload-rotate-two 1.15s linear infinite;border-right:3px solid #000}.cssload-inner.cssload-three{right:0;bottom:0;-webkit-animation:cssload-rotate-three 1.15s linear infinite;animation:cssload-rotate-three 1.15s linear infinite;border-top:3px solid #000}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(0deg);transform:rotateX(35deg) rotateY(-45deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotate(1turn);transform:rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(0deg);transform:rotateX(50deg) rotateY(10deg) rotate(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotate(1turn);transform:rotateX(50deg) rotateY(10deg) rotate(1turn)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}@keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(0deg);transform:rotateX(35deg) rotateY(55deg) rotate(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotate(1turn);transform:rotateX(35deg) rotateY(55deg) rotate(1turn)}}#loading-shadow{background:rgba(0,0,0,.8);z-index:500}#loading-shadow,#loading-shadow .loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%}#loading-shadow .loading-wrapper{z-index:501;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#loading-shadow .loading-content{position:relative;color:#fff}.loading-content .cssload-inner.cssload-one,.loading-content .cssload-inner.cssload-three,.loading-content .cssload-inner.cssload-two{border-color:#fff}.tabs{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#efefef;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin-top:1.5em}.tabs>label{border:1px solid #e5e5e5;width:100%;padding:20px 30px;background:#e5e5e5;cursor:pointer;font-weight:700;font-size:18px;color:#7f7f7f;-webkit-transition:background .1s,color .1s;transition:background .1s,color .1s}.tabs>label:hover{background:#d8d8d8}.tabs>label:active{background:#ccc}.tabs>[type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.tabs>[type=radio]{position:absolute;opacity:0}.tabs>[type=radio]:checked+label{border-bottom:1px solid #fff;background:#fff;color:#000}.tabs>[type=radio]:checked+label+.content{display:block}.tabs .content,.tabs>[type=radio]:checked+label+.content{border:1px solid #e5e5e5;border-top:0;padding:15px;background:#fff;width:100%;margin:0 auto;overflow:auto}.tabs .content{display:none;max-height:950px}.tabs .content.full-height{max-height:none}@media (min-width:800px){.tabs>label{width:auto}.tabs .content{-webkit-box-ordinal-group:100;-ms-flex-order:99;order:99}}.vertical-tabs{border:1px solid #e5e5e5;-webkit-box-shadow:0 48px 80px -32px rgba(0,0,0,.3);box-shadow:0 48px 80px -32px rgba(0,0,0,.3);margin:0 auto;position:relative;width:100%}.vertical-tabs input[type=radio]{position:absolute;opacity:0}.vertical-tabs .tab{display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.vertical-tabs .tab,.vertical-tabs .tab label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vertical-tabs .tab label{background:#e5e5e5;border:1px solid #e5e5e5;color:#7f7f7f;cursor:pointer;font-size:18px;font-weight:700;padding:0 20px;width:28%}.vertical-tabs .tab label:hover{background:#d8d8d8}.vertical-tabs .tab label:active{background:#ccc}.vertical-tabs .tab .content{display:none;border:1px solid #e5e5e5;border-left:0;border-right:0;max-height:950px;overflow:auto}.vertical-tabs .tab .content.full-height{max-height:none}.vertical-tabs [type=radio]:checked+label{border:0;background:#fff;color:#000;width:38%}.vertical-tabs [type=radio]:focus+label{-webkit-box-shadow:inset 0 0 0 3px #2aa1c0;box-shadow:inset 0 0 0 3px #2aa1c0;z-index:1}.vertical-tabs [type=radio]:checked~.content{display:block}@media screen and (max-width:1100px){.flex{-ms-flex-wrap:wrap;flex-wrap:wrap}.fixed aside.info,.fixed aside.info+article,aside.info,aside.info+article{max-width:none;width:100%}}@media screen and (max-width:800px){*{max-width:none!important}table{-webkit-box-shadow:none;box-shadow:none}.details .flex>*,body{margin:0}}@media screen and (max-width:40em){nav a{line-height:4em;line-height:4rem}img,picture{width:100%}main{padding:0 .5rem .5rem}table{display:block}.media{margin:2px 0}.details{padding:.5rem}.tabs>[type=radio]:checked+label{background:#fff}.vertical-tabs .tab{-ms-flex-wrap:wrap;flex-wrap:wrap}.tabs .content,.tabs>[type=radio]:checked+label+.content,.vertical-tabs .tab .content{display:block;border:0;max-height:none}.tabs>[type=radio]:checked+label,.tabs>label,.tabs>label:active,.tabs>label:hover,.vertical-tabs .tab label,.vertical-tabs .tab label:active,.vertical-tabs .tab label:hover,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:focus+label{background:#fff;border:0;width:100%;cursor:default;color:#000}} \ No newline at end of file diff --git a/public/css/components.css b/public/css/components.css new file mode 100644 index 00000000..e50deaaf --- /dev/null +++ b/public/css/components.css @@ -0,0 +1,264 @@ +/* ----------------------------------------------------------------------------- + CSS loading icon +------------------------------------------------------------------------------*/ +.cssload-loader { + position: relative; + left: calc(50% - 31px); + width: 62px; + height: 62px; + border-radius: 50%; + perspective: 780px; +} + +.cssload-inner { + position: absolute; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: 50%; +} + +.cssload-inner.cssload-one { + left: 0%; + top: 0%; + animation: cssload-rotate-one 1.15s linear infinite; + border-bottom: 3px solid rgb(0, 0, 0); +} + +.cssload-inner.cssload-two { + right: 0%; + top: 0%; + animation: cssload-rotate-two 1.15s linear infinite; + border-right: 3px solid rgb(0, 0, 0); +} + +.cssload-inner.cssload-three { + right: 0%; + bottom: 0%; + animation: cssload-rotate-three 1.15s linear infinite; + border-top: 3px solid rgb(0, 0, 0); +} + +@keyframes cssload-rotate-one { + 0% { + transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); + } + 100% { + transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); + } +} + +@keyframes cssload-rotate-two { + 0% { + transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); + } + 100% { + transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); + } +} + +@keyframes cssload-rotate-three { + 0% { + transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); + } + 100% { + transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); + } +} + +/* ---------------------------------------------------------------------------- + Loading overlay +-----------------------------------------------------------------------------*/ +#loading-shadow { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: 500; +} + +#loading-shadow .loading-wrapper { + position: fixed; + z-index: 501; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#loading-shadow .loading-content { + position: relative; + color: #fff +} + +.loading-content .cssload-inner.cssload-one, +.loading-content .cssload-inner.cssload-two, +.loading-content .cssload-inner.cssload-three { + border-color: #fff +} + +/* ---------------------------------------------------------------------------- +CSS Tabs +-----------------------------------------------------------------------------*/ +.tabs { + display: inline-block; + display: flex; + flex-wrap: wrap; + background: #efefef; + box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); + margin-top: 1.5em; +} + +.tabs > label { + border: 1px solid #e5e5e5; + width: 100%; + padding: 20px 30px; + background: #e5e5e5; + cursor: pointer; + font-weight: bold; + font-size: 18px; + color: #7f7f7f; + transition: background 0.1s, color 0.1s; + /* margin-left: 4em; */ +} + +.tabs > label:hover { + background: #d8d8d8; +} + +.tabs > label:active { + background: #ccc; +} + +.tabs > [type=radio]:focus + label { + box-shadow: inset 0px 0px 0px 3px #2aa1c0; + z-index: 1; +} + +.tabs > [type=radio] { + position: absolute; + opacity: 0; +} + +.tabs > [type=radio]:checked + label { + border-bottom: 1px solid #fff; + background: #fff; + color: #000; +} + +.tabs > [type=radio]:checked + label + .content { + border: 1px solid #e5e5e5; + border-top: 0; + display: block; + padding: 15px; + background: #fff; + width: 100%; + margin: 0 auto; + overflow: auto; + /* text-align: center; */ +} + +.tabs .content { + display: none; + max-height: 950px; + border: 1px solid #e5e5e5; + border-top: 0; + padding: 15px; + background: #fff; + width: 100%; + margin: 0 auto; + overflow: auto; +} + +.tabs .content.full-height { + max-height: none; +} + +@media (min-width: 800px) { + .tabs > label { + width: auto; + } + + .tabs .content { + order: 99; + } +} + +/* --------------------------------------------------------------------------- + Vertical Tabs + ----------------------------------------------------------------------------*/ + +.vertical-tabs { + border: 1px solid #e5e5e5; + box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); + margin: 0 auto; + position: relative; + width: 100%; +} + +.vertical-tabs input[type="radio"] { + position: absolute; + opacity: 0; +} + +.vertical-tabs .tab { + align-items: center; + display: inline-block; + display: flex; + flex-wrap: nowrap; +} + +.vertical-tabs .tab label { + align-items: center; + background: #e5e5e5; + border: 1px solid #e5e5e5; + color: #7f7f7f; + cursor: pointer; + font-size: 18px; + font-weight: bold; + padding: 0 20px; + width: 28%; +} + +.vertical-tabs .tab label:hover { + background: #d8d8d8; +} + +.vertical-tabs .tab label:active { + background: #ccc; +} + +.vertical-tabs .tab .content { + display: none; + border: 1px solid #e5e5e5; + border-left: 0; + border-right: 0; + max-height: 950px; + overflow: auto; +} + +.vertical-tabs .tab .content.full-height { + max-height: none; +} + +.vertical-tabs [type=radio]:checked + label { + border: 0; + background: #fff; + color: #000; + width: 38%; +} + +.vertical-tabs [type=radio]:focus + label { + box-shadow: inset 0px 0px 0px 3px #2aa1c0; + z-index: 1; +} + +.vertical-tabs [type=radio]:checked ~ .content { + display: block; +} + diff --git a/public/css/base.css b/public/css/general.css similarity index 73% rename from public/css/base.css rename to public/css/general.css index 8b2a9439..a8e5cbb1 100644 --- a/public/css/base.css +++ b/public/css/general.css @@ -1,5 +1,3 @@ -@import "./marx.css"; - :root { --blue-link: rgb(18, 113, 219); --link-shadow: 1px 1px 1px #000; @@ -56,6 +54,11 @@ a:hover, a:active { color: var(--link-hover-color) } +iframe { + display: block; + margin: 0 auto; +} + /* ----------------------------------------------------------------------------- Utility classes ------------------------------------------------------------------------------*/ @@ -169,7 +172,7 @@ a:hover, a:active { flex-wrap: wrap; align-content: space-evenly; justify-content: space-between; - position:relative; + position: relative; } td .media-wrap-flex { @@ -227,75 +230,6 @@ td .media-wrap-flex { font-weight: 500; } -/* ----------------------------------------------------------------------------- - CSS loading icon -------------------------------------------------------------------------------*/ - -.cssload-loader { - position: relative; - left: calc(50% - 31px); - width: 62px; - height: 62px; - border-radius: 50%; - perspective: 780px; -} - -.cssload-inner { - position: absolute; - width: 100%; - height: 100%; - box-sizing: border-box; - border-radius: 50%; -} - -.cssload-inner.cssload-one { - left: 0%; - top: 0%; - animation: cssload-rotate-one 1.15s linear infinite; - border-bottom: 3px solid rgb(0, 0, 0); -} - -.cssload-inner.cssload-two { - right: 0%; - top: 0%; - animation: cssload-rotate-two 1.15s linear infinite; - border-right: 3px solid rgb(0, 0, 0); -} - -.cssload-inner.cssload-three { - right: 0%; - bottom: 0%; - animation: cssload-rotate-three 1.15s linear infinite; - border-top: 3px solid rgb(0, 0, 0); -} - -@keyframes cssload-rotate-one { - 0% { - transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); - } - 100% { - transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); - } -} - -@keyframes cssload-rotate-two { - 0% { - transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); - } - 100% { - transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); - } -} - -@keyframes cssload-rotate-three { - 0% { - transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); - } - 100% { - transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); - } -} - /* ----------------------------------------------------------------------------- Table sorting and form styles ------------------------------------------------------------------------------*/ @@ -352,8 +286,6 @@ td .media-wrap-flex { border: 0; } - - /* ----------------------------------------------------------------------------- Message boxes ------------------------------------------------------------------------------*/ @@ -430,7 +362,7 @@ td .media-wrap-flex { height: 311px; margin: var(--normal-padding); z-index: 0; - background: rgba(0,0,0,0.15); + background: rgba(0, 0, 0, 0.15); } .details picture.cover, @@ -723,13 +655,13 @@ picture.cover { } .fixed { - max-width: 100rem; - /* max-width: 80%; */ + /* max-width: 100rem; */ + max-width: 80%; margin: 0 auto; } .fixed .text { - max-width: 600px; + max-width: 40em; } .details .cover { @@ -839,19 +771,32 @@ picture.cover { } .max-table { - min-width:100%; + min-width: 100%; margin: 0; } aside.info { + /* max-width: 390px; */ + max-width: 33%; +} + +.fixed aside.info { max-width: 390px; } +/* .fixed aside.info + article { + max-width: inherit; +} */ + aside.info picture, aside.info img { display: block; margin: 0 auto; } +aside.info + article { + max-width: 66%; +} + /* ---------------------------------------------------------------------------- User page styles -----------------------------------------------------------------------------*/ @@ -876,26 +821,6 @@ aside.info picture, aside.info img { height: 100%; } -/* ---------------------------------------------------------------------------- - Viewport-based styles ------------------------------------------------------------------------------*/ - -@media screen and (max-width: 40em) { - nav a { - line-height: 4em; - line-height: 4rem; - } - - .media { - margin: 2px 0; - } - - main { - padding: 0 0, 5em 0.5em; - padding: 0 0.5rem 0.5rem; - } -} - /* ---------------------------------------------------------------------------- Images / Logos -----------------------------------------------------------------------------*/ @@ -906,7 +831,7 @@ aside.info picture, aside.info img { } .cover-streaming-link { - display:none; + display: none; } .media:hover .cover-streaming-link { @@ -920,195 +845,6 @@ aside.info picture, aside.info img { filter: drop-shadow(0 -1px 4px #fff); } -/* ---------------------------------------------------------------------------- - Loading overlay ------------------------------------------------------------------------------*/ -#loading-shadow { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - z-index: 500; -} - -#loading-shadow .loading-wrapper { - position: fixed; - z-index: 501; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -#loading-shadow .loading-content { - position: relative; - color: #fff -} - -.loading-content .cssload-inner.cssload-one, -.loading-content .cssload-inner.cssload-two, -.loading-content .cssload-inner.cssload-three { - border-color: #fff -} - -/* ---------------------------------------------------------------------------- -CSS Tabs ------------------------------------------------------------------------------*/ -.tabs { - display: inline-block; - display: flex; - flex-wrap: wrap; - background: #efefef; - box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); - margin-top: 1.5em; -} - -.tabs > label { - border: 1px solid #e5e5e5; - width: 100%; - padding: 20px 30px; - background: #e5e5e5; - cursor: pointer; - font-weight: bold; - font-size: 18px; - color: #7f7f7f; - transition: background 0.1s, color 0.1s; - /* margin-left: 4em; */ -} - -.tabs > label:hover { - background: #d8d8d8; -} - -.tabs > label:active { - background: #ccc; -} - -.tabs > [type=radio]:focus + label { - box-shadow: inset 0px 0px 0px 3px #2aa1c0; - z-index: 1; -} - -.tabs > [type=radio] { - position: absolute; - opacity: 0; -} - -.tabs > [type=radio]:checked + label { - border-bottom: 1px solid #fff; - background: #fff; - color: #000; -} - -.tabs > [type=radio]:checked + label + .content { - border: 1px solid #e5e5e5; - border-top: 0; - display: block; - padding: 15px; - background: #fff; - width: 100%; - margin: 0 auto; - - overflow: auto; - /* text-align: center; */ -} - -.tabs .content { - display: none; - max-height: 950px; -} - -.tabs .content.full-height { - max-height: none; -} - -@media (min-width: 600px) { - .tabs > label { - width: auto; - } - - .tabs .content { - order: 99; - } -} - -/* --------------------------------------------------------------------------- - Vertical Tabs - ----------------------------------------------------------------------------*/ - -.vertical-tabs { - border: 1px solid #e5e5e5; - box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); - margin: 0 auto; - position: relative; - width: 100%; -} - -.vertical-tabs input[type="radio"] { - display: none; -} - -.vertical-tabs .tab { - align-items: center; - display: inline-block; - display: flex; - flex-wrap: nowrap; -} - -.vertical-tabs .tab label { - align-items: center; - background: #e5e5e5; - border: 1px solid #e5e5e5; - color: #7f7f7f; - cursor: pointer; - font-size: 18px; - font-weight: bold; - padding: 0 20px; - width: 28%; -} - -.vertical-tabs .tab label:hover { - background: #d8d8d8; -} - -.vertical-tabs .tab label:active { - background: #ccc; -} - -.vertical-tabs .tab .content { - display: none; - border: 1px solid #e5e5e5; - border-left: 0; - border-right: 0; - max-height: 950px; - overflow: auto; -} - -.vertical-tabs .tab .content.full-height { - max-height: none; -} - -.vertical-tabs [type=radio]:checked + label { - border: 0; - background: #fff; - color: #000; - width: 38%; -} - -.vertical-tabs [type=radio]:focus + label { - box-shadow: inset 0px 0px 0px 3px #2aa1c0; - z-index: 1; -} - -.vertical-tabs [type=radio]:checked ~ .content { - display: block; -} - /* ---------------------------------------------------------------------------- Settings Form -----------------------------------------------------------------------------*/ @@ -1117,3 +853,23 @@ Settings Form display: inline-block; width: auto; } + +/* ---------------------------------------------------------------------------- +iFrame container +-----------------------------------------------------------------------------*/ + +.responsive-iframe { + margin-top: 1em; + overflow: hidden; + padding-bottom: 56.25%; + position: relative; + height: 0; +} + +.responsive-iframe iframe { + left: 0; + top: 0; + height: 100%; + width: 100%; + position: absolute; +} \ No newline at end of file diff --git a/public/css/responsive.css b/public/css/responsive.css new file mode 100644 index 00000000..1d7019b5 --- /dev/null +++ b/public/css/responsive.css @@ -0,0 +1,99 @@ +/* ---------------------------------------------------------------------------- + Viewport-based styles +-----------------------------------------------------------------------------*/ +@media screen and (max-width: 1100px) { + .flex { + flex-wrap: wrap; + } + + aside.info, + aside.info + article, + .fixed aside.info, + .fixed aside.info + article { + max-width: none; + width: 100%; + } + + /* aside.info { + order: 1; + } */ +} + +@media screen and (max-width: 800px) { + * { + max-width: none !important; + } + + table { + box-shadow: none; + } + + body, + .details .flex > * { + margin: 0; + } +} + +@media screen and (max-width: 40em) { + nav a { + line-height: 4em; + line-height: 4rem; + } + + img, + picture { + width: 100%; + } + + main { + padding: 0 0, 5em 0.5em; + padding: 0 0.5rem 0.5rem; + } + + table { + display: block; + } + + .media { + margin: 2px 0; + } + + .details { + padding: 0.5em; + padding: 0.5rem; + } + + /* Expand tabs */ + .tabs > [type="radio"]:checked + label { + background: #fff; + } + + /* Expand vertical tabs */ + .vertical-tabs .tab { + flex-wrap: wrap; + } + + .tabs .content, + .tabs > [type="radio"]:checked + label + .content, + .vertical-tabs .tab .content { + display: block; + border: 0; + max-height: none; + } + + .tabs > label, + .tabs > label:active, + .tabs > label:hover, + .tabs > [type="radio"]:checked + label, + .vertical-tabs .tab label, + .vertical-tabs .tab label:active, + .vertical-tabs .tab label:hover, + .vertical-tabs [type=radio]:focus + label, + .vertical-tabs [type=radio]:checked + label { + background: #fff; + border: 0; + width: 100%; + cursor: default; + color: #000; + } +} \ No newline at end of file diff --git a/public/tools/css.js b/public/tools/css.js index df99fd96..507890d6 100644 --- a/public/tools/css.js +++ b/public/tools/css.js @@ -7,7 +7,7 @@ const atImport = require('postcss-import'); const cssNext = require('postcss-cssnext'); const cssNano = require('cssnano'); -const css = fs.readFileSync('css/base.css', 'utf-8'); +const css = fs.readFileSync('css/all.css', 'utf-8'); postcss() .use(atImport()) @@ -21,7 +21,7 @@ postcss() } })) .process(css, { - from: 'css/base.css', + from: 'css/all.css', to: 'css/app.min.css' }).then(result => { fs.writeFileSync('css/app.min.css', result.css);