:root { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; box-sizing:border-box; cursor:default; font-family:'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; line-height:1.4; overflow-y:scroll; 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 { display:block; margin:0 auto; padding:0 1.6em 1.6em; padding:0 16px 16px; padding:0 1.6rem 1.6rem; } summary { display:block; } pre { background:#efefef; color:#444; display:block; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; font-size:1.4em; font-size:14px; font-size:1.4rem; margin:1.6em 0; margin:16px 0; margin:1.6rem 0; overflow:auto; padding:1.6em; padding:16px; 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:1px solid #ccc; border:.1rem solid #ccc; border-radius:0; display:block; margin-bottom:8px; margin-bottom:.8rem; overflow:auto; padding:8px; 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; } *,::before,::after { border-style:solid; border-width:0; box-sizing:inherit; } * { font-size:inherit; line-height:inherit; margin:0; padding:0; } ::before,::after { 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:1px solid #ccc; 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:Menlo, Monaco, Consolas, 'Courier New', monospace, monospace; } table { border-collapse:collapse; border-spacing:0; margin-bottom:16px; 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:'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; font-size:16px; font-size:1.6rem; font-style:normal; font-weight:400; padding:0; } p { margin:0 0 16px; margin:0 0 1.6rem; } h1,h2,h3,h4,h5,h6 { font-family:Lato, 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; margin:2em 0 1.6em; margin:20px 0 16px; margin:2rem 0 1.6rem; } h1 { border-bottom:1px solid rgba(0, 0, 0, .2); 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; } h2 { font-size:3em; font-size:30px; font-size:3rem; font-style:normal; font-weight:500; } h3 { font-size:2.4em; font-size:24px; font-size:2.4rem; font-style:normal; font-weight:500; margin:16px 0 4px; margin:1.6rem 0 .4rem; } h4 { font-size:1.8em; font-size:18px; font-size:1.8rem; font-style:normal; font-weight:600; margin:16px 0 4px; margin:1.6rem 0 .4rem; } h5 { font-size:1.6em; font-size:16px; font-size:1.6rem; font-style:normal; font-weight:600; margin:16px 0 4px; margin:1.6rem 0 .4rem; } h6 { color:#777; font-size:1.4em; font-size:14px; font-size:1.4rem; font-style:normal; font-weight:600; margin:16px 0 4px; margin:1.6rem 0 .4rem; } code { background:#efefef; color:#444; font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; font-size:14px; font-size:1.4rem; word-break:break-all; word-wrap:break-word; } a:hover,a:focus { text-decoration:none; } dl { margin-bottom:16px; margin-bottom:1.6rem; } dd { margin-left:40px; margin-left:4rem; } ul,ol { margin-bottom:8px; margin-bottom:.8rem; padding-left:20px; padding-left:2rem; } blockquote { border-left:2px solid #1271db; border-left:.2rem solid #1271db; font-family:Georgia, Times, 'Times New Roman', serif; font-style:italic; margin:16px 0; margin:1.6rem 0; padding-left:16px; padding-left:1.6rem; } figcaption { font-family:Georgia, Times, 'Times New Roman', serif; } html { font-size:62.5%; } main,header,footer,article,section,aside,details,summary { display:block; height:auto; margin:0 auto; width:100%; } footer { border-top:1px solid rgba(0, 0, 0, .2); border-top:.1rem solid rgba(0, 0, 0, .2); clear:both; display:inline-block; float:left; max-width:100%; padding:10px 0; padding:1rem 0; text-align:center; } hr { border-top:1px solid rgba(0, 0, 0, .2); border-top:.1rem solid rgba(0, 0, 0, .2); display:block; margin-bottom:16px; margin-bottom:1.6rem; width:100%; } img { height:auto; max-width:100%; vertical-align:baseline; } 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 { border:1px solid #ccc; border:.1rem solid #ccc; border-radius:0; display:inline-block; padding:8px; padding:.8rem; vertical-align:middle; } input:not([type]) { -webkit-appearance:none; background-clip:padding-box; background-color:#fff; border:1px solid #ccc; border:.1rem solid #ccc; border-radius:0; color:#444; display:inline-block; padding:8px; padding:.8rem; text-align:left; } input[type=color] { padding:8px 16px; padding:.8rem 1.6rem; } 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 { border-color:#b3d4fc; } input:not([type]):focus { border-color:#b3d4fc; } input[type=radio],input[type=checkbox] { vertical-align:middle; } input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus { outline:1px solid thin #444; outline:.1rem solid thin #444; } 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] { background-color:#efefef; color:#777; cursor:not-allowed; } input:not([type])[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,textarea:focus:invalid,select:focus:invalid { border-color:#e9322d; color:#b94a48; } input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus,input[type=checkbox]:focus:invalid:focus { outline-color:#ff4136; } select { background-color:#fff; border:1px solid #ccc; border:.1rem solid #ccc; } select[multiple] { height:auto; } label { line-height:2; } fieldset { border:0; margin:0; padding:8px 0; padding:.8rem 0; } legend { border-bottom:1px solid #ccc; border-bottom:.1rem solid #ccc; color:#444; display:block; margin-bottom:8px; margin-bottom:.8rem; padding:8px 0; padding:.8rem 0; width:100%; } input[type=submit],button { -moz-user-select:none; -ms-user-select:none; -webkit-transition:.25s ease; -webkit-user-drag:none; -webkit-user-select:none; border:2px solid #444; border:.2rem solid #444; border-radius:0; color:#444; cursor:pointer; display:inline-block; margin-bottom:8px; margin-bottom:.8rem; margin-right:4px; margin-right:.4rem; padding:8px 16px; padding:.8rem 1.6rem; text-align:center; text-decoration:none; text-transform:uppercase; transition:.25s ease; user-select:none; vertical-align:baseline; } input[type=submit] a,button a { color:#444; } input[type=submit]::-moz-focus-inner,button::-moz-focus-inner { padding:0; } input[type=submit]:hover,button:hover { background:#444; border-color:#444; color:#fff; } input[type=submit]:hover a,button:hover a { color:#fff; } input[type=submit]:active,button:active { background:#6a6a6a; border-color:#6a6a6a; color:#fff; } input[type=submit]:active a,button:active a { color:#fff; } input[type=submit]:disabled,button:disabled { box-shadow:none; cursor:not-allowed; opacity:.40; } 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:2px solid transparent; border-bottom:.2rem solid transparent; color:#444; padding:8px 16px; 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:8px 0; padding:.8rem 0; } thead th { background:#efefef; color:#444; } tr { background:#fff; margin-bottom:8px; margin-bottom:.8rem; } th,td { border:1px solid #ccc; border:.1rem solid #ccc; padding:8px 16px; 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:16px 4px; padding:1.6rem .4rem; } @media screen { [hidden~=screen] { display:inherit; } [hidden~=screen]:not(:active):not(:focus):not(:target) { clip:rect(0000)!important; position:absolute!important; } } @media screen and max-width 40rem { article,section,aside { clear:both; display:block; max-width:100%; } img { margin-right:1.6rem; } } template, [hidden="hidden"], .media[hidden] {display:none} body {margin: 0.5em;} button { background:rgba(255, 255, 255, .65); margin: 0; } table { min-width:85%; margin: 0 auto; } td { padding:1em; padding:10px; padding:1rem; } thead td, thead th { padding:0.5em; padding:5px; padding:0.5rem; } input[type=number] { width: 4em; } tbody > tr:nth-child(odd) { background: #ddd; } a:hover, a:active { color:#7d12db } /* ----------------------------------------------------------------------------- Utility classes ------------------------------------------------------------------------------*/ .bracketed { color:#12db18; } .bracketed, h1 a { text-shadow:1px 1px 1px #000; } .bracketed:before {content: '[\00a0'} .bracketed:after {content: '\00a0]'} .bracketed:hover, .bracketed:active { 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-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-space-around {-ms-flex-pack: distribute;justify-content: space-around} .flex-self-center {-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center} .flex {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} .align_left {text-align:left} .align_right {text-align:right} .valign_top {vertical-align:top} .no_border {border:none} .media-wrap { text-align:center; margin:0 auto; } .danger { background-color: #ff4136; border-color: #924949; color:#fff; } .danger:hover, .danger:active { background-color: #924949; border-color: #ff4136; color:#fff; } .user-btn { border-color:#12db18; color:#12db18; text-shadow:1px 1px 1px #000; padding:0 0.5em; padding:0 5px; padding:0 0.5rem; } .user-btn:hover, .user-btn:active { border-color:#db7d12; background-color:#db7d12; } /* ----------------------------------------------------------------------------- CSS loading icon ------------------------------------------------------------------------------*/ .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%; 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 rgb(0, 0, 0); } .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 rgb(0, 0, 0); } .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 rgb(0, 0, 0); } @-webkit-keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @-webkit-keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @-webkit-keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } @keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } /* ----------------------------------------------------------------------------- Table sorting and form styles ------------------------------------------------------------------------------*/ .sorting, .sorting_asc, .sorting_desc { vertical-align:text-bottom; } .sorting::before { content: " ↕\00a0"; } .sorting_asc::before { content: " ↑\00a0"; } .sorting_desc::before { content: " ↓\00a0"; } .form { width:100%; } .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(even) { text-align:left; width:70%; } .invisible tbody > tr:nth-child(odd) { background: inherit; } .invisible tr, .invisible td, .invisible th { border:0; } /* ----------------------------------------------------------------------------- Message boxes ------------------------------------------------------------------------------*/ .message{ position:relative; margin:0.5em auto; padding:0.5em; width:95%; } .message .close{ width:1em; height:1em; position:absolute; right:0.5em; top:0.5em; text-align:center; vertical-align:middle; line-height:1em; } .message:hover .close:after { content: '☒'; } .message:hover { cursor:pointer; } .message .icon{ left:0.5em; top:0.5em; margin-right:1em; } .message.error{ border:1px solid #924949; background: #f3e6e6; } .message.error .icon::after { content: '✘'; } .message.success{ border:1px solid #1f8454; background: #70dda9; } .message.success .icon::after { content: '✔' } .message.info{ border:1px solid #bfbe3a; background: #FFFFCC; } .message.info .icon::after { content: '⚠'; } /* ----------------------------------------------------------------------------- Base list styles ------------------------------------------------------------------------------*/ .media { position:relative; vertical-align:top; display:inline-block; text-align:center; width:220px; height:311px; margin:0.25em 0.125em; } .media .edit_buttons > button { margin:0.5em auto; } .name, .media_metadata > div, .medium_metadata > div, .row { text-shadow:1px 2px 1px rgba(0, 0, 0, .85); background:rgba(0, 0, 0, .45); color:#ffffff; padding:0.25em 0.125em; text-align:right; } .media_type, .age_rating { 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:hover > .name, .media:hover > .media_metadata > div, .media:hover > .medium_metadata > div, .media:hover > .table .row { -webkit-transition:.25s ease; transition: .25s ease; background:rgba(0, 0, 0, .75); } .media:hover > button[hidden], .media:hover > .edit_buttons[hidden] { -webkit-transition:.25s ease; transition: .25s ease; display:block; } .media > .name a, .media > .name a small { background:none; color:#fff; text-shadow:1px 2px 1px rgba(0, 0, 0, .85); } /* ----------------------------------------------------------------------------- Anime-list-specific styles ------------------------------------------------------------------------------*/ .anime .name, .manga .name { text-align:center; width:100%; padding:0.5em 0.25em; } .anime .media_type, .anime .airing_status, .anime .user_rating, .anime .completion, .anime .age_rating, .anime .edit, .anime .delete { background: none; text-align:center; } .anime .table, .manga .table { position:absolute; bottom:0; left:0; width:100%; } .anime .row, .manga .row { width:100%; background:rgba(0, 0, 0, .45); 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; } .anime .row > div, .manga .row > div { font-size:0.8em; display:flex-item; -ms-flex-item-align:center; align-self:center; text-align:center; vertical-align:middle; } .anime .media > button.plus_one { position:absolute; top: 138px; top: calc(50% - 21.5px); left: 44px; left: calc(50% - 66.5px); } /* ----------------------------------------------------------------------------- Manga-list-specific styles ------------------------------------------------------------------------------*/ .manga .row { padding:1px; } .manga .media { border:1px solid #ddd; height:310px; margin:0.25em; } .manga .media > .edit_buttons { position:absolute; top: 86px; top: calc(50% - 58.5px); left: 43.5px; left: calc(50% - 66.5px); } /* ----------------------------------------------------------------------------- Search page styles ------------------------------------------------------------------------------*/ .media.search > .name { background-color:#555; background-color: rgba(0, 0, 0, .35); background-size: cover; background-size: contain; background-repeat: no-repeat; } .big-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: greenyellow; position:absolute; top:5px; left:0; height:100%; width:100%; } #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; } #series_list .name small { color: #fff; } /* ---------------------------------------------------------------------------- Details page styles -----------------------------------------------------------------------------*/ .details { margin:15px auto 0 auto; margin: 1.5rem auto 0 auto; max-width:930px; max-width:93rem; padding:10px; padding:1rem; font-size:inherit; } .details .cover { max-width: 300px; max-height: 435px; } .details h2 { margin-top: 0; } .details .flex > div { margin:10px; margin: 1rem; } .details table { max-width:300px; } .details td { padding:0 15px; padding:0 1.5rem; } .details p { text-align:justify; } .details td:nth-child(odd) { width:1%; white-space:nowrap; text-align:right; } .details td:nth-child(even) { text-align:left; } /* ---------------------------------------------------------------------------- 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; } }