Cloned DMOJ

resources/problem.scss

@@ -0,0 +1,292 @@
+#problem-table {
+    td {
+        &.category {
+            text-align: left;
+            padding: 0 1em;
+        }
+
+        &.problem {
+            text-align: left;
+            padding-left: 1em;
+            width: 100%;
+        }
+
+        &.pp {
+            text-align: left;
+            padding-left: 1em;
+            width: 100%;
+        }
+
+        &.users {
+            text-align: left;
+            padding: 0 1em;
+            white-space: nowrap;
+        }
+
+        &.types {
+            text-align: left;
+            padding: 0 1em;
+        }
+
+        &.ac-rate {
+            white-space: nowrap;
+        }
+
+        &.points {
+            white-space: nowrap;
+        }
+    }
+
+    tr {
+        transition: background-color linear 0.2s;
+
+        &:hover {
+            background: #eaeaea;
+        }
+    }
+}
+
+#filter-form {
+    vertical-align: top;
+    margin-bottom: 0.5em;
+    margin-top: 0.75em;
+
+    a {
+        margin-right: 5px;
+        display: inline-block;
+        padding: 3px 10px;
+        vertical-align: middle;
+    }
+
+    input {
+        vertical-align: middle;
+        margin-bottom: 0.5em;
+    }
+
+    label {
+        vertical-align: middle;
+    }
+
+    .filter-form-group {
+        margin-top: 5px;
+    }
+}
+
+#content-right {
+    &.problems {
+        flex: 26.5%;
+        max-width: unset;
+        padding-top: 0;
+    }
+}
+
+#content-left {
+    &.problems {
+        flex: 73.5%;
+    }
+}
+
+#search {
+    width: 100%;
+    height: 2.3em;
+}
+
+label[for="category"], label[for="type"] {
+    padding-bottom: 0.25em;
+    display: block;
+}
+
+#category {
+    margin-top: 0.5em;
+    width: 100%;
+}
+
+#types {
+    width: 100%;
+}
+
+span.type-tag {
+    white-space: nowrap;
+}
+
+ul.problem-list {
+    list-style: none;
+    padding-left: 1em;
+    padding-right: 0.5em;
+
+    li {
+        margin-bottom: 0.5em;
+    }
+}
+
+.pi-name {
+    font-weight: bold;
+}
+
+.pi-name:after {
+    content: " ";
+}
+
+.authors-value, .judges-value {
+    padding-left: 1.5em;
+}
+
+.lang-name:after {
+    content: ": ";
+}
+
+.lang-limit {
+    margin-left: 1.5em;
+}
+
+.solved-problem-color {
+    color: #44AD41;
+}
+
+.unsolved-problem-color {
+    color: #DE2121;
+}
+
+.attempted-problem-color {
+    color: orange;
+}
+
+.submissions-left {
+    color: black;
+    font-weight: 600;
+    text-align: center;
+    margin-top: 0.5em;
+}
+
+.no-submissions-left {
+    color: red;
+}
+
+.organization-tags {
+    padding-left: 0.75em;
+    vertical-align: middle;
+}
+
+.organization-tag {
+    box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.12);
+    padding: 0.15em 0.3em;
+    border-radius: 0.15em;
+    font-weight: 600;
+    margin-right: 0.45em;
+    position: relative;
+    background-color: #ccc;
+    transform: translateY(+35%);
+    display: inline-block;
+}
+
+.organization-tag a {
+    color: #000;
+}
+
+.pdf-icon {
+    position: relative;
+    display: inline-block;
+    font-size: 1.5em;
+
+    .pdf-icon-logo {
+        color: #d40e13;
+    }
+
+    .pdf-icon-bar {
+        height: 0.2em;
+        display: block;
+        position: absolute;
+        top: 0.3em;
+        background: #d40e13;
+        width: 0.6em;
+        margin-left: -0.15em;
+    }
+}
+
+.license {
+    float: left;
+    font-size: 0.85em;
+
+    a {
+        color: gray;
+        text-decoration: none;
+    }
+}
+
+.clarify {
+    float: right;
+}
+
+#problem_submit {
+    width: 100%;
+    box-sizing: border-box;
+
+    .button {
+        float: right;
+        padding: 6px 12px;
+    }
+}
+
+@media (max-width: 550px) {
+    #problem-table tr :nth-child(6) {
+        display: none;
+    }
+}
+
+@media (max-width: 450px) {
+    #problem-table tr :nth-child(4) {
+        display: none;
+    }
+}
+
+@media (max-width: 350px) {
+    #problem-table tr :nth-child(3) {
+        display: none;
+    }
+}
+
+#problem-table th a {
+    color: inherit;
+    display: block;
+    padding: 4px 10px;
+}
+
+#category, #types {
+    visibility: hidden;
+}
+
+#filter-form .form-label {
+    margin-top: 0.5em;
+    font-style: italic;
+}
+
+#point-slider {
+    margin: 30px 15px 10px;
+    height: 10px;
+
+    .noUi-handle {
+        height: 20px;
+        width: 16px;
+        left: -8px;
+    }
+
+    .noUi-handle:before, .noUi-handle:after {
+        top: 3px;
+        height: 12px;
+    }
+
+    .noUi-handle:before {
+        left: 5px;
+    }
+
+    .noUi-handle:after {
+        left: 8px;
+    }
+
+    .noUi-tooltip {
+        height: 17px;
+        line-height: 13px;
+        padding: 0 3px;
+        font-size: 13px;
+    }
+}