royalnet/static/spoopy.less

@background-color: #1a0606;
@text-color: #ffa1a1;
@accent-color: #ffcccc;
@quote-color: #a0ffcc;
@spoiler-color: #ffa0cc;
@highlight-color: #ffff95;
@link-color: #66aacc;
@visited-color: #9870cc;

body {
    font-family: sans-serif;
    color: @text-color;
    background-color: @background-color;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    color: @accent-color;
}

a {
    color: @link-color;
    text-decoration: none;

    &:hover, &:active {
        color: @link-color;
        text-decoration: underline;
    }

    &:visited {
        color: @visited-color;
    }
}

blockquote {
    color: @quote-color;
    border-left: 3px solid @quote-color;
    background-color: rgba(red(@quote-color), green(@quote-color), blue(@quote-color), 0.1);
    padding: 2px 4px 2px 8px;
    margin-left: 8px;

    p {
        padding-top: 2px;
        margin: 4px 0;
    }

    &.spoiler {
        color: transparent;
        border-color: @spoiler-color;
        background-color: rgba(red(@spoiler-color), green(@spoiler-color), blue(@spoiler-color), 0.1);

        &:hover {
            color: @spoiler-color;
        }
    }

    &:target {
        color: @highlight-color;
        border-color: @highlight-color;
        background-color: rgba(red(@highlight-color), green(@highlight-color), blue(@highlight-color), 0.1);
    }
}

pre {
    margin: 0;
}

code {
    font-family: "Consolas", "Source Code Pro", monospace;
}

input[type="text"], input[type="password"] {
    background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
    color: @text-color;
    border: none;
    border-bottom: 1px dashed @text-color;
    padding: 2px;
    margin: 1px;
    font-size: medium;
    font-family: sans-serif;
    width: 100%;
}

textarea {
    background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
    color: @text-color;
    font-size: small;
    font-family: "Consolas", "Source Code Pro", monospace;
    padding: 2px;
    margin: 1px;
    border: 1px dotted @text-color;
    width: 100%;
    height: 300px;
}

button, input[type="submit"], .btn {
    background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
    border-radius: 0;
    border: 1px solid @text-color;
    color: @text-color !important;
    padding: 2px 8px;
    margin: 1px;
    font-size: medium;
    font-family: sans-serif;
    text-decoration: none;
    cursor: default;

    &:hover {
        background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.3);
        border: 1px solid @accent-color;
    }

    &:active {
        background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.5);
        color: @accent-color !important;
        border: 1px solid @accent-color;
    }
}

nav {
    border-bottom: 1px solid rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
    padding: 8px;
    display: grid;

    .ryg-logo {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        border-radius: 32px;
    }

    .left
    {
        grid-column: 1;
        text-align: left;
    }

    .right
    {
        grid-column: 2;
        text-align: right;
    }
}

table {
    border-collapse: collapse;

    thead {
        margin-top: 4px;
        margin-left: 4px;
        margin-right: 4px;
        padding: 8px;

        th {
            background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.2);
            color: @accent-color;
            padding-left: 4px;
            padding-right: 4px;
            text-align: left;
            font-size: small;
            font-weight: bold;
        }

        tr:first-child {
            th:first-child {
                border-radius: 4px 0 0 0;
            }

            th:last-child {
                border-radius: 0 4px 0 0;
            }
        }
    }

    tbody {
        margin-bottom: 4px;
        margin-left: 4px;
        margin-right: 4px;
        padding: 8px;

        td {
            background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
            padding-left: 4px;
            padding-right: 4px;
        }

        tr {
            border-bottom: 1px solid rgba(red(@text-color), green(@text-color), blue(@text-color), 0.2);;

            &:last-child {
                border-bottom: none;

                td:first-child {
                    border-radius: 0 0 0 4px;
                }

                td:last-child {
                    border-radius: 0 0 4px 0;
                }
            }
        }
    }
}

.box {
    .upper-box {
        margin-top: 4px;
        border-radius: 4px 4px 0 0;
        background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.2);
        color: @accent-color;
        font-size: small;
        font-weight: bold;
        margin-left: 4px;
        margin-right: 4px;
        padding: 8px;
    }

    .lower-box {
        background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
        margin-bottom: 4px;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: 0 0 4px 4px;
        padding: 8px;
    }
}

.input-grid {
    display: grid;

    label {
        margin: 3px;
        grid-column: 1;
        max-width: 120px;
    }

    input {
        grid-column: 2;
    }
}

@media (min-width:601px) {
    .mobile-only {
        display: none;
    }
}

@media (max-width:600px) {
    .desktop-only {
        display: none;
    }
}

.game-panel {
    display: inline-block;
    margin: 4px;
    vertical-align: top;
    width: 380px;
}

.game-grid {
    display: grid;
    height: 100px;
    border-radius: 10px;
    position: relative;

    .game-title {
        grid-row: 2;
        font-size: smaller;
    }

    .game-score {
        grid-row: 3;
    }

    .game-extra {
        grid-row: 4;
        font-size: smaller;
    }

    .player {
        grid-row: 1;
        font-size: large;

        a {
            text-decoration: none;
        }

        .player-image {
            width: 32px;
            height: 32px;
            vertical-align: middle;
        }
    }
}

