moparisthebest/wallabag
1
0
Fork 0
mirror of https://github.com/moparisthebest/wallabag synced 2024-11-23 17:42:15 -05:00
Code Issues Releases Wiki Activity

Globalizing and creating two variants of Carrot.org icon; tidying up some CSS

Browse Source
This commit is contained in:
Jay Sitter 2014-11-21 15:30:59 -05:00
parent e9d4d17693
commit fc01f94387
6 changed files with 52 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
themes/_global/img/icons/carrot-icon--black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
themes/_global/img/icons/carrot-icon--white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

68
themes/baggy/css/main.css
View File

@ -15,11 +15,11 @@ html {
} }
body { body {
background: #EEE; background-color: #EEE;
} }
.login { .login {
background: #333; background-color: #333;
} }
.login #main { .login #main {
@ -28,7 +28,7 @@ body {
} }
.login form { .login form {
background: #FFF; background-color: #FFF;
padding: 1.5em; padding: 1.5em;
box-shadow: 0 1px 8px rgba(0,0,0,0.9); box-shadow: 0 1px 8px rgba(0,0,0,0.9);
width: 20em; width: 20em;
@ -51,7 +51,7 @@ body {
::selection { ::selection {
color: #FFF; color: #FFF;
background: #000; background-color: #000;
} }
.desktopHide { .desktopHide {
@ -129,7 +129,7 @@ form .row {
form button, input[type="submit"] { form button, input[type="submit"] {
cursor:pointer; cursor:pointer;
background: #000; background-color: #000;
color: #FFF; color: #FFF;
border:0; border:0;
padding: 0.5em 1em; padding: 0.5em 1em;
@ -138,7 +138,7 @@ form button, input[type="submit"] {
} }
form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus { form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
background: #FFF; background-color: #FFF;
color: #000; color: #000;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
@ -155,7 +155,7 @@ h2:after {
content: ""; content: "";
height: 4px; height: 4px;
width: 70px; width: 70px;
background: #000; background-color: #000;
display: block; display: block;
} }
@ -176,7 +176,7 @@ h2:after {
width: 10em; width: 10em;
left: 0; left: 0;
text-align: right; text-align: right;
background: #333; background-color: #333;
padding-top: 9.5em; padding-top: 9.5em;
height: 100%; height: 100%;
box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
@ -208,7 +208,7 @@ h2:after {
} }
#links > li > a:hover, #links > li > a:focus { #links > li > a:hover, #links > li > a:focus {
background: #999; background-color: #999;
color: #000; color: #000;
} }
@ -344,7 +344,7 @@ footer a {
} }
.entrie { .entrie {
background: #FFF; background-color: #FFF;
letter-spacing:normal; letter-spacing:normal;
box-shadow: 0 3px 7px rgba(0,0,0,0.3); box-shadow: 0 3px 7px rgba(0,0,0,0.3);
display: inline-block; display: inline-block;
@ -391,7 +391,7 @@ footer a {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #000; background-color: #000;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease; -ms-transition: all 0.5s ease;
@ -557,7 +557,7 @@ footer a {
} }
.popup-form form { .popup-form form {
background: #FFF; background-color: #FFF;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -574,7 +574,7 @@ footer a {
.closeMessage, .closeMessage,
.close-button { .close-button {
background: #000; background-color: #000;
color: #FFF; color: #FFF;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.6; line-height: 1.6;
@ -587,7 +587,7 @@ footer a {
.closeMessage:focus, .closeMessage:focus,
.close-button:hover, .close-button:hover,
.close-button:focus { .close-button:focus {
background: #999; background-color: #999;
color: #000; color: #000;
} }
@ -665,9 +665,10 @@ a.add-to-wallabag-link-after:after {
font-style: normal; font-style: normal;
} }
.icon span { .icon span,
position: absolute; .icon-image span {
top: -9999px; display: inline-block;
text-indent: -9999px;
} }
[class^="icon-"]:before, [class*=" icon-"]:before { [class^="icon-"]:before, [class*=" icon-"]:before {
@ -736,6 +737,23 @@ a.add-to-wallabag-link-after:after {
content: "\e80d"; content: "\e80d";
} }
/* .icon-image class, for image-based icons
========================================================================== */
.icon-image {
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
padding-right: 1em !important;
padding-left: 1em !important;
}
/* Carrot (http://carrot.org) */
.icon-image--carrot {
background-image: url('../../_global/img/icons/carrot-icon--white.png');
}
/* ========================================================================== /* ==========================================================================
Icon selected Icon selected
========================================================================== */ ========================================================================== */
@ -805,7 +823,7 @@ a.add-to-wallabag-link-after:after {
blockquote { blockquote {
border:1px solid #999; border:1px solid #999;
background: #FFF; background-color: #FFF;
padding: 1em; padding: 1em;
margin: 0; margin: 0;
} }
@ -838,14 +856,14 @@ blockquote {
} }
#article_toolbar a { #article_toolbar a {
background: #000; background-color: #000;
padding: 0.3em 0.5em 0.2em; padding: 0.3em 0.5em 0.2em;
color: #FFF; color: #FFF;
text-decoration: none; text-decoration: none;
} }
#article_toolbar a:hover, #article_toolbar a:focus { #article_toolbar a:hover, #article_toolbar a:focus {
background: #999; background-color: #999;
} }
.shaarli:before { .shaarli:before {
@ -868,7 +886,7 @@ blockquote {
} }
.icon-rss { .icon-rss {
background: #000; background-color: #000;
color: #FFF; color: #FFF;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
} }
@ -883,7 +901,7 @@ blockquote {
} }
.list-tags .icon-rss:hover, .list-tags .icon-rss:focus { .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
background: #FFF; background-color: #FFF;
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
@ -944,7 +962,7 @@ pre code {
margin-left: 0; margin-left: 0;
} }
body > header { body > header {
background: #333; background-color: #333;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
@ -990,11 +1008,11 @@ pre code {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
cursor: pointer; cursor: pointer;
background: #999; background-color: #999;
font-size: 1.2em; font-size: 1.2em;
} }
.desktopHide:hover, .desktopHide:focus { .desktopHide:hover, .desktopHide:focus {
background: #FFF; background-color: #FFF;
} }
#links { #links {
display: none; display: none;

2
themes/baggy/view.twig
View File

@ -16,7 +16,7 @@
{% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" class="tool email icon icon-mail" title="{% trans "Email" %}"><span>{% trans "Email" %}</span></a></li>{% endif %} {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" class="tool email icon icon-mail" title="{% trans "Email" %}"><span>{% trans "Email" %}</span></a></li>{% endif %}
{% if constant('SHARE_SHAARLI') == 1 %}<li><a href="{{ constant('SHAARLI_URL') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="{% trans "shaarli" %}"><span>{% trans "shaarli" %}</span></a></li>{% endif %} {% if constant('SHARE_SHAARLI') == 1 %}<li><a href="{{ constant('SHAARLI_URL') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="{% trans "shaarli" %}"><span>{% trans "shaarli" %}</span></a></li>{% endif %}
{% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numFlattrs }})</a></li>{% endif %}{% endif %} {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numFlattrs }})</a></li>{% endif %}{% endif %}
{% if constant('CARROT') == 1 %}<li><a href="https://secure.carrot.org/GiveAndGetBack.do?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}" target="_blank" title="{% trans "carrot" %}"><span>Carrot</span></a></li>{% endif %} {% if constant('CARROT') == 1 %}<li><a href="https://secure.carrot.org/GiveAndGetBack.do?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}" class="tool carrot icon-image icon-image--carrot" target="_blank" title="{% trans "carrot" %}"><span>Carrot</span></a></li>{% endif %}
{% if constant('SHOW_PRINTLINK') == 1 %}<li><a title="{% trans "Print" %}" class="tool icon icon-print" href="javascript: window.print();"><span>{% trans "Print" %}</span></a></li>{% endif %} {% if constant('SHOW_PRINTLINK') == 1 %}<li><a title="{% trans "Print" %}" class="tool icon icon-print" href="javascript: window.print();"><span>{% trans "Print" %}</span></a></li>{% endif %}
<li><a href="./?epub&amp;method=id&amp;value={{ entry.id|e }}" title="Generate epub file">EPUB</a></li> <li><a href="./?epub&amp;method=id&amp;value={{ entry.id|e }}" title="Generate epub file">EPUB</a></li>
<li><a href="mailto:hello@wallabag.org?subject=Wrong%20display%20in%20wallabag&amp;body={{ entry.url|url_encode }}" title="{% trans "Does this article appear wrong?" %}" class="tool bad-display icon icon-delete"><span>{% trans "Does this article appear wrong?" %}</span></a></li> <li><a href="mailto:hello@wallabag.org?subject=Wrong%20display%20in%20wallabag&amp;body={{ entry.url|url_encode }}" title="{% trans "Does this article appear wrong?" %}" class="tool bad-display icon icon-delete"><span>{% trans "Does this article appear wrong?" %}</span></a></li>

3
themes/default/css/style-default.css
View File

@ -39,7 +39,8 @@ a.flattr span {
} }
a.carrot span { a.carrot span {
background-image: url('../img/default/carrot.png') background-image: url('../../_global/img/icons/carrot-icon--black.png');
background-size: 16px 16px;
} }
a.email span { a.email span {

BIN
themes/default/img/default/carrot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 718 B