From 1c6ca5011df6fe1391f50f2b7bf81f9e4c85d25f Mon Sep 17 00:00:00 2001 From: str4d Date: Wed, 25 Oct 2017 09:47:34 +0000 Subject: [PATCH] Theme updates Console: - light: - Lighten/tint buttons and dropdowns to better blend with reworked theme, vary text color for different button states - Increase vertical spacing for status/buttons in news section - Fix minor rendering issue with h1's (remove bottom border-radius) - Fix some mismatched heading coloring issues - Fix alignment issue on /configservice in Arabic/Chinese (ticket #2024) - Ensure spacing of sidebar elements is consistent in Chinese - dark: Overhaul theme - classic: Add fallback CSS to ensure browsers without CSS3 support can display icons on buttons (tested with Netsurf) Proxy: Remove truncation of URLs in the error messages and handle with CSS to avoid UI breakage I2PSnark - Add button hoverstate for tracker details, torrent details and file icons - light - Sync buttons in embedded mode with console theme - Fix non-functioning message log close icon - dark: Overhaul theme and sync with console theme in embedded mode - classic: refresh CSS Susimail: - Overhaul dark theme - Sync theme to console theme by default, override if user sets theme (unless universal themeing is enabled) --- .../i2ptunnel/I2PTunnelHTTPClientBase.java | 6 +- apps/i2ptunnel/jsp/editServer.jsp | 2 +- .../net/i2p/router/web/ConfigUIHelper.java | 12 +- .../src/net/i2p/router/web/LogsHelper.java | 2 +- .../src/src/i2p/susi/webmail/WebMail.java | 5 +- history.txt | 23 + .../themes/console/classic/console.css | 224 ++++++++-- .../themes/console/classic/i2ptunnel.css | 4 +- .../resources/themes/console/dark/console.css | 130 ++++-- .../themes/console/dark/console_big.css | 6 + .../themes/console/dark/i2ptunnel.css | 40 +- .../themes/console/light/console.css | 306 ++++++++----- .../themes/console/light/console_ar.css | 32 +- .../themes/console/light/console_big.css | 6 +- .../themes/console/light/i2ptunnel.css | 32 +- .../resources/themes/console/light/mobile.css | 37 +- .../themes/console/midnight/console.css | 58 ++- .../themes/console/midnight/i2ptunnel.css | 4 +- .../themes/snark/classic/nocollapse.css | 2 +- .../resources/themes/snark/classic/snark.css | 421 ++++++++++-------- .../resources/themes/snark/dark/snark.css | 280 +++++++++--- .../resources/themes/snark/light/snark.css | 136 +++++- .../resources/themes/snark/midnight/snark.css | 58 ++- .../resources/themes/snark/ubergine/snark.css | 56 ++- .../themes/snark/vanilla/nocollapse.css | 2 +- .../resources/themes/snark/vanilla/snark.css | 199 +++++---- .../resources/themes/susidns/dark/susidns.css | 90 ++-- .../themes/susidns/light/susidns.css | 56 +-- .../themes/susimail/dark/susimail.css | 109 +++-- .../themes/susimail/light/susimail.css | 115 ++--- 30 files changed, 1666 insertions(+), 787 deletions(-) diff --git a/apps/i2ptunnel/java/src/net/i2p/i2ptunnel/I2PTunnelHTTPClientBase.java b/apps/i2ptunnel/java/src/net/i2p/i2ptunnel/I2PTunnelHTTPClientBase.java index 213874efe3..9ea12bea7a 100644 --- a/apps/i2ptunnel/java/src/net/i2p/i2ptunnel/I2PTunnelHTTPClientBase.java +++ b/apps/i2ptunnel/java/src/net/i2p/i2ptunnel/I2PTunnelHTTPClientBase.java @@ -698,10 +698,8 @@ public abstract class I2PTunnelHTTPClientBase extends I2PTunnelClientBase implem out.write(""); - if (targetRequest.length() > 80) - out.write(DataHelper.escapeHTML(targetRequest.substring(0, 75)) + "…"); - else - out.write(uri); + // Long URLs are handled in CSS + out.write(uri); out.write(""); if (usingWWWProxy) { out.write("

