Pixelplace design changes by JustCallMeSimon26

/* ==UserStyle==
@name         Pixelplace redesign
@version      20231205.15.36
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://pixelplace.io/") {
/* Features:
Advanced dark mode
better cursor
better chat
removed welcome notice and decreased news opacity
better notifications
improved art island
fixed coin island consistency
improved gold ore island
free'd the color list #ColorLifesMatter
*/

/* main menu restructure */

.box-header {
    margin: 12px;
}

.box-sub-menu li a,.box-menu li a {
    font-size: 10pt;
}

.box-sub-menu, .box-menu {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    border: none;
    border-radius: 0;
}

/* remove canvas scroll down button */

.more-content-below {
    display: none !important;
}

/* universal darkmode */
#blog .article h1 a {
    color: white;
}


#painting-list * {
    background-color: black !important; 
} 

#modals .box>.box-menu li a{
    background-color: black;
}

.article {
    outline: 2px solid white !important;
    background-color: black !important;
} 

.box, .box-content, .box-x, .box-header, .box-menu, .box-sub-menu, .stripped, .stripped-2 , .input-checkbox, .input-radio, .open-guild, .prem-box, .prem-item, .prem-coins, #social{
    background-color: black !important;
}

.title, input, .shift{
    color: white !important;
}

.top table, .top div, #modals .box>.box-content p, .content, .text-center{
    color: white !important;
}


/* remove coin from shop tab */
.pp-coin {
    display: none;
}

/* fix color list */
#menu-buttons-right-bottom {
    right: 85px;
    z-index: 8;
}

#copyright {
    right: 85px;
}

#social {
    bottom: 55px;
    right: 95px;
}

#more-colors-below, #more-colors-above {
    display: none !important;
}

#palette-buttons {
    right: -70px;
    padding-left: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh !important;
    width: 70px;
    transition: 0.125s;
    background-color: black;    
    padding-bottom: 0;
    padding-top: 0;
    overflow: visible;
    z-index: 10;
    animation: colored 10s linear infinite;
}

#palette-buttons:before {
    position: absolute;
    right: 70px;
    height: 100%;
    z-index: 10;
    content: "";
    width: 10px;
    background-color: purple;
}

@keyframes colored {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}

#palette-buttons:hover {
    right: 0;
}

#menu-buttons-right-top, #menu-buttons-right-bottom {
    right: 25px;
}

#coordinates {
    top: 15px;
    right: 75px !important;
    transition: 1s;
}

/* Loading Screen */

#loader, #loader-canvas {
    background-color: black;
}

.open-modal.attention {
    display: none !important;
}

.c-loader {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    z-index: 5
}

.c-loader-inner {
    border-radius: 3px;    
    z-index: 4
}

.c-loader-inner, .c-loader {
animation-delay: 1000ms;
}

.text {
    font-size: 2em !important; 
}

/* main view */

/* reset chat t size */
span.text {
    font-size: 13px !important; 
}

/* reset text for item popuup */
#item .block .text {
    font-size: 14px !important;
    color: white;
}

/* force chat hover bg */
#chat, .tabs {
    background-color: rgba(0,0,0,.85);    
    border-radius: 0;
}

#chat .tabs>a:first-child {
    border: none;
}

#chat {
    max-width: 90vw;
    max-height: 85vh;
}

.back-to-bottom {
    visibility: hidden;
}

.back-to-bottom:after {
    visibility: visible;
    content: "";
    display: block;
    position: absolute;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxMmMwLTYuNjIzLTUuMzc3LTEyLTEyLTEycy0xMiA1LjM3Ny0xMiAxMiA1LjM3NyAxMiAxMiAxMiAxMi01LjM3NyAxMi0xMnptLTEgMGMwLTYuMDcxLTQuOTI5LTExLTExLTExcy0xMSA0LjkyOS0xMSAxMSA0LjkyOSAxMSAxMSAxMSAxMS00LjkyOSAxMS0xMXptLTExLjUgNC44MjhsLTMuNzYzLTQuNjA4LS43MzcuNjc5IDUgNi4xMDEgNS02LjExMi0uNzUzLS42NjYtMy43NDcgNC42MDR2LTExLjgyNmgtMXYxMS44Mjh6Ii8+PC9zdmc+);
    filter: invert();
    right: -16px;
    scale: 0.9;
    bottom: -10px;
    outline:  1px solid #000;
    background-color: rgb(130, 130, 130);
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    border-radius: 69%;
}


/* Fix the war notif */
.head {
    font-size: 0.9rem;
}

#warTimer {
    width: fit-content;
    min-width: fit-content;
    filter: drop-shadow(0 0 0.5rem red); 
}

/* fix coin island inconsistency */
.open-coin-island {
    border-style: solid !important;
}

/* make the chest look better */
.artist-island.open-artist-island {
    scale: 2;    
}

.gold-rush-island.open-gold-rush-island {
    filter: drop-shadow(0 0 0.8rem gold);    
}

a > img.pixelate {
    content: url("/img/artist-island.png");
}

/* fix blog post */

.snippet {
    opacity: 0.7;
}

.snippet:hover {
    opacity: 1;
}

/* fix cursor */
#cursor {    
    border-radius: 69%;
    border: none;
    z-index: 5;
}

#placeholder {
    z-index: 4;
    animation: fade 1s linear infinite;
    transition: 0.0625s;
    transition-timing-function: ease-out
}

@keyframes fade {
  0%,100% { opacity: 0 }
  25%,50% { opacity: 1 }
}
}