First draft of theme updates

- CSS changes to match backend changes
- Routerconsole themes applied across all plugins
- Move i2ptunnel CSS to a single file
- Image cleanups
- New icons
- Drop unused images

LICENSE.txt

@@ -238,6 +238,7 @@ Applications:
          - All other flag icons: public domain, courtesy mjames@gmail.com http://www.famfamfam.com/
        Silk icons: See licenses/LICENSE-SilkIcons.txt
        FatCow icons: See licenses/LICENSE-FatCowIcons.txt
+       Fugue Icons: See licenses/LICENSE-FugueIcons.txt
 
        GeoIP Data:
        This product includes GeoLite data created by MaxMind, available from http://www.maxmind.com/

installer/resources/themes/console/classic/console_big.css

@@ -2,37 +2,68 @@
 /* I2P Description: Larger fontsize override for console to accomodate foreign charactersets */
 /* Author: Dr|Z3d */
 
+* {
+     text-shadow: none !important;
+     font-weight: normal !important;
+     font-size: 12pt !important;
+     letter-spacing: normal !important;
+     word-spacing: normal !important;
+     line-height: 115% !important;
+}
+
+input[type="submit"], input[type="cancel"], input[type="file"], button {
+     font-size: 14pt !important;
+}
+
+.routersummary button {
+     min-width: 100px !important;
+}
 
 /* sidepanel */
 
-div.routersummary {
-     font: 9.5pt/125%;
+div.routersummary h3, .routersummary h3 a  {
+     font-size: 14pt !important;
 }
 
-div.routersummary h3 {
-     font-size: 12.5pt;
-}
-
-div.routersummary h4 {
-     font-size: 11.5pt;
+div.routersummary h4, .routersummary h4 a {
+     font-size: 14pt !important;
      letter-spacing: 0;
 }
 
 div.routersummary table {
-     font-size: 9pt;
+     font-size: 12pt;
+}
+
+div.routersummary {
+     width: 220px;
+}
+
+div.routersummary table {
+     width: 219px !important;
+}
+
+.routersummary #bandwidth td:first-child {
+     width: 20px !important;
+     white-space: nowrap;
+}
+
+.routersummary #bandwidth td:last-child {
+     width: 80% !important;
 }
 
 div.routersummary table a:link, div.routersummary table a:visited {
-     font-size: 10.5pt;
+     font-size: 12pt;
+     font-weight: normal;
+     text-shadow: none;
 }
 
