glass.css

/* Styles for .glight-theme and .gdark-theme */

.glight-theme .post:hover .buttonContainer,
.glight-theme .message-container,
.glight-theme .emojisearch,
.gdark-theme .post:hover .buttonContainer,
.gdark-theme .message-container,
.gdark-theme .emojisearch {
    background-color: transparent;
}

/* Styles for .glight-theme and .gdark-theme with backdrop-filter support */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
    .glight-theme .post,
    .glight-theme .emojipicker,
    .glight-theme .skeleton-post,
    .glight-theme .modal,
    .gdark-theme .post,
    .gdark-theme .skeleton-post,
    .gdark-theme .emojipicker,
    .gdark-theme .modal {
        backdrop-filter: blur(50px) saturate(1.5);
        -webkit-backdrop-filter: blur(50px) saturate(1.5);
        border: .5px solid rgba(0,0,0,.2);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    }

    .glight-theme .post::before,
    .glight-theme .skeleton-post::before,
    .glight-theme .modal::before,
    .gdark-theme .post::before,
    .gdark-theme .skeleton-post::before,
    .gdark-theme .modal::before {
        position: fixed;
        width: 100%;
        top: 0px;
        height: 100%;
        background-size: 100px 100px;
        opacity: 0.04;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNTEyIDUxMicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8ZmlsdGVyIGlkPSdub2lzZUZpbHRlcic+CiAgICA8ZmVUdXJidWxlbmNlIAogICAgICB0eXBlPSdmcmFjdGFsTm9pc2UnIAogICAgICBiYXNlRnJlcXVlbmN5PScwLjcnCiAgICAgIG51bU9jdGF2ZXM9JzMnIAogICAgICBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CiAgICA8ZmVDb2xvck1hdHJpeCBpbj0idHVyYnVsZW5jZSIgdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPgoKICAgIDxmZUNvbXBvbmVudFRyYW5zZmVyPgogICAgICA8ZmVGdW5jUiB0eXBlPSJkaXNjcmV0ZSIgdGFibGVWYWx1ZXM9IjAgMSIgLz4KICAgICAgPGZlRnVuY0cgdHlwZT0iZGlzY3JldGUiIHRhYmxlVmFsdWVzPSIwIDEiIC8+CiAgICAgIDxmZUZ1bmNCIHR5cGU9ImRpc2NyZXRlIiB0YWJsZVZhbHVlcz0iMCAxIiAvPgogICAgPC9mZUNvbXBvbmVudFRyYW5zZmVyPgogIDwvZmlsdGVyPgogIAogIDxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNub2lzZUZpbHRlciknLz4KPC9zdmc+");
        background-repeat: repeat;
        mix-blend-mode: overlay;
        z-index: -1;
    }

    .glight-theme textarea,
    .glight-theme button,
    .glight-theme input,
    .glight-theme select,
    .glight-theme .section,
    .glight-theme .stg-section,
    .gdark-theme textarea,
    .gdark-theme button,
    .gdark-theme input,
    .gdark-theme select,
    .gdark-theme .section,
    .gdark-theme .stg-section {
        backdrop-filter: blur(5px) saturate(1.5);
        -webkit-backdrop-filter: blur(5px) saturate(1.5);
        border: .5px solid rgba(0,0,0,.2);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    }

    .glight-theme .emojibutton,
    .gdark-theme .emojibutton {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .glight-theme ::-webkit-input-placeholder,
    .gdark-theme ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: #ffffff70;
    }

    .glight-theme :-moz-placeholder,
    .gdark-theme :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #ffffff70;
    }

    .glight-theme ::-moz-placeholder,
    .gdark-theme ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #ffffff70;
    }
}

.contrast-theme .post,
.contrast-theme .emojipicker,
.contrast-theme .modal,
.contrast-theme .report-box,
.contrast-theme .report-user,
.contrast-theme .report-post,
.contrast-theme .mod-post,
.contrast-theme .stg-section,
.contrast-theme .reply,
.contrast-theme .section,
.contrast-theme .searchitem,
.contrast-theme input,
.contrast-theme textarea,
.contrast-theme select,
.contrast-theme button {
    border: 2px solid #0ff;
}

.contrast-theme .selected {
    border: 2px solid #ff0;
}

.contrast-theme .post {
    box-sizing: border-box;
}

.contrast-theme input:focus,
.contrast-theme textarea:focus,
.contrast-theme select:focus,
.contrast-theme button:focus {
    border: 2px solid #0f0;
}

.contrast-theme .mdl-hr {
    border: 1px solid #0ff;
}