"); diff --git a/apps/i2ptunnel/jsp/editServer.jsp b/apps/i2ptunnel/jsp/editServer.jsp index 6a2904cca2..7d55560617 100644 --- a/apps/i2ptunnel/jsp/editServer.jsp +++ b/apps/i2ptunnel/jsp/editServer.jsp @@ -115,7 +115,7 @@ input.default { width: 1px; height: 1px; visibility: hidden; } - " value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext tunnelDescription" /> + " value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext tunnelDescriptionText" /> diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java index 783baaa0bb..091f27e58d 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java @@ -13,16 +13,16 @@ public class ConfigUIHelper extends HelperBase { String current = _context.getProperty(CSSHelper.PROP_THEME_NAME, CSSHelper.DEFAULT_THEME); Set themes = themeSet(); for (String theme : themes) { - buf.append("
") + buf.append("
\n"); } boolean universalTheming = _context.getBooleanProperty(CSSHelper.PROP_UNIVERSAL_THEMING); buf.append("
"); @@ -168,10 +168,10 @@ public class ConfigUIHelper extends HelperBase { if (lang.equals("xx") && !isAdvanced()) continue; // we use "lang" so it is set automagically in CSSHelper - buf.append("
") + buf.append("value=\"").append(lang).append("\" id=\"").append(lang).append("\">") .append("\"\"") .append("
"); int under = lang.indexOf('_'); @@ -183,7 +183,7 @@ public class ConfigUIHelper extends HelperBase { .append(name) .append(')'); } - buf.append("
\n"); + buf.append("
\n"); } return buf.toString(); } diff --git a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java index fa3af99b97..f79910b0ae 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java @@ -131,7 +131,7 @@ public class LogsHelper extends HelperBase { return "

" + _t("File not found") + ": " + f.getAbsolutePath() + "

"; } else { str = str.replace("&", "&").replace("<", "<").replace(">", ">"); - return "

" + _t("File location") + ": " + f.getAbsolutePath() + "

\n
" + str + "
"; + return "

" + _t("File location") + ": " + f.getAbsolutePath() + "

\n
" + str + "
"; } } diff --git a/apps/susimail/src/src/i2p/susi/webmail/WebMail.java b/apps/susimail/src/src/i2p/susi/webmail/WebMail.java index 035d1d472f..3044a1c3c4 100644 --- a/apps/susimail/src/src/i2p/susi/webmail/WebMail.java +++ b/apps/susimail/src/src/i2p/susi/webmail/WebMail.java @@ -1611,8 +1611,11 @@ public class WebMail extends HttpServlet private void processRequest( HttpServletRequest httpRequest, HttpServletResponse response, boolean isPOST ) throws IOException, ServletException { - String theme = Config.getProperty(CONFIG_THEME, DEFAULT_THEME); I2PAppContext ctx = I2PAppContext.getGlobalContext(); + // Fetch routerconsole theme (or use our default if it doesn't exist) + String theme = ctx.getProperty(RC_PROP_THEME, DEFAULT_THEME); + // Apply any override + theme = Config.getProperty(CONFIG_THEME, theme); boolean universalTheming = ctx.getBooleanProperty(RC_PROP_UNIVERSAL_THEMING); if (universalTheming) { // Fetch routerconsole theme (or use our default if it doesn't exist) diff --git a/history.txt b/history.txt index c65aa9b012..216c425716 100644 --- a/history.txt +++ b/history.txt @@ -31,6 +31,19 @@ - /tunnels: - Indicate that no participating tunnels will be built when shared bw is too low - Replace with id attribute for anchor links + - light: + - Lighten/tint buttons and dropdowns to better blend with reworked theme, + vary text color for different button states + - Increase vertical spacing for status/buttons in news section + - Fix minor rendering issue with h1's (remove bottom border-radius) + - Fix some mismatched heading coloring issues + - Fix alignment issue on /configservice in Arabic/Chinese (ticket #2024) + - Ensure spacing of sidebar elements is consistent in Chinese + - dark: Overhaul theme + - classic: Add fallback CSS to ensure browsers without CSS3 support can + display icons on buttons (tested with Netsurf) + * Proxy: Remove truncation of URLs in the error messages and handle with CSS to + avoid UI breakage * I2PTunnel: Add hostname / destination (b32) information to server section on index page (for parity with client tunnels section) * I2PSnark @@ -45,11 +58,21 @@ image resources - Standardize 'Save Configuration' action to return to top of the page (so we can see message log entry) + - Add button hoverstate for tracker details, torrent details and file icons + - light + - Sync buttons in embedded mode with console theme + - Fix non-functioning message log close icon + - dark: Overhaul theme and sync with console theme in embedded mode + - classic: refresh CSS * 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 + * Susimail: + - Overhaul dark theme + - Sync theme to console theme by default, override if user sets theme + (unless universal themeing is enabled) 2017-10-11 zzz * Console: Validate host header (thx Kevin Froman) diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css index cf74033b68..cf50731609 100644 --- a/installer/resources/themes/console/classic/console.css +++ b/installer/resources/themes/console/classic/console.css @@ -131,10 +131,10 @@ img { } .warning a:visited { - color: #f90 !important; + color: #f40 !important; } -.warning a:hover { +.warning a:hover, .warning a:focus, .warning a:visited:focus { color: #d30 !important; } @@ -406,10 +406,14 @@ img[src="/themes/console/images/i2plogo.png"] { line-height: 125%; } +/* siderbar logo */ + +.routersummary div[style="height: 36px;"] { + height: 32px !important; +} + .routersummary img[src$="i2plogo.png"] { - margin-top: 3px; - margin-left: 0; - width: 185px; + width: 190px; height: auto; box-shadow: 0 0 1px 1px rgba(180,180,180,0.7); -moz-user-select: none; @@ -417,6 +421,27 @@ img[src="/themes/console/images/i2plogo.png"] { user-select: none; } +.routersummary a img:first-child { + opacity: 0.8; + border: none; +} + +.routersummary a img:first-child:hover, .routersummary a img:first-child:active { + opacity: 1; + filter: drop-shadow(0 0 1px #f60); + box-shadow: none; +} + +.routersummary a[href="/"], .routersummary a[href="/console"] { + outline: none !important; +} + +.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img { + filter: drop-shadow(0 0 1px #f60) saturate(200%); +} + +/* end siderbar logo */ + .routersummary a { padding: 2px; vertical-align: middle; @@ -667,6 +692,11 @@ img[src="/themes/console/images/i2plogo.png"] { font-size: 8pt; } +.sb_notice a { + vertical-align: baseline; + padding: 0; +} + #sb_warning + .sb_notice { margin-top: 10px; } @@ -676,7 +706,20 @@ p:empty + .sb_notice { } .routersummary form { - margin: -2px 0; + margin: -2px -2px -3px; +} + +#sb_warning + hr { + opacity: 0; +} + +#sb_warning + hr + form { + margin-top: -1px; +} + +#sb_warning + p:empty + form { + margin-top: 10px; + margin-bottom: -3px; } /* sidebar news */ @@ -754,25 +797,6 @@ div.refresh { color: #f60; } -.routersummary a img:first-child { - opacity: 0.8; - border: none; -} - -.routersummary a img:first-child:hover, .routersummary a img:first-child:active { - opacity: 1; - filter: drop-shadow(0 0 1px #89f); - box-shadow: none; -} - -.routersummary a[href="/"], .routersummary a[href="/console"] { - outline: none !important; -} - -.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img { - filter: drop-shadow(0 0 1px #f60) saturate(200%); -} - /* network status */ .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, @@ -1280,7 +1304,7 @@ select { -moz-appearance: none; -webkit-appearance: none; appearance: none; - background: url(images/dropdown.png) right center no-repeat #fff; + background: url(images/dropdown.png) right center no-repeat #eee; background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd); margin: 3px 5px; vertical-align: middle; @@ -1305,10 +1329,12 @@ select option { } select:hover, select:active { + background: #ddd url(images/dropdown_hover.png) right center no-repeat !important; background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } select:focus { + background: #fff url(images/dropdown_hover.png) right center no-repeat !important; background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; box-shadow: 0 0 0 1px #89f; } @@ -1400,6 +1426,7 @@ input[type="text"], input[type="password"] { border-radius: 2px; padding: 4px; color: #333; + background-color: #fefefe; } input[type="text"]:focus, input[type="password"]:focus { @@ -1414,17 +1441,18 @@ input[type="text"][readonly], input[type="text"][readonly]:focus { } button, input, select { + background-color: #eee; font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; color: #333; } button:hover, input[type="submit"]:hover, input[type="reset"]:hover { - background: #fff; + background-color: #ddd; background: linear-gradient(to bottom, #ddd, #fff); } button:active, input[type="submit"]:active, input[type="reset"]:active { - background: #ddd; + background-color: #fff; } input.search[type="text"] { @@ -1510,6 +1538,7 @@ input[type="submit"], input[type="reset"], button { } button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus { + background: #ddd; background: linear-gradient(to bottom, #ddd, #fff); border: 1px solid #89f; color: #222; @@ -1519,82 +1548,98 @@ button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focu button:active, input[type="submit"]:active, input[type="reset"]:active { border: 1px solid #999; box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555; + background-color: #ddd; background-blend-mode: luminosity; color: #555; } input.accept, button.accept { + background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center; background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.accept:hover, button.accept:hover, input.accept:focus, button.accept:focus { + background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center; background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.accept[value^="Unban"], button.accept[value^="Unban"] { + background: #eee url(/themes/console/images/buttons/unban.png) no-repeat 7px center; background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover, input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus { + background: #fff url(/themes/console/images/buttons/unban.png) no-repeat 7px center; background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.accept[value^="Create"], button.accept[value^="Create"] { + background: #eee url(/themes/console/images/buttons/create.png) no-repeat 7px center; background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover, input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus { + background: #fff url(/themes/console/images/buttons/create.png) no-repeat 7px center; background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.accept[value^="Filter"], button.accept[value^="Filter"] { + background: #eee url(/themes/console/images/buttons/filter.png) no-repeat 7px center; background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover, input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus { + background: #fff url(/themes/console/images/buttons/filter.png) no-repeat 7px center; background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.add, button.add { + background: #eee url(/themes/console/images/buttons/add.png) no-repeat 7px center; background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.add:hover, button.add:hover, input.add:focus, button.add:focus { + background: #fff url(/themes/console/images/buttons/add.png) no-repeat 7px center; background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.add[value^="Adjust"], button.add[value^="Adjust"] { + background: #eee url(/themes/console/images/buttons/edit2.png) no-repeat 7px center; background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover, input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus { + background: #fff url(/themes/console/images/buttons/edit2.png) no-repeat 7px center; background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.cancel, button.cancel { + background: #eee url(/themes/console/images/buttons/no.png) no-repeat 7px center; background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.cancel:hover, button.cancel:hover, input.cancel:focus, button.cancel:focus { + background: #fff url(/themes/console/images/buttons/no.png) no-repeat 7px center; background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.accept[value^="Show"], button.accept[value^="Show"], input.check[value^="View"], button.check[value^="View"] { + background: #eee url(/themes/console/images/buttons/show.png) no-repeat 7px center; background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } @@ -1603,11 +1648,13 @@ input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover, input.check[value^="View"]:hover, button.check[value^="View"]:hover, input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus, input.check[value^="View"]:focus, button.check[value^="View"]:focus { + background: #fff url(/themes/console/images/buttons/show.png) no-repeat 7px center; background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.cancel[value^="Hide"], button.cancel[value^="Hide"], input.delete[value^="Do not view"], button.delete[value^="Do not view"] { + background: #eee url(/themes/console/images/buttons/hide.png) no-repeat 7px center; background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } @@ -1616,71 +1663,85 @@ input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover, input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover, input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus, input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus { + background: #fff url(/themes/console/images/buttons/hide.png) no-repeat 7px center; background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.check, button.check { + background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center; background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.check:hover, button.check:hover, input.check:focus, button.check:focus { + background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center; background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.check[value$="updates"], button.check[value$="updates"] { + background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center; background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.check[value$="updates"]:hover, button.check[value$="updates"]:hover, input.check[value$="updates"]:focus, button.check[value$="updates"]:focus { + background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.delete, button.delete { + background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 7px center; background: url(/themes/console/images/buttons/delete.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.delete:hover, button.delete:hover, input.delete:focus, button.delete:focus { + background: #eee url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.delete[value^="Ban"], button.delete[value^="Ban"] { + background: #eee url(/themes/console/images/buttons/ban.png) no-repeat 7px center; background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover, input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus { + background: #fff url(/themes/console/images/buttons/ban.png) no-repeat 7px center; background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.download, button.download { + background: #eee url(/themes/console/images/buttons/download.png) no-repeat 7px center; background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.download:hover, button.download:hover, input.download:focus, button.download:focus { + background: #fff url(/themes/console/images/buttons/download.png) no-repeat 7px center; background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.download[value^="Join"], button.download[value^="Join"] { + background: #eee url(/themes/console/images/buttons/users.png) no-repeat 7px center; background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.download[value^="Join"]:hover, button.download[value^="Join"]:hover, input.download[value^="Join"]:focus, button.download[value^="Join"]:focus { + background: #fff url(/themes/console/images/buttons/users.png) no-repeat 7px center; background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.download[value$="from File"], button.download[value$="from File"], input.download[value$="from file"], button.download[value$="from file"] { + background: #eee url(/themes/console/images/buttons/from-file.png) no-repeat 7px center; background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } @@ -1689,96 +1750,115 @@ input.download[value$="from File"]:hover, button.download[value$="from File"]:ho input.download[value$="from file"]:hover, button.download[value$="from file"]:hover, input.download[value$="from File"]:focus, button.download[value$="from File"]:focus, input.download[value$="from file"]:focus, button.download[value$="from file"]:focus { + background: #fff url(/themes/console/images/buttons/from-file.png) no-repeat 7px center; background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.download[value^="Dump"], button.download[value^="Dump"] { + background: #eee url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center; background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover, input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus { + background: #fff url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center; background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.go, button.go, input[value="GO"] { + background: #eee url(/themes/console/images/buttons/go.png) no-repeat 7px center; background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.go:hover, button.go:hover, input[value="GO"]:hover, input.go:focus, button.go:focus, input[value="GO"]:focus { + background: #fff url(/themes/console/images/buttons/go.png) no-repeat 7px center; background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.go[value^="Create"], button.go[value^="Create"] { + background: #eee url(/themes/console/images/buttons/create-file.png) no-repeat 7px center; background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.go[value^="Create"]:hover, button.go[value^="Create"]:hover, input.go[value^="Create"]:focus, button.go[value^="Create"]:focus { + background: #fff url(/themes/console/images/buttons/create-file.png) no-repeat 7px center; background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.reload, button.reload { + background: #eee url(/themes/console/images/buttons/restore.png) no-repeat 7px center; background: url(/themes/console/images/buttons/restore.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.reload:hover, button.reload:hover, input.reload:focus, button.reload:focus { + background: #fff url(/themes/console/images/buttons/restore_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.reload[value$="restart"], button.reload[value$="restart"] { + background: #eee url(/themes/console/images/buttons/restart.png) no-repeat 7px center; background: url(/themes/console/images/buttons/restart.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover, input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus { + background: #fff url(/themes/console/images/buttons/restart_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.reload[value^="Update"], button.reload[value^="Update"] { + background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center; background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover, input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus { + background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.reload[value="Force GC"], button.reload[value="Force GC"] { + background: #eee url(/themes/console/images/buttons/clean.png) no-repeat 7px center; background: url(/themes/console/images/buttons/clean.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover, input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus { + background: #fff url(/themes/console/images/buttons/clean_hover.png) no-repeat 7px center; background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff); } input.stop, button.stop { + background: #eee url(/themes/console/images/buttons/shutdown.png) no-repeat 7px 6px; background: url(/themes/console/images/buttons/shutdown.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd); padding: 5px 7px 5px 23px; } input.stop:hover, button.stop:hover, input.stop:focus, button.stop:focus { + background: #fff url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 7px 6px; background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff); } button.search { + background: #eee url(/themes/console/images/buttons/search.png) no-repeat 7px 6px; background: url(/themes/console/images/buttons/search.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd); - padding: 5px 7px 5px 23px; + padding: 5px 7px 5px 25px; } button.search:hover, button.search:focus { + background: #fff url(/themes/console/images/buttons/search_hover.png) no-repeat 7px 6px; background: url(/themes/console/images/buttons/search_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff); } @@ -1792,50 +1872,62 @@ button.control { } button.accept.control { + background: #eee url(/themes/console/images/buttons/Xstart.png) center center no-repeat; background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.accept.control:hover, button.accept.control:focus { + background: #fff url(/themes/console/images/buttons/Xstart.png) center center no-repeat; background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } button.stop.control { + background: #eee url(/themes/console/images/buttons/Xstop.png) center center no-repeat; background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.stop.control:hover, button.stop.control:focus { + background: #fff url(/themes/console/images/buttons/Xstop.png) center center no-repeat; background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } button.add.control { + background: #eee url(/themes/console/images/buttons/edit2.png) center center no-repeat; background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.add.control:hover, button.add.control:focus { + background: #fff url(/themes/console/images/buttons/edit2.png) center center no-repeat; background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } button.delete.control { + background: #eee url(/themes/console/images/buttons/delete.png) center center no-repeat; background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.delete.control:hover, button.delete.control:focus { + background: #fff url(/themes/console/images/buttons/delete_hover.png) center center no-repeat; background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } button.check.control { + background: #eee url(/themes/console/images/buttons/update.png) center center no-repeat; background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.check.control:hover, button.check.control:focus { + background: #fff url(/themes/console/images/buttons/update_hover.png) center center no-repeat; background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } button.download.control { + background: #eee url(/themes/console/images/buttons/download.png) center center no-repeat; background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } button.download.control:hover, button.download.control:focus { + background: #fff url(/themes/console/images/buttons/download.png) center center no-repeat; background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); } @@ -1854,16 +1946,18 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } .routersummary .reload, .routersummary .stop { + min-width: 92px !important; text-indent: -99999px; background-size: 16px 16px, 100% 100% !important; } .routersummary .reload { + background: #eee url(/themes/console/images/buttons/restart.png) center center no-repeat !important; background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; } .routersummary .reload:hover, .routersummary .reload:focus { - background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: #ddd url(/themes/console/images/buttons/restart_hover.png) center center no-repeat !important; background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; border: 1px solid #89f; } @@ -1874,6 +1968,7 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } .routersummary .stop { + background: #eee url(/themes/console/images/buttons/shutdown.png) center center no-repeat; background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); } @@ -1897,41 +1992,49 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } .routersummary .reload[value="restartImmediate"] { + background: #eee url(/themes/console/images/buttons/restart.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/restart.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active { + background: #eee url(/themes/console/images/buttons/restart_hover.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/restart_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .stop[value="shutdownImmediate"] { + background: #eee url(/themes/console/images/buttons/shutdown.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/shutdown.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active { + background: #eee url(/themes/console/images/buttons/shutdown_hover.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/shutdown_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .reload[value="Reseed"] { + background: #eee url(/themes/console/images/buttons/download.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active { + background: #ddd url(/themes/console/images/buttons/download.png) center left 7px no-repeat !important; background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; background-size: 14px auto, 100% 100% !important; } .routersummary .download { + background: #eee url(/themes/console/images/buttons/download.png) 7px center no-repeat; background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #fff, #ddd); background-size: 14px 14px, 100% 100% !important; } .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { + background: #ddd url(/themes/console/images/buttons/download.png) 7px center no-repeat; background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #ddd, #fff); background-size: 14px 14px, 100% 100% !important; } @@ -2034,6 +2137,10 @@ div.welcome { min-width: 570px; } +.main#dns { + background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(images/bg0.png) !important; +} + .main#tunnelmgr { padding: 0 10px; min-width: 550px; @@ -2143,15 +2250,15 @@ div.news p:last-child { margin-bottom: 10px; } -div.news a, #warning a { +div.news a { color: #7f560f !important; } -div.news a:hover, div.news a:focus, div.news a:visited:hover, div.news a:visited:focus, #warning a:hover, #warning a:focus { +div.news a:hover, div.news a:focus, div.news a:visited:hover, div.news a:visited:focus { color: #f60 !important; } -div.news a:visited, #warning a:visited { +div.news a:visited { color: #5f4312 !important; } @@ -2223,8 +2330,8 @@ div.news hr:last-child { /* top navigation */ -div.confignav { - padding: 5px; +.confignav { + padding: 5px 5px 6px; margin: -16px -16px 5px -16px; border: 1px solid #89f; font-size: 9pt; @@ -2375,7 +2482,7 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist { } #bandwidthconfig td:first-child { - width: 10%; + width: 25%; white-space: nowrap; } @@ -3129,7 +3236,7 @@ h1 { font-size: 18pt; text-align: left; border: 1px solid #89f; - padding: 19px 20px; + padding: 18px 20px 16px; margin: 0 0 0 211px; line-height: 93%; text-transform: uppercase; @@ -3300,7 +3407,7 @@ h2 { } h2, h3, h4#updateplugins { - background: url(images/titlebg.png) right center no-repeat; + background: #fff url(images/titlebg.png) right center no-repeat; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); box-shadow: inset 0 0 0 1px #fff; } @@ -3467,6 +3574,7 @@ h4.app, h4.app2 { h4.app { margin-top: -5px; + background: #fefeff url(/themes/console/images/favicon.ico) 8px center no-repeat; background: url(/themes/console/images/eepsite.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); background-size: 16px 16px, 100% 100%; background-blend-mode: luminosity, normal; @@ -3476,6 +3584,7 @@ h4.app { h4.app2 { clear: left; margin-top: 5px !important; + background: #fefeff url(/themes/console/light/images/globe.png) 8px center no-repeat; background: url(/themes/console/images/info/globe.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); background-size: 16px 16px, 100% 100%; background-blend-mode: luminosity, normal; @@ -3610,9 +3719,12 @@ table.search { border-radius: 0 0 2px 2px; } +.search td { + padding: 1px 0; +} + .search td:nth-child(2) { text-align: center !important; - padding: 0; } .search button.search { @@ -4181,6 +4293,10 @@ h3#graphdisplay { border: 1px solid #f90; } +.graphspanel a { + font-size: 0; +} + .graphspanel hr { margin: 10px 0; } @@ -4470,6 +4586,10 @@ body.iframed { font-weight: bold; } +.themechoice .optbox:checked + img, .themechoice .optbox:checked + object { + transform: scale(0.9); +} + .themechoice .optbox:focus + object ~ div.themelabel { color: #f60 !important; background: #fff; @@ -4494,7 +4614,7 @@ body.iframed { margin: 0 -5px -3px; position: relative; top: 4px; - padding: 5px 10px 3px 5px; + padding: 5px 10px 5px 5px; } #themeoptions br { @@ -4519,7 +4639,7 @@ p#helptranslate { } #themeoptions input { - margin: 6px 8px 6px 6px; + margin: 2px 8px 2px 6px; vertical-align: sub; } @@ -5518,8 +5638,8 @@ h3.stats { } #help ul { - margin-bottom: 5px; - margin-top: -5px; + margin-bottom: 8px; + margin-top: -2px; padding-left: 15px; } @@ -5533,6 +5653,10 @@ h3.stats { padding-top: 0; } +#help code, #help tt { + font-size: 8pt; +} + ul#reachability { padding-left: 15px; } @@ -5543,6 +5667,10 @@ ul#reachability { margin-right: 0; } +#help li, #help p, #help td { + line-height: 140%; +} + #configinfo th { box-shadow: inset 0 0 0 1px #fff; } @@ -5847,6 +5975,10 @@ p.infowarn { margin-right: 8px; } +#floodfillconfig input[type="radio"] { + margin-right: 3px; +} + p#clientconf.infohelp, p#webappconfigtext.infohelp { background: #fff url(/themes/console/images/info/java_edit.png) 12px center no-repeat; padding: 15px 15px 15px 50px; @@ -7217,10 +7349,14 @@ button, input, select, textarea, code, tt, pre, .netdbentry th, .configtable th, } .routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li, -.news #newsStatus, .news #newsDisplay, .topness, .footnote, .cells tt, #profilelist tt, .sb_notice { +.news #newsStatus, .news #newsDisplay, .topness, .footnote, .cells tt, #profilelist tt, .sb_notice, #help code, #help tt { font-size: 9pt !important; } +.routersummary .reload, .routersummary .stop { + min-width: 102px !important; +} + .cells tt, #profilelist tt { margin-left: 3px !important; } diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css index 2790ecfa5d..f74961fec1 100644 --- a/installer/resources/themes/console/classic/i2ptunnel.css +++ b/installer/resources/themes/console/classic/i2ptunnel.css @@ -710,7 +710,7 @@ input:focus::-moz-placeholder { opacity: 0; } -input.tunnelName, input.tunnelDescription, #userAgents { +input.tunnelName, input.tunnelDescriptionText, #userAgents { width: 80%; min-width: 280px; text-overflow: ellipsis; @@ -893,7 +893,7 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { border-bottom: 1px solid transparent !important; } -#clientTunnels .tunnelDescription { +.tunnelDescription { padding-top: 1px !important; } diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css index a8faad8c88..0bcdde3fc7 100644 --- a/installer/resources/themes/console/dark/console.css +++ b/installer/resources/themes/console/dark/console.css @@ -171,7 +171,12 @@ div.warning { padding: 0 0 5px; } +.warning hr { + margin-top: 10px !important; +} + #jumplinks h4 { + padding-bottom: 10px; margin-bottom: 10px; } @@ -328,6 +333,7 @@ div.warning { text-transform: uppercase; border-radius: 0; mix-blend-mode: exclusion; + transition: ease all 0.2s; } .routersummary h3::after { @@ -339,19 +345,22 @@ div.warning { .routersummary h3 a { vertical-align: middle; + transition: ease all 0.2s; } .routersummary h3:hover { background: #010 !important; box-shadow: inset 0 0 2px 2px #000; + transition: ease all 0.2s; } .routersummary h3:hover a { color: #f60; + transition: ease all 0.2s; } .routersummary h3:active { - box-shadow: inset 4px 4px 2px #000; + box-shadow: inset 4px 4px 4px #000; } .routersummary h4 { @@ -457,6 +466,11 @@ div.warning { line-height: 120%; } +#sb_warning + p:empty + form { + margin-top: 11px; + margin-bottom: -6px; +} + #sb_internals td, #sb_services td, #sb_advanced td, #sb_help td { /* color ellipsis */ color: #595 !important; } @@ -705,16 +719,17 @@ div.refresh { border-spacing: 0; padding: 0; border: 1px solid #5df; + border: 1px solid rgba(85, 221, 255, 0.5); box-shadow: 0 0 1px #ccf; } #sb_bandwidthgraph:hover { - border: 1px solid #f60; + border: 1px solid #0f6; cursor: url(/themes/console/images/cursor_zoom.png), pointer; } a:active #sb_bandwidthgraph { - border: 1px solid #f30; + border: 1px solid #0f3; } #sb_bandwidthgraph td { @@ -992,6 +1007,8 @@ a:active img[src="/themes/console/images/i2plogo.png"] { padding: 6px 8px 6px 10px; letter-spacing: 0.08em !important; word-spacing: normal !important; +/* background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), url(/themes/console/dark/images/camotile2.png), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #003000, #000 75%) !important; + background-blend-mode: normal, exclusion, normal, normal;*/ } #news h3 font { @@ -1077,7 +1094,7 @@ div.news hr { margin: 8px 0 5px 0; } -#newsStatus { +#news #newsStatus { float: left; padding-top: 3px; padding-bottom: 1px; @@ -1156,13 +1173,15 @@ div.widescroll { /* only scroll content, not entire page eg /peers */ .confignav { background: url(images/header.png) repeat-x scroll center center #000; background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important; - padding: 7px !important; + background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) repeat scroll 0 0%, rgba(0, 0, 0, 0) url("/themes/console/dark/images/camotile2.png") !important; + padding: 7px 7px 8px !important; margin: -1px -16px 15px; border: 1px solid #494; font-weight: bold !important; line-height: 130% !important; text-align: center; - box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030; + box-shadow: inset 0 0 0 1px #000; + background-blend-mode: exclusion, normal; } .tab, .tab2 { @@ -1266,14 +1285,21 @@ div.widepanel h3 { /* graphs */ #graphs { - padding-left: 10px; - padding-right: 10px; + padding: 0 10px } #graphs .messages { margin: 15px 5px -5px; } +#graphs .widepanel { + margin: -4px 0 17px !important; +} + +#graphdisplay { + margin-top: 14px !important; +} + .graphspanel { padding: 0; margin: 15px 0 -15px 0; @@ -1440,9 +1466,10 @@ form[action="graphs"] { #graphs td:first-child { text-align: right; - width: 85px; + width: 10%; white-space: nowrap; - padding: 13px 3px 13px 5px; + padding: 13px 3px 13px 15px; + font-weight: bold; } #graphs td:nth-child(2) { @@ -1468,6 +1495,10 @@ form[action="graphs"] { min-width: 60px; } +.graphspanel a { + font-size: 0; +} + /* end graphs */ table { @@ -1496,7 +1527,7 @@ th { text-align: center; font-size: 9pt; background: #000 url(images/header.png) center center repeat-x; - background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important; + background: linear-gradient(to bottom, #002000, #000 75%) !important; border-top: 1px solid #494; border-bottom: 1px solid #494 !important; line-height: 110%; @@ -1890,13 +1921,19 @@ h4 { h1, h2, h3:not([id*="help"]), h4.app, h4.app2, .routersummary h3 { background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important; } h2, h3, h4 { box-shadow: inset 0 0 0 1px #000; } -h1, h4.app, h4.app2 { +.routersummary h3 { + background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + transition: ease all 0.2s; +} + +h1, h4.app, h4.app2, #news h3 { background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%), url(images/camotile2.png) #000 !important; background-blend-mode: exclusion; box-shadow: inset 0 0 0 1px #000; @@ -1940,8 +1977,9 @@ button:active { } .routersummary button.reload, .routersummary button.stop { - min-width: 86px; + min-width: 92px; text-transform: capitalize; + margin: 3px 2px; } .underline { @@ -2144,7 +2182,7 @@ select { min-width: 110px; font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; - padding: 4px 16px 4px 4px !important; + padding: 3px 16px 3px 4px !important; cursor: pointer; overflow: hidden; text-overflow: ellipsis; @@ -2225,6 +2263,7 @@ textarea[readonly]:focus { } input[type="submit"], input[type="reset"], select, button { + line-height: 120%; border: 1px solid #8b8; border-bottom: 1px solid #171; border-right: 1px solid #171; @@ -2635,9 +2674,9 @@ form[action="events"] { text-align: center; } -.tablefooter tr, .tablefooter td { +tr.tablefooter, .tablefooter td { background: #000 url(images/header.png) repeat-x center center !important; - background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%) !important; + background: linear-gradient(to bottom, #002000, #000 75%) !important; border-top: 1px solid #494 !important; border-bottom: 1px solid #494 !important; line-height: 110%; @@ -2854,7 +2893,7 @@ tr#addnew, tr#addnew:hover { .themechoice:hover object { filter: drop-shadow(0 0 1px #f60); - transition: ease filter 0.3s; + transition: ease transform 0.05s; } .themechoice:hover .themelabel { @@ -2868,6 +2907,10 @@ tr#addnew, tr#addnew:hover { box-shadow: inset 0 0 0 1px #000 !important; } +.themechoice .optbox:checked + object, .themechoice .optbox:checked + img { + transform: scale(0.9); +} + .themechoice .optbox:hover + object ~ .themelabel { color: #f60; } @@ -2945,7 +2988,7 @@ p#helptranslate { } #themeoptions input { - margin-left: 5px; + margin: 1px 5px; } #themeoptions input[type="checkbox"] { @@ -3045,9 +3088,15 @@ td#themeselect { height: 11px !important; } +.langselect input + img { + opacity: 0.6; + transition: ease all 0.3s; +} + .langselect input:hover + img { box-shadow: 0 0 2px 1px #f60; - transition: ease box-shadow 0.3s; + transition: ease all 0.3s; + opacity: 1; } .langselect input:hover + img + div.ui_lang { @@ -3780,6 +3829,7 @@ table#sidebarconf { #sidebarconf th:nth-child(1), .homelinkedit th:first-child, #consolepass th:first-child { text-align: center; background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important; + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #002000, #000 75%) !important; text-indent: -99999px; } @@ -4015,6 +4065,15 @@ ul#upnphelp li:last-child, #legal ul li:last-child { #help li { text-align: justify; + line-height: 150%; +} + +#help li:last-child { + padding-bottom: 10px; +} + +#help #faq li:last-child { + padding-bottom: 0; } /* mini faq */ @@ -4419,7 +4478,7 @@ table[id$="logs"] ul { #logs li { list-style: none; font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; - line-height: 115%; + line-height: 120%; text-align: left; display: inline-block; width: 100%; @@ -4457,11 +4516,11 @@ table[id$="logs"] ul { } font[color="#cc0000"] { - color: #c33 !important; + color: #900 !important; } #logs li font[color="#cc0000"]::before { - background: #c33; + background: #900; } font[color="#006600"] { @@ -4800,7 +4859,7 @@ ul#banlist + hr { #ipv4, #ipv6, #permabanned tr:nth-child(2) { background: #000 url(images/header.png) center center repeat-x; - background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important; + background: linear-gradient(to bottom, #002000, #000 75%) !important; border-top: 1px solid #494; border-bottom: 1px solid #494; } @@ -5732,6 +5791,10 @@ table#pluginconfig, #i2pupdates, table.homelinkedit, table#peerdefs { margin-left: 2px; } +#peerdefs td { + line-height: 140%; +} + h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, h3#webappconfig { margin-bottom: -14px !important; } @@ -5801,7 +5864,7 @@ input#hideme { h4.embeddedtitle#updateplugins { padding: 5px 10px; background: #000 url(images/header.png) center center repeat-x; - background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important; + background: linear-gradient(to bottom, #002000, #000 75%) !important; border: 1px solid #494; text-align: left; text-transform: uppercase; @@ -6731,8 +6794,9 @@ b.netdb_transport { padding: 8px 10px; font-size: 11.5pt; background: url(/themes/console/images/info/debug.png) right 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; - background-size: 20px 20px, 100% 100% !important; - background-blend-mode: luminosity, normal; + background: url(/themes/console/images/info/debug.png) right 5px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important; + background-size: 20px 20px, 100% 100%, 100% 100%, 100% 100% !important; + background-blend-mode: luminosity, normal, normal, normal; } #debug h2 + hr, .buckets hr { @@ -6804,17 +6868,19 @@ b.netdb_transport { } #debug h3.debug_outboundsessions, #debug h3.debug_inboundsessions { - padding: 6px 10px 6px 28px !important; - background-blend-mode: luminosity, normal; + padding: 6px 10px 8px 28px !important; + background-blend-mode: luminosity, normal, normal, normal; } #debug h3.debug_outboundsessions { margin-top: -2px !important; background: url(/themes/console/images/outbound.png) 6px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important; + background: url(/themes/console/images/outbound.png) 6px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important; } #debug h3.debug_inboundsessions { background: url(/themes/console/images/inbound.png) 6px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important; + background: url(/themes/console/images/inbound.png) 6px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important; } .debug_version { @@ -6872,8 +6938,7 @@ b.netdb_transport { #jardump td { border-right: 1px inset #131; - vertical-align: top; - padding: 2px 5px; + padding: 2px 5px 3px; color: #bb7; } @@ -7162,6 +7227,11 @@ td.optionsave { width: calc(100% - 22px) !important; overflow-y: hidden; } + +#help .confignav, #debug .confignav { + position: sticky; + top: 0; +} } @media screen and (min-width: 1460px) { diff --git a/installer/resources/themes/console/dark/console_big.css b/installer/resources/themes/console/dark/console_big.css index 6cccb587b6..b1144cf297 100644 --- a/installer/resources/themes/console/dark/console_big.css +++ b/installer/resources/themes/console/dark/console_big.css @@ -196,6 +196,12 @@ li .twocol { line-height: 180%; } +.routersummary button.reload, .routersummary button.stop { + min-width: 98px; + margin: 4px 3px !important; + padding: 4px 5px !important; +} + .sb_notice, .sb_notice a { font-size: 10pt !important; line-height: 120% !important; diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css index a2b1776403..2a98ce30f4 100644 --- a/installer/resources/themes/console/dark/i2ptunnel.css +++ b/installer/resources/themes/console/dark/i2ptunnel.css @@ -168,6 +168,7 @@ h2, h3 { padding: 8px 10px 8px 34px; border: 1px solid #494; background: linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%), url(/themes/console/dark/images/camotile2.png) top left !important; font-size: 11pt; text-transform: uppercase; letter-spacing: 0.08em; @@ -181,32 +182,44 @@ h2, h3 { #messages h2 { background: url(/themes/console/images/info/logs.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/logs.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } #globalTunnelControl h2 { background: url(/themes/console/images/info/control.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/control.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } #servers h2 { background: url(/themes/console/images/info/server.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/server.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } #clients h2 { background: url(/themes/console/images/info/client.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/client.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 { background: url(/themes/console/images/info/configure.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/configure.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.5) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } #wizardPanel h2 { background: url(/themes/console/images/info/wizard.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background-size: 20px auto, 100% 100%, 100% 100% !important; + background: url(/themes/console/images/info/wizard.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important; + background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important; + background-blend-mode: normal, normal, normal, exclusion, normal, normal; } /* end title images */ @@ -234,6 +247,7 @@ h3 { th { background: #000; background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #002000, #000 75%); padding: 7px 5px; border-top: 1px solid #494; border-bottom: 1px solid #494; @@ -245,6 +259,10 @@ th { word-spacing: 0.1em; } +th:first-child { + padding-left: 10px; +} + td { border-top: 1px solid #494; vertical-align: middle; @@ -649,6 +667,7 @@ input, select, button { } button, input[type="submit"], input[type="reset"], a.control, select { + line-height: 120%; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; filter: drop-shadow(0 0 1px #131); @@ -659,6 +678,7 @@ button, input[type="submit"], input[type="reset"], a.control, select { padding: 7px 5px !important; background: #000; background: linear-gradient(to bottom, #010, #000); + background: linear-gradient(135deg, #000, rgba(0,0,0,0) 70%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #020, #000 75%); border-top: 1px solid #494 !important; } @@ -841,7 +861,7 @@ input:focus::-moz-placeholder { opacity: 0; } -input.tunnelName, input.tunnelDescription, #userAgents { +input.tunnelName, input.tunnelDescriptionText, #userAgents { width: 80%; min-width: 280px; text-overflow: ellipsis; @@ -954,6 +974,10 @@ input.tunnelName, input.tunnelDescription, #userAgents { text-align: justify; } +#wizardPanel p, #wizardPanel td { + line-height: 140%; +} + #wizardPanel input::-moz-placeholder { color: #bb7; font-weight: normal; @@ -1049,7 +1073,7 @@ _:-ms-lang(x), .tunnelProperties { border-bottom: 1px solid #010 !important; } -#clientTunnels .tunnelDescription { +.tunnelDescription { padding-top: 1px !important; } diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css index eb70c1d1cc..96162e3b50 100644 --- a/installer/resources/themes/console/light/console.css +++ b/installer/resources/themes/console/light/console.css @@ -14,7 +14,6 @@ body { background: #a4a4cb url(images/tile2.png) fixed; background-size: 32px 32px; } -} /* preload button mouseovers */ body { @@ -183,7 +182,7 @@ pre { display: inline-block; vertical-align: middle; margin: -3px 0; - background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100% !important; padding: 5px 7px 5px 22px !important; } @@ -223,26 +222,20 @@ pre { border-left: none; border-right: none; border-radius: 0; - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff;; filter: none; } -.routersummary h3 a:hover { - color: #f60; -} - .routersummary h3:hover { background: linear-gradient(to bottom, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important; background: #fff linear-gradient(to bottom, #fff 50%, rgba(255, 232, 191, 0.6) 50%, rgba(239, 217, 179, 0.4) 100%) !important; } -.routersummary h3:hover a { - color: #f60 !important; - text-shadow: 0 0 1px #fff; -} - .routersummary h3:active { - box-shadow: inset 2px 2px 2px #777; + box-shadow: inset 2px 2px 3px 1px #6f5f45; + box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px 1px rgba(111,95,69, 0.8); + transition: ease box-shadow 0.05s; + background: #fff linear-gradient(to bottom, #fff3df, #fff9ef) !important; } .routersummary h3 a, .routersummary h3 a:visited { @@ -256,6 +249,15 @@ pre { line-height: 110%; } +.routersummary h3:hover a, .routersummary h3 a:hover { + color: #f60 !important; + text-shadow: 0 0 1px #fff; +} + +.routersummary h3:active a, .routersummary h3 a:active { + color: #cf9233 !important; +} + /* h3#helpfaq { margin-bottom: -9px; @@ -308,8 +310,12 @@ h4.sb_info { margin-top: -11px !important; } +.sb_info a { + vertical-align: baseline !important; +} + h4.sb_info + hr + form { - padding-top: 2px !important; + padding-top: 5px !important; margin-bottom: -1px; } @@ -458,6 +464,7 @@ h4.sb_info + hr + form { border: 1px solid #89f; border-radius: 2px; box-shadow: 0 0 1px #ccf; + transition: ease border 0.7s; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -469,6 +476,7 @@ h4.sb_info + hr + form { #sb_bandwidthgraph:hover { border: 1px solid #f60; cursor: url(/themes/console/images/cursor_zoom.png), pointer; + transition: ease border 0.7s; } a:active #sb_bandwidthgraph { @@ -633,6 +641,11 @@ to { line-height: 100%; } +#sb_warning + p:empty + form { + margin-top: 12px; + margin-bottom: -4px; +} + .sb_notice { background: #f2f2ff; border: 1px solid #89f; @@ -759,6 +772,7 @@ p:empty + .sb_notice { .routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus { display: inline-block; vertical-align: middle; + line-height: 120%; border: 1px solid #88f; border-radius: 2px; padding: 5px 6px; @@ -770,14 +784,18 @@ p:empty + .sb_notice { text-shadow: 0 1px 1px #fff; } +.sb_netstatus a { + vertical-align: baseline; +} + .routersummary .firewalled { background: repeating-linear-gradient(135deg, rgba(220,255,220,0.3) 2px, rgba(255,255,220,0.3) 3px, rgba(220,255,220,0.3) 5px); } .routersummary .error { background: rgba(255,110,110,0.1); - box-shadow: inset 0 0 0 1px rgba(255,0,0,0.3), 0 0 1px rgba(96,96,96,0.5); - background: repeating-linear-gradient(135deg, rgba(255,100,100,0.1) 2px, rgba(255,200,200,0.3) 3px, rgba(255,100,100,0.1) 5px); + box-shadow: inset 0 0 0 1px rgba(200,0,0,0.5), 0 0 1px rgba(96,96,96,0.5); + background: repeating-linear-gradient(135deg, rgba(255,100,100,0.05) 2px, rgba(255,200,200,0.2) 3px, rgba(255,100,100,0.05) 5px); } .routersummary .warn, .routersummary .clockskew { @@ -803,8 +821,9 @@ p:empty + .sb_notice { .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { - padding-right: 2px; - vertical-align: middle; + margin-bottom: -1px; + padding-right: 1px; + vertical-align: text-bottom; display: inline-block; filter: drop-shadow(0 0 1px rgba(96,96,96,0.5)); transform: scale(0.9); @@ -1198,8 +1217,9 @@ p:empty + .sb_notice { #jumplinks h4 { margin-bottom: 10px; - border-color: #41465f; + border-color: #7778bf !important; color: #41465f; + padding-bottom: 10px; } .warning p + .formaction { @@ -1228,6 +1248,10 @@ p:empty + .sb_notice { min-width: 481px; } +.sorry { + color: #41465f; +} + .sorry hr, .sorry hr:last-child { color: #558; background: #558; @@ -1546,7 +1570,8 @@ div.newscontent p { } .newsentry + hr + #newsStatus, .newsentry + hr + #newsStatus + #newsDisplay { - margin-top: -6px !important; + margin-top: -2px; + margin-bottom: 3px; } hr + #newsStatus, hr + #newsStatus + #newsDisplay { @@ -1683,6 +1708,7 @@ h1, .confignav { .tab:active { box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400; background: #f60; + transition: ease box-shadow 0.05s; } .tab:active a { @@ -1975,6 +2001,10 @@ p#tunnelconfig { margin: 9px -9px -20px; } +.graphspanel a { + font-size: 0; +} + .graphspanel img { padding: 1px; margin: 6px 5px; @@ -1989,6 +2019,7 @@ p#tunnelconfig { .graphspanel a img { box-shadow: 0 0 1px #ccf; filter: none !important; + white-space: nowrap; } .graphspanel a img:hover { @@ -2085,7 +2116,9 @@ h3#graphdisplay { text-align: right; width: 10%; white-space: nowrap; - padding: 13px 3px 13px 5px; + padding: 13px 3px 13px 15px; + font-weight: bold; + color: #41465f; } #graphs td:nth-child(2) { @@ -2900,6 +2933,10 @@ p#profiles_overview { margin-left: -6px; } +#profiles .wideload { + text-align: center; +} + .infohelp + hr { display: none; } @@ -3381,6 +3418,7 @@ h3.tabletitle, h3.ptitle, #config_advanced h3.tabletitle, h3#bannedpeers { border: 1px solid #7778bf; margin-bottom: -2px; box-shadow: inset 0 0 0 1px #fff; + text-align: left; } h3.ptitle { @@ -3642,12 +3680,12 @@ input[type="submit"], input[type="reset"], button, .optbox, select { } button.search { - background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } button.search:hover, button.search:focus, button.search:active { - background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff) !important; background-size: 14px 14px, 100% 100% !important; } @@ -3665,9 +3703,9 @@ input.search[type="text"]:focus { input, input:visited, button, button:visited { border: 1px solid #999daf; - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 1px #fff; background: #eee; - background: linear-gradient(to bottom, #fff, #ddd); + background: linear-gradient(to bottom, #fff, #efefff); color: #41465f; margin: 3px; font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; @@ -3683,8 +3721,8 @@ input[type="text"], textarea, input[type="password"] { filter: drop-shadow(0 0 1px #ccf); } -input[type="submit"], input[type="reset"], button { - filter: saturate(70%) drop-shadow(0 0 1px #ccf); +input[type="submit"], input[type="reset"], button, select { + filter: drop-shadow(0 0 1px #ccf); } button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { @@ -3693,90 +3731,92 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus { - background: linear-gradient(to bottom, #ddd, #fff); + color: #19191f; border: 1px solid #f60; + background: linear-gradient(to bottom, #eee, #fff); filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); transition: ease border 0.7s; } button:active, input[type="submit"]:active, input[type="reset"]:active { + color: #4c526f; box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555; background-blend-mode: luminosity; + transition: ease box-shadow 0.05s; } input.accept, button.accept { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } -input.accept:hover, button.accept:hover, -input.accept:focus, button.accept:focus { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); +input.accept:hover, button.accept:hover, input.accept:focus, button.accept:focus { + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.accept[value^="Unban"], button.accept[value^="Unban"] { - background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover, input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus { - background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.accept[value^="Create"], button.accept[value^="Create"] { - background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover, input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus { - background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.accept[value^="Filter"], button.accept[value^="Filter"] { - background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover, input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus { - background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.add, button.add { - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.add:hover, button.add:hover, input.add:focus, button.add:focus { - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.add[value^="Adjust"], button.add[value^="Adjust"] { - background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover, input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus { - background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.cancel, button.cancel { - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.cancel:hover, button.cancel:hover, input.cancel:focus, button.cancel:focus { - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.accept[value^="Show"], button.accept[value^="Show"], input.check[value^="View"], button.check[value^="View"] { - background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } @@ -3784,12 +3824,12 @@ input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover, input.check[value^="View"]:hover, button.check[value^="View"]:hover, input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus, input.check[value^="View"]:focus, button.check[value^="View"]:focus { - background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.cancel[value^="Hide"], button.cancel[value^="Hide"], input.delete[value^="Do not view"], button.delete[value^="Do not view"] { - background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } @@ -3797,72 +3837,72 @@ input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover, input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover, input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus, input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus { - background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.check, button.check { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.check:hover, button.check:hover, input.check:focus, button.check:focus { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.check[value$="updates"], button.check[value$="updates"] { - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.check[value$="updates"]:hover, button.check[value$="updates"]:hover, input.check[value$="updates"]:focus, button.check[value$="updates"]:focus { - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.delete, button.delete { - background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.delete:hover, button.delete:hover, input.delete:focus, button.delete:focus { - background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.delete[value^="Ban"], button.delete[value^="Ban"] { - background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover, input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus { - background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.download, button.download { - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.download:hover, button.download:hover, input.download:focus, button.download:focus { - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.download[value^="Join"], button.download[value^="Join"] { - background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.download[value^="Join"]:hover, button.download[value^="Join"]:hover, input.download[value^="Join"]:focus, button.download[value^="Join"]:focus { - background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.download[value$="from File"], button.download[value$="from File"], input.download[value$="from file"], button.download[value$="from file"] { - background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } @@ -3870,87 +3910,87 @@ input.download[value$="from File"]:hover, button.download[value$="from File"]:ho input.download[value$="from file"]:hover, button.download[value$="from file"]:hover, input.download[value$="from File"]:focus, button.download[value$="from File"]:focus, input.download[value$="from file"]:focus, button.download[value$="from file"]:focus { - background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.download[value^="Dump"], button.download[value^="Dump"] { - background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover, input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus { - background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.go, button.go, input[value="GO"] { - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.go:hover, button.go:hover, input[value="GO"]:hover, input.go:focus, button.go:focus, input[value="GO"]:focus { - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.go[value^="Create"], button.go[value^="Create"] { - background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.go[value^="Create"]:hover, button.go[value^="Create"]:hover, input.go[value^="Create"]:focus, button.go[value^="Create"]:focus { - background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reload, button.reload { - background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.reload:hover, button.reload:hover, input.reload:focus, button.reload:focus { - background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reload[value$="restart"], button.reload[value$="restart"] { - background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover, input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus { - background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reload[value^="Update"], button.reload[value^="Update"] { - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover, input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus { - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reload[value="Force GC"], button.reload[value="Force GC"] { - background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover, input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus { - background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.stop, button.stop { - background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.stop:hover, button.stop:hover, input.stop:focus, button.stop:focus { - background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } /* client config buttons aka project "X" */ @@ -3963,51 +4003,51 @@ button.control { } button.accept.control { - background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.accept.control:hover, button.accept.control:focus { - background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } button.stop.control { - background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.stop.control:hover, button.stop.control:focus { - background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } button.add.control { - background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.add.control:hover, button.add.control:focus { - background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } button.delete.control { - background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.delete.control:hover, button.delete.control:focus { - background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } button.check.control { - background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.check.control:hover, button.check.control:focus { - background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } button.download.control { - background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } button.download.control:hover, button.download.control:focus { - background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); } /* end project "X" */ @@ -4027,12 +4067,12 @@ button.download.control:hover, button.download.control:focus { } .routersummary .reload { - background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; + background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff) !important; } .routersummary .reload:hover, .routersummary .reload:focus { - background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; - background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff) !important; + background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat, linear-gradient(to bottom, #eee, #fff) !important; border: 1px solid #f60; } @@ -4044,25 +4084,25 @@ button.download.control:hover, button.download.control:focus { text-indent: 0; text-align: left; min-width: 0; - background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; + background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important; } .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus { - background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important; padding: 5px 7px 5px 22px !important; } .routersummary .stop { - background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } .routersummary .stop:hover, .routersummary .stop:focus { - background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); border: 1px solid #f60; } .routersummary .download { - background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100% !important; padding: 5px 7px 5px 22px !important; } @@ -4088,37 +4128,37 @@ button.download.control:hover, button.download.control:focus { } .routersummary .reload[value="restartImmediate"] { - background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; + background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important; background-size: 14px 14px, 100% 100% !important; } .routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active { - background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important; background-size: 14px 14px, 100% 100% !important; } .routersummary .stop[value="shutdownImmediate"] { - background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; + background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important; background-size: 14px 14px, 100% 100% !important; } .routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active { - background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important; background-size: 14px 14px, 100% 100% !important; } .routersummary .reload[value="Reseed"] { - background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; + background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important; background-size: 14px 14px, 100% 100% !important; } .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active { - background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100% !important; } .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { - background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100% !important; padding: 5px 7px 5px 22px !important; } @@ -4210,10 +4250,10 @@ select { -webkit-appearance: none; appearance: none; background: url(images/dropdown.png) right center no-repeat #fff; - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #efefff); background-blend-mode: hard-light, normal; padding: 4px 16px 4px 4px !important; - color: #33333f; + color: #41465f; margin: 5px; border: 1px solid #999daf; min-width: 120px; @@ -4230,9 +4270,8 @@ select { } } -select:focus { - box-shadow: 0 0 0 1px #89f; - color: #19191f; +select:-moz-focusring { + outline: 1px solid transparent; } select option { @@ -4244,12 +4283,19 @@ select, input[type="text"] { } select:hover, select:active { - background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + color: #19191f; + background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important; } select:focus { - background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; - box-shadow: 0 0 0 1px #89f; + color: #19191f; + background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important; + box-shadow: 0 0 1px #89f; +} + +select::-moz-focus-inner { + outline: none !important; + border: none !important; } select::-ms-expand { @@ -4615,6 +4661,11 @@ body.iframed { margin-bottom: 31px !important; } +.themechoice .optbox:checked + object, .themechoice .optbox:checked + img { + transform: scale(0.9); + animation: glow 20s 10s infinite; +} + #themeoptions { clear: both; border-top: 1px solid #ddf; @@ -4622,7 +4673,7 @@ body.iframed { margin: 0 -5px 5px; position: relative; top: 4px; - padding: 5px 10px 3px 5px; + padding: 5px 10px 5px 5px; } #themeoptions br { @@ -4631,7 +4682,7 @@ body.iframed { #themeoptions label { white-space: nowrap; - margin: 4px 10px 4px 0 !important; + margin: 2px 10px 2px 0 !important; display: inline-block; } @@ -4647,7 +4698,7 @@ p#helptranslate { } #themeoptions input { - margin-left: 5px; + margin: 2px 5px 2px 5px; vertical-align: sub; } @@ -5909,11 +5960,11 @@ ul#banlist { } .sortup { - background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } .sortup:hover { - background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); border: 1px solid #f60; opacity: 1; } @@ -5931,11 +5982,11 @@ ul#banlist { } .sortdown { - background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff); } .sortdown:hover { - background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff); + background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff); border: 1px solid #f60; opacity: 1; } @@ -6147,11 +6198,21 @@ h3#ntcpcon, h3#udpcon { #help td.infohelp, #help td.infowarn, #help td.infohelp:hover, #help td.infowarn:hover { background-size: 24px 24px !important; - padding-left: 46px !important; + padding-left: 50px !important; color: #33333f !important; padding-right: 15px !important; } +#configinfo td.infowarn, #configinfo tr:hover td.infowarn { + padding-left: 46px !important; +} + +#help code, #help tt { + font-size: 8pt; + font-weight: bold; + color: #050; +} + #sidebarhelp ul { display: inline-block; margin-bottom: 0 !important; @@ -7404,7 +7465,7 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, font-size: 10pt !important; } -.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, pre, +.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, pre, #help code, #help tt, #jardump tt, #jardump td, div.news, #logs li, tt, .cells tt, #profilelist tt, .leaseset tt, .links code, #console code { font-size: 9pt !important; } @@ -7423,6 +7484,7 @@ tt a, .cells tt, #profilelist tt, .cells tt a, #profilelist tt a, .leaseset td t #tunnels .tunnel_peer tt { margin-left: 3px !important; + letter-spacing: 0.1em !important; } .main[id^="config_"] th, h4#updateplugins { diff --git a/installer/resources/themes/console/light/console_ar.css b/installer/resources/themes/console/light/console_ar.css index d03ab5c263..0669296ee4 100644 --- a/installer/resources/themes/console/light/console_ar.css +++ b/installer/resources/themes/console/light/console_ar.css @@ -30,7 +30,7 @@ h1, h2 ,h3, h4 { } h2, h3 { - background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; + background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; } #debug h2 { @@ -60,7 +60,7 @@ h2, h3 { h1 { margin: 0 212px -15px 0; - padding: 15px 20px 15px 10px; + padding: 16px 20px 15px 10px; background: linear-gradient(to left, #fcfcff, rgba(252,252,255,0) 600px), linear-gradient(to bottom, #fcfcff 50%, rgba(248,248,255,0.6) 50%), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fafaff !important; } @@ -84,7 +84,6 @@ form { .routersummary img[src$="i2plogo.png"] { margin-left: 0 !important; - margin-right: -1px !important; } table.search td:nth-child(2) { @@ -104,7 +103,6 @@ button, input[type="submit"], input[type="reset"] { display: inline-block; line-height: 120%; font-size: 10pt; - font-weight: bold; } #config_homepage.main input.delete { @@ -316,7 +314,7 @@ p#helptranslate { padding-right: 50px !important; text-align: right !important; background-position: right 14px center !important; - background-image: url("/themes/console/images/info/infohelp.png"); + background-image: url(/themes/console/images/info/infohelp.png); background-size: 28px auto !important; } @@ -514,7 +512,7 @@ div.themechoice, div.langselect { .themelabel { padding: 3px !important; - font-size: 11.5pt !important; + font-size: 10pt !important; font-weight: bold; } @@ -680,8 +678,13 @@ table.search { padding-bottom: 0 !important; } +#eventlog { + margin-left: -16px !important; + margin-right: 0 !important; +} + h4.app { - background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; + background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; background-size: 16px 16px, 100% 100%, 100% 100% !important; margin-top: 15px; } @@ -689,7 +692,7 @@ h4.app { h4.app2 { clear: left; margin-top: 10px !important; - background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; + background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; background-size: 16px 16px, 100% 100%, 100% 100% !important; } @@ -705,7 +708,7 @@ h4.app, h4.app2, #news h3, .news h3 { div.news h3, #news h3 { background: url(images/news.png) right 8px center no-repeat, linear-gradient(to left, #fff, #eef) !important; - background: url(images/news.png) right 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; + background: url(images/news.png) right 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important; padding: 5px 30px 5px 10px; } @@ -717,11 +720,16 @@ div.news h3, #news h3 { margin-left: 0 !important; } -#news #newsStatus, #newsDisplay { +#news #newsStatus, #news #newsDisplay { margin-top: 6px; margin-bottom: -2px !important; } +#news #newsStatus { + margin: -2px 0 0; + font-size: 9pt; +} + .newsAuthor { float: left; } @@ -954,6 +962,10 @@ p#profiles_overview, #profiles .widescroll + h3, #thresholds + h3, #profiles #ba margin: -16px 0; } +#config_service .formaction { + margin-top: -13px; +} + pre#transports { padding: 10px 10px 0 0; } diff --git a/installer/resources/themes/console/light/console_big.css b/installer/resources/themes/console/light/console_big.css index 7ce9b09042..ccf2c2fb5c 100644 --- a/installer/resources/themes/console/light/console_big.css +++ b/installer/resources/themes/console/light/console_big.css @@ -13,7 +13,7 @@ h3 { font-size: 12pt; } -b, a, input, button, input[type="submit"], input[type="reset"], i, th, thead, tfoot, .mediumtags { +b, a, input, button, input[type="submit"], input[type="reset"], i, th, thead, tfoot, .mediumtags, .themelabel { font-weight: normal !important; font-style: normal !important; } @@ -236,6 +236,10 @@ p#enablefullstats { font-weight: bold !important; } +.formaction { + margin-top: -16px; +} + /* responsive layout */ @media screen and (min-width: 1500px) { diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css index 10006f55f6..26927d2129 100644 --- a/installer/resources/themes/console/light/i2ptunnel.css +++ b/installer/resources/themes/console/light/i2ptunnel.css @@ -212,7 +212,7 @@ hr { border: 1px solid #999daf; border-radius: 2px; background: #eee; - background: linear-gradient(to bottom, #fff, #ddd); + background: linear-gradient(to bottom, #fff, #efefff); box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px #ccf); box-sizing: border-box; @@ -230,15 +230,15 @@ button.control, input.control { color: #19191f; border: 1px solid #f60 !important; background: #ddd; - background: linear-gradient(to bottom, #ddd, #fff); + background: linear-gradient(to bottom, #eee, #fff); box-shadow: inset 0 0 0 1px #fff !important; filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); transition: ease border 0.7s; } .control:active { - box-shadow: inset 2px 2px 1px #999 !important; - color: #33333f; + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555 !important; + color: #4c526f; } a.control { @@ -285,7 +285,7 @@ select { padding: 4px 16px 4px 4px !important; min-width: 140px; background: #fff; - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd); + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #efefff); background-blend-mode: hard-light, normal; color: #33333f; font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif; @@ -306,7 +306,7 @@ select:hover { } select:hover, select:active, select:focus { - background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; + background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important; } select:focus { @@ -348,7 +348,7 @@ h2, h3 { border: 1px solid #7778bf; border-radius: 2px 2px 0 0; background: #fcfcff; - background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) #fff !important; + background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) #fff !important; font-size: 11.5pt; text-transform: uppercase; letter-spacing: 0.08em; @@ -366,27 +366,27 @@ h2, h3 { /* title images */ #messages h2 { - background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #globalTunnelControl h2 { - background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #servers h2 { - background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #clients h2 { - background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 { - background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #wizardPanel h2 { - background: url(/themes/console/images/info/wizard.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; + background: url(/themes/console/images/info/wizard.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important; } #messages h2, #globalTunnelControl h2, #servers h2, #clients h2, #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3, #wizardPanel h2 { @@ -745,9 +745,9 @@ input:focus::-moz-placeholder { opacity: 0; } -input.tunnelName, input.tunnelDescription, #userAgents { +input.tunnelName, input.tunnelDescriptionText, #userAgents { width: 80%; - min-width: 280px; + min-width: 280px !important; text-overflow: ellipsis; } @@ -924,7 +924,7 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { border-bottom: 1px solid transparent !important; } -#clientTunnels .tunnelDescription { +.tunnelDescription { padding-top: 1px !important; } diff --git a/installer/resources/themes/console/light/mobile.css b/installer/resources/themes/console/light/mobile.css index 078ea6ba7c..3fc0c5903b 100644 --- a/installer/resources/themes/console/light/mobile.css +++ b/installer/resources/themes/console/light/mobile.css @@ -65,7 +65,7 @@ a[href="/summaryframe"] { font-size: 9pt !important; } -.routersummary table, table[id^="sb_"], #sb_services, #sb_internals, #sb_advanced { +.routersummary table, table[id^="sb_"], #sb_services, #sb_internals, #sb_advanced, #sb_help { width: 100% !important; margin: -9px 0 -7px !important; border-radius: 4px; @@ -73,8 +73,28 @@ a[href="/summaryframe"] { border-spacing: 0; } +#sb_internals, #sb_advanced, #sb_help { + margin-top: -11px !important; +} + +#sb_internals td, #sb_advanced td, #sb_help td { + padding: 3px 4px !important; +} + +#sb_internals a, #sb_advanced a, #sb_help a { + margin: 3px 3px 4px; + padding: 3px 10px !important; + border-radius: 2px; + background: #ddf; + box-shadow: 0 0 1px #99f; +} + +#sb_internals a:active, #sb_advanced a:active, #sb_help a:active { + box-shadow: inset 2px 2px 2px #aaa; +} + table[id^="sb_"] td, #sb_localtunnels td { - padding: 3px 6px !important; + padding: 2px 6px 0 !important; } table[id^="sb_"] tr:nth-child(even) td { @@ -110,10 +130,19 @@ table[id^="sb_"] tr:nth-child(odd) td { background-color: transparent !important; } +#sb_graphcontainer, #sb_graphcontainer + hr { + display: none; +} + .routersummary button[type="submit"], .routersummary button[type="cancel"] { - margin: 5px 5px 3px !important; + margin: 3px 5px 0 !important; padding: 8px 5px !important; - min-width: 120px !important; + min-width: 280px !important; +} + +.percentBarOuter { + width: 590px; + margin: -4px 4px -4px 4px; } h1 { diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css index 30a08ca7d9..e6c07fb3f7 100644 --- a/installer/resources/themes/console/midnight/console.css +++ b/installer/resources/themes/console/midnight/console.css @@ -172,7 +172,7 @@ input[type=text], input[type=password], textarea { background: linear-gradient(to bottom, #000, #000019); box-shadow: inset 0 0 3px 3px #000; border: 1px solid #3e3f8f; - padding: 4px; + padding: 5px; } input[type=text]:focus, input[type=password]:focus, textarea:focus { @@ -855,6 +855,9 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re background-size: 16px 16px, 100% 100% !important; background-position: center center !important; padding: 5px !important; + min-width: 92px !important; + margin-top: 3px; + margin-bottom: 3px; } .routersummary .reload, .routersummary .reload[value$="restart"] { @@ -1438,6 +1441,11 @@ p:empty + .sb_notice { margin-top: 10px; } +#sb_warning + p:empty + form { + margin-top: 11px; + margin-bottom: -7px; +} + /* sidebar stacked tables fix */ #sb_localid + #sb_version { @@ -1642,7 +1650,7 @@ a:active #sb_bandwidthgraph { #sb_graphcontainer { background-color: #000; - background-position: left -72px top -26px !important; + background-position: left -72px top -24px !important; background-size: 280px 90px !important; background-repeat: no-repeat !important; margin: -7px 0 -3px !important; @@ -1685,7 +1693,7 @@ to { background: #000; background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); background: repeating-linear-gradient(to right, #000 1px, #000 2px, #003 2px, #003 4px); - border: 1px solid #171c3f; + border: 1px solid #292b5f; opacity: 1; box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); margin: -3px 0 -5px -6px; @@ -1959,11 +1967,11 @@ div.sorry hr { } #news #newsDisplay a, #graphopts a { - border: 1px solid #005; + border: 1px solid #001; margin: 0 -2px; padding: 1px 10px !important; background: #002; - background: rgba(0,0,64,0.4); + background: rgba(0,0,48,0.4); border-radius: 15px; filter: drop-shadow(0 0 1px rgba(0,0,64,0.8)); } @@ -2296,6 +2304,9 @@ div.widepanel h3 { padding: 2px; } +.graphspanel a { + font-size: 0; +} .graphspanel p { text-align: center; text-transform: capitalize; @@ -2322,7 +2333,7 @@ div.widepanel h3 { } #graphopts a, #graphopts a:visited { - color: #54508f; + color: #54508f !important; } #graphopts a:hover, #graphopts a:visited:hover, #graphopts a:focus { @@ -2333,6 +2344,10 @@ div.widepanel h3 { color: #2d277f !important; } +#graphopts a:empty { + display: none; +} + h3#graphinfo { margin-top: 10px; border-radius: 0 !important; @@ -2415,6 +2430,10 @@ h3#graphdisplay a { min-width: 60px; } +#graph_single { + background-size: auto 100px !important; +} + /* end graphs */ table { @@ -2545,7 +2564,7 @@ code { color: #393; } -a:link, h2 a:link { +a:link, h2 a:link, #news #newsDisplay a:visited, #graphopts a:visited { color: #7972d1; text-decoration: none; font-weight: bold; @@ -3342,11 +3361,13 @@ div.themechoice { .themechoice object, .themechoice img { padding: 3px 3px 4px; + opacity: 0.75; } .themechoice object img { padding: 3px 3px 0; margin-bottom: 0; + opacity: 0.75; } .themechoice .optbox { @@ -3372,6 +3393,11 @@ div.themechoice { font-weight: bold; } +.themechoice .optbox:checked + object, .themechoice .optbox:checked + img { + transform: scale(0.9); + opacity: 1; +} + .themechoice .optbox:focus + object ~ div.themelabel { color: #652787; box-shadow: inset 0 0 10px 3px #000; @@ -3392,7 +3418,7 @@ div.themechoice { #themeoptions label { white-space: nowrap; - margin: 4px 10px 4px 0 !important; + margin: 1px 10px 1px 0 !important; display: inline-block; } @@ -3409,7 +3435,7 @@ p#helptranslate { } #themeoptions input { - margin-left: 5px; + margin-left: 5px 1px; } #themeoptions input[type="checkbox"] { @@ -3694,7 +3720,7 @@ table#consolepass input[type="password"] { #consolepass input[name="name"], #externali2cp input[name="user"] { background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat; background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000, #000019); - padding: 4px 5px 4px 26px !important; + padding: 5px 5px 5px 26px !important; background-size: 16px 16px, 100% 100% !important; } @@ -3705,7 +3731,7 @@ table#consolepass input[type="password"] { #consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] { background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat; background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #000, #000019); - padding: 4px 5px 4px 22px !important; + padding: 5px 5px 5px 22px !important; background-size: 16px 16px, 100% 100% !important; } #consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus { @@ -5717,7 +5743,7 @@ table#jardump { .footnote { text-align: right; - font-size: 7pt; + font-size: 8pt; margin-bottom: 5px !important; } @@ -6942,6 +6968,10 @@ form[action="events"] { display: inline; } +.sb_netstatus, .sb_netstatus a { + vertical-align: baseline; +} + .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, .routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus { display: inline-block; @@ -6983,7 +7013,7 @@ form[action="events"] { .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { - padding: 0 2px; + padding: 0 1px 0 0; vertical-align: middle; display: inline-block; filter: drop-shadow(0 0 1px rgba(220,220,220,0.7)); @@ -7580,7 +7610,7 @@ table#i2pupdates td:first-child { padding-right: 5px !important; } -.topness, .footnote, #newsStatus, #newsDisplay { +.topness, #newsStatus, #newsDisplay { font-size: 9pt !important; } diff --git a/installer/resources/themes/console/midnight/i2ptunnel.css b/installer/resources/themes/console/midnight/i2ptunnel.css index db61c867ec..d4ab28f52b 100644 --- a/installer/resources/themes/console/midnight/i2ptunnel.css +++ b/installer/resources/themes/console/midnight/i2ptunnel.css @@ -789,7 +789,7 @@ input:focus::-moz-placeholder { opacity: 0; } -input.tunnelName, input.tunnelDescription, #userAgents { +input.tunnelName, input.tunnelDescriptionText, #userAgents { width: 80%; min-width: 280px; text-overflow: ellipsis; @@ -984,7 +984,7 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { border-bottom: 1px solid transparent !important; } -#clientTunnels .tunnelDescription { +.tunnelDescription { padding-top: 1px !important; } diff --git a/installer/resources/themes/snark/classic/nocollapse.css b/installer/resources/themes/snark/classic/nocollapse.css index 71b4076b3f..abae4f21a7 100644 --- a/installer/resources/themes/snark/classic/nocollapse.css +++ b/installer/resources/themes/snark/classic/nocollapse.css @@ -8,7 +8,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input:focus + label.toggleview { box-shadow: inset 0 0 0 1px #fff; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + background: linear-gradient(to bottom, #fff 0%, #ddf 100%) !important; cursor: default !important; } diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index b4f1f63478..f513385b68 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -6,6 +6,7 @@ body { color: #2c354f; background: #eef url(/themes/console/classic/images/bg0.png) repeat scroll center bottom; background-size: 120px 120px; + margin: 3px 4px; } /* preload top navigation mouseovers */ @@ -50,19 +51,23 @@ body.iframed { line-height: 160% !important; min-width: 900px !important; margin: 5px 0 0 0; - padding: 10px; + padding: 9px; text-align: center; border: 1px solid #89f; - background: #eef; - box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset; + border-radius: 0 0 3px 3px; + background: #dfe6ff; + background: repeating-linear-gradient(to right, #fff 1px, #cfd9ff 2px, #fff 4px); + box-shadow: inset 0 0 0 1px #fff; } .iframed .page { margin: 5px 0; padding: 0; border: none; + border-radius: 0; background: none; - background: linear-gradient(to right, #fff 0%, #ddf 50%, #fff 100%); + background: linear-gradient(to right, #fff, #ddf, #fff); + background: repeating-linear-gradient(to right, #fff 1px, #bbf 2px, #fff 4px); box-shadow: none; } @@ -79,9 +84,10 @@ body.iframed { text-transform: uppercase !important; color: #000; border: 1px solid #89f; + border-radius: 3px 3px 0 0; background: #eff2ff !important; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; - box-shadow: 0 0 1px #fff; + background: linear-gradient(to bottom, #fff, #eff2ff) !important; + box-shadow: 0 0 1px #fff, inset 0 0 0 1px #fff; position: sticky; top: -1px; z-index: 999; @@ -89,67 +95,81 @@ body.iframed { .iframed .snarknavbar { margin-top: -2px !important; + padding: 8px 0; + border-radius: 0; position: static; + background: linear-gradient(to bottom, #fff, #eff2ff 75%) !important; } .snarkNav:link, .snarkNav:visited { display: inline-block; + line-height: 110%; color: #444688; font-size: 9pt; font-weight: bold; - margin: -1px 0 !important; + margin: -1px -2px -1px -3px !important; padding: 5px 7px 5px 23px !important; text-decoration: none !important; letter-spacing: .1em; text-transform: uppercase !important; - border: 1px solid #ccf; - border-right: 1px solid #aaf; - border-bottom: 1px solid #aaf; + border: 1px solid #88f; box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(200,200,200,0.5); + opacity: 0.85; + transition: ease all 0.1s; } .snarkNav:link:last-child { margin-left: 3px; + border-radius: 0 3px 3px 0; } .nav_main:link { - background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); + border-radius: 3px 0 0 3px; } .nav_forum:link { - background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } .nav_tracker:link { - background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); +} + +.snarkNav.nav_main:last-child { + border-radius: 3px; } .snarkNav:hover, .snarkNav:focus { color: #f50; border: 1px solid #f50; + opacity: 1; + position: relative; + z-index: 999; + transition: ease all 0.1s; } .nav_main:hover, .nav_main:focus { background: url(images/button_snark_hover.png) 7px center no-repeat #eee !important; - background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important; } .nav_forum:hover, .nav_forum:focus { background: url(images/button_forum_hover.png) 7px center no-repeat #eee !important; - background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important; } .nav_tracker:hover, .nav_tracker:focus { background: url(images/button_tracker_hover.png) 7px center no-repeat #eee !important; - background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important; } .snarkNav:active { text-decoration: none !important; color: #fff !important; - border: 1px solid #aaa; text-shadow: none; - box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 3px #824b1b !important; + box-shadow: inset 4px 4px 3px #824b1b, 0 0 0 0 rgba(0,0,0,0) !important; + transition: ease all 0.1s; } .nav_main:active { @@ -181,8 +201,14 @@ body.iframed { text-align: left; border-bottom: 1px solid #89f; background: url(images/hat.png) bottom right no-repeat #ddf; + background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #eff3ff, #e9efff); + background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, rgba(239, 243, 255, 0.7), rgba(233, 239, 255, 0.7)); + box-shadow: inset 0 0 0 1px #f2f2ff; +} + +.iframed .snarkMessages { background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #e3e3ff, #ddf); - box-shadow: inset 0 0 0 1px #ddf; + background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, rgba(227, 227, 255, 0.7), rgba(221, 221, 255, 0.7)); } .snarkMessages:hover, .snarkMessages:focus { @@ -201,7 +227,7 @@ body.iframed { .snarkMessages li { margin-left: -15px; - font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; color: #4b4b76; } @@ -211,7 +237,7 @@ body.iframed { background: url(images/bullet.png) 1px bottom no-repeat; width: 13px; height: 11px; - margin: 1px 2px 0 1px; + margin: 1px 1px 0 0; background-size: 9px 9px; opacity: 0.7; } @@ -258,7 +284,7 @@ body.iframed { .ParentDir { font-size: 8pt; - padding: 4px 0; + padding: 4px 0 0 6px; text-align: left !important; border: 1px solid #89f !important; border-right: 0 !important; @@ -319,6 +345,14 @@ body.iframed { display: none; } +.snarkTorrents thead img { + display: none; +} + +.snarkTorrents thead a img { + display: inline; +} + .snarkTorrents img { margin: 0 !important; padding: 0 !important; @@ -348,6 +382,28 @@ body.iframed { width: 16px !important; text-align: center !important; font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; +} + +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + padding: 3px !important; + border: 1px solid transparent !important; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #f60 !important; + border-radius: 2px; + box-shadow: 0 0 1px #f60; + background: #ddf; + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); + filter: none !important; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + box-shadow: inset 2px 2px 2px #99f; } .snarkGraphicStatus, .snarkTorrentStatus { @@ -357,6 +413,8 @@ body.iframed { .snarkGraphicStatus { width: 24px !important; + text-align: center !important; + padding-left: 3px !Important; } .snarkGraphicStatus img { @@ -394,16 +452,17 @@ thead { tfoot tr:first-child th { vertical-align: middle !important; + color: #3e4b6f !important; } th { font-size: 9pt; padding: 3px 2px; - color: #0c153d; + color: #3e4b6f; border-top: 1px solid #89f; border-bottom: 1px solid #89f; background: #fff; - background-image: linear-gradient(to bottom, #fff, #eef); + background: linear-gradient(to bottom, #fff, #eef); } th:first-child { @@ -416,14 +475,6 @@ tfoot td:first-child { text-align: left !important; } -th:first-child img { - margin: 1px -2px 3px 1px !important; -} - -th:nth-child(2) img { - margin: 1px 5px 3px 2px !important; -} - tfoot th { padding-bottom: 4px !important; } @@ -522,6 +573,8 @@ tfoot th { .snarkTorrents td { text-align: left; + padding-top: 4px; + padding-bottom: 4px; } .snarkGraphicStatus { @@ -537,7 +590,7 @@ td.snarkTrackerDetails { } tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font-family: "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; } .snarkTorrents tt { @@ -601,14 +654,11 @@ tt { border-top: 1px solid #89f !important; } -.snarkTorrentInfo tr:last-child { - background: none; -} - -.snarkTorrentInfo tr:last-child td { - padding: 5px !important; +#torrentInfoControl td { + padding: 7px 5px !important; text-align: right !important; border-top: 1px solid #89f !important; + background: linear-gradient(to bottom, #fff, #eef); } .SnarkTorrentInfo { @@ -652,6 +702,7 @@ tt { margin-top: 10px !important; margin-bottom: 0; border-bottom: 1px solid #89f; + background: #eef; } .snarkDirInfo th img { @@ -670,10 +721,6 @@ tt { padding-left: 5px; } -.snarkDirInfo th a img, .snarkDirInfo th img { - max-height: 20px; -} - .snarkDirInfo th img[alt="Directory"] { margin-right: 5px !important; margin-left: 1px !important; @@ -683,13 +730,15 @@ tt { min-width: 0 !important; } -.snarkDirInfo td:first-child { - padding-left: 4px; +.snarkFileIcon { + width: 16px; + padding-left: 2px; padding-right: 2px; text-align: left; } -.snarkDirInfo td:first-child img { +.snarkFileIcon img { + filter: none; padding-right: 6px; } @@ -723,26 +772,8 @@ tt { margin: 0 !important; } -.snarkDirInfo .headerpriority { - text-align: center !important; - vertical-align: middle; -} - -td.subHeaderPriority, td.priority { - width: 0; - min-width: 36px !important; - padding: 0 5px 0 0 !important; - text-align: center !important; -} - -td.subHeaderPriority { - font-size: 7.5pt; - font-weight: bold; - padding: 0 1px !important; - text-align: center !important; - background: #020; - background: url("images/snarktopnav.png") repeat-x scroll center center #101; - background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%); +.snarkDirInfo thead th:nth-child(2), .headerstatus, .headerpriority, .snarkFileStatus { + text-align: center; } .headerpriority br { @@ -753,41 +784,17 @@ td.subHeaderPriority { padding: 4px !important; } -tr.priority:last-child { - border-bottom: none !important; -} - -th.headerdownloaded { - padding-left: 25px !important; -} - .snarkFileStatus { - text-align: center; white-space:nowrap; width: 120px; } -.snarkFileIcon { - width: 16px; - padding: 0; -} - -.snarkFileIcon img { - filter: none; -} - -.snarkFileStatusIcon { - width: 24px; - padding: 0 4px 0 0; - text-align: center; -} - /* end torrent directory */ td { font-size: 9pt; padding: 2px; - color: #2c354f !important; + color: #3e4b6f !important; } td:first-child { @@ -801,7 +808,7 @@ td:first-child { .snarkTorrentName { line-height: 110%; - padding: 0; + padding: 4px 3px; } .snarkTorrentName a, @@ -825,43 +832,53 @@ td:first-child { .snarkTorrentAction input[type="image"] { padding: 3px !important; background: #339; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%); + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); border-radius: 2px; - border: 1px solid #89f !important; + border: 1px solid #bbf !important; margin: 2px 1px; - filter: drop-shadow(0 0 1px #bbb); + box-shadow: 0 0 1px #f2f2ff !important; height: 10px; } .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus { border: 1px solid #f60 !important; - filter: drop-shadow(0 0 1px #f60); + background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important; + box-shadow: 0 0 1px #f60 !important; + filter: none !important; } .snarkTorrentAction input[type="image"]:active { - background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%); - box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333; - filter: none !important; + background: linear-gradient(to bottom, #eef 50%, #bbf 50%); + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #559 !important; } /* end torrent control buttons */ -.snarkTorrentNoneLoaded { - font-size: 8.5pt; - font-weight: bold; - padding: 10px 5px; - color: #4f2 !important; +.routerdown { + padding: 10px; + color: #363759; border-bottom: 1px solid #89f; + box-shadow: inset 0 0 0 1px #fff; +} + +.snarkTorrentNoneLoaded { + padding: 10px 5px; background: #fff; + background: linear-gradient(to right, #eef, #fff, #eef); + border-bottom: 1px solid #89f; } .snarkTorrentNoneLoaded td { + color: #0c153d !important; text-align: center !important; + font-weight: bold; + box-shadow: inset 0 0 0 1px #fff; } .snarkTorrentNoneLoaded i { display: inline-block; padding: 10px; + opacity: 0.85; } .snarkTorrentNoneLoaded i::before { @@ -870,6 +887,7 @@ td:first-child { vertical-align: top; margin: 1px 4px 0 0 !important; transform: scale(0.95); + opacity: 0.85; } .snarkTorrentStatus { @@ -929,9 +947,9 @@ td:first-child { vertical-align: middle; } -.snarkTorrents tr:hover, .snarkDirInfo tr:hover { +.snarkTorrents tr:hover, .snarkDirInfo tr:hover, #trackerselect tr:nth-child(n+2):hover td { background: #fff !important; - background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important; + background: linear-gradient(to bottom, #fff, #ffe) !important; } tr:hover .percentBarText { @@ -1027,11 +1045,12 @@ tr:hover .percentBarText { } .percentBarOuter { + margin: 0 auto; + border: 1px solid #99f; + border-radius: 2px; + box-shadow: 0 0 1px 0 rgba(196,196,196,0.8); background: #eef; background: repeating-linear-gradient(135deg, #eef 1px, #eef 5px, #ddf 6px, #ddf 11px); - border: 1px solid #99f; - box-shadow: 0 0 1px 0 rgba(196,196,196,0.8); - margin: 0 auto; } .snarkTorrentDownloaded .percentBarOuter { @@ -1043,14 +1062,24 @@ tr:hover .percentBarText { } .percentBarInner { - border: none; height: 14px; - background: #bbf; - background: linear-gradient(to bottom, #fff 0%, #eef 50%, #bbf 50%, #99f 100%); + border: none; + border-radius: 2px; box-shadow: inset 0 0 0 1px #ddf; + background: #bbf; + background: linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f); + background: linear-gradient(to right, rgba(255,255,0,0.1) 60px, rgba(0,255,0,0.1)), linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f); opacity: 0.8; } +.peerinfo .percentBarInner { + background: linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to right, rgba(255,255,0,0.1) 40px, rgba(0,255,0,0.1)), linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f); +} + .percentBarText, .percentBarOuter { width: 110px; text-align: center; @@ -1092,12 +1121,15 @@ tr:hover .percentBarText { transition: ease all 0.3s; } -.thumb:hover { +.snarkDirInfo td:first-child .thumb:hover, .snarkDirInfo td:first-child .thumb:focus { max-width: 96px; max-height: 64px; transition: ease all 0.3s; - margin: -6px 0 -6px -4px !important; + margin: -9px 0 -9px -5px !important; filter: none !important; + border: 1px solid transparent !important; + background: none !important; + box-shadow: none !important; } .snarkNewTorrent { @@ -1105,17 +1137,18 @@ tr:hover .percentBarText { } .snarkAddInfo { - font-size: 9pt; + display: inline-block; + margin: 3px 0 -3px -5px !important; + padding-left: 26px; line-height: 130% !important; - margin-left: -5px; + font-size: 9pt; font-weight: normal; background: url(images/infocircle.png) left 10px center no-repeat; background-size: 13px auto; - padding-left: 26px; } .snarkConfigTitle:hover, label.toggleview:hover, input.toggle_input:focus + .toggleview { - background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + background: linear-gradient(to bottom, #eff2ff, #fff) !important; color: #f60 !important; } @@ -1124,7 +1157,7 @@ input.toggle_input:focus + .toggleview img { } .snarkConfigTitle:active, label.toggleview:active { - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #99a, 0 0 0 0 #fff; } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { @@ -1139,16 +1172,20 @@ input.toggle_input:focus + .toggleview img { letter-spacing: .08em; border: 1px solid #89f; border-top: none; + border-radius: 0 0 4px 4px; background: #fff !important; - background: linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 1px 1px #ddd); + background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important; + box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, 0 1px 1px #ddf; + transition: ease all 0.2s; } .snarkConfigTitle a { display: inline-block; width: 100%; - margin-bottom: -1px; +} + +.iframed .snarkConfigTitle a { + padding-bottom: 0; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -1162,7 +1199,11 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo } .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { - color: #444 !important; + color: #676788 !important; +} + +.configsection .snarkConfigTitle { + margin-bottom: -2px !important; } .snarkConfigTitle img, label.toggleview img { @@ -1171,15 +1212,18 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo } .snarkConfigTitle a, .snarkConfigTitle a:visited, label.toggleview { - color: #444688 !important; outline: none; + color: #676799 !important; + text-shadow: 0 1px 1px #fff; } .snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, .toggleview:focus { color: #f60 !important; + text-shadow: none; + transition: ease all 0.2s; } -.snarkConfigTitle a:active, .toggleview:active { +.snarkConfigTitle a:active, input:active + .toggleview { color: #f90 !important; } @@ -1220,14 +1264,14 @@ a:link { text-decoration: none; word-wrap: break-word; opacity: 1; - color: #33a; + color: #4f509f; border-radius: 0; } a:visited { font-weight: normal; text-decoration: none; - color: #448; + color: #7d7edf; } a:hover, a:focus { @@ -1288,7 +1332,7 @@ input[type="image"], a img { input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { outline: none !important; - filter: drop-shadow(0 0 2px #f60) !important; + filter: drop-shadow(0 0 1px #f60) !important; } input::-moz-focus-inner { @@ -1306,7 +1350,7 @@ input[type="submit"], input[type="reset"], a.control { border: 1px solid #999; border-radius: 2px; background: #eee; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: linear-gradient(to bottom, #fff, #ddd); box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.8)); cursor: pointer !important; @@ -1315,7 +1359,7 @@ input[type="submit"], input[type="reset"], a.control { input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, a.control:hover, a.control:focus { color: #111; background: #fff; - background: linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: linear-gradient(to bottom, #ddd, #fff); border: 1px solid #89f; } @@ -1394,6 +1438,7 @@ input[type="text"], input[type="password"], input.r, input[name="nofilter_dataDi border: 1px solid #bbb; border-radius: 2px; box-shadow: inset 1px 1px 1px #ddd; + background: #f8f8ff; } input[type="text"]:focus, input[type="password"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea[name="i2cpOpts"]:focus { @@ -1498,7 +1543,7 @@ select { color: #333; border: 1px solid #bbb; border-radius: 2px; - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd); -moz-appearance: none; -webkit-appearance: none; box-shadow: inset 0 0 0 1px #fff; @@ -1511,11 +1556,11 @@ select option { } select:hover, select:active { - background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; } select:focus { - background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important; box-shadow: 0 0 0 1px #89f; color: #000; } @@ -1533,7 +1578,7 @@ select { } select[disabled], select[disabled]:hover { - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd) !important; opacity: 0.7; cursor: not-allowed; } @@ -1543,7 +1588,7 @@ select::-ms-expand { } textarea { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-weight: bold; padding: 1px 4px 0; color: #006; @@ -1581,7 +1626,7 @@ img:hover { border: 1px solid #349 !important; border-radius: 2px; background: #fff; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%); + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); box-shadow: inset 0 0 1px 1px #fff; filter: drop-shadow(0 0 1px #aaa) !important; width: 8px; @@ -1593,7 +1638,7 @@ img:hover { } #pagenav a:active img { - background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%); + background: linear-gradient(to bottom, #ddf 50%, #99f 50%); box-shadow: inset 2px 2px 2px 1px #99f; } @@ -1624,7 +1669,10 @@ img:hover { width: 100% !important; width: calc(100% - 150px) !important; margin: 2px 5px 0 5px; + border-collapse: separate; border: 1px solid #89f; + border-radius: 2px; + box-shadow: 0 0 1px #ccf; background: rgba(255,255,255,0.1); } @@ -1647,13 +1695,13 @@ img:hover { #trackerselect tr:first-child { font-weight: bold; border-bottom: 1px #89f; - background: linear-gradient(to bottom, #eef, #fff); } #trackerselect tr:first-child td { padding: 5px 10px; - border-bottom: 1px solid #89f; font-weight: bold !important; + border-bottom: 1px solid #89f; + background: linear-gradient(to bottom, #fff, #eef); } #trackerselect td { @@ -1661,10 +1709,14 @@ img:hover { } #trackerselect td:first-child, #trackerselect td:last-child { - width: 40%; + width: 35%; font-weight: normal; } +#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) { + width: 15%; +} + #trackerselect input { margin: 3px !important; } @@ -1709,11 +1761,6 @@ img:hover { opacity: 0.5; } -.snarkTorrentNoneLoaded td { - color: #0c153d !important; - background: #fff; -} - .snarkNewTorrent td { padding: 2px 3px; } @@ -1825,36 +1872,48 @@ img:hover { text-align: center; color: #0c153d; border: 1px solid #89f; - box-shadow: inset 0 0 2px 0 #ccc, 0 0 1px #bbb; word-wrap: break-word; background: #fff; } +.newtorrentsection, .addtorrentsection, .configsection { + border-radius: 3px; + box-shadow: inset 0 0 0 1px #fff; + background-blend-mode: luminosity; +} + +.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection { + border-radius: 0; +} + .mainsection { margin: 0; padding: 0; border-bottom: none; - background: repeating-linear-gradient(to right, #ddf 2px, #eef 2px, #ddf 4px); + background: none; } .newtorrentsection { - margin: 0 0 10px 0; + margin: 0 0 9px 0; padding: 0 10px; - background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #fff 0%, #eef 100%); + background: #eef url(images/snark_create.png) no-repeat scroll right center; + background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #f8f8ff, #eef); background-size: 68px 68px, 100% 100%; } .addtorrentsection { - margin: 10px 0; + margin: 9px 0; padding: 0 10px; - background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #fff 0%, #eef 100%); + background: #eef url(images/snark_add.png) no-repeat scroll 99.5% center; + background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #f8f8ff, #eef); background-size: 61px 61px, 100% 100%; } .configsection { margin: 0; padding: 0 10px 12px 10px; - background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #fff 0%, #eef 100%); + background: #eef url(images/configuration.png) no-repeat scroll 101% center;; + background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #f8f8ff, #eef); background-size: 68px 68px, 100% 100%; } @@ -1865,7 +1924,7 @@ img:hover { .configsectionpanel { margin: 9px 0 0 0; padding: 0; - background: linear-gradient(to bottom, #fff 0%, #eef 40px, #fff 100%); + background: linear-gradient(to bottom, #fff, #eef 40px, #fff); } .iframed .configsectionpanel { @@ -1902,7 +1961,7 @@ img:hover { } code { - font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; padding: 0 2px; color: #050; } @@ -1913,13 +1972,6 @@ code { border-radius: 0; } -.routerdown { - padding: 10px; - color: #0c153d; - border-bottom: 1px solid #89f; - box-shadow: inset 0 0 0 1px #fff; -} - input.trackername { width: 100px; } @@ -1955,21 +2007,6 @@ input#toggle_createtorrent:checked + label + hr + table { display: table; } -/* display panels by default on webkit based browsers (midori fix) */ -/* -@media screen and (-webkit-min-device-pixel-ratio: 0) { -input#toggle_addtorrent:not(checked) + label + hr + table, -input#toggle_createtorrent:not(checked) + label + hr + table { - display: table; -} - -input#toggle_addtorrent:checked + label + hr + table, -input#toggle_createtorrent:checked + label + hr + table { - display: none; -} -} -*/ - /* display by default in iframe to avoid overflow issue */ .iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table { @@ -1981,13 +2018,13 @@ input#toggle_createtorrent:checked + label + hr + table { display: none; } -label.toggleview, .snarkConfigTitle a:visited { - color: #006; +.toggleview img, .configsection img { + mix-blend-mode: luminosity; } -label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img { - color: #f90; +label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img, input:focus + .toggleview img { filter: drop-shadow(0 0 1px #f60); + mix-blend-mode: normal; } label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img { @@ -2066,7 +2103,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac /* debug panel */ #dhtdebugPanel { - background: linear-gradient(to bottom, #fff 0%, #eef 100%); + background: linear-gradient(to bottom, #fff, #eef); box-shadow: 0 0 2px 0 #ccc inset, 0 0 1px #bbb; border: 1px solid #89f; border-top: none; @@ -2127,8 +2164,8 @@ hr.debug:first-of-type { hr.debug { width: 100%; - background: #89f; - background: linear-gradient(to right, #89f 40%, #eef); + background: #ccf; + background: linear-gradient(to right, #ccf 40%, #eef); color: #efefff; border: none; } @@ -2625,12 +2662,17 @@ body { } @media screen and (max-width: 1400px) { - .percentBarText { line-height: 15px; } } +@media screen and (max-width: 1500px) { +.snarkTorrents thead img, .snarkDirInfo th img { + max-height: 20px !important; +} +} + @media screen and (min-width: 1100px) { body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo { font-size: 9pt !important; @@ -2662,6 +2704,11 @@ code, .snarkTorrents tt, #ourDest tt { font-size: 9pt; } +.snarkTorrentAction { + padding-left: 4px !important; + padding-right: 4px !important; +} + .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { padding: 4px !important; box-shadow: inset 0 0 0 1px #fff; @@ -2730,10 +2777,6 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, font-size: 8pt !important; } -.snarkTorrentDetails { - padding-left: 8px; -} - .snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails { font-size: 0 !important; max-width: 0 !important; diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index 3d5c60b9b2..de1f2fd33d 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -6,7 +6,7 @@ html { } body { - margin: 9px 8px; + margin: 5px 3px; color: #ee9; font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; background: url(/themes/console/dark/images/camotile2.png) top left; @@ -53,6 +53,8 @@ body.iframed { text-align: center; background: #000; background: repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px); + background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px); + background-blend-mode: darken, darken, normal; } .iframed .page { @@ -89,39 +91,50 @@ body.iframed { /* topnav */ .snarknavbar { - margin: 0 0 -6px !important; - padding: 9px 0 8px; - background: #010 !important; - background-image: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important; min-width: 888px; - text-align: center; - border: 1px solid #494; + z-index: 999; position: sticky; top: -1px; - z-index: 999; + margin: 0 0 -6px !important; + padding: 9px 0 8px; + text-align: center; + border: 1px solid #494; + box-shadow: inset 0 0 0 1px #000; + box-shadow: inset 0 0 0 2px #000, inset 0 0 10px 3px rgba(0,8,0,0.7); + background: #010 !important; + background: repeating-linear-gradient(135deg, #000 1px, #000 2px, #010 2px, #010 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, #010 2px, #010 4px), linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 52%, #010301 53%, #000000 56%, #000000 100%), url(/themes/console/dark/images/camotile2.png) top left !important; + background-blend-mode: exclusion, exclusion, normal, normal; } .iframed .snarknavbar { margin-top: -2px !important; + padding: 7px 0; position: static; + box-shadow: inset 0 0 0 1px #000; + background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 51%, #020602 52%, #010301 55%, #000000 57%), url(/themes/console/dark/images/camotile2.png) top left !important; +} + +_:-ms-lang(x), .snarknavbar { + background: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important; } .snarkNav:link, .snarkNav:visited { display: inline-block; + line-height: 120%; font-size: 9pt; font-weight: bold; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.1em; - margin: 0 -2px !important; - padding: 5px 7px 5px 22px !important; + margin: 0 -1px 0 -2px !important; + padding: 4px 7px 4px 22px !important; color: #3f3; text-shadow: 0 0 1px #000; border-radius: 0; border: 1px solid #494; box-shadow: inset 0 0 0 1px #000; - filter: drop-shadow(0 0 1px #000); - opacity: 0.7; + filter: drop-shadow(0 0 2px #000); + opacity: 0.75; position: relative; } @@ -129,10 +142,12 @@ body.iframed { background-size: 14px auto, 100% 100% !important; background-position: 7px center !important; background-repeat: no-repeat, repeat !important; + filter: drop-shadow(0 0 1px #000); } .snarkNav:hover, .snarkNav:focus { z-index: 10; + opacity: 1 !important; } .snarkNav:link:last-child { @@ -180,12 +195,13 @@ body.iframed { } .snarkNav:link:active, .snarkNav:active { - box-shadow: inset 3px 3px 3px #000 !important; + box-shadow: inset 3px 3px 3px 3px #3f1a04 !important; color: #fff !important; - border: 1px solid #fff !important; text-shadow: none; background-size: 14px auto !important; background-repeat: no-repeat !important; + filter: none; + transition: ease box-shadow 0.1s; } .nav_main:active { @@ -200,14 +216,10 @@ body.iframed { background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important; } -.snarkNav:link:last-of-type { +.nav_main.snarkNav:last-child { border-radius: 2px !important; } -.snarkNav:link[target="_blank"]:last-child { - border-radius: 0 2px 2px 0 !important; -} - .snarkNav:last-child { border-radius: 0 2px 2px 0 !important; } @@ -221,19 +233,21 @@ body.iframed { /* screenlog */ .snarkMessages { - font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; - line-height: 120%; - text-align: left; margin: 0; padding: 3px 5px; - overflow: hidden; - resize: none; - color: #69f; - height: 56px; width: auto; + height: 54px; + resize: none; + overflow: hidden; + line-height: 120%; + text-align: left; + font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + color: #69f; + box-shadow: inset 0 0 0 1px #000; + border-bottom: 1px solid #494; background: #000 url(images/hat.png) no-repeat scroll right bottom; background: url(images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000); - border-bottom: 1px solid #494; + background-size: auto 95%, 100% 100%; background-blend-mode: screen; } @@ -347,7 +361,17 @@ th { } thead th { - background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%) !important; + background: none; +} + +.iframed thead th { + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; + +} + +thead { + background: linear-gradient(to bottom, #003000, #000 75%) !important; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; } th:first-child { @@ -360,10 +384,6 @@ tfoot td:first-child { padding-left: 0; } -th:first-child img { - margin: 1px -2px 3px 1px !important; -} - tfoot th { padding-bottom: 4px !important; white-space: normal; @@ -384,11 +404,11 @@ tfoot th { border-left: 0 !important; border-right: 0 !important; text-align: left !important; - padding: 4px 0; + padding: 4px 0 4px 5px; } + .ParentDir a { font-weight: bold !important; - margin-left: -4px; } .SnarkTorrents { @@ -440,14 +460,39 @@ tfoot th { font-size: 8pt !important; } -.snarkTrackerDetails, .SnarkTorrentDetails { +.snarkTrackerDetails, .snarkTorrentDetails { width: 16px !important; - padding: 0 !important; text-align: center !important; + font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; } -.snarkTrackerDetails { - text-align: right !important; +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + padding: 3px !important; + border: 1px solid transparent !important; + margin: 0 !important; +} + +.snarkDirInfo td:first-child img { + margin: 0 2px !important; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #f60 !important; + border-radius: 2px; + box-shadow: 0 0 1px #f60; + background: #030; + background: linear-gradient(to bottom, #030 50%, #010 50%); + filter: none !important; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + border: 1px solid #f90 !important; + box-shadow: inset 2px 2px 3px 3px #000; + transform: scale(0.9); } .snarkGraphicStatus, .snarkTorrentStatus { @@ -527,22 +572,25 @@ th.snarkTorrentStatus { padding: 3px 4px 4px!important; } +.snarkTorrentInfo tr:nth-last-child(n+2) b { + margin-right: 2px; +} + .snarkTorrentInfo input[type="submit"] { min-width: 85px; } -#torrentInfoControl, #setPriority { - border-top: 1px solid #494 !important; - background: none !important; -} - #torrentInfoControl td, #setPriority th { text-align: right !important; - padding: 10px 8px !important; + padding: 11px 8px 10px !important; background: none !important; box-shadow: inset 0 0 0 1px #030; } +#setPriority th { + padding: 13px 8px 10px !important; +} + .SnarkTorrentInfo { margin-bottom: 1px !important; background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100; @@ -613,11 +661,18 @@ th.snarkTorrentStatus { border-bottom: 1px solid #494 !important; } -#setPriority, #torrentInfoControl { +#setPriority, #torrentInfoControl, .commentAction[colspan="5"] { background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important; + background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), url(/themes/console/dark/images/camotile2.png) top left repeat !important; + background-blend-mode: exclusion, darken, normal; + border-top: 1px solid #494 !important; border-bottom: 1px solid #494 !important; } +_:-ms-lang(x), #setPriority, #torrentInfoControl { + background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important; +} + .SnarkDirInfo img { max-height: 16px; max-width: 16px; @@ -740,7 +795,7 @@ td { } .snarkTorrentStatus { - padding: 3px 5px 3px 0 !important; + padding: 3px 5px 3px 1px !important; line-height: 90%; min-width: 0; text-align: left !important; @@ -779,6 +834,10 @@ td { background: #030 !important; } +.snarkTorrents thead tr:hover, .snarkDirInfo thead tr:hover { + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; +} + tr:hover .percentBarText { opacity: 1; } @@ -797,12 +856,6 @@ _:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hove mix-blend-mode: normal; } -/* -.snarkTorrents a:hover, .snarkDirInfo a:hover { - color: #f40 !important; -} -*/ - .snarkTorrentEven, .snarkTorrentEven:nth-child(even) { background: #001000; } @@ -837,7 +890,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { } .snarkFileName { - padding: 4px 5px 4px 0 !important; + padding: 4px 5px 4px 3px !important; text-align: left !important; word-break: break-all; } @@ -899,9 +952,11 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { .percentBarOuter { background: #000; background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); + background: linear-gradient(to right, rgba(0,16,0,0.1), rgba(128,255,0,0.1)), repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); border: 1px solid #040; border-bottom: 1px solid #020; border-right: 1px solid #020; + border-radius: 2px; opacity: 1; box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); margin: 1px auto; @@ -915,6 +970,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { height: 100%; background: #0e5f00; background: linear-gradient(to bottom, rgba(28, 148, 58, 0.6) 0%, rgba(9, 47, 16, 0.6) 50%, rgba(13, 39, 7, 0.6) 50%, rgba(9, 27, 5, 0.6) 50%, rgba(9, 21, 3, 0.6) 100%); + border-radius: 2px; box-shadow: inset 0 0 0 1px #000; } @@ -929,15 +985,19 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { } .percentBarText { + height: 1em; + line-height: 1; text-align: center; font-weight: bold; - padding: 0.5px 0 0; + margin-left: -3px; + padding: 0 4px 0 2px; white-space: nowrap; display: block; color: #dfd137; opacity: 0; text-shadow: 0 0 1px rgba(0,0,0,0.8); transition: ease opacity 0.2s; + } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -987,7 +1047,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { background: url(images/infocircle.png) left center no-repeat; background-size: 14px auto; padding-left: 20px; - line-height: 140%; + line-height: 160%; } .snarkConfigTitle, .toggleview { @@ -997,10 +1057,10 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { margin: 5px 0 10px !important; letter-spacing: 0.2em; border: 1px solid #494; - border-radius: 0; + border-radius: 0 0 2px 2px; border-top: none; background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important; - background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%) !important; font-variant: small-caps !important; display: inline-block; margin: 0 0 -3px !important; @@ -1030,25 +1090,31 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { display: inline-block; width: 100%; padding-bottom: 1px !important; + transition: ease all 0.1s; } .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview { background: #000 !important; background: linear-gradient(to bottom, #001000 50%, #000 50%) !important; + mix-blend-mode: exclusion !important; + transition: ease all 0.1s; } -.snarkConfigTitle:hover a { +.snarkConfigTitle:hover a, .snarkConfigTitle a:focus { color: #f60 !important; + transition: ease all 0.1s; } .snarkConfigTitle:active, .toggleview:active { - box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #000; + box-shadow: inset 3px 3px 3px 3px #000, 0 0 0 1px #000; + transition: ease all 0.1s; } .snarkConfigTitle img, .toggleview img { margin-right: -2px; margin-bottom: 2px; vertical-align: middle; + filter: sepia(1) hue-rotate(70deg); } .toggleview:active, .snarkConfigTitle a:active { @@ -1064,6 +1130,10 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { transition: ease transform 0.3s; } +.toggle_input:focus + label > img, .snarkConfigTitle a:focus img { + filter: drop-shadow(0 0 1px #f60) !important; +} + .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { margin: -1px -1px -14px !important; display: block; @@ -1077,6 +1147,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { font-size: 10.5pt !important; filter: none; box-shadow: inset 0 0 0 1px #000; + mix-blend-mode: normal !important; } .iframed .configsectionpanel .snarkConfigTitle { @@ -1210,7 +1281,7 @@ input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:activ input[type=image], thead img { padding: 0 !important; - border-radius: 3px; + border-radius: 0; border: 0 none transparent !important; margin: 0 2px; } @@ -1233,18 +1304,21 @@ thead a:active img { } .snarkTorrentAction input[type="image"] { - border: 1px solid #151 !important; margin: 0 2px !important; padding: 4px !important; - background: #030; - background: linear-gradient(to bottom, #030 0%, #030 50%, #010 50%, #010 100%); - box-shadow: inset 0 0 0 1px #000; - border-radius: 2px; height: 9px; + border: 1px solid #151 !important; + border-radius: 3px; + box-shadow: inset 0 0 0 1px #000; + background: #030; + background: linear-gradient(to bottom, #030 50%, #010 50%); } .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus { border: 1px solid #f60 !important; + background: #060; + background: linear-gradient(to bottom, #060 50%, #010 50%); + filter: saturate(150%) drop-shadow(0 0 1px #930) !important; } .snarkTorrentAction input[type="image"]:active { @@ -1257,7 +1331,7 @@ input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataD color: #bb7; padding: 4px 5px !important; background: #000; - background: linear-gradient(to bottom, #000 0%, #010 100%); + background: linear-gradient(to bottom, #000, #010); box-shadow: inset 0 0 3px 3px #000; outline: none; } @@ -1745,6 +1819,7 @@ _:-ms-lang(x), #trackerselect tr:last-child { background: #000 url(images/snark_create.png) no-repeat scroll right center; background: url(images/snark_create.png) center right no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat; background-size: 80px 80px, 100% 100%, 175px 175px; + background-blend-mode: soft-light, normal, normal; } .addtorrentsection { @@ -1767,6 +1842,8 @@ _:-ms-lang(x), #trackerselect tr:last-child { padding: 0; background: #000 url(images/configuration.png) no-repeat scroll right center; background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat; + background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat; + background-blend-mode: darken, darken, normal, normal; } .mainsection + form > .configsectionpanel:first-child { @@ -2325,7 +2402,8 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label } .snarkCommentInfo th, .snarkComments th { - background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%); + background: linear-gradient(to bottom, #003000, #000 75%); + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); padding: 8px 5px; white-space: normal; } @@ -2342,7 +2420,8 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label .snarkCommentInfo th { padding: 8px 5px 8px 30px; - background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%); + background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #003000, #000 75%); + background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); } .snarkCommentInfo td, .snarkComments td { @@ -2603,6 +2682,14 @@ td#bwHelp a { .snarkFileStatus img[src*="clock"] { margin-top: 4px; } + +.addtorrentsection .toggleview { + padding-bottom: 5px !important; +} + +.configsection .snarkConfigTitle { + padding-bottom: 4px !important; +} } @media screen and (min-width: 1100px) { @@ -2701,7 +2788,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } .snarkConfigTitle a { - padding-bottom: 2px !important; + padding-bottom: 1px !important; } textarea[name="i2cpOpts"] { @@ -2710,8 +2797,23 @@ textarea[name="i2cpOpts"] { font-weight: bold; } -.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] { +.snarkTorrents thead th::before { + content: ""; + display: inline-block; + min-height: 18px; +} + +.snarkTorrents thead img { + margin: 0 1px 3px !important; +} + +.snarkTorrentAction { + padding: 1px 3px !important; +} + +.snarkTorrentAction input[type="image"] { height: 11px; + margin: 1px 2px !important; } .snarkTrackerDetails, .SnarkTorrentDetails { @@ -2722,6 +2824,25 @@ textarea[name="i2cpOpts"] { padding-left: 5px; } +.snarkTorrentName:hover a, .snarkFileName:hover a { + margin: -2px 0 -2px -2px; + padding: 3px 3px 3px 5px; + background: rgba(0,16,0,0.3); + border: 1px solid #002000; + border-radius: 2px 20px 20px 2px; + box-shadow: inset 2px 2px 2px rgba(0,8,0,0.5); +} + +.snarkFileName:hover a { + margin-left: -5px; + padding-right: 0; +} + +.snarkTorrentName:active a, .snarkFileName:active a { + border: 1px solid #930; + box-shadow: inset 4px 4px 4px rgba(0,8,0,0.8); +} + .debugConnection { line-height: 150%; } @@ -2803,6 +2924,9 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, .snarkTorrentName a:not(old) { max-width: 360px !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .snarkTorrents th img { @@ -2815,6 +2939,8 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, .percentBarText { font-size: 8pt !important; + line-height: 1; + padding: 1px 0; } .snarkTorrentDetails { @@ -2847,8 +2973,20 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, font-size: 10pt !important; } +.toggleview, .snarkConfigTitle, .configsection .snarkConfigTitle { + padding-bottom: 3px !important; +} + +.addtorrentsection .toggleview { + padding-bottom: 2px !important; +} + +.snarkConfigTitle a { + padding-bottom: 0 !important; +} + .toggleview img, .snarkConfigTitle img { - height: 12px; + height: 14px; margin-right: 0 !important; } diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index 19de36f703..5d9a660cc6 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -8,7 +8,7 @@ body { font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed; background-size: 32px 32px; - margin: 5px; + margin: 3px 4px; } /* preload top navigation mouseovers */ @@ -142,11 +142,13 @@ button::-moz-focus-inner, input::-moz-focus-inner { outline: none; filter: drop-shadow(0 0 1px #ccf); position: relative; + transition: ease all 0.1s; } .snarkNav:link, .snarkNav:hover, .snarkNav:focus, .snarkNav:active { background-size: 14px auto, 100% 100% !important; background-position: 8px center; + transition: ease all 0.1s; } .snarkNav:hover, .snarkNav:focus { @@ -167,16 +169,28 @@ button::-moz-focus-inner, input::-moz-focus-inner { background: url(images/button_snark.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } +.iframed .nav_main { + background: url(images/button_snark.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff; +} + .nav_forum { background: #fff url(images/button_forum.png) 8px center no-repeat; background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } +.iframed .nav_forum { + background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff; +} + .nav_tracker { background: #fff url(images/button_tracker.png) 8px center no-repeat; background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } +.iframed .nav_tracker { + background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff; +} + .snarkNav:hover, .snarkNav:focus { color: #f60; border: 1px solid #f60; @@ -271,11 +285,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { font-weight: bold; background: rgba(255, 255, 255, 0.25); opacity: 0.9; - mix-blend-mode: darken; -} - -.snarkMessages li:hover { - opacity: 1; mix-blend-mode: multiply; } @@ -308,6 +317,11 @@ button::-moz-focus-inner, input::-moz-focus-inner { mix-blend-mode: normal; } +#closelog { + position: relative; + z-index: 999; +} + .logshim { margin-top: 11px !important; } @@ -533,13 +547,34 @@ th.snarkGraphicStatus, th.snarkTorrentStatus { color: #f60; } -.snarkTrackerDetails, .SnarkTorrentDetails { +.snarkTrackerDetails, .snarkTorrentDetails { width: 16px !important; - padding: 2px 1px 2px 0; + text-align: center !important; + font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; } -.SnarkTorrentDetails { - text-align: center; +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + margin: 0; + padding: 3px !important; + border: 1px solid transparent !important; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #f60 !important; + border-radius: 2px; + box-shadow: 0 0 1px #f60; + background: #ddf; + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); + filter: none !important; + mix-blend-mode: normal; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + box-shadow: inset 2px 2px 2px #99f; } .snarkTorrentName { @@ -636,7 +671,6 @@ tr:hover .snarkTorrentName a, tr:hover .snarkFileName a { .snarkTorrentUploaded, .snarkTorrentRateUp { font-style: italic !important; - color: #59698f !important; } .snarkTorrentDownloaded { @@ -704,7 +738,7 @@ td { .snarkTorrentOdd, .snarkTorrentInfo tr:nth-child(odd), .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) { background: #e0e0ff; - background: repeating-linear-gradient(45deg, rgba(255,255,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #fafaff 5px) #fafaff; + background: repeating-linear-gradient(45deg, rgba(240,240,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #f6f6ff 5px) #f6f6ff; } .snarkTorrentOdd td, .snarkTorrentEven td, .snarkCommentInfo tr, .snarkComments tr { @@ -788,16 +822,26 @@ tr:hover .percentBarText { background: #eef; background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); border: 1px solid #99f; + border-radius: 2px; box-shadow: 0 0 1px rgba(200,200,200,0.8); margin: 0 auto; } .percentBarInner { border: none; + border-radius: 2px; height: 100%; - background: #bbf; - background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); box-shadow: inset 0 0 0 1px #ddf; + background: #bbf; + background: linear-gradient(to right, rgba(255,255,0,0.1) 60px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); +} + +.peerinfo .percentBarInner { + background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to right, rgba(255,255,0,0.1) 40px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); } .percentBarInner.percentBarComplete { @@ -886,10 +930,12 @@ tr:hover .percentBarText { display: inline-block; width: 100%; margin-top: -1px; + transition: ease all 0.1s; } .snarkConfigTitle:hover a, .snarkConfigTitle:focus a { color: #f60 !important; + transition: ease all 0.1s; } .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover { @@ -900,13 +946,19 @@ tr:hover .percentBarText { letter-spacing: 0.15em; border: 1px solid #7778bf; border-top: 0; + border-radius: 0 0 3px 3px; background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center; background: linear-gradient(to bottom, #fff 50%, #eef 51%); font-variant: small-caps !important; - box-shadow: 0 1px 2px #ccf; + box-shadow: 0 1px 2px #ccf, inset 0 0 0 1px #fff, inset 0 0 0 1px #fff; display: inline-block; min-width: 260px; color: #559 !important; + transition: ease all 0.1s; +} + +.iframed .snarkConfigTitle, .iframed .toggleview, .iframed .configsectionpanel .snarkConfigTitle:hover { + background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)); } .snarkConfigTitle img:hover { /* inert titles */ @@ -936,7 +988,8 @@ tr:hover .percentBarText { .snarkConfigTitle:active, .toggleview:active { color: #f30 !important; - box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558; + box-shadow: 0 0 0 0 #fff, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558; + transition: ease all 0.1s; } .snarkConfigTitle img, .toggleview img { @@ -1093,6 +1146,7 @@ input[type=submit], a.control, input.disabled { min-width: 90px; text-align: center; box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd; + text-shadow: 0 1px 1px #fff; filter: drop-shadow(0px 0 1px #ccf); } @@ -1102,6 +1156,7 @@ input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:f background: #eef; background: linear-gradient(#fff 50%, #ffe8bf 50%, #efd9b3 100%); box-shadow: inset 0 0 0 1px #fff; + text-shadow: none; } input[type=submit]:active, a.control:active { @@ -1127,10 +1182,40 @@ a.controld { display: none; } -a.control img { - filter: none; +a.control img, a.control:hover img, a.control:focus img, a.control:active img { + filter: none !important; } +/* sync iframe buttons with main console theme */ + +.iframed input[type="submit"], .iframed a.control { + color: #41465f; + font-weight: normal; + border: 1px solid #999daf; + background: linear-gradient(to bottom, #fff, #efefff); + transition: ease border 0.7s; +} + +.iframed input[type="submit"]:hover, .iframed input[type="submit"]:focus, .iframed a.control:hover, .iframed a.control:focus { + color: #19191f; + border: 1px solid #f60; + background: linear-gradient(to bottom, #eee, #fff); + transition: ease border 0.7s; +} + +.iframed input[type="submit"]:active, .iframed a.control:active { + color: #4c526f !important; + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555 !important; + background: linear-gradient(to bottom, #eee, #fff) !important; + background-blend-mode: luminosity; +} + +.iframed a.control:active img { + mix-blend-mode: luminosity; +} + +/* end iframed button sync */ + input[type=image], thead img { padding: 0 !important; border-radius: 0; @@ -1367,8 +1452,7 @@ img[src$="details.png"] { .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { padding: 0 10px; border: 1px solid #7778bf; - color: #001; - box-shadow: inset 0 0 0 1px #efefff; + box-shadow: inset 0 0 0 1px #fff; background-blend-mode: luminosity; text-align: center; } @@ -1378,6 +1462,7 @@ img[src$="details.png"] { background: #fff url(images/snark_create.png) no-repeat right center; background: url(images/snark_create.png) no-repeat right center, linear-gradient(to bottom, #fafaff, #e0e0ef); background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px); + background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); background-size: 80px 80px, 100% 100%; } @@ -1385,7 +1470,7 @@ img[src$="details.png"] { margin: 10px 0; background: #fff url(images/snark_add.png) no-repeat right 15px center; background: url(images/snark_add.png) no-repeat right 15px center, linear-gradient(to bottom, #fafaff, #e0e0ef); - background: url(images/snark_add.png) no-repeat scroll right 15px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px); + background: url(images/snark_add.png) no-repeat scroll right 15px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); background-size: 61px 61px, 100% 100%; } @@ -1394,7 +1479,7 @@ img[src$="details.png"] { padding-bottom: 13px; background: #fff url(images/configuration.png) right -25px center no-repeat; background: url(images/configuration.png) right -25px center no-repeat, linear-gradient(to bottom, #fafaff, #e0e0ef); - background: url(images/configuration.png) no-repeat scroll right -25px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px); + background: url(images/configuration.png) no-repeat scroll right -25px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); background-size: 84px 82px, 100% 100%; } @@ -1402,12 +1487,13 @@ img[src$="details.png"] { margin: -12px 0 0; background: #fff url(images/configuration.png) no-repeat scroll right center; background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #fafaff, #e0e0ef); - background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fafaff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px); + background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 5%, #f4f4ff 95%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); background-size: 84px 82px, 100% 100%, 100% 100%; } form:last-child .configsectionpanel { margin-top: 10px; + background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 10%, #f4f4ff 90%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); } .configsectionpanel table { @@ -1441,6 +1527,7 @@ form:last-child .configsectionpanel { .newtorrentsection td:first-child, .addtorrentsection td:first-child { min-width: 140px; font-weight: bold; + color: #41465f; } /* new torrent -> tracker select */ @@ -1468,6 +1555,7 @@ form:last-child .configsectionpanel { text-overflow: ellipsis; font-weight: bold; text-align: center; + color: #41465f; } #trackerselect td { @@ -2459,7 +2547,7 @@ input[type="submit"] { .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { font-size: 12pt !important; - padding: 4px 1px 5px !important; + padding: 4px 1px 3px !important; min-width: 300px; } diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index 69d56653a4..1276dc515f 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -103,7 +103,7 @@ body.iframed { .snarkNav:link, .snarkNav:visited { font-size: 9pt; font-weight: bold; - margin: 0 -1px 0 0 !important; + margin: 0 -1px 0 -3px !important; padding: 5px 7px 5px 26px !important; text-decoration: none !important; letter-spacing: 0.15em; @@ -116,6 +116,7 @@ body.iframed { background: url(images/button_tracker.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%); box-shadow: inset 0 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 1px #000; + transition: ease all 0.1s; } .snarkNav:link:first-child { @@ -169,17 +170,20 @@ body.iframed { opacity: 1; color: #652787; border-color: #652787; + position: relative; + z-index: 999; + transition: ease box-shadow 0.1s; } .snarkNav:active { text-decoration: none !important; color: #fff; - border: 1px solid #fff; background: #652787 url(images/button_tracker_active.png) !important; background-repeat: no-repeat !important; background-position: 9px center !important; box-shadow: inset 3px 3px 2px #1f002f; text-shadow: none; + transition: ease all 0.1s; } .snarkNav:link:last-of-type { @@ -489,14 +493,39 @@ th.snarkTorrentStatus { text-align: center !important; } -.snarkTrackerDetails, .SnarkTorrentDetails { +.snarkTrackerDetails, .snarkTorrentDetails { width: 16px !important; - padding: 0 !important; text-align: center !important; + font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; } -.snarkTrackerDetails { - text-align: right !important; +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + padding: 3px !important; + border: 1px solid transparent !important; + margin: 0 !important; +} + +.snarkDirInfo td:first-child img { + margin: 0 2px !important; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #652787 !important; + border-radius: 2px; + box-shadow: 0 0 1px #652787; + background: #003; + background: linear-gradient(to bottom, #007 50%, #001 50%); + filter: none !important; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + border: 1px solid #f90 !important; + box-shadow: inset 2px 2px 3px 3px #000; + transform: scale(0.9); } .snarkGraphicStatus, .snarkTorrentStatus { @@ -1014,6 +1043,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT background: #000; background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); border: 1px solid #171c3f; + border-radius: 2px; box-shadow: none; box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); margin: 3px auto; @@ -1028,6 +1058,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT height: 100%; background: #33a; background: linear-gradient(to bottom, #33a 0%, #226 50%, #003 50%, #000 100%); + border-radius: 2px; box-shadow: inset 0 0 0 1px #000; opacity: 0.8; } @@ -1127,10 +1158,12 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT text-align: center !important; letter-spacing: .15em; border: 1px solid #443da0; + border-radius: 0 0 2px 2px; background: #003; background: linear-gradient(to bottom, #191729, #1f1e32 50%, #000 50%); box-shadow: inset 0 0 0 1px #000; text-shadow: 0 0 1px #000; + transition: ease all 0.1s; } .toggleview { @@ -1140,17 +1173,24 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT .snarkConfigTitle a { display: inline-block; margin-top: -1px; + transition: ease all 0.1s; +} + +.snarkConfigTitle:hover a { + transition: ease all 0.1s; } .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview { background: #002 !important; background: linear-gradient(to bottom, #004 50%, #002 50%) !important; + transition: ease all 0.1s; } .snarkConfigTitle:active, .toggleview:active { background: #003 !important; background: linear-gradient(to bottom, #004 50%, #002 50%) !important; - box-shadow: inset 3px 3px 3px #000; + box-shadow: inset 3px 3px 3px 3px #002; + transition: ease all 0.1s; } .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { @@ -1217,10 +1257,6 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT width: 100%; } -.snarkConfig i { - padding-left: 5px; -} - form { margin-bottom: 0; } diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index bbb3e15638..a06517c0cc 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -107,6 +107,7 @@ _:-ms-lang(x), .snarknavbar { .snarkNav:link, .snarkNav:visited { display: inline-block; + line-height: 130%; text-decoration: none !important; text-transform: uppercase !important; text-shadow: 0 0 1px #000; @@ -159,6 +160,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { text-shadow: none; border: 1px solid #730; box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3f1900 !important; + transition: ease box-shadow 0.1s; } .snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] { @@ -465,11 +467,13 @@ th.snarkTorrentStatus { padding: 2px 0; } +/* .snarkTrackerDetails { text-align: right; padding-right: 2px; min-width: 36px; } +*/ .snarkTorrentName { line-height: 110%; @@ -581,6 +585,16 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type= min-width: 0 !important; } +.snarkTorrents thead th:nth-child(3) { + max-width: 40px !important; + overflow: visible; + white-space: nowrap; +} + +.snarkTorrents thead th:nth-child(3) img { + display: inline-block; +} + .snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover td { background: #212 !important; background: linear-gradient(to bottom, #313, #101) !important; @@ -625,8 +639,6 @@ td:first-child { } .snarkTrackerDetails img { - width: 16px; - height: 16px; opacity: 0.75; } @@ -634,6 +646,42 @@ td:first-child { opacity: 1; } +.snarkTrackerDetails, .snarkTorrentDetails { + width: 16px !important; + text-align: center !important; + font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; +} + +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + padding: 3px !important; + margin: 0 1px !important; + width: 16px; + height: 16px; + border: 1px solid transparent !important; + transition: ease all 0.2s; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #f60 !important; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #414; + background: #515; + background: linear-gradient(to bottom, #717 50%, #414 50%); + filter: none !important; + transition: ease all 0.2s; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + border: 1px solid #101 !important; + box-shadow: inset 3px 3px 3px #313; + mix-blend-mode: luminosity; + transition: none; +} + .snarkTorrentOdd { background: #351933; } @@ -947,6 +995,8 @@ tr:hover .percentBarInner { .thumb:hover { margin: 0; + width: auto !important; + height: auto !important; max-width: 80px; max-height: 80px; transition: ease all 0.3s; @@ -1139,6 +1189,7 @@ th.headerpriority br, .snarkTorrents thead th br { background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%) !important; box-shadow: inset 0 0 1px #3f173f; color: #d2baff !important; + transition: ease all 0.1s; } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { @@ -1159,6 +1210,7 @@ th.headerpriority br, .snarkTorrents thead th br { display: inline-block; margin: 0 0 -3px !important; min-width: 260px; + transition: ease all 0.1s; } .snarkConfigTitle:hover a img, a:focus .snarkConfigTitle img, .toggle_input:focus + .toggleview img { diff --git a/installer/resources/themes/snark/vanilla/nocollapse.css b/installer/resources/themes/snark/vanilla/nocollapse.css index 381c93b1a4..394eb3ce78 100644 --- a/installer/resources/themes/snark/vanilla/nocollapse.css +++ b/installer/resources/themes/snark/vanilla/nocollapse.css @@ -7,7 +7,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent } label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input:focus + .toggleview { - background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%) !important; + background: linear-gradient(to bottom, #fff7ef, #cfc1b5) !important; color: #930 !important; cursor: default !important; box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0 !important; diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index d91d0e1840..a0890bae59 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -139,7 +139,7 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4f3d36; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(111, 96, 90, 0.3), 0 0 1px 1px rgba(79, 61, 54, 0.5); background: #efefef; - background: linear-gradient(to bottom, #efefef 50%, #cfc7c2 52%, #cfc7c2 100%); + background: linear-gradient(to bottom, #efefef 50%, #cfc7c2 53%); min-width: 900px; width: 70%; text-align: center; @@ -159,26 +159,27 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { } .snarkNav:link, .snarkNav:visited { - text-decoration: none !important; - text-transform: uppercase !important; - padding: 4px 10px 4px 28px !important; + display: inline-block; + position: relative; + z-index: 30; margin: -3px -4px -4px 0 !important; - letter-spacing: 0.08em; + padding: 4px 10px 4px 28px !important; + line-height: 130%; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-weight: bold; font-size: 10pt; color: #3f271b; + text-shadow: 0 0 1px #fff5ef; + text-decoration: none !important; + text-transform: uppercase !important; + letter-spacing: 0.08em; + border: 1px solid #2f1b0c; + border-radius: 0; + box-shadow: inset 0 0 0 1px #efe6e0, inset 0 0 0 rgba(0,0,0,0), 0 0 0 1px rgba(77, 69, 62, 0.1); background-size: 17px auto, 100% 100%, 100% 100% !important; background-position: 12px center, center center, center center !important; background-repeat: no-repeat !important; - border-radius: 0; - border: 1px solid #efe6e0; - text-shadow: 0 0 1px #fff5ef; - box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1); - border: 1px solid #2f1b0c; - display: inline-block; - position: relative; - z-index: 30; + transition: ease all 0.1s; } _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { @@ -190,9 +191,10 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { text-decoration: none !important; text-shadow: none !important; color: #930 !important; - box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1); + box-shadow: inset 0 0 0 1px #fff5ef, inset 0 0 0 rgba(0,0,0,0), 0 0 0 1px rgba(77, 69, 62, 0.1); filter: drop-shadow(0 0 1px rgba(200,60,0,0.2)); z-index: 10; + transition: ease all 0.1s; } .snarkNav:active { @@ -220,34 +222,34 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { .nav_main:hover, .nav_main:focus { background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat !important; - background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%) !important; + background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%) !important; background-size: 18px auto, 100% 100%, 100% 100% !important; } .nav_forum:hover, .nav_forum:focus { background: #ffeadf url(images/button_forum_hover.png); - background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%); } .nav_tracker:hover, .nav_tracker:focus { background: #ffeadf url(images/button_tracker_hover.png); - background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%); } .nav_main:active { background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat !important; - background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%) !important; + background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%) !important; background-size: 18px auto, 100% 100%, 100% 100% !important; } .nav_forum:active { background: #dfb899 url(images/button_forum_active.png); - background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); + background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%); } .nav_tracker:active { background: #dfb899 url(images/button_tracker_active.png); - background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); + background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%); } .snarkNav:last-child { @@ -270,6 +272,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { .snarkNav:active, .snarkNav:visited:active { color: #eee !important; + transition: ease box-shadow 0.1s; } /* end topnav */ @@ -289,7 +292,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { height: 56px; width: auto; background: #3f3833 url(images/hat.png) no-repeat scroll right center; - background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); + background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d, #3f3833); background-size: auto 105%, 100% 100%; } @@ -593,12 +596,36 @@ th.snarkTorrentStatus { } .snarkTrackerDetails, .snarkTorrentDetails { - padding: 2px 0 !important; width: 16px !important; + text-align: center !important; + font-weight: bold; + padding-left: 0 !important; + padding-right: 0 !important; } -.snarkTrackerDetails { - padding: 0 3px !important; +.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { + padding: 3px !important; + border: 1px solid transparent !important; + margin: 0 !important; +} + +.snarkDirInfo td:first-child img { + margin: 0 2px !important; +} + +.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { + border: 1px solid #f60 !important; + border-radius: 2px; + box-shadow: 0 0 1px #f60; + background: #ffeadf; + background: linear-gradient(to bottom, #ffeadf 50%, #cfb6a8 50%); + filter: none !important; +} + +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { + box-shadow: inset 2px 2px 3px 1px #59513b; } .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp { @@ -650,7 +677,7 @@ th.snarkTorrentStatus { border: 1px solid #4d453e; border-radius: 2px; padding: 3px !important; - background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%, #cfc1b5); box-shadow: inset 0 0 0 1px #efe6e0; vertical-align: middle; mix-blend-mode: normal; @@ -660,7 +687,7 @@ th.snarkTorrentStatus { .snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus { - background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); + background: linear-gradient(to bottom, #ffeadf 51%, #cfb6a8 52%); border: 1px solid #930 !important; box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px #f30); @@ -993,15 +1020,16 @@ thead img.disable, img.disable:hover { } .percentBarOuter { - background: #fff7ef; - background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px); + display: inline-block; + margin: 0; border: 1px solid #998; border-bottom: 1px solid #776; border-right: 1px solid #776; + border-radius: 2px; box-shadow: none; opacity: 1; - margin: 0; - display: inline-block; + background: #fff7ef; + background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px); } .snarkTorrentDownloaded .percentBarOuter { @@ -1022,25 +1050,26 @@ thead img.disable, img.disable:hover { } .percentBarInner { - border: none; height: 100%; - background: #cfc1b5; - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 0%, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1) 100%); - box-shadow: inset 0 0 0 1px #efe6e0; - vertical-align: middle; height: 16px; + vertical-align: middle; + border: none; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #efe6e0; + background: #cfc1b5; + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1)); } .snarkTorrentDownloaded .percentBarInner { - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5)); + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5)); } .snarkDirInfo .percentBarInner { - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5)); + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5)); } .peerinfo .percentBarInner { - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%) !important; + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)) !important; } .percentBarText, .percentBarOuter { @@ -1207,7 +1236,7 @@ input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] border: 1px solid #111; border-top: 0; background: #fff7ef; - background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, rgba(207, 193, 181, 0.6) 52%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px); + background: linear-gradient(to bottom, #fff7ef 50%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px); color: #444039 !important; box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0; display: inline-block; @@ -1218,8 +1247,9 @@ input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview { background: #ffeadf; - background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); + background: linear-gradient(to bottom, #ffeadf 50%, #cfb6a8 50%); color: #930 !important; + transition: ease all 0.1s; } input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus { @@ -1234,14 +1264,6 @@ input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus { box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513b; } -.snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover { - color: #930 !important; -} - -.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active { - color: #f30 !important; -} - .snarkConfigTitle { padding-top: 3px !important; } @@ -1290,7 +1312,7 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, .toggleview, text-shadow: 0 0 1px #fff5ef; } -.snarkConfigTitle a:hover, .toggleview:hover, .snarkConfigTitle a:focus, .toggleview:focus { +.snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover, .toggleview:hover, .snarkConfigTitle a:focus, .toggleview:focus { color: #930 !important; } @@ -1332,7 +1354,7 @@ a.control, input[type="submit"], input[type="reset"] { } a.control, a.controld { - background: linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); background-size: 100% 100% !important; border: 1px solid #4F3927; border-radius: 2px; @@ -1351,7 +1373,7 @@ a.controld { a.control:hover, a.control:focus { color: #930 !important; - background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); filter: drop-shadow(0px 0 1px #f60); } @@ -1470,87 +1492,87 @@ a.controld img, a.controld:hover img, a.controld:focus img, a.controld:active im } input.accept, input.disabled[name="savepri"] { - background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.accept:hover, input.accept:focus { - background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.add { - background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.add:hover, input.add:focus { - background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.cancel { - background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.cancel:hover, input.cancel:focus { - background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.create { - background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.create:hover, input.create:focus { - background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.delete { - background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.delete:hover, input.delete:focus { - background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.reload { - background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; } input.reload:hover, input.reload:focus { - background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.reload[name="recheck"], input.disabled[name="recheck"] { - background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; margin: 6px 2px; } input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus { - background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.starttorrent { - background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 18px !important; margin: 6px; } input.starttorrent:hover, input.starttorrent:focus { - background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input.stoptorrent { - background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 50%, #ded9d5 50%); padding: 5px 5px 5px 21px !important; margin: 4px 5px; } input.stoptorrent:hover, input.stoptorrent:focus { - background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%); } input[name^="action_"] { @@ -1696,30 +1718,30 @@ img[src$="details.png"] { .section, .mainsection { padding: 10px; background: #dfd7d1; - background: linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: linear-gradient(to bottom, #dfd7d1, #cfc7c2); } .newtorrentsection { background: #dfd7d1 url(images/snark_create.png) no-repeat scroll right center; - background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1, #cfc7c2); background-size: 80px 80px, 100% 100%; } .addtorrentsection { background: #dfd7d1 url(images/snark_add.png) no-repeat scroll right 10px center; - background: url(images/snark_add.png) no-repeat scroll right 10px center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: url(images/snark_add.png) no-repeat scroll right 10px center, linear-gradient(to bottom, #dfd7d1, #cfc7c2); background-size: 61px 61px, 100% 100%; } .configsection { padding: 0 10px 13px 10px; - background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #dfd7d1, #cfc7c2); background-size: 84px 82px, 100% 100%; } .configsectionpanel { background: #dfd7d1 url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center; - background: url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1, #cfc7c2); background-size: 84px 82px, 100% 100%; } @@ -1804,13 +1826,13 @@ code, tt { } .trackerconfig th { - background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%); + background: linear-gradient(to bottom, #efefef 51%, #cfc7c2 52%); } .trackerconfig th:first-child { border-radius: 2px 0 0 2px; border-left: 1px solid #6f533e; - background: url(/themes/console/images/buttons/delete.png) center right 8px no-repeat, linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%); + background: url(/themes/console/images/buttons/delete.png) center right 8px no-repeat, linear-gradient(to bottom, #efefef 51%, #cfc7c2 52%); } .trackerconfig th:last-child { @@ -2616,11 +2638,11 @@ td.snarkGraphicStatus img { } .snarkTorrentDownloaded .percentBarInner { - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5)); + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75), rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5)); } .snarkDirInfo .percentBarInner { - background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 23px, rgba(255, 255, 0, 0.5) 47px, rgba(0, 255, 0, 0.5)); + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75), rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 23px, rgba(255, 255, 0, 0.5) 47px, rgba(0, 255, 0, 0.5)); } .snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarOuter, .peerinfo .percentBarText { @@ -2907,6 +2929,23 @@ select { min-height: 22px; } +.snarkTorrentName:hover a, .snarkFileName:hover a { + margin: -2px 0 0 -2px; + padding: 3px 3px 3px 5px !important; + background: rgba(207, 193, 181, 0.4); + border-radius: 2px 20px 20px 2px; + box-shadow: inset 2px 2px 2px rgba(64,52,31,0.3); +} + +.snarkFileName:hover a { + padding-right: 0; +} + +.snarkTorrentName:active a, .snarkFileName:active a { + border: 1px solid #ff2f85; + box-shadow: inset 4px 4px 4px rgba(64,52,31,0.3); +} + .snarkTorrentDownloaded { white-space: nowrap; } @@ -2934,6 +2973,10 @@ thead a img, thead img { font-size: 12pt !important; } +.snarkConfigTitle a { + padding: 1px 0; +} + .mainsection td, .peerinfo td { padding-top: 2px !important; padding-bottom: 2px !important; diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css index d93bd8fd64..864fa7248d 100644 --- a/installer/resources/themes/susidns/dark/susidns.css +++ b/installer/resources/themes/susidns/dark/susidns.css @@ -60,26 +60,31 @@ body.iframed { /* topnav */ #navi { - border: 1px solid #2a5f29; - padding: 5px 3px; - background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important; - background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; margin: -16px auto 30px; + padding: 5px 3px; position: sticky; top: -1px; - border-radius: 0 0 2px 2px; z-index: 999; text-align: center; + border: 1px solid #2a5f29; + border-radius: 0 1px 2px 2px; + box-shadow: inset 0 0 0 1px #000, 0 2px 2px 2px rgba(0,0,0,0.7); + background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important; + background: repeating-linear-gradient(135deg, #000 1px, #000 2px, #010 2px, #010 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, #010 2px, #010 4px), linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%), url(/themes/console/dark/images/camotile2.png) top left !important; + background-blend-mode: exclusion, exclusion, normal, normal; } .iframed #navi { margin: -6px -15px 30px; + padding: 5px 0; + position: static; border: 1px solid #494; border-right: none; border-left: none; - padding: 5px 0; border-radius: 0; - position: static; + box-shadow: inset 0 0 0 1px #000; + background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%), url(/themes/console/dark/images/camotile2.png) top left !important; + background-blend-mode: exclusion, normal; } #navi a:link { @@ -100,6 +105,7 @@ body.iframed { display: inline-block; margin: 1px -2px; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000; + box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(0,8,0,0.5); padding: 2px 6px 3px 24px; position: relative; text-shadow: 0 1px 1px #000; @@ -311,6 +317,7 @@ h3 { padding: 7px 10px; background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center; background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); letter-spacing: 0.08em; word-spacing: 0.1em; text-shadow: 0 0 2px #001100; @@ -414,21 +421,6 @@ div#book p, p.messages { padding: 2px 25px 2px 0 !important; } -.book td:nth-child(3) a:not(old) { - font-size: 0 !important; -} - -.book td:nth-child(3) .addrhlpr a::after { - content: url(/themes/console/images/buttons/fullview.png); - text-align: center; - padding: 0 10px !important; - filter: drop-shadow(0 0 1px #555); -} - -.book td:nth-child(4) .addrhlpr:hover { - filter: drop-shadow(0 0 1px #f60); -} - h4 { font-size: 9pt; margin-top: -15px; @@ -436,8 +428,7 @@ h4 { border: 1px solid #2a5f29; padding: 8px 10px 8px 35px; margin-bottom: 30px !important; - background: #000 url(/themes/susidns/drive.png) 9px center no-repeat; - background: url(/themes/susidns/images/drive.png) 9px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; + background: url(/themes/susidns/images/drive.png) 9px center no-repeat #000 !important; } a:link, #filter a:visited { @@ -665,13 +656,21 @@ div#content + div#buttons { margin: 20px auto 10px; padding: 10px; border-radius: 4px; - border: 1px solid #001; + border: 1px solid #fff; font-size: 10pt; - box-shadow: inset 0px 0px 1px 0px #002; + box-shadow: inset 0px 0px 1px 0px #020; background: #fff; + background: rgba(255,255,255,0.3); + opacity: 0.8; filter: invert(1) sepia(100%) hue-rotate(30deg); } +.illustrate:hover { + background: #fff; + border: 1px solid #000; + opacity: 1; +} + _:-ms-lang(x), img.illustrate { width: auto; max-width: 600px; @@ -692,13 +691,23 @@ div#book, #emptybook { border-collapse: separate; } +#book tr.head { + background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #002000, #000 75%) !important; +} + #book table th { padding: 10px 0; - background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000; - background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; border-bottom: 1px solid #2a5f29; } + +#book th:last-child { + background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000; + background: url(images/bin.png) center center no-repeat !important; +} + + #book table td { border-bottom: 1px solid #121; border-top: 1px solid #000; @@ -718,11 +727,6 @@ div#book, #emptybook { color: #ee9; } -#book th:last-child { - background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000; - background: url(images/bin.png) center center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; -} - #book input[type="checkbox"] { margin: 0; } @@ -882,6 +886,7 @@ input[name="search"]:focus { .headline h3 { padding: 10px 5px 10px 35px; background: url(/themes/susidns/images/addressbook.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); + background: url(/themes/susidns/images/addressbook.png) 5px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); font-size: 11pt; text-transform: uppercase; letter-spacing: 0.08em; @@ -890,10 +895,12 @@ input[name="search"]:focus { .headline#subscriptions h3 { background: url(/themes/susidns/images/subs_24.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); + background: url(/themes/susidns/images/subs_24.png) 5px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); } .headline#configure h3 { background: url(/themes/susidns/images/configure_24.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); + background: url(/themes/susidns/images/configure_24.png) 5px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%); } /* export hosts button adjustments */ @@ -990,6 +997,17 @@ p.book { /* hostname list */ +.book td:nth-child(3) a:not(old) { + font-size: 0 !important; +} + +.book td:nth-child(3) .addrhlpr a::after { + content: url(/themes/console/images/buttons/fullview.png); + text-align: center; + padding: 0 10px !important; + filter: drop-shadow(0 0 1px #555); +} + #host_list { margin-top: 28px; } @@ -1021,6 +1039,10 @@ p.book { text-align: center; } +#host_list td:nth-child(2) a, #host_list td:nth-child(3) a, #host_list td:nth-child(4) a { + filter: drop-shadow(0 0 1px #353); +} + #host_list td:nth-child(2) a:not(old) { font-size: 0 !important; } @@ -1028,7 +1050,6 @@ p.book { #host_list td:nth-child(2) a::after { content: url(/themes/console/images/buttons/link.png); text-align: center; - filter: drop-shadow(0 0 1px #555); cursor: pointer; } @@ -1053,7 +1074,6 @@ p.book { content: url(/themes/console/images/buttons/fullview.png); text-align: center; padding: 0 10px !important; - filter: drop-shadow(0 0 1px #555); cursor: pointer; } diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css index d5fefd43cc..1319d152d1 100644 --- a/installer/resources/themes/susidns/light/susidns.css +++ b/installer/resources/themes/susidns/light/susidns.css @@ -125,7 +125,7 @@ code, tt, .destaddress { text-transform: capitalize; box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); - line-height: 110%; + line-height: 120%; } #navi a:hover, #navi a:focus { @@ -187,19 +187,19 @@ h3 { .headline h3 { font-size: 11.5pt !important; background: url(/themes/susidns/images/addressbook.png) 6px center no-repeat #fcfcff; - background: url(/themes/susidns/images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); + background: url(/themes/susidns/images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); background-size: 22px 22px, 100% 100%, 100% 100%; } .headline#subscriptions h3 { background: url(/themes/susidns/images/subs_24.png) 6px center no-repeat #fcfcff; - background: url(/themes/susidns/images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); + background: url(/themes/susidns/images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); background-size: 22px 22px, 100% 100%, 100% 100%; } .headline#configure h3 { background: url(/themes/susidns/images/configure_24.png) 6px center no-repeat #fcfcff; - background: url(/themes/susidns/images/configure_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); + background: url(/themes/susidns/images/configure_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); background-size: 22px 22px, 100% 100%, 100% 100%; } @@ -251,7 +251,7 @@ form[action="subscriptions"] #content { border: 1px solid #7778bf; padding: 5px 8px 5px 34px; border-radius: 2px; - background: url(/themes/console/images/info/question.png) 8px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) !important; + background: url(/themes/console/images/info/question.png) 8px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) !important; background-size: 20px 20px, 100% 100%, 100% 100% !important; background-blend-mode: luminosity, normal, normal; box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; @@ -331,7 +331,7 @@ div.help h3, #add h3 { padding: 5px 10px; margin: -1px -16px 0; background: #fcfcff; - background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); + background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%); } p#help { @@ -1093,9 +1093,9 @@ input[type="submit"], input[type="reset"], .fakebutton { border: 1px solid #999daf; box-shadow: inset 0 0 0 1px #fff; background: #eee; - background: linear-gradient(to bottom, #fff, #ddd); + background: linear-gradient(to bottom, #fff, #efefff); color: #33333f; - filter: saturate(70%) drop-shadow(0 0 1px #ccf); + filter: drop-shadow(0 0 1px #ccf); cursor: pointer; } @@ -1114,11 +1114,11 @@ a.fakebutton:active { input[type=submit]:hover, input[type=reset]:hover, input[type=submit]:focus, input[type=reset]:focus, .fakebutton:hover, .fakebutton:focus { background: #eee; - background: linear-gradient(to bottom, #ddd, #fff); + background: linear-gradient(to bottom, #eee, #fff); color: #111; border: 1px solid #f60; box-shadow: inset 0px 0px 0px 1px #fff; - filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); transition: ease border 0.7s; } @@ -1130,72 +1130,72 @@ input[type="submit"]:active, input[type="reset"]:active, .fakebutton:active { input.accept { background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; } input.accept:hover, input.accept:focus { background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } /* input.accept[value="Replace"] { background: #eee url(/themes/console/images/buttons/edit2.png) no-repeat 6px center; - background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 22px; } input.accept[value="Replace"]:hover, input.accept[value="Replace"]:focus { background: #fff url(/themes/console/images/buttons/edit2.png) no-repeat 6px center; - background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } */ input.add { background: #eee url(/themes/console/images/buttons/add.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; } input.add:hover, input.add:focus { background: #fff url(/themes/console/images/buttons/add.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } input.cancel { background: #eee url(/themes/console/images/buttons/no.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; } input.cancel:hover, input.cancel:focus { background: #fff url(/themes/console/images/buttons/no.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } input.delete { background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; } input.delete:hover, input.delete:focus { background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } input.export { background: #eee url(/themes/console/images/buttons/go.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; margin-top: 5px; @@ -1203,33 +1203,33 @@ input.export { input.export:hover, input.export:focus { background: #fff url(/themes/console/images/buttons/go.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } input.reload { background: #eee url(/themes/console/images/buttons/update.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 7px 5px 22px; } input.reload:hover, input.reload:focus { background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } input.search { background: #eee url(/themes/console/images/buttons/search.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 5px 8px 5px 24px; } input.search:hover, input.search:focus { background: #fff url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } @@ -1245,14 +1245,14 @@ input.search[type="text"]:focus { #visualid .fakebutton { background: #eee url(/themes/console/images/buttons/go.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); background-size: 14px 14px, 100% 100%; padding: 6px 8px 6px 22px; } #visualid .fakebutton:hover, #visualid .fakebutton:focus { background: #fff url(/themes/console/images/buttons/go.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff); + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); background-size: 14px 14px, 100% 100%; } diff --git a/installer/resources/themes/susimail/dark/susimail.css b/installer/resources/themes/susimail/dark/susimail.css index 8f71394367..3e07adc895 100644 --- a/installer/resources/themes/susimail/dark/susimail.css +++ b/installer/resources/themes/susimail/dark/susimail.css @@ -35,6 +35,12 @@ body.iframed { text-shadow: none; } +#pagenav, .sort, .topbuttons, h3 { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + * { outline: none; } @@ -141,7 +147,7 @@ p.mailbody, textarea { } div.topbuttons { - padding: 7px 0 8px !important; + padding: 8px 0 !important; font-weight: bold; border: 1px solid #494; border-bottom: 0 solid; @@ -150,17 +156,23 @@ div.topbuttons { margin-top: -1px; margin: -1px -1px -4px -1px; border-bottom: 1px solid #494; + box-shadow: inset 0 0 0 1px #000; background: #000 url(images/hatter_med.png) left bottom no-repeat; background: url(images/hatter_med.png) left bottom no-repeat, linear-gradient(to bottom, #002000 0%, #000 100%); - background-size: auto 95%, 100% 100%; + background: url(images/hatter_med.png) left bottom no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #002000, #000 75%) !important; + background: repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.5) 2px, rgba(0,64,0,0.5) 4px), linear-gradient(to bottom, rgba(0,32,0,0.5), rgba(0,0,0,0.8)), url(/themes/console/dark/images/camotile2.png) top left !important; + box-shadow: inset 0 0 0 2px #000; } .iframed .topbuttons { -/* border-top: none !important; */ margin-top: -1px; border-radius: 0; } +.iframed form .topbuttons { + padding-top: 9px !important; +} + div.topbuttons br { margin-bottom: 12px !important; } @@ -194,19 +206,40 @@ table#mailbox { margin-bottom: -10px; } +#mailbox tr:nth-child(2) { + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; +} + +#mailbox th { + background: none !important; +} + #mailbox th:first-child { padding: 0 !important; background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + background: url(/themes/console/images/buttons/delete.png) center center no-repeat !important; } #mailbox th:nth-child(2) { background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; - background-blend-mode: luminosity, normal; + background: url(/themes/susimail/images/status.png) center center no-repeat !important; } +#mailbox th:nth-child(2):not(old) { + background: none !important; +} + +#mailbox th:nth-child(2)::after { + content: url(/themes/susimail/images/status.png); + margin: 0; + height: 16px; + vertical-align: middle; + mix-blend-mode: luminosity; +} #mailbox th:nth-child(4) { background: url(/susimail/icons/attach.png) center right 5px no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + background: url(/susimail/icons/attach.png) center right 5px no-repeat !important; } table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] { @@ -216,18 +249,26 @@ table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] { table#mailbox td[colspan="5"] { border-bottom: none; - padding-left: 6px !important; - padding-bottom: 6px !important; - background: #000; - background: linear-gradient(to bottom, #121 0%, #010 50%, #000 100%); + padding: 9px 6px 6px !important; } table#mailbox td[colspan="4"] { - padding-right: 6px !important; - padding-bottom: 6px !important; + padding: 9px 6px 6px !important; border-bottom: none; - background: #000; - background: linear-gradient(to bottom, #121 0%, #010 50%, #000 100%); + background: none; +} + +.bottombuttons, #prefsave { + box-shadow: inset 0 0 0 2px #000 !important; + background: repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, rgba(0,24,0,0.4), #000 75%), url(/themes/console/dark/images/camotile2.png) !important; +} + +.iframed .bottombuttons { + background: linear-gradient(to bottom, rgba(0,24,0,0.4) 25%, #000), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), url(/themes/console/dark/images/camotile2.png) !important; +} + +#composemail .bottombuttons { + background: none !important; } table#mailbox td[colspan="5"] br, table#mailbox td[colspan="4"] br { @@ -585,15 +626,15 @@ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { } input[type=submit], input.cancel { - color: #494; - background: #000; - border: 1px outset #191; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; - text-align: center; + margin: 4px 5px; padding: 5px 8px !important; min-width: 95px !important; - margin: 4px 5px; - filter: drop-shadow(0 0 1px #000); + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; + color: #494; + text-align: center; + border: 1px outset #191; + box-shadow: 0 0 1px 1px #010; + background: #000; } input[type=submit]:hover, input.cancel:hover, input[type=submit]:focus, input.cancel:focus { @@ -712,11 +753,14 @@ input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix margin: 20px auto; width: 600px; padding: 0 0 10px; - background: #001000; border-radius: 2px; - background: linear-gradient(to bottom, #000 0%, #010 50%, #010 100%); - background: url(images/hatter_med.png) right bottom no-repeat, linear-gradient(to bottom, #000 0%, #010 50%, #010 100%); - box-shadow: inset 0 0 1px 2px #020; + box-shadow: inset 0 0 0 1px #000, inset 0 0 2px 1px #020; + background: #001000; + background: linear-gradient(to bottom, #000 0%, #010 50%); + background: url(images/hatter_med.png) right bottom no-repeat, repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,32,0,0.5) 2px, rgba(0,32,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,32,0,0.5) 2px, rgba(0,32,0,0.5) 4px), linear-gradient(to bottom, #030 0%, #020); + background: url(images/hatter_med.png) right bottom no-repeat, linear-gradient(to bottom, #000 0%, #001000 90%); + background-blend-mode: normal, darken, darken, normal; + background-blend-mode: difference, normal; } @@ -735,7 +779,7 @@ input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix word-spacing: 0.1em; text-align:left; background: #002000 url(images/mail.png) 8px center no-repeat; - background: url(images/mail.png) 8px center no-repeat, linear-gradient(to bottom, #030 50%, #000 50%); + background: url(images/mail.png) 8px center no-repeat, linear-gradient(to bottom, rgba(0,48,0,0.5) 50%, rgba(0,0,0,0.7) 50%), url(/themes/console/dark/images/camotile2.png); text-shadow: 0 1px 1px #000; box-shadow: inset 0 0 0 1px #000; } @@ -899,9 +943,18 @@ div#emptymailbox { table#pagenav { width: 100%; margin: 7px auto -3px; + border-collapse: collapse; border-top: 1px solid #494; background: #000; background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; + background: repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,64,0,0.5) 2px, rgba(0,64,0,0.5) 4px), url(/themes/console/dark/images/camotile2.png), linear-gradient(to bottom, #001000, #000 75%) !important; + background: none !important; + background-blend-mode: normal, exclusion, normal; + filter: drop-shadow(0 -1px 2px #000); +} + +#pagenav tr { + box-shadow: inset 0 0 0 2px #000; } table#pagenav tr:hover td { @@ -914,9 +967,10 @@ table#pagenav td { font-weight: bold; letter-spacing: 0.1em; word-spacing: 0.1em; - padding: 3px 5px; + padding: 5px; text-align: center; color: #bb7; + text-shadow: 0 1px 1px #000; } table#pagenav td:first-child { @@ -944,14 +998,15 @@ table#pagenav td:last-child { } div#prefsave { /* config page button positioning */ - margin: 20px 0 10px; + margin: 20px 0 0; border-top: 1px solid #494; - padding-top: 10px; + padding: 10px 0 10px; } .iframed #prefsave { margin-bottom: 0; padding-top: 15px; + border-bottom: 1px solid #494; } #prefsave input[type="submit"] { diff --git a/installer/resources/themes/susimail/light/susimail.css b/installer/resources/themes/susimail/light/susimail.css index d8aad1d58b..aac438925e 100644 --- a/installer/resources/themes/susimail/light/susimail.css +++ b/installer/resources/themes/susimail/light/susimail.css @@ -47,6 +47,12 @@ body.iframed { outline: none; } +#pagenav, .sort, .topbuttons, h3 { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + ::selection { background: #27377f !important; color: white; @@ -507,7 +513,7 @@ input[type="submit"], input[type="reset"] { border: 1px solid #999daf; box-shadow: inset 0 0 0 1px #fff; background: #eee; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: linear-gradient(to bottom, #fff, #efefff); color: #33333f; margin: 3px; font: 9pt "Droid Sans", "NotoSans", Ubuntu, "Bitstream Vera Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif; @@ -517,12 +523,12 @@ input[type="submit"], input[type="reset"] { border-radius: 2px; opacity: 1; background-size: 14px auto, 100% 100% !important; - filter: saturate(70%) drop-shadow(0 0 1px rgba(180, 180, 255, 0.6)); + filter: drop-shadow(0 0 1px rgba(180, 180, 255, 0.6)); cursor: pointer; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus { - filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); border: 1px solid #f60; color: #222; transition: ease border 0.7s; @@ -543,179 +549,179 @@ input[disabled], input[disabled]:hover, input[disabled]:focus { input.cancel { background: #eee url(/themes/console/images/buttons/no.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.cancel:hover { background: #fff url(/themes/console/images/buttons/no.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.clearselection { background: #eee url(/themes/susimail/images/none.png) no-repeat 6px center; - background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.clearselection:hover { background: #fff url(/themes/susimail/images/none.png) no-repeat 6px center; - background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.delete, input.delete_attachment, input.really_delete { background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.delete:hover, input.delete_attachment:hover, input.really_delete:hover { background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.download { background: #eee url(/themes/console/images/buttons/download.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.download:hover { background: #fff url(/themes/console/images/buttons/download.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.offline { background: #eee url(/themes/susimail/images/offline.png) no-repeat 6px center; - background: url(/themes/susimail/images/offline.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/offline.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.offline:hover { background: #fff url(/themes/susimail/images/offline_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/offline_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/offline_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.list { background: #eee url(/themes/susimail/images/folder.png) no-repeat 6px center; - background: url(/themes/susimail/images/folder.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/folder.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.list:hover { background: #eee url(/themes/susimail/images/folder-open.png) no-repeat 6px center; - background: url(/themes/susimail/images/folder-open.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/folder-open.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.forward { background: #eee url(/themes/susimail/images/forward.png) no-repeat 6px center; - background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.forward:hover { background: #fff url(/themes/susimail/images/forward.png) no-repeat 6px center; - background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.login { background: #eee url(/themes/susimail/images/login.png) no-repeat 6px center; - background: url(/themes/susimail/images/login.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/login.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.login:hover { background: #fff url(/themes/susimail/images/login_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/login_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/login_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.logout { background: #eee url(/themes/susimail/images/logout.png) no-repeat 6px center; - background: url(/themes/susimail/images/logout.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/logout.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.logout:hover { background: #fff url(/themes/susimail/images/logout_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/logout_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/logout_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reload, input.refresh { background: #eee url(/themes/console/images/buttons/update.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.reload:hover, input.refresh:hover { background: #eee url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.invertselection { background: #eee url(/themes/susimail/images/selection.png) no-repeat 6px center; - background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.invertselection:hover { background: #eee url(/themes/susimail/images/selection.png) no-repeat 6px center; - background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.show { background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.show:hover { background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); padding: 5px 7px 5px 24px; } input.markall { background: #eee url(/themes/susimail/images/all.png) no-repeat 6px center; - background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.markall:hover { background: #fff url(/themes/susimail/images/all.png) no-repeat 6px center; - background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.new { background: #eee url(/themes/susimail/images/compose.png) no-repeat 6px center; - background: url(/themes/susimail/images/compose.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/compose.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.new:hover { background: #fff url(/themes/susimail/images/compose_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/compose_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/compose_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.reply { background: #eee url(/themes/susimail/images/reply.png) no-repeat 6px center; - background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.reply:hover { background: #fff url(/themes/susimail/images/reply.png) no-repeat 6px center; - background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.replyall { background: #eee url(/themes/susimail/images/reply-all.png) no-repeat 6px center; - background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.replyall:hover { background: #fff url(/themes/susimail/images/reply-all.png) no-repeat 6px center; - background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } /* pagenav */ @@ -732,60 +738,60 @@ input.replyall:hover { input.firstpage, input[name="firstpage"], input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover { background: #eee url(/themes/susimail/images/first.png) no-repeat center center; - background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #fff, #efefff); padding: 4px 10px; text-indent: -99999px; } input.firstpage:hover, input[name="firstpage"]:hover { background: #fff url(/themes/susimail/images/first.png) no-repeat center center; - background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #eee, #fff); } input.lastpage, input[name="lastpage"], input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover { background: #eee url(/themes/susimail/images/last.png) no-repeat center center; - background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #fff, #efefff); padding: 4px 10px; text-indent: -99999px; } input.lastpage:hover, input[name="lastpage"]:hover { background: #fff url(/themes/susimail/images/last.png) no-repeat center center; - background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #eee, #fff); } input.prevpage, input.prev, input[name="prev"], input[name="prevpage"], input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover { background: #eee url(/themes/susimail/images/previous.png) no-repeat center center; - background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #fff, #efefff); padding: 4px 10px; text-indent: -99999px; } input[name="prev"]:hover, input[name="prevpage"]:hover { background: #fff url(/themes/susimail/images/previous.png) no-repeat center center; - background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #eee, #fff); } input.nextpage, input.next, input[name="nextpage"], input[name="next"], input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover { background: #eee url(/themes/susimail/images/next.png) no-repeat center center; - background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #fff, #efefff); padding: 4px 10px; text-indent: -99999px; } input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover { background: #fff url(/themes/susimail/images/next.png) no-repeat center center; - background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #eee, #fff); } /* end pagenav */ input.setpagesize, input.save { background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } @@ -795,46 +801,46 @@ input.setpagesize { input.send { background: #eee url(/themes/susimail/images/send.png) no-repeat 6px center; - background: url(/themes/susimail/images/send.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/send.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.send:hover { background: #fff url(/themes/susimail/images/send_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/send_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/send_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.configure { background: #eee url(/themes/console/images/buttons/configure.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/configure.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/console/images/buttons/configure.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.configure:hover { background: #fff url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center; - background: url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.saveas { background: #eee url(/themes/susimail/images/save.png) no-repeat 6px center; - background: url(/themes/susimail/images/save.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/save.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.saveas:hover { background: #fff url(/themes/susimail/images/save_hover.png) no-repeat 6px center; - background: url(/themes/susimail/images/save_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/save_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.new_upload { background: #eee url(/themes/susimail/images/attach.png) no-repeat 6px center; - background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff); padding: 5px 7px 5px 24px; } input.new_upload:hover { background: #fff url(/themes/susimail/images/attach.png) no-repeat 6px center; - background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff); } input.new_upload { @@ -849,7 +855,7 @@ a.sort { img.sort { border: 1px solid #999daf; border-radius: 2px; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: linear-gradient(to bottom, #fff, #efefff); margin: 0; vertical-align: middle; filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); @@ -858,7 +864,7 @@ img.sort { img.sort:hover, img.sort[disabled]:hover, .sort:focus img, .sort[disabled]:focus img { opacity: 1 !important; border: 1px solid #f60; - background: linear-gradient(to bottom, #ddd 0%, #fff 100%); + background: linear-gradient(to bottom, #eee, #fff); } img.sort:active { @@ -1356,6 +1362,7 @@ td p.error { } #attachedfile { + padding: 8px 3px !important; border-bottom: 1px dotted #7778bf; }