Use png icons instead of font icons
authorr <r@freesoftwareextremist.com>
Wed, 1 Jan 2020 09:40:47 +0000 (09:40 +0000)
committerr <r@freesoftwareextremist.com>
Wed, 1 Jan 2020 09:40:47 +0000 (09:40 +0000)
static/main.css
templates/header.tmpl
templates/notification.tmpl
templates/postform.tmpl
templates/status.tmpl
templates/user.tmpl

index 07953317037a3f2f055abd24177ff53444b33c28..ad03792909c675692f2f243f887da935f5687186 100644 (file)
        display: inline-block;
        text-decoration: none;
        color: #333333;
-       vertical-align: middle;
 }
 
 .status-action a:hover,
 .status-action a:hover i {
-       color: #777777;
+       opacity: 0.8;
 }
 
 .status-action a.status-time {
        width: auto;
 }
 
-.fa.liked {
-       color: yellow;
-}
-
-.fa.retweeted {
-       color: green;
+.status-action-count span {
+       vertical-align: middle;
 }
 
 .page-title {
        display: flex;
 }
 
+.notification-info-text span {
+       vertical-align: middle;
+}
+
 .notification-follow-uname {
        margin-top: 8px;
 }
        display: inline-block;
 }
 
-.fa {
-       font-size: 11pt !important;
-       color: #444444;
-}
-
 .post-form-emoji-link {
-       margin-left: 8px;
+       margin-left: 4px;
 }
 
 .post-form-emoji-link i {
        font-size: 14pt !important;
 }
 
+.post-form-title {
+       vertical-align: middle;
+}
+
 .user-info {
        margin-bottom: 8px;
        display: flex;
 #settings-form button[type=submit] {
        margin-top: 8px;
 }
+
+.icon {
+       height: 16px;
+       vertical-align: middle;
+}
+
+.icon.post-emoji {
+       height: 20px;
+}
index 8d05014b4203c9da69b42cd9f3fb09b7b4d082a6..1ff15d61151965fc20012bfe4a5ddef923a4b985 100644 (file)
@@ -8,6 +8,5 @@
        {{if .CustomCSS}}
        <link rel="stylesheet" href="{{.CustomCSS}}">
        {{end}}
-       <link rel="stylesheet" href="/static/fonts/fork-awesome.css">
 </head>
 <body>
index c4f6f2890c2f89c86cc7b29cdf76b0751b9c7d37..d68382f8df7b7da8f2cc669f7bfb8d7c5ac0ef5f 100644 (file)
                        </a>
                </div>
                <div>
-                       <div>
+                       <div class="notification-info-text">
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-                               <i class="fa fa-user-plus"></i>
-                               followed you
+                               <img class="icon" src="/static/icons/user-plus.png" alt="followed" />
+                               <span> followed you </span>
                        </div>
                        <div class="notification-follow-uname">
                                @{{.Account.Acct}}
                        </a>
                </div>
                <div>
-                       <div>
+                       <div class="notification-info-text">
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-                               <i class="fa fa-retweet retweeted"></i>
-                               retweeted your post
+                               <img class="icon" src="/static/icons/retweeted.png" alt="retweeted" />
+                               <span> retweeted your post </span>
                        </div>
                        {{template "status" .Status}}
                </div>
                        </a>
                </div>
                <div>
-                       <div>
+                       <div class="notification-info-text">
                                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-                               <i class="fa fa-star liked"></i>
-                               liked your post
+                               <img class="icon" src="/static/icons/liked.png" alt="liked" />
+                               <span> liked your post </span>
                        </div>
                        {{template "status" .Status}}
                </div>
index a79f86bd50c45e1c791db26fbe3704320c877361..4e2d4a40142f0273f0ed3870f5d9ce7d2ed2b938 100644 (file)
@@ -1,12 +1,12 @@
 <form class="post-form" action="/post" method="POST" enctype="multipart/form-data">
        {{if .ReplyContext}}
        <input type="hidden" name="reply_to_id" value="{{.ReplyContext.InReplyToID}}" />
-       <label for="post-content"> Reply to {{.ReplyContext.InReplyToName}} </label>
+       <label for="post-content" class="post-form-title"> Reply to {{.ReplyContext.InReplyToName}} </label>
        {{else}}
-       <label for="post-content"> New post </label>
+       <label for="post-content" class="post-form-title"> New post </label>
        {{end}}
-       <a class="post-form-emoji-link" href="/emojis" target="_blank">
-               <i class="fa fa-smile-o" title="emoji reference"></i>
+       <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji reference">
+               <img class="icon post-emoji" src="/static/icons/smile-o.png" alt="emojis" />
        </a>
        <div class="post-form-content-container">
                <textarea id="post-content" name="content" class="post-content" cols="50" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
