atlas/web/_css/style.css

457 lines
8.7 KiB
CSS
Raw Normal View History

/*
========================================================================
2022-04-28 12:41:19 +02:00
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 Place Atlas contributors
Licensed under the GNU Affero General Public License Version 3
https://place-atlas.stefanocoding.me/license.txt
========================================================================
*/
/* purgecss start ignore */
2022-04-04 16:31:10 +02:00
2022-04-20 10:54:58 +02:00
/* @font-face {
DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/
2022-04-12 07:16:13 +02:00
font-family: 'dejavu';
src: url('dejavusans-extralight.woff2') format('woff2');
font-weight: normal;
font-style: normal;
2022-04-20 10:54:58 +02:00
} */
html, body {
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
svg.icon {
2022-04-20 10:54:58 +02:00
display: inline-block;
2022-05-07 01:49:43 +02:00
vertical-align: -.125em;
}
2022-04-20 10:54:58 +02:00
body[data-mode] {
overflow: hidden;
background-color: #111;
}
#wrapper {
position: fixed;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
2022-04-20 10:54:58 +02:00
.navbar {
z-index: 1100 !important;
2022-05-05 12:04:04 +02:00
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-left);
}
2022-05-05 12:04:04 +02:00
.offcanvas {
top: 3.7rem !important;
2022-05-05 12:04:04 +02:00
padding-left: env(safe-area-inset-left);
}
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
2022-05-05 12:04:04 +02:00
.navbar, .offcanvas {
2022-04-20 10:54:58 +02:00
-webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px);
--bs-bg-opacity: .9 !important;
}
}
2022-04-20 10:54:58 +02:00
body[data-mode]:not([data-mode="draw"]) #drawNavButtons, [data-mode="draw"] #defaultNavButtons {
display: none;
2017-04-07 19:52:56 +02:00
}
@media (max-width: 400px) {
2022-04-20 10:54:58 +02:00
.offcanvas-start.show {
border-right: none !important;
}
}
#linesCanvas {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -500;
}
#container {
2022-04-20 10:54:58 +02:00
width: calc(100% - 400px);
height: 100%;
2022-04-20 10:54:58 +02:00
margin-left: 400px;
touch-action: manipulation;
overflow: hidden;
}
#loading {
2017-04-10 17:57:13 +02:00
position: absolute;
2022-04-28 11:44:46 +02:00
background-color: rgba(17, 17, 17, .9);
top: 0;
left: 0;
right: 0;
bottom: 0;
2022-04-28 11:44:46 +02:00
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
2022-04-12 14:18:53 +02:00
}
2022-04-28 11:44:46 +02:00
.listHidden #container{
width: 100%;
margin-left: 0;
}
#innerContainer {
2022-05-04 15:16:15 +02:00
height: 2000px;
width: 2000px;
position: absolute;
z-index: -2000;
}
body[data-init-done] .listTransitioning #innerContainer {
transition: left .3s ease-in-out;
2017-04-06 00:12:45 +02:00
}
2022-05-06 22:21:16 +02:00
@media (prefers-reduced-motion: reduce) {
body[data-init-done] .listTransitioning #innerContainer {
transition: none;
}
2017-04-06 00:12:45 +02:00
}
#image {
position: absolute;
height: 100%;
width: 100%;
z-index: -1500;
2022-04-20 10:54:58 +02:00
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
#highlightCanvas {
z-index: -1200;
position: absolute;
height: 100%;
width: 100%;
2022-04-20 10:54:58 +02:00
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
2022-05-06 22:21:16 +02:00
#atlasSize:empty {
display: none;
}
#searchList {
width: 25%;
}
#objectsList {
2017-04-09 02:08:35 +02:00
max-width: 300px;
2022-04-20 10:54:58 +02:00
width: 100%;
position: absolute;
2022-05-05 12:04:04 +02:00
right: env(safe-area-inset-right, 0);
top: 3.7rem;
max-height: calc(100% - 3.7rem);
overflow-y: auto;
2017-04-09 02:08:35 +02:00
z-index: 0;
}
#closeObjectsListButton {
2017-04-09 02:08:35 +02:00
height: 40px;
width: 40px;
position: absolute;
2022-04-20 10:54:58 +02:00
top: 4.25rem;
2022-05-05 12:04:04 +02:00
right: calc(300px + env(safe-area-inset-right, 0));
}
2022-04-26 09:52:44 +02:00
#objectsListOverflowNotice {
max-width: 300px;
width: 100%;
position: absolute;
2022-05-05 12:04:04 +02:00
right: env(safe-area-inset-right, 0);
2022-04-26 09:52:44 +02:00
bottom: 1rem;
box-shadow: 0 .25rem 1rem rgba(17,17,17,.75) !important;
}
@media (max-width: 976px) {
#wrapper:not(.listHidden) > #objectsList {
max-width: calc(300px - 3rem);
}
#wrapper:not(.listHidden) > #closeObjectsListButton {
2022-05-05 12:04:04 +02:00
right: calc(300px - 3rem + env(safe-area-inset-right, 0));
}
}
2017-04-09 02:08:35 +02:00
@media (max-width: 750px) {
#wrapper:not(.listHidden) > #objectsList {
2017-04-09 02:08:35 +02:00
display: none;
}
#wrapper:not(.listHidden) > #closeObjectsListButton {
2017-04-09 02:08:35 +02:00
display: none;
}
#wrapper:not(.listHidden) > #objectsListOverflowNotice {
display: none;
}
}
2022-04-20 10:54:58 +02:00
@media (max-width: 576px) {
#objectsList {
2022-04-20 10:54:58 +02:00
max-width: calc(300px - 3rem);
2017-04-07 19:57:15 +02:00
}
#closeObjectsListButton {
2022-04-20 10:54:58 +02:00
right: calc(300px - 3rem);
2017-04-09 02:08:35 +02:00
}
}
2022-04-20 10:54:58 +02:00
@media (max-width: 540px) {
#wrapper:not(.listHidden) > #bottomBar {
2022-04-20 10:54:58 +02:00
display: none !important;
2017-04-09 02:08:35 +02:00
}
}
#objectInfo textarea {
resize: none;
}
2022-04-20 10:54:58 +02:00
#objectDescription p {
margin-bottom: 0.5rem;
}
2022-04-20 10:54:58 +02:00
#objectDescription p:last-child {
margin-bottom: 0;
}
#exportString {
2022-04-20 10:54:58 +02:00
min-height: 300px;
2022-04-08 18:38:48 +02:00
}
2022-04-05 19:31:48 +02:00
#bottomBar {
2017-04-05 00:53:10 +02:00
position: absolute;
2022-05-07 01:49:43 +02:00
bottom: 0;
left: 0;
right: 0;
padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
2017-04-05 00:53:10 +02:00
}
2022-05-10 03:03:20 +02:00
#bottomBar:hover, #bottomBar:focus-within {
z-index: 1;
2022-04-05 19:31:48 +02:00
}
#wrapper.listTransitioning #bottomBar {
transition: left .3s ease-in-out, padding-left .3s linear;
2022-04-05 19:31:48 +02:00
}
2022-05-06 22:21:16 +02:00
@media (prefers-reduced-motion: reduce) {
#bottomBar {
transition: none;
}
2022-04-05 19:31:48 +02:00
}
#wrapper:not(.listHidden) > #bottomBar {
2022-05-07 01:49:43 +02:00
padding-left: 0.5rem !important;
2022-04-20 10:54:58 +02:00
left: 400px !important;
2022-05-04 15:16:15 +02:00
}
2022-04-05 20:30:31 +02:00
2022-04-05 19:31:48 +02:00
#author {
flex: 1 1 auto;
2022-04-05 20:40:36 +02:00
}
#variantControls {
flex: 1 0 auto;
2022-04-05 19:31:48 +02:00
}
#timeControls {
2022-04-10 09:03:08 +02:00
position: relative;
flex: 6 0 300px;
}
#bottomBar.no-time-slider #timeControls {
display: none;
}
@media (min-width: 800px) {
#wrapper.listHidden #bottomBar.no-time-slider {
align-items: flex-end;
}
#wrapper.listHidden #bottomBar.no-time-slider #variantControls {
flex: none;
}
#wrapper.listHidden #bottomBar.no-time-slider #author {
flex: none;
margin-left: auto;
}
}
@media (min-width: 1300px) {
#wrapper:not(.listHidden) #bottomBar.no-time-slider {
align-items: flex-end;
}
#wrapper:not(.listHidden) #bottomBar.no-time-slider #variantControls {
flex: none;
}
#wrapper:not(.listHidden) #bottomBar.no-time-slider #author {
flex: none;
margin-left: auto;
}
}
2022-05-04 15:16:15 +02:00
#timeControls {
display: flex;
align-items: center;
}
2022-04-10 09:03:08 +02:00
#timeControlsTooltip {
bottom: 2.75rem;
visibility: hidden;
transition: visibility .15s linear, opacity .15s linear;
2017-04-06 11:44:50 +02:00
}
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
#timeControlsTooltip div, #author {
2022-04-20 10:54:58 +02:00
-webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px);
--bs-bg-opacity: .8 !important;
}
}
#timeControls:hover #timeControlsTooltip,
#timeControlsSlider:focus + #timeControlsTooltip,
body[data-canvas-loading][data-init-done] #timeControlsTooltip,
body[data-init-done] #timeControlsTooltip[data-force-visible] {
2022-04-20 10:54:58 +02:00
opacity: 1;
visibility: visible;
}
2022-05-06 22:21:16 +02:00
#timeControlsSlider {
-webkit-appearance: none;
appearance: none;
2017-04-06 11:44:50 +02:00
}
#timeControlsSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
2022-05-06 22:21:16 +02:00
border-radius: .25rem;
outline: 1px solid var(--bs-body-bg);
2017-04-07 19:52:56 +02:00
}
#timeControlsSlider::-webkit-slider-runnable-track {
height: 1rem;
border-radius: .25rem;
2017-04-06 11:44:50 +02:00
}
#timeControlsSlider::-moz-range-thumb {
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
2022-05-06 22:21:16 +02:00
border-radius: .25rem;
outline: 1px solid var(--bs-body-bg);
}
#timeControlsSlider::-moz-range-track {
height: 1rem;
2022-04-20 10:54:58 +02:00
border-radius: .25rem;
2017-04-06 11:44:50 +02:00
}
2022-04-24 09:51:41 +02:00
#entriesList .card {
box-shadow: none !important;
transition: box-shadow 0.15s ease-in-out;
2017-04-06 11:44:50 +02:00
}
2022-05-06 22:21:16 +02:00
@media (prefers-reduced-motion: reduce) {
#entriesList .card {
transition: none;
}
}
#entriesList:not(.disableHover) .card:hover {
2022-05-06 22:21:16 +02:00
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75) !important;
}
[data-mode="explore"] #entriesListControls {
2022-05-04 15:16:15 +02:00
display: none;
}
body:not([data-dev]) .show-only-on-dev {
display: none !important;
}
2022-04-20 10:54:58 +02:00
.nav-link.active {
font-weight: 700;
}
.period-group {
transition: box-shadow 0.15s ease-in-out;
2022-04-08 17:19:10 +02:00
}
.period-group[data-active=true] {
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75);
2022-04-08 17:19:10 +02:00
}
.period-group[data-active=true][data-status=active] {
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75);
2022-05-04 15:16:15 +02:00
}
.period-group[data-status=active] {
box-shadow: 0 0 0 .1rem rgba(var(--bs-primary-rgb), .5);
2022-05-04 15:16:15 +02:00
}
.period-group[data-active=true][data-status=error] {
animation: 1s infinite alternate periodGroupActiveError;
2022-04-08 17:35:21 +02:00
}
2022-05-04 15:16:15 +02:00
.period-group[data-status=error] {
box-shadow: 0 0 0 .1rem rgba(var(--bs-danger-rgb), .25);
2022-04-08 17:35:21 +02:00
}
@media (prefers-reduced-motion: reduce) {
.period-group {
transition: none;
}
.period-group[data-active=true][data-status=error] {
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), 1);
animation: none;
}
}
@keyframes periodGroupActiveError {
from {
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), 1);
}
to {
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .5);
}
2022-04-09 06:54:06 +02:00
}
2022-04-14 09:56:30 +02:00
#periods #periodsStatus:empty {
2022-04-26 01:56:23 +02:00
display: none;
2022-04-09 06:54:06 +02:00
}
.period-group.no-time-slider input,
2022-05-10 03:03:20 +02:00
.period-group.no-time-slider .period-input-controls {
display: none !important;
2022-04-09 06:54:06 +02:00
}
/* about.html */
#credits a {
text-decoration: none;
}
#credits a:hover {
text-decoration: underline;
}
/* purgecss end ignore */