Changeset 26bc83c for installer

Timestamp:

Jul 30, 2017 12:05:04 PM (3 years ago)

Author:

str4d <str4d@…>

Branches:

master

Children:

9f15ae6

Parents:

5dd5a99

Message:

Console theme fixes

• light theme:
  • Fix spacing issue with banned peers list
  • Tweak font sizes for Arabic
• Shrink icons in sidepanel network status span
• Add single graph view buttons to classic theme
• Better separation of graphing controls in single graph view
• Enhance presentation of /oldconsole and /proof

Location:

installer/resources/themes/console

Files:

• classic/console.css (modified) (14 diffs)
• dark/console.css (modified) (7 diffs)
• light/console.css (modified) (31 diffs)
• light/console_ar.css (modified) (5 diffs)
• midnight/console.css (modified) (6 diffs)

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

@@ -757 +757 @@
      border: 1px solid #88f;
      border-radius: 2px;
-     padding: 6px 3px;
-     width: calc(100% - 10px);
-     margin: -5px 0 -6px;
+     padding: 6px 5px;
+     width: calc(100% - 12px);
+     margin: -6px 0 -7px;
      box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(96,96,96,0.5);
      text-shadow: 0 1px 1px #fff;
@@ -793 +793 @@
 .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
 .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
-     padding-right: 2px;
+     padding-right: 1px;
      vertical-align: middle;
      display: inline-block;
      filter: drop-shadow(0 0 1px rgba(96,96,96,0.5));
+     transform: scale(0.9);
 }
 
@@ -1039 +1040 @@
 }
 
-a:visited {
+a:visited, #graphopts a, #graphopts a:visited {
      color: #448 !important;
      text-decoration: none;
@@ -1833 +1834 @@
 .main#dns, .main#webmail, .main#torrents {
      padding: 0 !important;
-     min-width: 570px;
-}
-
-.main#proof {
-     padding: 0;
      min-width: 570px;
 }
@@ -3942 +3938 @@
 }
 
+/* graphs */
+
 .graphspanel {
-     padding: 15px 5px 0;
+     padding: 15px 5px 1px;
      margin: -16px -16px -11px -16px;
      text-align: center !important;
@@ -3949 +3947 @@
 }
 
+#graphs .graphspanel {
+     margin: -16px;
+}
+
+h3#graphdisplay {
+     margin: 12px -16px 10px;
+}
+
 .graphspanel img {
-     margin: 5px;
+     margin: 5px 4px;
      padding: 1px;
-     background: #f6f6ff;
-     border: 1px solid #89f;
-     box-shadow: 0 0 1px #aaa;
+     background: #fff;
+     border: 1px solid #9af;
+     box-shadow: 0 0 1px 0 #abf;
      max-width: 95%;
      max-width: calc(100% - 50px);
@@ -3961 +3967 @@
 .graphspanel a img {
      background: #fff;
+     border: 1px solid #89f;
      opacity: 0.9;
      vertical-align: top;
@@ -3973 +3980 @@
 }
 
+.graphspanel a:active img {
+     border: 1px solid #f90;
+}
+
 .graphspanel hr {
      margin: 10px 0;
@@ -3994 +4005 @@
 }
 
+#graphs form[action="graphs"] {
+     margin: -11px -16px;
+}
+
 form[action="graphs"] hr {
      margin: 5px -11px 3px;
@@ -4003 +4018 @@
 }
 
-p#graphopts {
-     text-align: center;
-     border: 1px solid #89f;
-     background: rgba(255,255,255,0.8);
-     margin: 25px -5px 0;
-     padding: 10px;
-     text-transform: capitalize;
-}
-
-h3#graphinfo {
-     margin: 5px 10px 15px;
-     text-transform: capitalize;
-}
-
-p#graphopts + p {
-     text-align: right;
-     background: #fff;
-     margin: -1px -5px 0;
-     padding: 10px;
-     border: 1px solid #89f;
-     display: none;
-}
-
 .formaction#graphing {
      margin: -3px -10px -5px;
 }
 
-/* new graphs optionbox */
+/* graphs optionbox */
 
 #graphs form {
@@ -4058 +4050 @@
 #graphs td:first-child {
      text-align: right;