//Dirtiest hack ever
.game-panels {
    font-size: 0;

    .game-panel {
        font-size: medium;
    }

    .osu {
        font-family: 'Exo 2', 'Helvetica Neue', 'Arial', sans-serif;
        font-style: italic;
        border: 8px solid #ffffff;
        color: #ffffff;
        padding: 10px;
        grid-row-gap: 5px;
        grid-template-columns: 25% 25% 25% 25%;

        .background-image {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-image: url("https://osu.ppy.sh/images/layout/nav-backgrounds/triangles-combined.png");
            z-index: -2;
        }

        .background-color {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(187, 17, 119, 0.9);
            z-index: -1;
        }

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 4;

            .player-image {
                border-radius: 16px;
            }

            .player-name {
                color: #ffffff;
            }
        }

        .game-title {
            font-style: normal;
        }

        .standard {
            grid-column: 1;
        }

        .taiko {
            grid-column: 2;
        }

        .catch {
            grid-column: 3;
        }

        .mania {
            grid-column: 4;
        }

        .number {
            font-size: large;
        }

        .pp {
            font-size: x-small;
        }
    }

    .rl {
        background-image: linear-gradient(to bottom, rgba(35, 91, 139, .5), rgba(16, 54, 84, .5)),
        linear-gradient(to right, rgba(35, 91, 139, .7), rgba(16, 54, 84, .7));
        grid-template-columns: 25% 25% 25% 25%;
        padding: 18px;
        grid-row-gap: 5px;

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 4;

            .player-name {
                color: #ffffff;
                text-shadow: 2px 2px 8px #359ef2, -2px 2px 8px #359ef2, 2px -2px 8px #359ef2, -2px -2px 8px #359ef2;
            }
        }

        .game-title {
            text-align: center;
            color: #41abfa;
            text-shadow: 2px 2px 8px #235b8b, -2px 2px 8px #235b8b, 2px -2px 8px #235b8b, -2px -2px 8px #235b8b;
        }

        .game-score img {
            height: 36px;
            display: block;
            margin: auto;
        }

        .duel {
            grid-column: 1;
        }

        .doubles {
            grid-column: 2;
        }

        .standard {
            grid-column: 3;
        }

        .solostd {
            grid-column: 4;
        }

    }

    .dota {
        padding: 15px;
        border: 3px solid #000000;
        grid-row-gap: 5px;
        grid-template-columns: 25% 75%;
        font-family: "Radiance", sans-serif;
        background-image: linear-gradient(to bottom, #440b0b, #631013);
        color: #ffffff;

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 3;

            .player-name {
                color: #ffffff;
            }
        }

        .game-score.wins {
            font-size: x-large;
        }

        .wins {
            grid-column: 1;
            text-align: center;
        }

        .rank {
            grid-column: 2;
            grid-row-start: 2;
            grid-row-end: 4;
            margin-top: auto;
            margin-bottom: auto;

            img {
                vertical-align: middle;
            }

            img.stars {
                position: relative;
                height: 60px;
                left: -60px;
                margin-right: -60px;
                z-index: 1;
            }

            img.medal {
                height: 60px;
            }
        }
    }

    .lol {
        font-family: "BeaufortLoL", "Times New Roman", serif;
        padding: 15px;
        color: #c9aa71;
        border: 3px solid #463714;
        background-color: #010a13;
        grid-row-gap: 5px;
        grid-template-columns: 20% 20% 20% 20% 20%;

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 4;

            .player-image {
                border-radius: 16px;
            }
        }

        .level {
            grid-column: 1;
        }

        .game-score.level {
            font-size: x-large;
        }

        .mastery {
            grid-column: 2;
        }

        .game-score.mastery {
            border-radius: 40px;
        }

        .soloq {
            grid-column: 3;
        }

        .flexq {
            grid-column: 4;
        }

        .twtrq {
            grid-column: 5;
        }

        .game-title {
            text-align: center;
        }

        .game-score {
            text-align: center;
            margin: auto;
        }

        .rank {
            height: 40px;
        }
    }

    .steam {
        font-family: "Motiva Sans", sans-serif;
        padding: 18px;
        background: url("https://steamstore-a.akamaihd.net/public/images/v6/colored_body_top2.png?v=2") center;

        .player .player-name {
            grid-row: 1;
            grid-column: 1;
            color: #ffffff;
        }

        .buttons {
            grid-row: 2;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .game-banner {
            grid-row: 1;
            grid-column: 2;
            text-align: right;

            img {
                height: 58px;
                border-radius: 4px;
            }
        }

        a {
            text-decoration: none;
            display: inline-block;
        }

        .button {
            background-color: rgba(0, 0, 0, 0.4);
            color: #9e9d9b;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .button:hover, .button:active {
            background-color: rgba(102, 192, 244, 0.4);
            color: #ffffff;
        }
    }

    .ow {
        padding: 16px;
        font-family: "FuturaNo2D", sans-serif;
        background-color: #371b00;
        border: 2px solid #ff9c00;
        grid-row-gap: 5px;
        grid-template-columns: 25% 75%;
        color: #ffffff;
        text-transform: uppercase;

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 3;

            .player-image {
                border-radius: 2px;
                vertical-align: middle;
            }

            .player-name {
                color: #ffffff;
            }
        }

        .game-title {
            color: #ff9c00;
        }

        .game-score.level {
            font-size: x-large;
        }

        .level {
            grid-column: 1;
            text-align: center;
        }

        .rank {
            grid-column: 2;
            grid-row-start: 2;
            grid-row-end: 4;
            margin-top: auto;
            margin-bottom: auto;

            .icon {
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                height: 60px;
                width: 60px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 8px;
            }

            .ranked.text {
                font-size: x-large;
            }
        }
    }

    .ryg {
        background-color: rgba(red(@text-color), green(@text-color), blue(@text-color), 0.1);
        padding: 18px;
        grid-template-columns: 80% 20%;

        .player {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 3;
            font-weight: bold;
        }

        .member-status {
            grid-column: 1;
            grid-row-start: 2;
            grid-row-end: 4;
            font-size: x-large;
            margin-top: auto;
            margin-bottom: auto;
        }

        .fiorygi {
            grid-column: 2;
        }

        .fiorygi.game-score {
            font-size: x-large;
        }
    }

    .telegram {
        font-family: "Lucida Sans Unicode", sans-serif;
        background-color: #32afed;
        border: 6px solid white;
        padding: 12px;
        color: black;

        a, a:hover, a:active, a:visited {
            color: black;
        }

        .player {
            font-weight: bold;
        }

        .useless-stuff {
            grid-column: 1;
        }
    }

    .discord {
        background-color: #7289da;
        padding: 18px;
        color: white;
        font-family: "Whitney", sans-serif;
        grid-template-columns: 50% 50%;

        a, a:hover, a:active, a:visited {
            color: white;
        }

        .player-image {
            border-radius: 16px;
        }

        .game-score {
            overflow: hidden;
        }

        .last-video {
            grid-column: 1;
        }

        .fav-video {
            grid-column: 2;
        }

        .none {
            color: rgba(255, 255, 255, 0.3);
        }
    }

    .gamelog {
        background-color: #00ffc8;
        padding: 18px;
        color: black;
        font-family: "Arial", sans-serif;
        grid-template-columns: 33.3% 33.4% 33.3%;

        .games-owned {
            grid-column: 1;
        }

        .games-beaten {
            grid-column: 2;
        }

        .games-completed {
            grid-column: 3;
        }
    }

    .halloweenmini {
        background-color: #311515;
        padding: 18px;
        grid-template-columns: 100%;

        .mysterystatus.game-score {
            font-size: 0;

            i {
                font-size: 34px;
            }
        }
    }
}

