X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=themes%2Fbaggy%2Fcss%2Fmain.css;h=93294359b0d9b023341bf868cfe755dc094790d7;hb=9cf370cfb683deebf8b479bc2ee976d5ac93be00;hp=e4c62a10da0fe029914c9ecdf0ce1705b66159c7;hpb=6e8030a0db9b669fdd5be3d3a07d6a193e456cb4;p=github%2Fwallabag%2Fwallabag.git diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css index e4c62a10..93294359 100755 --- a/themes/baggy/css/main.css +++ b/themes/baggy/css/main.css @@ -89,7 +89,7 @@ form fieldset { margin: 0; } -form input[type="text"], select, form input[type="password"], form input[type="url"] { +form input[type="text"], select, form input[type="password"], form input[type="url"], form input[type="email"] { border: 1px solid #999; padding: 0.5em 1em; min-width: 12em; @@ -104,10 +104,6 @@ form input[type="text"], select, form input[type="password"], form input[type="u } } -fieldset label { - min-width: 12.5em; -} - .inline .row { display: inline-block; margin-right: 0.5em; @@ -119,10 +115,14 @@ fieldset label { fieldset label { display: inline-block; - margin-right: 0.5em; + min-width: 12.5em; color: #666; } +label { + margin-right: 0.5em; +} + form .row { margin-bottom: 0.5em; } @@ -180,7 +180,7 @@ h2:after { padding-top: 9.5em; height: 100%; box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); - z-index: 10; + z-index: 15; } #main { @@ -191,7 +191,7 @@ h2:after { padding-bottom: 1em; } - #links a { + #links > li > a { display: block; padding: 0.5em 2em 0.5em 1em; color: #FFF; @@ -207,7 +207,7 @@ h2:after { transition: all 0.5s ease; } - #links a:hover, #links a:focus { + #links > li > a:hover, #links > li > a:focus { background: #999; color: #000; } @@ -327,10 +327,6 @@ footer a { margin-left: 0!important; } -.listmode .entrie p { - display: none; -} - .list-entries + .results { margin-bottom: 2em; } @@ -359,11 +355,15 @@ footer a { position: relative; overflow: hidden; padding: 1.5em 1.5em 3em 1.5em; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -ms-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; + + /* Removing CSS transitions because they make the switch from list view to + * table view jerky + */ + /* -webkit-transition: all 0.5s ease; */ + /* -moz-transition: all 0.5s ease; */ + /* -ms-transition: all 0.5s ease; */ + /* -o-transition: all 0.5s ease; */ + /* transition: all 0.5s ease; */ } .entrie:before { @@ -537,10 +537,10 @@ footer a { } /* ========================================================================== - 2.1 = "save a link" popup div related styles + 2.1 = "save a link" related styles ========================================================================== */ -#bagit-form { +.popup-form { background: rgba(0,0,0,0.5); position: absolute; top: 0; @@ -549,37 +549,53 @@ footer a { height: 100%; width: 100%; margin: 0; - margin-top: -30%; + margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */ padding: 2em; display: none; border-left: 1px #EEE solid; } -#bagit-form form { - background: #FFF; - position: absolute; - top: 0; - left: 0; - z-index: 20; - border: 10px solid #000; - width: 400px; - height: 200px; - /* margin: -150px 0 0 -300px; */ - padding: 2em; + .popup-form form { + background: #FFF; + position: absolute; + top: 0; + left: 0; + z-index: 20; + border: 10px solid #000; + width: 400px; + height: 200px; + padding: 2em; + } + +#bagit-form-form .addurl { + margin-left: 0; } -a#bagit-form-close { +.closeMessage, +.close-button { background: #000; color: #FFF; - padding: 0.2em 0.5em; + font-size: 1.2em; + line-height: 1.6; + width: 1.6em; + height: 1.6em; + text-align: center; text-decoration: none; - display: inline-block; - float: right; - font-size: 0.6em; } -a#bagit-form-close:hover { - background: #999; - color: #000; + .closeMessage:hover, + .closeMessage:focus, + .close-button:hover, + .close-button:focus { + background: #999; + color: #000; + } + +.close-button--popup { + display: inline-block; + position: absolute; + top: 0; + right: 0; + font-size: 1.4em; } .active-current { @@ -609,59 +625,28 @@ a#bagit-form-close:hover { padding: 0 3px 2px 3px; } -#add-link-result { - font-weight: bold; - margin-top: 10px; -} - -/* ========================================================================== - 2.2 = "search for articles" popup div related styles - ========================================================================== */ -#search-form { - background: rgba(0,0,0,0.5); - position: absolute; - top: 0; - left: 10em; - z-index: 20; - height: 100%; - width: 100%; - margin: 0; - margin-top: -30%; - padding: 2em; - display: none; - border-left: 1px #EEE solid; +a.add-to-wallabag-link-after { + visibility: hidden; + position: absolute; + opacity: 0; + transition-duration: 2s; + transition-timing-function: ease-out; } -#search-form form { - background: #FFF; - position: absolute; - top: 0; - left: 0; - z-index: 20; - border: 10px solid #000; - width: 400px; - height: 200px; - /* margin: -150px 0 0 -300px; */ - padding: 2em; +#article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover { + opacity: 1; + visibility: visible; + transition-duration: .3s; + transition-timing-function: ease-in; } -a#search-form-close { - background: #000; - color: #FFF; - padding: 0.2em 0.5em; - text-decoration: none; - display: inline-block; - float: right; - font-size: 1.2em; -} -a#search-form-close:hover { - background: #999; - color: #000; +a.add-to-wallabag-link-after:after { + content: "w"; } -#submit-search{ -margin-left: 4em; -margin-top:1em; +#add-link-result { + font-weight: bold; + font-size: 0.9em; } /* ========================================================================== @@ -746,6 +731,9 @@ margin-top:1em; .icon-rss:before { content: "\e808"; } +.icon-print:before { + content: "\e80d"; +} /* ========================================================================== Icon selected @@ -755,6 +743,10 @@ margin-top:1em; color: #FFF; } +.icon-check.archive:before { + color: #FFF; +} + /* ========================================================================== 4 = Messages ========================================================================== */ @@ -766,18 +758,6 @@ margin-top:1em; .messages > * { display: inline-block;} -.closeMessage { - background: #000; - color: #FFF; - padding: 0.2em 0.5em; - text-decoration: none; -} - - .closeMessage:hover, .closeMessage:focus { - background: #FFF; - color: #000; - } - .warning { /* font-size: 3em; color: #999; @@ -901,6 +881,13 @@ blockquote { text-decoration: underline; } +pre code { + font-family: "Courier New", Courier, monospace; + border: 1px solid #ccc; + font-size: 0.96em; +} + + /* ========================================================================== 6 = Media Queries ========================================================================== */ @@ -957,8 +944,8 @@ blockquote { content: none; } .logo { - width: 1.5em; - height: 1.5em; + width: 1.25em; + height: 1.25em; left: 0; top: 0; } @@ -1008,6 +995,7 @@ blockquote { margin-left: 1.5em; padding-right: 1.5em; position: static; + margin-top: 3em; } #article_toolbar .topPosF { display: none; @@ -1028,7 +1016,16 @@ blockquote { display: none; } - #bagit-form { + .popup-form { left: 0; + width: 100%; + border-left: none; + } + + .popup-form form, + #bagit-form form, + #search-form form { + width: 100%; } } +