-div.routersummary a {
-     word-spacing: 0em !important;
-     letter-spacing: 0.2em !important;
+.routersummary a img:first-child {
+     transform: scale(1.2);
+     -webkit-transform: scale(1.2);
 }
 
 div.tunnels a {
-     font-size: 9pt !important;
+     font-size: 12pt !important;
 }
 
 div.tunnels table {
@@ -56,22 +87,42 @@ a, b, div.routersummary h3 a, div.routersummary h4 {
     font-size: 100%;
 }
 
-b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4{
+b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4, .messages {
      font-weight: normal !important;
      font-style: normal !important;
-     -moz-text-shadow: 0 0 0;
-     -khtml-text-shadow: 0 0 0;
-     text-shadow: 0 0 0;
+     text-shadow: none;
 }
 
-body {
-     font: 10pt Verdana, "Bitstream Vera Sans", Helvetica, Sans, sans-serif;
+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%;
 }
 
+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;
+}
+
 div.joblog li i {
      font-weight: normaL;
 }
@@ -83,4 +134,26 @@ b, div.joblog b {
 
 table code {
      font-size: 120%;
+}
+
+.confignav a, .tab, .tab2 {
+     font-size: 16pt !important;
+     font-weight: normal;
+}
+
+.themelabel, .ui_lang {
+     font-size: 12pt !important;
+     font-weight: normal !important;
+     overflow: hidden;
+     text-overflow: hidden;
+     margin-bottom: -2px;
+     padding-bottom: 4px !important;
+}
+
+div.themechoice, div.langselect {
+     width: 128px;
+}
+
+.tab2::before, .tab2::after {
+     font-size: 16pt;
 }

installer/resources/themes/console/classic/default.css

@@ -1,219 +0,0 @@
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font: 10pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #bbf;
-     color: #000;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
-     padding-top: 5px;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4, label {
-     margin: 0px;
-     padding: 2px;
-     float: left;
-     width: 150px;
-     height: 24px;
-     font-weight: normal;
-     text-align: right;
-     font-size: 8.5pt;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4 {
-     font-size: 10.5pt;
-     text-align: left !important;
-     font-weight: bold;
-     border: 1px solid #77f;
-     border-top: 2px solid #77f;
-     margin: -6px 0 5px -10px !important;
-     padding: 5px 10px 25px 10px;
-     background: #fff;
-     text-shadow: 0px 0px 1px rgba(32, 32, 192, 0.3);
-     text-transform: uppercase;
-     white-space: nowrap;
-     width: 782px;
-     letter-spacing: 0.09em;
-     background: #fff url("/themes/console/classic/images/titlebg.png") no-repeat right center !important;
-}
-
-label {
-     font-style: italic;
-     margin: 0 3px 0 -3px;
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-     font: 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     float: left;
-     margin: 2px 0 5px 0;
-}
-
-button {
-     float: none;
-     height: 20px !important;
-}
-
-textarea {
-     border: 1px solid #aaf;
-     min-height: 40px;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #d00;
-}
-
-div.statusRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #0d0;
-}
-
-div.statusStarting {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #393;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 5px -8px 5px -8px;
-     border-bottom: 1px solid #aaf;
-}
-
-.subdivider {
-     border-bottom: 1px dotted #aaf;
-     margin: 0 0 10px 0;
-}
-
-.freetext {
-     width: 150px;
-     height: 22px;
-     border: 1px solid #aaf;
-}
-
-.control {
-     margin: 2px;
-     padding: 1px 2px 2px 2px;
-     overflow: hidden;
-     height: 20px;
-     width: 60px;
-     font-weight: bold;
-     background: #ddd;
-     color: #000;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     vertical-align: middle;
-     white-space: nowrap;
-}
-
-.control:hover {
-     background: #229;
-     color: #fff;
-}
-
-.control:active {
-     border: 2px inset;
-}
-
-.panel {
-     width: 790px;
-     margin: 16px auto 16px auto;
-     padding: 5px 10px;
-     overflow: hidden;
-     text-align: left;
-     font-size: 8pt;
-     background: #eef;
-     border: 4px solid #77f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #99f;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel .footer {
-
-     padding: 4px;
-}
-
-.toolbox {
-     width: 100%;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 0px;
-}
-
-.comment {
-     font-style: italic;
-     white-space: nowrap;
-}
-
-.text {
-     height: 24px;
-     width: 150px;
-     padding: 2px 0 0 2px;
-     float: left;
-     margin: 0;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background: #eef;
-     border: 4px solid #77f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #900;
-     padding: 5px 5px 10px 5px;
-     text-align: right;
-}
-
-#globalOperationsPanel .control {
-     width: 100px !important;
-     margin-top: 3px;
-     float: right;
-}

installer/resources/themes/console/classic/i2ptunnel.css

@@ -1,179 +1,834 @@
-/* I2P Tunnel Edit Page
+/* I2PTunnel Manager Theme "Classic" */
+/* Author: dr|z3d */
+
+body {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif;
+     color: #333;
+     font-size: 10pt;
+     background: #a4a4cb url('images/tile2.png');
+     background-size: 32px 32px;
+}
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+div {
+     -moz-box-sizing: border-box;
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box;
+}
+
+a {
+     text-decoration: none;
+}
+
+form {
+     margin: 0;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     vertical-align: middle;
+     min-width: 16px;
+     min-height: 16px;
+     margin: 0;
+}
+
+textarea, input, select, button {
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+button {
+     text-decoration: none;
+}
+
+button, input[type="submit"], input[type="reset"], a.control {
+     font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif;
+     font-size: 9pt;
+}
+
+textarea {
+     color: #333;
+     background: #fff;
+     border: 1px solid #999;
+     border-radius: 2px;
+     resize: none;
+     box-shadow: inset 2px 2px 1px #ccc;
+}
+
+textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     color: #111;
+}
+
+textarea#statusMessages {
+     width: 99%;
+     width: calc(100% - 8px);
+     border-radius: 0;
+     padding: 2px 4px;
+     color: #070;
+     box-shadow: none;
+     border: none;
+     margin: 0;
+}
+
+br {
+     clear: left;
+}
+
+div.statusNotRunning {
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #d00;
+     background: url('images/console_status_stopped.png') center center no-repeat;
+     padding-top: 24px;
+     filter: drop-shadow(0 0 1px #999);
+     -webkit-filter: drop-shadow(0 0 1px #999);
+}
+
+div.statusRunning {
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #0b0;
+     background: url('images/console_status_running.png') center center no-repeat;
+     filter: drop-shadow(0 0 1px #999);
+     -webkit-filter: drop-shadow(0 0 1px #999);
+}
+
+div.statusStarting {
+     float: left;
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #339933;
+     background: url('images/console_status_starting.png') center center no-repeat;
+     filter: drop-shadow(0 0 1px #999);
+     -webkit-filter: drop-shadow(0 0 1px #999);
+}
+
+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;
+     height: 16px;
+}
+
+hr {
+     display: none;
+}
+
+.freetext {
+     width: 150px; 
+     border: 1px solid #999;
+     padding: 4px;
+     font: 9pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     background: #fff;
+     color: #333;
+     border-radius: 2px;
+     box-shadow: inset 2px 2px 1px #ccc;
+}
+
+.freetext:focus {
+     box-shadow: 0 0 1px #89f;
+     color: #111;
+}
+
+.freetext[readonly], .freetext[readonly]:focus {
+     background: #ddd;
+     box-shadow: inset 2px 2px 1px #ccc;
+     color: #333;
+}
+
+#clientHost {
+     width: 300px;
+}
+
+#clientPort {
+     width: 100px;
+}
+
+.control, .control:link, .control:visited {
+     overflow: hidden;
+     min-width: 60px;
+     margin: 2px 4px !important;
+     padding: 4px 3px;
+     text-align: center;
+     white-space: nowrap;
+     text-decoration: none;
+     font-style: normal;
+     font-weight: normal;
+     color: #333;
+     border: 1px solid #999;
+     border-radius: 2px;
+     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); */
+}
+
+.control:hover, .control:focus {
+     text-decoration: none;
+     color: #111;
+     border: 1px solid #f60 !important;
+     background: #ddd;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     box-shadow: inset 0 0 0 1px #fff !important;
+}
+
+.control:active {
+     box-shadow: inset 2px 2px 1px #999 !important;
+}
+
+.iframed .panel.iframed {
+     margin: 0 auto -8px auto !important;
+}
+
+.panel {
+     width: calc(100% - 14px);
+     margin: 8px auto;
+     min-width: 450px;
+     max-width: 1400px;
+     overflow: hidden;
+     text-align: left !important;
+     border-radius: 2px;
+     padding: 0 10px 10px;
+     box-shadow: inset 0 0 1px #999;
+     background: #fff;
+     background: linear-gradient(to right, #fff 0%, rgba(247, 248, 255, 0.5), #fff), linear-gradient(to bottom, #eff1ff, #fff, #eff1ff);
+     border: 1px solid #447;
+}
+
+.iframed .panel {
+     border: none;
+     background: none;
+     box-shadow: none;
+     padding: 0;
+     margin: 16px auto -8px auto !important;
+     width: 100%;
+}
+
+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;
+     min-width: 140px;
+     font-size: 9pt;
+     border-radius: 2px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+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;
+}
+
+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: #006;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     outline: none;
+}
+
+a:visited {
+     color: #448;
+     text-decoration: none;
+}
+
+a:hover, a:focus {
+     color: #f60;
+     text-decoration: none;
+}
+
+a:active {
+     color: #f30;
+}
+
+input[type="hidden"], input.default {
+     display: none;
+}
+
+h2, h3 {
+     padding: 6px 10px;
+     border: 1px solid #89f;
+     background: #fff url("/themes/console/classic/images/tinytitle.png") repeat right center;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin: 10px 0 -1px;
+     color: #0c153d;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+/*
+h3 {
+     border-radius: 0;
+     margin-top: -1px;
+}
 */
 
-#tunnelEditPage input {
-    width: 458px;
+.iframed #globalTunnelControl h2 {
+     margin-top: 2px;
 }
 
-#tunnelEditPage select {
-    width: 308px;
+.iframed #globalTunnelControl {
+     margin-bottom: -16px !important;
 }
 
-#tunnelEditPage option[selected] {
-    color: green;
+.panel table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid #89f;
+     margin: 0;
+     background: #fff url(images/bg2.png);
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5)), url(images/bg2.png);
 }
 
