summaryrefslogtreecommitdiff
path: root/css3/vndb.css
diff options
context:
space:
mode:
Diffstat (limited to 'css3/vndb.css')
-rw-r--r--css3/vndb.css1838
1 files changed, 1838 insertions, 0 deletions
diff --git a/css3/vndb.css b/css3/vndb.css
new file mode 100644
index 00000000..72d55873
--- /dev/null
+++ b/css3/vndb.css
@@ -0,0 +1,1838 @@
+/**
+ * Common colors:
+ * #171717 - body text
+ * #3f3f3f - muted 1
+ * #6b6b6b - muted 2
+ * #8d8d8d - muted 3
+ * #5899bf - accent (teal-ish blue)
+ */
+
+html {
+ min-height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ background: hsla(200, 14%, 98%, 1);
+}
+
+.page-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background-image: linear-gradient(hsla(205, 35%, 93%, 1), hsla(200, 14%, 98%, 1));
+ background-size: 100% 500px;
+ background-repeat: repeat-x;
+ padding-top: 26px;
+}
+
+.main-container {
+ flex: 1;
+}
+
+.main-container--single-col {
+ max-width: 865px;
+}
+
+.raised-top-container {
+ background: hsla(205, 35%, 93%, 1);
+}
+
+.raised-top {
+ background: #fcfdfd;
+ box-shadow: rgba(33, 63, 80, 0.30) 0 2px 4px;
+ margin-bottom: 4px;
+}
+
+.elevated-button {
+ background: white;
+ border-radius: 4px;
+ padding: 0.8em 1em;
+ font-weight: 500;
+}
+
+.elevated-button img {
+ margin-right: 0.4em;
+}
+
+.serif {
+ font-family: Georgia, Times, "Times New Roman", serif;
+}
+
+.switch {
+ display: flex;
+ font-size: 12px;
+ font-weight: 500;
+ color: #3f3f3f;
+ align-items: center;
+}
+
+.switch:hover {
+ color: #3f3f3f;
+ text-decoration: none;
+}
+
+.switch__label + .switch__toggle {
+ margin-left: 0.5em;
+}
+
+.switch__toggle {
+ width: 26px;
+ height: 16px;
+ border-radius: 16px;
+ background-color: #bebebe;
+ position: relative;
+ transition: background-color 0.1s;
+}
+
+.switch--on .switch__toggle {
+ background-color: #5899bf;
+}
+
+.switch__toggle::after {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 12px;
+ height: 12px;
+ border-radius: 12px;
+ background: #f3f5f6;
+ transition: left 0.1s;
+ box-shadow: 0px 2px 3px rgba(50, 50, 93, 0.25);
+}
+
+.switch--on .switch__toggle::after {
+ left: 12px;
+}
+
+.top-bar {
+ height: 4px;
+ background-color: #5899bf;
+}
+
+.icon-desc {
+ margin-right: 0.2em;
+}
+
+.icon-group {
+ display: inline-block;
+ position: relative;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 15px;
+}
+
+.container > .navbar {
+ margin-left: -15px;
+ margin-right: -15px;
+}
+
+.navbar__toggler {
+ flex: 1;
+ display: flex;
+ justify-content: flex-end;
+ padding: 7px 0;
+}
+
+.navbar__toggler-icon {
+ width: 16px;
+ height: 10px;
+ position: relative;
+}
+
+.navbar__toggler-icon::before, .navbar__toggler-icon::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 4px;
+ height: 2px;
+ background-color: #171717;
+ transition: transform 0.1s;
+}
+.navbar__toggler-icon::before { transform: translateY(-4px) rotate(0deg); }
+.navbar__toggler-icon::after { transform: translateY(4px) rotate(0deg); }
+
+.navbar--expanded .navbar__toggler-icon::before { transform: translateY(0) rotate(-45deg); }
+.navbar--expanded .navbar__toggler-icon::after { transform: translateY(0) rotate(45deg); }
+
+.navbar__collapse {
+ flex: 1;
+ display: none;
+ margin-top: 10px;
+}
+
+.navbar__nav {
+ flex-direction: column;
+}
+
+.navbar--expanded {
+ box-shadow: rgba(33, 63, 80, 0.48) 0 2px 4px;
+ height: auto;
+ margin-bottom: 15px;
+}
+
+.navbar--expanded .navbar__collapse {
+ display: block;
+ flex-basis: 100%;
+}
+
+.navbar__nav .nav__link {
+ padding-right: 0;
+ padding-left: 0;
+}
+
+.navbar__main-nav {
+ flex: 1;
+}
+
+.navbar__logo {
+ font-weight: 500;
+ font-size: 18px;
+ padding-left: 0;
+ margin-right: 30px;
+}
+
+.navbar__logo a {
+ color: #171717;
+ text-decoration: none;
+}
+
+.navbar__menu > .nav__link {
+ font-weight: 500;
+ color: #171717;
+}
+
+.navbar__menu > .nav__link .svg-icon {
+ font-size: 14px;
+}
+
+.navbar .dropdown-menu {
+ position: static;
+ box-shadow: none;
+}
+
+.nav-sidebar {
+ margin-bottom: 15px;
+ background: #fff;
+ box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
+ border-radius: 4px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.nav-sidebar__selection {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 12px;
+}
+
+.nav-sidebar__selection, .nav-sidebar__selection:focus {
+ color: #171717;
+ text-decoration: none;
+}
+
+.nav-sidebar__selection .caret {
+ margin-top: -2px;
+}
+
+.nav-sidebar .nav {
+ padding: 2px 12px 10px 12px;
+ display: none;
+ flex-basis: 100%;
+}
+
+.nav-sidebar--expanded .nav {
+ display: block;
+}
+
+@media (min-width: 768px) {
+ .navbar--expand-md {
+ justify-content: flex-start;
+ height: 84px;
+ box-shadow: none;
+ margin-bottom: 0;
+ }
+
+ .navbar--expand-md .navbar__collapse {
+ display: flex;
+ flex-basis: auto;
+ margin-top: 0;
+ }
+
+ .navbar--expand-md .navbar__nav .nav__link {
+ padding: .5rem 1rem;
+ }
+
+ .navbar--expand-md .dropdown-menu {
+ position: absolute;
+ box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .navbar--expand-md .navbar__toggler { display: none; }
+ .navbar--expand-md .navbar__nav { flex-direction: row; }
+ .navbar--expand-md .navbar__logo { margin-bottom: 0; }
+
+ .nav-sidebar--expand-md {
+ box-shadow: none;
+ background: transparent;
+ }
+ .nav-sidebar--expand-md .nav-sidebar__selection {
+ display: none;
+ }
+ .nav-sidebar--expand-md .nav {
+ display: block;
+ }
+}
+
+.footer {
+ padding: 40px 0 30px 0;
+ color: #6b6b6b;
+ font-size: 14px;
+}
+
+.footer__logo {
+ font-weight: 500;
+ font-size: 18px;
+}
+
+.footer__logo a {
+ color: #6b6b6b;
+}
+
+.footer__logo a:hover {
+ text-decoration: none;
+}
+
+.footer__nav {
+ margin: 3px 0 3px 0;
+}
+
+.footer__sep {
+ margin: 0 0.2em;
+}
+
+.footer__random .svg-icon {
+ opacity: 0.75;
+ font-size: 0.8em;
+}
+
+.detail-page-title {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 1.1;
+ margin-bottom: 20px;
+}
+
+.detail-page-subtitle {
+ font-size: 17px;
+ margin-top: -12px;
+ margin-bottom: 16px;
+}
+
+.detail-page-section-header {
+ margin-top: 1rem;
+ margin-bottom: 0.7rem;
+}
+
+.detail-page-sidebar-section-header {
+ margin-top: 0.5rem;
+}
+
+.vn-header {
+ padding: 5px 0 30px 0;
+}
+
+.vn-header__title {
+ font-size: 30px;
+ font-weight: 500;
+ line-height: 1.1;
+}
+
+.vn-header__original-title {
+ font-size: 17px;
+ margin-top: 6px;
+}
+
+.vn-header__details {
+ margin-top: 1em;
+ font-size: 0.9em;
+ font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ color: #3f3f3f;
+}
+
+.vn-header__sep {
+ width: 20px;
+ height: 1px;
+ margin: 3px 0;
+ background-color: rgba(0, 0, 0, 0.21);
+}
+
+.page-header-img-mobile {
+ max-width: 100%;
+ max-height: 200px;
+ margin-bottom: 6px;
+}
+
+.detail-header-image-container {
+ position: relative;
+}
+
+.detail-header-image {
+ margin-bottom: 25px;
+ position: absolute;
+ left: 0;
+ right: 0;
+}
+
+.detail-header-image-push {
+ margin-top: -150px;
+ margin-bottom: 25px;
+ visibility: hidden;
+}
+
+.elevation-1-nsfw {
+ box-shadow: 0 15px 35px rgba(255, 50, 50, 0.18), 0 5px 15px rgba(255, 0, 0, 0.18), 0 1px 5px 0 rgba(100,0,0,0.1);
+}
+
+.nsfw-outline {
+ outline: 3px solid #F00;
+}
+
+@media (min-width: 768px) {
+ .vn-header {
+ padding: 20px 0 50px 0;
+ }
+ .vn-header__title { font-size: 35px; }
+ .vn-header__original-title { font-size: 18px; }
+}
+
+@media (min-width: 992px) {
+ .vn-header__title { font-size: 40px; }
+ .vn-header__original-title { font-size: 20px; }
+}
+
+@media (min-width: 576px) {
+ .vn-header__details {
+ flex-direction: row;
+ align-items: center;
+ }
+ .vn-header__sep {
+ width: 1px;
+ height: 1.5em;
+ margin: 0 1em;
+ background-color: rgba(0, 0, 0, 0.21);
+ }
+}
+
+.vn-page {
+ padding-bottom: 20px;
+}
+
+.vn-page__top {
+ display: flex;
+}
+
+.vn-page__top-main {
+ flex: 1;
+}
+
+.fixed-size-left-sidebar-md, .fixed-size-left-sidebar-xl {
+ padding: 0 15px;
+ width: 100%;
+}
+
+.vn-page__top-details > * {
+ margin-bottom: 25px;
+}
+
+@media (min-width: 768px) {
+ .fixed-size-left-sidebar-md {
+ width: 275px;
+ padding: 0 30px 0 15px;
+ }
+ .vn-page__top-details {
+ position: absolute;
+ top: 100px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .fixed-size-left-sidebar-xl {
+ width: 275px;
+ padding: 0 30px 0 15px;
+ }
+}
+
+.vn-image-placeholder {
+ background: #efefef;
+ padding-top: 136%;
+ position: relative;
+}
+
+.vn-image-placeholder--wide {
+ padding-top: 56.52%;
+}
+
+.vn-image-placeholder__icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.vn-image-placeholder__icon .svg-icon {
+ color: #3f3f3f;
+ font-size: 32px;
+ opacity: 0.3;
+}
+
+.vn-page__top-body {
+ display: flex;
+}
+
+.description {
+ line-height: 1.4;
+}
+
+@media (min-width: 992px) {
+ .description {
+ font-size: 1.1em;
+ }
+}
+
+.raised-top-nav {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+}
+
+.raised-top-nav > .nav__item > .nav__link {
+ font-weight: 500;
+ padding: 0 1.5em 0.75em 0;
+}
+
+.raised-top-nav > .nav__item--active > .nav__link {
+ font-weight: 700;
+}
+
+.raised-top-nav-buttons {
+ margin-top: -0.5em;
+}
+
+.vn-page__dl {
+ font-size: 0.9em;
+ margin-top: 35px;
+}
+
+.section {
+ margin-top: 3em;
+ padding-top: 0.9em;
+}
+
+.section__title {
+ margin: 0 0 0.5em 0;
+}
+
+.section__title .switch {
+ float: right;
+ margin-top: 12px;
+}
+
+.spoiler {
+ background-color: #ccc;
+ color: #ccc;
+ font-weight: normal;
+}
+
+.spoiler:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ color: inherit;
+}
+
+.gallery__section {
+ display: flex;
+ flex-wrap: wrap;
+ margin: -7px;
+ margin-bottom: 12px;
+ align-items: flex-end;
+}
+
+.gallery__section:last-child {
+ margin-bottom: 0;
+}
+
+.gallery__image-link {
+ display: block;
+ width: 50%;
+ padding: 7px;
+}
+
+.gallery__image {
+ display: block;
+ /* margin: 7px;
+ width: 170px; */
+ width: 100%;
+ border-radius: 4px;
+}
+
+.gallery__image--r18 {
+ display: none;
+}
+
+.gallery--show-r18 .gallery__image--r18 {
+ display: block;
+}
+
+@media (min-width: 535px) {
+ .gallery__image-link { width: 33%; }
+}
+@media (min-width: 568px) {
+ .gallery__image-link { width: 184px; }
+}
+
+.character-browser {
+ font-size: 14px;
+}
+
+.character-browser__top-items {
+ margin-top: 1em;
+}
+
+.character-browser__top-item {
+ margin-top: 0.2em;
+}
+
+.character-browser__top-items .switch {
+ font-weight: 400;
+ font-size: 1em;
+}
+
+.character-browser__list {
+ margin-top: 1em;
+}
+
+.character-browser__list-title {
+ font-weight: 500;
+}
+
+.character {
+ font-size: 14px;
+}
+
+.character-browser__char {
+ display: block;
+ color: #6b6b6b;
+}
+
+a.character-browser__char:hover, .character-browser__char--active {
+ color: #171717;
+ text-decoration: none;
+}
+
+.character__name {
+ font-size: 24px;
+}
+
+.character__subtitle {
+ margin-bottom: 10px;
+ font-size: 12;
+}
+
+.character__description {
+ font-size: 16px;
+}
+
+.character__image {
+ width: 260px;
+ flex: none;
+}
+
+.character__traits {
+ max-width: 680px;
+}
+
+.staff-credits {
+ font-size: 0.9em;
+}
+
+.staff-credits__section {
+ margin-bottom: 0.7em;
+}
+
+.staff-credits__section-title {
+ font-weight: 500;
+}
+
+.staff-credits__note {
+ color: #8d8d8d;
+}
+
+.tag-summary {
+ font-size: 14px;
+}
+
+.tag-summary__tags {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.tag-summary--collapsed {
+ max-height: 50px;
+ overflow: hidden;
+}
+
+.tag-summary__tag {
+ font-size: 12px;
+ font-weight: 500;
+ margin-right: 1.5em;
+ margin-bottom: 0.5em;
+}
+
+.tag-summary--hide-cont .tag-summary__tag--cont {
+ display: none;
+}
+
+.tag-summary--hide-ero .tag-summary__tag--ero {
+ display: none;
+}
+
+.tag-summary--hide-tech .tag-summary__tag--tech {
+ display: none;
+}
+
+.tag-summary--hide-spoil-1 .tag-summary__tag--spoil-1 {
+ display: none;
+}
+
+.tag-summary--hide-spoil-2 .tag-summary__tag--spoil-2 {
+ display: none;
+}
+
+.tag-summary__tag-meter {
+ height: 1px;
+ background: #6b6b6b;
+}
+
+.tag-summary__options {
+ margin-top: 4px;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ padding-top: 4px;
+}
+
+.tag-summary__option {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ margin: 0 14px 0 0;
+}
+
+.tag-summary__options-right {
+ margin-top: 4px;
+}
+
+@media (min-width: 576px) {
+ .tag-summary__options {
+ display: flex;
+ }
+ .tag-summary__options-right {
+ flex: 1;
+ text-align: right;
+ margin-top: 0;
+ }
+ .tag-summary__option {
+ margin: 0 0 0 14px;
+ }
+}
+
+@media (min-width: 768px) {
+ .navbar--expand-md .dropdown-menu.database-menu {
+ width: 284px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .navbar--expand-md .dropdown-menu.database-menu .dropdown-menu__item {
+ width: 130px;
+ padding: 6px 13px;
+ margin: 0 6px;
+ }
+
+ .navbar--expand-md .dropdown-menu.database-menu .dropdown-menu__item:hover {
+ border-radius: 2px;
+ }
+}
+
+.relsm { font-size: 14px; }
+.relsm__language { font-weight: 500; }
+.relsm__table { margin-bottom: 0.5em; }
+.relsm__rel { display: flex; flex-wrap: wrap; margin-top: 0.2em; }
+.relsm__rel-col { display: block;}
+.relsm__rel-date { flex: 1; color: #6b6b6b; }
+.relsm__rel-name { flex: 0 1 auto; order: -1; width: 100%; }
+.relsm__rel-platforms, .relsm__rel-mylist, .relsm__rel-link { padding: 0 0.7em; }
+.relsm__rel-platforms img, .relsm__rel-mylist img { opacity: 0.75; }
+.relsm__rel-link { padding-right: 0; }
+.relsm__rel-link--none { visibility: hidden; }
+
+@media (min-width: 768px) {
+ .relsm__rel { flex-wrap: nowrap; margin-top: 0; }
+ .relsm__rel-date { flex: 0 1 auto; width: 7em; color: #6b6b6b; }
+ .relsm__rel-name { flex: 1; order: 0; width: auto; }
+}
+
+.lang-badge {
+ border: 1px solid #a5a5a5;
+ color: #a5a5a5;
+ display: inline-block;
+ padding: .35em .6em;
+ font-size: 0.6em;
+ font-weight: 700;
+ line-height: 1;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ border-radius: 3px;
+ min-width: 2.8em;
+ margin-right: .1em;
+}
+
+.final-text {
+ margin-top: .8em;
+}
+
+.notification-icon__indicator {
+ position: absolute;
+ top: -1px;
+ right: -9px;
+ font-size: 8px;
+ background: #e63131;
+ color: white;
+ padding: 3px 4px;
+ font-weight: 500;
+ line-height: 1;
+ border-radius: 100px;
+ min-width: 14px;
+ text-align: center;
+}
+
+.stats {
+ font-size: 12px;
+ max-width: 1000px;
+}
+
+.stats__col {
+ margin-bottom: 20px;
+}
+
+.stats__ranking > dt {
+ font-size: 14px;
+}
+
+.vote-graph {
+ max-width: 320px;
+ font-size: 12px;
+ line-height: 1.3;
+ display: flex;
+ background: #e8e8e8;
+ padding: 1.25em 1em;
+ border-radius: 3px;
+}
+
+.vote-graph__scores {
+ margin-right: 0.5em;
+ text-align: right;
+}
+
+.vote-graph__score {
+ height: 1.3em;
+}
+
+.vote-graph__bars {
+ padding-right: 2.5em;
+ flex: 1;
+}
+
+.vote-graph__bar {
+ background: #6b6b6b;
+ position: relative;
+ height: 1.3em;
+}
+
+.vote-graph__bar-label {
+ position: absolute;
+ right: -2.2em;
+ width: 2em;
+}
+
+.recent-votes__table {
+ width: 100%;
+ max-width: 100%;
+ table-layout: fixed;
+ border-spacing: 0;
+}
+
+.recent-votes__table td {
+ padding: 0;
+}
+
+.recent-votes__table td:nth-child(1) { width: 100%; }
+.recent-votes__table td:nth-child(2) { width: 2em; text-align: right; }
+.recent-votes__table td:nth-child(3) { width: 7em; text-align: right; }
+
+body.lightbox-open {
+ overflow: hidden;
+}
+
+.lightbox {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+}
+
+.lightbox__image-current {
+ width: 84%;
+ display: flex;
+ justify-content: center;
+}
+
+.lightbox__image-left {
+ width: 8%;
+ position: relative;
+}
+
+.lightbox__image-left .lightbox__img {
+ position: absolute;
+ right: 5px;
+}
+
+.lightbox__image-right {
+ width: 8%;
+ position: relative;
+}
+
+.lightbox__image-right .lightbox__img {
+ position: absolute;
+ left: 5px;
+}
+
+@media (min-width: 576px) {
+ .lightbox__image-left .lightbox__img { right: 30px; }
+ .lightbox__image-right .lightbox__img { left: 30px; }
+}
+
+.lightbox__img {
+ display: block;
+ border-radius: 4px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+.lightbox__close {
+ display: block;
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.lightbox__close::before, .lightbox__close::after {
+ position: absolute;
+ top: 10px; /* (40 (container height) - 20 (stroke height)) / 2 */
+ left: 19px; /* (40 (container width) - 2 (stroke width)) / 2 */
+ content: '';
+ height: 20px;
+ width: 2px;
+ background: #fff;
+ transform: rotate(-45deg);
+}
+
+.lightbox__close::after {
+ transform: rotate(45deg);
+}
+.lightbox__meta {
+ display: block;
+ width: 100%;
+ height: 30px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: #fff;
+ text-align: center;
+}
+.lightbox__dims {
+ font-weight: bold;
+ margin-right: 25px;
+}
+
+.doc-list {
+ font-size: 14px;
+}
+
+.doc-list__title {
+ margin-top: 20px;
+ font-weight: bold;
+ font-size: 16px;
+}
+
+.doc-list__doc {
+ margin-top: 5px;
+ display: block;
+ color: #6b6b6b;
+}
+
+a.doc-list__doc:hover, .doc-list__doc--active {
+ color: #171717;
+ text-decoration: none;
+}
+
+.doc h1 {
+ margin-top: 20px;
+ font-size: 30px;
+ font-weight: bold;
+ line-height: 1.1;
+}
+.doc h2 {
+ margin-top: 20px;
+}
+.doc h3 {
+ margin-top: 15px;
+}
+.doc h2 a, .doc h3 a {
+ color: #000;
+}
+.doc dt {
+ font-weight: normal;
+ font-style: italic;
+}
+.doc dd {
+ padding-left: 1em;
+}
+.doc pre {
+ overflow-x: auto;
+ font-size: 12px;
+}
+.doc td, .doc th {
+ padding: 2px 4px;
+ font-size: 12px;
+}
+
+.screenshot-edit { font-size: 14px; }
+.screenshot-edit__title { font-size: 16px; font-weight: 500; }
+.screenshot-edit__row { padding: 4px 0; }
+.screenshot-edit__screenshot { max-width: 200px; margin-bottom: 4px; }
+.screenshot-edit__fields { width: 100%; margin-bottom: 4px; }
+.screenshot-edit__remove { float: right; }
+.screenshot-edit__options { margin-bottom: 8px;}
+.screenshot-edit__upload-options { margin-top: 8px; }
+.screenshot-edit__upload-option { margin-bottom: 8px; }
+
+@media (min-width: 576px) {
+ .screenshot-edit__row { display: flex; align-items: center; }
+ .screenshot-edit__screenshot { width: 200px; }
+ .screenshot-edit__fields { flex: 1; margin-left: 20px; }
+}
+
+@media (min-width: 992px) {
+ .screenshot-edit__upload-options { display: flex; align-items: center; }
+ .screenshot-edit__upload-option { margin-bottom: 0; }
+ .screenshot-edit__upload-nsfw-label { margin-left: 8px; }
+}
+
+.flex-center-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.small-card {
+ max-width: 500px;
+}
+
+.character-card {
+ display: flex;
+ flex-direction: column;
+}
+
+.character-card__image {
+ height: 100px;
+ width: auto;
+}
+
+.character-card__left {
+ flex: 1;
+ display: flex;
+}
+
+.character-card__right {
+ flex: 1;
+ margin: 14px 20px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 24px;
+ height: 72px;
+}
+
+.character-card__main {
+ flex: 1;
+ overflow: hidden;
+ padding: 10px;
+}
+
+.character-card__image-container {
+ width: 100px;
+ overflow: hidden;
+ flex: 0 0 auto;
+}
+
+.character-card__name {
+ font-size: 20px;
+}
+
+.character-card__vns {
+ font-size: 14px;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ width: 100%;
+}
+
+@media (min-width: 576px) {
+ .character-card {
+ height: 100px;
+ flex-direction: row;
+ }
+
+ .character-card__left {
+ width: 50%;
+ }
+}
+
+.page-inner-controls {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-top: -20px;
+ margin-bottom: 16px;
+}
+
+.page-inner-controls--left {
+ justify-content: flex-start;
+}
+
+.page-inner-controls__option {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ margin: 0 14px 0 0;
+}
+
+@media (min-width: 576px) {
+ .page-inner-controls__option {
+ margin: 0 0 0 14px;
+ }
+
+ .page-inner-controls--left .page-inner-controls__option {
+ margin: 0 14px 0 0;
+ }
+}
+
+.charpage--hide-ero .charpage--ero {
+ display: none;
+}
+
+.charpage--hide-spoil-1 .charpage--spoil-1 {
+ display: none;
+}
+
+.charpage--hide-spoil-2 .charpage--spoil-2 {
+ display: none;
+}
+
+.trait-summary--trait {
+ padding-right: 15px;
+ white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+ .user-stats {
+ display: flex;
+ }
+}
+
+.user-stats__left {
+ flex: 1 1 60%;
+}
+
+.user-stats__right {
+ flex: 1 1 40%;
+}
+
+.big-stats {
+ display: flex;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.big-stats__stat {
+ display: block;
+ flex: 1;
+ margin-right: 25px;
+ color: #3f3f3f;
+}
+
+a.big-stats__stat:hover {
+ text-decoration: none;
+}
+
+.big-stats__value {
+ font-size: 36px;
+ font-weight: normal;
+ line-height: 1.2;
+}
+
+.more-button {
+ display: inline-block;
+ width: 30px;
+ height: 16px;
+ background-color: #9c9c9c;
+ border-radius: 2px;
+ position: relative;
+}
+
+.more-button:hover {
+ background-color: #8d8d8d;
+}
+
+.more-button--light {
+ background-color: #fff;
+}
+
+.more-button--light:hover {
+ background-color: #ddd;
+}
+
+.more-button__dots, .more-button__dots::before, .more-button__dots::after {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #fff;
+}
+
+.more-button--light .more-button__dots, .more-button--light .more-button__dots::before, .more-button--light .more-button__dots::after {
+ background-color: #171717;
+}
+
+.more-button__dots {
+ top: 6px;
+ left: 13px;
+}
+
+.more-button__dots::before, .more-button__dots::after {
+ content: '';
+ top: 0;
+}
+
+.more-button__dots::before {
+ left: -6px;
+}
+
+.more-button__dots::after {
+ left: 6px;
+}
+
+.vn-list__expand-releases {
+ color: #3F3F3F;
+}
+
+.vn-list__expand-comment .svg-icon {
+ opacity: 0.39;
+}
+
+.vn-list__expand-comment--empty {
+ opacity: 0.4;
+}
+
+.vn-list__expand-comment:hover .svg-icon {
+ opacity: 0.45;
+}
+
+.vn-list__releases > table > tbody > tr > td:first-child {
+ padding-left: 0;
+}
+
+.with-sort-icon {
+ position: relative;
+}
+
+.with-sort-icon::after {
+ content: '';
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ visibility: hidden;
+}
+
+.with-sort-icon:hover::after, .with-sort-icon--active::after, .with-sort-icon:focus::after {
+ visibility: visible;
+}
+
+.with-sort-icon--up::after {
+ margin-top: -7px;
+ border: 5px solid #999;
+ border-color: transparent transparent #999 transparent;
+}
+
+.with-sort-icon--up.with-sort-icon--active::after {
+ border-color: transparent transparent #171717 transparent;
+}
+
+.with-sort-icon--down::after {
+ margin-top: -2px;
+ margin-bottom: -5px;
+ border: 5px solid #999;
+ border-color: #999 transparent transparent transparent;
+}
+
+.with-sort-icon--down.with-sort-icon--active::after {
+ border-color: #171717 transparent transparent transparent;
+}
+
+.table thead th a.table-header {
+ color: #171717;
+ text-decoration: none;
+}
+
+.vn-grid {
+ /* will still work on browsers that don't support css grid, just not as nicely spaced/centered */
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ justify-items: center;
+}
+
+.vn-grid__item {
+ display: inline-block;
+ width: 140px;
+ height: 190px;
+ background: #aaa;
+ margin: 10px 5px;
+ position: relative;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.vn-grid__item-bg {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-size: cover;
+ background-position: center;
+ border-radius: 4px;
+}
+
+.vn-grid__item-overlay {
+ position: relative;
+ /* background: rgba(0, 0, 0, 0.5); */
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%) repeat-x;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-radius: 4px;
+}
+
+.vn-grid__item-overlay:hover {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+.vn-grid__item-link {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.vn-grid__item-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 9px 9px 4px 14px;
+}
+
+.vn-grid__item-top .more-button {
+ display: none !important;
+}
+
+.vn-grid__item:hover .vn-grid__item-top .more-button, .vn-grid__item-top .dropdown--open .more-button {
+ display: block !important;
+}
+
+.vn-grid__item-rating {
+ background: white;
+ padding: 1px 10px;
+ height: 26px;
+ line-height: 26px;
+ border-radius: 100px;
+ display: flex;
+ align-items: center;
+}
+
+.vn-grid__item-rating .svg-icon {
+ margin-right: 5px;
+}
+
+.vn-grid__item-name {
+ color: white;
+ padding: 9px 11px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.25;
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* list entry modal */
+.lem__release-remove {
+ margin-top: 1px;
+}
+
+.raised-top-search {
+ display: block;
+ position: relative;
+ padding-bottom: 16px;
+}
+
+.raised-top-search__field {
+ font-size: 1.25em;
+ padding: 10px 52px 10px 15px;
+}
+
+.raised-top-search__button {
+ position: absolute;
+ top: 1px;
+ right: 1px;
+ bottom: 17px;
+ width: 50px;
+ font-size: 18px;
+ border-radius: 3px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.raised-top-search__button .svg-icon {
+ opacity: 0.5;
+}
+
+.filter-sidebar {
+ background-color: #F5F8FA;
+ margin: -30px 0 30px 0;
+ box-shadow: inset rgba(33, 63, 80, 0.30) 0 12px 4px -10px;
+ padding: 0;
+}
+
+.filter-sidebar__header {
+ display: block;
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #bebebe;
+ font-weight: 500;
+}
+
+.filter-sidebar.open {
+ box-shadow:
+ inset rgba(33, 63, 80, 0.30) 0 12px 4px -10px,
+ rgba(33, 63, 80, 0.2) 0 2px 4px;
+}
+
+.filter-sidebar__header, a.filter-sidebar__header {
+ color: #3f3f3f;
+ text-decoration: none;
+}
+
+.filter-sidebar .filter-sidebar__header .caret {
+ transform: rotate(135deg);
+}
+
+.filter-sidebar.open .filter-sidebar__header .caret {
+ transform: rotate(45deg);
+}
+
+.filter-sidebar__section {
+ border-bottom: 1px solid #bebebe;
+ display: none;
+}
+
+.filter-sidebar.open .filter-sidebar__section {
+ display: block;
+}
+
+.filter-sidebar__section-header {
+ padding: 13px 15px;
+ font-weight: 500;
+ border: none;
+ background: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.filter-sidebar__section-header, a.filter-sidebar__section-header {
+ color: inherit;
+ text-decoration: none;
+}
+
+.filter-sidebar__section-header:hover {
+ background-color: rgba(0, 0, 0, .03);
+}
+
+.filter-sidebar__section-header-text {
+ color: #3f3f3f;
+ position: relative;
+}
+
+.filter-sidebar__section.modified .filter-sidebar__section-header-text::after {
+ content: '';
+ width: 6px;
+ height: 6px;
+ border-radius: 3px;
+ background-color: #5899bf;
+ position: absolute;
+ top: 10px;
+ margin-left: 10px;
+}
+
+.filter-sidebar__section-header .caret {
+ transform: rotate(135deg);
+ margin-top: -2px;
+}
+
+.filter-sidebar__section.open .filter-sidebar__section-header .caret {
+ transform: rotate(45deg);
+}
+
+.filter-sidebar__section-content {
+ font-size: 14px;
+ padding: 9px 15px 15px 15px;
+ display: none;
+}
+
+.filter-sidebar__section.open .filter-sidebar__section-content {
+ display: block;
+}
+
+@media (min-width: 992px) {
+ .filter-sidebar {
+ border-left: 1px solid #bebebe;
+ border-right: 1px solid #bebebe;
+ margin-bottom: -30px;
+ padding-bottom: 55px;
+ min-height: 100vh;
+ /* fade out at bottom */
+ -webkit-mask-image: linear-gradient(0deg, transparent, black 30px);
+ mask-image: linear-gradient(0deg, transparent, black 30px);
+ }
+
+ .filter-sidebar.open {
+ box-shadow: inset rgba(33, 63, 80, 0.30) 0 12px 4px -10px;
+ }
+
+ .filter-sidebar__header {
+ display: none;
+ }
+
+ .filter-sidebar__section {
+ display: block;
+ }
+}
+
+.filter {
+ color: #3f3f3f;
+ margin-bottom: 8px;
+}
+
+.filter__header {
+ display: flex;
+ align-items: center;
+ height: 30px;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.filter__title {
+ font-weight: 500;
+}
+
+.filter__actions {
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.filter-select-list__option {
+ margin: 0 -15px;
+ padding: 0 15px 0 28px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+
+.filter-select-list__option, a.filter-select-list__option {
+ text-decoration: none;
+ color: inherit;
+}
+
+.filter-select-list__option:hover {
+ background-color: #ecf1f5;
+}
+
+.filter-select-list__option.on {
+ background-color: #e6edf2;
+}
+
+.filter-select-list__option.on::after {
+ content: '✓';
+ position: absolute;
+ right: 15px;
+}
+
+.filter-select-inline {
+ display: flex;
+ align-items: center;
+}
+
+.filter-select-inline__options {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+}
+
+.filter-select-inline__option {
+ padding: 2px 8px;
+ font-weight: 500;
+ border-radius: 3px;
+ margin-left: 2px;
+}
+
+.filter-select-inline__option, a.filter-select-inline__option {
+ color: #6b6b6b;
+ text-decoration: none;
+}
+
+.filter-select-inline__option:hover {
+ background-color: #e6edf2;
+}
+
+.filter-select-inline__option.on {
+ background-color: #dfe9f0;
+ color: #3f3f3f;
+}
+
+.filter-date__row {
+ display: flex;
+}
+
+.filter-date__row > select {
+ flex: 1;
+ margin-right: 10px;
+}
+
+.filter-date__row > select:last-child {
+ margin-right: 0;
+}
+
+.filter-searchlist__row {
+ display: flex;
+ align-items: center;
+ padding: 2px 0 2px 10px;
+}
+
+.filter-searchlist__row-title {
+ flex: 1;
+}
+
+.filter-searchlist__row-remove {
+ width: 21px;
+ height: 21px;
+}
+
+.filter-searchlist__row-remove::before, .filter-searchlist__row-remove::after {
+ top: 5px;
+ left: 10px;
+ height: 11px;
+}
+
+.filter-searchlist__add-container {
+ padding: 5px 0 0 10px;
+}
+
+.card-list--dense > .card {
+ margin-bottom: 7px;
+}
+
+.vn-card {
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ flex-direction: row;
+}
+
+.vn-card__left {
+ display: flex;
+ min-width: 0;
+}
+
+.vn-card__right {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ min-width: 70px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-right: 10px;
+ flex: 1;
+}
+
+.vn-card__image-container {
+ width: 50px;
+ overflow: hidden;
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ margin: 6px 2px 6px 6px;
+}
+
+.vn-card__image {
+ height: 58px;
+ width: auto;
+ border-radius: 4px;
+}
+
+.vn-card__main {
+ flex: 1;
+ overflow: hidden;
+ padding: 0 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 4px;
+}
+
+.vn-card__name {
+ margin-bottom: 2px;
+ color: #003E86;
+}
+
+.vn-card__sub {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.vn-card__date {
+ color: #3f3f3f;
+ margin-right: 20px;
+ width: 100%;
+ font-size: 12px;
+}
+
+.vn-card__langs {
+ display: flex;
+ margin-right: 20px;
+}
+
+.vn-card__langs .lang-badge {
+ margin-right: 2px;
+ padding: 0 .6em;
+ height: 16px;
+ line-height: 14px;
+ font-size: 8px;
+}
+
+.vn-card__langs .lang-badge:last-child {
+ margin-right: 0;
+}
+
+.vn-card__platforms {
+ opacity: 0.58;
+}
+
+.vn-card__right .svg-icon {
+ font-size: 14px;
+ opacity: 0.45;
+ margin-left: 7px;
+}
+
+.vn-card__rating {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ font-size: 16px;
+ color: #3f3f3f;
+ font-weight: 500;
+ line-height: 1;
+ margin-bottom: 7px;
+}
+
+.vn-card__popularity {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ color: #8d8d8d;
+ line-height: 1;
+}
+
+@media (min-width: 576px) {
+ .vn-card {
+ height: 58px;
+ }
+
+ .vn-card__image-container {
+ margin: 0;
+ }
+
+ .vn-card__image {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .vn-card__main {
+ padding: 0px;
+ }
+
+ .vn-card__date {
+ color: #3f3f3f;
+ margin-right: 20px;
+ width: auto;
+ font-size: inherit;
+ }
+}