index 2013f47aebbff2dd59a5db03d3a007258c1d84aa..7facba270dfbd52fb375af49bad70a6bdf796790 100644 (file)
@@ -5,7 +5,7 @@
                        <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
                </a>
                <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-               <i class="fa fa-retweet retweeted"></i>
+               <img class="icon" src="/static/icons/retweeted.png" alt="retweeted" />
                retweeted
        </div>
        {{template "status" .Reblog}}
                                </a>
                                <a class="status-visibility">
                                        {{if eq .Visibility "public"}}
-                                       <i class="fa fa-globe" title="Public"></i>
+                                       <img class="icon" src="/static/icons/globe.png" alt="Public" title="Public" />
                                        {{else if eq .Visibility "unlisted"}}
-                                       <i class="fa fa-unlock-alt" title="Unlisted"></i>
+                                       <img class="icon" src="/static/icons/unlock-alt.png" alt="Unlisted" title="Unlisted" />
                                        {{else if eq .Visibility "private"}}
-                                       <i class="fa fa-lock" title="Private"></i>
+                                       <img class="icon" src="/static/icons/lock.png" alt="Private" title="Private" />
                                        {{else if eq .Visibility "direct"}}
-                                       <i class="fa fa-envelope" title="Direct"></i>
+                                       <img class="icon" src="/static/icons/envelope.png" alt="Direct" title="Direct" />
                                        {{end}}
                                </a>
                                <a class="remote-link" href="{{.URL}}" target="_blank" title="source">
-                                       <i class="fa fa-link"></i>
+                                       <img class="icon" src="/static/icons/link.png" alt="source" />
                                </a>
                        </div>
                        {{end}}
                        <div class="status-reply-container">
                                {{if .InReplyToID}}
-                               <i class="fa fa-mail-forward"></i>
+                               <img class="icon" src="/static/icons/mail-forward.png" alt="reply to" />
                                <a class="status-reply-to" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> reply to {{.Pleroma.InReplyToAccountAcct}} </a>
                                {{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
                                {{end}}
@@ -88,7 +88,7 @@
                        <div class="status-action-container"> 
                                <div class="status-action">
                                        <a class="status-you" href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply"> 
-                                               <i class="fa fa-reply"></i>
+                                               <img class="icon" src="/static/icons/reply.png" alt="reply" />
                                        </a>
                                        <a class="status-action-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if .ThreadInNewTab}}target="_blank"{{end}}>
                                                <span> {{DisplayInteractionCount .RepliesCount}} </span>
                                <div class="status-action">
                                        {{if or (eq .Visibility "private") (eq .Visibility "direct")}}
                                        <a class="status-retweet" title="this status cannot be retweeted"> 
-                                               <i class="fa fa-retweet"></i>
+                                               <img class="icon" src="/static/icons/retweet.png" alt="retweet" />
                                        </a>
                                        {{else}}
                                        {{if .Reblogged}}
                                        <a class="status-retweet" href="/unretweet/{{.ID}}" title="undo retweet"> 
-                                               <i class="fa fa-retweet retweeted"></i>
+                                               <img class="icon" src="/static/icons/retweeted.png" alt="undo retweet" />
                                        </a>
                                        {{else}}
                                        <a class="status-retweet" href="/retweet/{{.ID}}" title="retweet"> 
-                                               <i class="fa fa-retweet"></i>
+                                               <img class="icon" src="/static/icons/retweet.png" alt="retweet" />
                                        </a>
                                        {{end}}
                                        {{end}}
                                <div class="status-action">
                                        {{if .Favourited}}
                                        <a class="status-like" href="/unlike/{{.ID}}" title="unlike"> 
-                                               <i class="fa fa-star liked"></i>
+                                               <img class="icon" src="/static/icons/liked.png" alt="unlike" />
                                        </a>
                                        {{else}}
                                        <a class="status-like" href="/like/{{.ID}}" title="like"> 
-                                               <i class="fa fa-star-o"></i>
+                                               <img class="icon" src="/static/icons/star-o.png" alt="like" />
                                        </a>
                                        {{end}}
                                        <a class="status-action-count" href="/likedby/{{.ID}}" title="click to see the the list"> 
index 0c134af9bbb452232021879481ae95b76c7d11e4..53de635fcca42b6f8fb4c75400d80ec9a7d1f5c9 100644 (file)
@@ -14,7 +14,7 @@
                        <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>  
                        <span class="status-uname"> {{.User.Acct}} </span>
                        <a class="remote-link" href="{{.User.URL}}" target="_blank" title="remote profile">
-                               <i class="fa fa-link"></i>
+                               <img class="icon" src="/static/icons/link.png" alt="link" />
                        </a>
                </div>
                <div>