-#tunnelEditPage #targetField,
-#tunnelEditPage #accessField,
-#tunnelEditPage #optionsField {
-    height: 48px;
-    width: 150px;
-}
-#tunnelEditPage #tunnelOptionsField {
-    height: 96px;
-    width: 150px;
+th {
+     background: #fff url("/themes/console/classic/images/tinytitle.png") repeat right center;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     padding: 5px;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+     font-size: 10pt;
+     color: #0c153d;
 }
 
-#tunnelEditPage #targetField label,
-#tunnelEditPage #accessField label,
-#tunnelEditPage #tunnelOptionsField label,
-#tunnelEditPage #optionsField label{
-    height: 48px;
-    width: 150px;
+tr {
+     background: rgba(239, 241, 255, 0.5);
 }
 
-#tunnelEditPage #reachField,
-#tunnelEditPage #hostField,
-#tunnelEditPage #depthField,
-#tunnelEditPage #countField,
-#tunnelEditPage #optionsHostField {
-    width: 304px;
-    margin-right: 4px;
+td {
+     border-top: 1px solid #89f;
+     vertical-align: middle;
+     padding: 4px 5px;
 }
 
-#tunnelEditPage #portField,
-#tunnelEditPage #optionsPortField,
-#tunnelEditPage #backupField,
-#tunnelEditPage #varianceField {
-    width: 140px;
+td.infohelp {
+     background: url(images/infohelp.png) 10px center no-repeat;
+     background-size: 24px 24px;
+     background-position: 6px center;
+     padding: 10px 10px 10px 38px !important;
 }
 
-#tunnelEditPage #reachField label,
-#tunnelEditPage #hostField label,
-#tunnelEditPage #portField label,
-#tunnelEditPage #optionsHostField label,
-#tunnelEditPage #optionsPortField label,
-#tunnelEditPage #depthField label,
-#tunnelEditPage #countField label,
-#tunnelEditPage #backupField label,
-#tunnelEditPage #varianceField label {
-    text-align: left;
-
+.tunnelConfig td {
+     width: 50%;
 }
 
-#tunnelEditPage #otherField label {
-    width: 300px;
+#clientTunnels tr, #serverTunnels tr {
+     background: #eef;
 }
 
-#tunnelEditPage #reachableByOther,
-#tunnelEditPage #tunnelDepth,
-#tunnelEditPage #tunnelQuantity,
-#tunnelEditPage #targetHost,
-#tunnelEditPage #clientHost {
-    width: 306px;
+.tunnelProperties {
+     background: #fff !important;
 }
 
-#tunnelEditPage #port {
-    width: 80px;
+.tunnelProperties:hover {
+     background: #ffd !important;
 }
 
-#tunnelEditPage #targetPort,
-#tunnelEditPage #clientPort,
-#tunnelEditPage #tunnelBackupQuantity,
-#tunnelEditPage #tunnelVariance {
-    width: 150px;
+/*
+.tunnelProperties td > * {
+     vertical-align: middle;
 }
-
-#tunnelEditPage #shared,
-#tunnelEditPage #connectDelay,
-#tunnelEditPage #startOnLoad {
-    width: 16px;
-}
-
-#tunnelEditPage label {
-    width: 150px;
-    font-weight: bold;
-    text-align: right;
-    float: left;
-}
-
-/* I2P Tunnel List Page
 */
 
-#tunnelListPage .rowItem {
-    width: 150px;
+.newTunnel {
+     text-align: right;
+     border-top: 1px solid #89f !important;
+     padding: 5px !important;
+     background: #fff;
 }
 
-#tunnelListPage select {
-    width: 150px;
+.newTunnel select, .newTunnel input, .newTunnel .control {
+     float: none;
+     margin: 2px !important;
 }
 
-#tunnelListPage textarea {
-    width: 100%;
-    height: 88px;
-    padding: 0 0 0 4px;
-    color: green;
-    margin-bottom: 7px;
+.newtunnel form {
+     width: 100%;
+     text-align: right;
 }
 
-#tunnelListPage .footer .control {
-    margin-left: 2px;
+.tunnelName {
+     width: 25%;
+     min-width: 150px;
 }
 
-#tunnelListPage .footer label {
-    text-align: right;
-    height: 24px;
-    width: 360px;
-    float: left;
-
+.tunnelName a {
+     background: url(/themes/console/images/buttons/configure.png) left center no-repeat;
+     padding: 3px 3px 3px 20px !important;
 }
 
