правки фронта, новая цветовая схема (синий, серый)

countdown executeCode

1 files changed, 106 insertions, 17 deletions

diff --git a/static/style.css b/static/style.css
index 500a6e4..d688eec 100644
--- a/static/style.css
+++ b/static/style.css
@@ -595,19 +595,20 @@ div {
 
 .text-interactive {
   --tw-text-opacity: 1;
-  color: rgb(20 184 166 / var(--tw-text-opacity));
+  color: rgb(113 113 122 / var(--tw-text-opacity));
+  text-decoration-line: underline;
 }
 
 .text-interactive:hover {
   --tw-text-opacity: 1;
-  color: rgb(192 38 211 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
 .header {
   display: flex;
   width: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
   padding: 0.5rem;
 }
 
@@ -622,7 +623,9 @@ div {
   border-width: 4px;
   border-style: dashed;
   --tw-border-opacity: 1;
-  border-color: rgb(245 208 254 / var(--tw-border-opacity));
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding: 0.5rem;
 }
 
@@ -633,11 +636,11 @@ div {
 
 .about li a {
   text-decoration-line: underline;
-  text-decoration-color: #14b8a6;
+  text-decoration-color: #71717a;
 }
 
 .about li a:hover {
-  text-decoration-color: #e879f9;
+  text-decoration-color: #60a5fa;
 }
 
 .source-code-pro-500 {
@@ -647,6 +650,16 @@ div {
   font-style: normal;
 }
 
+.CodeMirror {
+  height: auto;
+  width: 100%;
+}
+
+.CodeMirror-scroll {
+  height: auto;
+  max-height:500px;
+}
+
 .absolute {
   position: absolute;
 }
@@ -681,6 +694,10 @@ div {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -693,18 +710,14 @@ div {
   height: 6rem;
 }
 
-.h-full {
-  height: 100%;
+.min-h-16 {
+  min-height: 4rem;
 }
 
 .min-h-20 {
   min-height: 5rem;
 }
 
-.min-h-16 {
-  min-height: 4rem;
-}
-
 .w-full {
   width: 100%;
 }
@@ -743,6 +756,10 @@ div {
   align-items: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .justify-around {
   justify-content: space-around;
 }
@@ -759,6 +776,14 @@ div {
   overflow-x: hidden;
 }
 
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -773,15 +798,35 @@ div {
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 
+.bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+.bg-secondary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(228 228 231 / var(--tw-bg-opacity));
+}
+
 .bg-stone-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -806,9 +851,24 @@ div {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .text-secondary-400 {
   --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
+  color: rgb(161 161 170 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -816,20 +876,44 @@ div {
 }
 
 .decoration-primary-300 {
-  text-decoration-color: #f0abfc;
+  text-decoration-color: #93c5fd;
+}
+
+.decoration-secondary-600 {
+  text-decoration-color: #52525b;
 }
 
 .marker\:text-secondary-300 *::marker {
-  color: rgb(94 234 212 );
+  color: rgb(212 212 216 );
 }
 
 .marker\:text-secondary-300::marker {
-  color: rgb(94 234 212 );
+  color: rgb(212 212 216 );
+}
+
+.hover\:bg-primary-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-secondary-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(212 212 216 / var(--tw-bg-opacity));
+}
+
+.hover\:text-primary-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
 .hover\:text-secondary-300:hover {
   --tw-text-opacity: 1;
-  color: rgb(94 234 212 / var(--tw-text-opacity));
+  color: rgb(212 212 216 / var(--tw-text-opacity));
+}
+
+.hover\:text-secondary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(82 82 91 / var(--tw-text-opacity));
 }
 
 .group:hover .group-hover\:inline-block {
@@ -844,4 +928,9 @@ div {
   .md\:w-3\/4 {
     width: 75%;
   }
+
+  .md\:w-min {
+    width: -moz-min-content;
+    width: min-content;
+  }
 }