Console themes: rework ieshim.css for classic/ie; Classic & Light tweaks; I2PSnark vanilla/ubergine edits.

build.xml

@@ -1069,7 +1069,7 @@
 			<copy todir="pkg-temp/docs/themes/console/light/" overwrite="true" >
 				<fileset dir="installer/resources/themes/console/light/" includes="**.css" />
 			</copy>
-<!-- @dr.zed where is your CJK fix for the default theme ??	put it here		<copy file="installer/resources/themes/console/classic/console_big.css" todir="portable/docs/themes/console/light/" / -->
+			<copy file="installer/resources/themes/console/light/console_big.css" todir="portable/docs/themes/console/light/" />
 			<copy todir="pkg-temp/docs/themes/console/images/" >
 				<fileset dir="installer/resources/themes/console/images/" />
 			</copy>

history.txt

@@ -1,4 +1,12 @@
-20-11-29 dr|z3d
+2010-12-01 dr|z3d
+    * Console: 
+      - Extensive reworking of ieshim.css for classic theme/Internet Explorer.
+      - Additional console_big.css files for other themes to enhance doublebyte glyph support.
+    * I2PSnark: 
+      - Make show/hide peers and stop/start all torrent buttons more obvious.
+      - Rework Vanilla icons to bring in line with color scheme.
+      
+2010-11-29 dr|z3d
     * Updated console theme "light".
 
 2010-11-29 zzz

installer/resources/readme/readme.html

@@ -88,3 +88,4 @@ your eepsite will be visible (but not discoverable) to others. Detailed instruct
 
 <li class="tidylist"><b>Get Involved!</b><br>I2P is developed and maintained mostly through unfunded, voluntary participation by community members. We're happy to accept <a href="http://www.i2p2.i2p/donate.html" target="_blank">donations</a>, which go towards essential hosting and administrative costs. We have <a href="http://www.i2p2.i2p/bounties.html" target="_blank">cash bounties</a> for aspects of I2P for developers looking for incentives to participate, and we're always looking for more Java coders, translators, promoters and users to help I2P grow. For further info on how you can help visit the <a href="http://www.i2p2.i2p/getinvolved.html" target="_blank">volunteers page</a> on the website. Thanks in advance!</li>
 </ul>
+<div class="footnote"><hr>Document updated: November 2010.

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