-     width: 85px;
+     min-width: 100px;
      white-space: nowrap;
      padding: 13px 3px 13px 5px;
+     font-weight: bold;
 }
 
@@ -4086 +4079 @@
 }
 
-/* end new graphs optionbox */
+/* end graphs optionbox */
+
+/* single view */
+
+#graph_single {
+     padding-left: 0;
+     padding-right: 0;
+}
+
+#graph_single .graphspanel {
+     margin: 0 -1px -13px;
+     padding: 3px 0 0 !important;
+}
+
+#graph_single .graphspanel img {
+     margin: 10px 0;
+}
+
+#graphopts {
+     text-align: center;
+     border: 1px solid #89f;
+     background: rgba(255,255,255,0.8);
+     margin: 25px -1px -11px;
+     padding: 10px 10px 9px;
+     text-transform: capitalize;
+     color: transparent;
+}
+
+h3#graphinfo {
+     margin: 0 15px 9px;
+     text-transform: capitalize;
+}
+
+#graphopts + p {
+     text-align: right;
+     background: #fff;
+     margin: -1px -5px 0;
+     padding: 10px;
+     border: 1px solid #89f;
+     display: none;
+}
+
+#graphopts a {
+     display: inline-block;
+     border: 1px solid #8b8edf;
+     padding: 1px 10px;
+     border-radius: 15px;
+     background: #f8f8ff;
+     background: rgba(248,248,255,0.3);
+     margin: 3px -2px;
+     box-shadow: 0 0 0 1px #ddf;
+     box-shadow: 0 0 0 1px rgba(220,220,255,0.6);
+}
+
+#graphopts a:empty {
+     display: none;
+}
+
+#graphopts a:hover, #graphopts a:focus {
+     border: 1px solid #7778bf;
+     background: #e2e2ff;
+     background: linear-gradient(to bottom, #fff 50%, #d8d4ff 50%);
+     box-shadow: 0 0 0 1px rgba(220,220,255,0.6), inset 0 0 0 1px #d8d4ff;
+}
+
+#graphopts a:active {
+     box-shadow: inset 3px 3px 3px rgba(41,61,95,0.8);
+     color: #557 !important;
+}
+
+/* end single view */
+/* end graphs */
 
 .footnote {
@@ -5348 +5412 @@
 }
 
+.main#proof {
+     padding: 10px;
+     min-width: 570px;
+}
+
 #proof p {
      margin: 0;
-     padding: 0;
+     padding: 20px 10px 10px;
+     border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat #eeeffb;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat rgba(220,225,252,0.3);
+     background-blend-mode: luminosity;
 }
 
 #proof textarea, #proof textarea:focus {
+     line-height: 180%;
+     margin: 0;
      border: none;
-     margin: 0;
      padding: 15px 20px;
      width: 100%;
@@ -5361 +5436 @@
      color: #333;
      background: none;
+     height: 200px;
+     overflow: hidden;
+     white-space: pre-wrap;
+     word-break: break-all;
+}
+
+#oldconsole p {
+     margin: 0 0 5px;
+     padding: 10px 20px;
+     line-height: 200%;
+     border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     background: #eeeffb;
+     background: rgba(220,225,252,0.3);
+}
+
+#oldconsole b {
+     display: inline-block;
+     min-width: 120px;
+     margin-right: 8px;
+     text-align: right;
 }
 

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

@@ -1114 +1114 @@
      border: 1px solid #494;
      padding: 3px;
-     margin: 5px 3px;
+     margin: 6px 4px;
      text-align: center !important;
      opacity: 0.9;
@@ -1166 +1166 @@
 
 #graphopts {
-     margin: 30px 0 5px !important;
-     line-height: 220%;
+     margin: 30px -15px -5px !important;
+     padding: 11px 10px 10px;
+     border-top: 1px solid #494;
+     text-align: center;
+     background: #010;
+     background: rgba(0,16,0,0.5);
 }
 
 #graphopts a {
+     display: inline-block;
      filter: none;
      border: 1px solid #030;
-     padding: 2px 10px;
+     padding: 1px 10px;
+     line-height: 130%;
+     margin: 3px -1px;
+     text-transform: capitalize;
 }
 
@@ -1185 +1193 @@
 
 h3#graphinfo {