-/* Use Leary and Langridge content replacement methods (LIR)
-** to embed accessibility information into the document.
-** Should allow the lists to be rendered nicely by
-** screen readers. (and lynx!)
+.tunnelName a:hover {
+     background: url(/themes/console/images/buttons/configure_hover.png) left center no-repeat;
+}
+
+.tunnelName a {
+     font-weight: bold;
+}
+
+.tunnelType {
+     width: 25%;
+}
+
+.tunnelPreview {
+     text-align: left;
+}
+
+.tunnelPreview, .tunnelPort {
+     width: 15%;
+}
+
+.tunnelLocation, .tunnelInterface {
+     width: 20%;
+}
+
+.tunnelStatus {
+     text-align: center;
+     width: 10%;
+     float: none;
+     min-width: 48px;
+}
+
+.tunnelControl {
+     width: 5%;
+     text-align: right;
+     white-space: nowrap;
+}
+
+.tunnelControl > * {
+     vertical-align: middle;
+}
+
+th.tunnelControl {
+     text-align: center;
+}
+
+/*
+.tunnelControl .control {
+     min-width: 60px !important;
+     display: inline-block;
+     margin: 0 !important;
+}
 */
 
-#tunnelListPage label {
-    height: 0;
-    width: 0;
-    overflow: hidden;
+a.control {
+     display: inline-block;
+     padding: 5px 8px !important;
 }
 
-#tunnelListPage .nameHeaderField label,
-#tunnelListPage .portHeaderField label,
-#tunnelListPage .typeHeaderField label,
-#tunnelListPage .interfaceHeaderField label,
-#tunnelListPage .targetHeaderField label,
-#tunnelListPage .previewHeaderField label,
-#tunnelListPage .statusHeaderField label {
-    text-align: left;
-    width: 150px;
-    height: 24px;
-    float: left;
+.control {
+     box-sizing: border-box;
+     margin: 2px 4px !important;
+     min-width: 70px !important;
+     padding: 4px 8px !important;
+     color: #333 !important;
 }
 
-#tunnelListPage .targetField,
-#tunnelListPage .targetField .text,
-#tunnelListPage .targetHeaderField,
-#tunnelListPage .targetHeaderField label {
-    width: 300px;
+.buttons, .newTunnel {
+     text-align: right;
+     padding: 7px 5px !important;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #eff1ff);
+     border-top: 1px solid #89f;
 }
 
-#tunnelListPage .descriptionField,
-#tunnelListPage .destinationField {
-    width: 750px;
+.buttons > * {
+     vertical-align: middle;
 }
 
-#tunnelListPage .descriptionField .text,
-#tunnelListPage .destinationField .text {
-    width: 450px;
+.tunnelConfig tr:last-child td {
+     border-top: 1px solid #89f;
 }
 
-#tunnelListPage .descriptionField label,
-#tunnelListPage .destinationField label {
-    text-align: right;
-    width: 150px;
-    height: 24px;
-    float: left;
+.tunnelDescriptionLabel, .tunnelDestinationLabel {
+     text-align: right;
+     min-width: 150px;
+     display: inline-block;
+     margin-right: 3px;
+     white-space: nowrap;
 }
