Merge pull request #73 from The-User-Python/The-User-Python-patch-3

Update index.css

Author: The-User-Python

index.css

@@ -5,7 +5,7 @@
 html, body {
   padding: 0;
   margin: 0;
-  width: 150%;
+  width: 100%; /* Adjusted to 100% */
   height: 100%;
 }
 
@@ -16,48 +16,47 @@ html, body {
 }
 
 .icon-online {
-  content: -webkit-image-set( url(assets/default_100_percent/100-error-offline.png) 1x, url(assets/default_200_percent/200-error-offline.png) 2x);
+  content: -webkit-image-set( url(assets/default_100_percent/100-error-online.png) 1x, url(assets/default_200_percent/200-error-online.png) 2x); /* Updated online icon */
   position: relative;
 }
 
 .hidden {
   display: none;
 }
 
-
 /* Offline page */
 
 .offline .interstitial-wrapper {
   color: #6b3b3b;
-  font-size: 1em;
-  line-height: 1.55;
+  font-size: 1.2em; /* Adjusted font size */
+  line-height: 1.5;
   margin: 0 auto;
-  max-width: 650px;
-  padding-top: 150px;
-  width: 100%;
+  max-width: 800px; /* Increased max-width */
+  padding-top: 100px; /* Adjusted padding */
+  width: 90%; /* Adjusted width */
 }
 
 .offline .runner-container {
-  height: 150px;
-  max-width: 650px;
+  height: 120px; /* Adjusted height */
+  max-width: 800px;
   overflow: hidden;
   position: absolute;
-  top: 45px;
-  width: 44px;
+  top: 30px; /* Adjusted top position */
+  width: 40px; /* Adjusted width */
 }
 
 .offline .runner-canvas {
-  height: 150px;
-  max-width: 650px;
-  opacity: 1;
+  height: 120px;
+  max-width: 800px;
+  opacity: 0.9; /* Adjusted opacity */
   overflow: hidden;
   position: absolute;
   top: 0;
   z-index: 2;
 }
 
 .offline .controller {
-  background: rgba(247, 247, 247, .1);
+  background: rgba(247, 247, 247, .2); /* Adjusted background opacity */
   height: 100vh;
   left: 0;
   position: absolute;
@@ -67,70 +66,21 @@ html, body {
 }
 
 #offline-resources {
-  display: none;
+  display: block; /* Set to block for visibility */
 }
 
 @media (max-width: 480px) {
   .suggested-left > #control-buttons, .suggested-right > #control-buttons {
-    float: none;
+    float: left; /* Adjusted float property */
   }
   .snackbar {
+    position: fixed; /* Adjusted position */
     left: 0;
-    bottom: 0;
+    bottom: 10px; /* Adjusted bottom position */
     width: 100%;
-    border-radius: 0;
-  }
-}
-
-@media (max-height: 390px) {
-  h1 {
-    margin: 0 0 15px;
-  }
-  .icon-offline {
-    margin: 0 0 40px;
-  }
-  .interstitial-wrapper {
-    margin-top: 5%;
-  }
-  .nav-wrapper {
-    margin-top: 30px;
+    border-radius: 5px; /* Added border-radius */
   }
 }
 
-@media (min-width: 900px) and (max-width: 736px) and (orientation: landscape) {
-  .offline .interstitial-wrapper {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
+/* Add more media queries and modifications as needed */
 
-@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
-  .interstitial-wrapper {
-    margin-bottom: 100px;
-  }
-}
-
-@media (min-height: 240px) and (orientation: landscape) {
-  .offline .interstitial-wrapper {
-    margin-bottom: 90px;
-  }
-  .icon-offline {
-    margin-bottom: 20px;
-  }
-}
-
-@media (max-height: 320px) and (orientation: landscape) {
-  .icon-offline {
-    margin-bottom: 0;
-  }
-  .offline .runner-container {
-    top: 10px;
-  }
-}
-
-@media (max-width: 240px) {
-  .interstitial-wrapper {
-    overflow: inherit;
-    padding: 0 8px;
-  }
-}