X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=tpl%2Fdefault%2Fcss%2Fshaarli.css;h=27a127bc71b6dd9a14a815c495d3a8e8ef1d7ecc;hb=1df7f8dc8a31ccbfa778df7467bb56dd124ee492;hp=2fd477b3fb38f58a8155f7ebd138c17d3db5cc10;hpb=4d7cd1b0e2ff3c4ac5df03774640164f681b5e96;p=github%2Fshaarli%2FShaarli.git

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 2fd477b3..27a127bc 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
  * General
  */
 body {
-
+    background: url(../img/noise.png) #979797;
 }
 
 .strong {
@@ -13,6 +13,37 @@ body {
     clear: both;
 }
 
+.center {
+    text-align: center;
+}
+
+.label {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+}
+
+pre {
+    max-width: 100%;
+}
+
+@font-face {
+    font-family: 'Roboto Slab';
+    font-weight: 400;
+    font-style: normal;
+    src:
+    local('Fira Sans'),
+    local('Fira-Sans-regular'),
+    url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
+    url('../fonts/Fira-Sans-regular.woff') format('woff');
+}
+
 /**
  * Extends Pure grids responsive to hide items.
  * Use xx-0 to hide an item on xx screen.
@@ -21,19 +52,33 @@ body {
 .pure-u-0 { display: none !important; }
 @media screen and (min-width: 35.5em) {
     .pure-u-sm-0 { display: none !important; }
-    .pure-u-sm-visible { display: inherit !important; }
+    .pure-u-sm-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 48em) {
     .pure-u-md-0 { display: none !important; }
-    .pure-u-md-visible { display: inherit !important; }
+    .pure-u-md-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 64em) {
     .pure-u-lg-0 { display: none !important; }
-    .pure-u-lg-visible { display: inherit !important; }
+    .pure-u-lg-visible { display: inline-block !important; }
 }
 @media screen and (min-width: 80em) {
     .pure-u-xl-0 { display: none !important; }
-    .pure-u-xl-visible { display: inherit !important; }
+    .pure-u-xl-visible { display: inline-block !important; }
+}
+
+.pure-g [class*="pure-u"]{
+    font-family: Roboto Slab, Arial, sans-serif;
+}
+
+/**
+ * Make pure-extras alert closable.
+ */
+.pure-alert-closable .fa-times {
+    float: right;
+}
+.pure-alert-close {
+    cursor: pointer;
 }
 
 /**
@@ -143,13 +188,18 @@ body {
     text-decoration: none;
     z-index: 1;
 
-    /* TODO: font? */
+    font-family: Roboto Slab, Arial, sans-serif;
+    font-size: 1.2em;
 }
 
 #header h1 a:hover {
     color: #d1fff0;
 }
 
+.header-buttons {
+    text-align: right;
+}
+
 #linkcount {
     /* position: fixed; */
     position: absolute;
@@ -184,6 +234,11 @@ body {
     color: #b0ddce;
 }
 
+/* because chrome */
+#search input[type="text"]::-webkit-input-placeholder {
+    color: #b0ddce;
+}
+
 #search button {
     background: transparent;
     border: none;
@@ -194,38 +249,116 @@ body {
     color: #fff;
 }
 
+#header-login-form {
+    height: 0;
+    text-align: center;
+    background: #1b926c;
+    transition: 0.3s;
+}
+
+#header-login-form.open {
+    display: block;
+    height: 30px;
+    padding: 5px 0;
+    box-shadow: 0 1px 1px 1px #797979;
+}
+
+#header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me {
+    margin: 0 0 5px 0;
+    padding: 5px 5px 3px 15px;
+    height: 20px;
+    width: 200px;
+    background: #1fa67a;
+    border: medium none currentColor;
+    border-radius: 25px;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+    color: #b0ddce;
+}
+
+/* because chrome */
+#header-login-form input[type="text"]::-webkit-input-placeholder,
+#header-login-form input[type="password"]::-webkit-input-placeholder
+{
+    color: #b0ddce;
+}
+
+#header-login-form .remember-me {
+    display: inline-block;
+    width: auto;
+    padding: 5px 20px 3px 20px;
+    cursor: pointer;
+}
+
+#header-login-form .remember-me label, #header-login-form .remember-me input {
+    cursor: pointer;
+}
+
+#header-login-form input[type="submit"] {
+    display: inline-block;
+    margin: 0 0 5px 0;
+    height: 25px;
+    width: 100px;
+    background: #0C7653;
+    border: medium none currentColor;
+    border-radius: 25px;
+    box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
+    color: #b0ddce;
+}
+
+#header-login-form input, #header-login-form .remember-me {
+    transition: visibility 1s, opacity 1s;
+    visibility: hidden;
+    opacity: 0;
+}
+
+#header-login-form.open input, #header-login-form.open .remember-me {
+    visibility: visible;
+    opacity: 1;
+}
+
+.new-version-message {
+    text-align: center;
+}
+
+.new-version-message a {
+    color: rgb(151, 96, 13);
+    font-weight: bold;
+}
+
 /**
  * CONTENT - GENERAL
  */
 #content {
     position: relative;