+
+input {
+     vertical-align: middle;
+}
+
+.tickbox {
+     vertical-align: middle;
+}
+
+#hostField, #leasesetKey, #userAgents {
+     width: 90% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity,
+#localDestination, #customOptions, #leasesetKey, #name, #description, textarea[name="accessList"] {
+     width: 100% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#oldName, #targetDestination, select#profile, select#connectionProfile {
+     min-width: 280px;
+     width: 30%;
+}
+
+#customOptions, #userAgents {
+     width: calc(100% - 10px) !important;
+}
+
+#localDestination, textarea[name="accessList"], #hostField {
+     width: calc(100% - 5px) !important;
+     margin: 3px 0 !important;
+}
+
+#localDestination {
+     height: 30px !important;
+}
+
+#leasesetKey {
+     height: 24px !important;
+     vertical-align: middle;
+}
+
+.multiOption {
+     display: inline-block;
+     margin-right: 10px;
+     vertical-align: middle;
+}
+
+.multiOption#isServer {
+     background: url(/themes/console/images/server.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+.multiOption#isClient {
+     background: url(/themes/console/images/client.png) left center no-repeat;
+     padding-left: 21px;
+}
+
+td#throttle {
+     padding: 0;
+}
+
+#throttler {
+     border: none;
+}
+
+#throttler th {
+     padding-left: 20px;
+}
+
+#throttler td {
+     width: 20%;
+}
+
+#throttler td:first-child {
+     text-align: right;
+     width: 20%;
+     white-space: nowrap;
+}
+
+#throttler tr:first-child th {
+     border-top: none;
+}
+
+td.blankColumn {
+     width: 20% !important;
+}
+
+#throttler tr:nth-child(odd) {
+     background: #eff2ff;
+}
+
+#throttler tr:nth-child(even) {
+     background: #e7e7ff;
+}
+
+#throttler input[type="text"] {
+     width: 80px;
+}
+
+table {
+     background: #fff;
+}
+
+table#statusMessages textarea, table#statusMessages textarea:active {
+     margin: 0;
+     border: 0;
+     box-shadow: none;
+     height: 80px;
+     font-size: 9pt;
+}
+
+#tunnelMessages {
+     padding: 0;
+}
+
+.required:not(old) {
+     display: none;
+}
+
+input::-moz-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+::-webkit-input-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+input.tunnelName, input.tunnelDescription, #userAgents {
+     width: 80%;
+     min-width: 280px;
+     text-overflow: ellipsis; 
+}
+
+#websiteName, #privKeyFile, #targetHost, .host {
+     width: 30%;
+     min-width: 250px;
+}
+
+.port, .quantity, .period {
+     width: 80px;
+}
+
+.username, .password {
+     width: 200px;
+}
+
+.username {
+     background: url(/themes/console/images/buttons/user.png) 3px center no-repeat;
+     padding-left: 22px; 
+}
+
+.password {
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat;
+     padding-left: 22px; 
+}
+
+.proxyList {
+     width: 40%;
+     min-width: 280px;
+}
+
+#notReady {
+     border: 1px solid #900;
+     padding: 30px;
+     background: #ffd;
+     margin: 30px auto;
+     width: 400px;
+     text-align: center;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #333);
+     -webkit-filter: drop-shadow(0 0 1px #333);
+     font-size: 11pt;
+     font-weight: bold;
+} 
+
+/* wizard specifics */
+
+#wizardPanel {
+    font-size: 10pt;
+}
+
+#wizardTable {
+     padding: 0;
+}
+
+#wizardTunnelTypes td:first-child, #wizardSummary td:first-child {
+     font-weight: bold;
+     width: 10%;
+     min-width: 150px;
+     text-align: right;
+     white-space: nowrap;
+}
+
+#wizardTunnelTypes td:last-child {
+     text-align: justify;
+     padding: 5px 10px 5px 5px;
+}
+
+#wizardTunnelTypes select {
+     margin-left: 0 !important;
+}
+
+#wizardTunnelTypes, #wizardSummary {
+     border: none;
+     margin-top: -1px;
+}
+
+/*
+#wizardPanel tr:nth-child(n+2) {
+     background: #eef;
+}
+
+#wizardPanel tr:nth-child(2n+2) {
+     background: #f7f8ff;
+}
+*/
+
+#wizardTunnelTypes tr:nth-child(even), #wizardSummary tr:nth-child(even) {
+     background: #dde1ff;
+}
+
+#wizardTunnelTypes tr:nth-child(odd), #wizardSummary tr:nth-child(odd) {
+     background: #eff1ff;
+}
+
+#wizardTunnelTypes tr:last-child {
+     background: #fff;
+}
+
+#wizardPanel #name, #wizardPanel #description {
+     width: 300px !important;
+     margin: 5px 0 !important;
+}  
+
+#wizardPanel p {
+     padding: 5px;
+     margin: 0;
+     text-align: justify;
+}
+
+#wizardPanel input::-moz-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel ::-webkit-input-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel .options {
+     padding: 10px;
+}
+
+#wizardPanel .tag {
+     width: 10%;
+     min-width: 150px;
+     white-space: nowrap;
+     display: inline-block;
+     font-weight: bold;
+     text-align: right;
+     margin-right: 3px;
+}
+
+#wizardPanel select {
+     min-width: 160px;
+     margin-left: 0 !important;
+}
+
+#wizardPanel .infohelp p { /* wizard complete - advanced options info */
+     margin: 0;
+     padding: 0;
+}
+
+/* more space */
+
+.tunnelConfig td, td {
+     border-top: 1px inset #cfd1ff;
+     padding: 5px;
+}
+
+input[type="checkbox"] {
+     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;
+}
+
+.tunnelConfig select, select#profile select#connectionProfile {
+     margin: 5px !important;
+}
+
+textarea[name="accessList"], #hostField, #localDestination {
+     width: calc(100% - 15px) !important;
+     margin: 5px !important;
+}
+
+#customOptions, #userAgents, #leasesetKey {
+     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;
+}
+
+#clientTunnels .tunnelDescription {
+     padding-top: 1px !important;
+}
+
+.tunnelDestination b, .tunnelDescription b {
+     color: #444;
+}
+
+td.tunnelDestination, td.tunnelDescription {
+     background: linear-gradient(to right, #fff 50%, #eff2ff);
+}
+
+/* end more space */

installer/resources/themes/console/classic/ieshim.css

@@ -246,7 +246,7 @@ th {
      padding-right: 1px;
 }
 
-div.configure hr{
+div.configure hr {
      margin: 10px 0 15px 0;
 }
 
@@ -258,7 +258,6 @@ div.graphspanel img {
      border: 1px solid #99f;
      margin: 6px 0 !important;
      background: #ddf;
-     -moz-box-shadow: inset 0px 0px 1px 1px #99f;
 }
 
 div.graphspanel hr {
@@ -278,7 +277,6 @@ table {
      display:list-item;
 }
 
-
 div.news {
      margin: -1px 2px 0 200px !important;
      padding: -10px 0px 8px 0px;
@@ -297,3 +295,4 @@ div.news {
 
 .routersummary h2, .routersummary h3 {
      background: #fff url(images/tinytitle.png) center right tile-x !important;
+}

installer/resources/themes/console/classic/mobile.css

@@ -1,6 +1,8 @@
+/* Console Theme "Classic" - Mobile Override */
+
 div.routersummaryouter {
      float: none;
-     margin: 0 1px 0 0;
+     margin: 0 !important;
      position: relative;
      width: auto;
 }
@@ -8,23 +10,109 @@ div.routersummaryouter {
 div.routersummary {
      float: none;
      width: auto;
+     max-width: 600px;
+     margin: 0 auto -6px;
 }
 
-div.routersummary table {
+#xhr {
+     margin-top: 9px !important;
+}
+
+#xhr hr:first-child {
+     margin-bottom: 7px !important;
+}
+
+.routersummary div[style="height: 36px;"] {
+     margin: 0 0 15px !important;
+}
+
+.routersummary div[style="height: 36px;"] + a {
+     margin: -5px 0 -3px !important;
+     display: inline-block;
+}
+
+.routersummary hr:first-child {
+     margin-bottom: 11px;
+}
+
+.routersummary td, .routersummary h4, .routersummary a {
+     font-size: 9pt !important;
+}
+
+div.routersummary table, table[id^="sb_"] {
      width: 100% !important;
+     margin: -6px 0 -7px !important;
+}
+
+table[id^="sb_"] td {
+     padding: 4px 2px !important;
+}
+
+table#sb_localtunnels {
+     margin-top: -6px !important;
+}
+
+table#sb_localtunnels td {
+     padding: 4px 2px !important;
+}
+
+#sb_localtunnels td:last-child {
+     padding-right: 4px !important;
+}
+
+table[id^="sb_"] tr:nth-child(even) td {
+     background: #eef;
+     background: rgba(238, 238, 255, 0.4);
+}
+
+table[id^="sb_"] tr:nth-child(odd) td {
+     background: #ddf;
+     background: rgba(221, 221, 255, 0.4);
+}
+
+table[id^="sb_"] tr:hover td {
+     background: #ccf !important;
+}
+
+#sb_services {
+     text-align: center;
+}
+
+/*
+#sb_services a {
+     display: inline-block;
+     width: 24% !important;
+     min-width: 100px;
+     box-sizing: border-box;
+     white-space: nowrap;
+     border: none !important;
+}
+*/
+
+#sb_localtunnels td:nth-child(2) {
+     width: auto !important;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 5px 3px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 0 1px 0 0;
-     min-width: 0;
+     margin: 9px 0 -1px;
+     min-width: 510px;
 }
 
 div.news {
-     margin: -1px 1px 0 0;
-     min-width: 0;
+     margin: 0 0 -10px;
+     min-width: 500px;
 }
 
 div.main {
-     margin: 0 1px 0 0;
-     min-width: 0;
+     margin: 1px 0 0;
+     min-width: 500px;
+}
+
+.confignav {
 }

