X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=assets%2Fdefault%2Fscss%2Fshaarli.scss;h=286ac83b32b487a3d51837b54dd81b1282d6d76f;hb=9b3c1270bcbe4f8e30e0160da8badd43dd94871a;hp=3d25d2313e5fdd2564a9ed01001531f7f3395d66;hpb=816ffba74b8bebffc620af50994833d783207a50;p=github%2Fshaarli%2FShaarli.git

diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 3d25d231..286ac83b 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -69,20 +69,22 @@ pre {
   font-family: 'Roboto';
   font-weight: 400;
   font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Regular'),
-  url('../fonts/Roboto-Regular.woff2') format('woff2'),
-  url('../fonts/Roboto-Regular.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-weight: 700;
   font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Bold'),
-  url('../fonts/Roboto-Bold.woff2') format('woff2'),
-  url('../fonts/Roboto-Bold.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Bold'),
+    url('../fonts/Roboto-Bold.woff2') format('woff2'),
+    url('../fonts/Roboto-Bold.woff') format('woff');
 }
 
 body,
@@ -375,7 +377,7 @@ body,
 }
 
 @media screen and (max-width: 64em) {
-  .header-search ,
+  .header-search,
   .header-search * {
     visibility: hidden;
   }
@@ -554,7 +556,6 @@ body,
   color: $dark-grey;
   font-size: .9em;
 
-
   a {
     display: inline-block;
     margin: 3px 0;
@@ -616,11 +617,11 @@ body,
     padding: 5px;
     text-decoration: none;
     color: $dark-grey;
-  }
 
-  a.selected {
-    background: var(--main-color);
-    color: $white;
+    &.selected {
+      background: var(--main-color);
+      color: $white;
+    }
   }
 
   input {
@@ -670,6 +671,10 @@ body,
       content: '';
     }
   }
+
+  .search-highlight {
+    background-color: yellow;
+  }
 }
 
 .linklist-item-buttons {
@@ -1268,6 +1273,57 @@ form {
   }
 }
 
+.loading-input {
+  position: relative;
+
+  @keyframes around {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .icon-container {
+    position: absolute;
+    right: 60px;
+    top: calc(50% - 10px);
+  }
+
+  .loader {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    animation: around 5.4s infinite;
+
+    &::after,
+    &::before {
+      content: "";
+      background: $form-input-background;
+      position: absolute;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      border-width: 2px;
+      border-color: #333 #333 transparent transparent;
+      border-style: solid;
+      border-radius: 20px;
+      box-sizing: border-box;
+      top: 0;
+      left: 0;
+      animation: around 0.7s ease-in-out infinite;
+    }
+
+    &::after {
+      animation: around 0.7s ease-in-out 0.1s infinite;
+      background: transparent;
+    }
+  }
+}
+
 // LOGIN
 .login-form-container {
   .remember-me {
@@ -1557,11 +1613,11 @@ form {
   text-align: center;
 
   a {
+    background: $almost-white;
     display: inline-block;
-    margin: 0 15px;
+    padding: 5px;
     text-decoration: none;
-    color: $white;
-    font-weight: bold;
+    color: $dark-grey;
   }
 }
 
@@ -1609,13 +1665,14 @@ form {
 
   > div {
     border-radius: 10px;
-    background: repeating-linear-gradient(
-      -45deg,
-      $almost-white,
-      $almost-white 6px,
-      var(--background-color) 6px,
-      var(--background-color) 12px
-    );
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        $almost-white,
+        $almost-white 6px,
+        var(--background-color) 6px,
+        var(--background-color) 12px
+      );
     width: 0%;
     height: 10px;
   }