@import url(https://cdn.jsdelivr.net/npm/skeleton-css@2.0.4/css/normalize.css); .button, button, input[type='button'], input[type='reset'], input[type='submit'] { background-color: #00a1cc; border: 0.1rem solid #00a1cc; border-radius: .4rem; color: #fff; cursor: pointer; display: inline-block; font-size: 1.1rem; font-weight: 700; height: 3.4rem; letter-spacing: .1rem; line-height: 3.4rem; padding: 0 2.8rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover { background-color: #606c76; border-color: #606c76; color: #fff; outline: 0; } .button[disabled], button[disabled], input[type='button'][disabled], input[type='reset'][disabled], input[type='submit'][disabled] { cursor: default; opacity: .5; } .button[disabled]:focus, .button[disabled]:hover, button[disabled]:focus, button[disabled]:hover, input[type='button'][disabled]:focus, input[type='button'][disabled]:hover, input[type='reset'][disabled]:focus, input[type='reset'][disabled]:hover, input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover { background-color: #00a1cc; border-color: #00a1cc; } .button.button-outline, button.button-outline, input[type='button'].button-outline, input[type='reset'].button-outline, input[type='submit'].button-outline { background-color: transparent; color: #00a1cc; } .button.button-outline:focus, .button.button-outline:hover, button.button-outline:focus, button.button-outline:hover, input[type='button'].button-outline:focus, input[type='button'].button-outline:hover, input[type='reset'].button-outline:focus, input[type='reset'].button-outline:hover, input[type='submit'].button-outline:focus, input[type='submit'].button-outline:hover { background-color: transparent; border-color: #606c76; color: #606c76; } .button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover, button.button-outline[disabled]:focus, button.button-outline[disabled]:hover, input[type='button'].button-outline[disabled]:focus, input[type='button'].button-outline[disabled]:hover, input[type='reset'].button-outline[disabled]:focus, input[type='reset'].button-outline[disabled]:hover, input[type='submit'].button-outline[disabled]:focus, input[type='submit'].button-outline[disabled]:hover { border-color: inherit; color: #00a1cc; } .button.button-clear, button.button-clear, input[type='button'].button-clear, input[type='reset'].button-clear, input[type='submit'].button-clear { background-color: transparent; border-color: transparent; color: #00a1cc; } .button.button-clear:focus, .button.button-clear:hover, button.button-clear:focus, button.button-clear:hover, input[type='button'].button-clear:focus, input[type='button'].button-clear:hover, input[type='reset'].button-clear:focus, input[type='reset'].button-clear:hover, input[type='submit'].button-clear:focus, input[type='submit'].button-clear:hover { background-color: transparent; border-color: transparent; color: #606c76; } .button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover, button.button-clear[disabled]:focus, button.button-clear[disabled]:hover, input[type='button'].button-clear[disabled]:focus, input[type='button'].button-clear[disabled]:hover, input[type='reset'].button-clear[disabled]:focus, input[type='reset'].button-clear[disabled]:hover, input[type='submit'].button-clear[disabled]:focus, input[type='submit'].button-clear[disabled]:hover { color: #00a1cc; } select { background: url('data:image/svg+xml;utf8,') center right no-repeat; padding-right: 3.0rem; } select:focus { background-image: url('data:image/svg+xml;utf8,'); } textarea { min-height: 6.5rem; width: 100%; } select { width: 100%; } label, legend { display: block; margin-bottom: .5rem; } fieldset { border-width: 0; padding: 0; } input[type='checkbox'], input[type='radio'] { display: inline; } .label-inline { display: inline-block; font-weight: normal; margin-left: .5rem; } dl, ol, ul { list-style: none; margin-top: 0; padding-left: 0; } ol { list-style: decimal inside; } ul { list-style: circle inside; } .button, button, dd, dt, li { margin-bottom: 1.0rem; } fieldset, input, select, textarea { margin-bottom: 1.5rem; } blockquote, dl, figure, form, ol, p, pre, table, ul { margin-bottom: 1rem; } b, strong { font-weight: bold; } p { margin-top: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 300; letter-spacing: -.1rem; margin-bottom: 2.0rem; margin-top: 0; } h1 { font-size: 4.6rem; line-height: 1.2; } h2 { font-size: 3.6rem; line-height: 1.25; } h3 { font-size: 2.8rem; line-height: 1.3; } h4 { font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35; } h5 { font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5; } h6 { font-size: 1.6rem; letter-spacing: 0; line-height: 1.4; } img { max-width: 100%; object-fit: contain; } img.emoji { height: 14px; box-sizing: border-box; object-fit: contain; position: relative; top: 3px; } img.emoji--large { height: 20px; position: relative; top: 2px; } .clearfix:after { clear: both; content: ' '; display: table; } .float-left { float: left; } .float-right { float: right; } .highlight { font-weight: bold; } :root { font-size: 10px; } *, *:after, *:before { box-sizing: inherit; } html { box-sizing: border-box; height: 100%; } body { color: #606c76; font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif; font-size: 1.3rem; font-weight: 300; letter-spacing: .05rem; line-height: 1.6; margin: 0; height: 100%; } textarea { font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif; } a { color: #00a1cc; text-decoration: none; } a:active, a:hover, a:hover:visited { color: #606c76; } li { list-style: none; } input[type=text]::-ms-clear, input[type=text]::-ms-reveal { display: none; width: 0; height: 0; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='date'], input[type='time'], input[type='color'], textarea, select { appearance: none; background-color: transparent; border: 0.1rem solid #ccc; border-radius: .4rem; box-shadow: none; box-sizing: inherit; padding: .6rem 1.0rem; } input[type='email']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='date']:focus, input[type='time']:focus, input[type='color']:focus, textarea:focus, select:focus { border-color: #00a1cc; outline: 0; } input[type='email']::placeholder, input[type='number']::placeholder, input[type='password']::placeholder, input[type='search']::placeholder, input[type='tel']::placeholder, input[type='text']::placeholder, input[type='url']::placeholder, input[type='date']::placeholder, input[type='time']::placeholder, input[type='color']::placeholder, textarea::placeholder, select::placeholder { color: #ccc; } ::selection { color: white; background-color: #00a1cc; } .navbar { background-color: #f7f7f7; box-sizing: border-box; padding: 10px 0; margin-bottom: 50px; border-bottom: #ccc 0.5px solid; } .navbar .navbar__wrapper { display: flex; justify-content: space-between; align-items: center; position: relative; } .navbar .navbar__logo { flex-basis: 100px; } .navbar .navbar__logo-link { display: inline-block; } .navbar .navbar__link-list { margin: 0; display: flex; justify-content: space-around; } .navbar .navbar__link { margin: 9px; color: #606c76; } .navbar .navbar__link:active, .navbar .navbar__link:hover, .navbar .navbar__link:hover:visited { color: #00a1cc; } .navbar .navbar__link:visited { color: #606c76; } .navbar .navbar__search-box { margin: 0 12% 0 15px; display: inline-flex; flex: 1; } .navbar .navbar__search-box > input[type="search"] { border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; height: 32px; background-color: white !important; width: 100%; } .navbar .navbar__search-box .navbar__search-dropdown { margin: 0; margin-left: -1px; padding: 0; padding-left: 10px; color: #606c76; appearance: auto; background-color: white; height: 32px; width: 80px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .navbar .navbar__dropdown-btn { display: none; padding: 0; margin: 0; border: none; background-color: transparent; color: #00a1cc; } .navbar .navbar__dropdown-btn:focus, .navbar .navbar__dropdown-btn:hover { background-color: transparent; color: #606c76; } @media (max-width: 575.98px) { .navbar { padding: 2px 0; } .navbar .navbar__wrapper { display: block; } .navbar .navbar__logo-img { width: 72px; margin-right: 10px; position: relative; top: 7px; } .navbar .navbar__link-list { margin-top: 7px; max-height: 0; transition: max-height 0.6s ease-out; overflow: hidden; } .navbar .navbar__dropdown-btn { display: block; position: absolute; right: 5px; top: 3px; transform: scale(0.7); } .navbar .navbar__dropdown-btn:hover + .navbar__link-list { max-height: 500px; transition: max-height 0.6s ease-in; } .navbar .navbar__search-box { margin: 0; width: 46vw; } .navbar .navbar__search-box > input[type="search"] { height: 26px; padding: 4px 6px; width: 32vw; } .navbar .navbar__search-box .navbar__search-dropdown { cursor: pointer; height: 26px; width: 80px; padding-left: 5px; } } @media (max-width: 991.98px) { .navbar { margin-bottom: 20px; } } .grid { margin: 0 auto; position: relative; max-width: 110rem; padding: 0 2.0rem; width: 100%; } .grid .grid__main { width: 70%; float: left; position: relative; } .grid .grid__aside { width: 26%; float: right; position: relative; display: flex; flex-direction: column; justify-content: space-around; } .grid::after { content: ' '; clear: both; display: table; } @media (max-width: 575.98px) { .grid .grid__aside { flex-direction: column !important; } } @media (max-width: 991.98px) { .grid .grid__main { width: 100%; float: none; } .grid .grid__aside { width: 100%; float: none; flex-direction: row; } .grid .grid__aside--tablet-column { flex-direction: column; } .grid--reverse-order { transform: scaleY(-1); } .grid .grid__main--reverse-order { transform: scaleY(-1); } .grid .grid__aside--reverse-order { transform: scaleY(-1); } } .pagination { text-align: center; width: 100%; } .pagination .pagination__page-link { font-weight: normal; margin: 0 5px; } .pagination .pagination__page-link--current { font-weight: bold; font-size: 1.2em; color: #606c76; } .pagination .pagination__nav-link { font-size: 1.4em; margin: 0 2px; } .pagination .pagination__nav-link--right-margin { margin-right: 18px; } .pagination .pagination__nav-link--left-margin { margin-left: 18px; } .pagination .pagination__nav-link--hidden { display: none; } @media (max-width: 575.98px) { .pagination .pagination__page-link { margin: 0 3px; } .pagination .pagination__nav-link { font-size: 1.4em; margin: 0 2px; } .pagination .pagination__nav-link--right-margin { margin-right: 10px; } .pagination .pagination__nav-link--left-margin { margin-left: 10px; } } #page-wrapper { position: relative; min-height: 100vh; z-index: 0; } #content-wrapper { padding-bottom: 160px; } .footer { padding-top: 0.4em !important; text-align: center; margin-bottom: 4px !important; position: absolute !important; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; } .footer__border { padding-top: 4px; border-top: #f7f7f7 solid 2px; } .footer__link { margin: 0 12px; white-space: nowrap; } @media (max-width: 575.98px) { #content-wrapper { padding-bottom: 120px; } } .icon-lock svg { fill: #ccc; height: 12px; position: relative; top: 1px; margin-left: 3px; } .icon-edit svg { fill: #ccc; height: 12px; position: relative; top: 2px; } .icon-save svg { fill: #ccc; height: 12px; position: relative; top: 2px; } .icon-cross svg { fill: #ccc; height: 10px; position: relative; } .icon-arrow svg { fill: #606c76; height: 15px; position: relative; top: 3px; } .spinner { display: inline-block; position: relative; left: 50%; transform: translateX(-50%) scale(0.4); width: 80px; height: 80px; } .spinner div { transform-origin: 40px 40px; animation: spinner 1.2s linear infinite; } .spinner div::after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: #606c76; } .spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes spinner { 0% { opacity: 1; } 100% { opacity: 0; } } .bg-mask { background-color: black; z-index: 1; filter: opacity(20%); position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: none; } .mark-modal { z-index: 2; display: none; position: fixed; width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f7f7f7; padding: 20px 20px 10px 20px; color: #606c76; } .mark-modal .mark-modal__head { margin-bottom: 20px; } .mark-modal .mark-modal__head::after { content: ' '; clear: both; display: table; } .mark-modal .mark-modal__title { font-weight: bold; font-size: 1.2em; float: left; } .mark-modal .mark-modal__close-button { float: right; cursor: pointer; } .mark-modal .mark-modal__confirm-button { float: right; } .mark-modal input[type="radio"] { margin-right: 0; } .mark-modal .mark-modal__rating-star { display: inline; float: left; position: relative; left: -3px; } .mark-modal .mark-modal__status-radio { float: right; } .mark-modal .mark-modal__status-radio ul { margin-bottom: 0; } .mark-modal .mark-modal__status-radio li, .mark-modal .mark-modal__status-radio label { display: inline; } .mark-modal .mark-modal__status-radio input[type="radio"] { position: relative; top: 1px; } .mark-modal .mark-modal__clear { content: ' '; clear: both; display: table; } .mark-modal .mark-modal__content-input, .mark-modal form textarea { height: 200px; width: 100%; margin-top: 5px; margin-bottom: 5px; resize: vertical; } .mark-modal .mark-modal__tag { margin-bottom: 20px; } .mark-modal .mark-modal__option { margin-bottom: 24px; } .mark-modal .mark-modal__option::after { content: ' '; clear: both; display: table; } .mark-modal .mark-modal__visibility-radio { float: left; } .mark-modal .mark-modal__visibility-radio ul, .mark-modal .mark-modal__visibility-radio li, .mark-modal .mark-modal__visibility-radio label { display: inline; } .mark-modal .mark-modal__visibility-radio label { font-size: normal; } .mark-modal .mark-modal__visibility-radio input[type="radio"] { position: relative; top: 2px; } .mark-modal .mark-modal__share-checkbox { float: right; } .mark-modal .mark-modal__share-checkbox input[type="checkbox"] { position: relative; top: 2px; } .confirm-modal { z-index: 2; display: none; position: fixed; width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f7f7f7; padding: 20px 20px 10px 20px; color: #606c76; } .confirm-modal .confirm-modal__head { margin-bottom: 20px; } .confirm-modal .confirm-modal__head::after { content: ' '; clear: both; display: table; } .confirm-modal .confirm-modal__title { font-weight: bold; font-size: 1.2em; float: left; } .confirm-modal .confirm-modal__close-button { float: right; cursor: pointer; } .confirm-modal .confirm-modal__confirm-button { float: right; } .announcement-modal { z-index: 2; display: none; position: fixed; width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f7f7f7; padding: 20px 20px 10px 20px; color: #606c76; } .announcement-modal .announcement-modal__head { margin-bottom: 20px; } .announcement-modal .announcement-modal__head::after { content: ' '; clear: both; display: table; } .announcement-modal .announcement-modal__title { font-weight: bold; font-size: 1.2em; float: left; } .announcement-modal .announcement-modal__close-button { float: right; cursor: pointer; } .announcement-modal .announcement-modal__confirm-button { float: right; } .announcement-modal .announcement-modal__body { overflow-y: auto; max-height: 64vh; } .announcement-modal .announcement-modal__body .announcement__title { display: inline-block; } .announcement-modal .announcement-modal__body .announcement__datetime { color: #ccc; margin-left: 10px; } .announcement-modal .announcement-modal__body .announcement__content { word-break: break-all; } .add-to-list-modal { z-index: 2; display: none; position: fixed; width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f7f7f7; padding: 20px 20px 10px 20px; color: #606c76; } .add-to-list-modal .add-to-list-modal__head { margin-bottom: 20px; } .add-to-list-modal .add-to-list-modal__head::after { content: ' '; clear: both; display: table; } .add-to-list-modal .add-to-list-modal__title { font-weight: bold; font-size: 1.2em; float: left; } .add-to-list-modal .add-to-list-modal__close-button { float: right; cursor: pointer; } .add-to-list-modal .add-to-list-modal__confirm-button { float: right; } @media (max-width: 575.98px) { .mark-modal, .confirm-modal, .announcement-modal .add-to-list-modal { width: 100%; } } .source-label { display: inline; background: transparent; border-radius: .3rem; border-style: solid; border-width: .1rem; line-height: 1.2rem; font-size: 1.1rem; margin: 3px; padding: 1px 3px; padding-top: 2px; font-weight: lighter; letter-spacing: 0.1rem; word-break: keep-all; opacity: 1; position: relative; top: -1px; } .source-label.source-label__in-site { border-color: #00a1cc; color: #00a1cc; } .source-label.source-label__douban { border: none; color: white; background-color: #319840; } .source-label.source-label__spotify { background-color: #1ed760; color: black; border: none; font-weight: bold; } .source-label.source-label__imdb { background-color: #F5C518; color: #121212; border: none; font-weight: bold; } .source-label.source-label__igdb { background-color: #323A44; color: #DFE1E2; border: none; font-weight: bold; } .source-label.source-label__steam { background: linear-gradient(30deg, #1387b8, #111d2e); color: white; border: none; font-weight: 600; padding-top: 2px; } .source-label.source-label__bangumi { background: #FCFCFC; color: #F09199; font-style: italic; font-weight: 600; } .source-label.source-label__goodreads { background: #F4F1EA; color: #372213; font-weight: lighter; } .source-label.source-label__tmdb { background: linear-gradient(90deg, #91CCA3, #1FB4E2); color: white; border: none; font-weight: lighter; padding-top: 2px; } .source-label.source-label__googlebooks { color: white; background-color: #4285F4; border-color: #4285F4; } .source-label.source-label__bandcamp { color: white; background-color: #28A0C1; display: inline-block; } .source-label.source-label__bandcamp span { display: inline-block; margin: 0 4px; } .main-section-wrapper { padding: 32px 48px 32px 36px; background-color: #f7f7f7; overflow: auto; } .main-section-wrapper input, .main-section-wrapper select { width: 100%; } .entity-list .entity-list__title { margin-bottom: 20px; } .entity-list .entity-list__entity { display: flex; margin-bottom: 36px; } .entity-list .entity-list__entity::after { content: ' '; clear: both; display: table; } .entity-list .entity-list__entity-img { object-fit: contain; min-width: 130px; max-width: 130px; } .entity-list .entity-list__entity-text { margin-left: 20px; overflow: hidden; width: 100%; } .entity-list .entity-list__entity-text .tag-collection { margin-left: -3px; } .entity-list .entity-list__entity-link { font-size: 1.2em; } .entity-list .entity-list__entity-title { display: block; } .entity-list .entity-list__entity-category { color: #bbb; margin-left: 5px; position: relative; top: -1px; } .entity-list .entity-list__entity-info { max-width: 73%; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; position: relative; top: 0.52em; } .entity-list .entity-list__entity-info--full-length { max-width: 100%; } .entity-list .entity-list__entity-brief { margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-bottom: 0; } .entity-list .entity-list__rating { display: inline-block; margin: 0; } .entity-list .entity-list__rating--empty { margin-right: 5px; } .entity-list .entity-list__rating-score { margin-right: 5px; position: relative; top: 1px; } .entity-list .entity-list__rating-star { display: inline; position: relative; top: 0.3em; left: -0.3em; } .entity-detail .entity-detail__img { height: 210px; float: left; object-fit: contain; max-width: 150px; object-position: top; } .entity-detail .entity-detail__img-origin { cursor: zoom-in; } .entity-detail .entity-detail__info { float: left; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; width: 70%; } .entity-detail .entity-detail__title { font-weight: bold; } .entity-detail .entity-detail__title--secondary { color: #bbb; } .entity-detail .entity-detail__fields { display: inline-block; vertical-align: top; width: 46%; margin-left: 2%; } .entity-detail .entity-detail__fields div, .entity-detail .entity-detail__fields span { margin: 1px 0; } .entity-detail .entity-detail__fields + .tag-collection { margin-top: 5px; margin-left: 6px; } .entity-detail .entity-detail__rating { position: relative; top: -5px; } .entity-detail .entity-detail__rating-star { position: relative; left: -4px; top: 3px; } .entity-detail .entity-detail__rating-score { font-weight: bold; } .entity-detail::after { content: ' '; clear: both; display: table; } .entity-desc { margin-bottom: 28px; } .entity-desc .entity-desc__title { display: inline-block; margin-bottom: 8px; } .entity-desc .entity-desc__content { overflow: hidden; } .entity-desc .entity-desc__content--folded { max-height: 202px; } .entity-desc .entity-desc__unfold-button { display: flex; color: #00a1cc; background-color: transparent; justify-content: center; text-align: center; } .entity-desc .entity-desc__unfold-button--hidden { display: none; } .entity-marks { margin-bottom: 28px; } .entity-marks .entity-marks__title { margin-bottom: 8px; display: inline-block; } .entity-marks .entity-marks__title > a { margin-right: 5px; } .entity-marks .entity-marks__title--stand-alone { margin-bottom: 20px; } .entity-marks .entity-marks__more-link { margin-left: 5px; } .entity-marks .entity-marks__mark { margin: 0; padding: 3px 0; border-bottom: 1px dashed #e5e5e5; } .entity-marks .entity-marks__mark:last-child { border: none; } .entity-marks .entity-marks__mark--wider { padding: 6px 0; } .entity-marks .entity-marks__mark-content { margin-bottom: 0; } .entity-marks .entity-marks__mark-time { color: #ccc; margin-left: 2px; } .entity-marks .entity-marks__rating-star { position: relative; top: 4px; } .entity-reviews:first-child { margin-bottom: 28px; } .entity-reviews .entity-reviews__title { display: inline-block; margin-bottom: 8px; } .entity-reviews .entity-reviews__title > a { margin-right: 5px; } .entity-reviews .entity-reviews__title--stand-alone { margin-bottom: 20px; } .entity-reviews .entity-reviews__more-link { margin-left: 5px; } .entity-reviews .entity-reviews__review { margin: 0; padding: 3px 0; border-bottom: 1px dashed #e5e5e5; } .entity-reviews .entity-reviews__review:last-child { border: none; } .entity-reviews .entity-reviews__review--wider { padding: 6px 0; } .entity-reviews .entity-reviews__review-time { color: #ccc; margin-left: 2px; } .dividing-line { height: 0; width: 100%; margin: 40px 0 24px 0; border-top: solid 1px #ccc; } .dividing-line.dividing-line--dashed { margin: 0; margin-top: 10px; margin-bottom: 2px; border-top: 1px dashed #e5e5e5; } .entity-sort { position: relative; margin-bottom: 30px; } .entity-sort .entity-sort__label { font-size: large; display: inline-block; margin-bottom: 20px; } .entity-sort .entity-sort__more-link { margin-left: 8px; } .entity-sort .entity-sort__count { color: #bbb; } .entity-sort .entity-sort__count::before { content: '('; } .entity-sort .entity-sort__count::after { content: ')'; } .entity-sort .entity-sort__entity-list { display: flex; justify-content: flex-start; flex-wrap: wrap; } .entity-sort .entity-sort__entity { padding: 0 10px; flex-basis: 20%; text-align: center; display: inline-block; color: #606c76; } .entity-sort .entity-sort__entity:hover { color: #00a1cc; } .entity-sort .entity-sort__entity > a { color: inherit; } .entity-sort .entity-sort__entity-img { height: 110px; } .entity-sort .entity-sort__entity-name { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .entity-sort--placeholder { border: dashed #bbb 4px; } .entity-sort--hover { padding: 10px; border: dashed #00a1cc 2px !important; border-radius: 3px; } .entity-sort--sortable { padding: 10px; margin: 10px 0; border: dashed #bbb 2px; cursor: all-scroll; } .entity-sort--hidden { opacity: 0.4; } .entity-sort-control { display: flex; justify-content: flex-end; } .entity-sort-control__button { margin-top: 5px; margin-left: 12px; padding: 0 2px; cursor: pointer; color: #bbb; } .entity-sort-control__button:hover { color: #00a1cc; } .entity-sort-control__button:hover > .icon-save svg, .entity-sort-control__button:hover > .icon-edit svg { fill: #00a1cc; } .entity-sort-control__button--float-right { position: absolute; top: 4px; right: 10px; } .related-user-list .related-user-list__title { margin-bottom: 20px; } .related-user-list .related-user-list__user { display: flex; justify-content: flex-start; margin-bottom: 20px; } .related-user-list .related-user-list__user-info { margin-left: 15px; overflow: auto; } .related-user-list .related-user-list__user-avatar { max-height: 72px; min-width: 72px; } .review-head .review-head__title { display: inline-block; font-weight: bold; } .review-head .review-head__body { margin-bottom: 10px; } .review-head .review-head__body::after { content: ' '; clear: both; display: table; } .review-head .review-head__info { float: left; } .review-head .review-head__owner-link { color: #ccc; } .review-head .review-head__owner-link:hover { color: #00a1cc; } .review-head .review-head__time { color: #ccc; } .review-head .review-head__rating-star { position: relative; top: 3px; left: -1px; } .review-head .review-head__actions { float: right; } .review-head .review-head__action-link:not(:first-child) { margin-left: 5px; } .tag-collection { margin-left: -9px; } .tag-collection .tag-collection__tag { position: relative; display: block; float: left; color: white; background: #ccc; padding: 5px; border-radius: .3rem; line-height: 1.2em; font-size: 80%; margin: 3px; } .tag-collection .tag-collection__tag a { color: white; } .tag-collection .tag-collection__tag a:hover { color: #00a1cc; } .track-carousel { position: relative; margin-top: 5px; } .track-carousel__content { overflow: auto; scroll-behavior: smooth; scrollbar-width: none; display: flex; margin: auto; box-sizing: border-box; padding-bottom: 10px; } .track-carousel__content::-webkit-scrollbar { height: 3px; width: 1px; background-color: #e5e5e5; } .track-carousel__content::-webkit-scrollbar-thumb { background-color: #bbb; } .track-carousel__track { text-align: center; overflow: hidden; text-overflow: ellipsis; min-width: 18%; max-width: 18%; margin-right: 2.5%; } .track-carousel__track img { object-fit: contain; } .track-carousel__track-title { white-space: nowrap; } .track-carousel__button { display: flex; justify-content: center; align-content: center; background: white; border: none; padding: 8px; border-radius: 50%; outline: 0; cursor: pointer; position: absolute; top: 50%; } .track-carousel__button--prev { left: 0; transform: translate(50%, -50%); } .track-carousel__button--next { right: 0; transform: translate(-50%, -50%); } @media (max-width: 575.98px) { .entity-list .entity-list__entity { flex-direction: column; margin-bottom: 30px; } .entity-list .entity-list__entity-text { margin-left: 0; } .entity-list .entity-list__entity-img-wrapper { margin-bottom: 8px; } .entity-list .entity-list__entity-info { max-width: unset; } .entity-list .entity-list__rating--empty + .entity-list__entity-info { max-width: 70%; } .entity-list .entity-list__entity-brief { -webkit-line-clamp: 5; } .entity-detail { flex-direction: column; } .entity-detail .entity-detail__title { margin-bottom: 5px; } .entity-detail .entity-detail__info { margin-left: 0; float: none; display: flex; flex-direction: column; width: 100%; } .entity-detail .entity-detail__img { margin-bottom: 24px; float: none; height: unset; max-width: 170px; } .entity-detail .entity-detail__fields { width: unset; margin-left: unset; } .entity-detail .entity-detail__fields + .tag-collection { margin-left: -3px; } .dividing-line { margin-top: 24px; } .entity-sort .entity-sort__entity { flex-basis: 50%; } .entity-sort .entity-sort__entity-img { height: 130px; } .review-head .review-head__info { float: unset; } .review-head .review-head__actions { float: unset; } .track-carousel__content { padding-bottom: 10px; } .track-carousel__track { min-width: 31%; max-width: 31%; margin-right: 4.5%; } } @media (max-width: 991.98px) { .main-section-wrapper { padding: 32px 28px 28px 28px; } .entity-detail { display: flex; } } .aside-section-wrapper { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 28px 25px 12px 25px; background-color: #f7f7f7; margin-bottom: 30px; overflow: auto; } .aside-section-wrapper--transparent { background-color: unset; } .aside-section-wrapper--collapse { padding: unset; } .add-entity-entries .add-entity-entries__entry { margin-bottom: 10px; } .add-entity-entries .add-entity-entries__label { font-size: 1.2em; margin-bottom: 8px; } .add-entity-entries .add-entity-entries__button { line-height: unset; height: unset; padding: 4px 15px; margin: 5px; } .action-panel { margin-bottom: 20px; } .action-panel .action-panel__label { font-weight: bold; margin-bottom: 12px; } .action-panel .action-panel__button-group { display: flex; justify-content: space-between; } .action-panel .action-panel__button-group--center { justify-content: center; } .action-panel .action-panel__button { line-height: unset; height: unset; padding: 4px 15px; margin: 0 5px; } .mark-panel { margin-bottom: 20px; } .mark-panel .mark-panel__status { font-weight: bold; } .mark-panel .mark-panel__rating-star { position: relative; top: 2px; } .mark-panel .mark-panel__actions { float: right; } .mark-panel .mark-panel__actions form { display: inline; } .mark-panel .mark-panel__time { color: #ccc; margin-bottom: 10px; } .mark-panel .mark-panel__clear { content: ' '; clear: both; display: table; } .review-panel .review-panel__label { font-weight: bold; } .review-panel .review-panel__actions { float: right; } .review-panel .review-panel__time { color: #ccc; margin-bottom: 10px; } .review-panel .review-panel__review-title { display: block; margin-bottom: 15px; font-weight: bold; } .review-panel .review-panel__clear { content: ' '; clear: both; display: table; } .user-profile .user-profile__header { display: flex; align-items: flex-start; margin-bottom: 15px; } .user-profile .user-profile__avatar { width: 72px; } .user-profile .user-profile__username { font-size: large; margin-left: 10px; margin-bottom: 0; } .user-profile .user-profile__report-link { color: #ccc; } .user-relation .user-relation__label { display: inline-block; font-size: large; margin-bottom: 10px; } .user-relation .user-relation__more-link { margin-left: 5px; } .user-relation .user-relation__related-user-list { display: flex; justify-content: flex-start; } .user-relation .user-relation__related-user-list:last-of-type { margin-bottom: 0; } .user-relation .user-relation__related-user { flex-basis: 25%; padding: 0px 3px; text-align: center; display: inline-block; overflow: hidden; } .user-relation .user-relation__related-user > a:hover { color: #606c76; } .user-relation .user-relation__related-user-avatar { background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); width: 48px; height: 48px; } @media (min-width: 575.98px) and (max-width: 991.98px) { .user-relation .user-relation__related-user-avatar { height: unset; width: 60%; max-width: 96px; } } .user-relation .user-relation__related-user-name { color: inherit; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .report-panel .report-panel__label { display: inline-block; margin-bottom: 10px; } .report-panel .report-panel__body { padding-left: 0; } .report-panel .report-panel__report { margin: 2px 0; } .report-panel .report-panel__user-link { margin: 0 2px; } .report-panel .report-panel__all-link { margin-left: 5px; } .import-panel { overflow-x: hidden; } .import-panel .import-panel__label { display: inline-block; margin-bottom: 10px; } .import-panel .import-panel__body { padding-left: 0; border: 2px dashed #00a1cc; padding: 6px 9px; } .import-panel .import-panel__body form { margin: 0; } @media (max-width: 991.98px) { .import-panel .import-panel__body { border: unset; padding-left: 0; } } .import-panel .import-panel__help { background-color: #e5e5e5; border-radius: 100000px; display: inline-block; width: 16px; height: 16px; text-align: center; font-size: 12px; cursor: help; } .import-panel .import-panel__checkbox { display: inline-block; margin-right: 10px; } .import-panel .import-panel__checkbox label { display: inline; } .import-panel .import-panel__checkbox input[type="checkbox"] { margin: 0; position: relative; top: 2px; } .import-panel .import-panel__checkbox--last { margin-right: 0; } .import-panel .import-panel__file-input { margin-top: 10px; } .import-panel .import-panel__button { line-height: unset; height: unset; padding: 4px 15px; } .import-panel .import-panel__progress { padding-top: 10px; } .import-panel .import-panel__progress:not(:first-child) { border-top: #bbb 1px dashed; } .import-panel .import-panel__progress label { display: inline; } .import-panel .import-panel__progress progress { background-color: #d5d5d5; border-radius: 0; height: 10px; width: 54%; } .import-panel .import-panel__progress progress::-webkit-progress-bar { background-color: #d5d5d5; } .import-panel .import-panel__progress progress::-webkit-progress-value { background-color: #00a1cc; } .import-panel .import-panel__progress progress::-moz-progress-bar { background-color: #d5d5d5; } .import-panel .import-panel__last-task:not(:first-child) { padding-top: 4px; border-top: #bbb 1px dashed; } .import-panel .import-panel__last-task .index:not(:last-of-type) { margin-right: 8px; } .import-panel .import-panel__fail-urls { margin-top: 10px; } .import-panel .import-panel__fail-urls li { word-break: break-all; } .import-panel .import-panel__fail-urls ul { max-height: 100px; overflow-y: auto; } .relation-dropdown .relation-dropdown__button { display: none; } .entity-card { display: flex; margin-bottom: 10px; flex-direction: column; } .entity-card--horizontal { flex-direction: row; } .entity-card .entity-card__img { height: 150px; } .entity-card .entity-card__rating-star { position: relative; top: 4px; left: -3px; } .entity-card .entity-card__rating-score { position: relative; top: 1px; margin-left: 2px; } .entity-card .entity-card__title { margin-bottom: 10px; margin-top: 5px; } .entity-card .entity-card__info-wrapper--horizontal { margin-left: 20px; } .entity-card .entity-card__img-wrapper { flex-basis: 100px; } @media (max-width: 575.98px) { .add-entity-entries { display: block !important; } .add-entity-entries .add-entity-entries__button { width: 100%; margin: 5px 0 5px 0; } .aside-section-wrapper:first-child { margin-right: 0 !important; margin-bottom: 0 !important; } .aside-section-wrapper--singular:first-child { margin-bottom: 20px !important; } .action-panel { flex-direction: column !important; } .entity-card--horizontal { flex-direction: column !important; } .entity-card .entity-card__info-wrapper { margin-left: 10px !important; } .entity-card .entity-card__info-wrapper--horizontal { margin-left: 0 !important; } } @media (max-width: 991.98px) { .add-entity-entries { display: flex; justify-content: space-around; } .aside-section-wrapper { padding: 24px 25px 10px 25px; margin-top: 20px; } .aside-section-wrapper:not(:last-child) { margin-right: 20px; } .aside-section-wrapper--collapse { padding: 24px 25px 10px 25px !important; margin-top: 0; margin-bottom: 0; } .aside-section-wrapper--collapse:first-child { margin-right: 0; } .aside-section-wrapper--no-margin { margin: 0; } .action-panel { flex-direction: row; } .action-panel .action-panel__button-group { justify-content: space-evenly; } .relation-dropdown { margin-bottom: 20px; } .relation-dropdown .relation-dropdown__button { padding-bottom: 10px; background-color: #f7f7f7; width: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.3s; } .relation-dropdown .relation-dropdown__button:focus { background-color: red; } .relation-dropdown .relation-dropdown__button > .icon-arrow { transition: transform 0.3s; } .relation-dropdown .relation-dropdown__button:hover > .icon-arrow > svg { fill: #00a1cc; } .relation-dropdown .relation-dropdown__button > .icon-arrow--expand { transform: rotate(-180deg); } .relation-dropdown .relation-dropdown__button + .relation-dropdown__body--expand { max-height: 2000px; transition: max-height 1s ease-in; } .relation-dropdown .relation-dropdown__body { background-color: #f7f7f7; max-height: 0; transition: max-height 1s ease-out; overflow: hidden; } .entity-card { flex-direction: row; } .entity-card .entity-card__info-wrapper { margin-left: 30px; } } .single-section-wrapper { padding: 32px 36px; background-color: #f7f7f7; overflow: auto; } .single-section-wrapper .single-section-wrapper__link--secondary { display: inline-block; color: #ccc; margin-bottom: 20px; } .single-section-wrapper .single-section-wrapper__link--secondary:hover { color: #00a1cc; } .entity-form, .review-form { overflow: auto; } .entity-form > input[type='email'], .entity-form > input[type='number'], .entity-form > input[type='password'], .entity-form > input[type='search'], .entity-form > input[type='tel'], .entity-form > input[type='text'], .entity-form > input[type='url'], .entity-form textarea, .review-form > input[type='email'], .review-form > input[type='number'], .review-form > input[type='password'], .review-form > input[type='search'], .review-form > input[type='tel'], .review-form > input[type='text'], .review-form > input[type='url'], .review-form textarea { width: 100%; } .entity-form img, .review-form img { display: block; } .review-form .review-form__preview-button { color: #00a1cc; font-weight: bold; cursor: pointer; } .review-form .review-form__fyi { color: #ccc; } .review-form .review-form__main-content, .review-form textarea { margin-bottom: 5px; resize: vertical; height: 400px; } .review-form .review-form__option { margin-top: 24px; margin-bottom: 10px; } .review-form .review-form__option::after { content: ' '; clear: both; display: table; } .review-form .review-form__visibility-radio { float: left; } .review-form .review-form__visibility-radio ul, .review-form .review-form__visibility-radio li, .review-form .review-form__visibility-radio label { display: inline; } .review-form .review-form__visibility-radio label { font-size: normal; } .review-form .review-form__visibility-radio input[type="radio"] { position: relative; top: 2px; } .review-form .review-form__share-checkbox { float: right; } .review-form .review-form__share-checkbox input[type="checkbox"] { position: relative; top: 2px; } .report-form input, .report-form select { width: 100%; } @media (max-width: 575.98px) { .review-form .review-form__visibility-radio { float: unset; } .review-form .review-form__share-checkbox { float: unset; position: relative; left: -3px; } } .markdownx-preview { min-height: 100px; } .markdownx-preview ul li { list-style: circle inside; } .rating-star .jq-star { cursor: unset !important; } .ms-parent > .ms-choice { margin-bottom: 1.5rem; appearance: none; background-color: transparent; border: 0.1rem solid #ccc; border-radius: .4rem; box-shadow: none; box-sizing: inherit; padding: .6rem 1.0rem; width: 100%; height: 30.126px; } .ms-parent > .ms-choice:focus { border-color: #00a1cc; } .ms-parent > .ms-choice > .icon-caret { top: 15.5px; } .ms-parent > .ms-choice > span { color: black; font-weight: initial; font-size: 13.3333px; top: 2.5px; left: 2px; } .ms-parent > .ms-choice > span:hover, .ms-parent > .ms-choice > span:focus { color: black; } .ms-parent > .ms-drop > ul > li > label > span { margin-left: 10px; } .ms-parent > .ms-drop > ul > li > label > input { width: unset; } .tippy-box { border: #606c76 1px solid; background-color: #f7f7f7; padding: 3px 5px; } .tag-input input { flex-grow: 1; } .tools-section-wrapper input, .tools-section-wrapper select { width: unset; }