From c69585f30350876c3f9a9b090ff1165c3ec98b79 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Thu, 10 May 2018 13:25:07 +0200 Subject: Reformat default theme SCSS to match SASS rules --- assets/default/scss/shaarli.scss | 2046 +++++++++++++++++++++----------------- 1 file changed, 1117 insertions(+), 929 deletions(-) (limited to 'assets/default/scss') diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 25440de1..09d5efbe 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -1,1357 +1,1545 @@ -$fa-font-path: "~font-awesome/fonts"; +$fa-font-path: '~font-awesome/fonts'; -@import "~font-awesome/scss/font-awesome.scss"; +@import '~font-awesome/scss/font-awesome'; @import '~purecss/build/pure.css'; @import '~purecss/build/grids-responsive.css'; @import '~pure-extras/css/pure-extras.css'; @import '~awesomplete/awesomplete.css'; -/** - * General - */ +$white: #fff; +$black: #000; +$almost-white: #f5f5f5; +$dark-grey: #252525; +$light-grey: #797979; +$main-green: #1b926c; +$light-green: #b0ddce; +$dark-green: #2a4c41; +$red: #ac2925; +$orange: #f89406; +$blue: #0b5ea6; +$background-color: #d0d0d0; +$background-linklist-info: #ddd; +$light-shadow: rgba(255, 255, 255, .078); +$dark-shadow: rgba(0, 0, 0, .298); +$warning-text: #97600d; +$form-input-border: #d8d8d8; +$form-input-background: #eee; + +// General body { - background: #d0d0d0; + background: $background-color; } .strong { - font-weight: bold; + font-weight: bold; } .clear { - clear: both; + clear: both; } .center { - text-align: center; - margin: auto; + margin: auto; + 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; + display: inline-block; + border-radius: .25rem; + padding: .25em .4em; + vertical-align: baseline; + text-align: center; + line-height: 1; + white-space: nowrap; + font-size: 75%; + font-weight: 700; } pre { - max-width: 100%; + max-width: 100%; } @font-face { - 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'); + 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'); } @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'); -} - -body, .pure-g [class*="pure-u"] { - font-family: Roboto, Arial, sans-serif; -} - -/** - * Extends Pure grids responsive to hide items. - * Use xx-0 to hide an item on xx screen. - * Display it at any level with xx-visible. - */ -.pure-u-0 { display: none !important; } + 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'); +} + +body, +.pure-g [class*='pure-u'] { + font-family: Roboto, Arial, sans-serif; +} + +// Extends Pure grids responsive to hide items. +// Use xx-0 to hide an item on xx screen. +// Display it at any level with xx-visible. +.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: inline-block !important; } + .pure-u-sm-0 { + display: none !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: inline-block !important; } + .pure-u-md-0 { + display: none !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: inline-block !important; } + .pure-u-lg-0 { + display: none !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: inline-block !important; } + .pure-u-xl-0 { + display: none !important; + } + + .pure-u-xl-visible { + display: inline-block !important; + } } -/** - * Make pure-extras alert closable. - */ -.pure-alert-closable .fa-times { +// Make pure-extras alert closable. +.pure-alert-closable { + .fa-times { float: right; + } } + .pure-alert-close { - cursor: pointer; + cursor: pointer; } .pure-alert-success { - background-color: #1b926c; + background-color: $main-green; } -.anchor:target { +.anchor { + &:target { padding-top: 40px; + } } -/** - * MENU - **/ + +// MENU .shaarli-menu { - position: fixed; - top: 0; - width: 100%; - --height: 50px; - background: #1b926c; - -webkit-font-smoothing: antialiased; - /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ - max-height: 45px; - transition: max-height 0.5s; - overflow: hidden; - z-index: 999; + position: fixed; + top: 0; + transition: max-height .5s; + z-index: 999; + background: $main-green; + width: 100%; + // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 + max-height: 45px; + overflow: hidden; + -webkit-font-smoothing: antialiased; + + &.open { + transition: max-height .75s; + max-height: 500px; + } } -/* Chrome bugfix: with 100% height, it only displays the first element. */ .pure-menu-item { - height: 45px; -} - -.shaarli-menu.open { - max-height: 500px; - transition: max-height 0.75s; + // Chrome bugfix: with 100% height, it only displays the first element. + height: 45px; + + &:hover { + &::after { + display: block; + margin: -4px auto 0; + background: $white; + width: 100%; + height: 4px; + content: ''; + } + } } .head-logo { - float: left; - margin: 0 5px 0 0; + float: left; + margin: 0 5px 0 0; } -.pure-menu-link, -.pure-menu-link:visited, -.pure-menu-selected .pure-menu-link, -.pure-menu-selected .pure-menu-link:visited { - padding: 0.8em 1em; - color: #f5f5f5; +%menu-link { + padding: .8em 1em; + color: $almost-white; } -.pure-menu-link:hover, .pure-menu-link:focus, -.pure-menu-selected .pure-menu-link:hover, -.pure-menu-selected .pure-menu-link:focus { - color: #fff; - background: transparent; +%menu-link-hover { + background: transparent; + color: $white; } -.pure-menu-item:hover::after { - margin: -4px auto 0 auto; - display: block; - content:""; - background: #fff; - height: 4px; - width: 100%; +.pure-menu-link { + @extend %menu-link; + + &:visited { + @extend %menu-link; + } + + &:hover, + &:focus { + @extend %menu-link-hover; + } } -.menu-toggle { - width: 34px; - height: 45px; - position: absolute; - top: 5px; - right: 0; - display: none; +.pure-menu-selected { + .pure-menu-link { + @extend %menu-link; + + &:visited { + @extend %menu-link; + } + + &:hover, + &:focus { + @extend %menu-link-hover; + } + } } -.menu-toggle .bar { - background-color: #b0ddce; +.menu-toggle { + display: none; + position: absolute; + top: 5px; + right: 0; + width: 34px; + height: 45px; + + .bar { display: block; - width: 20px; - height: 2px; - border-radius: 100px; position: absolute; top: 18px; right: 7px; - transition: all 0.5s; -} + border-radius: 100px; + background-color: $light-green; + width: 20px; + height: 2px; + transition-duration: .5s; -.menu-toggle .bar:first-child { - transform: translateY(-6px); -} + &:first-child { + transform: translateY(-6px); + } + } -.menu-toggle.x .bar { - transform: rotate(45deg); -} + &.x { + .bar { + transform: rotate(45deg); -.menu-toggle.x .bar:first-child { - transform: rotate(-45deg); + &:first-child { + transform: rotate(-45deg); + } + } + } } @media screen and (max-width: 64em) { - .menu-toggle { - display: block; - } + .menu-toggle { + display: block; + } } .header-buttons { - text-align: right; + text-align: right; } .linkcount { - color: #252525; - font-size: 0.8em; + color: $dark-grey; + font-size: .8em; } @media screen and (min-width: 64em) { - .linkcount { - position: absolute; - right: 5px; + .linkcount { + position: absolute; + right: 5px; + } +} + +.searchform-block { + width: 100%; + text-align: center; + + input { + &[type='text'] { + border: medium none currentColor; + border-radius: 2px; + box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset; + background: $almost-white; + padding: 0 5px; + width: 260px; + height: 30px; + color: $dark-grey; + + &::-webkit-input-placeholder { + color: $light-grey; + } } -} - -#search, #search-linklist, #search-tagcloud { - text-align: center; - width: 100%; -} + } -#search input[type="text"], #search-linklist input[type="text"] { - padding: 0 5px; - height: 30px; - width: 260px; - background: #f5f5f5; - border: medium none currentColor; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; + button { + border: 0; border-radius: 2px; - color: #252525; -} -@media screen and (max-width: 64em) { - .searchform { - max-width: 260px; - margin: 0 auto; - } -} - -/* because chrome */ -#search input[type="text"]::-webkit-input-placeholder, -#search-linklist input[type="text"]::-webkit-input-placeholder { - color: #777777; + background-color: $main-green; + padding: 4px 8px 6px; + color: $almost-white; + } } -#search button, -#search-tagcloud button, -#search-linklist button { - padding: 4px 8px 6px 8px; - background-color: #1B926C; - color: #f5f5f5; - border: none; - border-radius: 2px; +@media screen and (max-width: 64em) { + .searchform { + margin: 0 auto; + max-width: 260px; + } } -#search-tagcloud button { +.search-tagcloud { + button { width: 90%; + } } @media screen and (max-width: 64em) { - #search-linklist button { - width: 100%; + .search-linklist { + button { + width: 100%; } - #search-linklist .awesomplete { - margin: 5px 0; - } -} -#search button:hover, -#search-linklist button:hover, -#search-tagcloud button:hover { - color: #d0d0d0; -} - -#search, -#search-linklist { - padding: 6px 0; -} - -@media screen and (max-width: 64em) { - #search, #search * { - visibility: hidden; + .awesomplete { + margin: 5px 0; } + } } -.subheader-form a.button { - color: #f5f5f5; - font-weight: bold; - text-decoration: none; - border: 2px solid #f5f5f5; - border-radius: 5px; - padding: 3px 10px; +.header-search, +.search-linklist, +.search-tagcloud { + button { + &:hover { + color: $background-color; + } + } } -.linklist-item-editbuttons .delete-checkbox { - display: none; +.header-search, +.search-linklist { + padding: 6px 0; } -#header-login-form input[type="text"], #header-login-form input[type="password"] { - width: 200px; +@media screen and (max-width: 64em) { + .header-search , + .header-search * { + visibility: hidden; + } } -/* because chrome */ -#header-login-form input[type="text"]::-webkit-input-placeholder, -#header-login-form input[type="password"]::-webkit-input-placeholder { - color: #777777; +%subheader-form-input { + border: medium none currentColor; + border-radius: 2px; + 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; } .subheader-form { - visibility: hidden; - position: fixed; - width: 100%; - text-align: center; - background: #1b926c; - display: block; - z-index: 999; - height: 30px; - padding: 5px 0; -} - -@media screen and (min-width: 64em) { - .subheader-form.open, .subheader-form.open * { - visibility: visible; + display: block; + position: fixed; + visibility: hidden; + z-index: 999; + background: $main-green; + padding: 5px 0; + width: 100%; + height: 30px; + text-align: center; + + input { + &[type='text'], + &[type='password'] { + @extend %subheader-form-input; + + &::-webkit-input-placeholder { + color: $dark-grey; + } } -} + } -.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { - padding: 5px 5px 3px 15px; - height: 20px; - width: 20%; - background: #f5f5f5; - border: medium none currentColor; + &[type='submit'] { + display: inline-block; + margin: 0 0 5px; + border: 1px solid $almost-white; border-radius: 2px; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; - color: #252525; -} + background: $main-green; + padding: 4px 0; + width: 100px; + height: 28px; + color: $almost-white; -/* because chrome */ -.subheader-form input[type="text"]::-webkit-input-placeholder, -.subheader-form input[type="password"]::-webkit-input-placeholder -{ - color: #252525; -} + &:hover { + background: $almost-white; + color: $main-green; + } + } + + .remember-me { + @extend %subheader-form-input; -.subheader-form .remember-me { display: inline-block; - width: auto; - padding: 5px 20px 3px 20px; cursor: pointer; -} + padding: 5px 20px 3px; + width: auto; -.subheader-form .remember-me label, .subheader-form .remember-me input { - cursor: pointer; + label, + input { + cursor: pointer; + } + } + + a { + &.button { + border: 2px solid $almost-white; + border-radius: 5px; + padding: 3px 10px; + text-decoration: none; + color: $almost-white; + font-weight: bold; + } + } } -.subheader-form input[type="submit"] { - display: inline-block; - margin: 0 0 5px 0; - padding: 4px 0 4px 0; - height: 28px; - width: 100px; - background: #1b926c; - border: 1px solid #f5f5f5; - color: #f5f5f5; - border-radius: 2px; +.header-login-form { + input { + &[type='text'], + &[type='password'] { + width: 200px; + + // because chrome + &::-webkit-input-placeholder { + color: $light-grey; + } + } + } } -.subheader-form input[type="submit"]:hover { - background: #f5f5f5; - color: #1b926c; +@media screen and (min-width: 64em) { + .subheader-form { + &.open { + visibility: visible; + + * { + visibility: visible; + } + } + } } .new-version-message { - text-align: center; -} + text-align: center; -.new-version-message a { - color: rgb(151, 96, 13); + a { + color: $warning-text; font-weight: bold; + } } -/** - * CONTENT - GENERAL - */ -#content { - position: relative; - z-index: 2; - margin-top: 45px; +// CONTENT - GENERAL +.container { + position: relative; + z-index: 2; + margin-top: 45px; } -/** - * Plugins additional forms - */ +// Plugins additional forms .toolbar-plugin { - margin: 5px 0; - text-align: center; -} - -.toolbar-plugin input[type="text"] { - padding: 0 5px; - height: 30px; - width: 300px; - background: #f5f5f5; - border: medium none currentColor; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; - border-radius: 2px; - color: #252525; -} - -/* because chrome */ -.toolbar-plugin input[type="text"]::-webkit-input-placeholder { - color: #777777; -} - -.toolbar-plugin input[type="submit"] { - padding: 0 10px; - height: 30px; - background: #f5f5f5; - border: medium none currentColor; - border-radius: 2px; - color: #252525; -} + margin: 5px 0; + text-align: center; + + input { + &[type='text'] { + border: medium none currentColor; + border-radius: 2px; + box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset; + background: $almost-white; + padding: 0 5px; + width: 300px; + height: 30px; + color: $dark-grey; + + &::-webkit-input-placeholder { + color: $light-grey; + } + } -.toolbar-plugin input[type="submit"]:hover { - background: #fff; + &[type='submit'] { + border: medium none currentColor; + border-radius: 2px; + background: $almost-white; + padding: 0 10px; + height: 30px; + color: $dark-grey; + + &:hover { + background: $white; + } + } + } } @media screen and (max-width: 64em) { - .toolbar-plugin input[type="text"] { + .toolbar-plugin { + input { + &[type='text'] { width: 70%; - + } } + } } -/** - * CONTENT - LINKLIST PAGING - * 64em -> lg - */ +// CONTENT - LINKLIST PAGING +// 64em -> lg .linklist-filters { - margin: 5px 0; - color: #252525; - font-size: 0.9em; -} + margin: 5px 0; + color: $dark-grey; + font-size: .9em; -.linklist-filters a { + a { padding: 5px 8px; text-decoration: none; -} + } -.linklist-filters .filter-off { - color: #252525; - background: #f5f5f5; -} + .filter-off { + background: $almost-white; + color: $dark-grey; + } -.linklist-filters .filter-on { - color: #b0ddce; - background: #1b926c; -} + .filter-on { + background: $main-green; + color: $light-green; + } -.linklist-filters .filter-block { - color: #f5f5f5; - background: #ac2925; + .filter-block { + background: $red; + color: $almost-white; + } } .linklist-pages { - margin: 5px 0; - color: #252525; - text-align: center; -} + margin: 5px 0; + text-align: center; + color: $dark-grey; -.linklist-pages a { - color: #252525; + a { text-decoration: none; + color: $dark-grey; + + &:hover { + color: $white; + } + } } -.linklist-pages a:hover { - color: #fff; +%linksperpage-button { + display: inline-block; + width: 20px; + text-align: center; } .linksperpage { - margin: 5px 0; - text-align: right; - color: #252525; - font-size: 0.9em; -} + margin: 5px 0; + text-align: right; + color: $dark-grey; + font-size: .9em; -.linksperpage a { - padding: 5px 5px; - text-decoration: none; - color: #252525; - background: #f5f5f5; -} + form { + display: inline; + } -.linksperpage a, .linksperpage input[type="text"] { - display: inline-block; - width: 20px; - text-align: center; -} + a { + @extend %linksperpage-button; -.linksperpage form { - display: inline; + background: $almost-white; + padding: 5px; + text-decoration: none; + color: $dark-grey; + } + + input { + &[type='text'] { + @extend %linksperpage-button; + + margin: 0; + border: medium none currentColor; + background: $almost-white; + padding: 4px 5px 3px 8px; + height: 20px; + color: $dark-grey; + font-size: .8em; + } + } } -.linksperpage input[type="text"] { - height: 20px; - margin: 0; - padding: 4px 5px 3px 8px; - background: #f5f5f5; - border: medium none currentColor; - color: #252525; - font-size: 0.8em; +// CONTENT - LINKLIST ITEMS +%private-border { + display: block; + position: absolute; + top: 0; + left: 3px; + z-index: 1; + background: $orange; + width: 2px; + height: 96%; + content: ''; } -/** - * CONTENT - LINKLIST ITEMS - */ .linklist-item { - margin: 0 0 10px 0; - background: #f5f5f5; - box-shadow: 1px 1px 3px #797979; + 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%; + } + } + } } .linklist-item-buttons { - background: transparent; - position: relative; - width: 23px; - z-index: 99; + position: relative; + z-index: 99; + background: transparent; + width: 23px; } .linklist-item-buttons-right { - float: right; - margin-right: -25px; + float: right; + margin-right: -25px; } .linklist-item-buttons * { - display: block; - float: left; - width:100%; - margin: auto; - text-align: center; -} - -.linklist-item-title, .linklist-item-title h2 { - margin: 0; - word-wrap: break-word; + display: block; + float: left; + margin: auto; + width: 100%; + text-align: center; } .linklist-item-title { - position: relative; - background: #f5f5f5; -} + position: relative; + margin: 0; + background: $almost-white; + word-wrap: break-word; -.linklist-item-title h2 { - padding: 3px 10px 0 10px; + h2 { + margin: 0; + padding: 3px 10px 0; line-height: 30px; -} + word-wrap: break-word; -.linklist-item-title h2 a { - font-size: 0.7em; - color: #252525; - text-decoration: none; - vertical-align: middle; -} + a { + vertical-align: middle; + text-decoration: none; + color: $dark-grey; + font-size: .7em; + + &:visited { + .linklist-link { + color: $dark-green; + } + } + + &:hover { + color: $dark-grey; + } + } + } -.linklist-item-title .linklist-link { + .linklist-link { + color: $main-green; font-size: 1.1em; - color: #1b926c; -} - -.linklist-item-title h2 a:visited .linklist-link { - color: #2a4c41; -} - -.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{ - color: #252525; -} + &:hover { + color: $dark-grey; + } + } -.linklist-item-title .label-private { - border: solid 1px #F89406; + .label-private { + border: solid 1px $orange; + color: $orange; font-family: Arial, sans-serif; - font-size: 0.65em; - color: #F89406; + font-size: .65em; + } } .fold-button { - display: none; - color: #252525; + display: none; + color: $dark-grey; } .linklist-item-editbuttons { - float: right; - padding: 8px 5px; -} + float: right; + padding: 8px 5px; -.linklist-item-editbuttons * { + * { display: block; float: left; margin: 0 1px; -} + } -.linklist-item-editbuttons a { + a { font-size: 1em; + } + + .delete-checkbox { + display: none; + } } .edit-link { - font-size: 1.2em; - color: #0b5ea6; + color: $blue; + font-size: 1.2em; } .delete-link { - font-size: 1.3em; - color: #ac2925 !important; + color: $red !important; + font-size: 1.3em; } .linklist-item-description { - position: relative; - padding: 0 10px; - word-wrap: break-word; - color: #252525; - line-height: 1.3em; -} + position: relative; + padding: 0 10px; + line-height: 1.3em; + color: $dark-grey; + word-wrap: break-word; -.linklist-item-description a { + a { text-decoration: none; - color: #1b926c; -} + color: $main-green; -.linklist-item-description a:hover { - color: #252525; -} + &:hover { + color: $dark-grey; + } -.linklist-item-description a:visited { - color: #14553f; + &:visited { + color: $dark-green; + } + } } .linklist-item-thumbnail { - position: relative; - padding: 0 0 0 5px; - margin: 0; - float: right; - z-index: 50; - height: 90px; -} - -.linklist-item.private .linklist-item-title::before, -.linklist-item.private .linklist-item-description::before { - position: absolute; - left: 3px; - top: 0; - display: block; - content:""; - background: #F89406; - height: 96%; - width: 2px; - z-index: 1; -} - -.linklist-item.private .linklist-item-description::before { - height: 100%; -} - -.linklist-item.private .linklist-item-title::before { - margin-top: 3px; + position: relative; + float: right; + z-index: 50; + margin: 0; + padding: 0 0 0 5px; + height: 90px; } .linklist-item-infos { - padding: 4px 8px 4px 8px; - background: #ddd; - color: #252525; -} + background: $background-linklist-info; + padding: 4px 8px; + color: $dark-grey; -.linklist-item-infos a { - color: #252525; + a { text-decoration: none; -} + color: $dark-grey; -.linklist-item-infos a:hover { - color: #000; -} + &:hover { + color: $black; + } + } -.linklist-item-infos .linklist-item-tags { - font-size: 0.8em; -} + .linklist-item-tags { + font-size: .8em; + } -.linklist-item-infos .label-tag { + .label-tag { font-size: 1em; + } + + .mobile-buttons { + text-align: right; + } + + .linklist-plugin-icon { + display: inline-block; + margin: 0 2px; + width: 16px; + height: 16px; + } } .linklist-item-infos-dateblock { - font-size: 0.9em; + font-size: .9em; } .linklist-plugin-icon { - width: 13px; - height: 13px; + width: 13px; + height: 13px; } .linklist-item-infos-url { - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.8em; - height:23px; - line-height:23px; -} - -.linklist-item-infos .mobile-buttons { - text-align: right; -} - -.linklist-item-infos .linklist-plugin-icon { - display: inline-block; - margin: 0 2px; - width: 16px; - height: 16px; + height: 23px; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + line-height: 23px; + white-space: nowrap; + font-size: .8em; } .linklist-item-infos-controls-group { - display: inline-block; - border-right: 1px solid #5d5d5d; - padding-right: 6px; + display: inline-block; + border-right: 1px solid $light-grey; + padding-right: 6px; } .ctrl-edit { - margin: 0 7px; + margin: 0 7px; } -/** 64em -> lg **/ +// 64em -> lg @media screen and (max-width: 64em) { - .linklist-item-infos-url { - text-align: left; - } + .linklist-item-infos-url { + text-align: left; + } } -/** - * Footer - */ -#footer { - margin: 20px 0; - padding: 5px; - text-align: center; - color: #252525; -} +// Footer +.footer-container { + margin: 20px 0; + padding: 5px; + text-align: center; + color: $dark-grey; -#footer:before { + &::before { display: block; - content:""; - background: linear-gradient(to right, #949393, #252525, #949393); - height: 1px; - width: 80%; margin: 10px auto; + background: linear-gradient(to right, $background-color, $dark-grey, $background-color); + width: 80%; + height: 1px; + content: ''; + } + + a { + color: $dark-grey; + } +} + +// PAGE FORM +%page-form-input { + margin: 10px 0; + border: solid 1px $form-input-border; + border-radius: 2px; + background: $form-input-background; + padding: 5px 5px 3px 15px; + width: 90%; + height: 35px; + color: $dark-grey; + box-sizing: border-box; +} + +%page-form-button { + display: inline-block; + 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; + min-width: 150px; + height: 35px; + vertical-align: center; + text-decoration: none; + line-height: 35px; + color: $almost-white; + font-size: 1.2em; + font-weight: normal; } -#footer a { - color: #252525; -} - -/** - * PAGE FORM - */ .page-form { - margin: 20px 0 0 0; - background: #f5f5f5; - box-shadow: 1px 1px 2px #797979; - color: #252525; - overflow: hidden; -} - -.page-form .window-title { - margin: 0 0 10px 0; + margin: 20px 0 0; + box-shadow: 1px 1px 2px $light-grey; + background: $almost-white; + overflow: hidden; + color: $dark-grey; + + .window-title { + margin: 0 0 10px; + background: $almost-white; padding: 10px 0; width: 100%; - color: #1b926c; - background: #f5f5f5; text-align: center; -} + color: $main-green; + } -.page-form .window-subtitle { + .window-subtitle { text-align: center; -} + } -.page-form a { - color: #1b926c; - font-weight: bold; + a { text-decoration: none; -} + color: $main-green; + font-weight: bold; -.page-form p { - padding: 5px 10px; + &.button { + @extend %page-form-button; + } + } + + p { margin: 0; -} + padding: 5px 10px; + } -.page-form input[type="text"], -.page-form input[type="password"], -.page-form textarea { - box-sizing: border-box; - margin: 10px 0; - padding: 5px 5px 3px 15px; - height: 35px; - width: 90%; - background: #eeeeee; - border: solid 1px #d8d8d8; - border-radius: 2px; - color: #252525; -} + input { + &[type='text'] { + @extend %page-form-input; + + &::-webkit-input-placeholder { + color: $light-grey; + } + } + + &[type='password'] { + @extend %page-form-input; + + &::-webkit-input-placeholder { + color: $light-grey; + } + } + + &[type='submit'] { + @extend %page-form-button; + } + } + + textarea { + @extend %page-form-input; -.page-form textarea { - min-height: 240px; padding: 15px 5px 3px 15px; + min-height: 240px; resize: vertical; overflow-y: auto; - word-wrap:break-word -} + word-wrap: break-word; + } -/* because chrome */ -.page-form input[type="text"]::-webkit-input-placeholder, -.page-form input[type="password"]::-webkit-input-placeholder { - color: #777777; -} + select { + color: $dark-grey; + } -.page-form input[type="submit"], .page-form a.button { - margin: 15px 5px; - height: 35px; - line-height: 35px; - width: 150px; - background: #1b926c; - color: #f5f5f5; - border: none; - box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd; - font-size: 1.2em; - text-decoration: none; - vertical-align: center; - font-weight: normal; - display: inline-block; -} + .button { + &.button-red { + background: $red; + } + } + .submit-buttons { + margin-bottom: 10px; + } -.page-form .button.button-red { - background: #ac2925; -} + section { + margin: 10px 0 25px; + } -.page-form .submit-buttons { - margin-bottom: 10px; -} + table, + th, + td { + border-width: 1px 0; + border-style: solid; + border-color: $light-grey; + } -@media screen and (min-width: 64em) { - .page-form .submit-buttons { - position: relative; + th, + td { + padding: 5px; + } + + table { + margin: auto; + width: 90%; + + .order { + text-decoration: none; + color: $dark-grey; } + } - .page-form .submit-buttons .button.button-red { - position: absolute; - right: 5%; + .awesomplete { + width: 90%; + + input { + width: 100%; + } + } + + div { + .awesomplete { + > ul { + color: $black; + } } + } +} + +@media screen and (min-width: 64em) { + .page-form { + .submit-buttons { + position: relative; + + .button { + &.button-red { + position: absolute; + right: 5%; + } + } + } + } } @media screen and (max-width: 64em) { - .page-form .submit-buttons .button { + .page-form { + .submit-buttons { + .button { display: block; margin: auto; + } } + } } -.page-form select { - color: #252525; -} - -/** - * PAGE FORM - LIGHT - */ -.page-form-light div, .page-form-light p { +// PAGE FORM - LIGHT +.page-form-light { + div, + p { text-align: center; + } } -/** - * PAGE FORM - COMPLETE - */ -.page-form-complete div, .page-form-complete p { - color: #252525; +// PAGE FORM - COMPLETE +%page-form-valign { + position: absolute; + top: 50%; + transform: translateY(-50%); } -.page-form-complete .form-label, .page-form-complete .form-input { +.page-form-complete { + div, + p { + color: $dark-grey; + } + + .form-label, + .form-input { position: relative; height: 60px; -} + } -.page-form-complete .form-label label, -.page-form-complete .form-input input, -.page-form-complete .form-input select.align, -.page-form-complete .timezone { - position: absolute; - top: 50%; - transform: translateY(-50%); -} + .form-label { + label { + @extend %page-form-valign; -.page-form-complete .form-label label { - text-align: right; - right: 0; - padding: 0 20px; -} + right: 0; + padding: 0 20px; + text-align: right; + } + } -.page-form-complete .label-name { + .label-name { font-weight: bold; -} - -.page-form-complete .label-desc { - font-size: 0.8em; -} + } -.page-form-complete input[type="text"], -.page-form-complete input[type="password"], -.page-form-complete textarea { - margin: 0; -} - -.page-form section { - margin: 10px 0 25px 0; -} + .label-desc { + font-size: .8em; + } -.page-form table { - margin: auto; - width: 90%; -} + .form-input { + input { + @extend %page-form-valign; -.page-form table .order { - text-decoration: none; - color: #252525; -} + &[type='text'], + &[type='password'] { + margin: 0; + } + } -.page-form table, .page-form th, .page-form td { - border-width: 1px 0; - border-style: solid; - border-color: #aaaaaa; -} + select { + &.align { + @extend %page-form-valign; + } + } + } -.page-form th, .page-form td { - padding: 5px; + textarea { + margin: 0; + } + .timezone { + @extend %page-form-valign; + } } -/* Awesomeplete fix */ -div.awesomplete { +// Awesomeplete fix +div { + &.awesomplete { width: inherit; -} -div.awesomplete > input { - display: inherit; -} + > input { + display: inherit; + } -div.awesomplete > ul { - z-index: 9999; + > ul { + z-index: 9999; + } + } } -.page-form .awesomplete { - width: 90%; +form { + &[name='linkform'] { + &.page-form { + overflow: visible; + } + } } -.page-form .awesomplete input { - width: 100%; -} +@media screen and (max-width: 64em) { + %page-form-valign-mobile { + position: inherit; + top: inherit; + transform: translateY(0); + } -.page-form div.awesomplete > ul { - color: black; -} + .page-form-complete { + .form-label { + height: inherit; -form[name="linkform"].page-form { - overflow: visible; -} + label { + @extend %page-form-valign-mobile; -@media screen and (max-width: 64em) { - .page-form-complete .form-label { - height: inherit; + display: block; + margin: 10px 0 0; + text-align: left; + } } - .page-form-complete .form-label label, - .page-form-complete .form-input input, - .page-form-complete .timezone { - position: inherit; - top: inherit; - transform: translateY(0); - } + .form-input { + text-align: center; - .page-form-complete .form-input input[type="checkbox"] { - position: absolute; - top: 50%; - right: 50%; - transform: translateY(-50%); - } + input { + @extend %page-form-valign-mobile; - .page-form-complete .form-input { - text-align: center; + &[type='checkbox'] { + position: absolute; + top: 50%; + right: 50%; + transform: translateY(-50%); + } + } } - .page-form-complete .form-label label { - display: block; - text-align: left; - margin: 10px 0 0 0; + .timezone { + @extend %page-form-valign-mobile; } - .timezone-continent:after { - content:"\a\a"; - white-space: pre; + .radio-buttons { + padding: 5px 15px; + text-align: left; } + } - .page-form-complete .radio-buttons { - text-align: left; - padding: 5px 15px; + .timezone-continent { + &::after { + white-space: pre; + content: '\a\a'; } + } } -/** - * Page visitor (page form extended) - */ +// Page visitor (page form extended) .page-visitor { - color: #252525; + color: $dark-grey; } -#page404 { - color: #3f3f3f; +.page404-container { + color: $dark-grey; } -/** - * EDIT LINK - */ -#editlinkform .created-date { - color: #767676; +// EDIT LINK +.edit-link-container { + .created-date { margin-bottom: 10px; + color: $light-grey; + } } -/** - * LOGIN - */ -#login-form .remember-me { +// LOGIN +.login-form-container { + .remember-me { margin: 5px 0; + } } -/** - * Search results - */ -.search-result a { - color: white; +// Search results +.search-result { + a { text-decoration: none; -} + color: $white; + } -.search-result .label-tag { - border-color: white; -} + .label-tag { + border-color: $white; -.search-result .label-tag .remove { - border-left: white 1px solid; - padding: 0 0 0 5px; - margin: 0 0 0 5px; -} + .remove { + margin: 0 0 0 5px; + border-left: $white 1px solid; + padding: 0 0 0 5px; + } + } -.search-result .label-private { - border: 1px solid white; + .label-private { + border: 1px solid $white; + } } -/** - * TOOLS - */ +// TOOLS .tools-item { - margin: 10px 0; -} + margin: 10px 0; -.tools-item .pure-button:hover { - background-image: none; - background-color: #1b926c; - color: #f5f5f5; + .pure-button { + &:hover { + background-color: $main-green; + background-image: none; + color: $almost-white; + } + } } -/** - * PLUGIN ADMIN - */ -#pluginform .mobile-row { - font-size: 0.9em; -} +// PLUGIN ADMIN +.pluginform-container { + .mobile-row { + font-size: .9em; + } -#pluginform .more { + .more { margin-top: 10px; + } } @media screen and (max-width: 64em) { - #pluginform .main-row, #pluginform .main-row td { - border-bottom-style: none; - } + .pluginform-container { + .main-row { + border-top-style: none; + border-bottom-style: none; - #pluginform .mobile-row, #pluginform .mobile-row td { + td { border-top-style: none; + border-bottom-style: none; + } } + } } -/** - * IMPORT - */ -#import-field { - margin: 15px 0; +// IMPORT +.import-field-container { + margin: 15px 0; } -/** - * TAG CLOUD - */ -#cloudtag { - padding: 10px; - text-align: center; -} +// TAG CLOUD +.cloudtag-container { + padding: 10px; + text-align: center; + text-decoration: none; + color: $dark-grey; -#cloudtag, #cloudtag a { - color: #252525; + a { text-decoration: none; -} + color: $dark-grey; + } -#cloudtag .count { - color: #7f7f7f; + .count { + color: $light-grey; + } } -/** - * TAG LIST - */ -#taglist { - padding: 0 10px; -} +// TAG LIST +.taglist-container { + padding: 0 10px; -#taglist a { - color: #252525; + a { text-decoration: none; -} + color: $dark-grey; + } -#taglist .count { + .count { display: inline-block; width: 35px; text-align: right; - color: #7f7f7f; -} + color: $light-grey; + } -#taglist .rename-tag-form { + .rename-tag-form { display: none; -} + } -#taglist .delete-tag { - color: #ac2925; + .delete-tag { display: none; -} - -#taglist .rename-tag { - color: #0b5ea6; -} - -#taglist .validate-rename-tag { - color: #1b926c; -} - -/** - * Picture wall CSS - */ -#picwall_container { - margin: 0 10px 10px 10px; - color: #252525; - background-color: #f5f5f5; - clear: both; -} - -.picwall_pictureframe { - margin: 2px; - background-color: #f5f5f5; - z-index: 5; - position: relative; - display: table-cell; - vertical-align: middle; - width: 90px; - height: 90px; - overflow: hidden; - text-align: center; - float: left; -} - -.b-lazy { - -webkit-transition: opacity 500ms ease-in-out; - -moz-transition: opacity 500ms ease-in-out; - -o-transition: opacity 500ms ease-in-out; - transition: opacity 500ms ease-in-out; - opacity: 0; -} -.b-lazy.b-loaded { - opacity: 1; -} - -.picwall_pictureframe img { + color: $red; + } + + .rename-tag { + color: $blue; + } + + .validate-rename-tag { + color: $main-green; + } +} + +// Picture wall CSS +.picwall-container { + clear: both; + margin: 0 10px 10px; + background-color: $almost-white; + color: $dark-grey; +} + +.picwall-pictureframe { + display: table-cell; + position: relative; + float: left; + z-index: 5; + margin: 2px; + background-color: $almost-white; + width: 90px; + height: 90px; + overflow: hidden; + vertical-align: middle; + text-align: center; + + // Adapt the width of the image + img { max-width: 100%; height: auto; color: transparent; -} /* Adapt the width of the image */ + } -.picwall_pictureframe a { + a { text-decoration: none; -} + } -/* CSS to show title when hovering an image - no javascript required. */ -.picwall_pictureframe span.info { - display: none; - font-family: Arial, sans-serif; + span { + &.info { + display: none; + font-family: Arial, sans-serif; + } + } + + // CSS to show title when hovering an image - no javascript required. + &:hover { + span { + &.info { + display: block; + position: absolute; + top: 0; + left: 0; + background-color: $dark-shadow; + width: 90px; + height: 90px; + text-align: left; + color: $almost-white; + font-size: 9pt; + font-weight: bold; + } + } + } } -.picwall_pictureframe:hover span.info { - display: block; - position: absolute; - top: 0; - left: 0; - width: 90px; - height: 90px; - font-weight: bold; - font-size: 9pt; - color: #f5f5f5; - text-align: left; - background-color: rgba(0, 0, 0, 0.8); +.b-lazy { + transition: opacity 500ms ease-in-out; + opacity: 0; + -webkit-transition: opacity 500ms ease-in-out; + -moz-transition: opacity 500ms ease-in-out; + -o-transition: opacity 500ms ease-in-out; + + &.b-loaded { + opacity: 1; + } } -/** - * DAILY - */ +// DAILY .daily-desc { - color: #7f7f7f; - font-size: 0.8em; -} + color: $light-grey; + font-size: .8em; -.daily-about a { - color: #343434; + a { text-decoration: none; -} - -.daily-about a:hover { - color: #7f7f7f; -} + color: $dark-grey; -.daily-about h3:before, .daily-about h3:after { - display: block; - content:""; - background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4); - height: 1px; - width: 90%; - margin: 10px auto; + &:hover { + color: $light-grey; + } + } +} + +.daily-about { + h3 { + &::before, + &::after { + display: block; + margin: 10px auto; + background: linear-gradient(to right, $background-color, $dark-grey, $background-color); + width: 90%; + height: 1px; + content: ''; + } + } } .daily-entry { - padding: 0 10px; -} + padding: 0 10px; -.daily-entry .daily-entry-title:after { - display: block; - content:""; - background: linear-gradient(to right, #fff, #515151, #fff); - height: 1px; - width: 70%; - margin: 5px auto; -} + .daily-entry-title { + margin: 10px 0 0; -.daily-entry .daily-entry-title { - margin: 10px 0 0 0; -} + a { + text-decoration: none; + color: $black; + } -.daily-entry .daily-entry-title a { - color: #000; - text-decoration: none; -} + &::after { + display: block; + margin: 5px auto; + background: linear-gradient(to right, $white, $light-grey, $white); + width: 70%; + height: 1px; + content: ''; + } + } -.daily-entry .daily-entry-description { - padding: 5px 5px 0 5px; - font-size: 0.9em; + .daily-entry-description { + padding: 5px 5px 0; text-align: justify; + font-size: .9em; word-wrap: break-word; -} + } -.daily-entry .daily-entry-tags { - padding: 0 5px 5px 5px; - font-size: 0.8em; + .daily-entry-tags { + padding: 0 5px 5px; + font-size: .8em; + } } .daily-entry-thumbnail { - float: left; - margin: 15px 5px 5px 15px; + float: left; + margin: 15px 5px 5px 15px; } -.daily-entry-description a { +.daily-entry-description { + a { text-decoration: none; - color: #1b926c; -} + color: $main-green; -.daily-entry-description a:hover { - text-shadow: 1px 1px #ddd; -} + &:hover { + text-shadow: 1px 1px $background-linklist-info; + } -.daily-entry-description a:visited { - color: #20b988; + &:visited { + color: $dark-green; + } + } } -/* - * Fix empty bookmarklet name in Firefox - */ +// Fix empty bookmarklet name in Firefox .pure-button { - -moz-user-select: auto; + -moz-user-select: auto; } .tag-sort { - margin-top: 30px; - text-align: center; -} + margin-top: 30px; + text-align: center; -.tag-sort a { + a { display: inline-block; margin: 0 15px; - color: white; text-decoration: none; + color: $white; font-weight: bold; + } } -/** - * Markdown - */ -.markdown p { +// Markdown +.markdown { + p { margin: 0 !important; -} + } -.markdown p + p { - margin: 0.5em 0 0 0 !important; -} + p + p { + margin: .5em 0 0 !important; + } -.markdown *:first-child { - margin-top: 0 !important; -} + * { + &:first-child { + margin-top: 0 !important; + } -.markdown *:last-child { - margin-bottom: 5px !important; + &:last-child { + margin-bottom: 5px !important; + } + } } -/** - * Pure Button - */ +// Pure Button .pure-button-success, .pure-button-error, .pure-button-warning, .pure-button-primary, .pure-button-shaarli, .pure-button-secondary { - color: white !important; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + border-radius: 4px; + text-shadow: 0 1px 1px $dark-shadow; + color: $white !important; } .pure-button-shaarli { - background-color: #1B926C; + background-color: $main-green; } -- cgit v1.2.3