-     margin-top: 0;
+     margin-top: 15px;
      border-radius: 0 !important;
 }
@@ -1191 +1199 @@
 .graphspanel p:last-child {
      display: none;
-}
-
-form[action="graphs"] {
-     border: 1px solid #494;
-     padding: 10px 10px 0 !important;
-     background: #000;
-     margin-top: -11px;
-     margin-bottom: 10px;
 }
 
@@ -1217 +1217 @@
      letter-spacing: normal;
      word-spacing: normal;
+}
+
+/* new graphs optionbox */
+
+h3#graphdisplay {
+     margin: 15px 10px 10px;
 }
 
@@ -1226 +1232 @@
 }
 
-/* new graphs optionbox */
+form[action="graphs"] {
+     border: 1px solid #494;
+     background: #000;
+     margin: -11px 10px 13px;
+}
 
 #graphs form {
@@ -4605 +4615 @@
 }
 
+#proof p {
+     margin: 15px;
+     padding: 30px 5px 0;
+     border: 1px solid #000;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #020, 0 0 1px #000;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat #001900;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat rgba(0,32,0,0.4);
+     background-blend-mode: color-burn;
+}
+
 #proof textarea {
      line-height: 160%;
      font-size: 9pt;
+     overflow: hidden;
+     word-break: break-all;
+     white-space: pre-wrap;
+     height: 200px;
 }
 
 #proof textarea:focus {
      outline: none;
+}
+
+#oldconsole p {
+     margin: 15px 0 10px;
+     padding: 10px 20px;
+     line-height: 200%;
+     border: 1px solid #000;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #020, 0 0 1px #000;
+     background: #001900;
+     background: rgba(0,32,0,0.4);
+}
+
+#oldconsole b {
+     display: inline-block;
+     min-width: 120px;
+     margin-right: 8px;
+     text-align: right;
 }
 

installer/resources/themes/console/light/console.css

@@ -57 +57 @@
 
 .routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after, div.app, .themechoice, .langselect, .langbox,
-.newsAuthor, #netdbcountrylist img, .viewfullentry, .sybil_routerinfo th img, .graphspanel, #themeoptions {
+.newsAuthor, #netdbcountrylist img, .viewfullentry, .sybil_routerinfo th img, .graphspanel, #themeoptions, #graphopts, #newsDisplay {
      -moz-user-select: none;
      -webkit-user-select: none;
@@ -149 +149 @@
      height: auto;
      filter: drop-shadow(0 0 1px #ccf);
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+.routersummary img[src$="i2plogo.png"] {
+     margin-top: -2px !important;
+}
 }
 
@@ -561 +567 @@
      border: 1px solid #88f;
      border-radius: 2px;
-     padding: 6px 3px;
+     padding: 5px 6px;
      width: calc(100% - 10px);
      width: 100%;
@@ -603 +609 @@
 .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
 .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
-     padding-right: 3px;
+     padding-right: 2px;
      vertical-align: middle;
      display: inline-block;
      filter: drop-shadow(0 0 1px rgba(96,96,96,0.5));
-}
-
-.routersummary .error::before, .routersummary .clockskew::before {
+     transform: scale(0.9);
+}
+
+.routersummary .error::before {
      content: url(/themes/console/images/info/network_status/network_error.png);
 }
