NDOJ/resources/base.scss

@charset "UTF-8";

@import "vars";

@-ms-viewport {
    min-width: 480px;
    max-width: device-width;
}

@-o-viewport {
    min-width: 480px;
    max-width: device-width;
}

@viewport {
    min-width: 480px;
    max-width: device-width;
}

a {
    color: #1958c1;

    &:hover {
        color: #0645ad;
    }

    &:active {
        color: $theme_color;
    }
}

img {
    max-width: 100%;

    // height: auto
}

* {
    -webkit-tap-highlight-color: transparent;
}

.full {
    width: 100% !important;
}

table.sortable thead {
    background-color: $background_gray;
    color: #666;
    font-weight: bold;
    cursor: default;
}

th {
    &.tablesorter-headerAsc:after {
        content: " ▴";
    }

    &.tablesorter-headerDesc:after {
        content: " ▾";
    }
}

div {
    &.tablesorter-header-inner {
        display: inline;
    }
}

pre {
    white-space: pre-wrap;
}

hr {
    display: block;
    height: 0;
    border: 0;
    font-style: italic;
    border-bottom: 1px solid $border_gray;
    padding: 0;
}

.dashed {
    border-bottom: 1px dashed $border_gray;
}

th {
    vertical-align: middle;
}

.form-area {
    display: inline-block;
    background: $background_light_gray;
    padding: 5px 10px 10px 15px;
    border-radius: $widget_border_radius;
    border: 1px solid $border_gray;
}

div.info-float {
    float: right;
    padding: 10px;
}

footer {
    color: gray;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
}

body {
    position: relative;
    min-height: 100%;
    margin: 0 auto;
    font-size: $base_font_size;
    line-height: 1.231;
    background: $background_light_gray;
    font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
    color: #000;
    height: 100%;
    overflow-x: hidden;
}

.unselectable {
    cursor: default;
}

h1 {
    font-size: 5em;
    letter-spacing: -2px;
    margin: 0;
    padding: 0;
    line-height: 1em;
}

b {
    font-weight: bold;
}

h2 {
    font-weight: 400;
    font-size: 2em;
    border-radius: $widget_border_radius;
    padding: 0;
    margin: 0;
}

h3 {
    font-weight: 400;
    font-size: 1.4em;
    border-radius: $widget_border_radius;
    padding: 0;
    margin: 0;
}

h4 {
    font-size: 1.1em;
    padding: 0;
    margin: 0;
}

header {
    background: #111;
    color: #aaa;
    text-align: left;
    display: block;
    height: 60px;
    margin-top: -10px;
    padding: 10px 10px 10px 5%;
}

#user-links {
    display: flex;
    text-align: center;
    padding: 4px;
    margin-right: 1em;
    gap: 5px;
    &:hover {
        color: black;
        border-radius: 2px;
        border: 0.5px solid black;
        cursor: pointer;
        padding: 3.5px;
    }
    img {
        border-radius: 50%;
    }
}

#nav-shadow {
    height: 2px;
    background: linear-gradient(lightgray, transparent);
}

#nav-container {
    background: white;

    // opacity: 0.77;
    // filter: alpha(opacity=77)
    height: 100%;
}

#navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 10px;
    height: $navbar_height;
}

nav {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 500;
    text-align: left;

    ul {
        margin: 0 0 0 -5px !important;
        padding: 0 0 0 1%;
        text-align: left;
        display: inline;
        list-style: none;
        background: transparent;

        li {
            display: inline-block;
            color: #FFF;
            text-transform: uppercase;
            position: relative;

            &.home-nav-element {
                display: flex;
                align-items: center;
                margin-right: 1em;
            }

            &.home-nav-element a {
                padding: 0;
                height: 44px;

                &:hover {
                    border-bottom: none;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }

            a, button {
                display: flex;
                height: 100%;
                align-items: center;
                gap: 2px;
                text-decoration: none;
                color: black;
                font-weight: bold;
                font-size: initial;

                &:link {
                    color: black;
                }

                &:hover {
                    border-top: 2px solid $theme_color;
                    color: black;
                    background: rgba(255, 255, 255, 0.25);
                    margin: 0;
                }

                &.active {
                    // color: #FFF;
                    border-top: 2px solid $theme_color;
                    color: $theme_color;
                }

                .nav-expand {
                    display: none;
                }
            }

            ul {
                padding: 0;
                position: absolute;
                left: 5px;
                display: none;
                color: #fff;
                background: white;
                margin: 0 !important;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);


                li {
                    &:hover {
                        background: lightgray;
                    }

                    display: block;

                    a {
                        color: black !important;
                    }

                    a, button {
                        padding: 8px 20px 8px 8px !important;
                        font-size: 0.8em;
                        line-height: 18px;
                        display: block;
                        border-left: 4px solid black;
                        white-space: nowrap;
                    }
                }
            }

            button {
                background: none;
                text-align: left;
                border: none;
                width: 100%;
                border-radius: 0;
                height: auto !important;
            }

            &:hover > ul, &:active > ul, &:focus > ul {
                display: block !important;
            }

            &.home-nav-element a:hover {
                border-bottom: 0;
                padding-top: 0;
                padding-bottom: 0;
                background: transparent;
            }
        }
    }
}

