X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=assets%2Fdefault%2Fscss%2Fshaarli.scss;h=f3782875335bb03400a2d4fd88b85c6762467ae6;hb=85b972baf67c61ebabf1ce332358e4dfd2456a4e;hp=425a0490f2e69151bee7c54015bfb5cf5079739c;hpb=e85b7a05a177f803ae36ba5c12835313f31177bc;p=github%2Fshaarli%2FShaarli.git

diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 425a0490..f3782875 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1,6 +1,6 @@
-$fa-font-path: '~font-awesome/fonts';
+$fa-font-path: '~fork-awesome/fonts';
 
-@import '~font-awesome/scss/font-awesome';
+@import '~fork-awesome/scss/fork-awesome';
 @import '~purecss/build/pure.css';
 @import '~purecss/build/grids-responsive.css';
 @import '~pure-extras/css/pure-extras.css';
@@ -13,7 +13,7 @@ $dark-grey: #252525;
 $light-grey: #797979;
 $main-green: #1b926c;
 $light-green: #b0ddce;
-$dark-green: #2a4c41;
+$dark-green: #186446;
 $red: #ac2925;
 $orange: #f89406;
 $blue: #0b5ea6;
@@ -25,9 +25,15 @@ $warning-text: #97600d;
 $form-input-border: #d8d8d8;
 $form-input-background: #eee;
 
+:root {
+  --main-color: #{$main-green};
+  --background-color: #{$background-color};
+  --dark-main-color: #{$dark-green};
+}
+
 // General
 body {
-  background: $background-color;
+  background: var(--background-color);
 }
 
 .strong {
@@ -63,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,
@@ -143,7 +151,14 @@ body,
 }
 
 .pure-alert-success {
-  background-color: $main-green;
+  background-color: var(--main-color);
+}
+
+.pure-alert-warning {
+  a {
+    color: $warning-text;
+    font-weight: bold;
+  }
 }
 
 .page-single-alert {
@@ -162,7 +177,7 @@ body,
   top: 0;
   transition: max-height .5s;
   z-index: 999;
-  background: $main-green;
+  background: var(--main-color);
   width: 100%;
   // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
   max-height: 45px;
@@ -315,7 +330,7 @@ body,
   button {
     border: 0;
     border-radius: 2px;
-    background-color: $main-green;
+    background-color: var(--main-color);
     padding: 4px 8px 6px;
     color: $almost-white;
   }
@@ -351,7 +366,7 @@ body,
 .search-tagcloud {
   button {
     &:hover {
-      color: $background-color;
+      color: var(--background-color);
     }
   }
 }
@@ -362,7 +377,7 @@ body,
 }
 
 @media screen and (max-width: 64em) {
-  .header-search ,
+  .header-search,
   .header-search * {
     visibility: hidden;
   }
@@ -374,8 +389,6 @@ body,
   box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
   background: $almost-white;
   padding: 5px 5px 3px 15px;
-  width: 20%;
-  height: 20px;
   color: $dark-grey;
 }
 
@@ -384,7 +397,7 @@ body,
   position: fixed;
   visibility: hidden;
   z-index: 999;
-  background: $main-green;
+  background: var(--main-color);
   padding: 5px 0;
   width: 100%;
   height: 30px;
@@ -406,7 +419,7 @@ body,
     margin: 0 0 5px;
     border: 1px solid $almost-white;
     border-radius: 2px;
-    background: $main-green;
+    background: var(--main-color);
     padding: 4px 0;
     width: 100px;
     height: 28px;
@@ -414,7 +427,7 @@ body,
 
     &:hover {
       background: $almost-white;
-      color: $main-green;
+      color: var(--main-color);
     }
   }
 
@@ -479,6 +492,10 @@ body,
   }
 }
 
+.header-alert-message {
+  text-align: center;
+}
+
 // CONTENT - GENERAL
 .container {
   position: relative;
@@ -540,6 +557,8 @@ body,
   font-size: .9em;
 
   a {
+    display: inline-block;
+    margin: 3px 0;
     padding: 5px 8px;
     text-decoration: none;
   }
@@ -550,7 +569,7 @@ body,
   }
 
   .filter-on {
-    background: $main-green;
+    background: var(--main-color);
     color: $light-green;
   }
 
@@ -598,6 +617,11 @@ body,
     padding: 5px;
     text-decoration: none;
     color: $dark-grey;
+
+    &.selected {
+      background: var(--main-color);
+      color: $white;
+    }
   }
 
   input {
@@ -629,23 +653,22 @@ body,
 }
 
 .linklist-item {
+  position: relative;
   margin: 0 0 10px;
   box-shadow: 1px 1px 3px $light-grey;
   background: $almost-white;
 
   &.private {
-    .linklist-item-title {
-      &::before {
-        @extend %private-border;
-        margin-top: 3px;
-      }
-    }
-
-    .linklist-item-description {
-      &::before {
-        @extend %private-border;
-        height: 100%;
-      }
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: $orange;
+      width: 2px;
+      height: 100%;
+      content: '';
     }
   }
 }
@@ -690,7 +713,7 @@ body,
 
       &:visited {
         .linklist-link {
-          color: $dark-green;
+          color: var(--dark-main-color);
         }
       }
 