@@ -768 +775 @@
 .logo hr {
      margin: 8px -10px;
-     background: #7789bf;
+     background: #7778bf;
      height: 1px
 }
 
 .warning hr {
-     background: #7789bf;
-     background: linear-gradient(to right, #7789bf, #c2c4ef);
+     background: #7778bf;
+     background: linear-gradient(to right, #7778bf, #c2c4ef);
 }
 
@@ -1266 +1273 @@
 
 .newscontent {
-     background-color: rgba(220,220,255,0.6);
-     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;
+     background: #eef !important;
+     background: linear-gradient(to bottom, rgba(240,240,255,0.8), 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;
@@ -1319 +1326 @@
      border-radius: 15px;
      background: #f8f8ff;
-     background: rgba(248,248,255,0.3);
+     background: rgba(248,248,255,0.5);
      margin-left: -3px;
      box-shadow: 0 0 0 1px #ddf;
@@ -1325 +1332 @@
 }
 
-.news #newsdisplay a:hover, .news #newsdisplay a:focus, #graphopts a:hover, #graphopts a:focus {
+.news #newsdisplay a:hover, .news #newsdisplay a:focus,
+#graphopts a:hover, #graphopts a:visited:hover, #graphopts a:focus, #graphopts a:visited:focus {
+     color: #4f8fff;
      border: 1px solid #7778bf;
      background: #e2e2ff;
      background: linear-gradient(to bottom, #f8f8ff 50%, #e2e2ff 50%);
-     box-shadow: 0 0 0 1px rgba(220,220,255,0.6), inset 0 0 0 1px #fff;
-}
-
-.news #newsdisplay a:active, #graphopts a:active {
-     box-shadow: inset 2px 2px 3px #335;
+     box-shadow: 0 0 0 1px rgba(220,220,255,0.6), inset 0 0 0 1px #efefff;
+}
+
+.news #newsdisplay a:focus, #graphopts a:focus, #graphopts a:visited:focus {
+     border: 1px solid #f60;
+}
+
+.news #newsdisplay a:active, #graphopts a:active, #graphopts a:visited:active {
+     box-shadow: inset 3px 3px 3px rgba(41,61,95,0.8);
+     color: #559 !important;
+     border: 1px solid #7778bf;
 }
 
@@ -1377 +1392 @@
      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,255,0.4)), linear-gradient(to right, #fafaff 5%, rgba(231, 231, 255, 0.8)) 15% !important;
      text-align: left;
-     padding: 5px 10px 5px 30px;
+     padding: 6px 10px 5px 30px;
      border: 1px solid #7778bf;
      border-radius: 2px 2px 0 0;
@@ -1386 +1401 @@
      margin-bottom: -1px;
      filter: none;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+div.news h3, #news h3 {
+     padding: 7px 10px 5px 30px;
+}
 }
 
@@ -1509 +1530 @@
      margin: 15px 0 15px 0;
      border-radius: 0 2px 2px 0;
-     background: #ffe;
      text-align: left;
 }
@@ -1560 +1580 @@
 
 h3#transports, h3#upnp {
-     border: 1px solid #7789bf;
+     border: 1px solid #7778bf;
 }
 
 pre#transports {
      display: inline-block;
-     border: 1px solid #7789bf;
+     border: 1px solid #7778bf;
      background: #fafaff;
      padding: 10px 0 0 10px;
@@ -1573 +1593 @@
 
 #upnpscan {
-     border: 1px solid #7789bf;
+     border: 1px solid #7778bf;
      margin: -16px 0 5px;
      padding: 5px 10px;
@@ -1612 +1632 @@
 /* end confignet tidyup */
 
-.main#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) {
+h3#exploratorytunnels {
+     margin-top: 15px;
+}
+
+#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) {
      font-size: 0;
 }
 
-.main#tunnels h3 a[href^="/configtunnels#"]::after, #criticallogs + h3.tabletitle a::after {
+#tunnels h3 a[href^="/configtunnels#"]::after, #criticallogs + h3.tabletitle a::after {
      content: url(/themes/console/images/buttons/configure.png);
      float: right;
@@ -1623 +1647 @@
 }
 
-.main#tunnels h3 a[href^="/configtunnels#"]:hover, #criticallogs + h3.tabletitle a:hover {
+#tunnels h3 a[href^="/configtunnels#"]:hover, #criticallogs + h3.tabletitle a:hover {
      filter: drop-shadow(0 0 1px #f60);
 }
@@ -1742 +1766 @@
 }
 
+/* graphs */
+
 .graphspanel {
      text-align: center !important;
      margin: 15px 0 -15px;
+}
+
+#graph_single h3 {
+     margin: 15px 0 0 !important;
+}
+
+#graph_single .graphspanel {
+     margin: 9px -9px -20px;
 }
 
@@ -1753 +1787 @@
      vertical-align: top !important;
      background: #fff;
-     border: 1px solid #6b6c8f;
-     box-shadow: 0 0 0 1px #ccc;
+     border: 1px solid #7778bf;
+     box-shadow: 0 0 1px #ccc;
      max-width: 98%;
 }
