1913 lines
30 KiB
CSS
1913 lines
30 KiB
CSS
@import "https://fonts.googleapis.com/css?family=Raleway";
|
|
|
|
.category-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 50px
|
|
}
|
|
|
|
.category-row {
|
|
margin-left: 10px;
|
|
padding: 10px
|
|
}
|
|
|
|
.category-small {
|
|
width: 40px
|
|
}
|
|
|
|
.category-medium {
|
|
width: 150px
|
|
}
|
|
|
|
.category-row > * {
|
|
padding: 10px;
|
|
font-size: 1.1em
|
|
}
|
|
|
|
.category-row > .btn {
|
|
margin-right: 10px
|
|
}
|
|
|
|
.category-row .delete-btn {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
opacity: .5
|
|
}
|
|
|
|
.category-row .delete-btn.active {
|
|
opacity: 1;
|
|
transition: 1s
|
|
}
|
|
|
|
.category-row .static-value {
|
|
text-align: center;
|
|
color: red;
|
|
display: inline-block;
|
|
font-size: 1.5em;
|
|
width: 2em
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
border: 1px solid transparent;
|
|
padding: .5rem 1rem;
|
|
font-size: 1rem;
|
|
border-radius: .25rem;
|
|
-webkit-transition: all .2s ease-in-out;
|
|
-o-transition: all .2s ease-in-out;
|
|
transition: all .2s ease-in-out
|
|
}
|
|
|
|
.btn.active, .btn:active {
|
|
background-image: none;
|
|
outline: 0;
|
|
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
|
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
|
|
}
|
|
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: #0275d8;
|
|
border-color: #0275d8
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: #fff;
|
|
background-color: #025aa5;
|
|
border-color: #01549b
|
|
}
|
|
|
|
.btn-info {
|
|
color: #fff;
|
|
background-color: #5bc0de;
|
|
border-color: #5bc0de
|
|
}
|
|
|
|
.btn-info.active {
|
|
color: #fff;
|
|
background-color: #31b0d5;
|
|
border-color: #269abc
|
|
}
|
|
|
|
.btn-info.active:hover {
|
|
color: #fff;
|
|
background-color: #269abc;
|
|
border-color: #1b6d85
|
|
}
|
|
|
|
.btn-info:hover {
|
|
color: #fff;
|
|
background-color: #31b0d5;
|
|
border-color: #2aabd2
|
|
}
|
|
|
|
.btn-success {
|
|
color: #fff;
|
|
background-color: #5cb85c;
|
|
border-color: #5cb85c
|
|
}
|
|
|
|
.btn-success:hover {
|
|
color: #fff;
|
|
background-color: #449d44;
|
|
border-color: #419641
|
|
}
|
|
|
|
.btn-danger {
|
|
color: #fff;
|
|
background-color: #d9534f;
|
|
border-color: #d43f3a
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
color: #fff;
|
|
background-color: #c9302c;
|
|
border-color: #ac2925
|
|
}
|
|
|
|
.list-page-container {
|
|
margin: auto;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1.7em
|
|
}
|
|
|
|
.tree-container {
|
|
position: relative;
|
|
width: 90%;
|
|
font-size: 1em;
|
|
min-height: 3em
|
|
}
|
|
|
|
.list-container .category-tree {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-top: 1em;
|
|
padding-bottom: 3em;
|
|
padding-left: 1em
|
|
}
|
|
|
|
.tree-search-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 1em;
|
|
padding-bottom: 1em
|
|
}
|
|
|
|
.tree-search-middle {
|
|
width: 90%
|
|
}
|
|
|
|
.tree-search {
|
|
padding: .7em;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: inline-block
|
|
}
|
|
|
|
.category-tree {
|
|
position: relative
|
|
}
|
|
|
|
.category-tree > .list-category {
|
|
padding-top: 1em
|
|
}
|
|
|
|
.category-tree > .list-category:first-child {
|
|
margin-top: 0 !important
|
|
}
|
|
|
|
.list-category {
|
|
position: relative;
|
|
margin-top: -2.5em;
|
|
padding-top: .5em;
|
|
padding-left: 1em;
|
|
background-color: #1b252f
|
|
}
|
|
|
|
.link-builder-container {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
background-color: #ff0592;
|
|
background-color: #1b252f
|
|
}
|
|
|
|
.link-builder-filler {
|
|
position: relative;
|
|
margin-top: -2.5em;
|
|
height: 200px;
|
|
background-color: #1b252f
|
|
}
|
|
|
|
.list-spinner {
|
|
position: relative;
|
|
margin-top: -2.5em;
|
|
height: 200px;
|
|
background-color: #1b252f
|
|
}
|
|
|
|
.link-builder-close {
|
|
position: absolute;
|
|
display: flex;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 5%;
|
|
min-width: 1.5em
|
|
}
|
|
|
|
.link-builder-close-icon {
|
|
cursor: pointer;
|
|
width: 2em;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
text-align: center
|
|
}
|
|
|
|
.link-builder {
|
|
margin: auto;
|
|
width: 90%;
|
|
max-width: calc(100% - 3em);
|
|
padding-top: .5em;
|
|
padding-bottom: .5em
|
|
}
|
|
|
|
.link-builder-icon {
|
|
height: 3em
|
|
}
|
|
|
|
.link-builder-link {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
font-size: .8em;
|
|
line-height: 3em;
|
|
width: 100%;
|
|
color: #14171e
|
|
}
|
|
|
|
.link-builder-link span {
|
|
overflow: hidden;
|
|
padding-left: .8em;
|
|
text-overflow: ellipsis;
|
|
width: 100%
|
|
}
|
|
|
|
.link-builder-link:not(:first-child) {
|
|
margin-top: .8em
|
|
}
|
|
|
|
.list-element-container {
|
|
position: relative
|
|
}
|
|
|
|
.list-element-container.expanded {
|
|
padding-bottom: 3em !important
|
|
}
|
|
|
|
.list-element-container.show-all {
|
|
padding-bottom: 2.5em !important
|
|
}
|
|
|
|
.list-element-container:not(:empty) {
|
|
padding-top: .5em;
|
|
padding-bottom: .5em;
|
|
padding-left: 1em;
|
|
height: calc(100% - 100px);
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.list-show-more {
|
|
position: absolute;
|
|
bottom: 2.5em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1em;
|
|
height: 1.5em;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%
|
|
}
|
|
|
|
.list-element-container.expanded .list-show-more {
|
|
bottom: 1.5em
|
|
}
|
|
|
|
.list-show-more-background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
border-radius: .3rem;
|
|
background-color: #1b252f;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
opacity: .8
|
|
}
|
|
|
|
.list-show-more-icon {
|
|
color: red;
|
|
color: #ea9215;
|
|
color: #ff0592;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
height: 1em
|
|
}
|
|
|
|
.list-element {
|
|
min-width: 12em
|
|
}
|
|
|
|
.list-checkbox {
|
|
font-size: 2em
|
|
}
|
|
|
|
.list-header:hover .list-checkbox {
|
|
visibility: visible
|
|
}
|
|
|
|
.list-element h3 {
|
|
display: inline-block;
|
|
font-size: .8em;
|
|
margin: 0;
|
|
margin-bottom: .5em;
|
|
margin-top: .5em;
|
|
font-weight: 400
|
|
}
|
|
|
|
.list-category h2 {
|
|
display: inline-block;
|
|
font-size: 1.1em;
|
|
margin: 0;
|
|
padding-bottom: .2em
|
|
}
|
|
|
|
.list-header .fa {
|
|
padding-left: .5em;
|
|
padding-right: .5em
|
|
}
|
|
|
|
.list-header .list-external-link {
|
|
margin-left: .3em;
|
|
margin-right: .5em
|
|
}
|
|
|
|
.tree-checkbox {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
border-radius: .3rem;
|
|
margin-right: .7em;
|
|
height: 1em;
|
|
width: 1em;
|
|
background-color: #fff
|
|
}
|
|
|
|
.tree-checkbox.checked > div {
|
|
border-bottom: 4px solid green;
|
|
border-right: 4px solid green;
|
|
transform: rotate(45deg);
|
|
height: 100%;
|
|
width: 50%;
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 4px
|
|
}
|
|
|
|
@media (min-width: 1280px) and (max-width: 1920px) {
|
|
.list-page-container {
|
|
font-size: 1.4em
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
.list-page-container {
|
|
font-size: 1.3em
|
|
}
|
|
}
|
|
|
|
.list-buttons {
|
|
display: flex;
|
|
justify-content: center
|
|
}
|
|
|
|
.list-button {
|
|
cursor: pointer;
|
|
width: 2em;
|
|
text-align: center
|
|
}
|
|
|
|
.list-button.active {
|
|
color: #ff0592
|
|
}
|
|
|
|
body {
|
|
background-color: #1b252f;
|
|
font-size: 14px;
|
|
font-family: Raleway, sans-serif;
|
|
width: 100%;
|
|
margin: 0
|
|
}
|
|
|
|
.center-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: auto;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 5em
|
|
}
|
|
|
|
.block {
|
|
padding: 6px;
|
|
display: inline-block
|
|
}
|
|
|
|
.btn.large {
|
|
cursor: pointer;
|
|
padding: 1.3125rem 2.625rem;
|
|
font-size: 2.1875rem;
|
|
border-radius: .525rem
|
|
}
|
|
|
|
.center-center {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.btn-info {
|
|
color: #fff;
|
|
background-color: #5bc0de;
|
|
border-color: #5bc0de
|
|
}
|
|
|
|
.btn-info:hover {
|
|
color: #fff;
|
|
background-color: #31b0d5;
|
|
border-color: #2aabd2
|
|
}
|
|
|
|
.btn-success {
|
|
color: #fff;
|
|
background-color: #5cb85c;
|
|
border-color: #5cb85c
|
|
}
|
|
|
|
.btn-success:hover {
|
|
color: #fff;
|
|
background-color: #449d44;
|
|
border-color: #419641
|
|
}
|
|
|
|
.btn-danger {
|
|
color: #fff;
|
|
background-color: #d9534f;
|
|
border-color: #d43f3a
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
color: #fff;
|
|
background-color: #c9302c;
|
|
border-color: #ac2925
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
.main-content {
|
|
padding: 0 5%;
|
|
max-width: 2000px
|
|
}
|
|
|
|
.page-info-header {
|
|
padding: 0 5%;
|
|
max-width: 2000px
|
|
}
|
|
|
|
.slideshow .info-bar {
|
|
font-size: 2em
|
|
}
|
|
|
|
.slideshow .info-bar .right {
|
|
width: 100px !important
|
|
}
|
|
|
|
.header {
|
|
font-size: 4em
|
|
}
|
|
|
|
.slideshow .info-bar .middle {
|
|
width: calc(100% - 200px)
|
|
}
|
|
|
|
.slideshow .info-bar .left {
|
|
width: 125px !important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) and (max-width: 1920px) {
|
|
.top img {
|
|
min-width: 2000px
|
|
}
|
|
|
|
.top {
|
|
height: 300px !important
|
|
}
|
|
|
|
.header {
|
|
font-size: 3.5em
|
|
}
|
|
|
|
.main-content {
|
|
padding: 0 5%
|
|
}
|
|
|
|
.page-info-header {
|
|
padding: 0 5%
|
|
}
|
|
|
|
.grid .info-bar {
|
|
font-size: 1.5em !important
|
|
}
|
|
|
|
.slideshow .info-bar {
|
|
font-size: 1.5em;
|
|
height: 80px !important
|
|
}
|
|
|
|
div.arrow-bar.down {
|
|
height: 20px !important
|
|
}
|
|
|
|
.info-bar .left {
|
|
font-size: 1.25em !important
|
|
}
|
|
|
|
.external-link {
|
|
font-size: 1.1em !important
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: .9em !important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 800px) and (max-width: 1280px) {
|
|
.header h1 {
|
|
font-size: .8em !important
|
|
}
|
|
|
|
.main-content {
|
|
padding: 0 5%
|
|
}
|
|
|
|
.page-info-header {
|
|
padding: 0 5%
|
|
}
|
|
|
|
.top img {
|
|
min-width: 1280px
|
|
}
|
|
|
|
.top {
|
|
height: 200px !important
|
|
}
|
|
|
|
.header {
|
|
font-size: 3em
|
|
}
|
|
|
|
.grid .info-bar {
|
|
font-size: 1.4em !important
|
|
}
|
|
|
|
.slideshow .info-bar {
|
|
font-size: 1.5em;
|
|
height: 70px !important
|
|
}
|
|
|
|
div.arrow-bar.down {
|
|
height: 10px !important
|
|
}
|
|
|
|
.info-bar .left {
|
|
font-size: 1.25em !important
|
|
}
|
|
|
|
.external-link {
|
|
font-size: 1.1em !important
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
.top {
|
|
display: none
|
|
}
|
|
|
|
.page-info-content {
|
|
padding: 4.5em 1em 1em 1em !important;
|
|
font-size: .5em !important
|
|
}
|
|
|
|
.header {
|
|
visibility: hidden
|
|
}
|
|
|
|
.error-bar {
|
|
font-size: 1.5em !important;
|
|
height: 100vh !important
|
|
}
|
|
|
|
.grid .info-bar {
|
|
font-size: 1.3em !important
|
|
}
|
|
|
|
.info-bar .left {
|
|
font-size: 1.25em !important
|
|
}
|
|
|
|
.external-link {
|
|
font-size: 1.1em !important
|
|
}
|
|
|
|
.center-bar {
|
|
font-size: 2em !important
|
|
}
|
|
|
|
.center-bar .btn.large {
|
|
padding: .75rem 1.5rem;
|
|
font-size: 1.15rem;
|
|
border-radius: .3rem
|
|
}
|
|
|
|
.center-bar .block {
|
|
padding: 4px
|
|
}
|
|
|
|
.slideshow .info-bar {
|
|
font-size: 1.3em !important;
|
|
height: 55px !important
|
|
}
|
|
|
|
video {
|
|
pointer-events: none
|
|
}
|
|
|
|
div.arrow-bar {
|
|
visibility: hidden
|
|
}
|
|
|
|
.media-element.grid:hover .media-overlay.gradient {
|
|
visibility: hidden !important
|
|
}
|
|
|
|
.media-element.grid .border {
|
|
border-left: 0 !important;
|
|
border-right: 0 !important
|
|
}
|
|
|
|
.stack {
|
|
width: 18px;
|
|
height: 13px
|
|
}
|
|
|
|
.external-link a {
|
|
padding-left: 6px
|
|
}
|
|
}
|
|
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
background-color: #1b252f;
|
|
font-size: 14px;
|
|
font-family: Raleway;
|
|
width: 100%;
|
|
margin: 0
|
|
}
|
|
|
|
body.slideshow {
|
|
height: 1px;
|
|
overflow-y: hidden
|
|
}
|
|
|
|
.top {
|
|
height: 500px;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden !important
|
|
}
|
|
|
|
.top .image-wrapper {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%
|
|
}
|
|
|
|
.top img {
|
|
width: 100%
|
|
}
|
|
|
|
.hide-top {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
background-color: #1b252f;
|
|
z-index: -1
|
|
}
|
|
|
|
.top-overlay {
|
|
height: 100%;
|
|
background: linear-gradient(to top, #1b252f 0, #1b252f 5%, rgba(24, 27, 30, 0) 100%);
|
|
text-align: center;
|
|
width: 100%;
|
|
display: table
|
|
}
|
|
|
|
.header {
|
|
position: absolute;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.header h1 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
line-height: 1.3em;
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1em;
|
|
font-weight: 400
|
|
}
|
|
|
|
.header h1 a {
|
|
padding-left: .5em
|
|
}
|
|
|
|
.header-single-item {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
margin-left: .3em;
|
|
margin-right: .3em
|
|
}
|
|
|
|
div.media-element.grid .arrows {
|
|
display: none
|
|
}
|
|
|
|
div.close-icon {
|
|
position: absolute;
|
|
font-size: 1.3em;
|
|
right: 0;
|
|
top: 10px;
|
|
width: 50px;
|
|
font-weight: 700;
|
|
text-align: center
|
|
}
|
|
|
|
div.arrows {
|
|
z-index: 1;
|
|
position: absolute;
|
|
transition: opacity 1s;
|
|
webkit-transition: opacity 1s;
|
|
color: #fff;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 1.3em
|
|
}
|
|
|
|
div.arrow-bar {
|
|
pointer-events: all;
|
|
z-index: 1;
|
|
position: absolute
|
|
}
|
|
|
|
div.arrow-bar.right {
|
|
right: 0;
|
|
width: 50px;
|
|
height: 100%
|
|
}
|
|
|
|
div.arrow-bar.left {
|
|
left: 0;
|
|
width: 50px;
|
|
height: 100%
|
|
}
|
|
|
|
div.arrow-bar.up {
|
|
top: 0;
|
|
width: 100%;
|
|
height: 50px
|
|
}
|
|
|
|
div.arrow-bar.down {
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 30px
|
|
}
|
|
|
|
div.arrow {
|
|
position: absolute;
|
|
height: 30px;
|
|
width: 30px;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
text-align: center
|
|
}
|
|
|
|
.arrow-bar:hover i {
|
|
transform: scale(1.2)
|
|
}
|
|
|
|
.screen-filler {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 105vh
|
|
}
|
|
|
|
.media-element.slideshow .padded {
|
|
height: 200%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
background-color: #000;
|
|
position: fixed
|
|
}
|
|
|
|
.media-element img, .media-element video {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
display: block;
|
|
width: 100%
|
|
}
|
|
|
|
.media-element.slideshow .border {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: relative
|
|
}
|
|
|
|
.media-element.slideshow .overflow {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.fill-size {
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.media-element.slideshow img, .media-element.slideshow video {
|
|
object-fit: contain;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%
|
|
}
|
|
|
|
.main-content {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
margin: auto;
|
|
width: 100%
|
|
}
|
|
|
|
#media-container {
|
|
width: 100%
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative
|
|
}
|
|
|
|
.media-element {
|
|
position: absolute;
|
|
vertical-align: top
|
|
}
|
|
|
|
.media-element.grid .padded {
|
|
margin: auto
|
|
}
|
|
|
|
.media-element.grid .border {
|
|
border: 1px solid #fff
|
|
}
|
|
|
|
.media-element.grid .overflow {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden
|
|
}
|
|
|
|
.media-element.loaded .overflow {
|
|
background-color: #000
|
|
}
|
|
|
|
.fill-width {
|
|
width: 100%
|
|
}
|
|
|
|
.media-element .link {
|
|
margin-left: 60px
|
|
}
|
|
|
|
.media-overlay {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.media-element.grid:hover .media-overlay.gradient {
|
|
visibility: visible
|
|
}
|
|
|
|
.media-element.grid .media-overlay.visible {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, .13) 50%, rgba(0, 0, 0, 0) 100%);
|
|
height: 50px;
|
|
visibility: visible !important
|
|
}
|
|
|
|
.media-element.grid .media-overlay.gradient {
|
|
background: linear-gradient(to top, rgba(27, 37, 47, .3) 5%, rgba(27, 37, 47, .1) 80%)
|
|
}
|
|
|
|
.media-element.slideshow .media-overlay {
|
|
visibility: visible
|
|
}
|
|
|
|
.disliked-image {
|
|
position: absolute;
|
|
height: 100%;
|
|
background-color: #1b252f;
|
|
width: 100%;
|
|
z-index: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
color: #fff;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 6em
|
|
}
|
|
|
|
.disliked-image .i {
|
|
height: 100px;
|
|
width: 100px
|
|
}
|
|
|
|
.play-video-icon {
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
font-size: 5em;
|
|
color: #fff;
|
|
width: 100%
|
|
}
|
|
|
|
.play-video-icon i.fa-play {
|
|
padding: 10px
|
|
}
|
|
|
|
.media-overlay .info .text a {
|
|
pointer-events: all
|
|
}
|
|
|
|
.media-element:hover {
|
|
cursor: pointer
|
|
}
|
|
|
|
.media-element.hide-controls .arrows {
|
|
opacity: 0
|
|
}
|
|
|
|
.spinner-container.bottom {
|
|
height: 400px;
|
|
position: relative
|
|
}
|
|
|
|
.spinner-container.floating {
|
|
background-color: #1b252f;
|
|
height: 100vh;
|
|
width: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity .5s ease;
|
|
z-index: 2
|
|
}
|
|
|
|
.spinner-container.inline {
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
background-color: #1b252f;
|
|
height: 100%;
|
|
opacity: 0
|
|
}
|
|
|
|
.spinner-container.inline .spinner-top {
|
|
position: absolute;
|
|
top: calc(50vh - 6em);
|
|
left: 0;
|
|
right: 0
|
|
}
|
|
|
|
.spinner-container.slideshow {
|
|
background-color: #000
|
|
}
|
|
|
|
.spinner-container.on-top {
|
|
opacity: 1
|
|
}
|
|
|
|
.home-icon {
|
|
color: #fff;
|
|
font-size: 2.5em;
|
|
position: fixed;
|
|
left: 15px;
|
|
top: 15px;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
pointer-events: all
|
|
}
|
|
|
|
.home-icon a {
|
|
padding: 5px
|
|
}
|
|
|
|
.settings-position {
|
|
color: #fff;
|
|
font-size: 2.5em;
|
|
position: fixed;
|
|
right: 15px;
|
|
top: 15px;
|
|
z-index: 1;
|
|
pointer-events: all
|
|
}
|
|
|
|
.settings-icon {
|
|
padding: 5px
|
|
}
|
|
|
|
.info {
|
|
height: 100%
|
|
}
|
|
|
|
.info-bar {
|
|
position: absolute;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 55px;
|
|
font-size: 1.7em
|
|
}
|
|
|
|
.info-bar.info-bottom {
|
|
bottom: 0
|
|
}
|
|
|
|
.info-bar.info-top {
|
|
top: 0
|
|
}
|
|
|
|
.info-bar.immersive-info-bar {
|
|
display: none
|
|
}
|
|
|
|
.error-bar {
|
|
color: #fff;
|
|
height: 300px;
|
|
font-size: 2em;
|
|
text-align: center
|
|
}
|
|
|
|
.error-bar .subheader {
|
|
padding-top: 20px
|
|
}
|
|
|
|
.error-bar .btn {
|
|
font-size: 1.1em
|
|
}
|
|
|
|
.center-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: auto;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 5em
|
|
}
|
|
|
|
.block {
|
|
padding: 6px;
|
|
display: inline-block
|
|
}
|
|
|
|
.btn.large {
|
|
cursor: pointer;
|
|
padding: 1.3125rem 2.625rem;
|
|
font-size: 2.1875rem;
|
|
border-radius: .525rem
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: .75rem 1.5rem;
|
|
font-size: 1.25rem;
|
|
border-radius: .3rem
|
|
}
|
|
|
|
.slideshow .info-bar.info-bottom {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, .13) 50%, rgba(0, 0, 0, 0) 100%);
|
|
height: 100px
|
|
}
|
|
|
|
.slideshow .info-bar.info-top {
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 0) 100%);
|
|
height: 100px
|
|
}
|
|
|
|
.info-bar .left {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
pointer-events: all
|
|
}
|
|
|
|
.grid .info-bar .left {
|
|
width: 75px
|
|
}
|
|
|
|
.slideshow .info-bar .left {
|
|
width: 75px
|
|
}
|
|
|
|
.info-bar .right {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 60px;
|
|
height: 100%;
|
|
pointer-events: all
|
|
}
|
|
|
|
.info-bar .middle {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: calc(100% - 150px);
|
|
pointer-events: all
|
|
}
|
|
|
|
.center-center2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.center-center {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.evenly-distribute {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.admin-search {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 50px
|
|
}
|
|
|
|
.admin-search .feed-element {
|
|
width: 90%
|
|
}
|
|
|
|
.center-container {
|
|
margin: 100px
|
|
}
|
|
|
|
.slideshow .heart {
|
|
z-index: 3
|
|
}
|
|
|
|
.grid .heart {
|
|
z-index: 0 !important
|
|
}
|
|
|
|
.heart {
|
|
padding: 5px
|
|
}
|
|
|
|
.heart.active {
|
|
color: red
|
|
}
|
|
|
|
.media-element.slideshow .heart i {
|
|
z-index: 3
|
|
}
|
|
|
|
.media-element.slideshow .stack {
|
|
z-index: 3
|
|
}
|
|
|
|
.stack {
|
|
position: relative;
|
|
width: 17px;
|
|
height: 13px;
|
|
pointer-events: all
|
|
}
|
|
|
|
.stack figure {
|
|
margin: auto
|
|
}
|
|
|
|
.stack div {
|
|
border: 1px solid #fff;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute
|
|
}
|
|
|
|
.stack .one {
|
|
transform: translate(20%, -20%)
|
|
}
|
|
|
|
.stack .three {
|
|
transform: translate(-20%, 20%)
|
|
}
|
|
|
|
.animated {
|
|
-webkit-animation-duration: 10s;
|
|
animation-duration: 10s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn
|
|
}
|
|
|
|
.center-container {
|
|
max-width: 2000px;
|
|
width: 100%
|
|
}
|
|
|
|
.admin-container .half {
|
|
display: inline-block;
|
|
width: 50%
|
|
}
|
|
|
|
.admin-container .third {
|
|
display: inline-block;
|
|
width: 33%
|
|
}
|
|
|
|
.admin-container .fourth {
|
|
display: inline-block;
|
|
width: 25%
|
|
}
|
|
|
|
.admin-container .fifth {
|
|
display: inline-block;
|
|
width: 20%
|
|
}
|
|
|
|
.inline {
|
|
display: inline-block
|
|
}
|
|
|
|
.segment-dropdown {
|
|
display: flex
|
|
}
|
|
|
|
.flex-rows {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start
|
|
}
|
|
|
|
.input-container {
|
|
box-sizing: border-box;
|
|
display: inline-block
|
|
}
|
|
|
|
.feed-element {
|
|
width: 40%;
|
|
padding: 10px;
|
|
margin-left: 20px;
|
|
display: inline-block
|
|
}
|
|
|
|
.input-with-padding {
|
|
padding: 10px;
|
|
margin-left: 20px
|
|
}
|
|
|
|
.input-with-padding.highlight {
|
|
background-color: #8b8bf3
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
text-decoration: none
|
|
}
|
|
|
|
.admin-container {
|
|
margin: auto;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1.6em
|
|
}
|
|
|
|
.external-link {
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
font-size: .8em
|
|
}
|
|
|
|
.external-link a {
|
|
padding-left: 10px
|
|
}
|
|
|
|
.settings-menu {
|
|
margin-top: 6px;
|
|
padding: 6px;
|
|
background-color: #1b252f;
|
|
box-shadow: 5px 5px 5px rgba(0, 0, 0, .3), -5px 5px 5px rgba(0, 0, 0, .3);
|
|
width: 240px;
|
|
position: absolute;
|
|
right: 15px;
|
|
font-size: 1.2rem
|
|
}
|
|
|
|
.settings-checkbox {
|
|
display: inline-block;
|
|
float: right
|
|
}
|
|
|
|
.settings-checkbox .tree-checkbox {
|
|
background-color: inherit
|
|
}
|
|
|
|
.settings-checkbox .checked > div {
|
|
border-bottom: 4px solid red !important;
|
|
border-right: 4px solid red !important
|
|
}
|
|
|
|
.settings-position i {
|
|
cursor: pointer
|
|
}
|
|
|
|
.settings-menu .btn {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
text-align: left
|
|
}
|
|
|
|
.settings-button {
|
|
cursor: pointer
|
|
}
|
|
|
|
.settings-half {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 25% !important;
|
|
font-size: 1.1em;
|
|
padding-top: .3em;
|
|
padding-bottom: .4em;
|
|
transition: background-color .2s
|
|
}
|
|
|
|
.settings-half:hover {
|
|
background-color: #881616
|
|
}
|
|
|
|
.settings-half.active {
|
|
background-color: red
|
|
}
|
|
|
|
.settings-half.left {
|
|
margin-left: 25%;
|
|
border-radius: .3rem 0 0 .3rem
|
|
}
|
|
|
|
.settings-half.right {
|
|
border-radius: 0 .3rem .3rem 0
|
|
}
|
|
|
|
.settings-item {
|
|
padding-top: .3em;
|
|
padding-left: .6em;
|
|
padding-bottom: 10px
|
|
}
|
|
|
|
.reset-item {
|
|
padding-right: .6em
|
|
}
|
|
|
|
.warning {
|
|
color: red
|
|
}
|
|
|
|
.scroll-slider-container {
|
|
position: fixed;
|
|
width: calc(100vw - 150px);
|
|
max-width: 90vw;
|
|
height: 60px;
|
|
top: 40px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
margin: auto;
|
|
color: #fff;
|
|
transition: opacity 1s, visibility 1s
|
|
}
|
|
|
|
.scroll-slider-hidden {
|
|
opacity: 0
|
|
}
|
|
|
|
.scroll-slider-background {
|
|
position: absolute;
|
|
z-index: -1;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #000;
|
|
background-color: #1b252f;
|
|
background-color: #1980e6;
|
|
background-color: #425a71;
|
|
background-color: #0d365d;
|
|
opacity: 1;
|
|
border-radius: .3rem
|
|
}
|
|
|
|
.scroll-slider-icons {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
height: 100%;
|
|
width: 125px
|
|
}
|
|
|
|
.scroll-slider-slider {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: calc(100% - 125px);
|
|
height: 100%
|
|
}
|
|
|
|
.scroll-slider-element {
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
height: 50%;
|
|
width: 100%;
|
|
margin-left: 25px;
|
|
margin-right: 15px;
|
|
overflow: hidden;
|
|
border-radius: .3rem
|
|
}
|
|
|
|
.scroll-slider-completed {
|
|
height: 100%;
|
|
background-color: #00f;
|
|
background-color: #1b252f;
|
|
background-color: red;
|
|
background-color: #ce1919
|
|
}
|
|
|
|
.scroll-slider-icons i {
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
font-size: 1.8em
|
|
}
|
|
|
|
.scroll-slider-icons i.close {
|
|
font-size: 2.3em
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block
|
|
}
|
|
|
|
.block {
|
|
padding: 6px;
|
|
display: inline-block
|
|
}
|
|
|
|
.center-center {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer
|
|
}
|
|
|
|
.btn-color-1 {
|
|
background-color: #9350d0
|
|
}
|
|
|
|
.btn-color-2 {
|
|
background-color: #f75f00
|
|
}
|
|
|
|
.btn-color-3 {
|
|
background-color: #3469ff
|
|
}
|
|
|
|
.btn-color-4 {
|
|
background-color: #c70404
|
|
}
|
|
|
|
.btn-color-5 {
|
|
background-color: #74d136
|
|
}
|
|
|
|
.btn-color-6 {
|
|
background-color: #b33265
|
|
}
|
|
|
|
.btn-color-pink {
|
|
background-color: #ff0592
|
|
}
|
|
|
|
.btn-color-pink:hover {
|
|
background-color: #ef0087
|
|
}
|
|
|
|
.btn.not-active {
|
|
opacity: .5
|
|
}
|
|
|
|
.font-color-pink {
|
|
color: #ff0592
|
|
}
|
|
|
|
@keyframes spin-animation {
|
|
0% {
|
|
transform: rotate(0)
|
|
}
|
|
100% {
|
|
transform: rotate(359deg)
|
|
}
|
|
}
|
|
|
|
.loading-spinner-container {
|
|
color: #fff;
|
|
font-size: 3em;
|
|
width: 3em;
|
|
left: 100px;
|
|
position: absolute
|
|
}
|
|
|
|
.loading-spinner-circle {
|
|
animation: spin-animation 2s infinite linear;
|
|
border-radius: 50%;
|
|
border-left: .1em solid #fff;
|
|
border-right: .1em solid rgba(255, 255, 255, .5);
|
|
border-top: .1em solid rgba(255, 255, 255, .5);
|
|
border-bottom: .1em solid rgba(255, 255, 255, .5);
|
|
width: .7em;
|
|
height: .7em
|
|
}
|
|
|
|
.page-info-header {
|
|
overflow: hidden;
|
|
transition: height 1s ease;
|
|
font-size: 2em;
|
|
color: #fff;
|
|
width: 100%;
|
|
margin: auto;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.page-info-content {
|
|
padding-bottom: 2em;
|
|
padding-left: 2em;
|
|
padding-right: 2em;
|
|
font-size: .8em
|
|
}
|
|
|
|
.page-info-content a {
|
|
color: red
|
|
}
|
|
|
|
.page-info-content h2 {
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
display: inline
|
|
}
|
|
|
|
.page-info-line {
|
|
margin-top: .2em
|
|
}
|
|
|
|
.page-info-content p {
|
|
margin: 0
|
|
}
|
|
|
|
.page-info-header.visible {
|
|
height: 400px
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-auto-rows: 10px;
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
@media only screen and (min-width: 1800px) {
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1256px) and (max-width: 1799px){
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1100px) and (max-width: 1255px){
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) and (max-width: 1099px){
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 0px) and (max-width: 799px){
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
}
|
|
}
|
|
|
|
.item {
|
|
background-color: #333333;
|
|
height: 100%;
|
|
}
|
|
|
|
.item:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
}
|
|
|
|
.item video {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: unset;
|
|
}
|
|
|
|
.h100 {
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
color: white;
|
|
font-family: Raleway;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.footer-container {
|
|
margin-top: 5em;
|
|
}
|
|
|
|
.load-bar {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 6px;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.bar {
|
|
content: "";
|
|
display: inline;
|
|
position: absolute;
|
|
width: 0;
|
|
height: 100%;
|
|
left: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.bar:nth-child(1) {
|
|
background-color: #1b252f;
|
|
animation: loading 3s linear infinite;
|
|
}
|
|
|
|
.bar:nth-child(2) {
|
|
background-color: #f2f2f2;
|
|
animation: loading 3s linear 2s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
from {
|
|
left: 50%;
|
|
width: 0;
|
|
z-index: 100;
|
|
}
|
|
50% {
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
to {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.clearfix::after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
.reddit-selected {
|
|
color: limegreen !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#checkme {
|
|
background: #1b252f;
|
|
width: 100%;
|
|
height: 2em;
|
|
}
|
|
|
|
.overlay {
|
|
color: white;
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.3em!important;
|
|
text-shadow: 5px 5px 11px rgba(150, 150, 150, 1);
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
}
|
|
|
|
.hoverme {
|
|
filter: brightness(85%);
|
|
-webkit-transition: -webkit-filter 100ms linear;
|
|
}
|
|
|
|
.featherlight .featherlight-content {
|
|
padding: 5px 5px 0 !important;
|
|
border-bottom: 5px solid transparent !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.featherlight:last-of-type {
|
|
background: rgba(0,0,0,0.98) !important;
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.featherlight .featherlight-content{
|
|
height: 100%;
|
|
}
|
|
|
|
.featherlight .featherlight-content img{
|
|
height: 100% !important;
|
|
}
|
|
|
|
.featherlight .featherlight-content video{
|
|
height: 100% !important;
|
|
}
|
|
}
|