Cloned DMOJ

resources/submission.scss

@@ -0,0 +1,325 @@
+.info-float {
+    position: sticky;
+    top: 60px;
+    width: 20%;
+}
+
+#submissions-table {
+    background: rgba(0, 0, 0, .01);
+}
+
+.submission-row {
+    display: flex;
+    border-left: #ccc 1px solid;
+    border-right: #ccc 1px solid;
+    transition: background-color linear 0.2s;
+
+    &:hover {
+        background: #F2F2F2;
+    }
+
+    &:first-of-type {
+        border-top: #ccc 1px solid;
+    }
+
+    > div {
+        padding: 7px 5px;
+        vertical-align: middle;
+        border-bottom: #ccc 1px solid;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .sub-result {
+        min-width: 80px;
+        width: 80px;
+        text-align: center;
+        border-bottom-color: white;
+        border-right: #ccc 1px solid;
+
+        .state {
+            font-size: 0.7em;
+            font-weight: bold;
+            padding-top: 0.5em;
+        }
+
+        .score {
+            font-size: 1.3em;
+            color: #000;
+        }
+    }
+
+    .sub-info {
+        flex: 1;
+        padding-left: 20px !important;
+
+        .name {
+            font-weight: 700;
+            font-size: 1.2em;
+        }
+    }
+
+    .sub-testcase {
+        color: #555;
+        white-space: nowrap;
+    }
+
+    .sub-prop {
+        a {
+            white-space: nowrap;
+        }
+    }
+
+    .sub-usage {
+        min-width: 70px;
+        width: 70px;
+        white-space: nowrap;
+        text-align: center;
+        border-left: #ccc 1px solid;
+
+        .time {
+            font-weight: bold;
+        }
+    }
+}
+
+.sub-prop .fa {
+    display: none;
+}
+
+label[for="language"], label[for="status"] {
+    padding-bottom: 0.25em;
+    display: block;
+}
+
+#language {
+    margin-top: 0.5em;
+    width: 100%;
+}
+
+#status {
+    width: 100%;
+}
+
+#statistics-table tr:not(:first-child) td {
+    border-top: 1px solid white !important;
+}
+
+#statistics-table tr:not(:last-child) td:not(:last-child) {
+    border-right: 1px solid white;
+}
+
+#content-left.submission {
+    flex: 70%;
+}
+
+#content-right.submission {
+    flex: 12%;
+    min-width: initial;
+    max-width: 100%;
+    padding-top: 0;
+}
+
+@media(max-width: 700px) {
+    .sub-prop {
+        .label {
+            display: none;
+        }
+
+        .fa {
+            display: inline-block;
+        }
+    }
+
+    #fake-info-float {
+        display: none;
+    }
+
+    #statistics-table {
+        display: none;
+    }
+
+    #content-left.submission {
+        flex: 100%;
+    }
+
+    #content-right.submission {
+        display: none;
+    }
+}
+
+.submission-contest {
+    color: #555;
+}
+
+.source-ln {
+    color: gray;
+    border-right: 1px solid gray;
+    padding-right: 5px;
+    text-align: right;
+
+    a {
+        color: gray;
+        display: block;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &::before {
+            display: block;
+            content: " ";
+            margin-top: -50px;
+            height: 50px;
+            visibility: hidden;
+        }
+    }
+}
+
+.source-code pre, .source-ln pre {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+}
+
+.source-code {
+    padding-left: 15px;
+}
+
+.source-wrap {
+    overflow-x: auto;
+}
+
+.statistics-table {
+    .status {
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .count {
+        color: black;
+    }
+}
+
+#test-cases {
+    .toggle .fa {
+        margin-left: -1.28571em;
+    }
+
+    .batch-cases {
+        margin: 0;
+        padding-left: 1em;
+        padding-bottom: 3px;
+        padding-top: 3px;
+        display: inline-block;
+    }
+
+    .batch-cases .case-row td b {
+        font-weight: 500;
+    }
+
+    .case-row td:nth-child(3) {
+        padding-right: 0;
+        text-align: right;
+    }
+
+    .case-row td:nth-child(3) span {
+        float: right;
+    }
+
+    .case-row td:nth-child(4) {
+        text-align: right;
+    }
+
+    .case-info {
+        margin: 0;
+        padding-left: 1em;
+        padding-bottom: 3px;
+        padding-top: 3px;
+        border: 1px solid #2980b9;
+        border-left-width: .5em;
+        border-radius: 4px;
+        color: #222;
+    }
+
+    .case-output {
+        margin: 0;
+        margin-right: 1em;
+    }
+
+    table td {
+        margin: 0;
+        padding: 0 5px 0 0;
+    }
+
+    .toggle {
+        font-weight: normal;
+    }
+
+    .case-feedback {
+        vertical-align: top;
+    }
+
+    .case-ext-feedback {
+        width: 50%;
+    }
+}
+
+.case-AC {
+    color: green;
+    font-weight: bold;
+}
+
+.case-_AC {
+    color: red;
+    font-weight: bold;
+}
+
+.case-WA {
+    color: red;
+    font-weight: bold;
+}
+
+.case-TLE, .case-SC {
+    color: gray;
+    font-weight: bold;
+}
+
+.case-MLE, .case-OLE, .case-RTE, .case-IR {
+    color: orange;
+    font-weight: bold;
+}
+
+.half-hr {
+    float: left;
+    width: 30%;
+}
+
+.source-wrap {
+    .line {
+        position: relative;
+    }
+
+    .highlighter {
+        position: absolute;
+        width: 9999px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    a:active .line .highlighter {
+        background: rgba(255, 212, 0, 0.48);
+    }
+}
+
+.submission-info {
+    text-align: right;
+    float: right;
+
+    .submission-date {
+        color: gray;
+    }
+}