installer/resources/themes/console/dark/console_ar.css

@@ -40,8 +40,17 @@ h1,h2,h3,h4 {
      text-align: right;
 }
 
-div.routersummary h3 {
+button.search {
+     margin-right: 30px;
+}
+
+div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
      text-align: center;
+     font-weight: normal;
+}
+
+div.routersummary h3, div.routersummary h4 {
+     font-size: 10pt;
 }
 
 div.routersummary td {
@@ -57,6 +66,14 @@ div.routersummary td:first-child {
      text-align: right;
 }
 
+#sb_services td, #sb_internals td, #sb_advanced td {
+     text-align: center;
+}
+
+#sb_localtunnels td:last-child {
+     text-align: left;
+}
+
 div.tunnels {
      padding: -3px 0 !important;
 }
@@ -97,3 +114,181 @@ span.newtab {
      float: left;
      letter-spacing: 0;
 }
+
+.tab2::before, .tab2::after {
+     display: none;
+}
+
+/* lang selection */
+
+.langselect img {
+     margin-right: -61px;
+}
+
+.langselect .optbox:checked + img {
+     margin-right: -63px;
+}
+
+/* theme selection */
+
+.themechoice, .langselect {
+     float: right !important;
+} 
+
+.themechoice {
+     padding: 5px;
+}
+
+.themechoice .optbox {
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     outline: 1px dotted #f00;
+     position: absolute;
+     padding: 2px;
+     margin-right: -27px;
+     min-height: 78px !important;
+}
+
+.themechoice .optbox + img {
+     border: 1px solid transparent;
+}
+
+.themechoice .optbox + img, .themechoice .optbox:checked + img {
+     margin: 5px;
+     padding: 0 !important;
+}
+
+h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a {
+     float: left;
+}
+
+#sybilnav ul li a {
+     padding-right: 0;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: right;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     padding-left: 0;
+     text-align: left !important;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 3px 1px 1px !important;
+}
+
+table#leasesetdebug th:first-child, table#leasesetsummary th:first-child {
+     text-align: right;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align: left;
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+      padding: 5px;
+}
+
+table.leaseset th {
+     text-align: right;
+}
+
+table.leaseset th:first-child b {
+     float: right;
+}
+
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: left;
+}
+
+#netdboverview th, table.netdbentry th, table#leasesetdebug td:nth-child(2n) {
+     text-align: right;
+}
+
+.main#debug {
+     direction: ltr;
+}
+
+#jardump.main th:nth-child(1), #jardump.main th:nth-child(3), #jardump.main th:nth-child(6), #jardump.main th:nth-child(7) {
+     text-align: right;
+}
+
+#schedjobs td {
+     text-align: center;
+}
+
+table.netdbentry th:last-child, table#leasesetdebug td:nth-child(2n+1) {
+     text-align: left;
+}
+
+#tunnels.main h3 a {
+     float: left;
+}
+
+table#enviro td:first-child {
+     text-align: left;
+}
+
+#wrapperlogs pre, table[id$="logs"] ul, .logtable ul li {
+     direction: ltr;
+     text-align: left;
+}
+
+#criticallogs ul {
+     border: none;
+}
+
+#eventlog th {
+     text-align: right;
+     padding-right: 10px;
+}
+
+.homelinkedit th:nth-child(3), .homelinkedit th:last-child {
+     text-align: right !important;
+}
+
+table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable th, th.th_title {
+     text-align: right !important;
+}
+
+#sidebarconf th:nth-child(1), #sidebarconf th:nth-child(2) {
+     text-align: right;
+}
+
+#sidebarconf td:nth-child(4) {
+     padding-right: 0;
+}
+
+#sidebarconf td:nth-child(3) {
+     text-align: left !important;
+     padding-left: 0;
+}
+
+.configtable td.infohelp, p.infohelp, td.infohelp, p#debugmode, p#sybilinfo, p.infowarn, td.infowarn, p#keyringhelp, h3#shutdownrouter + p, h3#restartrouter + p, h3#servicedebug + p, h3#browseronstart + p, h3#runonstartup + p, h3#systray + p {
+     background: #000 url(images/infohelp.png) right 8px center no-repeat !important;
+     padding: 15px 45px 15px 15px !important;
+}
+
+p.infowarn, td.infowarn {
+     background: #000 url(images/infowarn.png) right 8px center no-repeat !important;
+}
+
+.main#config_update .messages {
+     background: #000 url(images/infohelp.png) no-repeat right 10px center !important;
+     text-align: right;
+     padding: 15px 55px 15px 15px;
+}
+
+.main#config_update .messages a {
+     float: left;
+     margin: 0 5px
+}
+
+td.optionsave {
+     text-align: left;
+}
+
+#tunnelconfig th {
+     text-align: right;
+}

installer/resources/themes/console/dark/console_big.css

@@ -2,30 +2,69 @@
 /* Comment: Larger text (and other tweaks) for Chinese & other doublebyte charactersets */
 /* Author: dr|z3d */
 
+h1, h2, h3, h4 {
+     text-shadow: none !important;
+     font-weight: normal !important;
+}
+
+h1 {
+     font-size: 20pt;
+     padding: 11px 15px;
+}
+
+h3 {
+     font-size: 14pt !important;
+}
+
 body {
-     font: 9pt/130% Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-family: "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-size: 12pt;
+     line-height: 130%;
 }
 
 div.news {
-     font-size: 9.5pt;
+     font-size: 10pt;
      font-style: normal !important;
 }
 