hr {
    color: rgba(0, 0, 0, 0.2);
}

#content {
    margin: $navbar_height auto 1em auto;
    padding-top: 1em;

    // Header
    width: 90%;
    height: 100%;
    min-height: 25em;
    display: block;

    .title {
        color: #393630;
    }
}

footer {
    text-align: center;
    height: 40px;
    border-top: 1px solid $border_gray;
    background: #ededed;
}

html {
    position: relative;
    height: 100%;
}

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

noscript #noscript {
    font-family: Arial, sans-serif;
    font-size: 111%;
    color: white;
    font-weight: bold;
    background: $announcement_red;
    text-align: center;
    padding: 5px 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 100;
}

#announcement {
    font-family: Arial, sans-serif;
    font-size: 111%;
    color: white;
    font-weight: bold;
    background: $announcement_red;
    text-align: center;
    max-width: 30%;
    position: fixed;
    border-radius: $widget_border_radius;
    z-index: 100;
    bottom: -4px;
    right: -4px;
    padding: 5px 6px 6px 5px;

    a {
        color: orange;
    }
}

.time {
    color: #555;
}

.toggle {
    font-weight: bold;
    cursor: pointer;

    .fa {
        transition: transform 0.4s;
    }

    &.open .fa {
        transform: rotate(90deg);
    }
}

#form-errors, .form-errors {
    background: rgba(255, 0, 0, 0.3);
    border: 3px solid red;
    border-radius: $widget_border_radius;
    padding: 0 1em 0.1em 1em;
    margin: 0.3em 0 0.5em 0;
}

#navicon {
    display: none;
}

#nav-placeholder {
    height: 47px;
    background: white;
    border-right: 1px solid $border_gray;
    border-left: 1px solid $border_gray;
}

#contest-info {
    font-size: 1.25em;
    z-index: 100000;
    cursor: move;
    position: fixed;
    left: 20px;
    top: 90%;
    display: none;

    a {
        height: 1.4em;
        padding: 0;
        margin: 0;
        color: white;
        display: block;
    }
}

#contest-info-main {
    border-left: 5px dotted white;
    background: rgba(0, 0, 0, 0.77);
    padding: 10px 12px;
    color: white;
    display: inline;
}

#contest-info-toggle {
    display: inline;
    padding: 10px 12px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.contest-info-toggle-mode-on {
    background: rgba(0, 205, 0, 0.57);
}
.contest-info-toggle-mode-on:hover {
    background: rgba(0, 205, 0, 0.97);
}
.contest-info-toggle-mode-off {
    background: rgba(255, 0, 0, 0.57);
}
.contest-info-toggle-mode-off:hover {
    background: rgba(255, 0, 0, 0.97);
}

#contest-time-remaining {
    display: inline-block;
}

.spacer {
    display: inline-block;
    flex: 1 1 1px;
}

#page-container {
    min-height: 100%;
    position: relative;
    margin: 0 auto;
    border-right: 1px solid $border_gray;
    border-left: 1px solid $border_gray;
}

// border-bottom: 1px solid rgb(204, 204, 204)
// border-bottom-left-radius: 4px
// border-bottom-right-radius: 4px

#content-body {
    padding-bottom: 4em;
}

// Offset the footer

.title-line-action {
    float: right;
    margin-top: 1.2em;
}

math {
    font-size: 1.155em;
}

.MathJax {
    &:focus {
        outline: none;
    }
}

@media(max-width: 1498px) {
    #page-container {
        border-left: none;
        border-right: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@media (max-width: 799px) {
    #navigation {
        height: $navbar_height_mobile;
    }

    #content {
        margin-top: $navbar_height_mobile;
    }

    #navicon {
        transition-duration: 0.25s;
        display: flex;
        font-size: 2em;
        color: $widget_black;
        padding: 0 0.25em;
        margin: 4px 0.25em;
        white-space: nowrap;
        flex-grow: 1;

        &.hover {
            color: #4db7fe;
            text-shadow: 0 0 5px $highlight_blue;
            transition-duration: 0.25s;
        }
    }

    #nav-list {
        display: none;
        padding: 0;
        margin-left: 0;
        text-align: center;
        border-left: 4px solid $highlight_blue;
        position: fixed;
        top: 36px;
        background: white;
        bottom: 0;
        width: fit-content;
        left: 0;
        box-shadow: none;
        border: 1px solid;

        li {
            display: block;

            a {
                display: block;
                font-weight: normal;
                text-align: left;
                padding: 7px 13px;

                .nav-expand {
                    float: right;
                    display: block;
                    height: inherit;
                    margin: (-13px) -7px;
                    padding: inherit;
                }
            }

            ul {
                left: 8em;
                top: auto;
                bottom: auto;
                margin-top: -36px;
            }

            &.home-nav-element {
                display: none;
            }
        }
    }
}

