improve style

sergeiown · Apr 6, 2024 · 86b214f · 86b214f
1 parent a1ea485
commit 86b214f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 14 deletions.
diff --git a/index.css b/index.css
@@ -1,16 +1,23 @@
 body {
   margin: 0;
   font-family: Arial, sans-serif;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1053%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M139.25667198004743 285.2653955421974L260.26005795815945-65.06898841380547-58.817654017795974-8.806978849720053z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M42.11542731880117 353.88457268119896L322.70765814495917 191.8845726811988-119.884572681199 73.29234185504095z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M281.60843945698707 294.1722582698874L292.9158763885974-29.630369684299637-30.886751565589634-40.93780661590995-42.194188497199946 282.86482133827707z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1861.882%2c322.383C1923.802%2c320.519%2c1986.466%2c301.322%2c2018.716%2c248.43C2052.181%2c193.545%2c2049.166%2c123.98%2c2016.676%2c68.512C1984.539%2c13.645%2c1925.466%2c-19.828%2c1861.882%2c-19.325C1799.155%2c-18.829%2c1744.591%2c17.778%2c1711.274%2c70.928C1675.425%2c128.118%2c1653.115%2c200.485%2c1687.797%2c258.39C1721.846%2c315.237%2c1795.648%2c324.376%2c1861.882%2c322.383' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1906.5752049066664 277.23217961387274L2042.5084093734313 109.36865193916705 1722.7465156279904-10.599390923627482z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1717.4247950933336-61.23217961387262L1581.4915906265687 106.63134806083312 1901.2534843720098 226.59939092362754z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M172.50623091815407 803.9555232305037L-111.64946150401956 1041.929350497443 190.83059668107387 1158.0405661501204z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-82.43114068769071 935.6684619595462L-41.21639768635707 1147.6999335842418 256.2234382500193 979.8620832698934z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M90.24290077819248 1225.9383496583903L334.76880477037054 1013.3752242654658 122.20567937744607 768.8493202732877-122.32022461473198 981.4124456662122z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1555.62 868.39 a152.77 152.77 0 1 0 305.54 0 a152.77 152.77 0 1 0 -305.54 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1888.071287113326 808.864598333403L1588.0075686427422 1026.4370342199518 1881.6512916426168 1163.3653510239383z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1923.78%2c1323.308C2006.249%2c1318.659%2c2072.833%2c1265.184%2c2115.915%2c1194.709C2161.38%2c1120.337%2c2189.576%2c1030.833%2c2150.079%2c953.127C2107.304%2c868.971%2c2018.122%2c813.302%2c1923.78%2c816.707C1834.229%2c819.939%2c1769.146%2c891.031%2c1724.109%2c968.5C1678.766%2c1046.493%2c1645.823%2c1140.093%2c1690.068%2c1218.714C1734.932%2c1298.435%2c1832.447%2c1328.457%2c1923.78%2c1323.308' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1053'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100vh;
 }
 body .container {
   width: 95%;
   height: 95vh;
   margin: auto;
-  flex-direction: column;
-  margin-bottom: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+  margin-bottom: 10px;
+  color: #6fa2d6;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
 }
 body .container h1,
 body .container h3 {
@@ -23,6 +30,11 @@ body .container textarea {
   box-sizing: border-box;
   resize: none;
   font-size: 16px;
+  background-color: #184a7f;
+  color: #6fa2d6;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }
 body .container .options {
   width: 40%;
@@ -33,11 +45,24 @@ body .container .options select {
   width: 100%;
   height: 35px;
   font-size: 14px;
+  background-color: #184a7f;
+  color: #6fa2d6;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }
 body .container .options option {
   height: 40px;
   font-size: 14px;
   line-height: 1.6;
+  background-color: #184a7f;
+  color: #6fa2d6;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+@media screen and (max-device-width: 480px) {
+  body .container .options select {
+    height: 40px;
+  }
 }
 @media screen and (orientation: portrait) {
   body .container {
@@ -48,11 +73,6 @@ body .container .options option {
     width: 95%;
   }
 }
-@media screen and (max-device-width: 480px) {
-  body .container select {
-    height: 40px;
-  }
-}
 body .noscript-message {
   text-align: center;
   padding: 20px;

diff --git a/index.scss b/index.scss
@@ -1,5 +1,7 @@
 $font-stack: Arial, sans-serif;
 $font-size: 16px;
+$font-color: #6fa2d6;
+$background-color: #184a7f;
 
 @mixin center {
     display: flex;
@@ -10,14 +12,21 @@ $font-size: 16px;
 body {
     margin: 0;
     font-family: $font-stack;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1053%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M139.25667198004743 285.2653955421974L260.26005795815945-65.06898841380547-58.817654017795974-8.806978849720053z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M42.11542731880117 353.88457268119896L322.70765814495917 191.8845726811988-119.884572681199 73.29234185504095z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M281.60843945698707 294.1722582698874L292.9158763885974-29.630369684299637-30.886751565589634-40.93780661590995-42.194188497199946 282.86482133827707z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1861.882%2c322.383C1923.802%2c320.519%2c1986.466%2c301.322%2c2018.716%2c248.43C2052.181%2c193.545%2c2049.166%2c123.98%2c2016.676%2c68.512C1984.539%2c13.645%2c1925.466%2c-19.828%2c1861.882%2c-19.325C1799.155%2c-18.829%2c1744.591%2c17.778%2c1711.274%2c70.928C1675.425%2c128.118%2c1653.115%2c200.485%2c1687.797%2c258.39C1721.846%2c315.237%2c1795.648%2c324.376%2c1861.882%2c322.383' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1906.5752049066664 277.23217961387274L2042.5084093734313 109.36865193916705 1722.7465156279904-10.599390923627482z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1717.4247950933336-61.23217961387262L1581.4915906265687 106.63134806083312 1901.2534843720098 226.59939092362754z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M172.50623091815407 803.9555232305037L-111.64946150401956 1041.929350497443 190.83059668107387 1158.0405661501204z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-82.43114068769071 935.6684619595462L-41.21639768635707 1147.6999335842418 256.2234382500193 979.8620832698934z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M90.24290077819248 1225.9383496583903L334.76880477037054 1013.3752242654658 122.20567937744607 768.8493202732877-122.32022461473198 981.4124456662122z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1555.62 868.39 a152.77 152.77 0 1 0 305.54 0 a152.77 152.77 0 1 0 -305.54 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1888.071287113326 808.864598333403L1588.0075686427422 1026.4370342199518 1881.6512916426168 1163.3653510239383z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1923.78%2c1323.308C2006.249%2c1318.659%2c2072.833%2c1265.184%2c2115.915%2c1194.709C2161.38%2c1120.337%2c2189.576%2c1030.833%2c2150.079%2c953.127C2107.304%2c868.971%2c2018.122%2c813.302%2c1923.78%2c816.707C1834.229%2c819.939%2c1769.146%2c891.031%2c1724.109%2c968.5C1678.766%2c1046.493%2c1645.823%2c1140.093%2c1690.068%2c1218.714C1734.932%2c1298.435%2c1832.447%2c1328.457%2c1923.78%2c1323.308' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1053'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
 
     .container {
         width: 95%;
         height: 95vh;
         margin: auto;
+        @include center;
         flex-direction: column;
         margin-bottom: 10px;
-        @include center;
+        color: $font-color;
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
 
         h1,
         h3 {
@@ -31,6 +40,11 @@ body {
             box-sizing: border-box;
             resize: none;
             font-size: $font-size;
+            background-color: $background-color;
+            color: $font-color;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
         }
 
         .options {
@@ -42,12 +56,26 @@ body {
                 width: 100%;
                 height: 35px;
                 font-size: 14px;
+                background-color: $background-color;
+                color: $font-color;
+                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
             }
 
             option {
                 height: 40px;
                 font-size: 14px;
                 line-height: 1.6;
+                background-color: $background-color;
+                color: $font-color;
+                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+            }
+
+            @media screen and (max-device-width: 480px) {
+                select {
+                    height: 40px;
+                }
             }
         }
 
@@ -59,12 +87,6 @@ body {
                 width: 95%;
             }
         }
-
-        @media screen and (max-device-width: 480px) {
-            select {
-                height: 40px;
-            }
-        }
     }
 
     .noscript-message {