.contrast-theme .toolButton:hover {
    background-color: var(--hov-color);
}

.contrast-theme .buttonContainer {
    background-color: transparent;
}

.contrast-theme :-moz-placeholder,
.contrast-theme ::-webkit-input-placeholder,
.contrast-theme ::-moz-placeholder {
    color: #ffffff;
    opacity: 1;
}

.teb-theme #page::after {
    content: '';
    position: fixed;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: var(--grad-height);
    background: linear-gradient(90deg, #3178af 0%, #195990 13%, #2968a1 30%, #216398 50%, #153866 71%, #5290c3 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 100%);
}

.teb-theme .post:hover .buttonContainer, .fabloo-theme .post:hover .buttonContainer {
    background-color: transparent;
}

.fabloo-theme #page::after {
    content: '';
    position: fixed;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: var(--grad-height);
    background: linear-gradient(70deg, #eb6458 0%, #3669a0 25%, #f0e95f 50%, #b3b2ae 75%, #87c27c 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 100%);
}

.pride-theme #page::after {
    content: '';
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: var(--grad-height);
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,127,0,1) 13%, rgba(255,230,0,1) 30%, rgba(0,171,0,1) 50%, rgba(0,115,255,1) 71%, rgba(190,0,255,1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
}

.trans-theme #page::after {
    content: '';
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: var(--grad-height);
    background: linear-gradient(90deg, rgba(49,201,240,1) 0%, rgba(255,255,255,1) 50%, rgba(255,151,172,1) 100%); 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
}

.nonb-theme #page::after {
    content: '';
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: var(--grad-height);
    background: linear-gradient(90deg, rgb(252, 244, 52) 0%, rgb(255, 255, 255) 50%, rgb(156, 89, 209) 100%); 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
}

.theme-button.trans-theme {
    background: linear-gradient(90deg, rgb(27, 111, 133) 0%, rgb(138, 82, 93) 25%, rgb(113, 113, 113) 50%, rgb(138, 82, 93) 75%, rgb(27, 111, 133) 100%); 
    background-size: cover;
}

.theme-button.pride-theme {
    background: linear-gradient(90deg, rgba(150,0,0,1) 0%, rgba(150,73,0,1) 13%, rgba(150,110,0,1) 30%, rgba(0,110,0,1) 50%, rgba(0,70,150,1) 60%, rgba(130,0,150,1) 75%, rgba(150,0,0,1) 100%);
    background-size: cover;
}

.theme-button.nonb-theme {
    background: linear-gradient(90deg, rgb(198, 192, 40) 0%, rgb(166, 166, 166) 50%, rgb(121, 68, 162) 100%);
    background-size: cover;
}

.pride-theme .settings > h1,
.trans-theme .settings > h1,
.nonb-theme .settings > h1
 {
    background: transparent;
    position: static;
}

.midnight-blurple-theme #page::after {
    content: '';
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #0f0d25 0%, #04020a 100%);
}

.midnight-blurple-theme .message-container {
    background: linear-gradient(45deg, #0a0819 0%, #070511 100%);
}

.theme-button.midnight-blurple-theme,  .midnight-blurple-theme .jump {
    background: #0c0a18;
}

.meower-theme .post {
    border: 3px solid var(--primary);
    background-color: transparent;
}

.meower-theme .message-input {
    border: 3px solid var(--primary);
    background-color: transparent;
}

.meower-theme .message-tool, .meower-theme .message-send {
    background-color: var(--primary);
}

.meower-theme .toolButton {
    background-color: var(--primary);
    border-radius: 500px;
    color: var(--color);
}

.meower-theme .post:hover .buttonContainer {
    background-color: transparent;
}

.meower-theme .reply {
    border: 3px solid var(--primary);
}

.discord {
    #main {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .message-outer {
        bottom: 0;
        position: sticky;
        z-index: 1;
    }

    .posts {
        flex-direction: column-reverse;
        display: flex;
        gap: 10px;
    }
    
    .post {
        margin-bottom: 0;
    }

    .jump.visible {
        display: flex;
        position: fixed;
        right: 32px;
        bottom: 64px;
    }

    .emojipicker {
        bottom: 64px;
    }

    .info {
        display: none;
    }
}

.magnify p,
.magnify span,
.magnify button,
.magnify textarea,
.magnify label,
.magnify input,
.magnify i,
.magnify a 
{
    font-weight: 800;
    font-size: 24px !important;
}
    
.magnify h1,
.magnify h2,
.magnify h3,
.magnify #username,
.magnify h4 {
    font-size: 36px !important;
}