-div.routersummary table {
-    font-size: 8.5pt;
+div.main, div.news, h1 {
+     margin-left: 232px !important;
+}
+
+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;
+}
+
+div.routersummary table td {
+     padding: 2px 1px;
 }
 
 div.routersummary h3, div.routersummary h4, div.routersummary p, div.routersummary h3 a, div.routersummary a {
      text-shadow: 0 0 0 0 !important;
 }
 
+div.routersummary h3 a {
+     font-size: 14pt !important;
+     text-transform: uppercase !important;
+     letter-spacing: 0.15em !important;
+}
+
 div.routersummary h4 {
-     font-size: 10pt;
+     font-size: 11pt;
      font-weight: normal;
 }
 
 div.routersummary b {
-     font-size: 9pt;
+     font-size: 10pt;
      font-weight: normal;
 }
 
@@ -34,26 +73,46 @@ div.routersummary a {
      font-weight: normal;
 }
 
+div.messages, div.error, .error ul li {
+     font-size: 11pt;
+     font-weight: normal !important;
+}
+
 b, a, a:link, a:hover, a:visited {
      font-weight: normal;
+     font-size: 11pt !important;
 }
 
 h2 {
-     font-size: 15pt;
+     font-size: 16pt;
      text-shadow: none;
      font-weight: normal;
 }
 
-p {
-     font-size: 9.5pt;
+h3 {
+     font-size: 15pt;
+}
+
+h4, h4.app, h4.app2 {
+     font-size: 14pt;
+}
+
+p, div.main {
+     font-size: 11pt;
 }
 
 button, button:visited {
-    font: normal 10pt Verdana,"Bitstream Vera Sans",Tahoma,Helvetica,sans-serif !important;
+    font: normal 10pt "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif !important;
+}
+
+button.reload, button.stop {
+     padding: 2px !important;
+     font-size: 12pt !important;
+     min-width: 100px;
 }
 
 code, pre, tt {
-     font-size: 10pt;
+     font-size: 12pt;
      font-weight: normal;
 }
 
@@ -63,9 +122,34 @@ code, pre, tt {
 }
 
 table {
-     font: 8.5pt/130% Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font: 10pt/130% "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
 }
 
 div.applabel {
-     font-size: 8.5pt;
+     font-size: 10pt;
+     width: 134px;
 }
+
+div.app {
+     height: 64px;
+     width: 138px;
+}
+
+div.confignav {
+     font-size: 13pt;
+}
+
+input[type="submit"], input[type="reset"] {
+     padding: 3px 2px;
+     font-size: 12pt;
+     min-width: 80px;
+     font-weight: normal;
+}
+
+.langselect, .themechoice {
+     font-size: 11pt !important;
+}
+
+.langselect .optbox {
+     min-height: 68px;
+}

installer/resources/themes/console/dark/default.css

@@ -1,365 +0,0 @@
-/* I2P Console theme: "Camo" by dr|z3d. Aka "dark". As in ops. */
-
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #010 url('images/camotile.png') center bottom;
-     color: #000000;
-     font-size: 8.5pt;
-    /* we've avoided Tantek Hacks so far,
-    ** but we can't avoid using the non-w3c method of 
-    ** box rendering. (and therefore one of mozilla's
-    ** proprietry -moz properties (which hopefully they'll
-    ** drop soon).
-    */
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-body.iframed {
-     background: transparent url('images/transparent.gif') !important;
-     padding-top: 5px;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-label {
-     margin: 0;
-     padding: 5px 4px 4px 4px;
-     float: left;
-     width: 120px;
-/*    height:  24px; */
-     font-weight: normal;
-     text-align: right;
-     font-size: 8pt;
-     font-style: italic;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4 {
-     font-size: 14px;
-     font-weight: bold !important;
-     text-align: left;
-     border: 1px solid #494;
-     margin: 5px 0 15px 0;
-     padding: 5px 10px;
-     background: #000 url('images/header.png') center center repeat-x ;
-     text-transform: uppercase;
-     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
-     letter-spacing: 0.08em;
-     -moz-box-shadow: inset 0px 0px 4px 0px #090;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-     font-size: 8.5pt;
-     float: left;
-     background: #020;
-     border-radius: 4px;
-     color: #EEEE99;
-}
-
-button {
-     float: none;
-}
-
-textarea {
-     border: 1px solid #494;
-     background: #000;
-     margin-left: 4px;
-     width: 458px;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #dd0000;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_stopped.png') 0 0 no-repeat;
-}
-
-div.statusRunning {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #00dd00;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_running.png') 0 0 no-repeat;
-}
-
-div.statusStarting {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #339933;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_starting.png') 0 0 no-repeat;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 3px 0px 3px 0px;
-     border-bottom: 1px solid #494;
-}
-
-.subdivider {
-     border-bottom: 1px solid #494;
-     padding: 5px 0px 0px 0px;
-}
-
-.freetext {
-     width: 150px;
-     height : 22px; 
-     border: 1px solid #494;
-     padding: 2px;
-     margin: 4px 0 2px 4px;
-     background-color: #000;
-     font-size: 8.5pt;
-}
-
-.control {
-     margin: 6px 0 0 2px !important;
-     padding: 2px 0;
-     overflow: hidden;
-     min-width: 60px;
-     max-height: 24px;
-     font-size: 8pt;
-     font-weight: bold;
-     background-color: #000;
-     color: #494 !important;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: url(images/tabletitlelight.png) repeat: x;
-     vertical-align: middle;
-     text-decoration: none;
-     border: 1px outset #5f5;
-     -moz-box-shadow: inset 0px 1px 1px 0px #373;
-     -khtml-box-shadow: inset 0px 1px 1px 0px #373;
-     box-shadow: inset 0px 1px 1px 0px #373;
-}
-
-.control:link {
-     color: #494 !important;
-     text-decoration: none;
-     background: #000 !important;
-}
-
-.control:hover {
-     border: 1px solid #f60;
-     background-color: #000;
-     color: #f60 !important;
-     text-decoration: none;
-     -moz-box-shadow: inset 0px 1px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 1px 1px 0px #fff;
-     box-shadow: inset 0px 1px 1px 0px #fff;
-}
-
-.control:active {
-     border: 1px inset;
-     background-color: #f60 !important;
-     color: #EE9 !important;
-     text-decoration: none;
-}
-
-.control:visited {
-     color: #494 !important;
-     text-decoration: none;
-}
-
-.panel {
-     width: 800px;
-     margin: 16px auto 16px auto;
-     overflow: hidden;
-     text-align: left;
-     font-size: 8.5pt;
-     color: #EEEE99;
-     background-color: #020;
-     background: #000 url(images/camotile2.png);
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #494;
-     padding: 10px 20px;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel td:first-child {
-     font-weight: bold;	
-}
-
-.panel td {
-	  padding: 6px 0 8px;
-}
-
-.panel td:last-child {
-     border-bottom: 1px dotted #494;	
-}
-
-.panel .footer {
-     float: right;
-     padding: 4px;
-}
-
-.toolbox {
-     float: right;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 0px;
-}
-
-.comment {
-     font-style: italic;
-}
-
-.text {
-/*     height: 24px;*/
-     width: 150px;
-     padding: 4px 0 0 2px;
-     float: left;
-     margin: 0;
-     font-size: 8pt !important;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background-color: #000;
-     border: 1px solid #494;
-     -moz-box-shadow: inset 0px 0px 0px 1px #932;
-     padding: 5px 20px 11px 10px !important;
-/*     background: #000 url(images/scarface.jpg) right center no-repeat !important;*/
-}
-
-#globalOperationsPanel .control {
-     width: 120px;
-     color: #494 !important;
-}
-
-#globalOperationsPanel .control:hover {
-     color: #F60 !important;
-}
-
-#globalOperationsPanel .control:active {
-     color: #EE9 !important;
-}
-
-.header {
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 0;
-}
-
-a:link{
-     color: #494;
-     text-decoration: none;
-     background: none;
-}
-
-a:visited{
-     color: #7b7;
-     text-decoration: none;
-     background: none;
-}
-
-a:hover{
-     color: #ff6600;
-     text-decoration: underline;
-     background: none;
-}
-
-a:active{
-     color: #900;
-     text-decoration: underline;
-     background: none;
-}
-
-input {
-     background-color: #020;
-     color: #EEEE99;
-     margin: 0 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px solid #494;
-/*
-     padding: 0px 2px 1px 2px;
-*/
-     text-decoration: none;
-}
-
-input hover {
-     background-color: #f00;
-     color: #EEEE99;
-     margin: 0 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     font-weight: bold;
-     border: 1px solid #494;
-     padding: 2px;
-     text-decoration: none;
-}
-
-select {
-     background-color: #020;
-     color: #EEEE99;
-     margin: 6px 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px solid #494;
-     padding: 2px 2px 2px 4px;
-     max-height: 24px;
-     background: #000;
-     border-radius: 4px;
-}
-
-form {}

installer/resources/themes/console/dark/mobile.css

@@ -1,30 +1,115 @@
+/* Console Theme "Dark" - Mobile Override */
+
+body {
+     padding: 0 5px;
+     margin: 5px 0 !important;
+}
+
+div#xhr {
+     width: 617px;
+     margin: 0 auto;
+}
+
 div.routersummaryouter {
-     float: none;
-     margin: 0 5px 10px;
      position: relative;
+     float: none;
      width: auto;
+     margin: 0 0 5px;
 }
 
 div.routersummary {
      float: none;
-     width: auto;
+     width: 600px;
+     margin: 0 auto;
 }
 
