From fa6fc84bf8fdcf425a58df7a25d0fd17700b7385 Mon Sep 17 00:00:00 2001 From: str4d Date: Sun, 9 Apr 2017 06:28:47 +0000 Subject: [PATCH] Theme updates: - Subtler, softer colors & shadows and cleaner lines in the light theme in the full suite of apps - Seamless iframe integration for light susidns theme - Enhanced Arabic support in the light theme - Better presentation of options on /confignet - Enhanced bullets for stats/logs presentation - console_big improvements/fixes - Incremental improvements --- .../themes/console/classic/console.css | 700 ++++++++--- .../themes/console/classic/console_big.css | 216 +++- .../themes/console/classic/i2ptunnel.css | 4 +- .../resources/themes/console/dark/console.css | 684 ++++++---- .../themes/console/dark/console_big.css | 59 +- .../themes/console/dark/i2ptunnel.css | 7 +- .../resources/themes/console/dark/mobile.css | 13 + .../themes/console/light/console.css | 1112 ++++++++++++----- .../themes/console/light/console_ar.css | 270 +++- .../themes/console/light/i2ptunnel.css | 248 ++-- .../themes/console/midnight/console.css | 637 ++++++++-- .../themes/console/midnight/console_big.css | 8 + .../resources/themes/snark/classic/snark.css | 580 ++++----- .../resources/themes/snark/dark/snark.css | 308 ++--- .../resources/themes/snark/light/snark.css | 361 +++--- .../resources/themes/snark/midnight/snark.css | 243 ++-- .../resources/themes/snark/ubergine/snark.css | 478 ++++--- .../resources/themes/snark/vanilla/snark.css | 180 +-- .../themes/susidns/light/susidns.css | 121 +- .../themes/susimail/light/susimail.css | 110 +- 20 files changed, 4237 insertions(+), 2102 deletions(-) diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css index c6a177fee..6132a7711 100644 --- a/installer/resources/themes/console/classic/console.css +++ b/installer/resources/themes/console/classic/console.css @@ -8,7 +8,7 @@ body { text-align: left; background: #bbf url(images/bg.png) center center fixed; color: #0c153d; - font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; } /* preload button mouseovers */ @@ -46,11 +46,25 @@ div.logo { position: relative; width: 200px; margin: 0 0 0 20px; - padding: 10px 5px; + padding: 10px 5px 8px; text-align: center;; border: 5px solid #ddf; - border: 5px solid #ddf; - background-color: #eff1ff; + background: #eff1ff; +} + +.logo { + background: url(/themes/console/classic/images/i2plogo.png) center 12px no-repeat #eff1ff !important; + background-size: 90% auto !important; + background-blend-mode: luminosity; +} + +.logo:hover { + background-blend-mode: normal; +} + +.logo a img, .logo a:first-child:hover { + opacity: 0; + background: none !important; } div.logo hr { @@ -58,47 +72,54 @@ div.logo hr { background: #ddf; height: 5px; border: 0 solid #ddf; - margin: 8px -3px; + margin: 8px -5px 8px; } -div.logo a:link, div.logo a:visited { +div.logo a { + display: inline-block; + padding: 4px 0; + width: 100%; } div.logo a:active { color: #f60; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999 !important; } div.logo a:hover { color: #900; + background: rgba(220,220,255,0.5); + box-shadow: inset 0 0 0 1px #fff; + border-radius: 3px; } /* HTTP Proxy warning Main box */ div.warning { margin: 25px 20px 0 260px; - padding: 0 20px 40px 75px; + padding: 0 20px 40px; border: 5px solid #fb7; text-align: left; color: inherit; - background: #ffd url(/themes/console/images/itoopie_sm.png) 12px center no-repeat; + background: #ffd; box-shadow: inset 0 0 0 2px #f60; min-width: 500px; } div.warning a:link { - color: #f60; + color: #f60 !important; } div.warning a:visited { - color: #f90; + color: #f90 !important; } div.warning a:hover { - color: #d30; + color: #d30 !important; } div.warning a:active { - color: #900; + color: #900 !important; } div.warning hr { @@ -119,14 +140,16 @@ div.warning h3 { } div.warning h3:first-child { - margin: 2px -18px 10px -73px; - padding: 14px 10px 10px 15px; + margin: 2px -18px 10px -18px; + padding: 10px 10px 10px 38px; background: #ffe !important; + background: #ffe url(/themes/console/images/itoopie_sm.png) 6px center no-repeat !important; + background-size: auto 80% !important; border-bottom: 1px solid #fb7; text-transform: uppercase; letter-spacing: 0.08em; word-spacing: 0.1em; - font-size: 12pt; + font-size: 12.5pt; } .warning p { @@ -178,6 +201,13 @@ div.warning h3:first-child { vertical-align: top; } +.warning a[href*="jump"]::before { + content: "\279F\00A0"; + font-size: 14pt; + display: inline-block; + padding: 3px 0; +} + .proxyfooter { font-size: 8pt; padding: 0 5px 5px; @@ -368,11 +398,12 @@ div.routersummary td { } #sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { - margin-bottom: -4px !important; + margin-bottom: -5px !important; + margin-top: -6px !important; } -#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, -#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { content: ""; display: inline-block; min-height: 14px; @@ -406,9 +437,26 @@ div.routersummary td { margin: -1px 0 -3px; } +#sb_internals, #sb_services, #sb_advanced { + margin-top: -2px !important; +} + #sb_internals a, #sb_services a, #sb_advanced a { display: inline-block; - padding: 2px 2px 1px; + padding: 2px; + max-width: 178px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle !important; +} + +#sb_warning { + border-bottom: 1px solid #89f !important; +} + +#sb_warning + hr { + margin-bottom: 5px; } .sb_notice { @@ -416,10 +464,14 @@ div.routersummary td { border: 1px solid #89f; border-radius: 2px; box-shadow: 0 0 1px #bbb; - margin: 7px 5px -2px; + margin: -5px 1px -6px; padding: 5px 3px; } +p:empty + .sb_notice { + margin-top: 7px; +} + div.routersummary form { margin: -2px 0; } @@ -521,6 +573,51 @@ div.routersummary a:hover { } /* end sidebar */ +a:link { + color: #33a; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; +} + +a:visited { + color: #448 !important; + text-decoration: none; + font-weight: bold; +} + +a:hover, a:visited:hover, a:focus, a:visited:focus { + color: #f60 !important; + text-decoration: none; + font-weight: bold; + outline: none; +} + +a:active, a:visited:active { + color: #f93 !important; + text-decoration: none; + font-weight: bold; +} + +a.script { + letter-spacing: normal; + word-spacing: normal; +} + +pre { + margin: 0 20px; + overflow: auto; + font-size: 8pt !important; + width: 95%; + padding-top: 10px; +} + +tt, code { + font-size: 9pt; + font-weight: bold; + color: darkgreen; +} + /* buttons & inputs */ select { margin: 3px 5px; @@ -533,6 +630,7 @@ select { padding: 4px 16px 4px 2px; text-overflow: ellipsis; color: #333; + cursor: pointer; } select option { @@ -610,7 +708,7 @@ input[type="text"]:focus, input[type="password"]:focus { } button, input, select { - font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; color: #333; } @@ -635,27 +733,22 @@ input[name="refreshInterval"] { text-align: right; } -/* accessibility tweak - colors rather than focus rings where possible */ - input[type="submit"], input[type="reset"], button, .optbox { cursor: pointer; } +/* accessibility tweak - colors rather than focus rings where possible */ .optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus { /* -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#89f')";*/ -webkit-filter: drop-shadow(0 0 2px #89f); - filter: drop-shadow( 0 0 2px #89f); + filter: drop-shadow(0 0 2px #89f); border: 0; outline: none; } .optbox:disabled:hover, input:disabled:hover { filter: none; -} - -button:focus, input[type="submit"]:focus, input[type="reset"]:focus { - filter: drop-shadow(0 0 2px #89f); - -webkit-filter: drop-shadow(0 0 2px #89f); + -webkit-filter: none; } button::-moz-focus-inner, input::-moz-focus-inner { @@ -665,39 +758,61 @@ button::-moz-focus-inner, input::-moz-focus-inner { /* end accessibility */ +/* confignet tidyup */ + +#netconfig .optbox { + margin: 10px 6px 2px !important; + display: inline-block !important; + vertical-align: sub !important; +} + +#netconfig .optbox:first-child { + margin-top: 6px !important; + margin-bottom: 6px !important; +} + +#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] { + margin-bottom: 6px !important; +} + +#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] { + margin-top: 3px !important; +} + +#netconfig input[name*="ost"] { + width: 250px !important; +} + +/* end confignet tidyup */ + /* graphical buttons */ input[type="submit"], input[type="reset"], button { border: 1px solid #999; - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd; background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); color: #333; margin: 3px 8px 3px 0; - font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; padding: 4px 5px; text-decoration: none; border-radius: 2px; opacity: 1; background-size: 14px auto, 100% 100% !important; - filter: saturate(70%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(70%) drop-shadow(0 0 1px #ccc); } 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 0%, #fff 100%); border: 1px solid #89f; color: #222; - filter: saturate(100%) drop-shadow(0 0 1px #89f); - -webkit-filter: saturate(100%) drop-shadow(0 0 1px #89f); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #89f; } button:active, input[type="submit"]:active, input[type="reset"]:active { border: 1px solid #999; - box-shadow: inset 2px 2px 2px #555; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555; background-blend-mode: luminosity; - filter: saturate(100%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(100%) drop-shadow(0 0 1px #ccc); color: #555; } @@ -1063,7 +1178,7 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } .routersummary .reload:active, .routersummary .stop:active, .routersummary .download:active { - box-shadow: inset 2px 2px 2px #555; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555; border: 1px solid #999 !important; } @@ -1210,7 +1325,7 @@ div.main h2 { } div.welcome { - margin-top: 5px; + margin-top: 0; } .welcome + div .tidylist { @@ -1325,11 +1440,11 @@ div.news p:last-child { margin-bottom: 10px; } -div.news a:link { +div.news a { color: #663; } -div.news a:hover { +div.news a:hover, div.news a:visited:hover { color: #f60 !important; } @@ -1350,8 +1465,10 @@ div.news hr:last-child { margin-bottom: 10px !important; } +/* top navigation */ + div.confignav { - padding: 7px 5px; + padding: 6px 5px; margin: -16px -16px 5px -16px; border: 1px solid #89f; font-size: 9pt; @@ -1361,27 +1478,51 @@ div.confignav { } .tab, .tab2 { - padding: 3px; - white-space: nowrap; + box-sizing: border-box; + display: inline-block; + border: 1px solid #89f; + margin: 0 -2px -1px -2px !important; + padding: 1px 0; + background: #fff; + min-width: 60px !important; +} + +.tab a { + display: inline-block; + padding: 4px 14px; +} + +.tab:hover a { + color: #f60 !important; +} + +.tab { + background: linear-gradient(to bottom, #fff 50%, #efefff 50%); + box-shadow: inset 0 0 0 1px #fff; +} + +.tab:hover { + background: #fff; + box-shadow: inset 0 0 0 1px #f90; +} + +.tab:active { + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400; + background: #f60; +} + +.tab:active a { + color: #fff !important; } .tab2 { - color: #111; + background: #89f; + box-shadow: inset 0 0 0 1px #fff; + color: #fff; + padding: 5px 12px; } -.tab2::before { - content: '\1F892\00A0'; - content: '\25B8\00A0'; - font-size: 10pt; - line-height: 110%; -} - -.tab2::after { - content: '\00A0\1F890'; - content: '\00A0\25C2'; - font-size: 10pt; - line-height: 110%; -} +/* end topnav */ div.configure { padding: 0; @@ -1401,6 +1542,10 @@ table.configtable, table#permabanned, table#loggingoptions, table#configstats, u margin-bottom: -5px; } +#config_homepage td { + padding: 5px; +} + #config_peers #permabanned { margin-bottom: 5px; } @@ -1517,27 +1662,27 @@ table#loggingoptions textarea { width: 170px; } -table#profiles td:first-child, #profiles td:last-child { +table#profiles td:first-child, table#profiles td:last-child { width: 50px; white-space: nowrap; } -#profiles th:nth-child(3), #profiles th:nth-child(4), #profiles th:nth-child(5) { +#profiles th:nth-child(3), #profiles th:nth-child(4), #profiles th:nth-child(5), #profiles th:nth-child(6) { text-align: right; } -#profiles td[colspan="7"], #profiles td[colspan="7"]:hover { - background: #6992d3; +#profiles td[colspan="8"], #profiles tr td[colspan="8"]:hover { + background: #77f; padding: 1px 0; border-top: 1px inset #fff !important; border-bottom: 1px inset #fff !important; } -#profiles td[colspan="7"] hr { +#profiles td[colspan="8"] hr { display: none; } -#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, +table#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, .homelinkedit tr:hover, .main#debug table:first-of-type tr:hover td { background: #fff; background: linear-gradient(to bottom, #fff 0%, #ffe 100%); @@ -1548,7 +1693,7 @@ table#profiles td:first-child, #profiles td:last-child { @media screen and (-webkit-min-device-pixel-ratio:0) { -#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, +table#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, .homelinkedit tr:nth-last-child(n+2):hover, .main#debug table:first-of-type tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td { border-top: inherit; border-bottom: inherit; @@ -1570,19 +1715,49 @@ table#thresholds, table#profile_defs { margin-top: 0 !important; } -#profile_defs ul { - margin: 10px 10px 5px -35px; +#profile_defs td:first-child { + width: 5% !important; + white-space: nowrap; + text-align: right; } -#profile_defs li { - padding: 0; - list-style: none; +#profile_defs td:last-child { + width: 95%; + white-space: normal; + line-height: 120%; +} + +#thresholds th, #thresholds td { + text-align: center !important; +} + +#capabilities_key td { + padding: 0 !important; +} + +#capabilities_key table { + margin: 0 !important; + border: none; + border-top: 1px solid #89f; + border-bottom: 1px solid #89f; +} + +#capabilities_key table td { + padding: 3px 5px !important; +} + +#capabilities_key table td:nth-child(even) { + width: 16px; } #profile_defs b { text-transform: capitalize; } +#capabilities_key b { + text-transform: none !important; +} + table#floodfills { margin-top: 10px; } @@ -1714,7 +1889,7 @@ a[href^="configpeer?peer"] { a[href^="configpeer?peer"]::after { content: url(/themes/console/images/buttons/edit.png); - vertical-align: bottom; + vertical-align: top; } a[href^="configpeer?peer"]:hover { @@ -1757,6 +1932,7 @@ table#enviro td, table#eventlogs td { #wrapperlogs pre { white-space: pre-wrap; + word-break: break-all; margin: 0; width: 100%; padding: 0; @@ -1856,11 +2032,17 @@ div.configure h2:first-child { #sidebarconf tr, .homelinkedit tr, #clientconfig tr, #webappconfig tr, #configstats tr, #tunnelconfig tr, #profiles tr, #floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr, .sybil_routerinfo tr, #enviro tr, #schedjobs tr, #jobstats tr, #eventlog tr, .tunneldisplay tr, #udpconnections tr, #ntcpconnections tr { - border-top: 1px inset #fff; - border-bottom: 1px inset #fff; + border-top: 1px inset #ccf; } -#addkeyring tr, #loggingoptions tr, tr.tablefooter, #profiles tr:hover, #floodfills tr:hover, #jardump tr { +#config_stats tr:not(.tablefooter) td:first-child::after { + content: ""; + display: inline-block; + min-height: 24px; + vertical-align: middle; +} + +#addkeyring tr, #loggingoptions tr, tr.tablefooter, table#profiles tr:hover, #floodfills tr:hover, #jardump tr { border-top: 1px solid #89f !important; border-bottom: 1px solid #89f !important; } @@ -1941,10 +2123,9 @@ div.messages li, div.messages ul { div.error { color: #d00000; - background-image: url(/themes/console/images/info/errortriangle.png); - background-position: 10px center; - background-repeat: no-repeat; - padding: 10px 0; + background: url(/themes/console/images/info/errortriangle.png) 20px center no-repeat; + background-size: 28px auto; + padding: 10px 5px; margin-left: -5px; } @@ -1962,8 +2143,6 @@ h1 { font-size: 18pt; text-align: left; border: 1px solid #89f; - border-bottom: 1px solid #89f; - border-right: 1px solid #89f; padding: 19px 20px; margin: 0 1px 0 200px; line-height: 93%; @@ -1971,7 +2150,7 @@ h1 { letter-spacing: 0.08em; word-spacing: 0.1em; background: #fff url(images/titlebg.png) center right no-repeat !important; - background: linear-gradient(to right, #fff, #fff 30%, rgba(255,255,255, 0.5) 70%), linear-gradient(to bottom, #e5f0f7 0%, #e5f0f7 50%, #b9c2f9 50%, #b9c2f9 100%) !important; + background: linear-gradient(to right, #fff 20%, rgba(255,255,255, 0.5) 70%), linear-gradient(to bottom, #e5f0f7 0%, #e5f0f7 50%, #b9c2f9 50%, #b9c2f9 100%) !important; min-width: 500px; } @@ -2058,6 +2237,8 @@ h3#iptransport a::after, h3#advancedconfig a::after { padding: 0; margin: 0; vertical-align: bottom; + height: 16px !important; + display: inline-block; } h3#iptransport a:hover { @@ -2225,6 +2406,7 @@ p#profiles_overview, h3#shutdownrouter, h3#themeheading { p#gatherstats { margin-top: -9px; + margin-bottom: 28px; } p#upnpstatus { @@ -2315,6 +2497,15 @@ div.app { div.app:hover { border: 1px solid #f60; background: #fff; + cursor: pointer; +} + +div.app:hover a { + color: #f60 !important; +} + +td.app { + vertical-align: middle; } div.applabel { @@ -2335,13 +2526,13 @@ div.applabel { } .applabel a { - display: block; + margin: 0; + padding: 1px; + display: inline-block; width: 100%; - height: 13px; - text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - margin: 0; + text-overflow: ellipsis; } .app:hover div.applabel { @@ -2386,6 +2577,11 @@ div.app:hover .applabel { min-height: 42px; } +.appimg a { + display: inline-block; + width: 100%; +} + div.appgroup { margin: 0; padding: 0 8px; @@ -2402,12 +2598,21 @@ table.search { background: #eff1ff; margin-left: auto; margin-right: auto; - padding: 1px 0; width: auto; + border: 1px solid #89f !important; border-collapse: separate; border-radius: 0 0 2px 2px; } +.search td:nth-child(2) { + text-align: center !important; + padding: 0; +} + +.search button.search { + margin: 0; +} + img.app, img.app2p { height: 32px; width: auto; @@ -2451,7 +2656,7 @@ tt { } tt, pre { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } hr { @@ -2511,6 +2716,10 @@ h3#servicedebug a, h3#graphinfo a { text-align: left; } +.main#debug h2 + hr { + display: none; +} + h3 + .statusnotes { margin-top: -1px; } @@ -2702,7 +2911,7 @@ table#oldhome { vertical-align: sub !important; } -.homelinkedit th:first-child, #sidebarconf th:first-child { +.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child { background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); font-size: 0 !important; } @@ -2775,6 +2984,11 @@ p#pluginconfigtext { margin: -11px 0 -1px; } +#config_logging p { + text-align: left; + margin: 3px 0 5px -15px !important; +} + .formaction, td.optionsave { padding-right: 3px !important; } @@ -2871,7 +3085,7 @@ p#enablefullstats { } .langbox { - margin: 4px 4px 0; + margin: 4px 2px 0; color: #001; font-size: 7pt; width: 360px; @@ -2882,19 +3096,15 @@ p#enablefullstats { } .langbox img { - padding: 0 2px; /* Ignored by IE8 */ + padding: 0 !important; + margin: 0 1px -1px; opacity: 0.9; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #999); - transition: ease all 0.3s 0s; + border: 1px solid #999; + transform: none !important; } .langbox img:hover { opacity: 1; - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); - transform: scale(1.1); - transition: ease all 0.3s 0s; } .links { @@ -2923,51 +3133,6 @@ p#enablefullstats { letter-spacing: 0.02em; } -a:link { - color: #33a; - text-decoration: none; - font-weight: bold; - word-wrap: break-word; -} - -a:visited { - color: #448; - text-decoration: none; - font-weight: bold; -} - -a:hover, a:focus { - color: #f60; - text-decoration: none; - font-weight: bold; - outline: none; -} - -a:active { - color: #f93 !important; - text-decoration: none; - font-weight: bold; -} - -a.script { - letter-spacing: normal; - word-spacing: normal; -} - -pre { - margin: 0 20px; - overflow: auto; - font-size: 8pt !important; - width: 95%; - padding-top: 10px; -} - -tt, code { - font-size: 9pt; - font-weight: bold; - color: darkgreen; -} - .main#logs code { font-size: 8pt; } @@ -2990,12 +3155,6 @@ tt, code { padding: 2px 5px; } -/* -.main[id^="config_"] tr:nth-child(even) { - background: #f7f8ff; -} -*/ - #netconfig tr, #externali2cp tr { background: #fff; } @@ -3018,7 +3177,7 @@ tt, code { .tidylist code { text-align: left; - font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #723; font-weight: bold; } @@ -3306,12 +3465,12 @@ div#themeoptions { } #themeoptions input { - margin-left: 5px; + margin: 6px 8px 6px 6px; vertical-align: sub; } div.themelabel { - border-top: 1px solid #bbf !important; + border-top: 1px solid #89f !important; margin: -30px -4px 0; padding: 3px 2px; background: #eef url(images/tinytitle.png) center center; @@ -3455,7 +3614,7 @@ div.ui_lang { /* lang text label */ text-overflow: ellipsis; white-space: nowrap; margin: -32px -4px 0; - border-top: 1px solid #bbf; + border-top: 1px solid #89f; border-radius: 0 0 2px 2px; text-transform: capitalize; font-size: 9pt; @@ -3471,25 +3630,26 @@ p#helptranslate { /* configui password*/ -table#consolepass th:nth-child(2) { +#consolepass th:nth-child(2) { text-align: left; } -table#consolepass td:first-child { - width: 100px; - white-space:nowrap; +#consolepass tr:first-child td { + background: #fff url("/themes/console/images/info/user_add.png") no-repeat scroll 12px center / 28px 28px; + padding: 15px 15px 15px 50px; } -table#consolepass td { +#consolepass td { padding: 5px 10px; font-size: 9pt; + white-space: nowrap; } -table#consolepass input { +#consolepass input { margin: 5px; } -table#consolepass td#pw_adduser { +#consolepass td#pw_adduser { padding: 5px 10px; border-top: 1px solid #89f; } @@ -3498,7 +3658,7 @@ td#pw_adduser input { margin: 5px 20px 5px 5px !important; } -table#consolepass input[name="name"] { +#consolepass input[name="name"] { margin-right: 20px; } @@ -3576,7 +3736,7 @@ table.netdbentry th:last-child { border-radius: 3px; padding: 1px 3px; margin-left: 4px; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono !important; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace !important; } a.viewfullentry:not(old) { @@ -3788,7 +3948,7 @@ table.sybil_routerinfo:first-of-type th { .main#netdb code, .main#netdb tt { color: #03183f; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; font-weight: normal; } @@ -3954,21 +4114,19 @@ ul.statlist li b, ul.statlist b a:hover, h3.stats a:hover { } ul.statlist li::before { - content: "\1F6C8\00A0"; content: "\2B26\00A0"; margin-left: 5px; font-size: 14pt; line-height: 60%; vertical-align: baseline; color: #0c153d; - filter: drop-shadow(0 1px 1px #999); + filter: drop-shadow(0 1px 1px #aaa); -webkit-filter: drop-shadow(0 1px 1px #aaa); } ul.statlist li { margin-left: 5px; padding: 2px; -/* line-height: 190% !important;*/ list-style: none; } @@ -3995,6 +4153,23 @@ ul.statlist li li::before { margin-left: 3px; } +.main#stats a[href^="graph?"]::before { + content: "\279F\00A0"; + color: #33a; + font-size: 14pt; + margin-left: 4px; + filter: drop-shadow(0 1px 1px #aaa); + -webkit-filter: drop-shadow(0 1px 1px #aaa); +} + +.main#stats a[href^="graph?"]:hover::before { + color: #33a; +} + +.main#stats a[href$="showEvents=true"]::before { + display: none; +} + ul.statlist li li:last-child { padding-bottom: 2px; border: 1px dotted #89f; @@ -4022,16 +4197,6 @@ ul.statlist li li:last-child::before { margin-top: 2px !important; } -/* -.statlist a[href*="graph"]::before { - content: "\1F5E0"; - font-size: 16pt; - line-height: 60%; - font-weight: normal !important; - padding-bottom: 2px; -} -*/ - .statlist li a[href*="graph"]:first-of-type { margin-left: -1px; } @@ -4285,7 +4450,7 @@ p#fullhistory { #configinfo th { text-align: left; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; padding: 7px 10px; color: #070; } @@ -4469,8 +4634,167 @@ p#enablefullstats, p#gatherstats { background-size: 16px 16px !important; } +/* logs */ + +#logs ul { + margin-left: -22px; + margin-right: -28px; + margin: -4px 0 0 -20px; + display: inline-block; + word-break: break-all; +} + +#logs li { + list-style: none; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + line-height: 130%; + text-align: left; + display: inline-block; + width: 100%; +} + +#logs li::after { + content: ""; + display: block; + border-top: 1px dotted #bbf; + width: 100%; + margin: 4px 0 0; +} + +#logs li:last-child::after { + border: none; + margin: 0; +} + +#logs font[color^="#"]::before { + content: ""; + display: inline-block; + width: 6px; + height: 6px; + background: #fff; + border-radius: 50%; + margin-right: 5px; + margin-left: -17px; + vertical-align: calc(1px); +} + +#logs li font[color="#cc0000"]::before { + background: #cc0000; +} + +#logs li font[color="#006600"]::before { + background: #006600; +} + +#logs li font[color="#ff3300"]::before { + background: #ff3300; +} + +#logs li font[color="#ff00cc"]::before { + background: #ff00cc; +} + +#logs li font[color="#000099"]::before { + background: #000099; +} + +/* end logs */ + + /* responsive layout */ +@media screen and (max-width: 1200px) { +.tab, .tab2 { + padding: 1px 0; + min-width: 50px !important; +} + +.tab2 { + padding: 3px 10px; +} + +.tab a { + padding: 2px 12px; +} + +#consolepass input[name="name"], #externali2cp input[name="user"], +#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] { + width: 160px !important; +} +} + +@media screen and (max-width: 1000px) { +div.confignav { + font-size: 8.5pt !important; +} + +.tab2 { + padding: 3px 8px; +} + +.tab a { + padding: 2px 10px; +} + +input.search[type="text"] { + width: 200px; +} + +div.logo { + float: none; + position: absolute; + top: 10px !important; + margin: 0 5px !important; + display: block; + background-size: 200px auto !important; + min-width: 500px; + width: calc(100% - 36px); +} + +div.warning { + margin: 140px 5px 0 !important; +} + +.logo a:nth-child(n+2) { + width: 25%; + white-space: nowrap; + font-size: 10pt; +} + +.proxyfooter { + display: none; +} + +img[src$="bound.png"] { + transform: scale(0.9); +} + +.main#tunnels th, .main#profiles th { +font-size: 8pt; +} +} + +@media screen and (max-width: 1200px) { +.main#peers th { +font-size: 8pt; +} + +img[src^="/flags.jsp"] { + transform: scale(0.9); +} +} + +@media screen and (max-width: 1500px) { +#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, +#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { + min-height: 12px; +} + +.langbox { + margin-top: 3px !important; +} +} + @media screen and (min-width: 1500px) { body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, @@ -4501,10 +4825,17 @@ div.routersummary img[src$="i2plogo.png"] { width: 226px !important; } +#sb_internals, #sb_services, #sb_advanced { + margin-top: -3px !important; +} + .routersummary h3 a, #netdboverview th, .newsentry h3 { font-size: 11pt !important; } +#sb_internals a, #sb_services a, #sb_advanced a { + max-width: 210px; +} .routersummary button[type="submit"] { min-width: 100px; margin: 2px 4px 1px; @@ -4563,7 +4894,7 @@ button.control { font-size: 9pt !important; } -#jardump tt { +#jardump tt, #wrapperlogs pre { font-size: 8pt !important; } @@ -4586,8 +4917,19 @@ div.joblog h3 { .subheading b { font-size: 10.5pt !important; } + +#stats.main form { + margin-top: -14px; +} + +.confignav { + padding: 0 5px !important; +} + +.tab, .tab2 { + margin-top: -1px !important; +} } /* end responsive layout */ - diff --git a/installer/resources/themes/console/classic/console_big.css b/installer/resources/themes/console/classic/console_big.css index cde134f69..f7e03721d 100644 --- a/installer/resources/themes/console/classic/console_big.css +++ b/installer/resources/themes/console/classic/console_big.css @@ -5,14 +5,16 @@ * { text-shadow: none !important; font-weight: normal !important; - font-size: 12pt !important; + font-size: 11pt !important; letter-spacing: normal !important; word-spacing: normal !important; - line-height: 115% !important; + line-height: 140% !important; } -input[type="submit"], input[type="cancel"], input[type="file"], button { - font-size: 14pt !important; +input[type="submit"], input[type="cancel"], input[type="file"], button, button.search, input.cancel { + font-size: 11pt !important; + padding-top: 2px; + padding-bottom: 2px; } .routersummary button { @@ -22,11 +24,11 @@ input[type="submit"], input[type="cancel"], input[type="file"], button { /* sidepanel */ div.routersummary h3, .routersummary h3 a { - font-size: 14pt !important; + font-size: 13pt !important; } div.routersummary h4, .routersummary h4 a { - font-size: 14pt !important; + font-size: 13pt !important; letter-spacing: 0; } @@ -61,12 +63,48 @@ div.routersummary table a:link, div.routersummary table a:visited { text-shadow: none; } -/* -.routersummary a img:first-child { - transform: scale(1.2); - -webkit-transform: scale(1.2); +/* end sidepanel */ + +/* global overrides */ + +a, b, div.routersummary h3 a, div.routersummary h4 { + font-weight: normal !important; + font-size: 100%; } -*/ + +b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4, .messages { + font-weight: normal !important; + font-style: normal !important; + text-shadow: none; +} + +body, .main { + font: 12pt "Droid Sans", Verdana, "Bitstream Vera Sans", Helvetica, Sans, sans-serif; +} + +h1 { + font-size: 18pt !important; + padding: 14px 20px 12px; +} + +h2 { + font-size: 16pt !important; +} + +h3, .configtable th { + font-size: 14pt !important; +} + +h3 a { + display: inline-block; + padding: 3px 2px; +} + +h4 { + font-size: 13pt !important; +} + +/* end global overrides */ div.tunnels a { font-size: 12pt !important; @@ -86,22 +124,6 @@ div.tunnels td:last-child { div.tunnels td { padding: 0 2px; } -/* global overrides */ - -a, b, div.routersummary h3 a, div.routersummary h4 { - font-weight: normal !important; - font-size: 100%; -} - -b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4, .messages { - font-weight: normal !important; - font-style: normal !important; - text-shadow: none; -} - -body, .main { - font: 12pt "Droid Sans", Verdana, "Bitstream Vera Sans", Helvetica, Sans, sans-serif; -} div.main, div.main p, div.news p { line-height: 140%; @@ -111,22 +133,10 @@ div.main, div.news, h1 { margin-left: 226px; } -h1 { - font-size: 18pt !important; - padding: 16px 20px; -} - -h2 { - font-size: 17pt !important; -} - -h3, .configtable th { - font-size: 16pt !important; -} - .langbox { width: 400px; - margin-top: 2px; + margin-top: 5px; + margin-right: 8px; } div.joblog li i { @@ -142,17 +152,14 @@ table code { font-size: 120%; } -.confignav a, .tab, .tab2 { - font-size: 16pt !important; - font-weight: normal; -} +.tab, .tab2 { + font-size: 11pt; +} .applabel a { padding: 0 2px 6px !important; } - - .themelabel, .ui_lang { font-size: 12pt !important; font-weight: normal !important; @@ -166,12 +173,117 @@ div.themechoice, div.langselect { width: 128px; } -.tab2::before, .tab2::after { - font-size: 16pt; +h3.ptitle, h3#i2pclientconfig { + margin-bottom: -17px !important; +} + +h3#pluginmanage { + margin-bottom: -22px !important; +} + +.formaction { + margin-top: -17px !important; +} + +table + .formaction, #consolepass + .formaction { + margin-top: -7px !important; +} + +hr + .formaction { + margin-top: 0 !important; +} + +h3.stats { + margin-top: -1px !important; +} + +.main#stats form { + margin-top: 0; + margin-bottom: -1px; +} +input[type="text"], input[type="password"] { + min-width: 0; +} + +input[type="radio"], input[type="checkbox"] { + margin-top: 6px; + margin-bottom: 6px; +} + +button.control { + font-size: 0 !important; +} + +.infohelp, .infowarn { + line-height: 160% !important; +} + +p.infohelp { + margin-bottom: -7px; +} + +#advancedsettings, .main textarea { + font-size: 10pt !important; +} + +#webappconfig { + margin-bottom: -37px !important; +} + +.formaction#webappconfigactions { + margin-top: 36px !important; +} + +p[style="margin: 0px 12px"] { + margin-left: 5px !important; + padding: 8px 0 !important; +} + +#news hr + i { + display: inline-block; + margin-top: 4px !important; +} + +input.search[type="text"] { + padding-left: 30px; + background-position: 8px center; +} + +.main#jardump b { + font-size: 9pt !important; +} + +#wrapperlogs pre, pre#transports { + font-size: 10pt !important; +} + +table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old), #tunnels.main h3 a:not(old), #logs h3 a:not(old), a[href^="configpeer?peer"] { + font-size: 0 !important; +} + +/* responsive layout */ + +@media screen and (max-width: 1200px) { +.main td, .main td b { + font-size: 10pt !important; +} +} + +@media screen and (min-width: 0) { +div.routersummary img[src$="i2plogo.png"] { + margin-top: -1px; + transform: none; + width: 210px; +} + +.tab, .tab2 { + font-size: 11pt !important; + margin-right: -3px !important; +} } @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, +body, .main, .main td, .news p, #news p, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, .netdbentry th, .configtable th, ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, div.messages, th { font-size: 12pt !important; @@ -180,4 +292,6 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li { font-size: 11pt !important; } -} \ No newline at end of file +} + +/* end responsive layout */ \ No newline at end of file diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css index cb1a83a64..cf4680f58 100644 --- a/installer/resources/themes/console/classic/i2ptunnel.css +++ b/installer/resources/themes/console/classic/i2ptunnel.css @@ -85,7 +85,7 @@ hr { width: 150px; border: 1px solid #999; padding: 4px; - font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; background: #fff; color: #333; border-radius: 2px; @@ -141,7 +141,7 @@ hr { } .control:active { - box-shadow: inset 2px 2px 1px #999 !important; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555 !important; border: 1px solid #999 !important; color: #333 !important; } diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css index 75a2e5423..7f524ed86 100644 --- a/installer/resources/themes/console/dark/console.css +++ b/installer/resources/themes/console/dark/console.css @@ -134,9 +134,14 @@ div.warning { background: url(/themes/console/images/itoopie_sm.png) 10px center no-repeat, url(images/camotile2.png); box-shadow: inset 0 0 0 1px #700; box-shadow: inset 0 0 0 1px #700, inset 0 0 3px 3px #000; + box-shadow: inset 0 0 0 1px #700, inset 0 0 3px 3px #000, 0 0 0 2px #000;; word-wrap: break-word; font-size: 10pt; min-width: 300px; + border: 5px solid #010; + border-image: repeating-linear-gradient(135deg, #010 0px, #010 20px, #440 20px, #440 40px, #010 40px) 5 repeat repeat; + border-image-width: 5px; + border-image-outset: 1px; } .warning p, .warning a { @@ -259,6 +264,17 @@ div.routersummary h3 { mix-blend-mode: exclusion; } +.routersummary h3::after { + content: ""; + display: inline-block; + min-height: 15px; + vertical-align: middle; +} + +.routersummary h3 a { + vertical-align: middle; +} + .routersummary h3:hover { background: #010 !important; box-shadow: inset 0 0 2px 2px #000; @@ -287,6 +303,13 @@ div.routersummary h4 { box-shadow: inset 0 0 0 1px #121, inset 0 0 5px 2px #000; } +.routersummary h4::after { + content: ""; + display: inline-block; + min-height: 16px; + vertical-align: middle; +} + .routersummary h3 a, .routersummary h4 a { white-space: normal !important; display: inline-block; @@ -312,8 +335,8 @@ div.routersummary table { margin-bottom: -4px !important; } -#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, -#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { content: ""; display: inline-block; min-height: 14px; @@ -337,15 +360,28 @@ div.routersummary table { padding: 1px 0; } +#sb_localtunnels td::after { + content: ""; + display: inline-block; + min-height: 10px; + vertical-align: middle; + border-sizing: border-box; +} + +#sb_localtunnels a { + display: inline-block; +} + #sb_localtunnels td:last-child { text-align: right; padding-right: 0; } #sb_warning { /* check connection/firewall */ - padding: 4px 6px 4px 26px; + padding: 4px 4px 4px 26px; background: #000; - background: url(images/warning24x24.png) 5px center no-repeat, linear-gradient(to right, #001900 0%, #001000 5%, #000 25%, #000 50%, #000 75%, #001000 95%, #001900 100%); + background: url(images/warning24x24.png) 4px center no-repeat, linear-gradient(to right, #001900 0%, #001000 5%, #000 25%, #000 50%, #000 75%, #001000 95%, #001900 100%); + background-size: 22px 22px, 100% 100%; text-align: center; line-height: 120%; } @@ -356,6 +392,8 @@ div.routersummary table { #sb_internals a, #sb_services a, #sb_advanced a { padding: 1px 2px; + display: inline-block; + vertical-align: middle; } #sb_version { @@ -381,12 +419,12 @@ div.routersummary table { border: 1px solid #262; border-radius: 2px; box-shadow: inset 0 0 0 1px #000; - margin: 10px -4px -2px; + margin: -2px -5px -4px; padding: 5px 3px; } -hr + .sb_notice { - margin-top: 7px; +p:empty + .sb_notice { + margin-top: 9px; } div.routersummary tr { @@ -596,6 +634,8 @@ div.sorry { margin: 10px 0; } +/* main section */ + .main { margin: -1px 5px 5px 206px; padding: 0 15px 5px 15px; @@ -641,6 +681,8 @@ div.main#news { background: #000 url(images/news.png) no-repeat scroll bottom right !important; } +/* end main */ + #news h3 { padding: 4px 6px 5px; letter-spacing: 0.08em !important; @@ -750,57 +792,74 @@ div.widescroll { /* only scroll content, not entire page eg /peers */ white-space: nowrap; } +/* top navigation */ + div.confignav { background: url(images/header.png) repeat-x scroll center center #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%) !important; - background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; - padding: 8px 5px 7px !important; + background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; + padding: 7px 5px !important; margin: -1px -16px 15px; -/* border-radius: 0 0 4px 4px; */ border: 1px solid #494; font-weight: bold !important; line-height: 130% !important; text-align: center; - box-shadow: inset 0 0 0 1px #000; box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030; } -.confignav a:hover { - text-decoration: none; -} - -.confignav a:active { - color: #f90 !important; -} - .tab, .tab2 { - padding: 1px 3px; - white-space: nowrap; - margin: 0; + box-sizing: border-box; + display: inline-block; + border: 1px solid #494; + margin: 0 -2px -1px -2px !important; + padding: 1px 0; + background: #fff; + min-width: 60px !important; } -.tab2::before { - content: '\1F892\00A0'; - content: '\25B8\00A0'; - font-size: 11pt; - line-height: 50%; - vertical-align: baseline; +.tab2 { + background: #030; + box-shadow: inset 0 0 0 1px #000; + color: #ee9; + padding: 5px 12px !important; } -.tab2::after { - content: '\00A0\1F890'; - content: '\00A0\25C2'; - font-size: 11pt; - line-height: 50%; - vertical-align: baseline; +.tab a { + display: inline-block; + padding: 4px 14px !important; } +.tab { + background: linear-gradient(to bottom, #001900 0%, #002900 50%, #000 51%, #000 100%) !important; + box-shadow: inset 0 0 0 1px #000; +} + +.tab:hover { + background: #000 !important; + box-shadow: inset 0 0 0 1px #914600; +} + +.tab:hover a { + color: #f60; +} + +.tab:active { + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #5f2400; + background: #f60 !important; +} + +.tab:active a { + color: #ee9 !important; +} + +/* end topnav */ + div.messages { padding: 20px 10px 20px 50px; margin: 10px 0 15px 0; border: 1px solid #494; background: #000; - background: url(images/infohelp.png) no-repeat 12px center, #000; + background: url(images/infohelp.png) no-repeat 12px center, url(images/scarface.jpg) right bottom no-repeat #000; + background-size: 28px 28px, auto 90%; font-weight: bold; font-size: 9.5pt; color: #2b2 !important; @@ -824,6 +883,10 @@ div.messages li { border: 0 !important; } +#messages, .error, .notice { + color: #ee9; +} + div.widepanel h3 { text-align: left !important; padding: 6px 10px; @@ -859,9 +922,8 @@ div.graphspanel a img { padding: 3px; margin: 5px; text-align: center !important; -/* background: #000; */ opacity: 0.9; - transition: all 0.3s ease 0s; + transition: ease all 0.3s 0s; } div.graphspanel a img:hover { @@ -869,9 +931,8 @@ div.graphspanel a img:hover { padding: 3px; margin: 5px; text-align: center !important; -/* background: #000; */ opacity: 1; - transition: all 0.3s ease 0s; + transition: ease all 0.3s 0s; cursor: url(/themes/console/images/cursor_zoom.png), pointer; } @@ -882,7 +943,6 @@ div.graphspanel img { vertical-align: top; max-width: 95%; max-width: calc(100% - 18px); -/* filter: invert(100%) sepia(100%) hue-rotate(78deg) saturate(150%); enable for theme-colored graph images */ } div.graphspanel p { @@ -1052,16 +1112,14 @@ td { border-top: 1px inset #131; } -/* -td:hover, tr:hover td { - color: #ee9; -} -*/ - td img { padding: 0 1px 0 2px; } +#udpconnections td:nth-child(2) img, #ntcpconnections td:nth-child(2) img { + padding: 0; +} + tt { font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; color: #FF0; @@ -1194,6 +1252,11 @@ p:empty { /* kills empty paragraphs that are likely erroneous eg. see top of /pr border: 1px dotted #f00; /* display in order to bug hunt */ } +#config_logging p { + text-align: left; + margin: 3px 0 5px !important; +} + h1 { text-align: left; color: #EE9; @@ -1635,7 +1698,7 @@ input[type="submit"], input[type="reset"], button { color: #EE9; text-align: center; border: 1px solid #494 !important; - margin: -3px 0 5px 0; + margin: -2px 0 5px 0; padding: 7px; background: #000; background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%); @@ -1660,22 +1723,13 @@ input[type="submit"], input[type="reset"], button { padding: 5px 20px 5px 0; -moz-column-count: 2; -moz-column-width: 400px; - -moz-column-gap: 15px; - -moz-column-rule: 1px dotted #494; + -moz-column-gap: 50px; -webkit-column-count: 2; -webkit-column-width: 400px; - -webkit-column-gap: 100px; - -webkit-column-rule: 1px dotted #494; -/* untested - -ms-column-count: 2; - -ms-column-width: 400px; - -ms-column-gap: 100px; - -ms-column-rule: 1px dotted #494; -*/ + -webkit-column-gap: 50px; column-count: 2; column-width: 400px; - column-gap: 100px; - column-rule: 1px dotted #494; + column-gap: 50px; } .joblog ol li { @@ -1683,9 +1737,10 @@ input[type="submit"], input[type="reset"], button { page-break-inside: avoid; -webkit-break-inside: avoid; display: inline-block; - border-bottom: 1px dotted #494; - min-width: 400px; - width: 88%; + border-bottom: 1px dotted #030; + min-width: 360px; + width: 90%; + width: calc(100% - 45px); padding-bottom: 5px !important; } @@ -1763,16 +1818,6 @@ div.joblog th:first-child { padding-left: 6px; } -div.joblog th:last-child { /* kludge for broken table in /jobs .. requires additional trailing td per tr to fix */ - width: 0; - height: 0; - padding: 0; -} - -.joblog > .wideload > b ~ ol > li:last-child { /* jobs ol tidy */ - margin-bottom: -10px; -} - /* /jobs */ .main#jobs h2 { @@ -1883,7 +1928,6 @@ ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover } ul.statlist li::before { - content: "\1F6C8\00A0"; content: "\2B26\00A0"; font-size: 14pt; line-height: 50%; @@ -1900,7 +1944,7 @@ ul.statlist li { ul.statlist li li { margin-left: 16px; margin-right: -20px; - line-height: 120% !important; + line-height: 140% !important; list-style: none; } @@ -1914,10 +1958,30 @@ ul.statlist li li:last-child { padding-bottom: 5px; } +ul.statlist li li:last-child::after { + content: ""; + display: block; + border-bottom: 1px dotted #030; + margin-top: 6px; + margin-bottom: -12px; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +ul.statlist li li:last-child::after { + margin-bottom: -6px; +} +} + li.noevents { margin-bottom: 5px !important; } +li.noevents::after { + margin-top: 6px !important; + margin-bottom: 0 !important; + margin-right: 20px; +} + ul.statlist li b { color: #994 !important; } @@ -1927,7 +1991,19 @@ ul.statlist li li:last-child::before { color: #994 } +.statlist a[href^="graph"]::before { + content: "\27A1\00A0"; + content: "\21B3\00A0"; + color: #994; + font-size: 14pt; +} + +.statlist a[href$="true"]::before { + display: none; +} + .main#stats form { + background: #000; border: 1px solid #494; padding: 10px; margin: -13px 0 -11px; @@ -2076,8 +2152,14 @@ table#udpconnections table i { color: #ee9; } -#udpconnections tr.tablefooter td { +#udpconnections tr.tablefooter td, #ntcpconnections tr.tablefooter td { color: #ee9; + text-align: center; +} + +#udpconnections tr.tablefooter td:first-child, #ntcpconnections tr.tablefooter td:first-child { + padding-left: 6px; + text-align: left; } #udpconnections tr.tablefooter:hover td { @@ -2089,9 +2171,9 @@ table#udpconnections table i { } #udpconnections td[class="cells"]:first-child, #ntcpconnections td[class="cells"]:first-child { - width: 50px; - white-space: nowrap; - text-align: right; + width: 50px; + white-space: nowrap; + text-align: right; } #udpconnections td > *, #ntcpconnections td > *, @@ -2685,6 +2767,32 @@ table#bandwidthconfig input, table#bandwidthconfig select { margin-right: 3px; } +/* confignet tidyup */ + +#netconfig .optbox { + margin: 10px 6px 2px !important; + display: inline-block !important; + vertical-align: sub !important; +} + +#netconfig .optbox:first-child { + margin-top: 6px !important; + margin-bottom: 6px !important; +} + +#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] { + margin-bottom: 6px !important; +} + +#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] { + margin-top: 3px !important; +} + +#netconfig input[name*="ost"] { + width: 250px !important; +} + +/* end confignet tidyup */ /* end /confignet */ /* /events */ @@ -2758,6 +2866,10 @@ p#keyringhelp, p#webappconfig, p#availableplugins, p#pluginconfigtext, p#clientd padding: 15px 15px 15px 50px; } +p#gatherstats { + margin-bottom: 28px !important; +} + #webappconfig th:first-child { text-align: right; } @@ -2938,6 +3050,7 @@ table#loggingoptions td:first-child { width: 99%; width: calc(100% - 8px); margin-bottom: 8px; + resize: none; } #loggingoptions select[name="newlogclass"] { @@ -2949,7 +3062,7 @@ table#loggingoptions td:first-child { #config_summarybar .configtable td:not(.optionsave) { padding-left: 45px; - background: url(/themes/console/images/info/interval.png) 12px center no-repeat; + background: url(/themes/console/images/info/interval.png) 12px center no-repeat #000; background-size: 28px 28px; } @@ -3023,7 +3136,7 @@ table#sidebarconf { width: 100%; } -#sidebarconf th:nth-child(1), .homelinkedit th:first-child { +#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 0%, #001900 50%, #000 51%, #000 100%) !important; text-indent: -99999px; @@ -3390,6 +3503,10 @@ th > img[src^="/imagegen"] { /* scale down header images */ /* logs */ +#logs pre, #logs li { + font-weight: bold; +} + #criticallogs ul { /* tidy router logs ul */ border: 1px solid #494; margin: -6px -11px !important; @@ -3443,11 +3560,7 @@ table[id$="logs"] tr:nth-child(even){ } table[id$="logs"] ul { - margin: 5px 10px -5px -15px !important; -} - -table[id$="logs"] li::first-line { - font-weight: bold; + margin: -5px 12px -5px -18px !important; } table#wrapperlogs { @@ -3470,49 +3583,93 @@ table#wrapperlogs { padding: 0 0 0 5px !important; } - - -/* -a[name="criticallogs"] ~ h3 + p { - border: 1px solid #494; - padding: 10px; - margin-top: -11px; - margin-bottom: 10px; -} - -a[name="criticallogs"] ~ h3 + p ~ h3 + a[href="events"] + h3 + a[name="servicelogs"] + p { - border: 1px solid #494; - padding: 10px; - margin-top: -11px; - margin-bottom: 10px; -} - -a[name="criticallogs"] ~ h3 + p ~ h3 + a[href="events"] + h3 + a[name="servicelogs"] + p + pre { - border: 1px solid #494; - padding: 10px; - width: calc(100% - 22px) !important; - margin-top: -11px; - margin-bottom: 10px; -} - -a[name="servicelogs"] + p + pre { - border: 1px solid #f60; -} -*/ - .logtable ul li { list-style: none !important; margin-left: 15px; } -.logtable ul li::before { - content: "\26A0\00A0"; - font-size: 12pt; - line-height: 50%; - vertical-align: baseline; - color: #ff0; +#logs li { + list-style: none; + font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + line-height: 130%; + text-align: left; + display: inline-block; + width: 100%; + word-break: break-all; } +#criticallogs li { + width: auto; + width: calc(100% - 15px); + margin: 2px -10px 0 7px; +} + +#logs li::after { + content: ""; + display: block; + border-top: 1px dotted #030; + width: 100%; + margin: 5px 0 -3px; +} + +#logs li:last-child::after { + border: none; + margin: 0; +} + +#logs font[color^="#"]::before { + content: ""; + display: inline-block; + width: 6px; + height: 6px; + margin-left: 0; + margin-right: 5px; + border-radius: 50%; + vertical-align: calc(1px); +} + +font[color="#cc0000"] { + color: #c33 !important; +} + +#logs li font[color="#cc0000"]::before { + background: #c33; +} + +font[color="#006600"] { + color: #ee7 !important; +} + +#logs li font[color="#006600"]::before { + background: #ee7; +} + +font[color="#ff3300"] { + color: #990 !important; +} + +#logs li font[color="#ff3300"]::before { + background: #990; +} + +font[color="#ff00cc"] { + color: #880 !important; +} + +#logs li font[color="#ff00cc"]::before { + background: #880; +} + +font[color="#000099"] { + color: #660 !important; +} + +#logs li font[color="#000099"]::before { + background: #660; +} + +/* end logs */ + /* /profiles */ table#profiles tr:hover, table#floodfills tr:hover { @@ -3550,13 +3707,17 @@ table#profiles td:first-child, table#profiles th:first-child, table#profiles td: text-align: center; } +table#profiles th:last-child { + padding-right: 10px; +} + table#profiles td:last-child { text-align: right; width: 60px; white-space: nowrap; } -table#profiles td[colspan="7"] { /* profile class separator */ +table#profiles td[colspan="8"] { /* profile class separator */ background: #040; padding: 1px; border: 1px inset #000; @@ -3585,25 +3746,52 @@ table#profile_defs, table#thresholds { } table#profile_defs td, table#thresholds td { - padding: 5px 10px; + padding: 5px; } -table#profile_defs ul { - margin: -3px 0 12px -30px; +#profile_defs td:first-child { + width: 5% !important; + white-space: nowrap; + text-align: right; } -table#profile_defs ul li:last-child { - margin-bottom: -13px; +#profile_defs td:last-child { + width: 95%; + white-space: normal; + line-height: 120%; } -#profile_defs li { - list-style: none !important; +#thresholds th, #thresholds td { + text-align: center; } -#profile_defs li::first-letter { +#capabilities_key td { + padding: 0 !important; +} + +#capabilities_key table { + margin: 0 !important; + border: none; + border-top: 1px solid #373; + border-bottom: 1px solid #373; +} + +#capabilities_key table td { + padding: 3px 5px !important; +} + +#capabilities_key table td:nth-child(even) { + width: 16px; +} + +#profile_defs b { text-transform: capitalize; } +#capabilities_key b { + text-transform: none !important; +} + table#profile_defs + hr { display: none; } @@ -3631,56 +3819,6 @@ table#floodfills td { white-space: nowrap; } -/* responsive /profiles & /peers */ - -@media screen and (max-width: 1060px) { - -table#floodfills, #profiles ul#banlist, table#profile_defs { - margin-bottom: 5px; -} - -table#floodfills td { - font-size: 8pt; - border-right: 0 outset transparent !important; -} - -.main#profiles { - padding: 5px 5px 0; -} - -#profiles .confignav { - margin: -6px -6px 5px; -} - -p#profiles_overview { - margin: 5px 0; -} - -#profiles h3 { - margin-top: 5px !important; -} - -#profiles #thresholds + h3 { - margin-top: -5px !important; -} - -#floodfills tr:hover td:nth-child(n+2){ - transform: scale(1.1); - text-align: center !important; -} -} - -@media screen and (max-width: 1220px) { -#udpconnections tr:nth-last-child(n+3):hover td:nth-child(n+2) { - transform: scale(1.1); - text-align: center !important; -} - -.main#peers .widescroll td.cells { - font-size: 8pt !important; -} -} - table#floodfills th:first-child, table#floodfills td:first-child { width: 52px; white-space: nowrap; @@ -4123,30 +4261,6 @@ body.iframed { /* end iframed console fixes */ -/* Override error log colors */ - -font[color="#ff00cc"] { - color: #660 !important; -} - -font[color="#ff3300"] { - color: #990 !important; -} - -font[color="#cc0000"] { - color: #cc0 !important; -} - -font[color="#000099"] { /* info log level */ - color: #550 !important; -} - -font[color="#006600"] { /* debug log level */ - color: #bb0 !important; -} - -/* end log color overrides */ - /* global overrides */ h3[id*="job"] { @@ -5177,26 +5291,115 @@ form[action="events"] { /* responsive layout */ +/* responsive /profiles & /peers */ + +@media screen and (max-width: 1060px) { + +table#floodfills, #profiles ul#banlist, table#profile_defs { + margin-bottom: 5px; +} + +table#floodfills td { + font-size: 8pt; + border-right: 0 outset transparent !important; +} + +#floodfills tr:hover td:nth-child(n+2){ + transform: scale(1.1); + text-align: center !important; +} +} + +@media screen and (max-width: 1240px) { +#udpconnections td, #ntcpconnections td { + padding: 3px 2px; +} + +#udpconnections tr.tablefooter td, #ntcpconnections tr.tablefooter td { + border: 1px inset #131 !important; + border-top: 1px solid #494 !important; +} + +.main#profiles, .main#peers { + padding: 5px 5px 0; +} + +#profiles .confignav { + margin: -6px -6px 5px; +} + +p#upnpstatus, .main#peers .infohelp { + margin: 0; +} + +.main#peers h3, #profiles h3, .main#peers .infohelp { + margin-top: 5px !important; +} + +p#profiles_overview { + margin: 5px 0; +} + +#profiles #thresholds + h3 { + margin-top: -5px !important; +} +} + +/* end profiles/peers */ + +@media screen and (max-width: 1220px) { +#udpconnections tr:nth-last-child(n+3):hover td:nth-child(n+2) { + transform: scale(1.05); + text-align: center !important; +} + +.main#peers .widescroll td.cells { + font-size: 8pt !important; +} +} + +@media screen and (max-width: 1200px) { +.tab, .tab2 { + padding: 1px 0; + min-width: 50px !important; +} + +.tab2 { + padding: 3px 12px; +} + +.tab a { + padding: 2px 14px; +} +} + +@media screen and (max-width: 1500px) { +#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, +#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { + min-height: 12px; +} +} + @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, textarea, .main textarea, code, tt, pre, -ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover { +body, .main, .main td, .news p, #news p, textarea, .main textarea, code, tt, +ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, .confignav { font-size: 10pt !important; } .main button, .main input, select, textarea, div.news { - font-size: 9pt !important; + font-size: 10pt !important; } .main, .news, h1 { margin-left: 232px !important; } -.routersummary { - width: 200px !important; +pre, #logs li { + font-size: 9pt !important; } -.routersummary img[src$="i2plogo.png"] { - transform: scale(1.1); +.routersummary { + width: 200px !important; } .routersummary table[id^="sb_"] { @@ -5250,10 +5453,6 @@ div.joblog h3 { padding-top: 7px !important; } - p#gatherstats { - margin-bottom: 12px !important; -} - #certs.main p + p:empty + h4 { margin-top: -15px !important; } @@ -5278,6 +5477,10 @@ div.routersummary img[src$="i2plogo.png"] { margin-top: -3px; } +.routersummary h3::after { + min-height: 19px; +} + #banlist + h3.tabletitle { margin-bottom: -2px !important; } @@ -5285,6 +5488,55 @@ div.routersummary img[src$="i2plogo.png"] { table#permabanned { margin-top: -3px; } + +#udpconnections td[class="cells"]:first-child, #ntcpconnections td[class="cells"]:first-child { + width: 55px; + padding-right: 8px; +} + +.main#jobs h2 { + margin-bottom: 10px !important; +} +} + +@media screen and (min-width: 1840px) { +div[id^="config_"] div.confignav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: space-evenly; + justify-content: center; + padding: 4px 4px 5px 3px !important; +} + +div[id^="config_"] .tab, div[id^="config_"] .tab2 { + flex: auto; + flex-basis: content; + flex-grow: 0.06; + margin: 0 -1px -1px 0 !important; + white-space: nowrap; + min-width: 70px !important; +} + +div[id^="config_"] .tab2 { + padding: 5px 6px; +} + +div[id^="config_"] .tab a { + padding: 4px 6px; +} + +div[id^="config_"] div.confignav { + padding: 0 !important; +} + +div[id^="config_"] .tab, div[id^="config_"] .tab2 { + margin-top: -1px !important; +} + +div[id^="config_"] .tab:first-child { + margin-left: -1px !important; +} } /* responsive proxy errors */ diff --git a/installer/resources/themes/console/dark/console_big.css b/installer/resources/themes/console/dark/console_big.css index 5f7f87ca1..72da9e1c4 100644 --- a/installer/resources/themes/console/dark/console_big.css +++ b/installer/resources/themes/console/dark/console_big.css @@ -35,10 +35,6 @@ div.routersummary { width: 200px; } -div.routersummary img[src$="i2plogo.png"] { - transform: scale(1.2); -} - div.routersummary table, table#sb_localtunnels { font-size: 10pt; width: 215px !important; @@ -49,7 +45,7 @@ div.routersummary table td { } div.routersummary h3, div.routersummary h4, div.routersummary p, div.routersummary h3 a, div.routersummary a { - text-shadow: 0 0 0 0 !important; + text-shadow: none !important; } div.routersummary h3 a { @@ -58,8 +54,8 @@ div.routersummary h3 a { letter-spacing: 0.15em !important; } -div.routersummary h4 { - font-size: 11pt; +div.routersummary h4, .routersummary h4 a { + font-size: 11pt !important; font-weight: normal; } @@ -73,6 +69,11 @@ div.routersummary a { font-weight: normal; } +#sb_warning { + padding-top: 10px; + padding-bottom: 10px; +} + div.messages, div.error, .error ul li { font-size: 11pt; font-weight: normal !important; @@ -152,4 +153,46 @@ input[type="submit"], input[type="reset"] { .langselect .optbox { min-height: 68px; -} \ No newline at end of file +} + +table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old), #tunnels.main h3 a:not(old), #logs h3 a:not(old), +a[href^="configpeer?peer"], h3#iptransport a:not(old), h3#iptransport a:not(old) { + font-size: 0 !important; +} + +h3#webappconfig, h3#i2pclientconfig { + margin-bottom: -15px !important; +} + +td.optionsave { + border-top: 1px solid #494; +} + +/* responsive layout */ + +@media screen and (min-width: 0) { +p, .main { + font-size: 11pt !important; +} + +.tab, .tab2, .confignav a { + font-size: 11pt !important; + margin-right: -2px !important; +} + +.news p, .news a { + font-size: 10pt !important; +} +} + +@media screen and (max-width: 1500px) { +.tab, .tab2 { + font-size: 10.5pt !important; + margin-right: -3px !important; +} + +h3#webappconfig, h3#i2pclientconfig { + margin-bottom: -16px !important; +} +} + diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css index 73ba23f38..f6bae281f 100644 --- a/installer/resources/themes/console/dark/i2ptunnel.css +++ b/installer/resources/themes/console/dark/i2ptunnel.css @@ -344,12 +344,15 @@ textarea:focus { box-shadow: inset 0 0 1px #880; } -textarea#statusMessages, textarea#statusMessages:active { +textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus { + background: #000; + background: linear-gradient(to bottom, #000 0%, #010 100%) !important; + box-shadow: inset 0 0 3px 3px #000 !important; margin: 0; border: 0; box-shadow: none; height: 80px; - font-size: 8.5pt; + font-size: 9pt; width: 100%; border-radius: 0; padding: 2px 4px; diff --git a/installer/resources/themes/console/dark/mobile.css b/installer/resources/themes/console/dark/mobile.css index 6353aa1fb..da7435d2c 100644 --- a/installer/resources/themes/console/dark/mobile.css +++ b/installer/resources/themes/console/dark/mobile.css @@ -23,6 +23,15 @@ div.routersummary { margin: 0 auto; } +div[style="height: 36px;"] { + height: auto !important; +} + +div.routersummary img[src$="i2plogo.png"] { + width: 357px; + margin-top: 6px; +} + @media screen and (min-width: 1500px) { div.routersummary { width: 600px !important; @@ -58,6 +67,10 @@ div.routersummary table, margin-bottom: -7px !important; } +#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { + margin-bottom: -8px !important; +} + #sb_localtunnels { margin-top: -5px !important; } diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css index 63c11dee9..fcb62c7a1 100644 --- a/installer/resources/themes/console/light/console.css +++ b/installer/resources/themes/console/light/console.css @@ -7,10 +7,10 @@ html { } body { - margin: 8px 6px 8px 8px; + margin: 6px; text-align: center; color: #333; - font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; background: #a4a4cb url(images/tile2.png) fixed; background-size: 32px 32px; } @@ -42,11 +42,13 @@ div.clearer { ::selection { background: #27377f !important; color: white; + text-shadow: none; } ::-moz-selection { background: #27377f !important; color: white; + text-shadow: none; } img { @@ -59,8 +61,8 @@ img[src$="bound.png"] { } a img[src$="bound.png"] { - filter: hue-rotate(-40deg) drop-shadow(0 0 1px #aaa); - -webkit-filter: hue-rotate(-40deg) drop-shadow(0 0 1px #aaa); + filter: hue-rotate(-40deg) drop-shadow(0 0 1px #ccc); + -webkit-filter: hue-rotate(-40deg) drop-shadow(0 0 1px #ccc); } a:hover img[src$="bound.png"] { @@ -69,8 +71,8 @@ a:hover img[src$="bound.png"] { } a img { - filter: drop-shadow(0 0 1px #aaa); - -webkit-filter: drop-shadow(0 0 1px #aaa); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } a:hover img { @@ -82,12 +84,14 @@ pre { width: 98%; overflow: auto; text-align: left; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #333; margin: 10px; } -div.routersummaryouter { +/* sidebar */ + +.routersummaryouter { float: left; width: 200px; margin: 0 0 10px 0; @@ -99,7 +103,7 @@ div.routersummaryouter { position: absolute;/* so no interference with /home app icons */ } -div.routersummary { +.routersummary { width: 182px; padding: 8px 8px 10px 8px; margin-bottom: 8px; @@ -127,18 +131,18 @@ div.routersummary { } } -div.routersummary img[src$="i2plogo.png"] { +.routersummary img[src$="i2plogo.png"] { opacity: 0.9; transition: ease filter 0.3s 0s, ease opacity 0.3s 0s; margin-top: 0; margin-left: 0 !important; width: 179px; height: auto; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } -div.routersummary img[src$="i2plogo.png"]:hover { +.routersummary img[src$="i2plogo.png"]:hover { opacity: 1; transition: ease filter 0.3s 0s, ease opacity 0.3s 0s; filter: drop-shadow(0 0 1px #f60); @@ -173,11 +177,11 @@ div.routersummary a:active img[src$="i2plogo.png"] { padding: 5px 3px 5px 21px !important; } -div.routersummary input[type=text] { +.routersummary input[type=text] { text-align: right !important; } -div.routersummary hr { +.routersummary hr { color: #99f; background: #99f; height: 1px; @@ -186,7 +190,7 @@ div.routersummary hr { box-shadow: inset 0 1px 1px 1px #fff; } -div.routersummary hr.b { +.routersummary hr.b { color: #fff; background: transparent; border-bottom: 1px solid transparent; @@ -194,7 +198,7 @@ div.routersummary hr.b { margin-bottom: 5px; } -div.routersummary h3 { +.routersummary h3 { font-size: 9.5pt; letter-spacing: 0.04em; margin: -9px -7px -2px; @@ -211,12 +215,16 @@ div.routersummary h3 { -webkit-filter: none; } +.routersummary h3 a:hover { + color: #f60; +} + .routersummary h3:hover { background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important; } .routersummary h3:hover a { - color: #f60; + color: #f60 !important; text-shadow: 0 0 1px #fff; } @@ -224,17 +232,23 @@ div.routersummary h3 { box-shadow: inset 2px 2px 2px #777; } -div.routersummary h3 a { +.routersummary h3 a, .routersummary h3 a:visited { text-transform: uppercase; text-decoration: none; display: inline-block; width: 100%; width: calc(100% - 4px); padding: 2px 0; + color: #2c4e8f; +} + +h3#helpfaq { + margin-bottom: -9px; } div.routersummary h4 { border: none; + border-radius: 0; font-size: 8.5pt; letter-spacing: normal; text-transform: none; @@ -243,17 +257,32 @@ div.routersummary h4 { background: #eef; background: linear-gradient(to right, #ddf 0%, #eef 10%, #fff 50%, #eef 90%, #ddf 100%); text-decoration: none !important; - color: #359; + color: #4f617f; box-shadow: inset 0 0 0 1px #eef; line-height: 105%; } +.routersummary h4::after { + content: ""; + display: inline-block; + box-sizing: border-box; + min-height: 12px; + padding-top: 8px; + padding-bottom: 8px; + vertical-align: middle; +} + @media screen and (-webkit-min-device-pixel-ratio:0) { .routersummary h4 { margin-bottom: -8px !important; } } +.routersummary h4 a { + display: inline-block; + vertical-align: middle; +} + h4.sb_info { margin-top: -11px !important; } @@ -263,11 +292,11 @@ h4.sb_info + hr + form { margin-bottom: -1px; } -div.routersummary ul { +.routersummary ul { text-align: left !important; } -div.routersummary table { +.routersummary table { border: 0; text-align: center !important; margin: -8px -5px -5px -5px; @@ -283,62 +312,163 @@ div.routersummary table { margin-bottom: 8px !important; } -#sb_shortgeneral { - margin-top: -6px; +#sb_localtunnels td { + vertical-align: middle; } #sb_localtunnels td:first-child { text-align: left !important; width: 16px; padding: 1px 2px; + border-radius: 2px 0 0 2px; } #sb_localtunnels td:first-child img { margin: 0 0 2px !important; } +#sb_localtunnels td img { + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); +} + #sb_localtunnels td:last-child { text-align: right !important; width: 16px; padding: 2px 0 2px 2px; + border-radius: 0 2px 2px 0; +} + +#sb_localtunnels a { + display: inline-block; + width: 100%; +} + +#sb_localtunnels tr:hover td { + background: #fffff0 !important; } #sb_internals a, #sb_advanced a { - padding: 1px 2px; + padding: 2px; display: inline-block; + vertical-align: middle !important; } -#sb_peers td, #sb_tunnels td, #sb_queue td, #sb_bandwidth td, #sb_general td, #sb_shortgeneral td { - padding-top: 1px; - padding-bottom: 1px; +#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { + margin-bottom: -4px !important; + margin-top: -11px !important; } -#sb_bandwidth td { - line-height: 120%; +#sb_general, #sb_shortgeneral { + margin-top: -7px !important; } -#sb_bandwidth tr:last-child td { - padding-top: 2px; +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { + content: ""; + display: inline-block; + min-height: 13px; } #sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child { text-transform: capitalize; } +#sb_warning { + border-bottom: 1px solid #99f; +} + +#sb_warning + hr { + margin-top: 6px; +} + .sb_notice { background: #eef; border: 1px solid #89f; border-radius: 2px; box-shadow: 0 0 1px #bbb, inset 0 0 0 1px #fff; - margin: 8px 0 -2px; + margin: -5px; padding: 5px 3px; line-height: 140%; } -hr + .sb_notice { - margin-top: -2px; +p:empty + .sb_notice { + margin-top: 9px; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.sb_notice { + margin-bottom: -7px; +} +} + +/* experimental sidebar navigation for webapps */ + +#sb_services a:link, #sb_services a:visited { + display: inline-block; + width: 100%; + padding: 4px 2px 4px 20px; + text-align: left; + border-bottom: 1px dotted #ddf; + background: url(images/application.png) left center no-repeat; + background-size: 14px 14px; +} + +#sb_services a:link:first-child { + padding-top: 2px; +} + +#sb_services a:link:last-child { + border-bottom: none; + padding-bottom: 2px; +} + +#sb_services a[href="/susimail/susimail"] { + background: url(images/inbox.png) left center no-repeat; +} + +#sb_services a[href="/susimail/susimail"]:hover { + background: url(images/inbox.png) left center no-repeat #ffe; + border-radius: 2px; +} + +#sb_services a[href="/i2psnark/"] { + background: url(images/magnet.png) left center no-repeat; +} + +#sb_services a[href="/i2psnark/"]:hover { + background: url(images/magnet.png) left center no-repeat #ffe; + border-radius: 2px; +} + +#sb_services a[href="http://127.0.0.1:7658/"] { + background: url(images/server.png) left center no-repeat; +} + +#sb_services a[href="http://127.0.0.1:7658/"]:hover { + background: url(images/server.png) left center no-repeat #ffe; + border-radius: 2px; +} + +#sb_services a[href="/orchid/"] { + background: url(images/flower.png) left center no-repeat; +} + +#sb_services a[href="/orchid/"]:hover { + background: url(images/flower.png) left center no-repeat #ffe; + border-radius: 2px; +} + +#sb_services a[href*="bote"] { + background: url(images/mail_black.png) left center no-repeat; +} + +#sb_services a[href*="bote"]:hover { + background: url(images/mail_black.png) left center no-repeat #ffe; + border-radius: 2px; +} + +/* end webapp navigation */ + div.routersummary tr { background-image: none !important; background-color: transparent !important; @@ -355,6 +485,18 @@ div.routersummary td { border: 0 !important; } +div.routersummary img:first-child { + margin-bottom: -2px !important; + opacity: 0.7; +} + +div.routersummary img:hover:first-child { + margin-bottom: -2px !important; + opacity: 1; +} + +/* end sidebar */ + div.tunnels td:first-child { width: 16px; text-align: left; @@ -370,16 +512,6 @@ div.tunnels img, div.tunnels img:hover { opacity: 1 !important; } -div.routersummary img:first-child { - margin-bottom: -2px !important; - opacity: 0.7; -} - -div.routersummary img:hover:first-child { - margin-bottom: -2px !important; - opacity: 1; -} - div.newsheadings { text-align: right; margin: -5px 0 -3px 8px; @@ -492,7 +624,7 @@ div.warning { margin-top: 115px !important; margin: 115px 5px 0 0 !important; background: #fff !important; - background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(images/noise.png) #fff !important; + background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(images/noise.png) #fff !important; background-size: 100% 100%, 50px 50px !important; padding-left: 25px !important; } @@ -504,7 +636,7 @@ div.warning { .logo { position: absolute; top: 0; - width: calc(100% - 40px) !important; + width: calc(100% - 39px) !important; min-width: 430px; margin: 10px 0 0 !important; } @@ -552,11 +684,11 @@ div.warning { div.sorry { margin: -11px 0 10px 207px; - padding: 20px 25px 20px 80px; + padding: 20px 25px 20px 70px; border: 1px solid #447; border-radius: 0 0 2px 2px; text-align: justify; - background: #ffe url(/themes/console/images/info/errortriangle.png) 20px center no-repeat; + background: #fffff9 url(/themes/console/images/info/errortriangle.png) 20px center no-repeat; box-shadow: inset 0 0 1px #f00; word-wrap: break-word; font-weight: bold; @@ -593,6 +725,10 @@ div.main[id^="config_"] { padding-bottom: 5px !important; } +.main#config_plugins { + min-width: 700px; +} + div.main li:first-child { margin-top: 10px; } @@ -637,8 +773,8 @@ div.main li:first-child { } .main#debug table { - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } .main#debug h2 + table { margin-top: -16px; @@ -663,7 +799,7 @@ hr:last-child { div.main textarea { background: #fff; color: #001; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; margin: 5px 0; resize: none; } @@ -691,7 +827,7 @@ textarea[name="reseedURL"] { #resetreseed { border: 0 !important; - background: none; + background: none !important; padding: 5px 0; } @@ -699,6 +835,8 @@ textarea[name="reseedURL"] { min-width: 300px; } +/* news */ + div.news { margin: -12px 0 5px 207px; padding: 5px 15px 12px; @@ -717,25 +855,29 @@ div.news { } .news hr { - background: #339; - opacity: 0.6; - display: none; + background: #339; + opacity: 0.6; + display: none; } .newsentry { - filter: drop-shadow(0 0 1px #bbb); + box-shadow: 0 0 1px #ccc; +} + +.news#news .newsentry:first-child { + margin-top: -2px; } .newsentry font[size="-2"], .newsentry font[size="-1"] { letter-spacing: 0.1em; } -div.newscontent { +.newscontent { background-color: rgba(220,220,255,0.6); - background: linear-gradient(to bottom, #eff2ff, rgba(220,220,255,0.3)); + background: linear-gradient(to bottom, #eef, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; border: 1px solid #7778bf; border-radius: 0 0 2px 2px; - margin: 0 0 10px; + margin: 0 0 14px; padding: 10px 15px; box-shadow: inset 0 0 0 1px #fff; } @@ -753,7 +895,7 @@ div.newscontent p { margin-top: 8px; } -div.newscontent hr { +.newscontent hr { color: #225; background: #225; height: 1px; @@ -761,6 +903,10 @@ div.newscontent hr { margin: 10px 0 5px; } +.newsentry + hr + i { + margin-right: 8px; +} + .main#news { padding: 3px 15px 5px; background: #fff url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom; @@ -768,8 +914,8 @@ div.newscontent hr { } div.news h3, #news h3 { - background: #fff !important; - background: url(images/news.png) 8px center no-repeat, linear-gradient(to right, #fff, #eef) !important; + background: url(images/news.png) 8px center no-repeat #fff !important; + background: url(images/news.png) 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 right, #fff 5%, rgba(231, 231, 255, 0.8)) 15% !important; text-align: left; padding: 5px 10px 5px 30px; border: 1px solid #7778bf; @@ -806,6 +952,13 @@ div.newscontent h6 { text-align: left; } +#news { + background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(/themes/snark/ubergine/images/hat.png) bottom right no-repeat, url(images/noise.png) #fff !important; + background-size: 100% 100%, 140px auto, 50px 50px !important; +} + +/* end news */ + .main#torrents { padding: 0 10px; } @@ -815,60 +968,59 @@ div.main, .routersummary, .logo { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) 0 0 / 100% 100%, #fff url("images/noise.png") 0 0 / 50px 50px !important; } -#news { - background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(/themes/snark/ubergine/images/hat.png) bottom right no-repeat, url(images/noise.png) #fff !important; - background-size: 100% 100%, 140px auto, 50px 50px !important; -} +/* top navigation bar */ .confignav { - padding: 10px 10px 0 !important; + padding: 12px 10px 0 !important; margin: 2px -14px 12px !important; font-size: 9pt !important; line-height: 160% !important; - opacity: 1; min-width: 400px; vertical-align: middle; text-align: center; border-bottom: 1px solid #447; - box-shadow: 0 1px 1px #bbf; + box-shadow: 0 1px 1px rgba(221, 221, 255, 0.5); background: #fff; } .tab, .tab2 { - min-width: 40px; + min-width: 50px; + padding: 3px 6px; } .tab { - padding: 1px 5px 1px 5px; - margin: -5px -1px -1px -3px; + padding: 3px 6px; + margin: -5px -1px -1px -3px !important; background: #eef; background: linear-gradient(to bottom, #fff, #eef); + box-shadow: inset 0 0 0 1px #fff; border: 1px solid #447; display: inline-block; - word-wrap: break-word; vertical-align: bottom; text-align: center; font-weight: normal !important; text-decoration: none; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 0 #fff); - -webkit-filter: drop-shadow(0 0 0 #fff); -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { -.tab { - margin: -5px -2px -1px -3px; - padding: 1px 8px 1px 7px; -} - -.tab:first-child { - margin-right: -3px; + z-index: 999 !important; + position: relative; } .tab2 { - margin-left: -2px !important; - margin-right: -1px !important; -} + color: #31334f; + padding-bottom: 4px; + margin: -11px -1px -1px -3px; + background: #fff; + border: 1px solid #447; + border-top-color: #558; + border-top-width: 3px; + display: inline-block; + vertical-align: bottom; + text-align: center; + font-weight: bold; + border-radius: 2px 2px 0 0; + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); + position: relative; + z-index: 999 !important; } .tab:hover, .tab:hover a { @@ -880,14 +1032,17 @@ div.main, .routersummary, .logo { .tab:hover { border-top: 3px solid #77a; border-radius: 2px 2px 0 0 !important; - margin-top: -7px; + margin-top: -9px !important; +} + +.tab:active { + box-shadow: inset 0 0 0 1px #fff; } .tab:active, .tab:active a { background: #f60 !important; color: #fff !important; border-top-width: 1px; - margin-top: -5px; } .tab:first-child { @@ -902,24 +1057,26 @@ div.main, .routersummary, .logo { .tab a { font-weight: normal !important; text-decoration: none !important; + display: inline-block; + width: 100%; + padding-top: 0; + padding-bottom: 0; } -.tab2 { - color: #31334f; - padding: 2px 5px 1px; - margin: -11px -1px -1px -3px; - background: #fff; - border: 1px solid #447; - border-top-color: #558; - border-top-width: 3px; - display: inline-block; - word-wrap: break-word; - vertical-align: bottom; - text-align: center; - font-weight: bold; - border-radius: 2px 2px 0 0; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); +.tab:last-child:hover { + margin-top: -7px !important; + margin-bottom: -1px !important; +} + +.tab:last-child:active { + margin-top: -5px !important; + margin-bottom: -1px !important; +} + +/* end topnav */ + +.th_title a, .th_title a:hover { + color: #31334f !important; } div.configure { @@ -983,6 +1140,46 @@ h3#iptransport a:hover, h3#advancedconfig a:hover { -webkit-filter: drop-shadow(0 0 1px #f60); } +h3#transports { + border: 1px solid #7789bf; +} + +pre#transports { + display: inline-block; + border: 1px solid #7789bf; + background: #fff; + padding: 10px 0 0 10px; + width: calc(100% - 12px); + margin: -16px 0 0; +} + +/* confignet tidyup */ + +#netconfig .optbox { + margin: 10px 6px 2px !important; + display: inline-block !important; + vertical-align: sub !important; +} + +#netconfig .optbox:first-child { + margin-top: 6px !important; + margin-bottom: 6px !important; +} + +#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] { + margin-bottom: 6px !important; +} + +#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] { + margin-top: 3px !important; +} + +#netconfig input[name*="ost"] { + width: 250px !important; +} + +/* end confignet tidyup */ + .main#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) { font-size: 0; } @@ -995,51 +1192,6 @@ h3#iptransport a:hover, h3#advancedconfig a:hover { -webkit-filter: drop-shadow(0 0 1px #999); } -#criticallogs tr:first-child { - display: none; /* hide empty placeholder for log location */ -} - -.main#logs ul li { - padding-left: 0; - margin-left: 20px; -} - -.main#logs ul li::first-line { - font-weight: bold; -} - -.main#logs li:first-child { - margin-top: 0 !important; -} - -.main#logs li:last-child { - margin-bottom: 0 !important; -} - -table#wrapperlogs, table#routerlogs { - width: 100%; - table-layout: fixed; - margin-bottom: 10px; -} - -table#wrapperlogs { - margin-bottom: 5px; -} - -#routerlogs ul { - word-wrap: break-word; -} - -#wrapperlogs pre { - margin: 0; - padding: 3px 0 0 5px; - white-space: pre-wrap !important; - word-wrap: break-word !important; - width: calc(100% - 5px); - max-height: 600px; - overflow: auto; -} - .main#tunnels h3 a[href^="/configtunnels#"]:hover, #criticallogs + h3.tabletitle a:hover { filter: drop-shadow(0 0 1px #f60); -webkit-filter: drop-shadow(0 0 1px #f60); @@ -1072,7 +1224,7 @@ h3#pluginconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientc p#enablefullstats { border: 1px solid #7778bf; padding: 10px; - margin-bottom: -2px; + margin-bottom: 13px; } #configstats th { @@ -1090,6 +1242,10 @@ p#enablefullstats { white-space: nowrap; } +#configstats td:last-child { + border-right: 1px solid #7778bf; +} + #sidebarconf button { margin: 2px 0 2px 3px !important; padding: 2px; @@ -1181,6 +1337,7 @@ div.graphspanel form { #graphopts { text-align: center; margin-top: 20px; + margin-bottom: 15px; text-transform: capitalize; } @@ -1246,8 +1403,7 @@ h3#graphdisplay { } #graphs td.infohelp { - border: 1px solid #cfd1ff !important; - border-right: none !important; + border: none !important; background-size: 20px 20px !important; padding: 5px 5px 5px 40px !important; background-color: #f7f8ff !important; @@ -1330,7 +1486,7 @@ table { border-collapse: collapse; width: 100%; border: 1px solid #7778bf; - margin: 1px -15px 5px 0; + margin: 1px 0 5px 0; font-size: 9pt; background: #fff; } @@ -1351,6 +1507,10 @@ td.optionsave { border-top: 1px solid #7778bf !important; } +td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#addkeyring tr:last-child td { + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; +} + .configtable td { padding: 5px; } @@ -1373,7 +1533,114 @@ td.infowarn { border-top: 1px solid #7778bf !important; } -/* /logs */ +/* logs */ + +#criticallogs tr:first-child { + display: none; /* hide empty placeholder for log location */ +} + +.main#logs ul li { + padding-left: 0; + margin-left: 18px; +} + +.main#logs li:first-child { + margin-top: 0 !important; +} + +.main#logs li:last-child { + margin-bottom: 0 !important; +} + +table#wrapperlogs, table#routerlogs { + width: 100%; + table-layout: fixed; + margin-bottom: 10px; +} + +table#wrapperlogs { + margin-bottom: 5px; +} + +#logs table[id$="logs"] tr:first-child td, .subheading { + background: linear-gradient(45deg, #fff, #eef) !important; + box-shadow: inset 0 0 0 1px #fff; +} + +#routerlogs ul { + word-wrap: break-word; +} + +#wrapperlogs pre { + margin: 0; + padding: 3px 0 0 5px; + white-space: pre-wrap !important; + word-wrap: break-word !important; + width: calc(100% - 5px); + max-height: 600px; + overflow: auto; +} + +#logs ul { + margin-left: 0; + margin-right: -28px; + display: inline-block; + word-break: break-all; +} + +#logs li { + list-style: none; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + line-height: 130%; + text-align: left; + display: inline-block; + width: calc(100% - 48px); +} + +#logs li::after { + content: ""; + display: block; + border-top: 1px dotted #ddf; + width: 100%; + margin: 5px 0 0; +} + +#logs li:last-child::after { + border: none; + margin: 0; +} + +#logs font[color^="#"]::before { + content: ""; + display: inline-block; + width: 6px; + height: 6px; + background: #fff; + border-radius: 50%; + margin-right: 5px; + margin-left: -17px; + vertical-align: calc(1px); +} + +#logs li font[color="#cc0000"]::before { + background: #cc0000; +} + +#logs li font[color="#006600"]::before { + background: #006600; +} + +#logs li font[color="#ff3300"]::before { + background: #ff3300; +} + +#logs li font[color="#ff00cc"]::before { + background: #ff00cc; +} + +#logs li font[color="#000099"]::before { + background: #000099; +} table#bugreports { margin-top: 15px; @@ -1386,6 +1653,11 @@ table#enviro, table[id$="logs"] { padding: 10px; } +table#enviro td { + padding-top: 5px; + padding-bottom: 5px; +} + table#enviro td:first-child { width: 100px; text-align: right; @@ -1394,10 +1666,6 @@ table#enviro td:first-child { padding-left: 10px } -table[id$="logs"] ul li { - font-size: 9pt !important; -} - table[id$="logs"] td { padding: 5px; } @@ -1451,11 +1719,13 @@ tr { } tr:nth-child(even) { - background: #eef; + background: #efefff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff; } tr:nth-child(odd) { background: #f7f8ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff; } tr th { @@ -1467,12 +1737,22 @@ td { padding: 3px 5px; color: #333; vertical-align: middle; - border-top: 1px inset #cfd1ff; - border-bottom: 1px outset #cfd1ff; + border-top: 1px inset #ddf; + border-bottom: 1px inset #ddf; } -.main[id^="config_"] tr:last-child { +#tunnelconfig tr:last-child, #webappconfig tr:last-child { + background: #efefff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); +} + +#clientconfig tr:last-child { + background: #f7f8ff; +} + +#netconfig tr { background: #fff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); } .main[id^="config_"] select, .main[id^="config_"] textarea, .main[id^="config_"] .optbox { @@ -1505,31 +1785,35 @@ h4.app, h4.app2 { word-spacing: 0.1em; background: #eef; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%); - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; display: inline-block; width: calc(100% - 44px); border-radius: 2px; color: #31334f; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); } h4.app { background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%); - background-size: 16px 16px, 100% 100%; + 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 right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; + background-size: 16px 16px, 100% 100%, 100% 100% !important; margin-top: 15px; } h4.app2 { clear: left; margin-top: 10px !important; - background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%); + 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 right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; + background-size: 16px 16px, 100% 100%, 100% 100% !important; } div.ag2 { margin: 0; } +div.search + div.ag2 { + margin: -15px 0 0; +} + div.app { float: left; padding: 0; @@ -1540,9 +1824,7 @@ div.app { margin: 3px; background: #eef; background: linear-gradient(to bottom, #fff, #eef); - box-shadow: inset 0 0 0 1px #fff, inset 0 0 5px 2px #eef; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; } div.app:hover { @@ -1599,12 +1881,13 @@ table.search { border-radius: 0 0 2px 2px; border: 1px solid #7778bf; background: none; + background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; padding: 8px; width: 70%; margin-left:auto; margin-right:auto; margin-top: -19px; - box-shadow: 0 1px 1px 1px rgba(187, 187, 187, 0.3) + box-shadow: 0 1px 1px 1px rgba(200, 200, 200, 0.3); } .search tr { @@ -1631,6 +1914,7 @@ table.search td:nth-child(2) { table.search td:nth-child(3) { padding-left: 0; + padding-right: 8px; } table.search input[type="text"] { @@ -1652,8 +1936,8 @@ img.app, img.app2p { max-width: 32px; padding: 6px; padding: 10px 60px; - filter: drop-shadow(0 0 1px #bbb); - webkit-filter: drop-shadow(0 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + webkit-filter: drop-shadow(0 0 1px #ccc); opacity: 0.9; } @@ -1702,7 +1986,7 @@ div.applabel { /* end home page */ tt { - font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #050; } @@ -1720,9 +2004,8 @@ div.main li { word-wrap: break-word; } -div.main li b { - color: #514 !important; - color: #003 !important; +div.main li b, .statlist b a:hover { + color: #335 !important; font-size: 9.5pt; line-height: 170%; } @@ -1741,7 +2024,7 @@ div.main li b { .tidylist code { text-align: left; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #910; font-weight: bold; } @@ -1760,7 +2043,7 @@ ul { code { text-align: left; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #030; } @@ -1789,8 +2072,19 @@ th code { margin-left: 3px; } +a, h1, h2, h3, h4, th, input[type="submit"], input[type="reset"], button, select { + text-shadow: 0 1px 1px #fff; +} + +a:hover, a:focus, a:active, .app:hover a, .app:focus a, .app:active a, +input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, +input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active, +button:hover, button:focus, button:active, select:hover, select:focus, select:active, .graphspanel a { + text-shadow: none; +} + a:link { - color: #359; + color: #3b6bbf; text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -1798,7 +2092,7 @@ a:link { } a:visited { - color: #218; + color: #2c4e8f; text-decoration: none; font-weight: bold; } @@ -1807,6 +2101,7 @@ a:hover, a:focus { color: #f60; text-decoration: none; font-weight: bold; + text-shadow: none; } a:active { @@ -1841,10 +2136,15 @@ p.infohelp, p#sybilinfo, p#debugmode, p#upnpstatus, p#pluginconfigtext, p#gather line-height: 130%; } -p#upnpstatus, p#keyringhelp, .widescroll + p.infohelp, #profiles ul#banlist, #config_reseed .confignav + p.infohelp, p#sybilinfo, p#debugmode, #config_family .infohelp { +p#upnpstatus, p#keyringhelp, .widescroll + p.infohelp, #profiles ul#banlist, #config_reseed .confignav + p.infohelp +p#sybilinfo, p#debugmode, #config_family .infohelp, p#profiles_overview, p#gatherstats { border-radius: 2px; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); +} + +p#profiles_overview { + margin-bottom: 13px; } .infohelp + hr { @@ -1854,7 +2154,7 @@ p#upnpstatus, p#keyringhelp, .widescroll + p.infohelp, #profiles ul#banlist, #co table#bugreports { border-collapse: separate; border-radius: 2px; - filter: drop-shadow(0px 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc) } table#bugreports td.infohelp { @@ -1898,6 +2198,7 @@ p.infowarn { #joinfamily tr:nth-child(3) td:first-child { background: #fff url(/themes/console/images/info/key.png) 12px center no-repeat; + background: url(/themes/console/images/info/key.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } @@ -1909,12 +2210,14 @@ p.infowarn { #newfamily tr:last-child td:first-child { background: #fff url(/themes/console/images/info/label.png) 12px center no-repeat; + background: url(/themes/console/images/info/label.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } #exportfamily tr:nth-child(2) td:first-child { background: #fff url(/themes/console/images/info/export_key.png) 12px center no-repeat; + background: url(/themes/console/images/info/export_key.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } @@ -1925,12 +2228,14 @@ p.infowarn { #leavefamily tr:last-child td:first-child { background: #fff url(/themes/console/images/info/leave_family.png) 12px center no-repeat; + background: url(/themes/console/images/info/leave_family.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } #oldhome td:first-child { background: #fff url(/themes/console/images/info/home.png) 12px center no-repeat; + background: url(/themes/console/images/info/home.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } @@ -1965,6 +2270,7 @@ p#pluginconfigtext { #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) { background: #fff url(/themes/console/images/info/url.png) 12px center no-repeat; + background: url(/themes/console/images/info/url.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } @@ -1981,6 +2287,7 @@ p#pluginconfigtext { #manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) { background: #fff url(/themes/console/images/info/from_file.png) 12px center no-repeat; + background: url(/themes/console/images/info/from_file.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; padding: 15px 15px 15px 50px; background-size: 28px 28px; } @@ -2077,6 +2384,65 @@ ul.statlist { padding: 0 10px 10px; display: inline-block; width: calc(100% - 22px); + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(241, 241, 255, 0.3) 3px, #fff 5px); + box-shadow: inset 0 0 0 1px #fff; +} + +.statlist li:not(old) { + list-style: none !important; +} + +.statlist li::before, .statlist li a[href^="graph"]::before { + content: ""; + display: inline-block; + height: 5px; + width: 5px; + box-shadow: inset 0 0 0 1px #fff; + margin-left: -35px; + margin-right: 10px; + margin-top: -2px; + transform: rotate(45deg); + vertical-align: middle; +} + +.statlist li::before { + background: #335; + border: 1px solid #335; +} + +.statlist li a[href^="graph"]::before { + background: #3b6bbf; + border: 1px solid #3b6bbf; +} + +.statlist li a[href*="&"]::before { + display: none; +} + +.statlist li a[href^="graph"] { + margin-top: 4px; + margin-bottom: 2px; + display: inline-block; + vertical-align: middle; +} + +.statlist > li::after { + content: ""; + display: block; + width: 100%; + height: 1px; + margin-top: -5px; + border-top: 1px dotted #ddf; +} + +li.noevents::after { + content: ""; + margin-top: 12px !important; + display: block; +} + +.statlist > li:last-child::after { + display: none; } li.noevents { @@ -2132,17 +2498,14 @@ h2 { border: 1px solid #7778bf; border-radius: 2px; margin: 15px 0 15px 0 !important; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; word-wrap: break-word; - opacity: 1; text-transform: uppercase !important; } .welcome h2 { /* fixes occluded langbox rendering bug */ filter: none; - box-shadow: inset 0 0 0 1px #fff, 0 0 1px #bbb; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; white-space: nowrap; } @@ -2177,30 +2540,28 @@ h3 { letter-spacing: 0.08em; word-spacing: 0.1em; color: #31334f; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); - opacity: 1; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; } h3.tabletitle, h3.ptitle, #config_advanced h3.tabletitle, h3#bannedpeers { border-radius: 0; border: 1px solid #7778bf; margin-bottom: -2px; - filter: none; - -webkit-filter: none; + box-shadow: inset 0 0 0 1px #fff; } h3.ptitle { margin-bottom: -14px; - filter: none; - -webkit-filter: none; } h3#bannedpeers { margin-bottom: -1px; } +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 right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; +} + /* /configpeers */ #banlist li { @@ -2274,10 +2635,12 @@ h3#bannedpeers { #bannedips tr:nth-child(even) { background: #eef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); } #bannedips tr:nth-child(odd) { background: #f7f8ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px); } /* end /configpeers */ @@ -2418,21 +2781,21 @@ input, input:visited, button, button:visited { background: linear-gradient(to bottom, #fff 0%, #ddd 100%); color: #333; margin: 3px; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; padding: 4px 5px; text-decoration: none; border-radius: 2px; opacity: 1; background-size: 14px auto, 100% 100% !important; - filter: saturate(70%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(70%) drop-shadow(0 0 1px #ccc); + filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } 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 0%, #fff 100%); border: 1px solid #f60; - filter: saturate(100%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(100%) drop-shadow(0 0 1px #ccc); + filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); + -webkit-filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); } button:active, input[type="submit"]:active, input[type="reset"]:active { @@ -2840,18 +3203,22 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re .routersummary .reload[value="restartImmediate"] { background: url(/themes/console/images/buttons/restart.png) center left 4px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !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 4px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background-size: 14px 14px, 100% 100% !important; } .routersummary .stop[value="shutdownImmediate"] { background: url(/themes/console/images/buttons/shutdown.png) center left 4px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !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 4px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + background-size: 14px 14px, 100% 100% !important; } .routersummary .reload[value="Reseed"] { @@ -2872,8 +3239,8 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re input[type="text"], input[type="password"] { background: #fff; - box-shadow: inset 1px 1px 1px #999; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; } input[type="text"]:focus, input[type="password"]:focus { @@ -2896,8 +3263,10 @@ input[type="checkbox"], input[type="radio"] { margin-top: 4px !important; margin-bottom: 4px !important; background: none; + cursor: pointer; } +input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus { filter: drop-shadow(0 0 2px #89f); -webkit-filter: drop-shadow(0 0 2px #89f); @@ -2910,12 +3279,12 @@ select { padding: 4px; border: 1px solid #999; min-width: 120px; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; border-radius: 2px; text-align: left !important; box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #ccc); - -webkit-filter: drop-shadow(0 0 1px #ccc); + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } select:focus { @@ -2947,8 +3316,8 @@ select:focus { } input[readonly], input[disabled], input[readonly]:focus, input[disabled]:focus { - background: #ddd; - box-shadow: inset 2px 2px 2px #999; + background: #e9e9e9; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); color: #333; filter: none; cursor: default; @@ -2960,11 +3329,11 @@ textarea { background: #ffe; color: #333 !important; border-radius: 2px; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; min-height: 100px; min-width: 97%; border: 1px solid #999; - box-shadow: inset 1px 1px 1px #999; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); } textarea:focus { @@ -3118,9 +3487,9 @@ div.joblog h3 { } .cells { - border-left: 1px outset #cfd1ff; - border-top: 1px inset #cfd1ff !important; - border-bottom: 1px inset #cfd1ff !important; + border-left: 1px outset #ddf; + border-top: 1px inset #ddf !important; + border-bottom: 1px inset #ddf !important; } .tablefooter { @@ -3164,8 +3533,8 @@ div.footnote hr { color: #447; background: #447; background: linear-gradient(to right, #77a, #669, #77a); - height: 1px; - border: 0 solid #447; + height: 3px; + border: 1px solid #fff; } .topness { @@ -3189,7 +3558,7 @@ iframe.iframed { } .main#dns { - padding: 0 8px; + padding: 0; min-width: 540px; } @@ -3202,7 +3571,7 @@ iframe.iframed { .main#tunnelmgr { padding: 0 10px; - min-width: 530px; + min-width: 536px; } #i2ptunnelframe { @@ -3240,7 +3609,7 @@ body.iframed { border: none; border-top: 1px solid #7778bf; background: none; - margin: 5px -6px 0 -6px; + margin: 5px -5px 0; } #consolepass.formaction { @@ -3273,8 +3642,8 @@ div.themechoice { background: linear-gradient(to bottom, #fff 0%, #ddf 100%); transition: filter ease 0.3s 0s; box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0px 0 1px #bbb); - -webkit-filter: drop-shadow(0px 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } .themechoice:hover { @@ -3296,7 +3665,8 @@ div.themechoice { } .themechoice:hover > object { - filter: drop-shadow(0px 0 1px #f60); + filter: drop-shadow(0 0 1px #f60); + -webkit-filter: drop-shadow(0 0 1px #f60); } .themechoice .optbox { @@ -3320,10 +3690,6 @@ div.themechoice { margin-bottom: 31px !important; } -.themechoice .optbox:hover + img { -/* box-shadow: 0 0 1px 1px #33f;*/ -} - div#themeoptions { clear: both; padding-top: 5px; @@ -3376,6 +3742,7 @@ div#themesettings { margin: -16px 0 0; border: 1px solid #7778bf; background: #fff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fff 5px); } div#langsettings { @@ -3383,6 +3750,7 @@ div#langsettings { border: 1px solid #7778bf; margin: -16px 0 0; background: #fff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fff 5px); } #themesettings hr, #langsettings hr { @@ -3401,8 +3769,8 @@ div.langselect { /* containing box for lang selection */ background: linear-gradient(to bottom, #fff 0%, #ddf 100%); transition: transform 0.3s ease 0s; box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0px 0 1px #bbb); - -webkit-filter: drop-shadow(0px 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } .langselect:hover { @@ -3573,6 +3941,7 @@ table#addkeyring tr:last-child td { #config_summarybar .configtable td:not(.optionsave) { padding-left: 50px; background: url(/themes/console/images/info/interval.png) 12px center no-repeat; + background: url(/themes/console/images/info/interval.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; background-size: 28px 28px; } @@ -3703,6 +4072,11 @@ table#leasesetdebug th a:hover, table#leasesetsummary th a:hover { padding: 0; } +#netdboverview a { + display: inline-block; + width: 100%; +} + #netdbversions tr { border-right: 1px solid #447; } @@ -3728,7 +4102,8 @@ table#leasesetdebug, table.leaseset, table#leasesetsummary { table#leasesetdebug td, table.leaseset td { padding: 5px !important; } -table#leasesetdebug { + +.leaseset, .netdbentry { margin-bottom: 10px; } @@ -3745,7 +4120,11 @@ table.leaseset th:last-child, table.leaseset td:nth-child(2) { } table#leasesetdebug, table#leasesetsummary { - margin-bottom: 15px; + margin-bottom: 14px !important; +} + +.leaseset:last-child, .netdbentry:last-child { + margin-bottom: 5px; } table#leasesetdebug th, table#leasesetsummary th { @@ -3991,6 +4370,7 @@ ul#banlist { padding: 5px 5px 5px 35px; line-height: 120%; background: #eef url(/themes/console/images/buttons/ban.png) 10px center no-repeat; + background: url(/themes/console/images/buttons/ban.png) 10px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff; break-inside: avoid; page-break-inside: avoid; -webkit-break-inside: avoid; @@ -4009,6 +4389,10 @@ ul#banlist { vertical-align: top; } +.main#profiles #banlist li { + margin-bottom: 0; +} + #tunnelconfig th[colspan="3"] { text-transform: uppercase; letter-spacing: 0.08em; @@ -4032,49 +4416,82 @@ ul#banlist { text-align: right; } -#profiles td:first-child { +#profiles th:nth-child(7) { + text-align: center; +} + +table#profiles td:first-child { width: 48px; text-align: right; white-space: nowrap; } -#profiles td:nth-child(2) { +table#profiles td:nth-child(2) { text-align: left; } -#profiles td[colspan="7"] { +table#profiles td[colspan="8"] { background: #77f; padding: 0; } #thresholds p { - margin-left: 10px; + margin-left: 5px; line-height: 140%; } -#profile_defs li:first-child { - margin-top: 0 !important; -} - -#profile_defs li { - list-style: none !important; - margin: -5px 0 0 0; - padding-bottom: 2px; - white-space: normal; - line-height: 80%; -} - #profile_defs b { text-transform: capitalize; } -table#profiles tr:hover td, table#floodfills tr:hover td, -#ntcpconnections tr:nth-last-child(n+2):hover td, #udpconnections tr:nth-last-child(n+2):hover td, -#schedjobs tr:hover td, #jobstats tr:nth-last-child(n+2):hover td, -#jardump tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td, -#eventlog tr:hover td { +#profile_defs td:first-child { + width: 5% !important; + white-space: nowrap; + text-align: right; +} + +#profile_defs td:last-child { + width: 95%; + white-space: normal; + line-height: 120%; +} + +#thresholds th, #thresholds td { + text-align: center !important; +} + +#capabilities_key td { + padding: 0 !important; +} + +#capabilities_key table { + margin: 0 !important; + border: none; + border-top: 1px solid #ddf; + border-bottom: 1px solid #ddf; +} + +#capabilities_key table td { + padding: 3px 5px !important; +} + +#capabilities_key table td:nth-child(even) { + width: 16px; +} + +#profile_defs b { + text-transform: capitalize; +} + +#capabilities_key b { + text-transform: none !important; +} + +table#profiles tr:hover td, table#floodfills tr:hover td, #ntcpconnections tr:nth-last-child(n+2):hover td, #udpconnections tr:nth-last-child(n+2):hover td, +#schedjobs tr:hover td, #jobstats tr:nth-last-child(n+2):hover td, #jardump tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td, #eventlog tr:hover td, +#netdboverview table tr:hover td, #debug tr:hover td, #clientconfig tr:hover td, #webappconfig tr:hover td { background: #ffd; - color: #000; + color: #111; } table#schedjobs { @@ -4111,6 +4528,10 @@ table#jardump { font-size: 8pt; } +#advconf { + margin-bottom: 12px; +} + #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn { font-size: 9pt; } @@ -4224,49 +4645,6 @@ table#floodfills th { color: #f90; } -/* experimental sidebar navigation for webapps */ - -#sb_services a:link, #sb_services a:visited { - display: inline-block; - width: 100%; - padding: 4px 2px 4px 20px; - text-align: left; - border-bottom: 1px dotted #89f; - background: url(images/application.png) left center no-repeat; - background-size: 14px 14px; -} - -#sb_services a:link:first-child { - padding-top: 2px; -} - -#sb_services a:link:last-child { - border-bottom: none; - padding-bottom: 2px; -} - -#sb_services a[href="/susimail/susimail"] { - background: url(images/inbox.png) left center no-repeat; -} - -#sb_services a[href="/i2psnark/"] { - background: url(images/magnet.png) left center no-repeat; -} - -#sb_services a[href="http://127.0.0.1:7658/"] { - background: url(images/server.png) left center no-repeat; -} - -#sb_services a[href="/orchid/"] { - background: url(images/flower.png) left center no-repeat; -} - -#sb_services a[href*="bote"] { - background: url(images/mail_black.png) left center no-repeat; -} - -/* end webapp navigation */ - #volunteer, #sidebarhelp, #configurationhelp, #reachabilityhelp, #advancedsettings, #legal, #changelog { border: 1px solid #7778bf; border-radius: 2px; @@ -4275,10 +4653,6 @@ table#floodfills th { background: #fff; } -#volunteer { - background: #fff url("/themes/snark/ubergine/images/hat.png") no-repeat right -3px bottom -3px / 140px auto; -} - #changelog { margin-bottom: 5px; padding: 0 0 0 10px; @@ -4292,10 +4666,6 @@ table#floodfills th { white-space: pre-wrap; } -#advancedsettings { - word-break: break-all; -} - .main#help h2 { margin: -1px -11px 10px !important; border-radius: 2px 2px 0 0; @@ -4308,6 +4678,21 @@ table#floodfills th { margin-right: -1px !important; } +.main#help div, .logtable tr:nth-child(n+2) td, .main#console { + background: linear-gradient(to bottom, #fff, rgba(250,250,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff !important; + margin-bottom: 13px; + box-shadow: inset 0 0 0 1px #fff; +} + +.main#console { + box-shadow: inset 0 0 0 1px #bbf; +} + +.main#help #volunteer, #wrapperlogs pre { + background: linear-gradient(to bottom, #fff, rgba(250,250,255,0.3)), url(/themes/snark/ubergine/images/hat.png) no-repeat right -3px bottom -3px / 140px auto, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; + box-shadow: inset 0 0 0 1px #fff; +} + #fullhistory { text-align: right; margin: 0 0 0 -10px; @@ -4345,21 +4730,30 @@ table#floodfills th { height: 20px; } -#clientconfig th:first-child, #webappconfig th:first-child, #pluginconfig th:first-child { - text-align: right; - padding-right: 10%; +#webappconfig td:first-child::after { + content: ""; + display: inline-block; + min-height: 32px; + vertical-align: middle; } +#clientconfig th:first-child, #webappconfig th:first-child, #pluginconfig th:first-child, #clientconfig td:first-child, #webappconfig td:first-child, #pluginconfig td:first-child { - padding-right: 10%; + text-align: right !important; } -#clientconfig th:nth-child(3), #webappconfig th:nth-child(3), #pluginconfig th:nth-child(3) { - text-align: center; +#clientconfig th:nth-child(2), #clientconfig th:nth-child(3), +#webappconfig th:nth-child(2), #webappconfig th:nth-child(3), +#pluginconfig th:nth-child(2), #pluginconfig th:nth-child(3) { + text-align: center !important; +} + +#clientconfig td:nth-child(3), #webappconfig td:nth-child(3), #pluginconfig td:nth-child(3) { + white-space: nowrap; } #pluginconfig table { - margin: 5px 5px 5px 0 !important; + margin: 5px 0 5px 0 !important; width: calc(100% - 5px); } @@ -4368,6 +4762,14 @@ table#floodfills th { white-space: nowrap; } +#pluginconfig td:last-child { + padding-right: 3px; +} + +table#plugininstall td:first-child { + white-space: nowrap !important; +} + h4#updateplugins { background: #eef url(images/header.png) center center repeat-x; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%) !important; @@ -4458,13 +4860,21 @@ img.app, img.app2p { } } +@media screen and (max-width: 1500px) { + +#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, +#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { + min-height: 12px; +} +} + @media screen and (min-width: 1500px) { body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, #configinfo th, tt, code, th, .statusnotes { font-size: 10pt !important; } -.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre, #jardump tt, #jardump td, div.news { +.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre, #jardump tt, #jardump td, div.news, #logs li { font-size: 9pt !important; } @@ -4480,17 +4890,17 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, height: 40px !important; margin-top: 4px; } -/* -.routersummary img[src$="i2plogo.png"] { - transform: scale(1.1); -} -*/ + .routersummary table[id^="sb_"] { width: 216px !important; } -.routersummary h3 a { - font-size: 11pt !important; +.routersummary h3::after { + content: ""; + display: inline-block; + min-height: 18px; + vertical-align: middle + box-sizing: border-box; } div.app { @@ -4501,10 +4911,6 @@ div.app { width: 142px !important; } -.tab, .tab2 { - padding-bottom: 3px; -} - .footnote { font-size: 8pt !important; } @@ -4535,6 +4941,10 @@ h1 { font-size: 19pt; } +.routersummary h3 a { + font-size: 11pt !important; +} + div.routersummary img[src$="i2plogo.png"] { margin-left: 0 !important; transform: none !important; @@ -4548,6 +4958,20 @@ div.routersummary img[src$="i2plogo.png"] { overflow: auto; } +#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { + margin-bottom: -4px !important; + margin-top: -10px !important; +} + +#sb_general, #sb_shortgeneral { + margin-top: -7px !important; +} + +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { + min-height: 14px; +} + #banlist li { font-size: 10pt; min-height: 38px !important; @@ -4561,15 +4985,43 @@ div.routersummary img[src$="i2plogo.png"] { margin: -1px 0 1px 1px; } -@media screen and (-webkit-min-device-pixel-ratio:0) { +.th_title a { + font-size: 11pt !important; +} + +#logs font[color^="#"]::before { + margin-right: 6px; + margin-left: -15px; + width: 7px; + height: 7px; +} + +/* +#logs li { + width: calc(100% - 55px); +} +*/ + +.statlist li a[href^="graph"]::before, .statlist li::before { + height: 6px; + width: 6px; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) { .routersummary div[style="height: 36px;"] { height: 38px !important; } } + +@media screen and (min-width: 1600px) { +.tab, .tab2 { + padding-left: 8px; + padding-right: 8px; } -/* MS Edge 14+ fix */ -_:-ms-lang(x), *, *:hover { +/* MS Edge 14+ rendering bug fix */ +_:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus { filter: none !important; -webkit-filter: none !important; } diff --git a/installer/resources/themes/console/light/console_ar.css b/installer/resources/themes/console/light/console_ar.css index e3a41becd..4e7e0a5a4 100644 --- a/installer/resources/themes/console/light/console_ar.css +++ b/installer/resources/themes/console/light/console_ar.css @@ -10,6 +10,11 @@ pre { text-align: right; } +#help pre, #logs li { + text-align: left; + direction: ltr; +} + table { direction: rtl; margin-right: -16px; @@ -24,12 +29,16 @@ h1,h2,h3,h4 { text-align: right !important; } +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; +} + .routersummary h4 { text-align: center; } h1 { - margin: 10px 210px -15px 10px; + margin: 0 205px -15px 0; padding: 20px 20px 20px 10px; } @@ -38,6 +47,55 @@ form { margin: 0 16px 0 -16px; } +#stats form { + margin: 0; +} + +table.search td:nth-child(2) { + padding: 0 10px 0 0; +} + +table.search td:nth-child(3) { + padding: 0 2px 0 8px; +} + +input.search[type="text"] { + background-position: right 4px center; + padding: 5px 24px 5px 5px; +} + +button.search, input[type="submit"], input[type="reset"], +button.search:hover, input[type="submit"]:hover, input[type="reset"]:hover, +button.search:focus, input[type="submit"]:focus, input[type="reset"]:focus, +button.search:active, input[type="submit"]:active, input[type="reset"]:active { + background-position: right 6px center; + padding: 5px 21px 5px 5px; +} + +select, select:hover, select:focus, select:active { + padding: 4px 4px 4px 16px; + background-position: left center !important; + text-align: right !important; +} + +#loggingoptions input[type="text"], #i2pupdates input[type="text"], #addkeyring input[type="text"], +#reseedconfig input[type="text"], #manualreseed input[type="text"], #plugininstall input[type="text"], .homelinkedit input[type="text"] { + direction: ltr; + text-align: right; +} + +.homelinkedit td:nth-child(4) { + direction: ltr !important; +} + +input[name="refreshInterval"] { + text-align: left; +} + +#loggingoptions td:last-child:not(.optionsave) { + text-align: right; +} + #statsForm, #joinfamily, #newfamily, table#permabanned { margin-left: 0; margin-right: 0; @@ -96,7 +154,7 @@ div.warning { } div.main { - margin: 10px 210px 0px 10px; + margin: 10px 205px 0 0; padding: 7px 20px 30px 20px; } @@ -105,16 +163,11 @@ div.main li { } div.news { - margin: 10px 210px 0px 10px; + margin: 10px 205px -12px 10px; padding: 7px 20px 10px 20px; direction: ltr; } -div.news h3, #news h3 { - background: url(images/news.png) right 8px center no-repeat, linear-gradient(to right, #fff, #eef) !important; - padding: 5px 30px 5px 10px; -} - div.graphspanel form { text-align: right; } @@ -137,10 +190,24 @@ div.graphspanel form { margin: 0 -16px 0 16px; } -.formaction#consolepass, .formaction#tunnelconfigsave, .formaction#homeapps { +.formaction#consolepass, .formaction#tunnelconfigsave, .formaction#homeapps, .formaction#homesites { margin-bottom: 15px; } +#webappconfig th:first-child, #webappconfig td:first-child { + text-align: right; +} + +#webappconfig th:nth-child(2), #webappconfig td:nth-child(2), +#webappconfig th:nth-child(3), #webappconfig td:nth-child(3) { + text-align: center; +} + +#webappconfigactions { + margin-left: 32px; + margin-right: -32px; +} + div[lang="ar"] p, div[lang="ar"] ul { padding: 0 20px; font-size: 10pt; @@ -183,12 +250,6 @@ span.newtab { letter-spacing: 0; } -/* -#consolepass { - margin-right: 0; -} -*/ - #tunnelconfig + hr { background: #fff ; } @@ -201,42 +262,45 @@ span.newtab { margin: 0; } -#pluginconfig td:first-child { +#pluginconfig th:first-child, #pluginconfig td:first-child { min-width: 100px; white-space: normal; - text-align: left; + text-align: left !important; padding-right: 5px; } +#pluginconfig th:nth-child(2), #pluginconfig th:nth-child(3), +#pluginconfig td:nth-child(2), #pluginconfig td:nth-child(3) { + text-align: center; +} + +#pluginconfig table th:nth-child(2), #pluginconfig table td:nth-child(2) { + text-align: right; +} + +.main#config_plugins { + overflow: hidden; +} + td.optionsave { text-align: left; } p.infohelp, p.infowarn, td.infohelp, td.infowarn, -table#bugreports td.infohelp, -p#debugmode, -p#sybilinfo, +table#bugreports td.infohelp, p#debugmode, p#sybilinfo, #bandwidthconfig tr:first-child .infohelp, -#addkeyring td.infohelp, -#joinfamily tr:nth-child(3) td:first-child, +#addkeyring td.infohelp, #joinfamily tr:nth-child(3) td:first-child, #newfamily tr:last-child td:first-child, -#oldhome td:first-child, -#floodfillconfig .infohelp, +#oldhome td:first-child, #floodfillconfig .infohelp, p#clientconf.infohelp, p#webappconfig.infohelp, -p#pluginconfig, -#plugininstall .infohelp, +p#pluginconfig, #plugininstall .infohelp, #manualreseed tr:nth-last-child(2) td.infohelp, #config_peers tr:nth-child(3) td.infohelp, -h3#shutdownrouter + p.infohelp, -h3#restartrouter + p.infohelp, -h3#systray + p.infohelp, -h3#servicedebug + p.infohelp, -h3#browseronstart + p.infohelp, -.main#config_reseed p.infohelp, -p#enablefullstats, p#gatherstats, -#config_family .infohelp, -#consolepass tr:first-child td, -form[action="events"], +h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp, +h3#systray + p.infohelp, h3#servicedebug + p.infohelp, +h3#browseronstart + p.infohelp, .main#config_reseed p.infohelp, +p#enablefullstats, p#gatherstats, #config_family .infohelp, +#consolepass tr:first-child td, form[action="events"], #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2), #config_summarybar .configtable td:not(.optionsave) { @@ -249,6 +313,18 @@ form[action="events"], margin-right: -16px !important; } +div.themechoice, div.langselect { + float: right; +} + +.h3navlinks { + float: left; +} + +.homelinkedit tr:last-child td:first-child, p#helptranslate { + text-align: left; +} + #sidebarconf tr:last-child td:last-child { text-align: right; } @@ -257,10 +333,6 @@ form[action="events"], margin-bottom: 15px; } -.homelinkedit tr:last-child td:first-child { - text-align: left; -} - table#manualreseed, #config_keyring .configtable { margin-right: 0 !important; } @@ -274,6 +346,14 @@ table#manualreseed, #config_keyring .configtable { margin-right: -32px; } +#clientconfig th:first-child { + text-align: left; +} + +#clientconfig td:nth-child(2), #clientconfig td:nth-child(3) { + text-align: center; +} + table#plugininstall { margin-right: 0 !important; } @@ -282,9 +362,14 @@ table#pluginconfig { margin-right: -32px !important; } +#tunnelconfig td:nth-child(n+2) { + text-align: right; +} + .formaction#clientsconfig, .formaction#pluginconfig { margin-left: 32px; margin-right: -32px; + margin-bottom: 15px; } .infohelp#webappconfig, h3#webappconfig, #pluginconfig, h3#pluginconfig { @@ -295,6 +380,28 @@ textarea[name="levels"] { text-align: left; } +textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedconfig textarea { + direction: ltr; +} + +.homelinkedit th:first-child, .homelinkedit td:first-child { + text-align: center; +} + +.homelinkedit th:nth-child(2), .homelinkedit td:nth-child(2) { + text-align: left; + width: 24px; +} + +#bannedips, #banlist { + margin-left: 0 !important; + margin-right: 0 !important; +} + +#bannedips, #bannedips table { + direction: ltr !important; +} + .mediumtags { text-align: left; } @@ -341,12 +448,32 @@ table.search { margin-bottom: 15px; } +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-size: 16px 16px, 100% 100%, 100% 100% !important; + margin-top: 15px; +} + +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-size: 16px 16px, 100% 100%, 100% 100% !important; +} + h4.app, h4.app2, #news h3, .news h3 { - background-position: right 10px center; + background-position: right 10px center, right center, right center !important; padding: 6px 32px 6px 10px; direction: ltr !important; } +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; + padding: 5px 30px 5px 10px; +/* background-position: right 8px center, right center !important;*/ +} + #netdboverview, #netdboverview td, #netdboverview table { direction: ltr; } @@ -397,10 +524,53 @@ p#profiles_overview, #profiles + h3, #thresholds + h3, ul#banlist { margin-left: 16px; } +p.family, p.sybil_info { + direction: ltr; +} + +.sybil_routerinfo th { + padding: 1px 6px 1px 1px !important; +} + +.sybil_routerinfo th:nth-last-child(2), .sybil_routerinfo th:last-child, #netdblookup td:first-child:not(.subheading) { + text-align: left !important; +} + +td.subheading { + text-align: right !important; +} + +.sybil_routerinfo th:first-child { + text-align: right !important; +} + +.sybil_routerinfo td:first-child { + text-align: left; +} + table.leaseset:last-child, table.netdbentry:last-child, #profile_defs { margin-bottom: -10px; } +table#leasesetdebug td:first-child, table#leasesetsummary td:first-child { + text-align: left; +} + +#netdboverview th, #netdblookup th { + background-position: right 8px center !important; + padding: 8px 32px 8px 5px !important; + text-align: right !important; +} + +#netdbversions th:first-child, #netdbtransports th:first-child, #netdbcountrylist th:first-child { + text-align: left !important; +} + +#netdbversions th:last-child, #netdbtransports th:last-child, #netdbcountrylist th:last-child { + text-align: right !important; + padding-right: 5px !important; +} + table.netdbentry th:first-child { text-align: right; } @@ -409,6 +579,10 @@ table.netdbentry th:last-child { text-align: left; } +table.netdbentry td:nth-child(2) { + direction: ltr; +} + #sybilnav li { background: url(images/eye.png) right 5px center no-repeat, linear-gradient(to right, #eef 30%, #fff); padding: 3px 24px 3px 3px; @@ -447,11 +621,19 @@ table.netdbentry th:last-child { text-align: left; } +.logtable tr:first-child td { + direction: ltr; +} + +#wrapperlogs pre { + text-align: left; + direction: ltr; +} + #pluginconfigactions { margin: -6px -32px -6px 32px !important; } - #pluginupdater.formaction { margin: -16px 0; } @@ -480,8 +662,4 @@ table#bugreports td.infohelp { margin-right: 232px !important; margin-left: 0 !important; } - -html { - margin: 0 3px !important; -} } \ No newline at end of file diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css index d7992d911..38e603856 100644 --- a/installer/resources/themes/console/light/i2ptunnel.css +++ b/installer/resources/themes/console/light/i2ptunnel.css @@ -9,7 +9,7 @@ body { font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif; color: #333; font-size: 9pt; - background: #a4a4cb url(images/tile2.png); + background: #a4a4cb url(images/tile2.png) fixed; background-size: 32px 32px; } @@ -21,16 +21,19 @@ body.iframed { ::selection { background: #27377f !important; color: white; + text-shadow: none; } ::-moz-selection { background: #27377f !important; color: white; + text-shadow: none; } div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + box-sizing: border-box; } a { @@ -42,11 +45,16 @@ form { } input[type="checkbox"], input[type="radio"] { - vertical-align: middle; + margin: 5px 3px 5px 5px; + background: none; + vertical-align: sub; min-width: 16px; min-height: 16px; - margin: 0; - background: none; +} + +input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus { + filter: drop-shadow(0 0 2px #89f); + -webkit-filter: drop-shadow(0 0 2px #89f); } textarea, input, select, button { @@ -70,7 +78,7 @@ textarea { border: 1px solid #999; border-radius: 2px; resize: none; - box-shadow: inset 2px 2px 1px #ccc; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); } textarea:focus { @@ -92,43 +100,33 @@ br { clear: left; } -div.statusNotRunning { - float: left; - width: 68px; - height: 24px; - overflow: hidden; +.statusNotRunning { color: #d00; - background: url('images/console_status_stopped.png') 0 0 no-repeat; - padding-top: 24px; - margin-top: 4px; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #999); + background: url(images/console_status_stopped.png) 0 0 no-repeat; } -div.statusRunning { - float: left; - width: 68px; - height: 24px; - overflow: hidden; +.statusRunning { color: #0b0; - background: url('images/console_status_running.png') 0 0 no-repeat; - padding-top: 24px; - margin-top: 4px; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #999); + background: url(images/console_status_running.png) 0 0 no-repeat; } -div.statusStarting { - float: left; - width: 68px; +.statusStarting { + color: #ff3; + background: url(images/console_status_starting.png) 0 0 no-repeat; +} + +.statusNotRunning, .statusRunning, .statusStarting { + margin: 0; + padding: 0; + width: 100%; height: 24px; + background-position: center center; + background-size: auto 16px; + font-size: 0 !important; + text-align: center; overflow: hidden; - color: #339933; - background: url('images/console_status_starting.png') 0 0 no-repeat; - padding-top: 24px; - margin-top: 4px; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #999); + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } hr { @@ -139,11 +137,11 @@ hr { width: 150px; border: 1px solid #999; padding: 4px; - font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; background: #fff; color: #333; border-radius: 2px; - box-shadow: inset 2px 2px 1px #ccc; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); } .freetext:focus { @@ -152,8 +150,8 @@ hr { } .freetext[readonly], .freetext[readonly]:focus { - background: #ddd; - box-shadow: inset 2px 2px 1px #ccc; + background: #e9e9e9; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); color: #333; } @@ -165,6 +163,10 @@ hr { width: 100px; } +.control, input[type="radio"], input[type="checkbox"], select { + cursor: pointer; +} + .control::-moz-focus-inner { outline: none; border: none; @@ -182,8 +184,7 @@ hr { background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #ccc); -/* -webkit-filter: drop-shadow(0 0 1px #ccc); */ + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); box-sizing: border-box; margin: 2px 4px !important; min-width: 70px !important; @@ -201,6 +202,7 @@ button.control, input.control { background: #ddd; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); box-shadow: inset 0 0 0 1px #fff !important; + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); } .control:active { @@ -221,7 +223,7 @@ a.control { width: calc(100% - 14px); max-width: 1400px; margin: 8px auto; - min-width: 450px; + min-width: 540px; overflow: hidden; text-align: left !important; border-radius: 2px; @@ -242,35 +244,27 @@ a.control { } select { - background: #fff; - color: #333; margin: 4px !important; - font-family: "Droid Sans", Verdana, Tahoma, Helvetica, sans-serif; - border: 1px solid #999; - padding: 3px 3px 3px 0; + padding: 4px 16px 4px 4px; min-width: 140px; + background: #fff; + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + color: #333; + font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif; font-size: 9pt; + border: 1px solid #999; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; - filter: drop-shadow(0 0 1px #ccc); + -moz-appearance: none; + -webkit-appearance: none; + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } select:hover { color: #111; } -select:focus { - box-shadow: 0 0 1px #89f; -} - -@-moz-document url-prefix() { /* target firefox and derivatives only */ -select { - -moz-appearance: none; - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 4px 16px 4px 4px; -} - select:hover, select:active { background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } @@ -279,10 +273,9 @@ select:focus { background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; box-shadow: 0 0 1px #89f; } -} a:link { - color: #359; + color: #3b6bbf; text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -290,7 +283,7 @@ a:link { } a:visited { - color: #218; + color: #2c4e8f; text-decoration: none; } @@ -312,6 +305,7 @@ h2, h3 { border: 1px solid #7778bf; border-radius: 2px 2px 0 0; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%) !important; + background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8)) 15% !important; font-size: 11pt; text-transform: uppercase; letter-spacing: 0.08em; @@ -321,13 +315,6 @@ h2, h3 { box-shadow: inset 0 0 0 1px #fff; } -/* -h3 { - border-radius: 0; - margin-top: -1px; -} -*/ - .iframed #globalTunnelControl h2 { margin-top: 2px; } @@ -358,10 +345,31 @@ th:first-child { padding-left: 10px; } + +h2, h3, th, a, button.control, select { + text-shadow: 0 1px 1px #fff; +} + +a:hover, a:focus, a:active, button:hover, button:focus, button:active, select:hover, select:focus, select:active { + text-shadow: none; +} + +.tunnelConfig tr, #wizardPanel tr { + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); +} + +#wizardPanel tr:first-child { + background: #fff; +} + td { - border-top: 1px solid #7778bf; + border-top: 1px inset #cfd1ff; vertical-align: middle; - padding: 4px 5px; + padding: 5px; +} + +#serverTunnels td, #clientTunnels td { + border-top: 1px inset #efefff; } td.infohelp { @@ -372,17 +380,6 @@ td.infohelp { border: 1px solid #7778bf; } -div[class^="status"] { - float: none; - font-size: 0 !important; - background-position: center center; - text-align: center; - margin: 0; - padding: 0; - width: 100%; - background-size: auto 16px; -} - .tunnelConfig th:first-child, .tunnelConfig td:first-child { border-left: 1px solid #7778bf; } @@ -396,6 +393,7 @@ div[class^="status"] { } .tunnelConfig td > b { + margin-left: 5px; min-width: 30px; display: inline-block; } @@ -404,6 +402,10 @@ div[class^="status"] { background: #fff !important; } +.tunnelProperties td { + border-top: 1px inset #cfd1ff !important; +} + .tunnelProperties:hover { background: #ffd !important; color: #111; @@ -447,12 +449,9 @@ div[class^="status"] { width: 25%; } -.tunnelPreview { - text-align: left; -} - .tunnelPreview, .tunnelPort { width: 15%; + text-align: center; } .tunnelLocation, .tunnelInterface { @@ -484,7 +483,9 @@ th.tunnelControl { padding: 7px 5px; background: #fff; background: linear-gradient(to bottom, #fff, #eef); + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; border-top: 1px solid #7778bf !important; + box-shadow: inset 0 0 0 1px #fff; } .buttons > * { @@ -522,16 +523,10 @@ input { } #oldName, #targetDestination, select#profile, select#connectionProfile { - min-width: 280px; + min-width: 310px; width: 30%; } -/* -select#profile, select#connectionProfile { - margin: 0 !important; -} -*/ - #customOptions, #userAgents { width: calc(100% - 10px) !important; } @@ -542,29 +537,30 @@ select#profile, select#connectionProfile { } #localDestination { - height: 30px !important; + height: 32px !important; } #leasesetKey { - height: 24px !important; + height: 28px !important; vertical-align: middle; padding: 4px; + box-sizing: border-box; } .multiOption { + margin: 5px 10px 5px 5px; display: inline-block; - margin-right: 10px; vertical-align: middle; } .multiOption#isServer { background: url(/themes/console/images/server.png) left center no-repeat; - padding-left: 18px; + padding-left: 16px; } .multiOption#isClient { background: url(/themes/console/images/client.png) left center no-repeat; - padding-left: 18px; + padding-left: 16px; } td#throttle { @@ -607,10 +603,12 @@ td.blankColumn { #throttler tr:nth-child(odd) { background: #f7f8ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(211, 211, 255, 0.3) 3px, #fff 5px); } #throttler tr:nth-child(even) { background: #eef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(230, 230, 255, 0.3) 3px, #fff 5px); } #throttler input[type="text"] { @@ -642,11 +640,19 @@ input::-moz-placeholder { opacity: 1; } +input:focus::-moz-placeholder { + opacity: 0; +} + ::-webkit-input-placeholder { color: #f00; opacity: 1; } +:focus::-webkit-input-placeholder { + opacity: 0; +} + input.tunnelName, input.tunnelDescription, #userAgents { width: 80%; min-width: 280px; @@ -702,6 +708,10 @@ input.tunnelName, input.tunnelDescription, #userAgents { padding: 0; } +#wizardPanel td:not(#wizardTable), #wizardTunnelTypes td { + padding: 10px; +} + #wizardPanel .freetext { margin-left: 0 !important; } @@ -716,7 +726,7 @@ input.tunnelName, input.tunnelDescription, #userAgents { #wizardTunnelTypes td:last-child { text-align: justify; - padding: 5px 10px 5px 5px; + padding: 10px 20px 10px 10px !important; } #wizardTunnelTypes select { @@ -771,7 +781,7 @@ input.tunnelName, input.tunnelDescription, #userAgents { display: inline-block; font-weight: bold; text-align: right; - margin-right: 3px; + margin-right: 10px; } #wizardPanel select { @@ -786,23 +796,10 @@ input.tunnelName, input.tunnelDescription, #userAgents { /* more space */ -.tunnelConfig td, td { - border-top: 1px inset #cfd1ff; - padding: 5px; -} - -input[type="checkbox"], input[type="radio"] { - margin: 5px 3px 5px 5px; -} - .freetext, .tunnelConfig textarea, #customOptions, #userAgents, #hostField { margin: 5px !important; } -.multiOption { - margin: 5px 10px 5px 5px; -} - #tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey { margin: 5px !important; width: calc(100% - 10px) !important; @@ -825,12 +822,6 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { width: calc(100% - 20px) !important; } -.tunnelConfig td > b { - min-width: 30px; - display: inline-block; - margin-left: 5px; -} - .tunnelDestination { padding-bottom: 1px !important; border-bottom: 1px solid transparent !important; @@ -859,6 +850,20 @@ td.tunnelDestination, td.tunnelDescription { /* responsive layout */ +@media screen and (max-width: 800px) { +th { + font-size: 9pt; +} + +.statusNotRunning, .statusRunning, .statusStarting { + background-size: auto 14px; +} + +#leasesetKey { + height: 38px !important; +} +} + @media screen and (min-width: 1500px) { body, select, .control, input, textarea { font-size: 10pt !important; @@ -867,5 +872,12 @@ body, select, .control, input, textarea { th { font-size: 10.5pt; } + +.statusNotRunning, .statusRunning, .statusStarting { + background-size: auto 18px; } +#localDestination { + height: 34px !important; +} +} diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css index 12d9dbeb1..53de81d03 100644 --- a/installer/resources/themes/console/midnight/console.css +++ b/installer/resources/themes/console/midnight/console.css @@ -145,7 +145,7 @@ textarea { padding: 5px; margin: 10px; border-radius: 2px; - font: 8.5pt "Droid Sans Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8.5pt "Droid Sans Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; min-height: 100px; min-width: 97%; width: calc(100% - 15px); @@ -913,15 +913,18 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re } .routersummary .reload[value="Reseed"] { - background: url(/themes/console/images/buttons/download.png) center left 4px no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + background-size: 14px auto !important; } .routersummary .reload[value="Reseed"]:hover { - background: #000 url(/themes/console/images/buttons/download.png) center left 4px no-repeat !important; + background: #000 url(/themes/console/images/buttons/download.png) center left 6px no-repeat !important; + background-size: 14px auto !important; } .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active { - background: #652787 url(/themes/console/images/buttons/download.png) center left 4px no-repeat !important; + background: #652787 url(/themes/console/images/buttons/download.png) center left 6px no-repeat !important; + background-size: 14px auto !important; } .routersummary .download, .routersummary .download:hover, .routersummary .download:focus { @@ -950,7 +953,7 @@ pre { width: 98%; overflow-x: auto; text-align: left; - font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #c9ceff; } @@ -1007,6 +1010,12 @@ div.logo hr { word-wrap: break-word; font-size: 9pt; min-width: 300px; +/* stripey borders */ + box-shadow: inset 0 0 0 1px #44175f, inset 0 0 3px 3px #000, 0 0 0 2px #443da0;; + border: 5px solid #443da0; + border-image: repeating-linear-gradient(135deg, #003 0px, #003 20px, #550 20px, #550 40px, #003 40px) 5 repeat repeat; + border-image-width: 5px; + border-image-outset: 1px; } .warning p, .warning a { @@ -1174,7 +1183,7 @@ div.logo hr { .routersummary table { border: 0; text-align: center !important; - margin: -5px -7px -6px -8px !important; + margin: -4px -7px -6px -8px !important; width: 189px !important; overflow: hidden; font-size: 8pt; @@ -1183,14 +1192,16 @@ div.logo hr { } #sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { - margin-bottom: -4px !important; + margin-top: -3px !important; + margin-bottom: -5px !important; } -#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after, -#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after { +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { content: ""; display: inline-block; - min-height: 14px; + box-sizing: border-box; + vertical-align: bottom; } /* @@ -1202,6 +1213,13 @@ div.logo hr { #sb_localtunnels { width: 189px !important; + border-collapse: separate; + border-spacing: 0; +} + +#sb_localtunnels a { + display: inline-block; + width: 100%; } #sb_localtunnels img { @@ -1212,7 +1230,7 @@ div.logo hr { #sb_localtunnels td:first-child { width: 16px; text-align: left; - padding: 2px 0 0 1px; + padding: 2px 0 2px 1px; } #sb_localtunnels td:last-child { @@ -1220,6 +1238,18 @@ div.logo hr { padding-right: 0; } +#sb_localtunnels tr:hover td { + background: #652787; +} + +#sb_localtunnels tr:hover td:first-child { + border-radius: 2px 0 0 2px; +} + +#sb_localtunnels tr:hover td:last-child { + border-radius: 0 2px 2px 0; +} + #sb_services a:link, #sb_internals a:link, #sb_advanced a:link { word-break: break-all; max-width: 182px; @@ -1227,6 +1257,26 @@ div.logo hr { white-space: nowrap; text-overflow: ellipsis; line-height: 140%; + vertical-align: middle; + display: inline-block; + padding: 1px 3px; +} + +#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, .news a:hover, #console a:hover , +tt a:hover { + background: #652787; + color: #fff; !important; + border-radius: 2px; +} + +#sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_localtunnels tr:active, +.news a:active, #console a:active, tt a:active { + background: #39144F; + color: #c9ceff !important; +} + +#sb_localtunnels tr:active a { + color: #c9ceff !important; } .sb_notice { @@ -1234,12 +1284,12 @@ div.logo hr { border: 1px solid #241f69; border-radius: 2px; box-shadow: inset 0 0 0 1px #000; - margin: 10px -4px -2px; + margin: 5px -4px -3px; padding: 5px 3px; } -hr + .sb_notice { - margin-top: 6px; +p:empty + .sb_notice { + margin-top: 10px; } /* sidebar stacked tables fix */ @@ -1571,42 +1621,62 @@ div.sorry hr { white-space: nowrap; } -.confignav { - background: url(images/header.png) repeat-x scroll center center #000; - padding: 8px 5px 7px !important; - margin: -1px -11px 10px; +/* top navigation */ + +div.confignav { + background: #010010 url(images/titles.png) center center repeat-x !important; + background: linear-gradient(to bottom, #121225 0%, #121225 50%, #000011 50%, #00000d 50%, #00000d 100%); + padding: 7px 5px 8px !important; + margin: -1px -11px 15px; border: 1px solid #443da0; font-weight: bold !important; line-height: 130% !important; text-align: center; -} - -.confignav a:hover { - text-decoration: none; + box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030; } .tab, .tab2 { - padding: 1px 3px; - white-space: nowrap; - margin: 0; + box-sizing: border-box; + display: inline-block; + border: 1px solid #443da0; + margin: 0 -2px -1px -2px !important; + padding: 1px 0 2px; + min-width: 60px !important; + box-shadow: inset 0 0 0 1px #000; } -.tab2::before { - content: '\1F892\00A0'; - content: '\25B8\00A0'; - font-size: 10pt; - line-height: 50%; - vertical-align: baseline; +.tab a { + display: inline-block; + padding: 4px 16px 5px; } -.tab2::after { - content: '\00A0\1F890'; - content: '\00A0\25C2'; - font-size: 10pt; - line-height: 50%; - vertical-align: baseline; +.tab { + background: #010010 url(images/titles.png) center center repeat-x; + background: linear-gradient(to bottom, #1a1b2f 50%, #000011 50%, #00000d 50%) !important; } +.tab:hover { + background: #000 !important; + box-shadow: inset 0 0 0 1px #404; +} + +.tab:active { + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #2d103f; + background: #652787 !important; +} + +.tab:active a { + color: #c9ceff !important; +} + +.tab2 { + background: #040033; + color: #c9ceff; + padding: 5px 14px 7px; +} + +/* end topnav */ + #bwlimiter a, #advancedconfig a, .tabletitle a, #upnpconfig a, #servicedebug a, .ptitle a, #configstats th a, h3#graphinfo a, .h3navlinks { float: right; letter-spacing: normal; @@ -1639,7 +1709,6 @@ div.sorry hr { } #criticallogs li::first-line, #routerlogs li::first-line { - font-weight: bold; display: inline-block; border: 1px solid #f00; } @@ -1923,7 +1992,7 @@ td img[src$="c=a1"], td img[src$="c=a2"] { } tt { - font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #393; } @@ -1951,12 +2020,6 @@ div.main li { word-wrap: break-word; } -div.main li b { - color: #EBDBFF !important; - letter-spacing: 0.08em; - font-size: 9pt; -} - .tidylist { text-align: justify !important; line-height: 150%; @@ -1968,9 +2031,9 @@ div.main li b { .tidylist code { text-align: left; - font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - color: #D6FFFD; - padding: 1px 3px; + font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + color: #fff; + padding: 2px 3px; background: #040033; margin: 0 2px; border-radius: 2px; @@ -1991,7 +2054,7 @@ ul { code { text-align: left; - font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #393; } @@ -2053,6 +2116,11 @@ p:empty { /* kills empty paragraphs that are likely erroneous eg. see top of /pr border: 1px dotted #652787; /* display in order to bug hunt */ } +#config_logging p { + text-align: left; + margin: 3px 0 0 !important; +} + h1 { text-align: left; color: #c9ceff; @@ -2115,7 +2183,7 @@ h2 a[name]:hover, h2 a[name]:active { h3, h3.welcome, div.news h3 { border: 1px solid #443da0; border-left: 5px solid #443da0; - padding: 5px 10px; + padding: 7px 10px; margin: 10px 0 10px 0; border-radius: 0 2px 2px 0; background: #000 url(images/header.png) center center ; @@ -2124,6 +2192,10 @@ h3, h3.welcome, div.news h3 { letter-spacing: 0.08em; } +div.news h3 { + padding: 6px 10px; +} + h4 { border-bottom: 1px; border-bottom-style: solid; @@ -2476,8 +2548,9 @@ table#udpconnections tr a img { margin-top: 3px !important; } -table#udpconnections tr:hover, table#ntcpconnections tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #jardump tr:hover { +table#udpconnections tr:hover, table#ntcpconnections tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #jardump tr:hover, #webappconfig tr:hover td { background: #020022; + color: #eff1ff; } table#udpconnections td > *, table#ntcpconnections td > * { @@ -2578,7 +2651,7 @@ tr#addnew { div.themechoice { width: 120px; - height: 78px; +/* height: 78px;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -3077,6 +3150,32 @@ table#bandwidthconfig input, table#bandwidthconfig select { margin-right: 3px; } +/* confignet tidyup */ + +#netconfig .optbox { + margin: 10px 6px 2px !important; + display: inline-block !important; + vertical-align: sub !important; +} + +#netconfig .optbox:first-child { + margin-top: 6px !important; + margin-bottom: 6px !important; +} + +#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] { + margin-bottom: 6px !important; +} + +#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] { + margin-top: 3px !important; +} + +#netconfig input[name*="ost"] { + width: 250px !important; +} + +/* end confignet tidyup */ /* end /confignet */ /* /events */ @@ -3172,6 +3271,18 @@ p#webappconfigtext + p, p#pluginconfigtext { white-space: nowrap; } +#webappconfig th:last-child { + text-align: left; + padding-left: 5px; +} + +#webappconfig td:first-child::after { + content: ""; + display: inline-block; + min-height: 28px; + vertical-align: middle; +} + #pluginconfig td:nth-child(2) { border-right: 1px inset #120f35 !important; } @@ -3290,6 +3401,15 @@ ul.statlist li li:last-child { padding-bottom: 5px !important; } +.statlist a[href*="graph"]::before { + content: "\27A1\00A0"; + font-size: 14pt; +} + +.statlist a[href$="&showEvents=true"]::before { + display: none; +} + /* .statlist a[href*="graph"]::before { content: "\1F4CA\00A0"; @@ -3413,6 +3533,7 @@ table#loggingoptions td:first-child { #loggingoptions textarea { width: 99%; width: calc(100% - 8px); + resize: none; } #loggingoptions select[name="newlogclass"] { @@ -3663,7 +3784,7 @@ div#volunteer { #configinfo th { text-align: left; padding: 8px 10px; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #393; background: #002; background: linear-gradient(to right, #000, #002); @@ -3883,7 +4004,7 @@ table[id$="logs"] tr:nth-child(even){ } table[id$="logs"] ul { - margin: 5px 10px -5px -15px !important; + margin: -3px 15px -10px -18px !important; } #wrapperlogs { @@ -3902,17 +4023,98 @@ table[id$="logs"] ul { height: 600px; } +.main#logs li { + word-break: break-all; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; +} + .logtable ul li:not(old) { list-style: none !important; margin-left: 15px; } -.logtable ul li::before { - content: "\279C\00A0\00A0"; - font-size: 12pt; - line-height: 50%; - vertical-align: baseline; - color: #3f5182; +/* Override error log colors */ + +font[color="#006600"] { /* debug */ + color: #090; +} + +font[color="#ff00cc"] { /* warning */ + color: #909; +} + +font[color="#ff3300"] { /* error */ + color: #d00; +} + +font[color="#cc0000"] { /* critical */ + color: #f00; +} + +font[color="#000099"] { /* info */ + color: #bb0; +} + +/* end log color overrides */ + +#logs li { + list-style: none; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + line-height: 130%; + text-align: left; + display: inline-block; + width: 100%; + margin-right: 5px !important; + padding: 2px 0; +} + +#criticallogs li { + width: 100%; +} + +#logs li::after { + content: ""; + display: block; + border-top: 1px dotted #005; + width: 100%; + margin: 5px 0 -3px; +} + +#logs li:last-child::after { + border: none; + margin: 0; +} + +#logs font[color^="#"]::before { + content: ""; + display: inline-block; + width: 6px; + height: 6px; + background: #fff; + border-radius: 50%; + margin-right: 5px; + margin-left: 0; + vertical-align: calc(1px); +} + +#logs li font[color="#cc0000"]::before { + background: #f00; +} + +#logs li font[color="#006600"]::before { + background: #090; +} + +#logs li font[color="#ff3300"]::before { + background: #d00; +} + +#logs li font[color="#ff00cc"]::before { + background: #909; +} + +#logs li font[color="#000099"]::before { + background: #bb0; } /* /profiles */ @@ -3929,10 +4131,6 @@ table#profiles th, table#profiles td { text-align: right; } -table#profiles td { - color: #7670c2; -} - table#profiles td:nth-child(2), table#profiles th:nth-child(2) { text-align: left; } @@ -3952,14 +4150,17 @@ table#profiles td:first-child, table#profiles th:first-child, table#profiles td: text-align: center; } +table#profiles th:last-child { + text-align: center; +} + table#profiles td:last-child { text-align: right; -/* padding-right: 10px;*/ width: 60px; white-space: nowrap; } -table#profiles td[colspan="7"] { /* profile class separator */ +table#profiles td[colspan="8"] { /* profile class separator */ background: #050044; padding: 1px; border: 1px inset #000; @@ -3988,25 +4189,52 @@ table#profile_defs, table#thresholds { } table#profile_defs td, table#thresholds td { - padding: 10px; + padding: 5px; } -table#profile_defs ul { - margin-left: -30px; +#profile_defs td:first-child { + width: 5% !important; + white-space: nowrap; + text-align: right; } -table#profile_defs ul li:last-child { - margin-bottom: -10px; +#profile_defs td:last-child { + width: 95%; + white-space: normal; + line-height: 120%; } -#profile_defs li { - list-style: none !important; +#thresholds th, #thresholds td { + text-align: center !important; } -#profile_defs li::first-letter { +#capabilities_key td { + padding: 0 !important; +} + +#capabilities_key table { + margin: 0 !important; + border: none; + border-top: 1px solid #004; + border-bottom: 1px solid #004; +} + +#capabilities_key table td { + padding: 3px 5px !important; +} + +#capabilities_key table td:nth-child(even) { + width: 16px; +} + +#profile_defs b { text-transform: capitalize; } +#capabilities_key b { + text-transform: none !important; +} + table#profile_defs + hr { display: none; } @@ -4530,30 +4758,6 @@ body.iframed { /* end iframed console fixes */ -/* Override error log colors */ - -font[color="#006600"] { /* debug */ - color: #ebdbff; -} - -font[color="#ff00cc"] { /* warning */ - color: #0028a0; -} - -font[color="#ff3300"] { /* critical */ - color: #002cbd; -} - -font[color="#cc0000"] { /* error */ - color: #0037eb; -} - -font[color="#000099"] { /* info */ - color: #001e80; -} - -/* end log color overrides */ - /* global overrides */ h3[id*="job"] { @@ -4727,11 +4931,13 @@ div#sybilnav, div#sybils_summary { margin-bottom: 10px; } +/* sybil from dark */ + div#sybilnav { -moz-columns: 4 200px; -webkit-columns: 4 200px; columns: 4 200px; - padding: 10px 10px 0 10px; + padding: 10px; } #sybilnav li { @@ -4740,27 +4946,70 @@ div#sybilnav { -webkit-column-break-inside: avoid; } -#sybilnav ul li:last-child { - margin-bottom: -10px; -} - #sybilnav ul li { list-style: none; padding-left: 0; margin-left: 0; - width: 50px; + margin-bottom: 5px; + min-width: 110px; white-space: nowrap; + border: 1px solid #443da0; + border-radius: 2px; + background: linear-gradient(to right, #000 0%, #002 80%); + box-shadow: inset 0 0 0 1px #000; +} + +#sybilnav ul li:hover { + border: 1px solid #652787; + background: #652787; +} + +#sybilnav a { + display: inline-block; + width: 100%; +} + +#sybilnav ul li:hover a { + color: #652787; + color: #fff; +} + +#sybilnav ul li:active { + background: #39144f; +} + +#sybilnav ul li:active a { + color: #c9ceff !important; +} + +#sybilnav ul li a { + padding-right: 30%; + box-sizing: border-box; } #sybilnav ul li::before { - content: '\1F441\00A0\00A0'; +/* content: '\1F441\00A0'; */ content: url(/themes/console/images/buttons/show.png); mix-blend-mode: luminosity; - vertical-align: middle; margin-right: 5px; font-size: 16pt; + line-height: 50%; + vertical-align: middle; + padding-left: 5px; } +#sybilnav ul li:first-child { + margin-top: 0; +} + +#sybilnav ul li:last-child { + margin-bottom: -10px; + padding-bottom: 2px; +} + + +/* end sybilnav */ + table.sybil_routerinfo { margin-bottom: 10px; } @@ -5179,6 +5428,7 @@ table#configstats { #configstats td { color: #b2bcf7; + padding: 8px 4px; } #configstats td b { @@ -5188,6 +5438,7 @@ table#configstats { #configstats input.optbox { margin: 0; padding: 0; + vertical-align: middle; } #configstats tr.tablefooter td { padding: 4px 10px; @@ -5375,8 +5626,34 @@ form[action="events"] { /* responsive layout */ +@media screen and (max-width: 1200px) { +.tab, .tab2 { + padding: 1px 0 2px; + min-width: 50px !important; +} + +.tab2 { + padding: 3px 12px 4px; +} + +.tab a { + padding: 2px 14px; +} +} + +@media screen and (max-width: 1500px) { +button.control, button.control:hover, button.control:active, button.control:focus { + padding: 12px 10px !important; +} + +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { + min-height: 14px; +} +} + @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, .statusnotes, textarea, pre, tt, code, th { +body, .main, .main td, .news p, #news p, .statusnotes, textarea, th, .applabel a { font-size: 10pt !important; } @@ -5386,7 +5663,7 @@ h1 { } .main button, .main input, select { - font-size: 9pt !important; + font-size: 10pt !important; } .main, .news, h1 { @@ -5413,11 +5690,16 @@ div.routersummary img[src$="i2plogo.png"] { width: 216px !important; } -.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, .smallhead, .applabel a { +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, +#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { + min-height: 18px; +} + +.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, .smallhead, pre, tt, code { font-size: 9pt !important; } -.routersummary h3 a { +.routersummary h3 a, #netdboverview th { font-size: 11pt !important; } @@ -5429,12 +5711,12 @@ div.app { min-width: 138px; } -.applabel { - width: 134px !important; +.app:hover { + cursor: pointer; } -.themelabel { - padding: 2px; +.applabel { + width: 134px !important; } h3#i2pclientconfig, h3#pluginconfig, h3#pluginfromurl, h3#pluginfromfile, #clientconf.infohelp, h3#pluginmanage, h3#webappconfig { @@ -5445,7 +5727,7 @@ h4#updateplugins { margin-top: -15px !important; } -#profiles td:first-child, #profiles th:first-child, #floodfills td:first-child, #floodfills th:first-child { +table#profiles td:first-child, table#profiles th:first-child, #floodfills td:first-child, #floodfills th:first-child { width: 56px !important; } @@ -5456,5 +5738,130 @@ h4#updateplugins { .subheading b { font-size: 10.5pt !important; } + +#webappconfig td:first-child::after { + min-height: 30px; } + +div.joblog h3 { + margin-top: 8px !important; +} + +#sb_services a:link, #sb_internals a:link, #sb_advanced a:link { + max-width: 208px; +} + +#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { + margin-top: -6px !important; + margin-bottom: -4px !important; +} +} + +@media screen and (min-width: 1840px) { +div[id^="config_"] div.confignav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: space-evenly; + justify-content: center; + padding: 4px 4px 5px 3px !important; +} + +div[id^="config_"] .tab, div[id^="config_"] .tab2 { + flex: auto; + flex-basis: content; + flex-grow: 0.06; + margin: 0 -1px -1px 0 !important; + white-space: nowrap; + min-width: 70px !important; +} + +div[id^="config_"] .tab2 { + padding: 5px 6px; +} + +div[id^="config_"] .tab a { + padding: 4px 6px; +} + +div[id^="config_"] div.confignav { + padding: 0 !important; +} + +div[id^="config_"] .tab, div[id^="config_"] .tab2 { + margin-top: -1px !important; +} + +div[id^="config_"] .tab:first-child { + margin-left: -1px !important; +} +} + +/* responsive proxy errors */ + +@media screen and (max-width: 800px) { +.warning { + margin-left: 20px !important; + margin-top: 130px !important; + background: url(images/camotile2.png) !important; + padding: 5px 15px 15px !important; +} + +.warning h3, .warning a, .warning p { + font-size: 9pt; +} + +.logo { + position: absolute; + top: 20px; + width: calc(100% - 62px) !important; + z-index: 999; + min-width: 330px; + display: block; +} + +.logo a { + width: auto !important; + padding: 2px 5px !important; + display: inline-block !important; +} + +.logo a img { + padding: 0 !important; + margin-top: -2px; + margin-bottom: -4px; +} +} + +@media screen and (min-height: 700px) { +.proxyfooter { + position: absolute; + bottom: 0; + right: 0; + padding: 0 20px 0 0; + text-align: right; + background: #030; + width: 100%; + opacity: 0.7; + border-top: 1px solid #000; +} + +.proxyfooter p { + text-align: right; + line-height: 130% !important; + margin: 5px 0; +} + +.warning { + margin-bottom: 30px; +} +} + +@media screen and (max-height: 700px) { +.proxyfooter { + display: none; +} +} +/* end proxy errors */ + diff --git a/installer/resources/themes/console/midnight/console_big.css b/installer/resources/themes/console/midnight/console_big.css index 63f54b7ab..b4c121cf8 100644 --- a/installer/resources/themes/console/midnight/console_big.css +++ b/installer/resources/themes/console/midnight/console_big.css @@ -46,6 +46,10 @@ div.tunnels table { font-size: 11pt; } +.tab, .tab2 { + margin-right: -4px !important; +} + .themechoice { height: 82px !important; } @@ -71,4 +75,8 @@ div.joblog li i { b, div.joblog b { font-size: 110%; +} + +p, div[id^="config_"] th { + font-size: 11pt !important; } \ No newline at end of file diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index 9330d336d..1ed6fef12 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -19,10 +19,6 @@ body { background-size: 150px 150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } -tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; -} - body.iframed { margin: 1px 0 !important; background: transparent url(/themes/console/images/transparent.gif) !important; @@ -39,6 +35,20 @@ body.iframed { background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } +.page { + font-size: 9pt !important; + line-height: 160% !important; + min-width: 900px !important; + margin: 5px 0 0 0; + padding: 10px; + text-align: center; + opacity: 1; + color: #0c153d; + border: 1px solid #89f; + background: #eef; + box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset; +} + .iframed .page { margin: 5px 0; padding: 0; @@ -48,10 +58,12 @@ body.iframed { box-shadow: none; } +/* top nav */ + .snarknavbar { font-size: 11.5pt; font-weight: bold; - min-width: 820px; + min-width: 906px; margin: 0 0 -6px !important; padding: 9px 0; text-align: center; @@ -62,24 +74,14 @@ body.iframed { background: #eff2ff !important; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; box-shadow: 0 0 1px #fff; + position: sticky; + top: -1px; + z-index: 999; } .iframed .snarknavbar { margin-top: -2px !important; -} - -.snarknavbar img { - display: none; - vertical-align: top; - border: 0; -} - -.snarkRefresh:link:first-child { - padding: 5px 7px 5px 15px !important; -} - -.snarkRefresh:link:last-child { - margin-left: 3px; + position: static; } .snarkRefresh:link, .snarkRefresh:visited { @@ -87,7 +89,7 @@ body.iframed { font-size: 9pt; font-weight: bold; margin: -1px 0 !important; - padding: 5px 7px 5px 22px !important; + padding: 5px 7px 5px 23px !important; text-decoration: none !important; letter-spacing: .1em; text-transform: uppercase !important; @@ -97,10 +99,11 @@ body.iframed { border-bottom: 1px solid #aaf; border-radius: 0; background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.3); -/* filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff);*/ +} + +.snarkRefresh:link:last-child { + margin-left: 3px; } .snarkRefresh:link:first-child { @@ -111,71 +114,130 @@ body.iframed { background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); } -.snarkRefresh:link:hover, .snarkRefresh:link:focus { - color: #f60; - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.5); -} - -.snarkRefresh:link:hover:first-child, .snarkRefresh:link:focus:first-child { - background-image: url(images/button_snark_hover.png) !important; - background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; - background-repeat: no-repeat, repeat !important; - background-position: 7px center, center center !important; -} - -.snarkRefresh:link:hover:nth-child(2), .snarkRefresh:link:focus:nth-child(2) { - background-image: url(images/button_forum_hover.png) !important; - background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; -} - -.snarkRefresh:link:active { - box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555; - box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555, 0 0 0 1px rgba(100,100,100,0.5); -} - -.snarkRefresh:link:active:first-child { - text-decoration: none !important; - color: #fff !important; - border: 1px solid #fff; - background: #f50 url(images/button_snark_active.png) !important; - background-repeat: no-repeat !important; - background-position: 7px center !important; - text-shadow: none; -} - -.snarkRefresh:link:active:nth-child(2) { - background: #f50 url(images/button_forum_active.png) !important; - background-repeat: no-repeat !important; - background-position: 7px center !important; -} - .snarkRefresh:hover, .snarkRefresh:focus { - font-size: 9pt; - font-weight: bold; - text-decoration: none !important; - text-transform: uppercase !important; - opacity: 1; color: #f50; border: 1px solid #f50; border-radius: 0; background: #fff !important; - background-image: url(images/button_tracker_hover.png) !important; - background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; - background-repeat: no-repeat, repeat !important; - background-position: 7px center, center center !important; - box-shadow: inset 0 0 1px #f50; + 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; + box-shadow: inset 0 0 0 1px #fff; +} + +.snarkRefresh:first-child:hover, .snarkRefresh:first-child: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; +} + +.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):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; } .snarkRefresh:active { text-decoration: none !important; color: #fff !important; - border: 1px solid #fff; - background: #f50 url(images/button_tracker_active.png) !important; - background-repeat: no-repeat !important; - background-position: 7px center !important; + border: 1px solid #aaa; + background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important; + text-shadow: none; + box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 3px #824b1b !important; +} + +.snarkRefresh:active:first-child { + text-decoration: none !important; + color: #fff !important; + border: 1px solid #aaa; + background: url(images/button_snark_active.png) 7px center no-repeat #f50 !important; text-shadow: none; } +.snarkRefresh:active:nth-child(2) { + border: 1px solid #aaa; + background: url(images/button_forum_active.png) 7px center no-repeat #f50 !important; +} + +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus, .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { + background-size: 16px 16px, 100% 100% !important; +} + +/* end top nav */ + +/* screenlog */ + +.snarkMessages { + overflow: auto; + width: auto; + height: 53px; + margin: 0; + padding: 3px 5px; + text-align: left; + color: #003; + 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, #e3e3ff, #ddf); + box-shadow: inset 0 0 0 1px #ddf; +} + +.snarkMessages ul { + margin: -2px 0 2px 0; + padding: 0 0 0 14px; + list-style: none; +} + +.snarkMessages li { + margin-left: -15px; + font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; +} + +.snarkMessages li::before { + content: ""; + display: inline-block; + background: url(images/bullet.png) left bottom no-repeat; + width: 13px; + height: 11px; + background-size: 9px 9px; +} + +.snarkMessages a:link, +.snarkMessages a:visited { + color: #55f !important; + font-weight: bold; +} + +.snarkMessages a:hover, +.snarkMessages a:focus { + color: #f60 !important; +} + +.snarkMessages img { + width: 8px; + padding: 2px; + background: #fff; + opacity: 0.7 !important; +} + +.snarkMessages img:hover, +.snarkMessages img:focus { + opacity: 1 !important; +} + +.snarkMessages img, +.snarkMessages img:hover { + position: sticky; + top: -3px; + float: right; + margin: -3px -5px 4px 4px; + opacity: 1; + border: 1px solid #89f; + border-top: none; +} + +.logshim { + margin-top: 1px !important; +} + +/* end screenlog */ + .ParentDir { font-size: 8pt; padding: 4px 0; @@ -236,7 +298,10 @@ body.iframed { .snarkTorrents th br { display: none; - /* kill double height button display */ +} + +#totals { + margin-left: 3px; } .snarkTorrents tfoot th:nth-child(2) { @@ -283,86 +348,8 @@ table.snarkTorrents { text-align: center !important; } -.snarkMessages { - font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - overflow: auto; - width: auto; - height: 53px; - margin: 0; - padding: 3px 5px; - text-align: left; - color: #003; - border-bottom: 1px solid #89f; - background: #ddf url(images/hat.png) bottom right no-repeat; - background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #dedeff, #ddf); - box-shadow: inset 0 0 0 1px #efefff; -} - -.snarkMessages a:link, -.snarkMessages a:visited { - color: #55f !important; -} - -.snarkMessages a:hover, -.snarkMessages a:focus { - color: #f60 !important; -} - -.snarkMessages ul { - margin: -2px 0 2px 0; - padding: 0 0 0 14px; - list-style: none; -} - -.snarkMessages li { - margin-left: -15px; -} - -.snarkMessages li::before { - content: ''; - display: inline-block; - background: url(images/bullet.png) left bottom no-repeat; - width: 13px; - height: 11px; - background-size: 9px 9px; -} - -.snarkMessages p { - font-style: italic; - margin: 0; - text-align: right; -} - -.snarkMessages img { - width: 8px; - padding: 2px; - background: #fff; - opacity: 0.7 !important; -} - -.snarkMessages img:hover, -.snarkMessages img:focus { - opacity: 1 !important; - filter: drop-shadow(0 0 1px #f90); -} - -.snarkMessages img, -.snarkMessages img:hover { - position: sticky; - top: -3px; - float: right; - margin: -3px -5px 4px 4px; - opacity: 1; - border: 1px solid #89f; - border-top: none; -} - -.logshim { - margin-top: -10px !important; -} - pre { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold !important; width: 100%; height: 8px; @@ -386,8 +373,7 @@ tr { opacity: 1; } -thead, -tfoot { +thead, tfoot { background: #fff; } @@ -464,6 +450,8 @@ tfoot tr:nth-child(n+1) { vertical-align: middle; } +/* torrent display */ + .snarkTorrents { margin: 0; border: 1px solid #101; @@ -569,6 +557,10 @@ table.snarkTorrents { padding: 0 !important; } +tt { + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; +} + .snarkTorrents tt { font-size: 8pt; color: #301; @@ -587,6 +579,10 @@ table.snarkTorrents { margin-left: 3px; } +/* end torrent display */ + +/* torrent info */ + .snarkTorrentInfo img { max-height: 16px !important; margin: 1px 0 1px 2px !important; @@ -639,7 +635,7 @@ table.snarkTorrents { table.SnarkTorrentInfo { margin-bottom: 1px !important; border-bottom: 1px solid #89f; - background: url("../../console/classic/images/bg0.png") repeat scroll center bottom #eef; + background: #eef; } .snarkTorrentInfo tr:nth-child(even) { @@ -660,6 +656,10 @@ table.SnarkTorrentInfo { text-align: left; } +/* end torrent info */ + +/* torrent directory */ + table.SnarkDirInfo { margin-top: 10px !important; margin-bottom: 0; @@ -697,6 +697,7 @@ table.SnarkDirInfo { .snarkDirInfo td:first-child { padding-left: 4px; + padding-right: 2px; text-align: left; } @@ -739,8 +740,7 @@ table.SnarkDirInfo img { vertical-align: middle; } -td.subHeaderPriority, -td.priority { +td.subHeaderPriority, td.priority { width: 0; min-width: 36px !important; padding: 0 5px 0 0 !important; @@ -804,6 +804,8 @@ td.snarkFileStatusIcon { text-align: center; } +/* end torrent directory */ + td { font-size: 9pt; padding: 1px; @@ -834,6 +836,8 @@ td:first-child { font-weight: bold !important; } +/* torrent control buttons */ + .snarkTorrentAction { margin: 0 !important; padding: 1px 1px 1px 1px !important; @@ -857,8 +861,8 @@ td:first-child { border-radius: 2px; border: 1px solid #89f !important; margin: 2px 1px; - filter: drop-shadow(0 0 1px #aaa); - -webkit-filter: drop-shadow(0 0 1px #aaa); + filter: drop-shadow(0 0 1px #bbb); + -webkit-filter: drop-shadow(0 0 1px #bbb); height: 10px; } @@ -892,6 +896,8 @@ td.snarkTorrentAction { white-space: nowrap; } +/* end torrent control buttons */ + .snarkTorrentNoneLoaded { font-size: 8.5pt; font-weight: bold; @@ -960,24 +966,6 @@ td.snarkTorrentDownloaded { padding: 0 5px; } -/* -.snarkTorrentDownloaded { - color: #0c153d !important; -} - -.snarkTorrentUploaded { - color: #0c153d !important; -} - -.snarkTorrentRateUp { - color: #0c153d !important; -} - -.snarkTorrentRateDown { - color: #0c153d !important; -} -*/ - .snarkTorrents img { padding: 4px 3px !important; } @@ -997,6 +985,7 @@ td.snarkTorrentDownloaded { background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important; } +/* .snarkTorrents tr:hover td, .snarkDirInfo tr:hover td { color: #0c153d; @@ -1006,16 +995,7 @@ td.snarkTorrentDownloaded { .snarkDirInfo tr:hover a { color: #006; } - -.snarkTorrents a:hover, -td[onclick^="document.location"]:hover a, -.snarkDirInfo a:hover { - color: #f40 !important; -} - -td[onclick^="document.location"]:hover { - cursor: pointer !important; -} +*/ .snarkTorrentEven { background: #eef; @@ -1120,7 +1100,6 @@ div.percentBarInner.percentBarComplete { width: 80px; } - .percentBarText{ text-align: center; font-weight: bold; @@ -1128,7 +1107,6 @@ div.percentBarInner.percentBarComplete { text-shadow: 0 1px 1px #000; } - .snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { width: 110px !important; word-spacing: -0.2em; @@ -1147,12 +1125,17 @@ div.percentBarInner.percentBarComplete { .thumb { transition: ease all 0.3s 0s; + border: 1px solid #aaa; } .thumb:hover { max-width: 96px; max-height: 64px; transition: ease all 0.3s 0s; + margin: 4px 4px 4px 0 !important; + filter: none !important; + -webkit-filter: none !important; + border: 1px solid #f60; } .snarkNewTorrent { @@ -1171,7 +1154,7 @@ div.percentBarInner.percentBarComplete { } .snarkConfigTitle:active, label.toggleview:active { - box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #777; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999; } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { @@ -1181,15 +1164,21 @@ div.percentBarInner.percentBarComplete { display: inline-block; min-width: 200px; margin: 0 0 -4px !important; - padding: 3px 25px 4px 22px; + vertical-align: middle; + padding: 4px 25px; letter-spacing: .08em; border: 1px solid #89f; border-top: none; - background: #fff url("../../console/dark/images/header.png") repeat-x scroll center center !important; + 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 #bbb); - -webkit-filter: drop-shadow(0 1px 1px #bbb); + filter: drop-shadow(0 1px 1px #ddd); + -webkit-filter: drop-shadow(0 1px 1px rgba(221,221,221,0.7)); +} + +.snarkConfigTitle a { + display: inline-block; + width: 100%; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -1231,23 +1220,13 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo padding-top: 0; } -.snarkConfig i { +#bwHelp i { padding-left: 5px; } -.page { - font-size: 9pt !important; - line-height: 160% !important; - min-width: 900px !important; - margin: 5px 0 0 0; - padding: 10px; - text-align: center; - opacity: 1; - color: #0c153d; - border: 1px solid #89f; - background: #eef; - box-shadow: 0 0 3px 0 #bbb inset; - box-shadow: inset 0 0 0 1px #eef, 0 0 5px 1px #cfcfff inset; +#bwHelp a { + font-style: normal; + font-weight: bold; } form { @@ -1274,6 +1253,10 @@ hr.debug { background: linear-gradient(to right, #89f 40%, #eef); } +hr.debug + hr { + margin-bottom: -5px; +} + hr.debug:nth-child(n+7) { margin: -10px 0 3px; } @@ -1301,13 +1284,13 @@ a:visited { a:hover, a:focus { font-weight: normal; - color: #f60; + color: #f60 !important; outline: none; } a:active { font-weight: normal; - color: #f93; + color: #f93 !important; } input { @@ -1348,7 +1331,8 @@ input[type=image], thead img { } input[type="image"], a img { - filter: drop-shadow(0 0 1px #777); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { @@ -1373,8 +1357,8 @@ input[type="submit"], input[type="reset"], a.control { background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #ccc); - -webkit-filter: drop-shadow(0 0 1px #ccc); + filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.8)); + -webkit-filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.8)); cursor: pointer !important; } @@ -1430,28 +1414,6 @@ a.control img { margin: 5px 0 2px; } -/* -.snarkTorrents th:nth-child(6) a img[src$="head_rx.png"]:hover { - opacity: 0.5; - filter: saturate(200%) drop-shadow(0 0 2px #f90) !important; -} - - -.snarkTorrents th:nth-child(6):hover { - background: url(images/head_rx_hover.png) center center no-repeat, linear-gradient(to bottom, #010, #000); -} - -*/ -/* -.snarkTorrents th:last-child input[type="image"], -.snarkTorrents td:last-child input[type="image"] { - border: 1px solid #fff !important; - border-radius: 2px; - box-shadow: inset 0 0 1px 3px #fff; - filter: hue-rotate(22deg) drop-shadow(0 0 1px #777); -} -*/ - input.r { text-align: right; border: 1px solid #89f; @@ -1532,6 +1494,13 @@ input[type="checkbox"], input[type="radio"] { background: none; } +.optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus { + -webkit-filter: drop-shadow(0 0 2px #89f); + filter: drop-shadow(0 0 2px #89f); + border: 0; + outline: none; +} + input.default { visibility: hidden; width: 1px; @@ -1622,7 +1591,8 @@ img { vertical-align: middle; opacity: 1.0; border: none; - filter: drop-shadow(0 0 1px #777); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } img:hover { @@ -1873,91 +1843,65 @@ table.trackerconfig td:first-child { border: none !important; } -div.section, div.mainsection div.section, div.mainsection { +/* section panels */ + +.mainsection, .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { + 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; +} + +.mainsection { margin: 0; padding: 0; - text-align: center; - word-wrap: break-word; - opacity: 1 !important; - color: #0c153d; - border: 1px solid #89f; border-bottom: none; - background: #fff; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); + background: repeating-linear-gradient(to right, #ddf 2px, #eef 2px, #ddf 4px); } -div.newtorrentsection { +.newtorrentsection { margin: 0 0 10px 0; - padding: 0 10px 0 10px; - text-align: center; - word-wrap: break-word; - opacity: 1.0; - color: #0c153d; - border: 1px solid #89f; + padding: 0 10px; background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #fff 0%, #eef 100%); background-size: 68px 68px, 100% 100%; - box-shadow: inset 0 0 3px 0 #bbb; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); } -div.addtorrentsection { +.addtorrentsection { margin: 10px 0; padding: 0 10px; - text-align: center; - word-wrap: break-word; - opacity: 1.0; - color: #0c153d; - border: 1px solid #89f; background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #fff 0%, #eef 100%); background-size: 61px 61px, 100% 100%; - box-shadow: 0 0 1px #fff; - box-shadow: inset 0 0 3px 0 #bbb; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); } -.addtorrentsection table, .newtorrentsection table { - margin-top: -5px; -} - -div.configsection { - font-weight: bold; +.configsection { margin: 0; padding: 0 10px 12px 10px; - text-align: center; - word-wrap: break-word; - color: #0c153d; - border: 1px solid #89f; - background: #fff; background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #fff 0%, #eef 100%); background-size: 68px 68px, 100% 100%; - box-shadow: inset 0 0 3px 0 #bbb; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); } .iframed .configsection { filter: none; + -webkit-filter: none; } -div.configsectionpanel { - font-weight: bold; +.configsectionpanel { margin: 9px 0 0 0; padding: 0; - text-align: center; - word-wrap: break-word; - color: #0c153d; - border: 1px solid #89f; background: linear-gradient(to bottom, #fff 0%, #eef 40px, #fff 100%); - box-shadow: inset 0 0 3px 0 #bbb; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); } .iframed .configsectionpanel { filter: none; + -webkit-filter: none; +} + +/* end panels */ + +.addtorrentsection table, .newtorrentsection table { + margin-top: -5px; } .configsection .snarkConfig { @@ -1984,9 +1928,7 @@ div.configsection a:hover { } code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; - font-size: 9pt; - font-weight: bold; + font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; padding: 0 2px; color: #050; } @@ -2077,11 +2019,18 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transition: ease transform 0.3s 0s; } - .peerinfo td:first-child { background: url(images/peer.png) center center no-repeat; } +.peerinfo td:first-child::after { + content: ""; + display: inline-block; + box-sizing: border-box; + vertical-align: middle !important; + min-height: 24px !important; +} + /* debug */ .debuginfo td:first-child { @@ -2102,7 +2051,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac .debugConnStat { margin-right: 4px; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #030; font-weight: bold; white-space: nowrap; @@ -2114,7 +2063,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac } .debugRequests { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #030; font-weight: bold; } @@ -2323,12 +2272,16 @@ body { } .page { - padding: 3px; + padding: 4px; +} + +.logshim { + margin-top: -5px !important; } .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel { - margin-top: 3px !important; - margin-bottom: 3px !important; + margin-top: 4px !important; + margin-bottom: 4px !important; } .configsection, .configsectionpanel:last-child { @@ -2336,7 +2289,7 @@ body { } table.SnarkDirInfo { - margin-top: 3px !important; + margin-top: 4px !important; } .dirInfoComplete { @@ -2349,10 +2302,24 @@ table.SnarkDirInfo { padding-top: 5px; padding-bottom: 5px; } + +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { + background-size: 14px 14px, 100% 100% !important; +} + +.snarkRefresh:link:first-child { + padding-left: 22px !important; +} +} + +@media screen and (max-width: 1400px) { +.snarkRefresh:link:first-child { + padding-left: 23px !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, code { +body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkMessages li { font-size: 9pt !important; } @@ -2370,8 +2337,8 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ font-size: 11pt !important; } -.snarkRefresh:link:first-child { - padding-left: 13px !important; +.snarkRefresh:link { + padding-left: 25px !important; } .snarkMessages li, .snarkTorrents tt { @@ -2398,8 +2365,7 @@ td.snarkTorrentDownloaded { #configs td:first-child { min-width: 220px !important; - } - -/* end resonsive layout */ +} +/* end responsive layout */ diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index 772ee3833..aac26fa54 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -4,7 +4,7 @@ body { margin: 9px 8px; color: #ee9; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; background: #000; background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left; background-size: 3px 3px, 175px 175px; @@ -40,6 +40,19 @@ body.iframed { background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } +.page { + color: #310; + min-width: 960px !important; + margin: 5px 0 0 0; + font-size: 9pt !important; + line-height: 160% !important; + text-align: center; + opacity: 1; + background: #000; + background: repeating-linear-gradient(135deg, #010 0px, #010 10px, #020 10px, #020 20px, #010 20px) !important; + box-shadow: inset 0 0 0 1px #000 !important; +} + .iframed .page { border: none; background: none; @@ -60,17 +73,14 @@ body.iframed { color: white; } +/* topnav */ + .snarknavbar { margin: 0 0 -6px !important; - padding: 8px 0; - background: none !important; - background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%) !important; - text-transform: uppercase !important; - letter-spacing: 0em !important; - font-weight: bold; - font-size: 11.5pt; - color: #000; - min-width: 820px; + padding: 9px 0 8px; + background: #010 !important; + background-image: linear-gradient(to bottom, #001000 0%, #001900 51%, #000 51%, #000 100%) !important; + min-width: 958px; text-align: center; border: 1px solid #494; } @@ -79,20 +89,9 @@ body.iframed { margin-top: -2px !important; } -.snarknavbar img { - border: 0; - vertical-align: top; - display: none; -} - .snarkRefresh:link, .snarkRefresh:visited { - text-decoration: none !important; - text-transform: uppercase !important; padding: 5px 7px 5px 22px !important; margin: 0 -1px !important; - letter-spacing: 0.1em; - font-weight: bold; - font-size: 9pt; color: #3f3; text-shadow: 0 0 1px #000; background: url(images/button_tracker.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; @@ -100,10 +99,8 @@ body.iframed { border-radius: 0; border: 1px solid #494; box-shadow: inset 0 0 0 1px #000; - opacity: 0.85; filter: drop-shadow(0 0 1px #000); -webkit-filter: drop-shadow(0 0 1px #000); - display: inline-block; } .snarkRefresh:link:last-child { @@ -112,7 +109,7 @@ body.iframed { .snarkRefresh:link:first-child { border-radius: 2px 0 0 2px; - padding: 5px 7px 5px 15px !important; + padding-left: 24px !important; background: url(images/button_snark.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important; } @@ -122,45 +119,30 @@ body.iframed { background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important; } -.snarkRefresh:active { - color: #fff !important; - box-shadow: inset 3px 2px 3px #000 !important; -} - -.snarkRefresh:link:first-child:hover, .snarkRefresh:link:first-child:focus { +.snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child { background-image: url(images/button_snark_hover.png), url(../ubergine/images/snarknav_on.png) !important; background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; - background-position: 7px center, center center !important; - background-repeat: no-repeat, repeat !important; } -.snarkRefresh:link:hover:nth-child(2), .snarkRefresh:link:focus:nth-child(2) { +.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { background-image: url(images/button_forum_hover.png), url(../ubergine/images/snarknav_on.png) !important; background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; } -#refresh:active, .snarkRefresh:link:active:first-child { +.snarkRefresh:active, .snarkRefresh:active:first-child { background: #f50 url(images/button_snark_active.png) !important; - background-position: 7px center !important; - background-repeat: no-repeat !important; - text-decoration: none !important; - color: #fff; + box-shadow: inset 3px 2px 3px #000 !important; + color: #fff !important; border: 1px solid #fff; box-shadow: none; text-shadow: none; } -.snarkRefresh:link:active:nth-child(2) { +.snarkRefresh:active:nth-child(2) { background: #f50 url(images/button_forum_active.png) !important; - background-position: 7px center !important; - background-repeat: no-repeat !important; } .snarkRefresh:hover, .snarkRefresh:focus { - text-decoration: none !important; - text-transform: uppercase !important; - font-weight: bold; - font-size: 9pt; color: #f50; background: #000 !important; border-radius: 0; @@ -169,15 +151,10 @@ body.iframed { opacity: 1; background-image: url(images/button_tracker_hover.png), url(../ubergine/images/snarknav_on.png) !important; background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; - background-position: 7px center, center center !important; - background-repeat: no-repeat, repeat !important; } .snarkRefresh:active { background: #f50 url(images/button_tracker_active.png) !important; - background-position: 7px center !important; - background-repeat: no-repeat !important; - text-decoration: none !important; color: #fff; border: 1px solid #fff; box-shadow: inset 3px 3px 3px #000 !important; @@ -195,12 +172,30 @@ body.iframed { .snarkRefresh:last-child { border-radius: 0 2px 2px 0 !important; - } +} .iframed .snarkRefresh:last-child[href="/i2psnark/"] { margin-top: 0 !important; } +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, +.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, +.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { + letter-spacing: 0.1em; + font-weight: bold; + font-size: 9pt; + text-decoration: none !important; + text-transform: uppercase !important; + background-size: 14px auto, 100% 100% !important; + background-position: 7px center !important; + background-repeat: no-repeat, repeat !important; + display: inline-block; +} + +/* end topnav */ + +/* screenlog */ + .snarkMessages { font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; line-height: 120%; @@ -254,12 +249,6 @@ _:-ms-lang(x), .snarkMessages { -webkit-filter: drop-shadow(0 0 1px #000); } -.snarkMessages p { - font-style: italic; - margin: 0; - text-align: right; -} - .snarkMessages img { float: right; margin: -4px -5px 4px 4px; @@ -281,6 +270,8 @@ _:-ms-lang(x), .snarkMessages { border-top: 0 none; } +/* end screenlog */ + tt { font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } @@ -547,36 +538,6 @@ table.SnarkTorrents { .snarkTorrentInfo input[type="submit"] { min-width: 85px; } -/* -.snarkTorrentInfo input.stoptorrent { - margin-right: -8px; -} - -table.snarkTorrentInfo tr:nth-last-child(2) { - border-top: 1px solid #494; -} - -.snarkTorrentInfo tr:nth-last-child(2) td { - padding: 2px 4px 4px !important; - vertical-align: middle; -} - -table.snarkTorrentInfo tr:last-child { - border-top: 1px solid #494 !important; - background: none; -} - -table.snarkTorrentInfo tr:last-child b { - float: left; - margin-left: -4px; -} - -table.snarkTorrentInfo tr:last-child td { - text-align: right !important; - padding: 8px 8px 12px !important; - padding: 5px 5px 9px !important; -} -*/ #torrentInfoControl, #setPriority { border-top: 1px solid #494 !important; @@ -894,8 +855,6 @@ td.snarkTorrentDownloaded { .snarkTorrents tr:hover, .snarkDirInfo tr:hover { background: #030 !important; box-shadow: inset 0 0 1px 0 #494; -/* transition: all 0.3s ease 0s; - transition-delay: 0.15s; */ } /* MS Edge 14+ fix */ @@ -938,7 +897,7 @@ td[onclick^="document.location"]:hover { } .snarkTorrentOdd, .SnarkTorrentEven { - border-bottom: 1px solid #000 !important; + border-bottom: 1px inset #000 !important; } .snarkTorrentOdd { @@ -1106,6 +1065,24 @@ div.percentBarInner.percentBarComplete { text-shadow: 0 0 1px #000 !important; } +.snarkConfigTitle a { + display: inline-block; + width: 100%; +} + +.snarkConfigTitle:hover, .toggleview:hover { + background: #000 !important; + background: linear-gradient(to bottom, #001000 50%, #000 50%) !important; +} + +.snarkConfigTitle:hover a { + color: #f60 !important; +} + +.snarkConfigTitle:active, .toggleview:active { + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #000; +} + .snarkConfigTitle img, .toggleview img { margin-right: -2px; margin-bottom: 2px; @@ -1126,6 +1103,28 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transition: ease transform 0.3s 0s; } +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + margin: -1px -1px -14px !important; + display: block; + text-align: left; + 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; + border-top: 1px solid #494; + padding: 8px; + text-transform: uppercase; + font-variant: normal; + font-size: 10.5pt !important; + filter: none; + -webkit-filter: none; + box-shadow: inset 0 0 0 1px #000; +} + +.iframed .configsectionpanel .snarkConfigTitle { + margin: -1px 0 -14px !important; + border-left: none !important; + border-right: none !important; +} + .snarkConfig { font-size: 10pt; width: 100%; @@ -1135,17 +1134,6 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac padding-left: 5px; } -.page { - color: #310; - min-width: 960px !important; - margin: 5px 0 0 0; - font-size: 9pt !important; - line-height: 160% !important; - text-align: center; - opacity: 1; - background: #000; -} - form { margin-bottom: 0; } @@ -1189,7 +1177,6 @@ hr.debug:last-child { a:link { color: #7c7; text-decoration: none; - font-weight: normal; word-wrap: break-word; border-radius: 0; outline: none; @@ -1198,17 +1185,14 @@ a:link { a:visited { color: #393; text-decoration: none; - font-weight: normal; } a:hover, a:focus { color: #f60 !important; - font-weight: normal; } -a:active { - color: #f90; - font-weight: normal; +a:active, .snarkTorrents td a:active { + color: #f90 !important; } input { @@ -1219,7 +1203,7 @@ input { background: #000; color: #494; margin: 2px 4px 2px 0; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; cursor: pointer; } @@ -1253,7 +1237,7 @@ input[type=submit], input[type=submit]:visited, input.disabled:hover { background: #000; border: 1px outset #191; padding: 5px 10px !important; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; min-width: 95px; text-align: center; filter: drop-shadow(0 0 1px #000); @@ -1303,17 +1287,6 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { outline: none; } -/* -.snarkTorrents th:nth-child(6) a img[src$="head_rx.png"]:hover { - opacity: 0.5; - filter: saturate(200%) drop-shadow(0 0 2px #f90) !important; -} - -.snarkTorrents th:nth-child(6):hover { - background: url(images/head_rx_hover.png) center center no-repeat, linear-gradient(to bottom, #010, #000); -} -*/ - .snarkTorrents th:last-child, .snarkTorrents td:last-child { white-space: nowrap; } @@ -1348,7 +1321,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { color: #bb7; - padding: 4px 3px !important; + padding: 4px 5px !important; background: #000; background: linear-gradient(to bottom, #000 0%, #010 100%); box-shadow: inset 0 0 3px 3px #000; @@ -1377,23 +1350,20 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { overflow: hidden; } +.configsectionpanel input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"], #configs select { + margin-top: 4px; + margin-bottom: 4px; +} + thead img, thead img:hover { opacity: 0.8; max-height: 20px !important; } input[type=image], th a:link img, th a:visited img { -/* border: 1px solid #000 !important; */ -/* border-radius: 3px; */ opacity: 1; } -input[type=image]:hover, th a:hover img { -/* border: 1px solid #f90 !important;*/ -/* border-radius: 4px; */ -/* transition: all 0.3s ease 0s; */ -} - input[type=text], input.r { min-width: 100px; } @@ -1437,7 +1407,7 @@ select { -moz-appearance: none; -webkit-appearance: none; color: #494; - font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; padding: 2px 16px 2px 2px; border-radius: 2px; @@ -1471,11 +1441,11 @@ select:hover, select:focus, select:active { background: #000 url(images/dropdown_hover.png) right center no-repeat !important; } -/* -select:nth-child(2) { - margin-left: -18px; +@media screen and (-webkit-min-device-pixel-ratio: 0) { +select { + padding: 4px 16px 4px 4px; +} } -*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { select { @@ -1856,7 +1826,7 @@ table.trackerconfig td:first-child { text-align: center; background: #000 url(images/configuration.png) no-repeat scroll right center; font-weight: bold; - background: 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: 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; } .mainsection + form > .configsectionpanel:first-child { @@ -2021,7 +1991,7 @@ label.toggleview, .snarkConfigTitle a:visited { } .debugConnStat b { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; color: #cc7; } @@ -2060,6 +2030,12 @@ label.toggleview, .snarkConfigTitle a:visited { vertical-align: middle; } + +#bwHelp a { + font-style: normal; + font-weight: bold; +} + #configs td:nth-child(2) { white-space: nowrap; } @@ -2208,6 +2184,10 @@ b.alwaysShow { } @media screen and (max-width: 1200px) { +.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { + font-size: 11pt !important; +} + .dirInfoComplete { display: none; } @@ -2226,10 +2206,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty font-size: 9pt !important; } -.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { - font-size: 11pt !important; -} - .snarkTorrents td { padding-top: 3px !important; padding-bottom: 3px !important; @@ -2250,6 +2226,10 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } @media screen and (min-width: 1200px) { +.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { + font-size: 12pt !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2263,6 +2243,16 @@ td#bwHelp a { white-space: nowrap; margin-left: 4px; } + +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + font-size: 11pt !important; +} + +.snarknavbar { + position: sticky; + top: -1px; + z-index: 999; +} } @media screen and (min-width: 1400px) { @@ -2283,8 +2273,15 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty padding-top: 4px; } +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, +.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, +.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { + background-size: 16px auto, 100% 100% !important; + padding-left: 24px !important; +} + .snarkRefresh:link:first-child { - padding-left: 13px !important; + padding-left: 25px !important; } tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a { @@ -2298,6 +2295,8 @@ select { textarea[name="i2cpOpts"] { height: 26px; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-weight: bold; } .snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] { @@ -2336,6 +2335,33 @@ textarea[name="i2cpOpts"] { .snarkTorrentStatus b { margin-right: 4px; } + +.snarkMessages { + margin: -11px -11px 0; +} + +.iframed .snarkMessages { + margin: 0; + position: static; +} + +.addtorrentsection { + margin-top: 10px; +} + +.configsection { + margin-bottom: -11px; +} + +.addtorrentsection, .newtorrentsection, .configsection { + margin-left: -11px; + margin-right: -11px; +} + +.iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection { + margin-left: 0; + margin-right: 0; +} } /* end responsive layout */ diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index ade4cf226..3e5baab4b 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -60,11 +60,10 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 1px solid #7778bf; font-size: 9pt !important; line-height: 160% !important; - box-shadow: 0 0 1px #fff; text-align: center; opacity: 1; background: #fff; - background: linear-gradient(to right, #fff 0%, #dfe0ff, #fff 100%) #eef; + background: linear-gradient(to right, #fff, #dfe0ff, #fff) #eef; background-size: 3px auto; } @@ -75,17 +74,22 @@ button::-moz-focus-inner, input::-moz-focus-inner { border-right: none; } +/* top navigation */ + .snarknavbar { margin: 0 auto -6px !important; padding: 8px 10px; border: 1px solid #7778bf; - box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff; border-radius: 2px 2px 0 0; min-width: 880px; width: auto; width: calc(100% - 22px); text-align: center; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); + background: linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); + position: sticky; + top: -1px; + z-index: 999; } .iframed .snarknavbar { @@ -94,10 +98,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: none; border-bottom: 1px solid #7778bf; box-shadow: none; -} - -.snarkRefresh img { - display: none; + position: static; } .snarkRefresh:link,.snarkRefresh:visited { @@ -110,29 +111,27 @@ button::-moz-focus-inner, input::-moz-focus-inner { font-size: 9pt; color: #559; 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 0%, #fff 50%, #eef 51%, #eef 100%); + background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); border-radius: 0; border: 1px solid #7778bf; box-shadow: inset 0 0 0 1px #fff; display: inline-block; outline: none; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } .snarkRefresh:hover, .snarkRefresh:focus { - text-decoration: none !important; color: #f60; background: #eef url(images/button_tracker_hover.png) 8px center no-repeat; - background: url(images/button_tracker_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%); + background: url(images/button_tracker_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); border-radius: 0; box-shadow: inset 0 0 0 1px #fff; } .snarkRefresh:active { - text-decoration: none !important; background: #f60 url(images/button_tracker_active.png) 8px center no-repeat; - color: #eee !important; + color: #fff !important; box-shadow: inset 3px 3px 3px #333; box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333; } @@ -142,15 +141,15 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .snarkRefresh:first-child { - padding: 4px 10px 4px 19px !important; +/* padding: 4px 10px 4px 19px !important;*/ border-radius: 2px 0 0 2px; background: #fff url(images/button_snark.png) 10px center no-repeat; - background: url(images/button_snark.png) 10px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); + background: url(images/button_snark.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } .snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { background: #eef url(images/button_snark_hover.png) 10px center no-repeat; - background: url(images/button_snark_hover.png) 10px center no-repeat, linear-gradient(#fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%); + background: url(images/button_snark_hover.png) 10px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); color: #f60; } @@ -158,26 +157,14 @@ button::-moz-focus-inner, input::-moz-focus-inner { background: #f60 url(images/button_snark_active.png) 10px center no-repeat; } -.snarkRefresh img { - border: 0; - margin: -2px -7px 0 -6px !important; - padding: 0 !important; - filter: none; - -webkit-filter: none; -} - -.snarkRefresh:first-child:hover img, .snarkRefresh:first-child:focus img { - visibility: hidden; -} - .snarkRefresh:nth-child(2) { 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 0%, #fff 50%, #eef 51%, #eef 100%); + background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } .snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { background: #eef url(images/button_forum_hover.png) 8px center no-repeat; - background: url(images/button_forum_hover.png) 8px center no-repeat, linear-gradient(#fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%); + background: url(images/button_forum_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); } .snarkRefresh:nth-child(2):active { @@ -189,9 +176,20 @@ button::-moz-focus-inner, input::-moz-focus-inner { border-radius: 2px; } +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, +.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, +.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { + background-size: 14px auto, 100% 100% !important; +} + +/* end top nav */ + +/* screenlog */ + .snarkMessages { font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; font-size: 8pt; + font-weight: bold; text-align: left; margin: -2px 0 0; padding: 3px 5px 3px 5px; @@ -202,7 +200,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { width: auto; min-width: 810px; background: #eef url(images/kitty.png) no-repeat scroll right bottom; - background: url('images/kitty.png') no-repeat right center, linear-gradient(to bottom, #fff, #eef); + background: url(images/kitty.png) no-repeat right center, linear-gradient(to bottom, #fff, #eef); border-top: 1px solid #7778bf; border-bottom: 1px solid #7778bf; box-shadow: inset 0 0 1px #fff; @@ -238,12 +236,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { background-size: 9px 9px; } -.snarkMessages p { - font-style: italic; - margin: 0; - text-align: right; -} - .snarkMessages img { float: right; margin: -4px -5px 4px 4px; @@ -266,20 +258,21 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .logshim { - margin-top: 11px !important; + margin-top: 11px !important; } +/* end screenlog */ a:link { - color: #359; + color: #3b6bbf; text-decoration: none; - font-weight: normal; + font-weight: bold; word-wrap: break-word; font-size: 9pt; } a:visited { - color: #218; + color: #2c4e8f; text-decoration: none; } @@ -316,18 +309,6 @@ tr { opacity: 1; } -td[onclick] { - cursor: pointer; -} - -td[onclick]:hover a { - color: #f60; -} - -td[onclick]:active a { - color: #f30; -} - thead, tfoot { background: #fff; } @@ -343,6 +324,7 @@ th { border-bottom: 1px solid #7778bf; background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); + background: linear-gradient(to bottom, #fff 50%, rgba(240,240,255,1)); color: #31334f; } @@ -356,14 +338,6 @@ tfoot td:first-child { padding-left: 0; } -th:first-child img { - margin: 1px -2px 3px 1px !important; -} - -th:nth-child(2) img { - margin: 1px 7px 3px 2px !important; -} - tfoot th { padding-bottom: 4px !important; } @@ -450,11 +424,11 @@ tfoot tr:nth-child(n+1) { text-align: left; } -.snarkTorrents thead th:nth-child(3) { +.snarkTorrents thead th:nth-child(3), .snarkTorrents thead th:nth-child(7) { text-align: right !important; } -.snarkTorrents thead th:nth-child(6), .snarkTorrents thead th:nth-child(7) { +.snarkTorrents thead th:nth-child(6) { text-align: center !important; } @@ -462,8 +436,11 @@ tfoot tr:nth-child(n+1) { line-height: 110%; } -.snarkTorrents td:nth-child(1) { +.snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) { width: 20px !important; +} + +.snarkTorrents td:nth-child(1) { text-align: left; padding: 2px; } @@ -544,6 +521,11 @@ td:first-child { line-height: 90%; } +.snarkTorrentName a, .snarkFileName a { + display: inline-block; + width: 100%; +} + .snarkTorrentAction { text-shadow: 1px 1px #550000; padding: 2px 1px !important; @@ -600,6 +582,7 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrentEven { font-size: 8pt; background: #eef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); } .snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover { @@ -614,11 +597,6 @@ _:-ms-lang(x), .snarkTorrentAction { color: #272e3f !important; } -.snarkTorrentStatus { - padding: 2px 2px 2px 0; - line-height: 90%; -} - .snarkTorrentStatus a:visited { color: #559; } @@ -647,6 +625,11 @@ _:-ms-lang(x), .snarkTorrentAction { line-height: 90%; } +.snarkTorrentUploaded, .snarkTorrentRateUp { /* italicize uploads stats */ + font-style: italic !important; + color: #59698f !important; +} + .snarkTorrentDownloaded, .snarkTorrents tfoot th:nth-last-child(5) { text-align: center; white-space: nowrap; @@ -654,6 +637,7 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrentOdd { background: #e0e0ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px); font-size: 8pt; } @@ -684,10 +668,12 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) { background: #e0e0ef; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(201, 201, 255, 0.3) 3px, #fff 5px); } .snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) { background: #d1d1ef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(220, 220, 255, 0.3) 3px, #fff 5px); } .snarkFileName { @@ -707,10 +693,6 @@ _:-ms-lang(x), .snarkTorrentAction { white-space: nowrap; } -.snarkTorrentETA { - font-style: italic; -} - .choked { color: #a00 !important; } @@ -719,6 +701,10 @@ _:-ms-lang(x), .snarkTorrentAction { color: #070 !important; } +.snarkTorrents td:nth-last-child(2) .choked, .snarkTorrents td:nth-last-child(2) .unchoked { + font-style: italic; +} + .thumb { max-width: 16px; transition: ease all 0.3s 0s; @@ -745,7 +731,7 @@ _:-ms-lang(x), .snarkTorrentAction { } .snarkConfigTitle:hover, .toggleview:hover { - background: linear-gradient(#fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%); + background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); } .snarkConfigTitle a { @@ -756,8 +742,7 @@ _:-ms-lang(x), .snarkTorrentAction { color: #f60 !important; } -.snarkConfigTitle, label.toggleview, -.configsectionpanel .snarkConfigTitle:hover { +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { font-size: 11pt; font-weight: bold; padding: 3px 15px; @@ -768,7 +753,7 @@ _:-ms-lang(x), .snarkTorrentAction { background: #fff url("../../console/light/images/header.png") repeat-x scroll center center; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); font-variant: small-caps !important; - box-shadow: 0 1px 3px #999; + box-shadow: 0 1px 2px #ddd; display: inline-block; min-width: 220px; color: #559 !important; @@ -871,10 +856,12 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkTorrentInfo tr:nth-child(odd) { background: #e0e0ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px); } .snarkTorrentInfo tr:nth-child(even) { background: #eef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); } .snarkTorrentInfo tr:last-child td { @@ -914,12 +901,10 @@ table#trackerselect { } #trackerselect tr:first-child td:nth-child(n+2) { - border: 1px solid #89f !important; + border: 1px solid #7778bf !important; border-radius: 2px; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%) #fff; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #ccc); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1009,8 +994,7 @@ input[type=submit], a.control, input.disabled { border-radius: 2px; min-width: 90px; text-align: center; - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #bbb); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd; } input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { @@ -1060,13 +1044,18 @@ input[type=image], thead img { -webkit-filter: hue-rotate(45deg); } +thead img { + filter: hue-rotate(45deg) drop-shadow(0 0 1px #ddd); + -webkit-filter: hue-rotate(45deg) drop-shadow(0 0 1px #ddd); +} + .iframed thead img { max-height: 20px; } -thead a:hover img { - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); +thead a:hover img, thead a img:hover { + filter: hue-rotate(60deg) drop-shadow(0 0 1px #f60); + -webkit-filter: hue-rotate(60deg) drop-shadow(0 0 1px #f60); } .addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { @@ -1087,8 +1076,8 @@ input[type="text"]:focus, input.r:focus, textarea:focus, input[name="nofilter_da input[type="text"], input.r, input[name="nofilter_dataDir"], textarea, select { min-width: 120px; - box-shadow: 1px 1px 1px #aaa inset; - background: #eef; + box-shadow: 1px 1px 1px #aaa inset, 0 0 0 1px #fff; + background: #efefff; padding: 5px 4px !important; } @@ -1134,7 +1123,7 @@ input.disabled, input.disabled:hover, input.disabled:active, a.controld { } select { - background: #eef url(images/dropdown.png) right center no-repeat !important; + background: #efefff url(images/dropdown.png) right center no-repeat !important; font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; padding: 5px 16px 5px 3px !important; @@ -1149,6 +1138,7 @@ select { select:focus { color: #001 !important; background: #fff url(images/dropdown.png) right center no-repeat !important; + box-shadow: none; } select:active, select option { @@ -1162,7 +1152,6 @@ select + select { */ textarea { - background: #eef; color: #272e3f; font-weight: bold; padding: 2px 4px; @@ -1230,72 +1219,59 @@ img[src$="details.png"] { margin-top: 10px; } -.newtorrentsection { - margin: 0 0 10px 0; +.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { padding: 0 10px; border: 1px solid #7778bf; - text-align: center; color: #001; - box-shadow: inset 0 0 0 1px #fff, inset 0 0 8px 0 #bbf; - word-wrap: break-word; + box-shadow: inset 0 0 0 1px #efefff; + background-blend-mode: luminosity; + text-align: center; +} + +.newtorrentsection { + margin: 0 0 10px 0; 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, #fff, #e0e0ef); + background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px); background-size: 80px 80px, 100%; - background-blend-mode: luminosity; } .addtorrentsection { margin: 10px 0; - padding: 0 10px; - border: 1px solid #7778bf; - text-align: center; - color: #001; - box-shadow: inset 0 0 0 1px #fff, inset 0 0 8px 0 #bbf; - word-wrap: break-word; background: #fff url(images/snark_add.png) no-repeat right center; background: url(images/snark_add.png) no-repeat 99% center, linear-gradient(to bottom, #fff, #e0e0ef); + background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px); background-size: 61px 61px, 100%; - background-blend-mode: luminosity; } .configsection { margin: 0; - padding: 0 10px 13px 10px; - border: 1px solid #7778bf; - color: #001; - box-shadow: inset 0 0 0 1px #fff, inset 0 0 8px 0 #bbf; - word-wrap: break-word; - text-align: center; - font-weight: bold; + padding-bottom: 13px; background: #fff url(images/configuration.png) 102% center no-repeat; background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #fff, #e0e0ef); + background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px); background-size: 84px 82px, 100%; - background-blend-mode: luminosity; } .configsectionpanel { margin: -12px 0 0; - padding: 0 10px; - border: 1px solid #7778bf; - color: #001; - border-radius: 0 0 2px 2px; - box-shadow: inset 0 0 0 1px #fff, inset 0 0 8px 0 #bbf; - word-wrap: break-word; - text-align: center; 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, #fff, #e0e0ef); - background-size: 84px 82px, 100%; - background-blend-mode: luminosity; - font-weight: bold; + background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px); + background-size: 84px 82px, 100% 100%, 100% 100%; } form:last-child .configsectionpanel { margin-top: 10px; } +.configsectionpanel table { + border-collapse: separate; +} + .configsectionpanel tr:nth-last-child(2) td { text-align: right !important; - border-top: 1px solid #7778bf; + border-top: 1px solid #fff; padding: 8px 0 0 0; } @@ -1303,6 +1279,10 @@ form:last-child .configsectionpanel { display: none; } +.spacer td { + border-bottom: 1px solid #7778bf; +} + .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { margin-bottom: -1px; border-left: none; @@ -1351,7 +1331,8 @@ code, tt { color: #fff; border-radius: 2px; padding: 2px 3px; - margin: 1px 3px 1px 1px; + margin: 0 3px; + display: inline-block; } .routerdown { @@ -1366,7 +1347,7 @@ code, tt { } .trackerconfig tr:first-child { - filter: drop-shadow(0 0 1px #999); + filter: drop-shadow(0 0 1px #ccc); } .trackerconfig th:first-child { @@ -1450,8 +1431,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent } .peerinfo td, .debuginfo td { - padding-top: 5px !important; - padding-bottom: 5px !important; + padding: 5px 4px !important; word-spacing: 0em !important; } @@ -1555,6 +1535,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent #totals { display: inline-block; margin: 2px 0 2px 5px; + font-weight: bold !important; } /* Downloading Priorities */ @@ -1608,7 +1589,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent font-weight: bold; } -td#bwHelp { +#bwHelp { background: url(images/infocircle.png) left 10px center no-repeat; background-size: 14px auto; padding-left: 28px !important; @@ -1616,9 +1597,11 @@ td#bwHelp { line-height: 100%; } -td#bwHelp a { +#bwHelp a { display: inline-block; white-space: nowrap; + font-style: normal; + font-weight: bold; } /* end configs */ @@ -1667,8 +1650,8 @@ td#bwHelp a { margin-right: 7px; } -/* MS Edge 14+ fix */ -_:-ms-lang(x), * { +/* MS Edge 14+ rendering bug fix */ +_:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus { filter: none !important; -webkit-filter: none !important; } @@ -1680,6 +1663,21 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI font-size: 8pt !important; } +.snarkRefresh:link { + font-size: 9pt !important; +} + +/* +.snarkRefresh:link { + background-size: 10px auto, 100% 100% !important; + padding: 4px 10px 4px 21px !important; +} + +.snarkRefresh:link:first-child { + padding: 4px 10px 4px 15px !important; +} +*/ + .snarkConfigTitle a, .snarkConfigTitle, .toggleview { font-size: 10pt !important; } @@ -1706,27 +1704,36 @@ b.alwaysShow { } } -/* @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) { -.snarkConfigTitle a, label.toggleview { - font-size: 14pt !important; +.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle { + font-size: 12pt !important; } } -*/ @media screen and (max-width: 1200px) { .dirInfoComplete { display: none; } + +a.snarkRefresh:first-child { + padding-left: 26px !important; +} } +/* mini-mode: hide status text, upload speed + upload amount in main torrent table at 800px or less */ -/* enable to hide status text, upload speed + upload amount in main torrent table at 800px or less */ -/* @media screen and (max-width: 800px) { -.snarkTorrents th:nth-child(2), .snarkTorrents td:nth-child(2), -.snarkTorrents th:nth-child(7), .snarkTorrents tfoot th:nth-child(3), .snarkTorrents td.snarkTorrentUploaded, -.snarkTorrents th:nth-child(9), .snarkTorrents tfoot th:nth-child(5), .snarkTorrents td.snarkTorrentRateUp { +.page { + min-width: 600px !important; +} + +.snarknavbar, .snarkMessages { + min-width: 580px !important; +} + +.snarkTorrents th:nth-child(2), .snarkTorrents td:nth-child(2), .snarkTorrents th:nth-child(7), +.snarkTorrents tfoot th:nth-child(3), .snarkTorrents td.snarkTorrentUploaded, .snarkTorrents th:nth-child(9), +.snarkTorrents tfoot th:nth-child(5), .snarkTorrents td.snarkTorrentRateUp { max-width: 0 !important; overflow: hidden; white-space: nowrap; @@ -1737,8 +1744,69 @@ b.alwaysShow { .snarkTorrents th:nth-child(7) img { display: none; } + +.snarkTorrents td:first-child img, .snarkTorrents td:nth-child(3) img, .snarkTorrents td:nth-child(4) img { + max-height: 14px !important; + width: auto; } -*/ + +.snarkTorrents thead img { + max-height: 18px !important; + width: auto; +} + +.snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) { + width: 18px !important; + padding: 0; +} + +.snarkTorrentAction { + width: auto !important; +} + +#totals { + margin-left: 2px; +} + +.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { + width: 70%; +} + +input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { + min-width: 300px !important; +} + +.trackerconfig input[type="text"] { + min-width: 50px !important; + max-width: 140px !important; +} + +.newtorrentsection td:first-child, .addtorrentsection td:first-child { + min-width: 80px; +} + +.newtorrentsection a, .trackerconfig a { + max-width: 200px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#configs td:first-child { + min-width: 140px !important; +} + +.trackerconfig a { + max-width: 140px !important; +} + +.peerinfo, .debuginfo { + display: none; +} +} + +/* end mini-mode */ @media screen and (min-width: 1200px) { .percentDownloaded { @@ -1770,7 +1838,13 @@ a.snarkRefresh { } a.snarkRefresh:first-child { - padding-left: 16px !important; + padding-left: 28px !important; +} + +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, +.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, +.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { + background-size: 16px auto, 100% 100% !important; } .configsectionpanel .snarkConfigTitle:hover, .snark { @@ -1801,7 +1875,6 @@ input[type="submit"] { .snarkTorrentDownloaded, .snarkTorrertUploaded, .snarkTorrentRateDown, .snarkTorrentStatus, .peerinfo td:nth-child(2), .debuginfo td:nth-child(2) { white-space: nowrap; - padding: 2px 8px 2px 3px !important; } .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index a668ce39a..b3d8d30fe 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -2,7 +2,7 @@ /* Author: dr|z3d */ body { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; color: #c9ceff; background: #000; margin: 7px 6px; @@ -67,9 +67,10 @@ body.iframed { .snarknavbar, .page { min-width: 900px !important; - } +/* topnav */ + .snarknavbar { margin: 0 0 -6px; padding: 14px 0; @@ -78,6 +79,9 @@ body.iframed { border-radius: 2px 2px 0 0; background: linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%); background: linear-gradient(to bottom, #121225 0%, #121225 50%, #000011 50%, #00000d 50%, #00000d 100%); + position: sticky; + top: -1px; + z-index: 999; } .iframed .snarknavbar { @@ -89,18 +93,8 @@ body.iframed { margin-bottom: -1px; } -.snarknavbar img { - display: none; - vertical-align: top; - border: 0; -} - -tt, code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; -} - .snarkRefresh:link:first-child { - padding: 5px 7px 5px 15px !important; + padding-left: 28px !important; border-radius: 2px 0 0 2px; } @@ -112,7 +106,7 @@ tt, code { font-size: 9pt; font-weight: bold; margin: 0 -1px 0 0 !important; - padding: 5px 7px 5px 24px !important; + padding: 5px 7px 5px 26px !important; text-decoration: none !important; letter-spacing: 0.15em; text-transform: uppercase !important; @@ -148,14 +142,9 @@ tt, code { } .snarkRefresh:first-child:active { - text-decoration: none !important; - color: #fff; - border: 1px solid #fff; background: #652787 url(images/button_snark_active.png) !important; background-repeat: no-repeat !important; background-position: 9px center !important; - box-shadow: inset 3px 3px 2px #1f002f; - text-shadow: none; } .snarkRefresh:active:nth-child(2) { @@ -200,8 +189,21 @@ tt, code { border-radius: 0 2px 2px 0 !important; } +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus { + background-size: 16px 16px, 100% 100% !important; +} + +.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active, +.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active { + background-size: 16px 16px !important; +} + +/* end topnav */ + +/* screenlog */ + .snarkMessages { - font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font: normal 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; overflow: auto; width: auto; height: 55px; @@ -273,8 +275,14 @@ tt, code { margin-top: 10px !important; } +/* end screenlog */ + +tt, code { + font-family: "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; +} + pre { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font: 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold !important; width: 100%; height: 8px; @@ -396,10 +404,10 @@ tfoot tr:nth-child(n+1) { text-align: center; } -.snarkTorrents th:first-child { - width: 30px; - padding-right: 0; - text-align: center; +.snarkTorrents thead th:first-child { + width: 36px; +/* padding-right: 0;*/ + text-align: center !important; } .snarkTorrents th:nth-child(2) { @@ -480,7 +488,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents td:nth-child(1) { - width: 24px !important; + width: 36px !important; } .snarkTorrents td:nth-child(3) { @@ -505,7 +513,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { - font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-size: 8pt; background: #2d103f; color: #fff; @@ -927,7 +935,7 @@ td[onclick]:hover { } .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td { - border-bottom: 1px inset #1d1b3f !important; + border-top: 1px inset #12111f !important; } .snarkTorrentOdd { @@ -1097,11 +1105,30 @@ div.percentBarInner.percentBarComplete { padding-bottom: 4px; } -.snarkConfigTitle a, .snarkConfigTitle a:visited { - color: #89f !important; +.configsectionpanel .snarkConfigTitle { + margin: -1px -1px -17px; + padding: 8px !important; + text-align: left !important; + display: block; + font-variant: normal !important; + text-transform: uppercase; + font-size: 11pt !important; + vertical-align: middle !important; } -.snarkConfigTitle a:hover, .toggleview:hover { +.iframed .configsectionpanel .snarkConfigTitle { + margin: -1px 0 -17px !important; + border-left: none !important; + border-right: none !important; +} + +.snarkConfigTitle a, .snarkConfigTitle a:visited { + color: #89f !important; + display: inline-block; + width: 100%; +} + +.snarkConfigTitle:hover a, .snarkConfigTitle a:hover, .toggleview:hover { color: #652787 !important; } @@ -1124,6 +1151,7 @@ div.percentBarInner.percentBarComplete { margin-top: -1px; filter: drop-shadow(0 0 1px #000); -webkit-filter: drop-shadow(0 0 1px #000); +/* filter: sepia(100%) hue-rotate(150deg) drop-shadow(0 0 1px #000);*/ } .snarkConfig { @@ -1194,7 +1222,7 @@ a:active { } input { - font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; margin: 2px 4px 2px 0; padding: 3px 4px !important; cursor: pointer; @@ -1230,9 +1258,9 @@ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { input[type="submit"], input[type="reset"], a.control, a.controld, a.controld:hover, a.controld:focus, a.controld:active, input:disabled[type="submit"], input:disabled:hover[type="submit"], input:disabled:active[type="submit"] { - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; min-width: 95px !important; - padding: 6px 8px !important; + padding: 6px 8px !important; text-align: center; color: #443da0 !important; border: 1px solid #3e3f8f !important; @@ -1300,11 +1328,16 @@ input[type="image"], a img { -webkit-filter: drop-shadow(0 0 1px #000); } -input[type="image"]:hover, a img:hover { +input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { filter: saturate(200%) drop-shadow(0 0 2px #652787) !important; -webkit-filter: saturate(200%) drop-shadow(0 0 2px #652787) !important; } +thead a img:hover, thead a img:focus, thead a:hover img, thead a:focus img { + filter: saturate(200%) hue-rotate(80deg) drop-shadow(0 0 2px #652787) !important; + -webkit-filter: saturate(200%) hue-rotate(80deg) drop-shadow(0 0 2px #652787) !important; +} + input[type="checkbox"], .optbox, input[type="radio"] { background: none; min-width: 16px !important; @@ -1315,15 +1348,11 @@ input[type="checkbox"], .optbox, input[type="radio"] { input[type="checkbox"]:hover, .optbox:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, .optbox:focus, input[type="radio"]:focus { + box-shadow: 0 0 3px 1px #f00; filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 2px #652787); -} + -webkit-filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 2px #652787); -/* -.snarkTorrents th:last-child, -.snarkTorrents td:last-child { - white-space: nowrap; } -*/ .snarkTorrentAction { white-space: nowrap; @@ -1385,11 +1414,11 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { min-width: 500px; width: 70%; margin: 3px 0; - padding: 4px !important; + padding: 6px !important; cursor: text; resize: none; overflow: hidden; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", "Lucida Grande", Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; } thead img, thead img:hover { @@ -1403,7 +1432,7 @@ input[type=image], th a:link img, th a:visited img { input[type=text], input.r { min-width: 100px; - padding: 4px !important; + padding: 6px !important; } input[type=radio] { @@ -1429,11 +1458,11 @@ input[size="85"] { } select { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; font-weight: bold; min-width: 100px; margin: 2px 4px 2px 0; - padding: 3px 16px 3px 2px; + padding: 5px 20px 5px 4px; cursor: pointer; text-overflow: ellipsis; color: #443da0; @@ -1441,7 +1470,7 @@ select { border-bottom-color: #14144f; border-right-color: #14144f; border-radius: 2px; - background: #000 url(images/dropdown.png) right center no-repeat !important; + background: #000 url(images/dropdown.png) right 3px center no-repeat !important; -moz-appearance: none; -webkit-appearance: none; } @@ -1466,7 +1495,7 @@ select option:hover, select option:checked { } select:hover, select:focus, select:active { - background: #000 url(images/dropdown_hover.png) right center no-repeat !important; + background: #000 url(images/dropdown_hover.png) right 3px center no-repeat !important; } /* @@ -1476,7 +1505,7 @@ select:nth-child(2) { */ textarea { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font: 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold; padding: 1px 4px 0; color: #443da0; @@ -1703,8 +1732,15 @@ table.trackerconfig td:first-child { text-align: center; } -#configs td { - padding: 5px 5px 5px 10px !important; +#configs textarea, #configs input[type="text"], .trackerconfig textarea, .trackerconfig input[type="text"], select, input.r, input[type="checkbox"] { + margin-top: 3px !important; + margin-bottom: 3px !important; + display: inline-block; +} + + +#configs td, .trackerconfig td { + padding: 6px 5px !important; } #configs tr:nth-last-child(2) td { @@ -1715,10 +1751,6 @@ table.trackerconfig td:first-child { text-align: left !important; } -.trackerconfig td { - padding: 3px 1px !important; -} - .snarkConfig table tr:first-child { border-top: 1px solid #443da0 !important; } @@ -1738,16 +1770,6 @@ table.trackerconfig td:first-child { text-align: right !important; } -/* -.trackerconfig td:last-child { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 230px; -} - -*/ - .configsectionpanel th, .configsectionpanel td { font-size: 9pt; } @@ -1769,6 +1791,11 @@ table.trackerconfig td:first-child { white-space: nowrap; } +#configs tr:nth-last-child(6) td { + padding-top: 1px !important; + padding-bottom: 1px !important +} + #configs tr:last-child { display: none; } @@ -1782,14 +1809,14 @@ table.trackerconfig td:first-child { display: inline-block; white-space: nowrap; margin-left: 5px; + font-style: normal; } .snarkConfig tr:nth-last-child(2) { background: none; } -.snarkConfig tr:nth-last-child(2) td, -.configsectionpanel td[colspan="5"] { +.snarkConfig tr:nth-last-child(2) td, .configsectionpanel td[colspan="5"] { padding: 11px 15px 0 !important; text-align: right !important; border-top: 1px solid #443da0; @@ -1808,7 +1835,6 @@ table.trackerconfig td:first-child { padding: 0; text-align: center; word-wrap: break-word; - opacity: 1 !important; color: #c9ceff; border-bottom: none; background: #001; @@ -1819,7 +1845,6 @@ table.trackerconfig td:first-child { .newtorrentsection, .addtorrentsection, .configsection { padding: 0 10px; - font-weight: bold; text-align: center; word-wrap: break-word; color: #c9ceff; @@ -1829,14 +1854,14 @@ table.trackerconfig td:first-child { } .newtorrentsection { - margin: 0 0 -1px 0; + margin: 0 -11px -1px; background: #001 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, #001, #000009); background-size: 70px, 100% 100%; } .addtorrentsection { - margin: 10px 0 -1px 0; + margin: 10px -11px -1px; background: #001 url(images/snark_add.png) no-repeat scroll right center; background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to bottom, #001, #000009); background-size: 64px, 100% 100%; @@ -1846,9 +1871,15 @@ table.trackerconfig td:first-child { margin-top: -1px; } +.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection { + margin-left: 0; + margin-right: 0; +} + .configsection { - margin: 0 0 -1px; + margin: 0 -11px -11px; padding: 0 10px 15px 10px; + border-radius: 0 0 2px 2px; background: #001 url(images/configuration.png) no-repeat scroll 101% center; background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #001, #000009); background-size: 64px, 100% 100%; @@ -1887,7 +1918,7 @@ form:last-child > .configsectionpanel { } code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font-family: "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-size: 8pt; font-weight: bold; padding: 0 2px; @@ -2019,13 +2050,13 @@ label.toggleview, } .debugConnStat, .debugRequests { - font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; color: #ee0; color: #995FBF; } .debugConnStat b { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; color: #c9ceff; } @@ -2199,6 +2230,10 @@ b.alwaysShow { display: inline; } +.snarkTorrents th:first-child, .snarkTorrents td:first-child { + width: 26px !important; +} + .snarkTorrents td:first-child img { max-height: 16px; } @@ -2208,20 +2243,46 @@ b.alwaysShow { } } -/* -@media screen and (max-width: 1100px) { -.snarkTorrents td:nth-child(6), .snarkTorrents td:nth-child(8), .snarktorrents td:nth-child(10), -.peerinfo td:nth-child(3), .peerinfo td:nth-child(5), .peerinfo td:nth-child(7) { - border-left: 1px inset #1d1b3f; - border-right: 1px inset #1d1b3f; -} -} -*/ - @media screen and (max-width: 1200px) { .dirInfoComplete { display: none; } + +.snarkRefresh:link, .snarkRefresh:link:first-child { + padding-left: 24px !important; +} + +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus { + background-size: 14px 14px, 100% 100% !important; +} + +.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active, +.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active { + background-size: 14px 14px !important; +} + +.snarkTorrents th:first-child, .snarkTorrents td:first-child { + width: 30px !important; +} + +.configsectionpanel .snarkConfigTitle { + font-size: 10.5pt !important; +} +} + +@media screen and (max-width: 1400px) { +.addtorrentsection, .newtorrentsection, .configsection { + margin-left: 0; + margin-right: 0; +} + +.configsection { + margin-bottom: 0; +} + +.configsectionpanel .snarkConfigTitle { + margin-top: -12px; +} } @media screen and (min-width: 1200px) { @@ -2251,10 +2312,6 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 10.5pt !important; } -.snarkRefresh:link:first-child { - padding-left: 13px !important; -} - .snarkConfigTitle, .toggleview { padding: 4px 25px 4px 22px; } @@ -2263,7 +2320,7 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 12.5pt !important; } -.configsectionpanel .snarkConfigTitle, .toggleview { +.toggleview { padding-bottom: 5px !important; } @@ -2275,12 +2332,6 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN height: 54px; } -/* -select:nth-child(2) { - margin-left: -14px !important; -} -*/ - .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { text-align: center !important; width: 24px !important; diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index d394b47dd..e413523ae 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -7,11 +7,23 @@ html { } body { - background: #130313 url(images/graytile.png); - background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #130313; + background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #130313 !important; background-size: 100% 100%, 96px 96px; + background: #130313 url(images/graytile.png) scroll left top / 96px 96px; color: #fff; - font: 8pt "Bitstream Vera Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; + font: 8pt "DejaVu Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; +} + +/* preload top navigation mouseovers */ +body:not(old) { + background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png), + url(images/button_snark_hover.png) top center no-repeat, + url(images/button_snark_active.png) top center no-repeat, + url(images/button_tracker_hover.png) top center no-repeat, + url(images/button_tracker_active.png) top center no-repeat, + url(images/button_forum_hover.png) top center no-repeat, + url(images/button_forum_active.png) no-repeat #130313 !important; + background-size: 100% 100%, 96px 96px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } body.iframed { @@ -19,11 +31,21 @@ body.iframed { margin: 0 !important; } +body.iframed:not(old) { + background: url(/themes/console/images/transparent.gif), + url(images/button_snark_hover.png) no-repeat, + url(images/button_snark_active.png) no-repeat, + url(images/button_tracker_hover.png) no-repeat, + url(images/button_tracker_active.png) no-repeat, + url(images/button_forum_hover.png) no-repeat, + url(images/button_forum_active.png) no-repeat !important; + background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; +} + .page { background: #323 url(images/tile2.png); background: linear-gradient(to right, rgba(30,0,30,0.4) 0%, rgba(55,0,55,0.5) 50%, rgba(30,0,30,0.4) 100%), url(images/tile2.png); color: #310; - min-width: 980px !important; margin: 5px 0 0 0; padding: 10px 10px 0 10px; border-radius: 4px; @@ -57,6 +79,8 @@ body.iframed { color: white; } +/* topnav */ + .snarknavbar { margin: -10px 0 10px 0 !important; padding: 15px 10px 13px; @@ -66,7 +90,7 @@ body.iframed { filter: drop-shadow(0 1px 4px #212); -webkit-filter: drop-shadow(0 1px 1px #000); background: #101 url(images/snarktopnav.png) repeat-x scroll center center; - background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 50%, #1c0e1c 51%, #101 52%, #101 100%); + background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%, #101 100%); text-transform: uppercase !important; font-weight: bold; color: #001; @@ -76,69 +100,125 @@ body.iframed { position: sticky; top: -2px; z-index: 999; + transition: ease width 0.5s 0.5s; +} + +/* MS Edge 14+ fix */ +_:-ms-lang(x), .snarknavbar { + padding: 17px 10px 15px; } .iframed .snarknavbar { padding-bottom: 16px; margin-top: 0 !important; margin-bottom: -6px !important; - width: auto; + width: auto !important; border-radius: 0; box-shadow: inset 0 0 1px 0 #7f2f7f; + filter: none; + -webkit-filter: none; } .snarkRefresh:link,.snarkRefresh:visited { text-decoration: none !important; text-transform: uppercase !important; text-shadow: 0 0 1px #000; - padding: 5px 12px 5px !important; + padding: 5px 12px 5px 29px !important; margin-right: -4px !important; letter-spacing: 0.11em; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; font-weight: bold; font-size: 10pt; color: #f70; - background: #310 url(images/snarknav_on.png) repeat-x scroll center center; - background: linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #241300 75%, #0d0600 100%); + background: #310 url(images/button_tracker.png) 11px center no-repeat; + background: url(images/button_tracker.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%); + background-size: 16px auto, 100% 100%, 100% 100%; + padding: 4px 10px 4px 29px !important; border-radius: 0; box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px rgba(16, 0, 16, 0.7); outline: none; border: 1px solid #730; } -.snarkRefresh:hover, .snarkRefresh:visited:hover .snarkRefresh:focus, .snarkRefresh:visited:focus { +.iframed .snarkRefresh:first-child, .iframed .snarkRefresh:last-child { + border-radius: 0 !important; +} + +.snarkRefresh:hover, .snarkRefresh:visited:hover, .snarkRefresh:focus, .snarkRefresh:visited:focus { color: #d2baff !important; - background: #310 url(images/snarknav_lowlight.png) repeat-x scroll center center; - background: linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 50%, #46133e 100%); + background: #707 url(images/button_tracker_hover.png) 11px center no-repeat; + background: url(images/button_tracker_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); + background-size: 16px auto, 100% 100%, 100% 100%; border: 1px solid #820b64; + transition: ease border 0.3s 0.1s; } -.snarknavbar img { - border: 0; - margin-right: -6px; - margin-left: -2px; - padding: 0 !important; - vertical-align: middle; - filter: none; - -webkit-filter: none; +.snarkRefresh:hover + .snarkRefresh:nth-last-child(1n-2), .snarkRefresh:focus + .snarkRefresh:nth-last-child(1n-2) { + border-left: 1px solid #820b64; } -.snarkRefresh:hover img, .snarkRefresh:focus img { - filter: sepia(100%) hue-rotate(220deg); - -webkit-filter: sepia(100%) hue-rotate(220deg) !important; -} - -.snarkRefresh:active img { - filter: sepia(100%) invert(100%) hue-rotate(125deg); - -webkit-filter: sepia(100%) invert(100%) hue-rotate(125deg) !important; +.snarkRefresh:active + .snarkRefresh:nth-last-child(1n-2) { + border-left: 1px solid #730; } .snarkRefresh:active, .snarkRefresh:visited:active { - background: #f60; + background: #f60 url(images/button_tracker_active.png) 11px center no-repeat; + background-size: 16px auto, 100% 100%, 100% 100%; color: #fff !important; text-shadow: none; - border: 1px solid #f90; - box-shadow: 0 0 1px 0 #000, inset 1px 1px 3px 1px #310; + border: 1px solid #730; + box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3F1900 !important; +} + +.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] { + background: #310 url(images/button_snark.png) 11px center no-repeat; + background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%); + background-size: 18px auto, 100% 100%; + padding-left: 30px !important; +} + +.snarkRefresh:last-child[href="/i2psnark/"] { + border-radius: 2px; + margin: -5px 0 !important; + display: inline-block; +} + +/* MS Edge 14+ fix */ +_:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] { + margin: -3px 0 !important; +} + +.snarkRefresh:hover:first-child, .snarkRefresh:hover:last-child[href="/i2psnark/"], +.snarkRefresh:focus:first-child, .snarkRefresh:focus:last-child[href="/i2psnark/"] { + background: #707 url(images/button_snark_hover.png) 11px center no-repeat; + background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); + background-size: 18px auto, 100% 100%, 100% 100%; + color: #d2baff !important; +} + +.snarkRefresh:active:first-child, .snarkRefresh:active:last-child[href="/i2psnark/"] { + background: #f60 url(images/button_snark_active.png) 11px center no-repeat; + background-size: 18px auto, 100% 100%, 100% 100%; + color: #fff !important; +} + +.snarkRefresh:link:nth-child(2) { + background: #310 url(images/button_forum.png) 11px center no-repeat; + background: url(images/button_forum.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%); + background-size: 16px auto, 100% 100%, 100% 100%; +} + +.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { + background: #707 url(images/button_forum_hover.png) 11px center no-repeat; + background: url(images/button_forum_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); + background-size: 16px auto, 100% 100%; + color: #d2baff !important; +} + +.snarkRefresh:active:nth-child(2) { + background: #f60 url(images/button_forum_active.png) 11px center no-repeat; + background-size: 16px auto, 100% 100%, 100% 100%; + color: #fff !important; } .snarkRefresh:last-child { @@ -149,21 +229,12 @@ body.iframed { border-radius: 2px 0 0 2px; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkRefresh img { - margin: -2px -7px 0 -5px; -} -} +/* end topnav */ -.snarkRefresh:last-child[href="/i2psnark/"] { - border-radius: 2px; - margin: -5px 0 -4px !important; - padding: 5px 12px 4px 13px !important; - display: inline-block; -} +/* screenlogger */ .snarkMessages { - font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; + font: bold 8pt "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; text-align: left; margin: 0 0 10px 0; padding: 3px 5px; @@ -178,12 +249,20 @@ body.iframed { background: #2a192a url(images/hat.png) no-repeat scroll right center; background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #2a192a 0%, #202 100%); background-size: 80px 83px, 100% 100%; - box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6); + box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6); outline: none; filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5)); -webkit-filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5)); } +.iframed .snarkMessages { + margin-top: 1px; +} + +.iframed .snarkMessages, .iframed .snarkTorrents { + border-radius: 0; +} + .snarkMessages:focus { filter: drop-shadow(0 0 1px #f60) !important; } @@ -220,12 +299,6 @@ body.iframed { background-size: 9px 9px; } -.snarkMessages p { - font-style: italic; - margin: 0; - text-align: right; -} - .snarkMessages img { float: right; margin: -3px -5px 4px 4px; @@ -248,14 +321,16 @@ body.iframed { margin-top: -10px !important; } +/* end screenlogger */ + pre { width: 100%; - font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier, monospace !important; + font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; padding: 0; text-align: left !important; height: 8px; color: #35f; - font-weight: bold !important; + font-weight: bold !important; } table { @@ -384,6 +459,7 @@ tfoot tr:nth-child(n+1) { @media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes webkit/blink double border */ .snarkTorrents { border-top: 1px solid transparent; + margin-top: -2px; } } @@ -408,7 +484,7 @@ tfoot tr:nth-child(n+1) { .snarkTorrents thead th:nth-child(2) { text-align: left; min-width: 50px; -} +} .snarkTorrents tfoot { background: #101; @@ -445,10 +521,6 @@ tfoot tr:nth-child(n+1) { text-align: center; } -.snarkTorrents tfoot tt { - margin-left: -2px; -} - .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { width: 16px; padding: 2px 0; @@ -463,7 +535,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { - font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + font-family: "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #cc0; font-weight: bold; margin-right: 2px; @@ -501,13 +573,6 @@ td:first-child { vertical-align: middle; } -/* -.snarkTorrentName[onclick^="document.location"]:hover, .snarkTorrentName[onclick^="document.location"]:hover a { - cursor: pointer; - color: #f90 !important; -} -*/ - .snarkTorrentAction { padding: 1px 1px 1px 1px !important; margin: 0 !important; @@ -531,14 +596,13 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrents th:last-child input[type="image"] { padding: 0; max-width: 32px; -/* clip-path: inset(1px 1px 1px 1px round 2px, 2px);*/ background: #40003f; border-radius: 2px; border: 1px solid #202; } -.snarkTorrents thead th:last-child br { /* prevent button wrapping */ - display: none; +.snarkTorrents th:last-child input[type="image"]:hover { + border: 1px solid #f60; } .snarkTorrentAction img { @@ -694,7 +758,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t } .snarkFileName { - padding: 4px 0 0 2px !important; + padding: 4px 0 0 2px !important; text-align: left !important; font-size: 8pt !important; white-space: nowrap; @@ -704,6 +768,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t padding: 4px 2px; font-weight: bold; color: #b6b !important; + width: 9em !important; } .snarkFileStatus { @@ -712,7 +777,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t font-size: 8pt; text-align: left !important; white-space: nowrap; - max-width: 250px; +/* max-width: 250px;*/ overflow: hidden; text-overflow: ellipsis; } @@ -770,14 +835,6 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t background: #351933; } -/* -.snarkTorrentInfo tr:last-child td { - padding: 8px 3px !important; - text-align: right !important; - border-top: 1px solid #101; -} -*/ - #torrentInfoControl td { text-align: right !important; border-top: 1px solid #101; @@ -792,16 +849,6 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t padding: 8px 5px !important; } -/* -.snarkTorrentInfo tr:last-child td b { - float: left; -} - -.snarkTorrentInfo tr:last-child input { - margin: 0 3px 0 2px ; -} -*/ - table.SnarkTorrentInfo, table.snarkDirInfo { margin: 0 !important; border: 1px solid #101; @@ -863,13 +910,6 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { border-bottom: 1px solid #000 !important; } -/* -#setPriority th { - padding-top: 12px !important; - padding-bottom: 10px !important; -} -*/ - .snarkFileicon:hover + .snarkFileName a { color: #f90; } @@ -886,7 +926,7 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { font-weight: bold; font-style: italic; word-spacing: -0.4em; -} +} .thumb { max-width: 16px; @@ -929,19 +969,12 @@ table#trackerselect { line-height: 100% !important; white-space: normal; background: url(images/infocircle.png) left center no-repeat; - background-size: 12px auto; - padding-left: 16px; - display: inline-block; + background-size: 14px auto; + padding: 2px 2px 2px 18px; + display: inline-block; margin-top: 5px; } -/* -.snarkAddInfo::before { - content: "\1F6C8\0020"; - font-size: 12pt; -} -*/ - .snarkAddInfo code { background: #101; border-radius: 2px; @@ -951,7 +984,7 @@ table#trackerselect { } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; font-size: 12pt; font-weight: bold; padding: 4px 18px 3px; @@ -976,11 +1009,13 @@ table#trackerselect { .snarkConfigTitle:hover, label.toggleview:hover { background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%); box-shadow: inset 0 0 1px #3f173f; + color: #d2baff; } .snarkConfigTitle:active, label.toggleview:active { - box-shadow: inset 0 0 1px #7f2f7f, inset 1px 1px 3px 1px #0d000d; + box-shadow: inset 0 0 1px #7f2f7f, inset 3px 3px 3px 1px #0d000d; } + .snarkConfigTitle img, label.toggleview img { margin: 1px -3px 2px 0; vertical-align: middle; @@ -988,6 +1023,11 @@ table#trackerselect { -webkit-filter: drop-shadow(0 0 1px #000); } +.configsectionpanel .snarkConfigTitle:hover img { + filter: drop-shadow(0 0 1px #000) !important; + -webkit-filter: drop-shadow(0 0 1px #000) !important; +} + .snarkConfig { font-size: 10pt; width: 100%; @@ -1040,7 +1080,7 @@ a:visited { } a:hover, a:visited:hover, a:focus, a:visited:focus { - color: #f90; + color: #fb0; } a:active, a:visited:active { @@ -1108,18 +1148,12 @@ th.headerpriority { text-align: right !important; } -th.headerpriority br { +th.headerpriority br, .snarkTorrents thead th br { display: none; } -/* -th.headerstatus { - padding-left: 100px; -} -*/ - input, a.control { - font: 8pt "Droid Sans", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", "DejaVu Sans", Verdana, Helvetica, sans-serif; font-weight: bold; } @@ -1130,7 +1164,7 @@ input { padding: 3px 3px !important; border-radius: 2px; border: 1px solid #101; - background: #212 url(images/graytile.png); + background: #212 url(images/graytile.png); color: #f60; margin: 2px 4px; } @@ -1138,7 +1172,6 @@ input { input.r { text-align: right; background: url(images/graytile.png); - font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; } input[type=submit] { @@ -1227,12 +1260,12 @@ thead a:active img { input[type="submit"]:disabled:active, a.control:disabled:active { filter: drop-shadow(0 0 1px #101); - -webkit-filter: drop-shadow(0 0 1px #101); -} + -webkit-filter: drop-shadow(0 0 1px #101); +} #pagenav { letter-spacing: 0.1em; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif !important; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif !important; } #pagenav img:not(old) { @@ -1277,11 +1310,11 @@ input[type="submit"]:disabled:active, a.control:disabled:active { input[type="text"], input.r, input[name="nofilter_dataDir"] { padding: 4px !important; -/* font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;*/ box-shadow: inset 1px 1px 2px 1px #101; letter-spacing: 0.03em; background: url(images/graytile.png) #212; background-size: 96px 96px; + transition: ease box-shadow 0.15s 0s, ease color 0.15s 0s; } textarea[name="i2cpOpts"] { @@ -1292,7 +1325,9 @@ input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofi background: #d60; background: linear-gradient(to bottom, #d60, #c50); color: #fff; - box-shadow: none; + box-shadow: inset 0 0 0 1px #ffffcf; + transition: ease box-shadow 0.15s 0s; + outline: none; } input[type=radio] { @@ -1311,7 +1346,9 @@ input[type="radio"], input[type="checkbox"] { } input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus { + box-shadow: 0 0 6px #930; filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 1px #f60) !important; + -webkit-filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 1px #f60) !important; } input[type="radio"], input[type="checkbox"], select, input[type="submit"] { @@ -1326,25 +1363,9 @@ input[name="upBW"] + i { margin-left: 3px; } -/* -input[name="upBW"] + i::before { - content: "\1F6C8\0020"; - font-size: 12pt; - font-style: normal; -} -*/ -/* -input[name="upBW"] + i { - background: url(images/infocircle.png) left center no-repeat; - background-size: 12px auto; - padding-left: 16px; - margin-left: 10px; -} -*/ - input.default { - width: 1px; - height: 1px; + width: 1px; + height: 1px; visibility: hidden; } @@ -1385,7 +1406,7 @@ input.cancel, input.cancel:active { input.cancel:hover, input.cancel:focus { background: #767 url(images/cancel.png) no-repeat 6px center; - background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.create, input.create:active { @@ -1459,17 +1480,9 @@ input.stoptorrent:hover, input.stoptorrent:focus { background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } -/* -@media screen and (-webkit-min-device-pixel-ratio:0) { -input[type="submit"], input[type="reset"], a.control { - padding-left: 21px !important; -} -} -*/ - .configsectionpanel tr:nth-last-child(2) td { text-align: right !important; - border-top: 1px solid #101; + border-top: 1px solid #57415F; padding-top: 10px !important; } @@ -1479,7 +1492,7 @@ select { background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important; background-size: 17px 17px, 96px 96px !important; color: #f60; - font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; + font: 8pt "DejaVu Sans", Verdana, Helvetica, sans-serif; font-weight: bold; padding: 2px 18px 2px 1px; border-radius: 2px; @@ -1498,11 +1511,7 @@ select:hover, select:focus, select:active { box-shadow: none; background-blend-mode: luminosity; } -/* -select + select { - margin-left: -12px !important; -} -*/ + select option { background: #f50; color: #fff; @@ -1521,11 +1530,6 @@ select option:hover { select { padding: 4px 18px 4px 4px; } -/* -select + select { - margin-left: -12px !important; -} -*/ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { @@ -1544,6 +1548,7 @@ textarea { border: 1px solid #000; font-size: 8pt; box-shadow: inset 1px 1px 2px 1px #101; + transition: ease box-shadow 0.15s 0s; } img { @@ -1585,6 +1590,12 @@ img[src$="magnet.png"] { overflow: auto; } +@media screen and (-webkit-min-device-pixel-ratio: 0) { +.section, .mainsection { + padding-top: 9px; +} +} + .newtorrentsection { background: #545 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, #545 0%, #434 100%); @@ -1610,9 +1621,9 @@ img[src$="magnet.png"] { background-size: 84px 82px, 100% 100%; } -.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, +.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"], a.control { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; font-size: 9pt !important; } @@ -1679,11 +1690,20 @@ div.configsection a, label.toggleview { text-shadow: 0 0 1px #000; } -div.configsection a:hover { - color: #f90; +div.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus { + color: #d2baff; text-decoration: none; } +.snarkConfig .snarkConfigTitle:hover img, .snarkConfig .snarkConfigTitle:focus img, .snarkConfig .snarkConfigTitle a:focus img { + filter: drop-shadow(0 0 1px #d2baff); +} + +.snarkConfig .snarkConfigTitle a { + display: inline-block; + width: 100%; +} + code { font-size: 8pt; color: #b8b; @@ -1703,6 +1723,7 @@ code { } .trackerconfig { + margin-top: 11px; text-align: left !important; border-collapse: separate; border-spacing: 0; @@ -1764,7 +1785,7 @@ input.toggle_input { /* hide checkbox and use label as faux panel heading */ } label.toggleview:hover { - color: #f90; +/* color: #f90;*/ cursor: pointer; } @@ -1779,7 +1800,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent /* enable to display panels by default on broken webkit based browsers (midori fix) */ /* note that midori has other issues c. v5.10, best avoided */ /* -@media screen and (-webkit-min-device-pixel-ratio:0) { +@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; } @@ -1805,13 +1826,13 @@ label.toggleview, .snarkConfigTitle a:visited { } label.toggleview:active, .snarkConfigTitle a:active { - color: #f30 !important; + color: #9183af !important; } label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img { color: #f90; - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); + filter: drop-shadow(0 0 1px #d2baff); + -webkit-filter: drop-shadow(0 0 1px #d2baff); } label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img { @@ -1838,18 +1859,23 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac background-size: 14px 14px; } +.debuginfo, .debugConnection, .debugConnStat, .debugRequests { + font-family: "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; +} + .debuginfo { - font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; line-height: 150%; } +.debuginfo b, .debugConnStat b { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + .debuginfo b { text-transform: capitalize; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } .debugConnection { - font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; font-weight: bold !important; color: #070; margin-left: 3px; @@ -1878,17 +1904,14 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac display: inline-block; white-space: nowrap; color: #bb0; - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; } .debugRequests { color: #bb0; - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; } .debugConnStat b { color: #ffdfff !important; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; } .peerinfo:hover b, .debuginfo:hover b { @@ -1994,6 +2017,9 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac /* configs */ +#configs { + border-collapse: separate; +} #configs td:nth-child(2) { white-space: nowrap; @@ -2017,6 +2043,11 @@ td#bwHelp a { white-space: nowrap; margin-left: 4px; line-height: 150%; + font-style: normal; +} + +.spacer td { + border-bottom: 1px solid #101; } /* end configs */ @@ -2053,7 +2084,7 @@ _:-ms-lang(x), * { } .page { - min-width: 900px !important; + min-width: 850px !important; } } @@ -2070,6 +2101,10 @@ _:-ms-lang(x), * { margin-bottom: 6px !important; } +.snarkMessages { + margin-bottom: 7px !important; +} + #DoesNotExist { margin-top: 6px !important; } @@ -2078,6 +2113,10 @@ _:-ms-lang(x), * { margin-top: -6px !important; } +.routerdown { + margin: 5px; +} + table.snarkDirInfo { margin-top: 6px !important; } @@ -2118,6 +2157,10 @@ table.snarkDirInfo { display: none; } +.iframed .snarkTorrents { + margin-top: 6px; +} + b.alwaysShow { display: inline; } @@ -2125,9 +2168,40 @@ b.alwaysShow { .snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a { font-weight: bold; } + +.snarkTorrents { + margin-top: -1px !important; +} + +.iframed .snarkTorrents { + margin-top: 0 !important; + margin-bottom: 4px; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + .snarkTorrents { + margin-top: -2px !important; +} +} + +.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { + width: 75%; +} } @media screen and (max-width: 1200px) { +.snarknavbar { + width: calc(100% - 22px); + min-width: 600px; + transition: ease width 0.5s 0.5s; +} + +.snarkRefresh:link,.snarkRefresh:visited { + background-size: 15px auto, 100% 100%, 100% 100% !important; + padding: 4px 10px 4px 28px !important; + margin-right: -5px !important; +} + .snarkTorrentName a:not(old) { max-width: 340px; display: inline-block; @@ -2136,15 +2210,28 @@ b.alwaysShow { text-overflow: ellipsis; } -.toggleview, .snarkConfigTitle { +.toggleview, .snarkConfigTitle, .snarkConfigTitle a { font-size: 11pt !important; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.toggleview, .snarkConfigTitle, .snarkConfigTitle a { + font-size: 12pt !important; +} +} + .dirInfoComplete { display: none; } } +@media screen and (max-width: 1400px) { +.snarknavbar { + padding: 14px 10px 13px; + background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%, #101 100%); +} +} + @media screen and (min-width: 1050px) { .snarkTorrentStatus { white-space: nowrap; @@ -2161,6 +2248,10 @@ b.alwaysShow { } @media screen and (min-width: 1200px) { +.snarkRefresh:link { + font-size: 11pt; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2189,7 +2280,7 @@ th, td, .choked, .unchoked { } body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-size: 10pt !important; } @@ -2201,6 +2292,10 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus margin: -2px -9px 0 -5px; } +.snarkRefresh:link:first-child { + padding-left: 31px !important; +} + input[type="submit"], input[type="reset"], select, select option, button, a.control, .snarkTorrents a:link, td, th, code { font-size: 10pt !important; } @@ -2211,22 +2306,13 @@ input[type="submit"], input[type="reset"], select, select option, button, a.cont } .snarkRefresh:link { - font-size: 11pt; + font-size: 12pt; } .snarkConfigTitle, label.toggleview { font-size: 12pt; } -.snarkRefresh:link:first-child { - padding-left: 13px !important; -} - -.snarkRefresh:last-child[href="/i2psnark/"] { - padding: 6px 12px 5px 15px !important; - margin: -7px 0 -6px !important; -} - .mainsection td { padding-top: 4px !important; padding-bottom: 4px !important; @@ -2241,7 +2327,7 @@ input[type="submit"], input[type="reset"], select, select option, button, a.cont } .snarkTorrentName a:not(old) { - max-width: none; + max-width: none; } .snarkTorrents tt { @@ -2286,12 +2372,6 @@ select { padding-bottom: 4px; } -/* -select:nth-child(2) { - margin-left: -14px !important; -} -*/ - .debuginfo td { font-size: 9pt !important; } diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index 92cb71204..f06f334de 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -13,7 +13,7 @@ body { } /* preload top navigation mouseovers */ -body { +body:not(old) { background: repeating-linear-gradient(to bottom, #6F5B4C 1px, #9F948B 1px, #BFA285 4px), url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, @@ -29,7 +29,7 @@ body.iframed { margin: 6px 0 !important; } -body.iframed { +body.iframed:not(old) { background: url(/themes/console/images/transparent.gif), url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, @@ -119,40 +119,36 @@ td a:active, td a:visited:active { border-radius: 0 0 2px 2px; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4f3d36; background: #efefef; - background: linear-gradient(to bottom, #efefef 0%, #efefef 49%, #cfc7c2 52%, #cfc7c2 100%); + background: linear-gradient(to bottom, #efefef 49%, #cfc7c2 52%, #cfc7c2 100%); min-width: 900px; width: 70%; text-align: center; position: sticky; top: -2px; z-index: 999; - } + transition: ease width 0.5s 0.5s; +} .iframed .snarknavbar { - padding-top: 13px; + padding-top: 12px; margin: -6px 0 !important; width: auto; border-radius: 0; box-shadow: 0 0 2px 0 #fff inset, 0 0 1px 0 #4f3d36; } -.snarkRefresh img { - display: none; -} - .snarkRefresh:link, .snarkRefresh:visited { text-decoration: none !important; text-transform: uppercase !important; - padding: 4px 10px 4px 20px !important; + padding: 4px 10px 4px 28px !important; margin: -5px -4px -5px 0 !important; letter-spacing: 0.08em; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-weight: bold; font-size: 10pt; - color: #930; color: #3F271B; background: #fff7ef url(images/button_snark.png) 11px center no-repeat; - background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); background-size: 18px auto, 100% 100%, 100% 100%; border-radius: 0; border: 1px solid #efe6e0; @@ -163,59 +159,55 @@ td a:active, td a:visited:active { .snarkRefresh:hover, .snarkRefresh:focus { text-decoration: none !important; - text-shadow: none; + text-shadow: none !important; color: #930 !important; background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat; - background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background-size: 18px auto, 100% 100%, 100% 100%; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1); - padding: 4px 10px 4px 20px !important; } .snarkRefresh:active { background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat; - background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background-size: 18px auto, 100% 100%, 100% 100%; text-shadow: none !important; - box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 3px 1px #59513B, 0 0 0 1px rgba(77, 69, 62, 0.1); - padding: 4px 10px 4px 20px !important; + box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 3px 1px #59513b, 0 0 0 1px rgba(77, 69, 62, 0.1); } .snarkRefresh:nth-child(2) { background: #fff7ef url(images/button_forum.png) 12px center no-repeat; - background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); background-size: 16px auto, 100% 100%, 100% 100%; - padding: 4px 10px 4px 28px !important; } .snarkRefresh:nth-child(n+3) { background: #fff7ef url(images/button_tracker.png) 12px center no-repeat; - background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); background-size: 16px auto, 100% 100%, 100% 100%; - padding: 4px 10px 4px 28px !important; } .snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat; - background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(n+3):hover, .snarkRefresh:nth-child(n+3):focus { background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat; - background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(2):active { background: #dfb899 url(images/button_forum_active.png) 12px; - background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(n+3):active { background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat; - background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background-size: 16px auto, 100% 100%, 100% 100%; } @@ -225,6 +217,7 @@ td a:active, td a:visited:active { .snarkRefresh:first-child { border-radius: 2px 0 0 2px; + padding-left: 30px !important; } .snarkRefresh:last-child[href="/i2psnark/"] { @@ -258,10 +251,8 @@ td a:active, td a:visited:active { height: 56px; width: auto; background: #3f3833 url(images/hat.png) no-repeat scroll right center; - background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); - background: url(images/whippy.png) no-repeat scroll right 5px bottom -4px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); - background-size: 80px 83px, 100% 100%; - background-size: auto 100%, 100% 100%; + background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); + background-size: auto 105%, 100% 100%; } .snarkMessages:hover { @@ -417,7 +408,7 @@ thead a img, thead img { opacity: 0.9; filter: sepia(100%) hue-rotate(340deg); -webkit-filter: sepia(100%) hue-rotate(340deg); - max-height: 18px; + max-height: 20px; } thead a:hover img, thead a:focus img { @@ -536,7 +527,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents thead th:nth-child(3) { - padding: 4px 4px 4px 0; + padding: 4px 4px 4px 0 ; text-align: right; } @@ -739,6 +730,13 @@ _:-ms-lang(x), .snarkTorrentAction { table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { background: #f9efcf !important; + background: linear-gradient(to right, #700 3px, #f9efcf 3px) !important; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { + background: #f9efcf !important; +} } .snarkDirInfo tr:hover .snarkFileStatus img { @@ -746,13 +744,21 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { } .snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) { - background: #303; - background: #cfc8c2; + background: linear-gradient(to right, #998e88 3px, #E8DFDA 3px); } .snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) { - background: #404; - background: #efdfd1; + background: linear-gradient(to right, #72665f 3px, #E0D9D5 3px); +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome fix - gradient otherwise applied to each td */ +.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) { + background: #E8DFDA; +} + +.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) { + background: #E0D9D5; +} } .snarkTorrentEven + .snarkTorrentEven:nth-child(even) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) td, .snarkTorrentEven + .snarkTorrentEven:nth-child(odd) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) td { @@ -900,7 +906,7 @@ td.snarkFileIcon:first-child { } .snarkTorrentInfo, .snarkDirInfo, .resourceError, .snarkTorrents { - box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.5); + box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3); } thead img.disable, img.disable:hover { @@ -1010,7 +1016,7 @@ thead img.disable, img.disable:hover { .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; - font-size: 12pt !important; + font-size: 11pt !important; font-weight: bold; font-variant: small-caps !important; padding: 4px 15px 2px 12px; @@ -1053,6 +1059,7 @@ thead img.disable, img.disable:hover { font-size: 11pt !important; box-shadow: inset 0 0 0 1px #efe6e0; text-align: left; + letter-spacing: 0.15em !important } .iframed .configsectionpanel .snarkConfigTitle, .iframed .configsectionpanel .snarkConfigTitle:hover, .iframed .configsectionpanel .snarkConfigTitle:active { @@ -1060,9 +1067,9 @@ thead img.disable, img.disable:hover { } @media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { - font-size: 13pt !important; + font-size: 12pt !important; } } @@ -1228,12 +1235,12 @@ input[type=submit] { background-blend-mode: luminosity; } -input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { +input[type=submit]:hover, input[type=submit]:focus, a.control:hover { color: #930 !important; - border: 1px solid #2f1a09 !important; + border: 1px solid #2f1a09; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4d453e; background-blend-mode: normal; - filter: drop-shadow(0 0 1px rgba(153, 51, 0, 0.6)); + filter: drop-shadow(0 0 1px #930); } input[type=submit]:active, a.control:active { @@ -1607,21 +1614,6 @@ img[src$="details.png"] { color: #ddd !important; } -/*) -.configsection table { - color: #ffb; -} - -.configsection a { - color: #f30; -} - -.configsection a:hover { - color: #d30; - text-decoration: none; -} -*/ - code, tt { font-size: 8pt; color: #313; @@ -1635,7 +1627,7 @@ code, tt { } .trackerconfig { - margin-top: 11px; + margin-top: 11px; text-align: left !important; border-collapse: separate; border-spacing: 0; @@ -1769,6 +1761,7 @@ code, tt { .debuginfo td:first-child { background: url(images/debuginfo.png) center center no-repeat; + mix-blend-mode: luminosity !important; background-size: 14px 14px; } @@ -1989,8 +1982,8 @@ b.alwaysShow { display: inline; } -.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover, label.toggleview { - font-size: 12pt !important; +.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover, label.toggleview, .snarkConfigTitle a { + font-size: 11pt !important; max-width: 220px !important } @@ -2006,6 +1999,11 @@ b.alwaysShow { font-size: 11pt !important; } +.snarkTorrentOdd td, .snarkTorrentEven td { + padding-top: 3px; + padding-bottom: 3px; +} + .snarkTorrents tt { background: none; color: #030; @@ -2037,6 +2035,11 @@ b.alwaysShow { background-size: 16px auto, 100% 100%, 100% 100% !important; } +.peerinfo td, .debuginfo td { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + .snarkTorrentETA { padding-right: 10px !important; } @@ -2048,10 +2051,6 @@ b.alwaysShow { #pagenav img { height: 14px; } - -.snarkTorrents td:first-child img { - max-height: 17px; -} } @media screen and (min-width: 1000px) { @@ -2063,9 +2062,14 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input font-size: 11.5pt; } +.snarkTorrentOdd td, .snarkTorrentEven td { + padding-top: 3px !important; + padding-bottom: 3px !important; +} + .peerinfo tt { display: inline-block; - margin: 1px 3px; + margin: 0 3px; } .snarkTorrentName { @@ -2082,6 +2086,11 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input } @media screen and (min-width: 1200px) { +.snarkTorrentOdd td, .snarkTorrentEven td { + padding-top: 4px !important; + padding-bottom: 4px !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2091,7 +2100,15 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input } thead a img, thead img { - max-height: 20px; + max-height: 21px; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) { +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, +.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + font-size: 13pt !important; + letter-spacing: 0.1em !important; } } @@ -2104,7 +2121,7 @@ tt, .snarkTorrents tt, .snarkMessages, textarea { font-size: 9pt !important; } -.snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th, +.snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th, .configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"] { font-size: 10pt !important; } @@ -2113,6 +2130,10 @@ tt, .snarkTorrents tt, .snarkMessages, textarea { font-size: 13pt; } +.snarkRefresh:link:first-child { + padding-left: 30px !important; +} + select { padding-top: 4px; padding-bottom: 4px; @@ -2123,15 +2144,15 @@ select { padding: 0 8px; } +thead a img, thead img { + max-height: 22px; +} + .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { padding: 4px !important; margin: 2px !important; } -thead a img, thead img { - max-height: 22px; -} - .snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, label.toggleview { min-width: 240px !important; font-size: 12pt !important; @@ -2169,6 +2190,13 @@ tr#torrentInfoStats td { padding-bottom: 5px !important; } +.debuginfo td::after { + content: ""; + display: inline-block; + min-height: 18px; + vertical-align: middle; +} + .debugConnection { margin: 0 4px; padding: 2px 3px; @@ -2182,5 +2210,13 @@ tr#torrentInfoStats td { } } +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, +.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + font-size: 14pt !important; + letter-spacing: 0.1em !important; +} +} + /* end responsive layout */ diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css index bf1244b6c..77fba9831 100644 --- a/installer/resources/themes/susidns/light/susidns.css +++ b/installer/resources/themes/susidns/light/susidns.css @@ -3,6 +3,7 @@ body { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 9pt; background-color: #fff; background: #a4a4cb url(/themes/console/light/images/tile2.png) center center; color: #333; @@ -18,11 +19,13 @@ body.iframed { ::selection { background: #27377f !important; color: white; + text-shadow: none; } ::-moz-selection { background: #27377f !important; color: white; + text-shadow: none; } #logo { @@ -56,6 +59,11 @@ code, tt, .destaddress { font-size: 8pt; } +#host_list .destaddress { + -moz-user-select: all; + -webkit-user-select: all; +} + #navi { margin: -1px 0 0; padding: 5px 3px; @@ -71,26 +79,27 @@ code, tt, .destaddress { } .iframed #navi { - margin: -1px 0 10px; + margin: -11px -11px 10px; padding: 7px 5px 6px; - border-radius: 2px; - filter: drop-shadow(0px 0 1px #bbb); - -webkit-filter: drop-shadow(0px 0 1px #bbb); + border-radius: 0; } -#navi a { +#navi a, #navi a:visited { border: 1px solid #77789f; border-radius: 2px; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + color: #3b6bbf; display: inline-block; margin: 2px 0; text-transform: capitalize; box-shadow: inset 0 0 0 1px #fff; + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } #navi a:hover, #navi a:focus { background-blend-mode: luminosity; + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); + -webkit-filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); } #navi a:active { @@ -127,6 +136,10 @@ code, tt, .destaddress { background: linear-gradient(to right, #fff 70%, #eef); } +.iframed .headline { + margin-top: 6px; +} + h3, h4, th, #filter span { color: #31334f; } @@ -170,8 +183,10 @@ span.location { } .iframed #content { - border-radius: 2px; overflow: hidden; + border: none; + background: none; + padding: 0; } form[action="subscriptions"] #content { @@ -189,19 +204,32 @@ form[action="subscriptions"] #content { box-shadow: none; } +.iframed #content textarea { + border: 1px solid #7778bf; + margin: 0; +} + #content + #buttons { border: 1px solid #7778bf; margin: -1px 0 10px; + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; } #content h3 { border: 1px solid #77789f; padding: 5px 8px; border-radius: 2px; - background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%); - box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #bbb); - -webkit-filter: drop-shadow(0 0 1px #bbb); + background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc; +} + +.iframed #content h3 { + margin-top: 3px; +} + +#content p { + margin-left: 15px; + margin-right: 15px; } div#add { @@ -239,6 +267,7 @@ div#add { div#add p.buttons { border: 1px solid #7778bf; margin: 0 -16px -1px; + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; } div.help { @@ -271,7 +300,7 @@ p#help { } p, #helpconfig { - font-size: 10pt; + font-size: 9pt; text-align: justify; } @@ -285,6 +314,14 @@ span.addrhlpr { font-size: 9pt; } +a, button, input[type="submit"], input[type="cancel"], select, h3 { + text-shadow: 0 1px 1px #fff; +} + +a:hover, a:focus, a:active, select:hover, select:focus, select:active, input:hover, input:focus, input:active, button:hover, button:focus, button:active { + text-shadow: none; +} + h3 { font-size: 11pt; letter-spacing: 0.08em; @@ -294,12 +331,16 @@ h3 { } a { - color: #359; + color: #3b6bbf; text-decoration:none; font-weight: bold; outline: none; } +a:visited { + color: #2c4e8f; +} + a:hover, a:focus { text-decoration: none; color: #f60; @@ -336,10 +377,12 @@ li b { tr.list1 { background-color: #f7f8ff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff; } tr.list0 { background-color: #eef; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff; } div#messages { @@ -419,7 +462,7 @@ p.footer { background-color: transparent !important; margin: 1px; border: none; - padding: 10px 0 0; + padding: 10px 10px 0; overflow: hidden !important; min-width: 520px; } @@ -457,6 +500,7 @@ textarea[name="config"] { #config + #buttons { border: 1px solid #7778bf; margin: -2px 0 10px; + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; } #filter, #search { @@ -496,8 +540,9 @@ td.search:first-child { #filter a { border: 1px solid #7778bf; - padding: 3px 8px; + padding: 4px 8px; display: inline-block; + min-width: 20px; text-align: center; border-radius: 2px; text-transform: capitalize; @@ -557,7 +602,8 @@ td.search:first-child { p#filtered { background: #eef url(/themes/console/images/buttons/filter.png) 8px center no-repeat; - padding: 10px 10px 10px 32px !important; + background: url(/themes/console/images/buttons/filter.png) 8px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.4) 3px, #fff 5px), #fff; + padding: 10px 200px 10px 32px !important; } div#book, #messages + p { @@ -617,7 +663,7 @@ table.book { } .book td { - border-top: 1px solid #bbf; + border-top: 1px solid #ddf; padding: 3px; } @@ -710,8 +756,8 @@ table.book { td.destinations { max-width: 50px !important; - border-left: 1px solid #bbf; - border-right: 1px solid #bbf; + border-left: 1px solid #ddf; + border-right: 1px solid #ddf; padding: 0; background: #fff; } @@ -805,6 +851,7 @@ td.destinations textarea { padding: 20px 5px; border-top: 1px solid #7778bf; background: #fff; + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; } img[src^="/imagegen"] { @@ -814,8 +861,8 @@ img[src^="/imagegen"] { padding: 3px; border-radius: 2px; background: #fff; - filter: drop-shadow(0 0 1px #999); - -webkit-filter: drop-shadow(0 0 1px #999); + filter: drop-shadow(0 0 1px #ccc); + -webkit-filter: drop-shadow(0 0 1px #ccc); } /* end host details */ @@ -843,6 +890,11 @@ img[src^="/imagegen"] { /* end host list identicons */ +.names a[href^="http"], .names a[href^="details"], .helper a { + display: inline-block; + width: 100%; +} + .book th { border-bottom: 1px solid #7778bf; } @@ -860,6 +912,7 @@ img[src^="/imagegen"] { div#book { padding: 8px; background: #efefff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.5) 3px, #fff 5px), #fff; } .iframed div#book { @@ -875,6 +928,7 @@ p.book { padding: 10px 5px; text-align: right; background: #fff; + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; } p.buttons { @@ -906,6 +960,11 @@ input[type="radio"], input[type="checkbox"] { cursor: pointer; } +input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus { + filter: drop-shadow(0 0 2px #89f); + -webkit-filter: drop-shadow(0 0 2px #89f); +} + input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, button::-moz-focus-inner { outline: none; border: none; @@ -922,21 +981,21 @@ input[type="submit"], input[type="reset"], .fakebutton { background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); color: #333; - filter: saturate(70%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(70%) drop-shadow(0 0 1px #ccc); + filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); cursor: pointer; } -.fakebutton a { +a.fakebutton { color: #333; font-weight: normal; } -.fakebutton a:hover, .fakebutton a:focus { +a.fakebutton:hover, a.fakebutton:focus { color: #111; } -.fakebutton a:active { +a.fakebutton:active { color: #666 !important; } @@ -946,8 +1005,8 @@ input[type=submit]:hover, input[type=reset]:hover, input[type=submit]:focus, inp color: #111; border: 1px solid #f60; box-shadow: inset 0px 0px 0px 1px #fff; - filter: saturate(100%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(100%) drop-shadow(0 0 1px #ccc); + filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); + -webkit-filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); } input[type="submit"]:active, input[type="reset"]:active, .fakebutton:active { @@ -1109,10 +1168,6 @@ form[action="addressbook"] table { margin-top: -2px !important; } -p#filtered { - padding-right: 200px !important; -} - /* responsive layout */ @media screen and (max-width: 680px) { diff --git a/installer/resources/themes/susimail/light/susimail.css b/installer/resources/themes/susimail/light/susimail.css index d1004b224..62afbbd19 100644 --- a/installer/resources/themes/susimail/light/susimail.css +++ b/installer/resources/themes/susimail/light/susimail.css @@ -114,26 +114,17 @@ span.coloured { color: #327BBF; } -/* optional top header */ -div.header { - transform: scale(0.7); - margin: -20px 10px -10px; - display: none; -} - -.iframed .header { +div.header, .iframed .header { display: none; } div.footer { border-top: none; - margin: -14px 0 10px; + margin: -13px 0 10px; border: 1px solid #7778bf; - border-radius: 0 0 2px 2px; background: #eef; - background: linear-gradient(to right, rgba(232,232,255,0.3) 35%, #fff 50%, rgba(232,232,255,0.3) 65%), linear-gradient(to bottom, rgba(255,255,255,0.3) 5%, rgba(220,220,255,0.8)); + background: linear-gradient(to right, rgba(232,232,255,0.3) 35%, #fff 50%, rgba(232,232,255,0.3) 65%), repeating-linear-gradient(to bottom, #fff 1px, #ddf 2px, #fff 3px); box-shadow: inset 0 0 0 1px #fff; - background-size: 100% 100%, auto 2px; } p.footer { @@ -143,6 +134,7 @@ p.footer { text-align: center; padding: 3px; color: #449 !important; + text-shadow: 0 0 5px #fff; } .iframed .footer { @@ -150,7 +142,7 @@ p.footer { } p.mailbody { - font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; text-align: left; padding: 0 0 15px; margin-top: 0; @@ -183,6 +175,11 @@ a:hover, a:focus, tr:hover td[onclick] a { a:active { color: #f30; } + +a:visited { + color: #6B97BF +} + td { color: #333; font-size:9pt; @@ -195,10 +192,12 @@ td[onclick] { tr.list0 { background-color: #eef; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px); } tr.list1 { background-color: #f7f8ff; + background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px); } tr.list0:hover, tr.list1:hover { @@ -221,7 +220,7 @@ table.noborder { } pre { - font: 8.5pt "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 8.5pt "Lucida Console", "DejaVu Sans Mono", Courier, monospace; margin-left:1cm; margin-right:1cm; } @@ -253,7 +252,7 @@ table { } th { - font-size: 10pt; + font-size: 9pt; font-weight: bold; vertical-align: middle; } @@ -264,7 +263,6 @@ table#mailbox { border-right: none; border-collapse: separate; border-spacing: 0; - border-radius: 0 0 2px 2px; } .iframed #mailbox { @@ -281,12 +279,12 @@ table#mailbox { } #mailbox th { - background: #fff; + background: #fff; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #eef 100%); + color: #555; border-bottom: 1px solid #7778bf; white-space: nowrap; - line-height: 175%; - padding: 2px 5px !important; + padding: 6px 5px !important; } #mailbox th:first-child { @@ -352,7 +350,7 @@ table#mailbox { } #mailbox .bottombuttons td { - padding: 3px; + padding: 4px 4px 5px; border-top: 1px solid #7778bf; } @@ -432,6 +430,11 @@ input[type="radio"], input[type="checkbox"] { background: none; } +input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus { + filter: drop-shadow(0 0 2px #89f); + -webkit-filter: drop-shadow(0 0 2px #89f); +} + input[type="text"], input[type="password"] { cursor: text; font-size: 9pt; @@ -447,16 +450,17 @@ input[type="submit"], input[type="reset"] { font: 9pt "Droid Sans", "NotoSans", Ubuntu, "Bitstream Vera Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif; padding: 4px 5px; text-decoration: none; + text-shadow: 0 1px 1px #fff; border-radius: 2px; opacity: 1; background-size: 14px auto, 100% 100% !important; - filter: saturate(70%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(50%) drop-shadow(0 0 1px #ccc); + filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: saturate(50%) drop-shadow(0 0 1px rgba(204, 204, 204, 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 #ccc); + filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8)); border: 1px solid #f60; color: #222; } @@ -770,14 +774,19 @@ input.new_upload { float: right; } +a.sort { + vertical-align: middle; + display: inline-block; +} + img.sort { border: 1px solid #999; border-radius: 2px; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); margin: 0; vertical-align: middle; - filter: drop-shadow(0 0 1px #ccc); - -webkit-filter: drop-shadow(0 0 1px #ccc); + filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6)); } img.sort:hover, img.sort[disabled]:hover { @@ -798,7 +807,7 @@ input[type="file"] { input[type="text"], input[type="password"], textarea { padding: 5px !important; - box-shadow: inset 2px 2px 2px #bbb; + box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6); border: 1px solid #999; border-radius: 2px; color: #333; @@ -811,6 +820,7 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { input[type="text"][disabled] { opacity: 1; + background: #e9e9e9; } #composemail { @@ -865,12 +875,10 @@ div#dologin { border-radius: 2px; width: 600px; margin: 40px auto 40px; - box-shadow: inset 0 0 3px 1px #ddd, 0 0 1px #ccc; + box-shadow: inset 0 0 2px 2px rgba(225, 225, 255, 0.5), 0 0 1px rgba(204, 204, 204, 0.6); background: #fff; background: linear-gradient(to bottom, #fff, rgba(232,232,255,0.5)), linear-gradient(to bottom, rgba(255,255,255,0.7) 5%, rgba(220,220,255,0.9)), linear-gradient(to right, #fff, #efefff, #fff); background-size: 100% 100%, auto 2px, 100%, 100%; - filter: drop-shadow(0 0 1px #ccc); - -webkit-filter: drop-shadow(0 0 1px #ccc); } .iframed #dologin { @@ -953,7 +961,7 @@ hr { textarea[name="config_text"] { margin-bottom: 15px; resize: none; - height: 250px; + height: 280px; } div#pagenav { @@ -977,24 +985,31 @@ h3#config { word-spacing: 0.1em; background: #efefff; box-shadow: inset 0 0 0 1px #fff; + text-shadow: 0 1px 1px #fff; background: linear-gradient(to right, #fff, #efefff, #fff); } .topbuttons { margin: -1px -1px 0; - padding: 4px 5px; + padding: 5px 5px 4px; text-align: center; border: 1px solid #7778bf; border-bottom: none; -/* background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, #fff 0%, #fff 51%, #eef 51%, #ddf 100%);*/ - border-radius: 2px 2px 0 0; -/* box-shadow: inset 0 0 0 1px #fff;*/ z-index: 100; font-weight: bold; vertical-align: middle; font-size: 9pt; } +.topbuttons, .iframed .topbuttons { + white-space: nowrap; +} + +.topbuttons:not(old), .iframed .topbuttons:not(old) { + display: inline-block; + width: calc(100% - 10px); +} + /* float topbuttons, single line */ .topbuttons input { @@ -1005,8 +1020,11 @@ h3#config { float: none !important; } -.topbuttons input.new, .topbuttons input.refresh, .topbuttons input.logout { +.topbuttons input.new, .topbuttons input.refresh, .topbuttons input.logout, +.topbuttons input.reply, .topbuttons input.replyall, .topbuttons input.forward, .topbuttons input.saveas, .topbuttons input.delete { float: left; + margin-left: 2px; + margin-top: 2px !important; } .topbuttons input.prev, .topbuttons input[name="prev"], .topbuttons input.prevpage, .topbuttons input[name="prevpage"], @@ -1014,7 +1032,7 @@ h3#config { .topbuttons input.firstpage, .topbuttons input[name="firstpage"], .topbuttons input.lastpage, .topbuttons input[name="lastpage"], .topbuttons input.list { height: 26px; - margin: 3px; + margin: 2px; } #messagenav { @@ -1063,11 +1081,6 @@ h3#config { box-shadow: inset 0 0 0 1px #fff !important; } -.topbuttons, .iframed .topbuttons { - padding: 2px 3px 2px 2px; - white-space: nowrap; -} - .topbuttons input[type="text"] { margin: 5px; padding: 4px 4px 5px !important; @@ -1085,7 +1098,6 @@ table#pagenav { padding: 2px; border-collapse: separate; border-spacing: 0; - border-radius: 2px 2px 0 0; } table#pagenav td { @@ -1120,6 +1132,14 @@ div#bottombuttons { padding: 0 0 20px; } +tr.bottombuttons, .topbuttons { + box-shadow: inset 0 0 0 1px #fff; +} + +tr.bottombuttons:last-child { + background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; +} + tr.bottombuttons table#pagenav { width: 100%; margin: 0; @@ -1212,9 +1232,13 @@ td p.error { /* responsive layout */ @media screen and (min-width: 1024px) { -body, td, textarea, input, div, p.mailbody { +body, td, textarea, input, div, p.mailbody, th, a { font-size: 10pt !important; } + +td { + padding: 3px 5px; +} } /* end responsive layout */