@@ -330,7 +330,7 @@ div.main textarea {
 
 div.main h2 {
      margin-top: 20px;
-     margin-bottom: 0px;
+     margin-bottom: 10px !important;
 }
 
 div.welcome {
@@ -788,6 +788,15 @@ tt {
      margin-right: 20px;
 }
 
+.tidylist code {
+     text-align: left;
+     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     color: #390;
+     padding: 2px 3px;
+     background: #eeb;
+     font-weight: bold;
+}
+
 div.graphspanel {
      padding: 10px 5px 20px 5px;
      margin: -16px -16px -11px -16px;
@@ -827,3 +836,17 @@ div.graphspanel h3 {
      text-align: left;
      margin: 10px 20px 10px 20px;
 }
+
+div.footnote {
+     text-align: right;
+     color: #99f;
+     font-size: 7pt;
+}
+
+div.footnote hr{
+     margin: 10px 0 5px 0 !important;
+     color: #99f;
+     background: #99f;
+     height: 1px;
+     border: 0px solid #99f;
+}

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

@@ -1,25 +1,33 @@
-/* Welcome to the wonderful world of kludgey IE fixes */
+/* I2P Console IE theme override for Classic */
+/* Comment: Welcome to the wonderful world of kludgey IE fixes (for best results use another browser) */
+/* Author: dr|z3d */
 
 .wideload {
      overflow: auto;
      width: 100%;
 }
 
-.formaction {
+.formaction, form {
      text-align: left !important;
-     margin: -10px 0 10px 0;
+     margin: 0px 0 10px 0;
 }
 
 div.configure {
      text-align: center;
 }
 
+div.configure hr {
+/*     display: none; */
+     margin-bottom: 10px !important;
+}
+
 div.configure p, div.configure table  {
      text-align: justify;
+     margin: 10px 0;
 }
 
 div.main ul {
-     margin-right: 20px;
+     margin: 0 20px 0 40px;
 }
 
 div.configure textarea {
@@ -31,20 +39,23 @@ div.configure input {
 }
 
 div.configure table {
-     width: 550px !important;
-     text-align: center;
+     width: auto !important;
+     text-align: left !important;
 }
 
 h1 {
-     padding: 15px 10px 16px 10px !important;
-     margin: 0 0px 0 17	5px !important;
-     background-color: #bbf !important; /* background page color to fix overflow issue */
+     padding: 20px 10px 21px 10px !important;
+     margin: 0 0 0 195px !important;
      color: #001;
+     border: 1px solid #89f !important;
+     border-left: 1px solid #89f !important;
 }
 
+
 h2 {
-     padding-top: 0;
+     padding: 10px !important;
      text-align: left !important;
+     margin: 0 0 15px 0 !important;
 }
 
 h3 {
@@ -66,13 +77,23 @@ div.messages {
      margin: -10px -15px 0px -15px;
 }
 
-div.main, div.news {
-     margin: -5px 0px 10px 185px;
-     border: 5px solid #bbf;
+div.main {
+     margin: -5px 0px 10px 197px;
+     border: 1px solid #89f !important;
 }
 
 div.main hr, div.news hr {
-     margin: 0;	
+     margin: 0 10px !important;
+}
+
+div.news {
+     margin-left: 197px !important;
+     border-left: 1px solid #89f !important;
+}
+
+div.news hr {
+     height: 1px !important;
+     color: #ffffc0 !important; /* fixes immovable hr issue by making it invisible */
 }
 
 div.main {
@@ -81,7 +102,7 @@ div.main {
 
 div.news {
      border-left: 5px solid #bbf;
-     margin: -5px 0px 0 185px;
+     margin: -5px 0px 0 193px;
      padding-bottom: 8px;
 }
 
@@ -96,9 +117,11 @@ div.news hr {
 div.routersummary {
      color: #001;
      padding-left: 0px;
-     border-left: 5px solid #bbf;
+/*     border-left: 1px solid #bbf; */
      text-align: center !important;
      overflow: hidden; /* prevents IE from borking the sidepanel */
+     width: 195px !important;
+     padding-bottom: 20px !important;
 }
 
 div.routersummary submit {
@@ -111,12 +134,11 @@ div.routersummary input[type=text] {
 }
 
 div.routersummary hr {
-     color: #eef;
-     background: #eef;
-     height: 2px;
-     border-bottom: 1px solid #eef;
-     margin: 8px 1px 7px 1px;
-     -moz-box-shadow: inset 0px 1px 1px 1px #99f;
+     color: #89f;
+     background: #89f;
+     height: 1px;
+     border-bottom: 1px solid #89f;
+     margin: 8px -2px 7px -1px;
 }
 
 div.routersummary h3 {
@@ -125,7 +147,7 @@ div.routersummary h3 {
      font-size: 9pt;
      letter-spacing: 0.05em;
      margin: -14px 0px -15px 1px;
-     padding: 5px 0px 5px 0px;
+     padding: 1px 0px 1px 0px;
      background: #c5d5fb;
      text-transform: uppercase;
 }
@@ -136,31 +158,33 @@ div.routersummary h4 {
      font-size: 8.5pt;
      letter-spacing: 0.05em;
      margin: -14px 0px -15px 1px !important;
-     padding: 2px 3px 3px 3px;
+     padding: 7px 3px 5px 3px;
      background: #c1d1f7;
      text-transform: capitalize;
      text-decoration: none !important;
      color: #2b2;
      text-align: center !important;
+     line-height: 135%;
 }
 
 div.routersummary table {
      border: 0;
      text-align: center !important;
-     margin: -5px 5px;
-     width: 175px !important;
+     margin: -5px 5px !important;
+     width: 192px !important;
      overflow: hidden;
      font-size: 8pt;
      padding: 0px -10px;
      background-image: none !important;
      background-color: transparent !important;
-     text-align: center !important;
 }
 
-div.routersummary tr {
+div.routersummary tr, div.routersummary td {
      background-image: none !important;
      background-color: transparent !important;
      border: 0 !important;
+     line-height: 120% !important;
+     padding: 0 1px !important;
 }
 
 div.routersummary form {
@@ -173,19 +197,11 @@ div.routersummary p {
      padding: 0;
 }     
 
-/*
-div.routersummary img {
-     margin: 5px -10px -5px -10px;
-     overflow: hidden;
-}     
-*/
-
 div.routersummary a:link, div.routersummary a:visited {
-     text-shadow: 0px 0px 1px rgba(0, 0, 32, 0.3);
+     line-height: 120%;
 }
 
 div.routersummary a:hover {
-     text-shadow: 0px 0px 1px rgba(255, 96, 0, 0.7);
      color: #f60;
 }
 
@@ -195,18 +211,12 @@ div.routersummary td {
      border: 0 !important;
 }
 
-div.routersummary tr:nth-child(even) {
-     background-color: #f60;
-     background-image: none !important;
-}
-
-div.routersummarytr:nth-child(odd) {
-     background-color: #f00;
-     background-image: none !important;
+div.routersummary form {
+     margin: -20px 0 !important;   
 }
 
 div.news li {
-     padding-top: 0px	0px !important;
+     padding-top: 0px !important;
      margin-bottom: -23px !important;
 }
 
@@ -220,7 +230,7 @@ div.warning {
 }
 
 .langbox {
-     margin: 22px -20px 0px 5px;
+     margin: 20px -18px 0px 5px;
 }
 
 td {
@@ -249,5 +259,9 @@ div.graphspanel img {
 }
 
 div.graphspanel hr {
-     margin: 20px 0;
+     margin: 20px 0 10px !important;
+}
+
+table {
+     width: 100% !important;
 }

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

@@ -91,8 +91,8 @@ div.routersummaryouter {
 
 div.routersummary {
 /*  margin: 0px 20px 20px 0px; */
-     width: 175px;
-     padding: 10px;
+     width: 180 px;
+     padding: 8px;
      text-align: center !important;
      border: 1px solid #447;
      background: #ccddf6);
@@ -118,7 +118,7 @@ div.routersummary hr {
      background: #eef;
      height: 2px;
      border-bottom: 1px solid #eef;
-     margin: 8px -10px 7px -10px;
+     margin: 8px -7px 7px -7px;
      -moz-box-shadow: inset 0px 1px 1px 1px #ddf;
 }
 
@@ -131,7 +131,7 @@ div.routersummary h3 {
      border: 0;
      font-size: 9.5pt;
      letter-spacing: 0.04em;
-     margin: -4px -6px;
+     margin: -4px -3px;
      padding: 2px 0;
      background: #c5d5fb;
      text-transform: uppercase;
@@ -154,7 +154,7 @@ div.routersummary h4 {
      border-bottom: 0 !important;
      font-size: 8.5pt;
      letter-spacing: 0.02em;
-     margin: -7px -9px -7px -9px !important;
+     margin: -7px -7px -7px -7px !important;
      padding: 0px 3px 1px 3px;
      background: #eef;
      text-transform: capitalize;
@@ -167,7 +167,7 @@ div.routersummary table {
      border: 0;
      text-align: center !important;
      margin: -7px -5px -6px -5px;
-     width: 185px !important;
+     width: 190px !important;
      overflow: hidden;
      font-size: 8pt;
      padding: 0px -10px;
@@ -181,6 +181,11 @@ div.routersummary tr {
      border: 0 !important;
 }
 
+div.routersummary td:first-child {
+     max-width: 90px;
+     overflow: hidden;
+}
+
 div.tunnels {
      margin-top: 6px !important;
      margin-left: -2px !important;
@@ -322,7 +327,7 @@ div.news {
      margin: 0px 15px 10px 220px;
      padding: 10px 25px 7px 25px;
      border: 1px solid #447;
-     color: #000;
+     color: #224;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -khtml-border-radius: 4px;
@@ -427,7 +432,7 @@ div.configure {
 div.configure h3, div.graphspanel h3 {
      border: 1px solid #447;
      border-left: 5px solid #447;
-     padding: 3px 5px 3px 5px;
+     padding: 5px;
      margin: 15px 0 15px 0;
      border-radius: 0 4px 4px 0;
      -moz-border-radius: 0 4px 4px 0;
@@ -1083,3 +1088,17 @@ div.joblog hr {
 .formaction {
      text-align: right;
 }
+
+div.footnote {
+     text-align: right;
+     color: #447;
+     font-size: 7pt;
+}
+
+div.footnote hr{
+     margin: 20px 0 5px 0 !important;
+     color: #447;
+     background: #447;
+     height: 1px;
+     border: 0px solid #447;
+}

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

@@ -163,7 +163,7 @@ div.routersummary {
      width: 190px; 
      color: inherit; 
      margin: 0; 
-     padding: 10px 1px 5px 1px; 
+     padding: 8px 1px 4px 1px; 
      text-align: center !important; 
      border: 1px solid #99f; 
      font-size: 9pt; 
@@ -239,6 +239,11 @@ div.routersummary tr {
      border: 0 !important;
 }
 
+div.routersummary td:first-child {
+     max-width: 90px;
+     overflow: hidden;
+}
+
 div.tunnels table{
      margin: -2px 0px -4px 2px !important;
      text-align: center !important;
@@ -888,5 +893,19 @@ code {
      text-align: left;
      font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
      color: #0d0;
-     padding: 0 5px;
+     padding: 0 2px;
+}
+
+div.footnote {
+     text-align: right;
+     color: #99f;
+     font-size: 7pt;
+}
+
+div.footnote hr{
+     margin: 15px 0 5px 0 !important;
+     color: #99f;
+     background: #99f;
+     height: 1px;
+     border: 0px solid #99f;
 }

installer/resources/themes/snark/ubergine/snark.css

@@ -474,18 +474,18 @@ input[type=submit]:active {
      text-shadow: 0 !important;
 }
 
-input[type=image] {
+input[type=image], thead img {
      padding: 0 !important;
-     background: #000;
      -moz-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      border: medium none;
      margin: 0 2px;
+     opacity: 0.8;
 }
 
-input[type=image]:hover {
-     border: 1px outset #bbb;
+input[type=image]:hover, thead img:hover {
+     opacity: 1;
 }
 
 input[type=text]:active, input[type=text]:hover, input.r:hover {

installer/resources/themes/snark/vanilla/snark.css

@@ -158,7 +158,7 @@ thead {
 th {
      padding: 4px 2px 4px 4px;
      font-size: 9pt;
-     border-top: 1px outset #001;
+     border-top: 1px outset #604;
      border-bottom: 1px inset #604;
      whitespace: nowrap;
      font-variant: small-caps !important;
@@ -501,15 +501,16 @@ input[type=submit]:active {
 
 input[type=image] {
      padding: 0 !important;
-     background: none;
      -moz-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      border: medium none;
      margin: 0 2px;
+     opacity: 0.9 !important;
 }
 
 input[type=image]:hover {
+     opacity: 1 !important;
 }
 
 input[type=text]:active, input[type=text]:hover, input.r:hover {