@media(min-width: 800px) {
    #nav-list {
        display: flex !important;
        gap: 1.5em;
        flex-grow: 1;

        li {
            &.home-menu-item {
                display: none;
            }

            &:not(:hover) > ul {
                display: none !important;
            }

            ul {
                left: 0 !important;
            }
        }
    }
}

#notification {
    color: lightsteelblue;
}

#notification:hover {
    color: darkgray;
}

#chat-icon {
    color: darkgreen;
}

#chat-icon:hover {
    color: $theme_color;
}

#nav-lang-icon {
    color: blue;
    cursor: pointer;
}
#nav-lang-icon:hover {
    color: darkblue;
}

#nav-darkmode-icon {
    cursor: pointer;
    &:hover {
        color: gray;
    }
}

.dropdown {
    display: none;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 4px 0;
    z-index: 1;
    border-radius: 5px;

    a {
        display: block;
        text-decoration: none;
        transition: background-color 0.3s;
        color: black;
    }
}

.dropdown-item {
    font-size: 16px;
    padding: 6px 40px 6px 15px;
    cursor: pointer;
    color: black;
    font-weight: 600;
}

.dropdown-item:hover {
    color: $theme_color;
}

.popper-arrow,
.popper-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

.popper-arrow {
    visibility: hidden;
}

.popper-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

.popper-arrow {
    top: -4px;
}

.unread_boxes {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 1px 4px;
    margin-left: -12px;
    font-size: x-small;
    font-family: monospace;
}

.sub-lang {
    color: black;
    font-size: x-small;
    margin-left: -12px;
    font-family: monospace;
    text-transform: uppercase;
}

.featherlight {
    z-index: 1000 !important;
}

select {
    visibility: hidden;
    max-height: 0;
}

// @media (max-width: 500px) {
    //     #notification {
        //         margin-top: 0.6em;
        //     }
    // }

.notification-open #notification {
    color: green !important;
}

.title-row {
    color: #393630;
    display: inline;
}

.gray {
    color: gray;
}

.white {
    color: white;
}

.black {
    color: black;
}

.red {
    color: red;
}

.green {
    color: green;
}

.grayed {
    color: #666;
}

.darkcyan {
    color: darkcyan;
}

.peru {
    color: peru;
}

.blue {
    color: blue;
}

.background-d6e8f7 {
    background-color: #d6e8f7;
}

.background-bisque {
    background-color: bisque;
}

.background-footer {
    color: #808080;
}

.view-next-page {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background-color: $theme_color;
    width: 0;
    z-index: 9999;
}

.nav-right-text {
    font-weight: normal;
    font-size: small;
    text-align: center;
}

.anon {
    display: flex;
    gap: 1em;
    padding-right: 1em;
    a {
        color: black;
    }
}

@media (max-width: 799px) {
    .nav-fa-icon {
        display: none;
    }
}

@media(min-width: 800px) {
    .normal-text {
        font-weight: normal;
        font-size: small;
        text-align: left;
    }
    #page-container {
        background: #f1f2f2;
    }
    #event-tab {
        display: none;
    }
    #content.wrapper {
        background: white;
        padding: 2em;
        border-radius: 1em;
    }
    .view-next-page {
        display: none;
    }
}

.colored-text {
    color: black;
}

.bold-text {
    font-weight: bold;
}

.non-italics {
    font-style: normal;
}

.margin-label{
    margin-bottom: 2.5px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: $theme_color;
    opacity: 1; /* Firefox */
    text-align: center;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: $theme_color;
    text-align: center;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: $theme_color;
    text-align: center;
}

input::placeholder{
    color: $theme_color;
    text-align: center;
}

::-webkit-input-placeholder {
    color: $theme_color;
    text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
    color: $theme_color;
    text-align: center;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: $theme_color;
    text-align: center;
}

.nav-fa-icon {
    i {
        margin-right: 0.1em;
        color: #000;
        font-size: 22.5px;
    }
}

.nav-fa-icon-active {
    i {
        color: $theme_color;
        font-size: 22.5px;
        margin-right: 0.1em;
    }
}