.wiki {

    .wiki-log {
        font-family: "Consolas", "Source Code Pro", monospace;
        margin-bottom: 12px;

        .last-reason {
            font-style: italic;
        }
    }

    .wiki-edit {
        border-top: 1px solid rgba(red(@text-color), green(@text-color), blue(@text-color), 0.3);

        h4 {
            padding: 0;
        }
    }

    //Text generated by the Markdown extension
    .codehilite {
        border-radius: 4px;
        padding: 4px;
    }
}

.entry {
    display: grid;

    .left {
        grid-column: 1;
    }

    .right {
        grid-column: 2;
        text-align: right;
        margin-top: auto;
    }

    cite {
        font-size: smaller;
    }

    .entry-id {
        text-align: right;
    }
}

.main-page {
    display: grid;

    @media (min-width:601px) {
        //Desktop

        grid-template-columns: 50% 50%;

        .left {
            grid-column: 1;
        }

        .right {
            grid-column: 2;
        }

        .halloween {
            grid-column-start: 1;
            grid-column-end: 3;
        }
    }

    @media (max-width:600px) {
        //Mobile

        grid-template-columns: 100%;

        .left {
            grid-row: 1;
        }

        .right {
            grid-row: 2;
        }

        .halloween {
            grid-row-start: 1;
            grid-row-end: 3;
        }
    }

    .halloween {
        .lower-box {
            text-align: center;

            .time-left {
                font-size: 64px;
                font-family: "Consolas", "Source Code Pro", monospace;
            }

            .mysterystatus {
                font-size: 64px;
            }
        }
    }
}

.event {
    display: grid;
    padding-top: 4px;
    padding-bottom: 4px;
    grid-template-columns: 28% 50% 22%;

    .time {
        grid-column: 1;
        grid-row: 1;
    }

    .name {
        grid-column: 2;
        grid-row: 1;
        font-weight: bold;
        color: @accent-color;
    }

    .author {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }

    .description {
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

.profile {
    width: 380px;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 792px)
    {
        width: 776px;
    }

    @media (min-width: 1180px)
    {
        width: 1164px;
    }
}

.mysterystatus i {
    &.todo {
        color: rgba(255, 255, 0, 0.2);
    }

    &.done {
        color: rgba(255, 255, 0, 1);
    }
}

#debug-mode {
    color: red;
    font-weight: bold;
    background-color: darkred;
}

#edit-css {
    font-size: medium;
}