Final

resources/newProblem.scss

@@ -1,192 +0,0 @@
-:root {
-    --green: #28a745;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .btn {
-        -webkit-transition: none;
-        -o-transition: none;
-        transition: none;
-    }
-}
-
-.btn:hover {
-    color: #212529;
-    text-decoration: none;
-}
-
-.btn-block {
-    display: block;
-    width: 100%;
-}
-
-.btn-block + .btn-block {
-    margin-top: 0.5rem;
-}
-
-.d-flex {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
-    display: flex !important;
-}
-
-@media screen and (min-width: 1100px) {
-    .d-flex-problem {
-        display: -webkit-box !important;
-        display: -ms-flexbox !important;
-        display: flex !important;
-    }
-}
-
-.justify-content-center {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-}
-
-.align-items-center {
-    -webkit-box-align: center !important;
-    -ms-flex-align: center !important;
-    align-items: center !important;
-}
-
-.align-content-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
-}
-
-.align-self-center {
-    -ms-flex-item-align: center !important;
-    -ms-grid-row-align: center !important;
-    align-self: center !important;
-}
-
-body {
-    font-size: 15px;
-    line-height: 1.8;
-    font-weight: normal;
-}
-
-a {
-    -webkit-transition: .3s all ease;
-    -o-transition: .3s all ease;
-    transition: .3s all ease;
-}
-
-a:hover, a:focus {
-    text-decoration: none !important;
-    outline: none !important;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-button {
-    -webkit-transition: .3s all ease;
-    -o-transition: .3s all ease;
-    transition: .3s all ease;
-}
-
-button:hover, button:focus {
-    text-decoration: none !important;
-    outline: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-}
-
-.btn {
-    padding: 8px 12px;
-    cursor: pointer;
-    border-width: 1px;
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 500;
-    -webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
-    overflow: hidden;
-    position: relative;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -webkit-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-
-.btn span {
-    margin-left: -20px;
-    -moz-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    -webkit-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-
-.btn:hover, .btn:active, .btn:focus {
-    outline: none !important;
-}
-
-.btn:hover span, .btn:active span, .btn:focus span {
-    margin-left: -10px;
-}
-
-.btn .icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 45px;
-    bottom: 0;
-    background: #fff;
-}
-
-.btn .icon i {
-    font-size: 20px;
-}
-
-.btn .icon.icon-round {
-    border-radius: 50%;
-}
-
-.btn.btn-primary {
-    color: #fff;
-    background: var(--green);
-    border-color: var(--green);
-}
-
-.btn.btn-disabled {
-    color: #fff;
-    background: gray;
-    border-color: gray;
-}
-
-.btn.btn-primary:hover, .btn.btn-primary:focus {
-    border-color: green !important;
-    background: green !important;
-}
-
-.btn.btn-primary .icon i {
-    color: var(--green);
-}
-
-.btn.btn-round {
-    border-radius: 40px;
-}
-
-.new-problem-info {
-    background-color: #fff6dd;
-    border-radius: 25px;
-    font-size: 14px;
-    height: 25px;
-    width: 98%;
-    display: table;
-    padding: 5px;
-    margin-top: 14px;
-    border: solid;
-    border-color: black;
-    border-width: 0.1px;
-}
-
-.info-block {
-    display:table-cell;
-    vertical-align:middle;
-    margin-right: auto;
-}

resources/problem.scss

@@ -415,4 +415,32 @@ ul.problem-list {
             min-width: 7em;
         }
     }
+}
+
+.new-problem-info {
+    background-color: #fff6dd;
+    border-radius: 25px;
+    font-size: 14px;
+    height: 25px;
+    width: 98%;
+    display: table;
+    padding: 5px;
+    margin-top: 14px;
+    border: solid;
+    border-color: black;
+    border-width: 0.1px;
+}
+
+.info-block {
+    display:table-cell;
+    vertical-align:middle;
+    margin-right: auto;
+}
+
+@media screen and (min-width: 1100px) {
+    .d-flex-problem {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
 }

resources/style.scss

@@ -16,5 +16,4 @@
 @import "organization";
 @import "ticket";
 @import "pagedown_widget";
-@import "dmmd-preview";
+@import "dmmd-preview";
-@import "newProblem"

resources/widgets.scss

@@ -741,4 +741,170 @@ ul.errorlist {
     .github-icon i {
         color: black;
     }
-}
+}
+
+
+:root {
+    --green: #28a745;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .btn {
+        -webkit-transition: none;
+        -o-transition: none;
+        transition: none;
+    }
+}
+
+.btn:hover {
+    color: #212529;
+    text-decoration: none;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+.btn-block + .btn-block {
+    margin-top: 0.5rem;
+}
+
+.d-flex {
+    display: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+}
+
+.justify-content-center {
+    -webkit-box-pack: center !important;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+}
+
+.align-items-center {
+    -webkit-box-align: center !important;
+    -ms-flex-align: center !important;
+    align-items: center !important;
+}
+
+.align-content-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+}
+
+.align-self-center {
+    -ms-flex-item-align: center !important;
+    -ms-grid-row-align: center !important;
+    align-self: center !important;
+}
+
+body {
+    font-size: 15px;
+    line-height: 1.8;
+    font-weight: normal;
+}
+
+a {
+    -webkit-transition: .3s all ease;
+    -o-transition: .3s all ease;
+    transition: .3s all ease;
+}
+
+a:hover, a:focus {
+    text-decoration: none !important;
+    outline: none !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+button {
+    -webkit-transition: .3s all ease;
+    -o-transition: .3s all ease;
+    transition: .3s all ease;
+}
+
+button:hover, button:focus {
+    text-decoration: none !important;
+    outline: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+
+.btn {
+    padding: 8px 12px;
+    cursor: pointer;
+    border-width: 1px;
+    border-radius: 5px;
+    font-size: 14px;
+    font-weight: 500;
+    -webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    position: relative;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -webkit-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.btn span {
+    margin-left: -20px;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -webkit-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.btn:hover, .btn:active, .btn:focus {
+    outline: none !important;
+}
+
+.btn:hover span, .btn:active span, .btn:focus span {
+    margin-left: -10px;
+}
+
+.btn .icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    bottom: 0;
+    background: #fff;
+}
+
+.btn .icon i {
+    font-size: 20px;
+}
+
+.btn .icon.icon-round {
+    border-radius: 50%;
+}
+
+.btn.btn-primary {
+    color: #fff;
+    background: var(--green);
+    border-color: var(--green);
+}
+
+.btn.btn-disabled {
+    color: #fff;
+    background: gray;
+    border-color: gray;
+}
+
+.btn.btn-primary:hover, .btn.btn-primary:focus {
+    border-color: green !important;
+    background: green !important;
+}
+
+.btn.btn-primary .icon i {
+    color: var(--green);
+}
+
+.btn.btn-round {
+    border-radius: 40px;
+}