X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=tpl%2Fdefault%2Fcss%2Fshaarli.css;fp=tpl%2Fdefault%2Fcss%2Fshaarli.css;h=fafe7351ff34e66d4322d0fe15025fdbd6382c01;hb=b057607f1b8a242c5c0325ceaf7c963632b960aa;hp=ae0d58073c3cbff1bf6c4ae060a10d14d3ce81f9;hpb=2bbf5d03ca47c9ce5bc88aabae6096f90f646cab;p=github%2Fshaarli%2FShaarli.git diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index ae0d5807..fafe7351 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css @@ -175,46 +175,70 @@ pre { font-size: 0.8em; } -#search { - position: fixed; +#search, #search-linklist { + text-align: center; width: 100%; } -#search input[type="text"] { - width: 250px; +#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; } /* because chrome */ -#search input[type="text"]::-webkit-input-placeholder { - color: #252525; +#search input[type="text"]::-webkit-input-placeholder, +#search-linklist input[type="text"]::-webkit-input-placeholder { + color: #777777; } -#search button { +#search button, +#search-linklist button { background: transparent; border: none; +} + +#search button { color: #f5f5f5; } +#search-linklist button { + color: #252525; +} + #search button:hover { color: #fff; } +#search-linklist button:hover { + color: #000; +} + +#search-linklist { + padding: 5px 0; +} + @media screen and (min-width: 64em) { - #search .searchform { + #search .searchform, + #search-linklist .searchform { margin-right: 25px; text-align: right; } - #search .tagfilter { + #search .tagfilter, + #search-linklist .tagfilter { margin-left: 25px; text-align: left; } } @media screen and (max-width: 64em) { - #search { - position: relative; - height: 60px; + #search, #search * { + visibility: hidden; } } @@ -239,11 +263,6 @@ pre { visibility: visible; } } -@media screen and (max-width: 64em) { - #search.subheader-form, .subheader-form.open * { - visibility: visible; - } -} .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { margin: 0 0 5px 0; @@ -252,7 +271,7 @@ pre { width: 20%; background: #f5f5f5; border: medium none currentColor; - border-radius: 5px; + 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; } @@ -315,6 +334,46 @@ pre { } } +/** + * 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; +} + +@media screen and (max-width: 64em) { + .toolbar-plugin input[type="text"] { + width: 70%; + + } +} + /** * CONTENT - LINKLIST PAGING * 64em -> lg @@ -369,14 +428,18 @@ pre { background: #f5f5f5; } +.linksperpage a, .linksperpage input[type="text"] { + display: inline-block; + width: 20px; + text-align: center; +} + .linksperpage form { display: inline; - margin: 0 10px 0 0; } .linksperpage input[type="text"] { - width: 28px; - height: 12px; + height: 15px; margin: 0; padding: 3px 5px 3px 8px; background: #f5f5f5; @@ -400,9 +463,22 @@ pre { } .linklist-item-title { + position: relative; background: #f5f5f5; } +.linklist-item.private .linklist-item-title::before { + position: absolute; + left: 3px; + top: 0; + display: block; + content:""; + background: #F89406; + height: 95%; + width: 3px; + margin-top: 3px; +} + .linklist-item-title h2 { padding: 3px 10px 0 10px; line-height: 25px; @@ -417,6 +493,7 @@ pre { } .linklist-item-title .linklist-link { + font-size: 1.1em; color: #1b926c; } @@ -454,6 +531,12 @@ pre { padding: 5px; } +.linklist-item-editbuttons * { + display: block; + float: left; + margin: 0 1px; +} + .linklist-item-editbuttons a { font-size: 1em; } @@ -469,6 +552,7 @@ pre { } .linklist-item-description { + position: relative; padding: 10px; background: #f5f5f5; font-family: Roboto Slab, Arial, sans-serif; @@ -476,6 +560,19 @@ pre { color: #252525; } +.linklist-item.private .linklist-item-description::before { + position: absolute; + left: 3px; + top: 0; + display: block; + content:""; + background: #F89406; + height: 95%; + width: 3px; + z-index: 9999; + #margin: 0; +} + .linklist-item-description a { text-decoration: none; color: #1b926c; @@ -496,13 +593,13 @@ pre { } .linklist-item-infos { - padding: 5px 5px 0 5px; + padding: 8px 8px 5px 8px; background: #ddd; color: #252525; } .linklist-item-infos a { - color: #505050; + color: #252525; text-decoration: none; } @@ -511,17 +608,14 @@ pre { } .linklist-item-infos .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 { @@ -541,6 +635,17 @@ pre { font-size: 0.8em; } +.linklist-item-infos .mobile-buttons { + text-align: right; +} + +.linklist-item-infos .linklist-plugin-icon { + display: inline-block; + margin: 0 2px; + width: 16px; + height: 16px; +} + /** 64em -> lg **/ @media screen and (max-width: 64em) { .linklist-item-infos-url { @@ -576,10 +681,10 @@ pre { */ .page-form { margin: 20px 0 0 0; - padding: 0 10px 0 10px; background: #f5f5f5; box-shadow: 1px 1px 2px #797979; color: #252525; + overflow: hidden; } .page-form .window-title { @@ -609,16 +714,22 @@ pre { font-weight: bold; } +.page-form p { + padding: 0 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: 30px; - width: 80%; - background: #f5f5f5; + height: 35px; + width: 90%; + background: #ebebeb; border: medium none currentColor; - border-radius: 5px; + 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; } @@ -634,7 +745,7 @@ pre { /* because chrome */ .page-form input[type="text"]::-webkit-input-placeholder, .page-form input[type="password"]::-webkit-input-placeholder { - color: #252525; + color: #777777; } .page-form input[type="submit"] { @@ -648,6 +759,11 @@ pre { color: #f5f5f5; } + +.page-form input[type="submit"].button-red { + background: #ac2925; +} + .page-form select { color: #252525; } @@ -704,10 +820,9 @@ pre { } .page-form section { - margin-top: 20px; + margin: 10px 0 25px 0; } - .page-form table { margin: auto; width: 90%; @@ -715,12 +830,13 @@ pre { .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: #b0ddce; + border-color: #aaaaaa; } .page-form th, .page-form td { @@ -730,7 +846,7 @@ pre { /* Awesomeplete fix */ .page-form .awesomplete { - width: 80%; + width: 90%; } .page-form .awesomplete input { @@ -852,7 +968,6 @@ pre { } } - /** * IMPORT */ @@ -882,13 +997,14 @@ pre { */ #picwall_container { margin: 0 10px 10px 10px; - color: #fff; - background-color: #000; + color: #252525; + background-color: #f5f5f5; clear: both; } .picwall_pictureframe { - background-color: #000; + margin: 2px; + background-color: #f5f5f5; z-index: 5; position: relative; display: table-cell; @@ -924,6 +1040,7 @@ pre { /* 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 { @@ -932,16 +1049,12 @@ pre { top: 0; left: 0; width: 90px; + height: 90px; font-weight: bold; - font-size: 8pt; - color: #fff; + font-size: 9pt; + color: #f5f5f5; text-align: left; - background-color: transparent; - background-color: rgba(0, 0, 0, 0.4); - /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ - filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); - /* IE6–IE9 */ - text-shadow: 2px 2px 1px #000000; + background-color: rgba(0, 0, 0, 0.8); } /**