-div.routersummary table {
-     width: 100% !important;
+div[style^='height'] + a {
+     display: inline-block;
+     padding-top: 8px !important;
+}
+
+.routersummary td,
+.routersummary a,
+.routersummary h4,
+.routersummary h4 a,
+.routersummary button {
+     font-size: 10pt !important;
+}
+
+.routersummary h3 a {
+     font-size: 11pt !important;
+     padding: 3px 1px;
+}
+
+div.routersummary table,
+.routersummary table[id^='sb_'] {
+     min-width: 100% !important;
+     min-width: calc(100% - 1px) !important;
+     margin-bottom: -7px !important;
+}
+
+#sb_localtunnels {
+     margin-top: -5px !important;
+}
+
+.routersummary tr:nth-child(odd) td {
+     padding: 3px;
+     background: #020;
+     background: rgba(0,34,0,.5);
+}
+
+.routersummary tr:nth-child(even) td {
+     padding: 3px;
+     background: #000;
+     background: rgba(0,0,0,.3);
+}
+
+.routersummary tr td {
+     border-top: 1px inset #000 !important;
+     border-bottom: 1px inset #000 !important;
+}
+
+.routersummary tr:hover td {
+     border-top: 1px solid #030 !important;
+     border-bottom: 1px solid #030 !important;
+}
+
+.routersummary tr:hover td {
+     background: #020;
+}
+
+.routersummary h3,
+.routersummary h4,
+.routersummary hr {
+     margin-right: 7px !important;
+     margin-left: -11px !important;
+}
+
+div.routersummary h4 {
+     margin: -6px 7px -8px -10px !important;
+}
+
+div.routersummary form {
+     margin: -2px 5px -4px -11px !important;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 10px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 0 5px !important;
-     min-width: 0;
+     min-width: 590px;
+     margin: 0 !important;
 }
 
 div.news {
-     margin: -1px 5px 0;
-     min-width: 0;
+     min-width: 590px;
+     margin: -1px 0 0;
 }
 
 div.main {
-     margin: -1px 5px 5px;
-     min-width: 0;
+     min-width: 590px;
+     margin: -1px 0 5px;
 }