@@ -701,7 +724,7 @@ body,
   }
 
   .linklist-link {
-    color: $main-green;
+    color: var(--main-color);
     font-size: 1.1em;
 
     &:hover {
@@ -709,11 +732,19 @@ body,
     }
   }
 
+  .label {
+    font-family: Arial, sans-serif;
+    font-size: .65em;
+  }
+
   .label-private {
     border: solid 1px $orange;
     color: $orange;
-    font-family: Arial, sans-serif;
-    font-size: .65em;
+  }
+
+  .label-sticky {
+    border: solid 1px $blue;
+    color: $blue;
   }
 }
 
@@ -736,7 +767,7 @@ body,
     font-size: 1em;
   }
 
-  .delete-checkbox {
+  .link-checkbox {
     display: none;
   }
 }
@@ -751,6 +782,14 @@ body,
   font-size: 1.3em;
 }
 
+.pin-link {
+  font-size: 1.3em;
+}
+
+.pinned-link {
+  color: $blue !important;
+}
+
 .linklist-item-description {
   position: relative;
   padding: 0 10px;
@@ -760,14 +799,14 @@ body,
 
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
 
     &:hover {
       color: $dark-grey;
     }
 
     &:visited {
-      color: $dark-green;
+      color: var(--dark-main-color);
     }
   }
 }
@@ -844,6 +883,10 @@ body,
   margin: 0 7px;
 }
 
+.ctrl-delete {
+  margin: 0 7px 0 0;
+}
+
 // 64em -> lg
 @media screen and (max-width: 64em) {
   .linklist-item-infos-url {
@@ -861,7 +904,7 @@ body,
   &::before {
     display: block;
     margin: 10px auto;
-    background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+    background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
     width: 80%;
     height: 1px;
     content: '';
@@ -890,7 +933,7 @@ body,
   margin: 15px 5px;
   border: 0;
   box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
-  background: $main-green;
+  background: var(--main-color);
   min-width: 150px;
   height: 35px;
   vertical-align: center;
@@ -914,7 +957,7 @@ body,
     padding: 10px 0;
     width: 100%;
     text-align: center;
-    color: $main-green;
+    color: var(--main-color);
   }
 
   .window-subtitle {
@@ -923,7 +966,7 @@ body,
 
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
     font-weight: bold;
 
     &.button {
@@ -1045,7 +1088,6 @@ body,
   .page-form {
     .submit-buttons {
       .button {
-        display: block;
         margin: auto;
       }
     }
@@ -1204,8 +1246,19 @@ form {
   color: $dark-grey;
 }
 
-.page404-container {
+.page-error-container {
   color: $dark-grey;
+
+  h2 {
+    margin: 70px 0 25px;
+  }
+
+  pre {
+    margin: 0 20%;
+    padding: 20px 0;
+    text-align: left;
+    line-height: .7em;
+  }
 }
 
 // EDIT LINK
@@ -1251,7 +1304,7 @@ form {
 
   .pure-button {
     &:hover {
-      background-color: $main-green;
+      background-color: var(--main-color);
       background-image: none;
       color: $almost-white;
     }
@@ -1335,7 +1388,7 @@ form {
   }
 
   .validate-rename-tag {
-    color: $main-green;
+    color: var(--main-color);
   }
 }
 
@@ -1404,6 +1457,8 @@ form {
   -webkit-transition: opacity 500ms ease-in-out;
   -moz-transition: opacity 500ms ease-in-out;
   -o-transition: opacity 500ms ease-in-out;
+  min-width: 1px;
+  min-height: 1px;
 
   &.b-loaded {
     opacity: 1;
@@ -1431,7 +1486,7 @@ form {
     &::after {
       display: block;
       margin: 10px auto;
-      background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+      background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
       width: 90%;
       height: 1px;
       content: '';
@@ -1481,14 +1536,14 @@ form {
 .daily-entry-description {
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
 
     &:hover {
       text-shadow: 1px 1px $background-linklist-info;
     }
 
     &:visited {
-      color: $dark-green;
+      color: var(--dark-main-color);
     }
   }
 }
@@ -1545,5 +1600,57 @@ form {
 }
 
 .pure-button-shaarli {
-  background-color: $main-green;
+  background-color: var(--main-color);
+}
+
+.progressbar {
+  border-radius: 6px;
+  background-color: var(--main-color);
+  padding: 1px;
+
+  > div {
+    border-radius: 10px;
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        $almost-white,
+        $almost-white 6px,
+        var(--background-color) 6px,
+        var(--background-color) 12px
+      );
+    width: 0%;
+    height: 10px;
+  }
+}
+
+.thumbnails-page-container {
+  .progress-counter {
+    padding: 10px 0 20px;
+  }
+
+  .thumbnail-placeholder {
+    margin: 10px auto;
+    background-color: $light-grey;
+  }
+
+  .thumbnail-link-title {
+    padding-bottom: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// Print rules
+@media print {
+  .shaarli-menu {
+    position: absolute;
+  }
+
+  .search-linklist,
+  .link-count-block,
+  .linklist-item-infos-controls-group,
+  .mobile-buttons {
+    display: none;
+  }
 }