diff --git a/apps/susidns/src/jsp/addressbook.jsp b/apps/susidns/src/jsp/addressbook.jsp index 953296185..23533b0c7 100644 --- a/apps/susidns/src/jsp/addressbook.jsp +++ b/apps/susidns/src/jsp/addressbook.jsp @@ -61,10 +61,10 @@
@@ -140,12 +140,10 @@ ${book.loadBookMessages} - - - - - -
<%=intl._t("Search")%>: " >
+
+ +" > +
@@ -212,7 +210,7 @@ ${book.loadBookMessages} <% /* book.notEmpty */ %> -
+

<%=intl._t("This address book is empty.")%>

diff --git a/apps/susidns/src/jsp/config.jsp b/apps/susidns/src/jsp/config.jsp index af8e1c86c..64323d569 100644 --- a/apps/susidns/src/jsp/config.jsp +++ b/apps/susidns/src/jsp/config.jsp @@ -57,10 +57,10 @@
diff --git a/apps/susidns/src/jsp/details.jsp b/apps/susidns/src/jsp/details.jsp index 37c111396..b6063de75 100644 --- a/apps/susidns/src/jsp/details.jsp +++ b/apps/susidns/src/jsp/details.jsp @@ -54,10 +54,10 @@
diff --git a/apps/susidns/src/jsp/index.jsp b/apps/susidns/src/jsp/index.jsp index 44505c2d2..944711ac7 100644 --- a/apps/susidns/src/jsp/index.jsp +++ b/apps/susidns/src/jsp/index.jsp @@ -55,10 +55,10 @@
diff --git a/apps/susidns/src/jsp/subscriptions.jsp b/apps/susidns/src/jsp/subscriptions.jsp index 095d8b5d8..b12f320f3 100644 --- a/apps/susidns/src/jsp/subscriptions.jsp +++ b/apps/susidns/src/jsp/subscriptions.jsp @@ -55,10 +55,10 @@
diff --git a/history.txt b/history.txt index 4dd699d1c..96b500f79 100644 --- a/history.txt +++ b/history.txt @@ -24,6 +24,11 @@ there are more optional sections available (ticket #1996) * I2PTunnel: Add hostname / destination (b32) information to server section on index page (for parity with client tunnels section) + * SusiDNS: + - Reinstate filter removal on addressbook navigation links (ticket #1996) + - Reduce vertical padding for filter buttons section + - Migrate search section to div and reposition page elements to better + integrate with host list and minimize whitespace 2017-10-11 zzz * Console: Validate host header (thx Kevin Froman) diff --git a/installer/resources/themes/susidns/classic/susidns.css b/installer/resources/themes/susidns/classic/susidns.css index 19d4acf47..539e06a5c 100644 --- a/installer/resources/themes/susidns/classic/susidns.css +++ b/installer/resources/themes/susidns/classic/susidns.css @@ -7,11 +7,12 @@ body { background: #eef url(/themes/console/classic/images/bg0.png); background-size: 120px 120px; color: #0c153d; + color: #2c354f; min-width: 700px; } body.iframed { - background: #fff !important; + background: transparent !important; margin: 0; } @@ -70,7 +71,7 @@ table.book th { } .book th:last-child { - background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } table.book tr:hover textarea { @@ -131,6 +132,10 @@ td.destinations { background: #fff; } +.iframed #add { + background: transparent; +} + #add td:first-child { width: 100px; white-space: nowrap; @@ -139,7 +144,7 @@ td.destinations { #navi { border: 1px solid #89f; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); margin: -1px -11px 0; padding: 0; position: sticky; @@ -156,11 +161,18 @@ td.destinations { border-right: none !important; } +#content h3 { + padding: 3px 10px 4px 30px !important; + background: #fafafa url(/themes/console/images/info/question.png) 4px center no-repeat; + background: url(/themes/console/images/info/question.png) 4px center no-repeat, linear-gradient(to right, #fafafa 28px, rgba(0,0,0,0) 28px); + background-size: 20px 20px, 100% 100%; + background-blend-mode: luminosity; +} + .iframed #content h3 { border: none; margin: 0; border-bottom: 1px dotted #89f; - background: none; } .iframed #content h3:first-child { @@ -194,7 +206,9 @@ div.help { } .iframed #helpsubs { - margin: 0 0 -1px; + margin: 0 -11px -1px; + border-left: none; + border-right: none; } .iframed #helpconfig { @@ -223,13 +237,14 @@ p { } h3 { - color: #0c153d; + color: #2c354f; font-size: 11pt; font-weight: bold; border: 1px solid #89f; margin: -1px -11px 10px; padding: 5px 10px; background: #fff; + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); text-transform: capitalize; } @@ -267,7 +282,7 @@ th { line-height:12pt; padding:5px 10px; font-size:10pt; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); border-bottom: 1px solid #89f; } @@ -349,27 +364,43 @@ div#filter { word-spacing: 0.2em; background: #fff; text-align: center; + position: relative; + z-index: 10; +} + +.iframed div#filter { + background: url(/themes/console/classic/images/bg0.png); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/themes/console/classic/images/bg0.png); + background-size: 120px 120px; } #filter p { + margin: 6px 0 5px; line-height: 220%; text-transform: capitalize; text-align: center; } #filter a, #filter a:visited { - border: 1px solid #ccc; + display: inline-block; margin: 2px 0; padding: 0 6px; + font-size: 10pt; + color: #555; border-radius: 2px; + text-transform: capitalize; + box-shadow: inset 0 0 0 1px #fff; + border: 1px solid #ccc; + min-width: 16px; background: #fff; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); - font-size: 10pt; - box-shadow: inset 0 0 0 1px #fff; - text-transform: capitalize; - color: #555; - display: inline-block; - min-width: 16px; + line-height: 180%; +} + +#filter span a { + font-weight: normal; + color: #333 !important; + line-height: 140%; } #filter a:hover, #filter a:focus { @@ -391,13 +422,14 @@ div#filter { } #filter span { - display: inline-block; - border: 1px solid #89f; - margin-top: -1px; min-width: 300px !important; - padding: 5px; + display: inline-block; + margin-top: -1px; + padding: 6px 5px; + border: 1px solid #89f; + font-size: 11pt; font-weight: bold; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } #filter span > * { @@ -423,37 +455,31 @@ div#filter { text-align: center !important; } -td.search:first-child { - text-align: right; - white-space: nowrap; - font-weight: bold; - width: 20%; -} - -td.search:last-child { - text-align: left; - width: 20%; -} - #search form { text-align: center !important; } -#search table { +#booksearch { + min-width: 300px; + margin: -1px 0 -13px; + white-space: nowrap; + padding: 5px 5px 4px ; border: 1px solid #89f; - margin: -1px auto; background: #fff; - width: 400px; } -#search td { - padding: 5px; +#booksearch > * { + vertical-align: middle; +} + +.iframed #booksearch { + background: #eff2ff; + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } #search input[type="text"] { width: 200px; - margin-left: 10px; - background: url(/themes/console/images/buttons/search.png) 5px center no-repeat; + background: #fff url(/themes/console/images/buttons/search.png) 5px center no-repeat; padding: 5px 5px 5px 25px; } @@ -509,17 +535,27 @@ img[src="/imagegen/id?s=256&c="], img[src="/imagegen/id?s=20&c="] { } .illustrate { - max-width: 700px; - height: auto; margin: 10px auto 20px; padding: 10px; + max-width: 700px; + height: auto; + border: 1px solid #56b; border-radius: 4px; - border: 1px solid #337; font-size: 10pt; - box-shadow: inset 0 0 1px #002; - background: #fff; - filter: drop-shadow(0 0 1px #999); text-align: center; + opacity: 0.9; + box-shadow: inset 0 0 1px #ccf, 0 0 1px #77a; + background: #f8f8ff; + background: linear-gradient(rgba(250,250,255,0.5), rgba(246,246,255,0.5)), url(/themes/console/classic/images/bg2.png); + background-size: 100% 100%, 120px 120px; + transition: ease all 0.2s; +} + +.illustrate:hover { + opacity: 1; + border: 1px solid #337; + background: #fff; + transition: ease all 0.2s; } _:-ms-lang(x), img.illustrate { @@ -531,8 +567,20 @@ _:-ms-lang(x), img.illustrate { text-align: right; } -#content + #buttons { - margin-top: -10px; +#content + #buttons, #config + #buttons { + margin: -21px -11px 0; + padding: 10px; + border: 1px solid #89f; +} + +#config + #buttons { + padding-top: 21px; +} + +.iframed #content + #buttons, .iframed #config + #buttons { + border-left: none; + border-right: none; + background: #fff; } p.buttons { @@ -650,6 +698,21 @@ form[action="subscriptions"] textarea { height: 120px !important; } +div#config, form[action="subscriptions"] div#content { + margin: -11px -11px 0; +} + +textarea[name="config"], form[action="subscriptions"] textarea { + box-shadow: none; + border: 1px solid #89f; + padding: 2px 5px; +} + +.iframed textarea[name="config"], .iframed form[action="subscriptions"] textarea { + border-left: none; + border-right: none; +} + /* topnav */ #navi { @@ -659,9 +722,10 @@ form[action="subscriptions"] textarea { #navi a, #navi a:visited { border: 1px solid #6b78bf; + border: 1px solid #89f; border-radius: 2px; margin: 3px 0 !important; - box-shadow: 0 0 1px 0 #ddd; + box-shadow: 0 0 1px 0 #ddd, inset 0 0 0 1px #fff; display: inline-block; outline: none; color: #448 !important; @@ -686,7 +750,7 @@ form[action="subscriptions"] textarea { } #navi a.abook:hover { - background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%); + background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #ffd 50%); } #navi a#subs { @@ -696,7 +760,7 @@ form[action="subscriptions"] textarea { } #navi a#subs:hover { - background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%); + background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #ffd 50%); } #navi a#config { @@ -706,7 +770,7 @@ form[action="subscriptions"] textarea { } #navi a#config:hover { - background: url(/themes/console/images/buttons/configure_hover.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%); + background: url(/themes/console/images/buttons/configure_hover.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #ffd 50%); } #navi a#overview { @@ -716,19 +780,35 @@ form[action="subscriptions"] textarea { } #navi a#overview:hover { - background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%); + background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #ffd 50%); } .headline + #book > table { margin-top: 10px !important; } +#book + #buttons { + margin: -12px 10px 23px; + border: 1px solid #89f; + border-top: none; + border-bottom: none; +} + +.iframed #book + #buttons { + margin: -11px 0 0; +} + +.iframed #book + #buttons p { + margin: 0; +} + /* page titles */ .headline h3 { padding: 10px 5px 10px 40px; background: url(/themes/susidns/images/addressbook.png) 10px center no-repeat; - font-size: 11pt; + background: url(/themes/susidns/images/addressbook.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); + font-size: 12pt; text-transform: uppercase; letter-spacing: 0.08em; word-spacing: 0.1em; @@ -736,10 +816,12 @@ form[action="subscriptions"] textarea { .headline#subscriptions h3 { background: url(/themes/susidns/images/subs_24.png) 10px center no-repeat; + background: url(/themes/susidns/images/subs_24.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } .headline#configure h3 { background: url(/themes/susidns/images/configure_24.png) 10px center no-repeat; + background: url(/themes/susidns/images/configure_24.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } .headline h4 { @@ -757,6 +839,10 @@ p.book { padding: 0 10px 0 38px !important; } +.iframed p#filtered, .iframed p.book { + background: url(/themes/susidns/images/abook.png) 18px center no-repeat; +} + /* export hosts */ #export { @@ -1006,8 +1092,8 @@ h3 { } #filter span, #filter a { - font-size: 11pt !important; - min-width: 24px !important; + font-size: 10pt !important; + min-width: 16px !important; } #filter span { diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css index 124bd3f85..d93bd8fd6 100644 --- a/installer/resources/themes/susidns/dark/susidns.css +++ b/installer/resources/themes/susidns/dark/susidns.css @@ -202,41 +202,6 @@ div#filter + div#search > form { padding: 0; } -#filter p, #search td { - font-weight: bold; -} - -#search { - text-align: center; - background: #000900; -} - -#search table { - margin: 0 auto; -} - -#search td input[type="text"] { - margin-left: 5px; -} - -#search td:first-child { - text-align: right; -} - -#search input { - margin-left: 0; - padding-left: 0; -} - -#filter p { - padding: 20px 20px 10px 17px; - text-align: center; -} - -#filter p:first-child { - padding-bottom: 0; -} - #filter p + p { display: none; } @@ -247,15 +212,26 @@ div#filter + div#search > form { margin-bottom: 15px; } +#booksearch { + padding: 6px 5px 5px; + text-align: center; +} + #filter a:link { text-transform: capitalize; } +#filter p:first-child { + padding-bottom: 0; +} + #filter p { line-height: 210%; word-spacing: 0.1em; + font-weight: bold; + text-align: center; text-transform: capitalize; - margin: 12px 0 0; + margin: 10px 0 -7px; padding: 0; } @@ -701,11 +677,15 @@ _:-ms-lang(x), img.illustrate { max-width: 600px; } -div#book { +div#book, #emptybook { padding: 0; margin: -15px 0 -5px; } +#emptybook { + margin-bottom: -7px; +} + #book table { width: 100%; border: 1px solid #2a5f29; @@ -1185,7 +1165,7 @@ h3, #filter a, #filter span { #filter a { margin: 0 2px -2px !important; - min-width: 20px; + min-width: 14px; } div#filter { diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css index 0e4e2a7db..d5fefd43c 100644 --- a/installer/resources/themes/susidns/light/susidns.css +++ b/installer/resources/themes/susidns/light/susidns.css @@ -346,6 +346,7 @@ p, #helpconfig { .iframed #helpconfig, .iframed #helpsubs { margin-top: 10px; + margin-bottom: 2px; box-shadow: inset 0 0 0 1px #fff; border-radius: 0; } @@ -601,28 +602,15 @@ textarea[name="config"]:focus, textarea[name="content"]:focus { padding: 5px 15px; margin-bottom: -1px; background: #fafaff; + text-align: center; } #search { margin-bottom: -2px; - padding: 0; - text-align: center; } -#search table { - margin: 0; - display: inline; - background: none; -} - -td.search { - text-align: left; - padding: 0; - background: none; -} - -td.search:first-child { - text-align: right; +#booksearch { + padding: 2px 5px 0; } #filter { @@ -690,6 +678,7 @@ td.search:first-child { #filter p { text-align: center; + margin: 7px 0 5px; } p#filtered { @@ -698,18 +687,10 @@ p#filtered { padding: 10px 200px 10px 32px !important; } -div#book, #messages + p { - border: 1px solid #7778bf; - padding: 10px; -} - -div#book { - margin: 1px 0 -1px; - background: #fff; -} - #messages + p { margin: 1px 0 -1px; + padding: 10px; + border: 1px solid #7778bf; } form { @@ -762,6 +743,15 @@ tr:hover .destaddress { padding: 3px; } +#bookmessages { + width: 100%; + border: 1px solid #7778bf; +} + +#bookmessages td:last-child { + text-align: right; +} + /* hostname list */ #host_list, #host_details { border: 1px solid #7778bf; @@ -1025,17 +1015,23 @@ img[src="/imagegen/id?s=256&c="], img[src="/imagegen/id?s=20&c="] { background: none; } -div#book { - padding: 8px; - background: #efefff; - background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(220, 220, 255, 0.5) 3px, #fff 5px) #fafaff; - box-shadow: inset 0 0 0 1px #fff; +div#book, #emptybook { + margin: 1px 0 -1px; + padding: 8px 8px 60px; + border: 1px solid #7778bf; + box-shadow: inset 0 0 0 1px #fff; + background: #efefff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(220, 220, 255, 0.5) 3px, #fff 5px) #fafaff; } -.iframed div#book { +.iframed div#book, .iframed #emptybook { margin-bottom: 10px; } +#emptybook { + padding: 0 8px; +} + p.book { background: url(/themes/susidns/images/abook.png) 2px center no-repeat; padding: 5px 5px 5px 24px; @@ -1060,11 +1056,11 @@ table + p.buttons { #book + #buttons { border: 1px solid #7778bf; - margin-top: -1px; + margin: -62px 9px 8px; } .iframed #book + #buttons { - margin-top: -11px; + margin: -72px 9px -2px; } form[action="export"] { @@ -1268,8 +1264,8 @@ form[action="addressbook"] table { /* export hosts */ #export { - text-align: right; margin-top: -36px; + text-align: right; } .iframed #export { diff --git a/installer/resources/themes/susidns/midnight/susidns.css b/installer/resources/themes/susidns/midnight/susidns.css index 49fb1789d..d9a38deb0 100644 --- a/installer/resources/themes/susidns/midnight/susidns.css +++ b/installer/resources/themes/susidns/midnight/susidns.css @@ -207,7 +207,8 @@ td.search > * { } #filter p { - padding: 15px 10px 0; + padding: 12px 10px 0; + margin: -3px 0 -3px; } #filter p:first-child { @@ -258,7 +259,7 @@ p#filtered { vertical-align: middle; border: 1px solid #2d295f; border-radius: 0 0 2px 2px; - padding: 5px 10px !important; + padding: 5px 10px 8px !important; min-width: 300px; max-width: 500px; width: 40%; @@ -274,7 +275,7 @@ p#filtered { word-spacing: normal; display: inline-block; border: none !important; - background: !important; + background: none !important; transform: none; } @@ -296,8 +297,9 @@ p#filtered { text-align: center; } -#search table { - margin: 0 auto; +#booksearch { + padding: 7px 5px; + text-align: center; } p { @@ -649,7 +651,7 @@ _:-ms-lang(x), img.illustrate { max-width: 600px; } -div#book { +div#book, #emptybook { padding: 0; margin: -15px 0 -10px; }