diff options
author | Yorhel <git@yorhel.nl> | 2019-07-25 14:30:04 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2019-07-25 14:36:21 +0200 |
commit | f296495a912ce759df11c43e78b4552788bdbff2 (patch) | |
tree | 0c10802de65fb7c8475722e12234bff5eb980628 /css3 | |
parent | 0f3cfeb85caec6424bcbea47142eefbf8011636b (diff) |
Merge the v3 branch into separate namespace + fix Docker stuff (again)
I was getting tired of having to keep two branches up-to-date with the
latest developments, so decided to throw v3 into the same branch - just
different files (...which will get mostly rewritten again soon). The two
versions aren't very different in terms of dependencies, build system
and support code, so they can now properly share files. Added a section
to the README to avoid confusion.
This merge also makes it easier to quickly switch between the different
versions, which is handy for development. It's even possible to run both
at the same time, but my scripts use the same port so that needs a
workaround.
And it's amazing how often I break the Docker scripts.
Diffstat (limited to 'css3')
-rw-r--r-- | css3/framework/base.css | 84 | ||||
-rw-r--r-- | css3/framework/elements.css | 962 | ||||
-rw-r--r-- | css3/framework/grid.css | 102 | ||||
-rw-r--r-- | css3/framework/helpers.css | 127 | ||||
-rw-r--r-- | css3/vndb.css | 1838 |
5 files changed, 3113 insertions, 0 deletions
diff --git a/css3/framework/base.css b/css3/framework/base.css new file mode 100644 index 00000000..d2124e1a --- /dev/null +++ b/css3/framework/base.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + color: #171717; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 1rem; + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5rem; + font-weight: 500; +} +h1, .h1 {font-size: 1.75rem; } +h2 { font-size: 1.5rem; } +h3 { font-size: 1.25rem; } +h4 { font-size: 1.125rem; } +h5, h6 { font-size: 1rem; } + +p, dl, ol, ul { + margin-top: 0; + margin-bottom: 1rem; +} + +dl { margin: 0; padding-top: -0.7em; } +dt { margin: 0.7em 0 0 0; font-weight: 600; } +dd { margin: 0; color: #3f3f3f;} + +dd > dl { padding: 0; } +dd > dl > dt { color: #3f3f3f; font-weight: 400; margin: 0; } +dd > dl > dd { margin-left: 1.4em; } + +.dl--horizontal { display: flex; flex-wrap: wrap; align-content: flex-start; } +.dl--horizontal > dt { margin: 0 0 0.7em 0; font-weight: 600; width: 35%; } +.dl--horizontal > dd { margin: 0 0 0.7em 0; color: #3f3f3f; width: 65%; } + +a { + color: #005ec3; + text-decoration: none; + background-color: transparent; + -webkit-text-decoration-skip: objects; +} + +a:hover { + color: #004ea2; + text-decoration: underline; +} + +a.link--subtle { + color: #3f3f3f; +} + +a.link--subtle:hover { + color: #004ea2; + text-decoration: none; +} + +dt > a { color: #004ea2; } + +fieldset { + border: none; + margin: 0; + padding: 0; +} + +table { + border-collapse: collapse; +} + +th { + text-align: inherit; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.2); +} diff --git a/css3/framework/elements.css b/css3/framework/elements.css new file mode 100644 index 00000000..6cefa7ed --- /dev/null +++ b/css3/framework/elements.css @@ -0,0 +1,962 @@ +.form-control { + display: block; + width: 100%; + padding: 4px 7px; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 14px; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid #cecece; + border-radius: 4px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +select.form-control { + background-image: linear-gradient(#ffffff, #fbfbfb); + border-radius: 4px; + padding: 4px; + height: 31px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +select.form-control:hover { + background-image: linear-gradient(#fbfbfb, #f5f5f5); +} + +.form-control--compact { + padding: 2px 5px; +} + +select.form-control--compact { + padding: 2px; + height: 26px; +} + +.form-control--stealth { + border: 1px solid transparent; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0); + transition: border-color ease-in-out 0.07s, box-shadow ease-in-out 0.07s; +} + +.form-control--stealth:hover, .form-control--stealth:focus { + border: 1px solid #cecece; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); +} + +.form-control:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: none; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.is-invalid .form-control, .form-control.is-invalid { + border: 1px solid #dc3545; + box-shadow: + 0 0 0 2px rgba(220, 53, 69, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); +} + +.is-invalid .form-control:focus, .form-control.is-invalid:focus { + box-shadow: + 0 0 0 2px rgba(220, 53, 69, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.form-control::placeholder { + color: #8d8d8d; +} + +.form-control--inline { + display: inline-block; + width: auto; +} + +.form-control-wrap { + position: relative; +} + +.form-control-wrap--loading .form-control { + padding-right: 26px; +} + +.form-control-wrap--loading::after { + content: ''; + width: 12px; + height: 12px; + position: absolute; + top: 0; + right: 7px; + bottom: 0; + margin: auto 0; + border: 2px solid #9eaebd; + border-bottom-color: transparent; + border-radius: 100%; + animation: spin 1s infinite linear; +} + +.col-form-label, .col-form-value { + height: 31px; + line-height: 31px; +} + +.caret { + display: inline-block; + width: 7px; + height: 7px; + border-right: 2px solid #171717; + border-bottom: 2px solid #171717; + transform: rotate(45deg); + vertical-align: middle; + vertical-align: 0.16em; + margin-left: 0.3em; +} + +.caret--pre { + margin-left: 0; + margin-right: 0.3em; +} + +.caret--up { + transform: rotate(-135deg); + vertical-align: 0; +} + +.caret--left { + transform: rotate(135deg); +} + +.dropdown { + position: relative; +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + padding: 6px 0; + margin: 2px 0 0; + font-size: 1rem; + min-width: 160px; + color: #171717; + background-color: #fff; + border-radius: 4px; + flex-direction: column; + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2); + text-align: left; +} + +.dropdown-menu--right { + left: auto; + right: 0; +} + +.dropdown--open .dropdown-menu, .dropdown-menu--open { + display: flex; +} + +.dropdown-menu__item { + color: #171717; + padding: 4px 16px; + white-space: nowrap; + font-size: 14px; +} + +a.dropdown-menu__item:hover, a.dropdown-menu__item--active { + text-decoration: none; + background: #f1f1f1; + color: #171717; +} + +.dropdown__separator { + height: 1px; + background: #e0e0e0; + margin: 6px 0; +} + +.nav { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0; + list-style: none; +} + +.nav__item { + display: block; +} + +.nav__link { + padding: .5rem 1rem; + display: block; + white-space: nowrap; + color: #6b6b6b; +} +.nav__item--active > .nav__link { + color: #3f3f3f; +} +a.nav__link:hover { + color: #3f3f3f; + text-decoration: none; +} + +.nav__item:first-child > .nav__link { + padding-left: 0; +} + +.nav__item:last-child > .nav__link { + padding-right: 0; +} + +.nav--vertical { + flex-direction: column; +} + +.nav--vertical .nav__item { + display: flex; + flex-direction: column; + position: relative; + font-size: 14px; + line-height: 30px; + padding: 0; + font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; +} +.nav--vertical .nav__item > .nav__item { + margin-left: 20px; +} + +.nav--vertical .nav__link { + padding: 0; + color: #555555; +} +.nav__item--active > .nav__link { + color: #171717; + font-weight: 600; +} +.nav--vertical a.nav__link:hover { + color: #004ea2; + text-decoration: none; +} + +.nav--navbar .dropdown-menu { + margin-left: 1rem; +} + +.card { + margin-bottom: 16px; + border-radius: 4px; + background: white; + box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07); + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); + box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,0.2); +} + +a.card { + text-decoration: none; + color: inherit; + transition: box-shadow 0.2s; +} + +a.card:hover { + box-shadow: 0 9px 20px 0 rgba(50,50,93,.15), 0 3px 9px 0 rgba(0,0,0,.07), 0 1px 7px 0 rgba(0,0,0,0.2); +} + +.card__header { + padding: 16px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.card__title { + font-size: 18px; + font-weight: 500; + color: #3f3f3f; +} + +.card__subheading { + font-size: 14px; + color: #6b6b6b; + margin-top: 5px; +} + +.card__body, .card__section { + border-top: 1px solid #e0e0e0; + padding: 16px 20px; +} + +.card--no-separators .card__body, .card--no-separators .card__section { + border: none; +} + +.card__section { + background: #f8f8f8; +} + +.card--white .card__section { + background: #fff; +} + +.card__section--error, .card--white .card__section--error { + color: #721c24; + background-color: #f8d7da; + border-top: 1px solid #f5c6cb; + border-bottom: 1px solid #f5c6cb; +} + +.card__section:last-child { + border-bottom: none; +} + +.card__section--error + .card__body, .card__section--error + .card__section { + border-top: none; +} + +.card > .card__body:first-child, .card > .card__section:first-child { + border-top: none; +} + +.card > .card__body:first-child, .card > .card__section:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.card > .card__body:last-child, .card > .card__section:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.card__form-section-left { + margin-bottom: 8px; +} + +.card__form-section-title { + font-size: 16px; + font-weight: 500; + color: #3f3f3f; +} + +.card__form-section-subtitle { + font-size: 14px; + color: #6b6b6b; +} + + +.alert { + padding: .75rem 1.25rem; + margin-bottom: 16px; + border: 1px solid transparent; + border-radius: 4px; +} + +.alert--error { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + + +.form-group { + margin-bottom: 12px; + font-size: 14px; +} + +.form-group__help { + font-size: 12px; + margin-top: 4px; + color: #3f3f3f; +} + +.card__section > .form-group:last-child { + margin-bottom: 0; +} + +.form-group > label { + display: block; + font-size: 14px; + font-weight: 500; + color: #3f3f3f; + margin-bottom: 4px; +} + +.invalid-feedback { + font-size: 14px; + margin-top: 4px; + color: #dc3545; +} + +label.checkbox { + font-size: 14px; + color: #3f3f3f; + font-weight: 400; +} + +.editable-list { + margin-bottom: 12px; +} + +.editable-list__row { + font-size: 14px; + padding: 4px 0 0 0; +} + +.editable-list--sm .editable-list__row { + margin-bottom: 8px; +} + +.editable-list__field { + margin-bottom: 4px; +} + +.card__section .editable-list:last-child { + margin-bottom: 0; +} + +@media (min-width: 576px) { + .editable-list--sm .editable-list__row { + margin-bottom: 0; + } +} + +.btn { + font-family: inherit; /* not needed if using normalize.css */ + margin: 0; /* not needed if using normalize.css */ + display: inline-block; + cursor: pointer; + overflow: visible; /* remove padding in IE */ + padding: 4px 10px; + font-size: 14px; + line-height: 1.5; + text-decoration: none; + color: #495057; + background-color: #fff; + background-image: linear-gradient(#ffffff, #fbfbfb); + background-clip: padding-box; + border: 1px solid #cecece; + border-radius: 4px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 2px 0 rgba(0, 0, 0, 0.05); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + user-select: none; +} + +.btn:hover { + color: #495057; + text-decoration: none; + background-image: linear-gradient(#fbfbfb, #f5f5f5); +} + +.btn:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: none; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.btn.active { + background: #959595; + border-color: #767676; + color: #fff; +} + +.btn-group { + display: inline-flex; +} + +.btn-group .btn + .btn { + margin-left: -1px; +} + +.btn-group > .btn:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group >.btn:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group > .btn:hover, .btn-group > .btn:focus { + z-index: 1; +} + +.btn-group > .btn.active { + z-index: 2; +} + +.btn--subtle { + border: none; + background: none; + box-shadow: none; + transition: background-color ease-in-out 0.1s, box-shadow ease-in-out 0.15s; +} + +.btn--subtle:hover { + background: rgba(0, 0, 0, 0.06); + color: #3f3f3f; +} + +.btn--subtle:focus { + background: none; + box-shadow: none; +} + +.btn--subtle:active { + background: rgba(0, 0, 0, 0.09); + color: #171717; + box-shadow: none; +} + +.btn--disabled, .btn:disabled { + opacity: .65; +} + +a.btn--disabled, fieldset:disabled a.btn { + pointer-events: none; +} + +.text-row { display: flex; } +.text-shrink { flex-shrink: 100000; } +.text-expand { flex: 1; flex-basis: auto; } + +.spinner-padding { + padding: 40px; + display: flex; + justify-content: center; +} + +.spinner { + content: ''; + border: 3px solid #9eaebd; + border-bottom-color: transparent; + border-radius: 100%; + animation: spin 1s infinite linear; +} + +.spinner--sm { + width: 12px; + height: 12px; + border-width: 2px; +} + +.spinner--md { + width: 24px; + height: 24px; + border-width: 3px; +} + +.spinner--lg { + width: 32px; + height: 32px; + border-width: 4px; +} + +@keyframes spin { + from { transform:rotate(0deg); } + to { transform:rotate(360deg); } +} + +.table { + width: 100%; + background: transparent; +} + +.table tbody + .table tbody { + border-top: 2px solid #dee2e6; +} + +.table td, .table th { + padding: .3rem .75rem; + vertical-align: top; +} + +.table th { + font-weight: 500; +} + +.table thead th { + padding: .6rem .75rem; + vertical-align: bottom; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; +} + +.table thead th.th--nopad { + padding: 0; +} + +.table thead th .table-header { + display: block; + padding: .6rem .75rem; +} + +.form-control--table-edit { + /* align field so it 's at the same position the text would be */ + height: 28px; + margin: -4px -8px -4px -8px; +} + +.table-edit-overlay-base { + position: relative; +} + +.form-control--table-edit-overlay { + position: absolute; + top: 3px; + left: 11px; + opacity: 0; + transition: border-color ease-in-out 0.07s, box-shadow ease-in-out 0.07s, opacity ease-in-out 0.07s; +} + +.card > .table > tbody > tr:first-child > td .form-control--table-edit-overlay { + top: 7px; +} + +.form-control--table-edit-overlay:hover, .form-control--table-edit-overlay:focus { + opacity: 1; +} + +@media (max-width: 575.98px) { + .table--responsive-single-sm { + display: block; + } + .table--responsive-single-sm tbody, .table--responsive-single-sm thead { + display: block; + } + .table--responsive-single-sm tr { + display: block; + padding: 8px 15px !important; + } + .table--responsive-single-sm td, .table--responsive-single-sm th, .table--responsive-single-sm th .table-header { + display: block; + padding: 0 !important; + } + .table--responsive-single-sm td[width], .table--responsive-single-sm th[width] { + width: auto !important; + } + .table--responsive-single-sm thead th { + border: none; + } + .table--responsive-single-sm thead { + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + } + .card > .table--responsive-single-sm:first-child > thead { + border-top: none; + } + .form-control--table-edit-overlay, .card > .table > tbody > tr:first-child > td .form-control--table-edit-overlay { + top: 0px; + left: 0px; + } + .table-edit-overlay-base { + height: 26px; + } + .form-control--table-edit { + margin: 0 -8px 0 -8px; + } +} + +.card > .table > thead { + background-color: #fafafa; +} + +.card > .table:first-child > thead { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.card > .table:first-child > thead > tr > th { + border-top: none; +} + +.card > .table > tbody > tr:first-child > td { + padding-top: .5rem; +} + +.card > .table > tbody > tr:last-child > td { + padding-bottom: .5rem; +} + +.card > .table > tbody > tr > td:first-child, .card > .table > thead > tr > th:first-child { + padding-left: 20px; +} + +.card > .table > thead > tr > th.th--nopad:first-child { + padding-left: 0; +} + +.card > .table > thead > tr > th:first-child > .table-header { + padding-left: 20px; +} + +.card > .table > tbody > tr > td:last-child, .card > .table > thead > tr > th:last-child { + padding-right: 20px; +} + +.table > thead > tr > th:last-child { + padding-right: 0; +} + +.card > .table > thead > tr > th.th--nopad:last-child { + padding-right: 0; +} + +.card > .table > thead > tr > th:last-child > .table-header { + padding-right: 20px; +} + +.td-editable { + cursor: pointer; +} + +a.td-editable { + display: block; + color: inherit; + text-decoration: inherit; +} + +.vertical-selector { + font-size: 14px; +} + +.vertical-selector__item { + display: block; + font-weight: 500; + padding: 5px 10px; + border-radius: 5px; + color: #555555; +} + +a.vertical-selector__item { + text-decoration: none; +} + +.vertical-selector__item:hover { + background-color: rgba(255, 255, 255, 0.4); +} + +.vertical-selector__item--active { + background-color: rgba(255, 255, 255, 0.7); + color: #171717; + font-weight: bold +} + +.vertical-selector-label { + font-size: 14px; + font-weight: 500; + color: #3f3f3f; + margin-bottom: 8px; +} + +.expand-arrow { + display: inline-block; + width: 7px; + height: 7px; + border-right: 1px solid #171717; + border-bottom: 1px solid #171717; + transform: rotate(-45deg); + vertical-align: middle; + vertical-align: 0.1em; +} + +.expand-arrow--open { + transform: rotate(45deg); + vertical-align: middle; + vertical-align: 0.16em; +} + +.modal-backdrop { + z-index: 1040; + background-color: rgba(0, 0, 0, 0.21); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +body.has-modal-open { + overflow: hidden; +} + +.modal { + display: none; + z-index: 1050; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + flex-direction: column; + align-items: center; + padding: 14px; +} + +.modal--open { + display: flex; +} + +.modal__content { + background: #f8f8f8; + width: 100%; + margin: auto; + box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +@media (min-width: 630px) { + .modal__content { + width: 600px; + } +} + +.modal__header { + height: 72px; + background-color: #fff; + border-bottom: 1px solid #e0e0e0; + display: flex; + align-items: center; + padding: 0 22px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.modal__title { + font-size: 20px; + font-weight: 500; + flex: 1; +} + +.modal__footer { + height: 72px; + background-color: #fff; + border-top: 1px solid #e0e0e0; + padding: 0 19px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + display: flex; + align-items: center; +} + +.modal__footer-buttons { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.modal__footer-buttons .btn { + margin-left: 10px; +} + +.modal__body { + background-color: #f8f8f8; + padding: 22px; +} + +.modal__body + .modal__body, .modal__table + .modal__body { + border-top: 1px solid #e0e0e0; +} + +.modal__close { + display: block; + width: 40px; + height: 40px; + position: relative; + background: transparent; + border: none; + margin-right: -8px; + cursor: pointer; +} + +.modal__close::before, .modal__close::after { + position: absolute; + top: 11px; /* (40 (container height) - 20 (stroke height)) / 2 */ + left: 19px; /* (40 (container width) - 2 (stroke width)) / 2 */ + content: ''; + height: 18px; + width: 2px; + background: #6b6b6b; + transform: rotate(-45deg); +} + +.modal__close::after { + transform: rotate(45deg); +} + +.modal__section-title { + font-size: 18px; + font-weight: 500; + color: #3f3f3f; + margin: -5px 0 15px 0; +} + +.modal__section-title--solo { + margin: -5px 0; +} + +.modal__table > thead { background: #fafafa; } +/* reduce padding to fit in modal better */ +.modal__table td, .modal__table th { padding: .3rem .5rem; } +.modal__table thead th { padding: .6rem .5rem; } +.modal__table > tbody > tr > td:first-child, .modal__table > thead > tr > th:first-child { padding-left: 22px; } +.modal__table > thead > tr > th.th--nopad:first-child { padding-left: 0; } +.modal__table > thead > tr > th:first-child > .table-header { padding-left: 22px; } +.modal__table > tbody > tr > td:last-child, .modal__table > thead > tr > th:last-child { padding-right: 22px; } +.modal__table > thead > tr > th.th--nopad:last-child { padding-right: 0; } +.modal__table > thead > tr > th:last-child > .table-header { padding-right: 22px; } + +.btn--remove-row { + height: 29px; + width: 29px; + position: relative; +} + +.btn--remove-row::before, .btn--remove-row::after { + position: absolute; + top: 8px; /* (29 (container height) - 17 (stroke height)) / 2 */ + left: 13px; /* (29 (container width) - 2 (stroke width)) / 2 */ + content: ''; + height: 13px; + width: 2px; + background: #8d8d8d; + transform: rotate(-45deg); +} + +.btn--remove-row::after { + transform: rotate(45deg); +}
\ No newline at end of file diff --git a/css3/framework/grid.css b/css3/framework/grid.css new file mode 100644 index 00000000..c66ff5b2 --- /dev/null +++ b/css3/framework/grid.css @@ -0,0 +1,102 @@ +.container { + width: 100%; + padding: 0 15px; + margin: 0 auto; +} + +.row { + margin: 0 -15px; + display: flex; + flex-wrap: wrap; +} + +.row--compact { + margin: 0 -5px; +} + +.row--ai-center { + align-items: center; +} + +.col, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl { + padding-left: 15px; + padding-right: 15px; + width: 100%; + min-width: 0; +} +.row--compact .col, .row--compact .col-sm, .row--compact .col-md, +.row--compact .col-lg, .row--compact .col-xl, .row--compact .col-xxl { + padding-left: 5px; + padding-right: 5px; +} + +.col { flex: 1; } +.col--2 { flex: 2; } +.col--3 { flex: 3; } +.col--4 { flex: 4; } + +.col--auto { flex: 0 0 auto; width: auto; } + +@media (min-width: 576px) { + /* .container { max-width: 540px; } */ + .col-sm { + flex: 1; + } + .col-sm--2 { flex: 2; } + .col-sm--3 { flex: 3; } + .col-sm--4 { flex: 4; } + .col-sm--auto { flex: 0 0 auto; width: auto; } + .d-sm-block { display: block; } + .d-sm-none { display: none; } + .text-sm-right { text-align: right; } +} +@media (min-width: 768px) { + /* .container { max-width: 720px; } */ + .col-md { + flex: 1; + } + .col-md--2 { flex: 2; } + .col-md--3 { flex: 3; } + .col-md--4 { flex: 4; } + .col-md--auto { flex: 0 0 auto; width: auto; } + .d-md-block { display: block; } + .d-md-none { display: none; } +} +@media (min-width: 992px) { + .container { max-width: 960px; } + .container--narrow { max-width: 912px; } + .col-lg { + flex: 1; + } + .col-lg--2 { flex: 2; } + .col-lg--3 { flex: 3; } + .col-lg--4 { flex: 4; } + .col-lg--auto { flex: 0 0 auto; width: auto; } + .d-lg-block { display: block; } + .d-lg-none { display: none; } +} +@media (min-width: 1200px) { + .container { max-width: 1140px; } + .container--narrow { max-width: 912px; } + .col-xl { + flex: 1; + } + .col-xl--2 { flex: 2; } + .col-xl--3 { flex: 3; } + .col-xl--4 { flex: 4; } + .col-xl--auto { flex: 0 0 auto; width: auto; } + .d-xl-block { display: block; } + .d-xl-none { display: none; } +} +@media (min-width: 1360px) { + /* .container { max-width: 1300px; } */ + .col-xxl { + flex: 1; + } + .col-xxl--2 { flex: 2; } + .col-xxl--3 { flex: 3; } + .col-xxl--4 { flex: 4; } + .col-xxl--auto { flex: 0 0 auto; width: auto; } + .d-xxl-block { display: block; } + .d-xxl-none { display: none; } +} diff --git a/css3/framework/helpers.css b/css3/framework/helpers.css new file mode 100644 index 00000000..47c14126 --- /dev/null +++ b/css3/framework/helpers.css @@ -0,0 +1,127 @@ +/* bootstrap 4 inspired css helpers */ + +.d-none { display: none !important; } +.d-block { display: block !important; } +.d-inline { display: block !important; } +.d-flex { display: flex !important; } + +.single-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } +.text-left { text-align: left; } +.text-right { text-align: right; } +.tabular-nums { font-variant-numeric: tabular-nums; } + +.pull-right { float: right; } + +.flex-expand { flex: 1; } +.jc-start { justify-content: flex-start; } +.jc-end { justify-content: flex-end; } +.jc-center { justify-content: center; } +.jc-between { justify-content: space-between; } +.align-items-center { align-items: center; } + +.img--fit { + width: 100%; + height: auto; +} + +.img--rounded { + border-radius: 4px; +} + +.elevation-1 { + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.18), 0 5px 15px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0,0,0,0.1); +} + +.svg-icon { + display: inline-block; + font-size: inherit; + height: 1em; + overflow: visible; + vertical-align: -.125em; +} + +.semi-muted { color: #3f3f3f; } +.muted { color: #6b6b6b; } + +.opacity-muted { opacity: 0.6; } + +.semi-bold { font-weight: 500; } +.bold { font-weight: bold; } + +.fs-body { font-size: 1rem; } +.fs-medium { font-size: 0.875rem; } + +.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } +.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } +.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } +.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } +.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } +.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } + +.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } +.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } +.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } +.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } +.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } + +.mb-0 { margin-bottom: 0 !important; } +.mb-1 { margin-bottom: 0.25rem !important; } +.mb-2 { margin-bottom: 0.5rem !important; } +.mb-3 { margin-bottom: 1rem !important; } +.mb-4 { margin-bottom: 1.5rem !important; } +.mb-5 { margin-bottom: 2.5rem !important; } + +.mt-0 { margin-top: 0 !important; } +.mt-1 { margin-top: 0.25rem !important; } +.mt-2 { margin-top: 0.5rem !important; } +.mt-3 { margin-top: 1rem !important; } +.mt-4 { margin-top: 1.5rem !important; } +.mt-5 { margin-top: 2.5rem !important; } + +.ml-0 { margin-left: 0 !important; } +.ml-1 { margin-left: 0.25rem !important; } +.ml-2 { margin-left: 0.5rem !important; } +.ml-3 { margin-left: 1rem !important; } +.ml-4 { margin-left: 1.5rem !important; } +.ml-5 { margin-left: 2.5rem !important; } + +.mr-0 { margin-right: 0 !important; } +.mr-1 { margin-right: 0.25rem !important; } +.mr-2 { margin-right: 0.5rem !important; } +.mr-3 { margin-right: 1rem !important; } +.mr-4 { margin-right: 1.5rem !important; } +.mr-5 { margin-right: 2.5rem !important; } + +@media (min-width: 576px) { + .d-sm-block { display: block !important; } + .d-sm-inline { display: inline !important; } + .d-sm-flex { display: flex !important; } + .d-sm-none { display: none !important; } + .text-sm-right { text-align: right; } +} +@media (min-width: 768px) { + .d-md-block { display: block !important; } + .d-md-inline { display: inline !important; } + .d-md-flex { display: flex !important; } + .d-md-none { display: none !important; } + .single-line-md { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } +} +@media (min-width: 992px) { + .d-lg-block { display: block !important; } + .d-lg-inline { display: inline !important; } + .d-lg-flex { display: flex !important; } + .d-lg-none { display: none !important; } +} +@media (min-width: 1200px) { + .d-xl-block { display: block !important; } + .d-xl-inline { display: inline !important; } + .d-xl-flex { display: flex !important; } + .d-xl-none { display: none !important; } +} +@media (min-width: 1360px) { + .d-xxl-block { display: block !important; } + .d-xxl-inline { display: inline !important; } + .d-xxl-flex { display: flex !important; } + .d-xxl-none { display: none !important; } +} 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; + } +} |