/* S2OJ Bootstrap 5 Theme */ /* - Global Reset - */ body { overflow-y: scroll; } pre { tab-size: 4; } a { text-decoration: none; } /* Content */ .uoj-pre { padding: 1em; } .uoj-username, .uoj-score { font-weight: 800; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } .uoj-realname { font-size: 90%; font-weight: normal; } /* Headings */ h1, .h1 { /* font-size: 2.5rem; */ font-size: 2rem; } h2, .h2 { /* font-size: 2rem; */ font-size: 1.8rem; } h3, .h3 { /* font-size: 1.75rem; */ font-size: 1.6rem; } h4, .h4 { /* font-size: 1.5rem; */ font-size: 1.4rem; } h5, .h5 { /* font-size: 1.25rem; */ font-size: 1.15rem; } h6, .h6 { font-size: 1rem; } /* Difficulty */ .uoj-difficulty { font-size: 0.9em; font-weight: bold; } /* Table */ .uoj-table > tbody > tr:last-child, .uoj-table > tbody > tr:last-child > td { border-bottom-color: transparent; } .uoj-table > thead > tr:first-child, .uoj-table > thead > tr:first-child > td { border-top-color: transparent; } .uoj-table > thead > tr > th:first-child, .uoj-table > tbody > tr > td:first-child { border-left-color: transparent; } .uoj-table > thead > tr > th:last-child, .uoj-table > tbody > tr > td:last-child { border-right-color: transparent; } /* Click zan */ .uoj-click-zan-block { display: inline-block; min-width: 100px; text-align: center; font-size: 0.9em; } .uoj-click-zan-up, .uoj-click-zan-down, .uoj-click-zan-cnt { margin-left: 5px; margin-right: 5px; } .uoj-click-zan-block-cur-up .uoj-click-zan-up { color: green; font-weight: 700; } .uoj-click-zan-block-cur-down .uoj-click-zan-down { color: red; font-weight: 700; } .uoj-click-zan-block-cur-down .uoj-click-zan-up, .uoj-click-zan-block-cur-up .uoj-click-zan-down { color: gray; } .uoj-click-zan-block-positive .uoj-click-zan-cnt { color: green; } .uoj-click-zan-block-neutral .uoj-click-zan-cnt { color: gray; } .uoj-click-zan-block-negative .uoj-click-zan-cnt { color: red; } /* Submission details */ .uoj-submission-result-item { cursor: pointer; } .uoj-status-text { font-weight: bold; } .uoj-submission-result-item.accordion-button:not(.collapsed)::after { filter: grayscale(1); } .uoj-submission-result-item.accordion-button:focus { box-shadow: none; } .uoj-status-accepted > .accordion-header > .accordion-button:hover, .uoj-status-accepted > .accordion-header > .accordion-button:not(.collapsed), .uoj-status-accepted > .accordion-header > .accordion-button > div > .uoj-status-text { color: #25ad40; } .uoj-status-accepted > .accordion-header > .accordion-button:not(.collapsed) { background-color: #25ad4020; } .uoj-status-acceptable-answer > .accordion-header > .accordion-button:hover, .uoj-status-acceptable-answer > .accordion-header > .accordion-button:not(.collapsed), .uoj-status-acceptable-answer > .accordion-header > .accordion-button > div > .uoj-status-text { color: #01bab2; } .uoj-status-acceptable-answer > .accordion-header > .accordion-button:not(.collapsed) { background-color: #01bab220; } .uoj-status-tle > .accordion-header > .accordion-button:hover, .uoj-status-tle > .accordion-header > .accordion-button:not(.collapsed), .uoj-status-tle > .accordion-header > .accordion-button > div > .uoj-status-text { color: #f4a460; } .uoj-status-tle > .accordion-header > .accordion-button:not(.collapsed) { background-color: #f4a46020; } .uoj-status-wrong > .accordion-header > .accordion-button:hover, .uoj-status-wrong > .accordion-header > .accordion-button:not(.collapsed), .uoj-status-wrong > .accordion-header > .accordion-button > div > .uoj-status-text { color: #ff4f4f; } .uoj-status-wrong > .accordion-header > .accordion-button:not(.collapsed) { background-color: #ff4f4f20; } .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item { border-left: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); border-right: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:first-child { border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:last-child { border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:first-of-type, .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:first-of-type .accordion-button { border-top-left-radius: var(--bs-accordion-border-radius); border-top-right-radius: var(--bs-accordion-border-radius); } .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:last-of-type, .uoj-subtask-test-item.accordion:not(.accordion-flush) .accordion-item:last-of-type .accordion-button { border-bottom-left-radius: var(--bs-accordion-border-radius); border-bottom-right-radius: var(--bs-accordion-border-radius); } .accordion-button.no-collapse::after { content: unset; } /* Markdown */ .markdown-body h1 { font-size: 2em; margin-bottom: 1rem; } .markdown-body h2 { font-size: 1.75em; margin-bottom: 1rem; } .markdown-body h3 { font-size: 1.5em; } .markdown-body h4 { font-size: 1.25em; } .markdown-body h5 { font-size: 1em; font-weight: bold; } .markdown-body h6 { font-size: 0.9em; font-weight: bold; } .markdown-body img { max-width: 100%; } .markdown-body pre { padding: 1em; background-color: var(--bs-tertiary-bg); } .markdown-body table th[align='left'] { text-align: left; } .markdown-body table th[align='center'] { text-align: center; } .markdown-body table th[align='right'] { text-align: right; } .markdown-body blockquote { margin: 0; padding: 0 1em; color: #57606a; border-left: 0.25em solid #d0d7de; } .markdown-body ol, .markdown-body ul { margin-bottom: 1em; } /* PDF */ .pdf-page-canvas { /* min-width: 100%; */ max-width: 100%; } /* Form */ form { margin-bottom: 0; } form.form-horizontal { margin-bottom: 8px; } .form-group { margin-bottom: 1rem; } .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.125rem rgb(13 110 253 / 25%); } .accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.125rem rgb(13 110 253 / 25%); } .btn { --bs-btn-focus-box-shadow: 0 0 0 0.125rem rgb(13 110 253 / 25%); } .pagination { --bs-pagination-focus-box-shadow: 0 0 0 0.125rem rgb(13 110 253 / 25%); } /* User accepted problems list */ @media (max-width: 767px) { .uoj-ac-problems-list li { width: 100%; } } @media (min-width: 768px) { .uoj-ac-problems-list li { width: 18em; } } .uoj-ac-problems-list { padding-top: 10px; padding-bottom: 5px; } .uoj-ac-problems-list a { min-height: 60px; } .uoj-ac-problems-list-item:hover { color: var(--bs-nav-link-color) !important; background-color: #eeeeee70; } /* Comments */ .comment-content { white-space: pre-wrap; word-break: break-all; min-height: 50px; } /* Standing table */ .uoj-standings-table tr td:first-child, .uoj-standings-table tr th:first-child { border-left-width: 0px; } .uoj-standings-table tr td:last-child, .uoj-standings-table tr th:last-child { border-right-width: 0px; } .uoj-standings-table > thead > tr:first-child { border-top-width: 0px; } .uoj-standings-table > tbody > tr:last-child { border-bottom-width: 0px; } /* Timeline */ .list-group.timeline { margin: auto; } @media (min-width: 768px) { .list-group.timeline { display: block; max-width: 90%; position: relative; } .list-group.timeline:before { content: ' '; background: rgba(var(--bs-secondary-rgb), 0.35); display: inline-block; position: absolute; left: -17.5px; width: 2px; height: 100%; z-index: 400; } .list-group.timeline > .list-group-item:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid var(--bs-info); left: -25px; width: 15px; height: 15px; z-index: 500; } } /* Back button */ .uoj-back-btn { --bs-btn-hover-bg: #d3d4d570; --bs-btn-hover-border-color: transparent; } /* Remote Content */ .remote-content center > img + span { display: block; font-size: 90%; } /* Dropzone Form */ .dropzone .dz-preview.dz-file-preview .dz-image { background: #e9ecef !important; } .dropzone .dz-preview .dz-progress { height: 6px !important; } /* Utils */ .overflow-wrap-normal { overflow-wrap: normal !important; } .white-space-pre { white-space: pre !important; } /* Contest Nav */ .uoj-content.container-fluid .uoj-contest-nav { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } @media (max-width: 1200px) { .uoj-content.container-fluid .uoj-contest-nav { padding-left: 0 !important; padding-right: 0 !important; } } /* Submissions List */ .uoj-accepted-badge { background-color: rgb(20 184 48) !important; } .uoj-unaccepted-badge { background-color: rgb(219 53 53) !important; } /* Submission Page */ .submission-layout { /* display: grid; */ grid-template-columns: 70% 30%; grid-template-rows: auto 1fr; } @media (min-width: 992px) { .submission-layout { grid-template-columns: 75% 25%; } } .submission-left-col { grid-column: 1; grid-row: 1 / span 2; } .submission-right-col { grid-column: 2; grid-row: 1; } .submission-right-control-panel { grid-column: 2; grid-row: 2; } /* Username color */ .uoj-username, .uoj-username-blue { color: #1e88e5; } .uoj-username-green { color: #2da44e; } .uoj-username-pink { color: #e85aad; } .uoj-username-red { color: #f32a38; } .uoj-username-orange { color: #f57c00; } .uoj-username-cyan { color: #00acc1; } .uoj-username-purple { color: #9d3dcf; } .uoj-username-gray { color: #707070; } .uoj-username-brown { color: #996600; } /* Dark: Username color */ [data-bs-theme='dark'] .uoj-username, [data-bs-theme='dark'] .uoj-username-blue { color: #218bff; } [data-bs-theme='green'] .uoj-username-green { color: #19a140; } [data-bs-theme='dark'] .uoj-username-pink { color: #bf3989; } [data-bs-theme='dark'] .uoj-username-red { color: #cf222e; } [data-bs-theme='dark'] .uoj-username-orange { color: #e16f24; } [data-bs-theme='dark'] .uoj-username-cyan { color: #00acc1; } [data-bs-theme='dark'] .uoj-username-purple { color: #9366e5; } [data-bs-theme='dark'] .uoj-username-gray { color: #8c959f; } [data-bs-theme='dark'] .uoj-username-brown { color: #996f1c; }