-    box-shadow: 0 -2px 1em #797979;
+    /* Hack-ish way to only shadow the top part. */
+    box-shadow: 0 -20px 20px -20px #797979;
     z-index: 2;
     background: url(../img/noise.png) #979797;
 }
 
-/**
- * CONTENT - LINKLIST PAGING
- */
-@media screen and (min-width: 35.5em) {
-    .linklist-paging {
+@media screen and (max-width: 64em) {
+    #content {
         margin: 2.1em 0 0 0;
     }
 }
 
 @media screen and (min-width: 64em) {
-    .linklist-paging {
-        margin: 0;
+    #content {
+        /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
+        margin-top: -4px;
     }
 }
 
+/**
+ * CONTENT - LINKLIST PAGING
+ * 64em -> lg
+ */
+
+
 .linklist-filters {
     margin: 10px 0;
     color: #252525;
-}
-
-.linklist-filters span {
-    margin: 0 0 0 10px;
+    font-size: 0.9em;
 }
 
 .linklist-filters a {
@@ -262,6 +395,7 @@ body {
     margin: 10px 0;
     text-align: right;
     color: #252525;
+    font-size: 0.9em;
 }
 
 .linksperpage a {
@@ -279,13 +413,362 @@ body {
 
 .linksperpage input[type="text"] {
     width: 28px;
-    height: 20px;
-    margin: 0 0 5px 0;
+    height: 16px;
+    margin: 0;
     padding: 3px 5px 3px 8px;
     background: #c8c8c8;
     border: medium none currentColor;
+    --border-radius: 25px;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+    color: #252525;
+    font-size: 0.8em;
+}
+
+/**
+ * CONTENT - LINKLIST ITEMS
+ */
+.linklist-item {
+    margin: 15px 0;
+    background: #f5f5f5;
+    box-shadow: 2px 2px 0.5em #797979;
+}
+
+.linklist-item-title, .linklist-item-title h2  {
+    margin: 0;
+    word-wrap: break-word;
+}
+
+.linklist-item-title {
+    background: #20b988 url(../img/noise.png);
+    border-bottom: 1px solid #1b926c;
+    box-shadow: 1px 1px 0.2em #1b926c;
+}
+
+.linklist-item-title h2 {
+    padding: 3px 10px 0 10px;
+    line-height: 25px;
+}
+
+.linklist-item-title a {
+    font-size: 0.7em;
+    color: #d0fff0;
+    text-decoration: none;
+    vertical-align: middle;
+    font-family: Roboto Slab, Arial, sans-serif;
+}
+
+.linklist-item-title .linklist-link:visited {
+    color: #ddd;
+}
+
+.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
+    color: #fff;
+}
+
+
+.linklist-item-title .label-private {
+    border: solid 1px #d0fff0;
+    font-family: Arial, sans-serif;
+    font-size: 0.65em;
+}
+
+.linklist-item-title .fold-button {
+    display: none;
+}
+
+.linklist-item-editbuttons {
+    float: right;
+    padding: 5px;
+}
+
+.linklist-item-editbuttons a {
+    font-size: 1em;
+}
+
+.linklist-item-description {
+    padding: 10px;
+    font-family: Roboto Slab, Arial, sans-serif;
+    word-wrap: break-word;
+}
+
+.linklist-item-description a {
+    text-decoration: none;
+    color: #1b926c;
+}
+
+.linklist-item-description a:hover {
+    text-shadow: 1px 1px #ddd;
+}
+
+.linklist-item-description a:visited {
+    color: #20b988;
+}
+
+.linklist-item-thumbnail {
+    padding: 10px;
+    float: left;
+}
+
+.linklist-item-infos {
+    padding: 5px 5px 0 5px;
+    background: #ddd url(../img/noise.png);
+    border-top: 1px solid #989898;
+    box-shadow: 1px -1px 0.2em #989898;
+    color: #252525;
+}
+
+.linklist-item-infos a {
+    color: #505050;
+    text-decoration: none;
+}
+
+.linklist-item-infos a:hover {
+    color: #000;
+}
+
+.linklist-item-tags {
+    margin: 0 0 5px 0;
+    font-size: 0.8em;
+}
+
+.linklist-item-infos .label-tag {
+    border: 1px solid #505050;
+    font-size: 0.9em;
+}
+
+.linklist-item-infos .label-tag:hover {
+    border: 1px solid #000;
+}
+
+.linklist-item-infos-dateblock {
+    font-size: 0.9em;
+}
+
+.linklist-plugin-icon {
+    width: 13px;
+    height: 13px;
+}
+
+.linklist-item-infos-url {
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.8em;
+}
+
+/** 64em -> lg **/
+@media screen and (max-width: 64em) {
+    .linklist-item-infos-url {
+        text-align: left;
+    }
+}
+
+/**
+ * Footer
+ */
+#footer {
+    margin: 20px 0;
+    padding: 5px;
+    text-align: center;
+    color: #252525;
+}
+
+#footer:before {
+    display: block;
+    content:"";
+    background: linear-gradient(to right, #949393, #252525, #949393);
+    height: 1px;
+    width: 80%;
+    margin: 10px auto;
+}
+
+#footer a {
+    color: #252525;
+}
+
+/**
+ * Login page
+ */
+.page-form {
+    margin: 20px 0 0 0;
+    background: url(../img/noise.png) #1fa67a;
+    border-radius: 5px;
+    box-shadow: 1px 1px 2px #797979;
+}
+
+.page-form h2 {
+    margin: 0 0 10px 0;
+    padding: 10px 0;
+    width: 100%;
+    color: #b0ddce;
+    background: #1b926c;
+    text-align: center;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid #797979;
+}
+
+.page-form div {
+    width: 100%;
+    text-align: center;
+}
+
+.page-form input[type="text"], .page-form input[type="password"] {
+    margin: 10px 0;
+    padding: 5px 5px 3px 15px;
+    height: 30px;
+    width: 80%;
+    background: #1b926c;
+    border: medium none currentColor;
     border-radius: 25px;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+    color: #b0ddce;
+}
+
+/* because chrome */
+.page-form input[type="text"]::-webkit-input-placeholder,
+.page-form input[type="password"]::-webkit-input-placeholder {
+    color: #b0ddce;
+}
+
+#login-form .remember-me {
+    margin: 5px 0;
+    color: #b0ddce;
+    font-weight: bold;
+}
+
+.page-form input[type="submit"] {
+    margin: 10px 0;
+    height: 35px;
+    width: 150px;
+    background: #1b926c;
+    border: medium none currentColor;
+    border-radius: 25px;
+    box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #b0ddce;
+}
+
+#page404 {
+    color: #3f3f3f;
+}/**
+ * CONTENT - LINKLIST ITEMS
+ */
+.linklist-item {
+    margin: 15px 0;
+    background: #f5f5f5;
+    box-shadow: 2px 2px 0.5em #797979;
+}
+
+.linklist-item-title, .linklist-item-title h2  {
+    margin: 0;
+}
+
+.linklist-item-title {
+    background: #20b988 url(../img/noise.png);
+    border-bottom: 1px solid #1b926c;
+    box-shadow: 1px 1px 0.2em #1b926c;
+}
+
+.linklist-item-title h2 {
+    padding: 3px 10px 0 10px;
+    line-height: 25px;
+}
+
+.linklist-item-title a {
+    font-size: 0.7em;
+    color: #d0fff0;
+    text-decoration: none;
+    vertical-align: middle;
+    font-family: Roboto Slab, Arial, sans-serif;
+}
+
+.linklist-item-title .linklist-link:visited {
+    color: #ddd;
+}
+
+.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
+    color: #fff;
+}
+
+
+.linklist-item-title .label-private {
+    border: solid 1px #d0fff0;
+    font-family: Arial, sans-serif;
+    font-size: 0.65em;
+}
+
+.linklist-item-title .fold-button {
+    display: none;
+}
+
+.linklist-item-editbuttons {
+    float: right;
+    padding: 5px;
+}
+
+.linklist-item-editbuttons a {
+    font-size: 1em;
+}
+
+.linklist-item-description {
+    padding: 10px;
+    font-family: Roboto Slab, Arial, sans-serif;
+}
+
+.linklist-item-description a {
+    text-decoration: none;
+    color: #1b926c;
+}
+
+.linklist-item-description a:hover {
+    text-shadow: 1px 1px #ddd;
+}
+
+.linklist-item-description a:visited {
+    color: #20b988;
+}
+
+.linklist-item-infos {
+    padding: 5px;
+    background: #ddd url(../img/noise.png);
+    border-top: 1px solid #989898;
+    box-shadow: 1px -1px 0.2em #989898;
     color: #252525;
     font-size: 0.8em;
-}
\ No newline at end of file
+}
+
+.linklist-item-infos a {
+    color: #505050;
+    text-decoration: none;
+}
+
+.linklist-item-infos a:hover {
+    color: #000;
+}
+
+.linklist-item-tags {
+    margin: 0 0 5px 0;
+}
+
+.linklist-item-infos .label-tag {
+    border: 1px solid #505050;
+    font-size: 0.9em;
+}
+
+.linklist-item-infos .label-tag:hover {
+    border: 1px solid #000;
+}
+
+.linklist-plugin-icon {
+    width: 13px;
+    height: 13px;
+}
+
+.linklist-item-infos-url {
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}