@@ -1760 +1794 @@
 .graphspanel a img {
      box-shadow: 0 0 1px #ccf;
+     filter: none !important;
 }
 
 .graphspanel a img:hover {
      box-shadow: inset 0 0 1px 1px #f60;
-     filter: none !important;
      cursor: url(/themes/console/images/cursor_zoom.png), pointer;
      mix-blend-mode: multiply;
@@ -1784 +1818 @@
 #graphopts {
      text-align: center;
-     margin-top: 20px;
-     margin-bottom: 15px;
-     padding: 3px 0 5px;
      text-transform: capitalize;
-     line-height: 220%;
+     padding: 10px 0 9px;
+     margin: 30px -14px -9px;
+     border-top: 1px solid #77789f;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #e8e8ff;
+     background: repeating-linear-gradient(135deg, rgba(248,248,255,0.6) 2px, rgba(220, 220, 255, 0.3) 3px, #f8f8ff 5px), #f8f8ff;
+     filter: drop-shadow(0 0 1px #ccc);
 }
 
 #graphopts a {
-     margin: 0 -2px !important;
+     margin: 3px -2px !important;
+     display: inline-block;
+     padding: 1px 10px !important;
+     line-height: 140%;
 }
 
@@ -1877 +1917 @@
 
 /* end new graphs optionbox */
+/* end graphs */
 
 .messages {
@@ -2388 +2429 @@
 }
 
+/* optional homepage search */ 
+
 div.search {
      margin: 10px 10px 0 0;
@@ -2402 +2445 @@
      background: #fafaff !important;
      background: linear-gradient(to bottom, #fafaff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,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;
+     padding: 4px 6px;
      width: 70%;
-     margin-left:auto;
-     margin-right:auto;
+     margin-left: auto;
+     margin-right: auto;
      margin-top: -19px;
-     box-shadow: 0 1px 1px 1px rgba(210, 210, 255, 0.3), inset 0 0 0 1px #bbf;
+     box-shadow: 0 1px 1px 1px rgba(210, 210, 255, 0.3), inset 0 0 1px 1px #bbf;
 }
 
@@ -2448 +2491 @@
      text-overflow: ellipsis;
 }
+
+/* end optional homepage search */
 
 .app img {
@@ -2579 +2624 @@
 }
 
-a:link, #graphopts a:visited {
+a:link, #graphopts a:visited, .news #newsdisplay a {
      color: #3b6bbf;
      text-decoration: none;
@@ -3122 +3167 @@
 
 h3 {
-     border: 1px solid #7789bf;
-     border-left: 5px solid #7789bf;
+     border: 1px solid #7778bf;
+     border-left: 5px solid #7778bf;
      padding: 7px 5px 6px 7px;
      margin: 12px 0 15px 0;
@@ -3404 +3449 @@
 button.search {
      background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
-     padding: 5px 7px 5px 22px;
-}
-
-button.search:hover {
-     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     padding: 5px 7px 5px 24px;
+}
+
+button.search:hover, button.search:focus, button.search:active {
+     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff) !important;
+     background-size: 14px 14px, 100% 100% !important;
 }
 
@@ -5396 +5442 @@
      border-radius: 2px;
      display: block;
-     padding: 5px 1px;
-     -moz-columns: 300px auto;
-     -webkit-columns: 300px auto;
-     columns: 300px auto;
+     padding: 2px 0;
+     -moz-columns: auto;
+     -webkit-columns: auto;
+     columns: auto;
      -moz-column-gap: 0;
      -webkit-column-gap: 0;
@@ -5408 +5454 @@
     border: none;
     background: none;
-    padding: 0;
-}
-
-#config_peers #banlist {
-     padding-bottom: 0;
 }
 
 #banlist li {
      display: inline-block;
+     min-width: 300px;
+     line-height: 120%;
+     margin: 3px 0 3px 5px !important;
+     padding: 8px 10px 0 35px;
      list-style: none;
-     margin: 5px 3px 5px 0;
      border: 1px solid #7778bf;
      border-radius: 2px;
