css (1)

laptop batter yalmost dead 😟

src/imag/static/index.css

@@ -37,6 +37,16 @@ h1 {
 
 img {
     max-width: 256px;
+    border-radius: 10px;
+    padding: 3px;
+    -webkit-transition: border-radius 0.1s ease-out;
+    -moz-transition: border-radius 0.1s ease-out;
+    -o-transition: border-radius 0.1s ease-out;
+}
+
+img:hover {
+    cursor: pointer;
+    border-radius: 5px
 }
 
 button {
@@ -44,9 +54,59 @@ button {
     padding: 0.5em;
     background-color: #1c1c1c;
     cursor: pointer;
+    border-radius: 30px;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
+}
+
+button:hover {
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+input {
+    border: none;
+    padding: 0.5em;
+    background-color: #1c1c1c;
+    cursor: pointer;
+    margin: 2px;
+    border-radius: 30px;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
+}
+
+input:focus {
+    border-radius: 10px;
+}
+
+input:hover {
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+input[type="file"]::file-selector-button {
+    border: none;
+    padding: 0.5em;
+    background-color: #1c1c1c;
+    cursor: pointer;
+    border-radius: 30px;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
+}
+
+input[type="file"]::file-selector-button:hover {
+    border-radius: 10px;
+    cursor: pointer;
 }
 
 .image {
     margin-bottom: 2em;
 }
 
+hr.thin{
+    width:50%;
+}
+

src/imag/templates/index.j2

@@ -172,6 +172,7 @@
                     </form>
                 </details>
             </div>
+            <hr class="thin">
             {% endfor %}
         {% else %}
             <i>No images found :(</i>