$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss"; @import '~purecss/build/pure.css'; @import '~purecss/build/grids-responsive.css'; @import '~pure-extras/css/pure-extras.css'; @import '~awesomplete/awesomplete.css'; /** * General */ body { background: #d0d0d0; } .strong { font-weight: bold; } .clear { clear: both; } .center { text-align: center; margin: auto; } .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'; 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; } @media screen and (min-width: 35.5em) { .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; } } @media screen and (min-width: 64em) { .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; } } /** * Make pure-extras alert closable. */ .pure-alert-closable .fa-times { float: right; } .pure-alert-close { cursor: pointer; } .pure-alert-success { background-color: #1b926c; } .anchor:target { padding-top: 40px; } /** * 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; } /* 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; } .head-logo { 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; } .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; } .pure-menu-item:hover::after { margin: -4px auto 0 auto; display: block; content:""; background: #fff; height: 4px; width: 100%; } .menu-toggle { width: 34px; height: 45px; position: absolute; top: 5px; right: 0; display: none; } .menu-toggle .bar { background-color: #b0ddce; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 18px; right: 7px; transition: all 0.5s; } .menu-toggle .bar:first-child { transform: translateY(-6px); } .menu-toggle.x .bar { transform: rotate(45deg); } .menu-toggle.x .bar:first-child { transform: rotate(-45deg); } @media screen and (max-width: 64em) { .menu-toggle { display: block; } } .header-buttons { text-align: right; } .linkcount { color: #252525; font-size: 0.8em; } @media screen and (min-width: 64em) { .linkcount { position: absolute; right: 5px; } } #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; 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; } #search button, #search-tagcloud button, #search-linklist button { padding: 4px 8px 6px 8px; background-color: #1B926C; color: #f5f5f5; border: none; border-radius: 2px; } #search-tagcloud button { width: 90%; } @media screen and (max-width: 64em) { #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; } } .subheader-form a.button { color: #f5f5f5; font-weight: bold; text-decoration: none; border: 2px solid #f5f5f5; border-radius: 5px; padding: 3px 10px; } .linklist-item-editbuttons .delete-checkbox { display: none; } #header-login-form input[type="text"], #header-login-form input[type="password"] { width: 200px; } /* because chrome */ #header-login-form input[type="text"]::-webkit-input-placeholder, #header-login-form input[type="password"]::-webkit-input-placeholder { color: #777777; } .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; } } .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; 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; } /* because chrome */ .subheader-form input[type="text"]::-webkit-input-placeholder, .subheader-form input[type="password"]::-webkit-input-placeholder { color: #252525; } .subheader-form .remember-me { display: inline-block; width: auto; padding: 5px 20px 3px 20px; cursor: pointer; } .subheader-form .remember-me label, .subheader-form .remember-me input { cursor: pointer; } .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; } .subheader-form input[type="submit"]:hover { background: #f5f5f5; color: #1b926c; } .new-version-message { text-align: center; } .new-version-message a { color: rgb(151, 96, 13); font-weight: bold; } /** * CONTENT - GENERAL */ #content { position: relative; z-index: 2; margin-top: 45px; } /** * 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; } .toolbar-plugin input[type="submit"]:hover { background: #fff; } @media screen and (max-width: 64em) { .toolbar-plugin input[type="text"] { width: 70%; } } /** * CONTENT - LINKLIST PAGING * 64em -> lg */ .linklist-filters { margin: 5px 0; color: #252525; font-size: 0.9em; } .linklist-filters a { padding: 5px 8px; text-decoration: none; } .linklist-filters .filter-off { color: #252525; background: #f5f5f5; } .linklist-filters .filter-on { color: #b0ddce; background: #1b926c; } .linklist-filters .filter-block { color: #f5f5f5; background: #ac2925; } .linklist-pages { margin: 5px 0; color: #252525; text-align: center; } .linklist-pages a { color: #252525; text-decoration: none; } .linklist-pages a:hover { color: #fff; } .linksperpage { margin: 5px 0; text-align: right; color: #252525; font-size: 0.9em; } .linksperpage a { padding: 5px 5px; text-decoration: none; color: #252525; background: #f5f5f5; } .linksperpage a, .linksperpage input[type="text"] { display: inline-block; width: 20px; text-align: center; } .linksperpage form { display: inline; } .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 */ .linklist-item { margin: 0 0 10px 0; background: #f5f5f5; box-shadow: 1px 1px 3px #797979; } .linklist-item-buttons { background: transparent; position: relative; width: 23px; z-index: 99; } .linklist-item-buttons-right { 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; } .linklist-item-title { position: relative; background: #f5f5f5; } .linklist-item-title h2 { padding: 3px 10px 0 10px; line-height: 30px; } .linklist-item-title h2 a { font-size: 0.7em; color: #252525; text-decoration: none; vertical-align: middle; } .linklist-item-title .linklist-link { 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; } .linklist-item-title .label-private { border: solid 1px #F89406; font-family: Arial, sans-serif; font-size: 0.65em; color: #F89406; } .fold-button { display: none; color: #252525; } .linklist-item-editbuttons { float: right; padding: 8px 5px; } .linklist-item-editbuttons * { display: block; float: left; margin: 0 1px; } .linklist-item-editbuttons a { font-size: 1em; } .edit-link { font-size: 1.2em; color: #0b5ea6; } .delete-link { font-size: 1.3em; color: #ac2925 !important; } .linklist-item-description { position: relative; padding: 0 10px; word-wrap: break-word; color: #252525; line-height: 1.3em; } .linklist-item-description a { text-decoration: none; color: #1b926c; } .linklist-item-description a:hover { color: #252525; } .linklist-item-description a:visited { color: #14553f; } .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; } .linklist-item-infos { padding: 4px 8px 4px 8px; background: #ddd; color: #252525; } .linklist-item-infos a { color: #252525; text-decoration: none; } .linklist-item-infos a:hover { color: #000; } .linklist-item-infos .linklist-item-tags { font-size: 0.8em; } .linklist-item-infos .label-tag { font-size: 1em; } .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; 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; } .linklist-item-infos-controls-group { display: inline-block; border-right: 1px solid #5d5d5d; padding-right: 6px; } .ctrl-edit { margin: 0 7px; } /** 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; } /** * 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; padding: 10px 0; width: 100%; color: #1b926c; background: #f5f5f5; text-align: center; } .page-form .window-subtitle { text-align: center; } .page-form a { color: #1b926c; font-weight: bold; text-decoration: none; } .page-form p { padding: 5px 10px; margin: 0; } .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; } .page-form textarea { min-height: 240px; padding: 15px 5px 3px 15px; resize: vertical; overflow-y: auto; word-wrap:break-word } /* because chrome */ .page-form input[type="text"]::-webkit-input-placeholder, .page-form input[type="password"]::-webkit-input-placeholder { color: #777777; } .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; } .page-form .button.button-red { background: #ac2925; } .page-form .submit-buttons { margin-bottom: 10px; } @media screen and (min-width: 64em) { .page-form .submit-buttons { position: relative; } .page-form .submit-buttons .button.button-red { position: absolute; right: 5%; } } @media screen and (max-width: 64em) { .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 { text-align: center; } /** * PAGE FORM - COMPLETE */ .page-form-complete div, .page-form-complete p { color: #252525; } .page-form-complete .form-label, .page-form-complete .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%); } .page-form-complete .form-label label { text-align: right; right: 0; padding: 0 20px; } .page-form-complete .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; } .page-form table { margin: auto; width: 90%; } .page-form table .order { text-decoration: none; color: #252525; } .page-form table, .page-form th, .page-form td { border-width: 1px 0; border-style: solid; border-color: #aaaaaa; } .page-form th, .page-form td { padding: 5px; } /* Awesomeplete fix */ div.awesomplete { width: inherit; } div.awesomplete > input { display: inherit; } div.awesomplete > ul { z-index: 9999; } .page-form .awesomplete { width: 90%; } .page-form .awesomplete input { width: 100%; } .page-form div.awesomplete > ul { color: black; } form[name="linkform"].page-form { overflow: visible; } @media screen and (max-width: 64em) { .page-form-complete .form-label { height: inherit; } .page-form-complete .form-label label, .page-form-complete .form-input input, .page-form-complete .timezone { position: inherit; top: inherit; transform: translateY(0); } .page-form-complete .form-input input[type="checkbox"] { position: absolute; top: 50%; right: 50%; transform: translateY(-50%); } .page-form-complete .form-input { text-align: center; } .page-form-complete .form-label label { display: block; text-align: left; margin: 10px 0 0 0; } .timezone-continent:after { content:"\a\a"; white-space: pre; } .page-form-complete .radio-buttons { text-align: left; padding: 5px 15px; } } /** * Page visitor (page form extended) */ .page-visitor { color: #252525; } #page404 { color: #3f3f3f; } /** * EDIT LINK */ #editlinkform .created-date { color: #767676; margin-bottom: 10px; } /** * LOGIN */ #login-form .remember-me { margin: 5px 0; } /** * Search results */ .search-result a { color: white; text-decoration: none; } .search-result .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; } .search-result .label-private { border: 1px solid white; } /** * TOOLS */ .tools-item { margin: 10px 0; } .tools-item .pure-button:hover { background-image: none; background-color: #1b926c; color: #f5f5f5; } /** * PLUGIN ADMIN */ #pluginform .mobile-row { font-size: 0.9em; } #pluginform .more { margin-top: 10px; } @media screen and (max-width: 64em) { #pluginform .main-row, #pluginform .main-row td { border-bottom-style: none; } #pluginform .mobile-row, #pluginform .mobile-row td { border-top-style: none; } } /** * IMPORT */ #import-field { margin: 15px 0; } /** * TAG CLOUD */ #cloudtag { padding: 10px; text-align: center; } #cloudtag, #cloudtag a { color: #252525; text-decoration: none; } #cloudtag .count { color: #7f7f7f; } /** * TAG LIST */ #taglist { padding: 0 10px; } #taglist a { color: #252525; text-decoration: none; } #taglist .count { display: inline-block; width: 35px; text-align: right; color: #7f7f7f; } #taglist .rename-tag-form { display: none; } #taglist .delete-tag { color: #ac2925; 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 { max-width: 100%; height: auto; color: transparent; } /* Adapt the width of the image */ .picwall_pictureframe 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; } .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); } /** * DAILY */ .daily-desc { color: #7f7f7f; font-size: 0.8em; } .daily-about a { color: #343434; text-decoration: none; } .daily-about a:hover { color: #7f7f7f; } .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; } .daily-entry { 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 .daily-entry-title { margin: 10px 0 0 0; } .daily-entry .daily-entry-title a { color: #000; text-decoration: none; } .daily-entry .daily-entry-description { padding: 5px 5px 0 5px; font-size: 0.9em; text-align: justify; word-wrap: break-word; } .daily-entry .daily-entry-tags { padding: 0 5px 5px 5px; font-size: 0.8em; } .daily-entry-thumbnail { float: left; margin: 15px 5px 5px 15px; } .daily-entry-description a { text-decoration: none; color: #1b926c; } .daily-entry-description a:hover { text-shadow: 1px 1px #ddd; } .daily-entry-description a:visited { color: #20b988; } /* * Fix empty bookmarklet name in Firefox */ .pure-button { -moz-user-select: auto; } .tag-sort { margin-top: 30px; text-align: center; } .tag-sort a { display: inline-block; margin: 0 15px; color: white; text-decoration: none; font-weight: bold; } /** * Markdown */ .markdown p { margin: 0 !important; } .markdown p + p { margin: 0.5em 0 0 0 !important; } .markdown *:first-child { margin-top: 0 !important; } .markdown *:last-child { margin-bottom: 5px !important; } /** * 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); } .pure-button-shaarli { background-color: #1B926C; }