* Facelifting: replace png and gif icons with svg

This commit is contained in:
Max Pozdeev 2020-08-18 19:25:46 +03:00
parent 3d4a21f83f
commit 293f120426
28 changed files with 151 additions and 42 deletions

View file

@ -1,13 +1,7 @@
Image files page_white_text.png and calendar.png and some icons in buttons.png
are (or based on) icons from Silk Icons set by Mark James (http://www.famfamfam.com/lab/icons/silk/),
licensed under the Creative Commons Attribution 2.5 License (http://creativecommons.org/licenses/by/2.5/).
newtask-ext.svg - ...
Some icons in buttons.png are based on "Silk Companion 1" icons set by Damien Guard
(http://damieng.com/creative/icons/silk-companion-1-icons), licensed under the
Creative Commons Attribution 2.5 License (http://creativecommons.org/licenses/by/2.5/).
rss.svg, rss-disabled.svg - ...
Icons in mzl.png are (or based on) icons from Mozilla Source Code,
(http://www.mozilla.org/MPL/#source-code), licensed under the terms
of tri-license (MPL 1.1/GPL 2.0/LGPL 2.1).
calendar.svg - ...
Other images in this directory were made by Max Pozdeev and licensed under the terms of GNU GPL v2+.

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<polygon points="3 2, 13 8, 3 14" fill="gray"/>
</svg>

After

Width:  |  Height:  |  Size: 121 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<polygon points="10 3, 4 8, 10 13" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 122 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<polygon points="6 3, 12 8, 6 13" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 121 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<!--<rect x="0" y="0" width="16" height="16" fill="red"/>-->
<rect x="1" y="2" width="14" height="12" rx="3" fill="#999999"/>
<polygon points="4 6, 12 6, 8 10" fill="#ffffff"/>
</svg>

After

Width:  |  Height:  |  Size: 248 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polygon points="4 6, 12 6, 8 10" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 121 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<polygon points="0 2, 8 2, 4 6" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 115 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
<polyline points="4 8, 7 12, 13 5" fill="none" stroke-width="2" stroke="#000" />
</svg>

After

Width:  |  Height:  |  Size: 152 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<!--<rect x="0" y="0" width="16" height="16" fill="red"/>-->
<rect x="0" y="0" width="10" height="10" rx="2" fill="#888"/>
<line x1="2" y1="2" x2="8" y2="8" stroke-width="1" stroke="#fff"/>
<line x1="8" y1="2" x2="2" y2="8" stroke-width="1" stroke="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 329 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1,6 @@
<?xml version="1.0" ?>
<svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="gray">
<g><g><path d="M20.8,27.2l2.1-6.3L38,5.8l4.2,4.2L27.1,25.1L20.8,27.2z M24.7,21.9L24,24l2.1-0.7L39.4,10L38,8.6L24.7,21.9z"/></g>
<g><path d="M42.9,9.3l-4.2-4.2l1.4-1.4c1.2-1.2,3-1.2,4.2,0c0.6,0.6,0.9,1.3,0.9,2.1c0,0.8-0.3,1.5-0.9,2.1L42.9,9.3z M41.5,5.1 l1.4,1.4c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7C42.5,4.7,41.9,4.7,41.5,5.1z"/></g></g>
<g><path d="M38,46H5c-1.7,0-3-1.3-3-3V10c0-1.7,1.3-3,3-3h27v2H5c-0.6,0-1,0.4-1,1v33c0,0.6,0.4,1,1,1h33c0.6,0,1-0.4,1-1V16h2v27 C41,44.7,39.7,46,38,46z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 635 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
<polygon points="6 2, 12 8, 6 14" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 190 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
<polygon points="2 5, 14 5, 8 11" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 190 B

View file

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<defs>
<linearGradient id="gradient1" x1="10%" y1="90%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#eee"/>
</linearGradient>
<style type="text/css"><![CDATA[
.line1 { stroke:#333; stroke-width:0.3; }
]]></style>
</defs>
<polygon points="2 1, 11 1, 14 4, 14 15, 2 15" stroke-width="0.2" stroke="#333" fill="#fff" fill-opacity="0.0" />
<line x1="5" y1="4" x2="10" y2="4" class="line1"/>
<line x1="5" y1="6" x2="11" y2="6" class="line1"/>
<line x1="5" y1="8" x2="11" y2="8" class="line1"/>
<line x1="5" y1="10" x2="11" y2="10" class="line1"/>
<line x1="5" y1="12" x2="11" y2="12" class="line1"/>
<polygon points="3 2, 10 2, 10 5, 13 5, 13 14, 3 14" fill="url(#gradient1)" fill-opacity="0.4" />
</svg>

After

Width:  |  Height:  |  Size: 860 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 342 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<path d="M8 11 L8 5 Z M5 8 L11 8 Z" stroke-width="2" stroke="#3d3f41"/>
</svg>

After

Width:  |  Height:  |  Size: 143 B

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="16" height="16">
<title>RSS feed icon</title>
<style type="text/css">
.button {stroke: none; fill: #bbb;}
.symbol {stroke: none; fill: white;}
</style>
<rect class="button" width="8" height="8" rx="1.5" />
<circle class="symbol" cx="2" cy="6" r="1" />
<path class="symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z" />
<path class="symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z" />
</svg>

After

Width:  |  Height:  |  Size: 540 B

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="16" height="16">
<title>RSS feed icon</title>
<style type="text/css">
.button {stroke: none; fill: orange;}
.symbol {stroke: none; fill: white;}
</style>
<rect class="button" width="8" height="8" rx="1.5" />
<circle class="symbol" cx="2" cy="6" r="1" />
<path class="symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z" />
<path class="symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z" />
</svg>

After

Width:  |  Height:  |  Size: 542 B

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g stroke-width="1.5" fill="none">
<circle cx="8" cy="8" r="7" fill="#7f7f7f"/>
<path d="M11.0 11.0l-6-6" stroke="#ffffff"/>
<path d="M5.0 11.0l+6-6" stroke="#ffffff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 244 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g stroke-width="1.5" stroke="#7f7f7f" fill="none">
<path d="M14 14l-4-4"/>
<circle cx="7" cy="7" r="4.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 183 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<circle cx="4" cy="8" r="1"/>
<circle cx="8" cy="8" r="1"/>
<circle cx="12" cy="8" r="1"/>
</svg>

After

Width:  |  Height:  |  Size: 162 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g stroke-width="1.5" fill="none">
<path d="M12.0 12.0l-8-8" stroke="#7f7f7f"/>
<path d="M4.0 12.0l+8-8" stroke="#7f7f7f"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 199 B

View file

@ -1,6 +1,6 @@
/*
This file is a part of myTinyTodo.
Copyright 2009-2010 Max Pozdeev <maxpozdeev@gmail.com>
Copyright 2009-2010,2020 Max Pozdeev <maxpozdeev@gmail.com>
*/
/* default style */
@ -48,8 +48,8 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
.mtt-tab { background-color:#fbfbfb; border:1px solid #ededed; border-bottom:none; border-top-right-radius:8px; }
.mtt-tab a { position:relative; margin:0; font-size:0.9em; text-decoration:none; text-align:center; white-space:nowrap; color:#333333; display:block; height:20px; padding:6px 6px 0px 2px; outline:none; vertical-align:top; }
.mtt-tab a span { display:inline-block; min-width:75px; max-width:195px; cursor:pointer; padding:0; overflow:hidden; }
.mtt-tab .list-action { display:none; float:left; position:absolute; top:6px; right:5px; width:15px; height:15px; background:transparent url(images/icons.gif) 0 0 no-repeat; cursor:pointer; }
.mtt-tab .list-action:hover, .mtt-tab .list-action.mtt-menu-button-active { background-position:-16px 0; }
.mtt-tab .list-action { display:none; float:left; position:absolute; top:6px; right:5px; width:16px; height:16px; background:transparent url(images/arrdown.svg) no-repeat; cursor:pointer; }
.mtt-tab .list-action:hover, .mtt-tab .list-action.mtt-menu-button-active { background-image:url(images/arrdown-hover.svg); }
.mtt-tab.mtt-tabs-selected span { margin-right:16px; }
.mtt-tab.mtt-tabs-selected .list-action { display:block; }
.mtt-tab.mtt-tabs-selected { border-color:transparent; background-color:#ededed; }
@ -96,13 +96,12 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
}
.mtt-tabs-add-button { float:left; margin-top:1px; padding:6px 2px 0px 2px; font-size:0.9em; height:20px; background-color:#fbfbfb; border:1px solid #ededed; border-bottom:none; border-top-right-radius: 8px; }
.mtt-tabs-add-button:hover { cursor:pointer; }
.mtt-tabs-add-button>span { display:block; width:16px; height:16px; background:url(images/buttons.png) 0 0 no-repeat; }
.mtt-tabs-add-button:hover>span { background-position:-16px 0; }
.mtt-tabs-add-button>span { display:block; width:16px; height:16px; background:url(images/plus.svg) no-repeat; }
.mtt-tabs-add-button:hover { cursor:pointer; background-color:#ddd; }
#mtt_body.readonly .mtt-tabs-add-button { display:none; }
.mtt-tabs-select-button>span { background:url(images/icons.gif) -64px 0 no-repeat; }
.mtt-tabs-select-button:hover>span, .mtt-tabs-select-button.mtt-menu-button-active>span { background-position:-80px 0; }
.mtt-tabs-select-button>span { background:url(images/selectlist.svg) no-repeat; }
/*.mtt-tabs-select-button:hover>span, .mtt-tabs-select-button.mtt-menu-button-active>span { background:url(images/selectlist.svg) no-repeat; }*/
#mtt_body.no-lists #toolbar > * { visibility:hidden; }
@ -112,8 +111,8 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
.mtt-img-button:hover { border:1px solid #ccc; border-radius:3px; }
.mtt-img-button span { display:inline-block; width:16px; height:16px; }
.arrdown { display:inline-block; height:7px; width:9px; background:url(images/arrdown.gif); }
.arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.gif); }
.arrdown { display:inline-block; height:9px; width:9px; background:url(images/arrdown2.svg) no-repeat; }
.arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.svg) no-repeat; }
/* Quick Task Add */
@ -125,27 +124,26 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
#task_placeholder.placeholding span { display:inline-block; }
.mtt-taskbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
.mtt-taskbox-icon.mtt-icon-submittask { background:url(images/mzl.png) 0px -32px no-repeat; right:4px; }
.mtt-taskbox-icon.mtt-icon-submittask { background:url(images/add.svg) no-repeat; right:4px; }
#newtask_adv span { background:url(images/buttons.png) 0 -48px no-repeat; }
#newtask_adv:hover span { background-position:-16px -48px; }
#newtask_adv span { background:url(images/newtask-ext.svg) no-repeat; }
#mtt_body.show-all-tasks #htab_newtask, #mtt_body.readonly #htab_newtask { display:none; }
/* Live Search */
#htab_search { float:right; }
#search {
color:#444444; background:#fff; height:1.35em; padding:2px 18px; width:100%; margin-left:-38px; /*padding+border*/
color:#444444; background:#fff; height:1.35em; padding:2px 20px; width:100%; margin-left:-42px; /*padding+border*/
border:1px solid #ccc; border-radius:10px;
}
#search_close { display:none; }
.mtt-searchbox td { padding:0px; width:180px; }
.mtt-searchbox-c { position:relative; padding-left:38px; /*input padding+border*/ }
.mtt-searchbox-c { position:relative; padding-left:42px; /*input padding+border*/ }
.mtt-searchbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
.mtt-searchbox-icon.mtt-icon-search { background:url(images/mzl.png) 0px -16px no-repeat; left:4px; top:55%; }
.mtt-searchbox-icon.mtt-icon-cancelsearch { background:url(images/mzl.png) 0px 0px no-repeat; right:4px; }
.mtt-searchbox-icon.mtt-icon-search { background:url(images/search.svg) no-repeat; left:4px; top:50%; }
.mtt-searchbox-icon.mtt-icon-cancelsearch { background:url(images/search-cancel.svg) no-repeat; right:4px; }
#searchbar { font-size:1em; font-weight:normal; display:none; margin-top:5px; }
#searchbarkeyword { font-weight:bold; }
@ -160,17 +158,17 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
.tag-filter { margin-left:3px; margin-right:3px; }
.tag-filter-exclude { text-decoration:line-through; }
.mtt-filter-header { font-weight:bold; margin-right:.33em; }
.mtt-filter-close { cursor:pointer; position:relative; top:2px; margin-left:3px; display:inline-block; width:10px; height:10px; background:url(images/closetag.gif) 0 0 no-repeat; }
.mtt-filter-close { cursor:pointer; position:relative; top:2px; margin-left:3px; display:inline-block; width:10px; height:10px; background:url(images/closetag.svg) no-repeat; }
.task-left { float:left; }
.task-toggle { visibility:hidden; margin-top:2px; cursor:pointer; width:15px; height:15px; float:left; background:url(images/icons.gif) -64px -16px no-repeat; }
.task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left; background:url(images/note-toggle.svg) no-repeat; }
li.task-has-note .task-toggle { visibility:visible; }
li.task-expanded .task-toggle { background-position:-80px -16px; }
li.task-expanded .task-toggle { background-image:url(images/note-toggled.svg); }
.task-middle { margin-left:40px; margin-right:20px; }
#tasklist { list-style-type: none; margin: 0; padding: 0;}
#tasklist li { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; }
#tasklist li:hover { background-color:#f6f6f6; }
.task-actions { float:right; width:20px; text-align:right; }
.task-actions { float:right; width:20px; min-height:18px; padding-top:1px; text-align:right; }
.task-date { color:#999999; font-size:0.8em; margin-left:4px; display:none; }
.task-date-completed { color:#999999; display:none; margin-left:5px; }
.show-inline-date .task-date { display:inline; }
@ -202,14 +200,14 @@ li.task-completed .task-title a { color:#777777; }
border-radius:5px;
}
a.taskactionbtn { display:block; float:right; height:15px; width:15px; text-decoration:none; background:url(images/icons.gif) 0 0 no-repeat; display:none; }
li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active { background-position:-16px 0; display:block;}
a.taskactionbtn { display:block; float:right; height:16px; width:16px; text-decoration:none; background:url(images/arrdown.svg) no-repeat; display:none; }
li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active { background-image:url(images/arrdown-hover.svg); display:block;}
#tasklist.filter-past li, #tasklist.filter-today li, #tasklist.filter-soon li { display:none; }
#tasklist.filter-past li.past, #tasklist.filter-today li.today, #tasklist.filter-soon li.soon { display:block; }
#tasklist.filter-past li.task-completed, #tasklist.filter-today li.task-completed, #tasklist.filter-soon li.task-completed { display:none; }
.task-note-block { margin-left:2px; color:#777777; background:url(images/page_white_text.png) left 2px no-repeat; padding-left:19px; padding-top:2px; min-height:16px; margin-top:2px; display:none; }
.task-note-block { margin-left:2px; color:#777777; background:url(images/note.svg) left 2px no-repeat; padding-left:19px; padding-top:2px; min-height:16px; margin-top:2px; display:none; }
li.task-expanded .task-note-block { display:block; }
li.task-completed .task-note-block .task-note { text-decoration:line-through; }
.task-note-area { display:none; margin-bottom:5px; }
@ -267,7 +265,7 @@ a.mtt-back-button { font-size:0.8em; }
#tagcloud {
overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px;
width:100%; max-width:450px; margin:0px 7px 7px 7px; text-align:center;
-moz-box-shadow:1px 2px 5px rgba(0,0,0,0.5); -webkit-box-shadow:1px 2px 5px rgba(0,0,0,0.5);
box-shadow:1px 2px 5px rgba(0,0,0,0.5);
}
#tagcloud .tag { margin:1px 0px; padding:2px; line-height:140%; color:black; }
#tagcloud .tag:hover { background-color:#999988; color:white; }
@ -283,8 +281,8 @@ a.mtt-back-button { font-size:0.8em; }
#tagcloud .w9 { font-size:170%; }
#tagcloudcancel { float:right; }
#tagcloudcancel span { background:url(images/buttons.png) 0 -32px no-repeat; }
#tagcloudcancel span:hover { background-position:-16px -32px; }
#tagcloudcancel span { background:url(images/tagcloud-close.svg) no-repeat; }
/*#tagcloudcancel span:hover { background:url(images/tagcloud-close.svg) no-repeat; }*/
#taskview { padding:2px; }
@ -302,8 +300,8 @@ a.mtt-back-button { font-size:0.8em; }
.ui-datepicker-next { position:absolute; right:2px; height:20px; text-decoration:none; }
.ui-datepicker-title { text-align:center; line-height:20px; }
.ui-icon { width:16px; height:16px; text-indent:-99999px; overflow:hidden; }
.ui-datepicker .ui-icon-circle-triangle-w { display:block; position:absolute; top:50%; margin-top:-8px; left:50%; background:url(images/icons.gif) -48px -16px no-repeat; }
.ui-datepicker .ui-icon-circle-triangle-e { display:block; position:absolute; top:50%; margin-top:-8px; right:50%; background:url(images/icons.gif) -32px -16px no-repeat; }
.ui-datepicker .ui-icon-circle-triangle-w { display:block; position:absolute; top:50%; margin-top:-8px; left:50%; background:url(images/arr-left.svg) no-repeat; }
.ui-datepicker .ui-icon-circle-triangle-e { display:block; position:absolute; top:50%; margin-top:-8px; right:50%; background:url(images/arr-right.svg) no-repeat; }
.mtt-menu-button {
-moz-user-select:none; -webkit-user-select: none;
@ -334,18 +332,18 @@ a.mtt-back-button { font-size:0.8em; }
.mtt-menu-container li:hover a { color:white; }
.mtt-menu-container li.mtt-menu-delimiter { height:0px; line-height:0; border-bottom:1px solid #cccccc; margin:2px -1px; padding:0px; font-size:0px; }
.mtt-menu-container .menu-icon { width:16px; height:16px; position:absolute; left:4px; top:50%; margin-top:-8px; }
li.mtt-item-checked .menu-icon { background:url(images/icons.gif) -16px -16px; }
li.mtt-item-checked .menu-icon { background:url(images/checkmark.svg) no-repeat; }
li.mtt-menu-indicator .submenu-icon {
position:absolute; right:2px; top:50%; margin-top:-8px;
width:16px; height:16px; background:url(images/icons.gif) -32px -16px no-repeat;
width:16px; height:16px; background:url(images/arr-right.svg) no-repeat;
}
li.mtt-item-hidden { display:none; }
#slmenucontainer li.mtt-list-hidden a { font-style:italic; }
#cmenulistscontainer li.mtt-list-hidden { font-style:italic; }
#btnRssFeed .menu-icon { background:url(images/buttons.png) -16px -64px no-repeat; }
#btnRssFeed.mtt-item-disabled .menu-icon { background:url(images/buttons.png) 0px -64px no-repeat; }
#btnRssFeed .menu-icon { background:url(images/rss.svg) no-repeat; }
#btnRssFeed.mtt-item-disabled .menu-icon { background:url(images/rss-disabled.svg) no-repeat; }
.mtt-settings-table { width:100%; border-collapse:collapse; }
.mtt-settings-table th, .mtt-settings-table td { border-bottom:1px solid #dedede; padding:8px; vertical-align:top; }