mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-10-04 00:20:21 +02:00
368 lines
6.1 KiB
CSS
368 lines
6.1 KiB
CSS
/*
|
|
========================================================================
|
|
The 2022 /r/place Atlas
|
|
|
|
An Atlas of Reddit's 2022 /r/place, with information to each
|
|
artwork of the canvas provided by the community.
|
|
|
|
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
|
|
Copyright (c) 2022 r/placeAtlas2 contributors
|
|
|
|
Licensed under the GNU Affero General Public License Version 3
|
|
https://place-atlas.stefanocoding.me/license.txt
|
|
========================================================================
|
|
*/
|
|
|
|
/* @font-face {
|
|
DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/
|
|
font-family: 'dejavu';
|
|
src: url('dejavusans-extralight.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
} */
|
|
|
|
html, body {
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
svg.bi {
|
|
display: inline-block;
|
|
vertical-align: -.125em;
|
|
}
|
|
|
|
body[data-mode] {
|
|
overflow: hidden;
|
|
background-color: #111;
|
|
}
|
|
|
|
#wrapper {
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.navbar {
|
|
z-index: 1100 !important;
|
|
}
|
|
|
|
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
|
.navbar, #offcanvasList, #offcanvasDraw {
|
|
-webkit-backdrop-filter: saturate(180%) blur(15px);
|
|
backdrop-filter: saturate(180%) blur(15px);
|
|
--bs-bg-opacity: .9 !important;
|
|
}
|
|
}
|
|
|
|
#offcanvasList, #offcanvasDraw {
|
|
top: 3.75rem;
|
|
}
|
|
|
|
body[data-mode]:not([data-mode="draw"]) #drawNavButtons, [data-mode="draw"] #defaultNavButtons {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.offcanvas-start.show {
|
|
border-right: none !important;
|
|
}
|
|
}
|
|
|
|
#linesCanvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
/*width: calc(100% - 320px);*/
|
|
width: 100%;
|
|
z-index: -500;
|
|
}
|
|
|
|
#container {
|
|
width: calc(100% - 400px);
|
|
height: 100%;
|
|
margin-left: 400px;
|
|
|
|
touch-action: manipulation;
|
|
|
|
overflow: hidden;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#loading {
|
|
position: absolute;
|
|
background-color: rgba(10, 10, 10, .9);
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -10;
|
|
}
|
|
|
|
#loading > div {
|
|
margin: 80px auto;
|
|
color: #FFF;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
}
|
|
|
|
#loading > div > div:first-child {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 200px;
|
|
border: 7px #CCC solid;
|
|
display: inline-block;
|
|
border-top-color: #FFAA00;
|
|
|
|
animation-duration: 3s;
|
|
animation-name: spinner;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
#loading > div > span {
|
|
font-family: "DejaVu Sans", Helvetica, sans-serif;
|
|
font-weight: 200;
|
|
}
|
|
|
|
@keyframes spinner {
|
|
from {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
.error {
|
|
color: #FFF;
|
|
font-size: 23px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.errorBody {
|
|
color: #CC8888;
|
|
font-family: monospace;
|
|
font-size: 20px;
|
|
cursor: text;
|
|
}
|
|
|
|
noscript {
|
|
color: #FFF;
|
|
font-size: 23px;
|
|
display: block;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.listHidden #container {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#innerContainer {
|
|
height: 2000px;
|
|
width: 2000px;
|
|
position: absolute;
|
|
z-index: -2000;
|
|
}
|
|
|
|
#image {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -1500;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
}
|
|
|
|
#highlightCanvas {
|
|
z-index: -1200;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
}
|
|
|
|
#objectsList {
|
|
max-width: 300px;
|
|
width: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3.75rem;
|
|
max-height: calc(100% - 3.75rem);
|
|
overflow-y: auto;
|
|
z-index: 0;
|
|
}
|
|
|
|
#closeObjectsListButton {
|
|
height: 40px;
|
|
width: 40px;
|
|
position: absolute;
|
|
top: 4.25rem;
|
|
right: 300px;
|
|
}
|
|
|
|
@media (max-width: 750px) {
|
|
div:not(.listHidden) > #objectsList {
|
|
display: none;
|
|
}
|
|
div:not(.listHidden) > #closeObjectsListButton {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
#objectsList {
|
|
max-width: calc(300px - 3rem);
|
|
}
|
|
#closeObjectsListButton {
|
|
right: calc(300px - 3rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 540px) {
|
|
div:not(.listHidden) > #bottomBar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#objectDescription p {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#objectDescription p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#descriptionField {
|
|
width: 100%;
|
|
height: 70px;
|
|
}
|
|
|
|
#exportString {
|
|
min-height: 300px;
|
|
}
|
|
|
|
#bottomBar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
div:not(.listHidden) > #bottomBar {
|
|
left: 400px !important;
|
|
}
|
|
|
|
#timeControls {
|
|
position: relative;
|
|
flex-grow: 2;
|
|
}
|
|
|
|
#timeControls input {
|
|
height: 100%;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
}
|
|
|
|
#timeControlsTooltip {
|
|
opacity: 0;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
}
|
|
|
|
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
|
#timeControlsTooltip div {
|
|
-webkit-backdrop-filter: saturate(180%) blur(15px);
|
|
backdrop-filter: saturate(180%) blur(15px);
|
|
--bs-bg-opacity: .8 !important;
|
|
}
|
|
}
|
|
|
|
#timeControls:hover #timeControlsTooltip, #timeControlsSlider:focus #timeControlsTooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 1rem;
|
|
height: 2rem;
|
|
background: var(--bs-light);
|
|
border-radius: .25rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
appearance: none;
|
|
width: 1rem;
|
|
height: 2rem;
|
|
background: var(--bs-light);
|
|
border-radius: .25rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
|
|
}
|
|
|
|
#entriesListNav {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
#entriesListNav > * {
|
|
display: block;
|
|
cursor: pointer;
|
|
width: 120px;
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#entriesListNav > .small {
|
|
width: 30px;
|
|
padding: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#entriesListNav > .small > img,
|
|
#entriesListNav > .small > svg {
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
|
|
#entriesListNav > .small:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
#entriesListNav > a:hover {
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to bottom, #999, #777);
|
|
}
|
|
|
|
#entriesListNav > .small:hover {
|
|
background-image: none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
[data-mode="explore"] #entriesListControls {
|
|
display: none;
|
|
}
|
|
|
|
body:not([data-dev]) .show-only-on-dev {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-link.active {
|
|
font-weight: 700;
|
|
}
|