ui: contest_problemlist

packages/ui-default/components/contest/contest.page.styl

@@ -40,3 +40,75 @@ for key, value in $contest-color
   &:hover
     background: $primary-color
     border-color: $primary-color
+
+.contest-problems
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  text-align: left;
+  box-sizing: border-box;
+  font-variant-ligatures: none!important;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(1.5rem,1fr));
+  justify-content: center;
+  row-gap: 0.75rem;
+  column-gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  
+  > a
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+    display: flex;
+    height: 1.5rem;
+    width: 1.5rem;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: 0.375rem;
+    position: relative;
+    transition: opacity 0.2s;
+    color: grey;
+    &.pass
+      color: green;
+      &:before
+        background: green;
+    &.fail
+      color: red;
+      &:before
+        background: red;
+
+    &:after
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      border: 2px solid currentColor;
+      border-radius: 6px;
+      opacity: 0.3;
+    
+    &.active:after
+      border: 3px solid cyan;
+
+    &:before
+      opacity: 0.5;
+    
+    &.pass, &.fail
+      &:not(:hover) .id
+        display: none;
+      
+      &:hover .icon
+        display: none;
+
+  // .placeholder
+  //   cursor: pointer;
+  //   position: absolute;
+  //   top: -0.375rem;
+  //   right: -0.375rem;
+  //   bottom: -0.375rem;
+  //   left: -0.375rem;
+