-     padding: 8px 10px 0 35px;
-     line-height: 120%;
+     box-shadow: inset 0 0 0 1px #fff;
      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(252,252,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fafaff;
+     font-size: 9pt;
+     filter: drop-shadow(0 0 1px #f8f8ff);
      -webkit-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid;
-     font-size: 9pt;
-     box-shadow: inset 0 0 0 1px #fff;
-     filter: drop-shadow(0 0 1px #f8f8ff);
-     min-width: 300px;
 }
 
@@ -5444 +5485 @@
 #banlist a[href^="configpeer?peer"]::after {
      vertical-align: top;
-}
-
-#profiles #banlist li {
-     margin: 0;
 }
 
@@ -5964 +6001 @@
      border: 1px solid #99b;
      border-radius: 2px;
-     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #557;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccf;
 }
 
@@ -6465 +6502 @@
      margin-top: -16px;
      background: linear-gradient(to bottom, #fafaff, 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) #efefff !important;
-     border: 1px solid #7789bf;
+     border: 1px solid #7778bf;
      box-shadow: inset 0 0 0 1px #fff;
      filter: drop-shadow(0px 0 1px #ccf);

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

@@ -53 +53 @@
 h1 {
      margin: 0 212px -15px 0;
-     padding: 20px 20px 20px 10px;
+     padding: 15px 20px 15px 10px;
      background: linear-gradient(to left, #fcfcff, rgba(252,252,255,0) 600px), linear-gradient(to bottom, #fcfcff 50%, rgba(248,248,255,0.6) 50%), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fafaff !important;
 }
@@ -96 +96 @@
      display: inline-block;
      line-height: 120%;
+     font-size: 10pt;
+     font-weight: bold;
 }
 
@@ -533 +535 @@
 #configstats td:nth-child(2) {
      padding-right: 10px;
+     direction: ltr;
 }
 
@@ -607 +610 @@
 .tab, .tab2 {
      display: inline-block;
-     font-size: 12pt !important;
+     font-size: 11pt !important;
      margin-top: -5px;
      padding-top: 6px !important;
@@ -977 +980 @@
 
 .routersummary td:first-child, .routersummary td:nth-last-child(n+2), .routersummary td a {
-     font-size: 10.5pt !important;
+     font-size: 10pt !important;
 }
 

installer/resources/themes/console/midnight/console.css

@@ -2120 +2120 @@
 
 #graphopts {
-     margin-top: 30px !important;
-     padding: 12px 0;
+     margin: 30px -10px 0 !important;
+     padding: 10px 0 8px;
+     text-align: center;
+     background: #001;
+     background: rgba(0,0,16,0.5);
+     border-top: 1px solid #443da0;
 }
 
@@ -2129 +2133 @@
      border-color: #003;
      padding: 0 10px !important;
+     text-transform: capitalize;
 }
 
@@ -2144 +2149 @@
 
 h3#graphinfo {
-     margin-top: 0;
+     margin-top: 10px;
      border-radius: 0 !important;
      text-transform: capitalize;
@@ -2151 +2156 @@
 }
 
-.graphspanel p:last-child {
+#graphopts + p {
      display: none;
 }
@@ -5274 +5279 @@
 }
 
+#proof p {
+     margin: 15px 5px;
+     padding: 30px 15px 0;
+     border: 1px solid #000;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #225, 0 0 1px #000;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat #002;
+     background: url(/themes/console/images/info/rosette.png) right 8px top 8px no-repeat rgba(0,0,32,0.4);
+     background-blend-mode: color-burn;
+}
+
+#proof textarea {
+     line-height: 160%;
+     font-size: 9pt;
+     overflow: hidden;
+     word-break: break-all;
+     white-space: pre-wrap;
+     height: 200px;
+}
+
+#proof textarea:focus {
+     outline: none;
+}
+
+#oldconsole p {
+     margin: 17px 6px 15px;
+     padding: 10px 20px;
+     line-height: 200%;
+     border: 1px solid #000;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #225, 0 0 1px #000;
+     background: #002;
+     background: rgba(0,0,32,0.4);
+}
+
+#oldconsole b {
+     display: inline-block;
+     min-width: 120px;
+     margin-right: 8px;
+     text-align: right;
+}
+
+
 .main#webmail {
      padding: 0;
@@ -6718 +6766 @@
      display: inline-block;
      filter: drop-shadow(0 0 1px rgba(220,220,220,0.7));
+     transform: scale(0.9);
 }