use backgrounds for icon buttons so that dark and black themes look better

This commit is contained in:
azivner 2018-06-09 09:28:50 -04:00
parent 89a5cab98f
commit 654c116c58
2 changed files with 19 additions and 26 deletions

View file

@ -385,7 +385,9 @@ div.ui-tooltip {
}
button.icon-button {
padding: 4px;
height: 28px;
width: 28px;
background: no-repeat center;
}
/* Themes */

View file

@ -76,21 +76,18 @@
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<div style="display: flex; align-items: center;">
<input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
<button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)">
<img src="/images/icons/search-20.png" alt="Search"/>
</button>
<button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
style="background-image: url('/images/icons/search-20.png');"></button>
&nbsp;
<button id="save-search-button" class="btn btn-sm icon-button" title="Save search">
<img src="/images/icons/save-20.png" alt="Save search"/>
</button>
<button id="save-search-button" class="btn btn-sm icon-button" title="Save search"
style="background-image: url('/images/icons/save-20.png');"></button>
&nbsp;
<button id="close-search-button" class="btn btn-sm icon-button" title="Close search">
<img src="/images/icons/x-20.png" alt="Close search"/>
</button>
<button id="close-search-button" class="btn btn-sm icon-button" title="Close search"
style="background-image: url('/images/icons/x-20.png');"></button>
</div>
</div>
@ -124,37 +121,31 @@
<span id="note-id-display" title="Note ID"></span>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px;"
style="display: none; margin-right: 10px; background-image: url('/images/icons/edit-20.png');"
title="Toggle edit"
id="toggle-edit-button">
<img src="/images/icons/edit-20.png" alt="Toggle edit"/>
</button>
id="toggle-edit-button"></button>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px;"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
title="Render (Ctrl+Enter)"
id="render-button">
<img src="/images/icons/play-20.png" alt="Render"/>
</button>
id="render-button"></button>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px;"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
title="Execute (Ctrl+Enter)"
id="execute-script-button">
<img src="/images/icons/play-20.png" alt="Render"/>
</button>
id="execute-script-button"></button>
<div>
<button type="button"
class="btn btn-sm icon-button"
id="protect-button"
title="Protected note can be viewed and edited only after entering password">
<img src="/images/icons/shield-20.png"/>
title="Protected note can be viewed and edited only after entering password"
style="background-image: url('/images/icons/shield-20.png');">
</button><button type="button"
class="btn btn-sm icon-button"
id="unprotect-button"
title="Not protected note can be viewed without entering password">
<img src="/images/icons/shield-off-20.png"/>
title="Not protected note can be viewed without entering password"
style="background-image: url('/images/icons/shield-off-20.png');">
</button>
</div>