Console theme tweaks:

- Use plugin icon for unidentified sidebar plugins and ensure placement and
  coloring is consistent
- Mobile:
  - Fix misaligned elements in light theme
  - Enhance 'Summary Bar' link
This commit is contained in:
str4d
2017-07-31 19:30:07 +00:00
parent 903f46f3a8
commit 82806099a7
5 changed files with 114 additions and 40 deletions

View File

@@ -31,10 +31,21 @@ body {
}
.routersummary div[style="height: 36px;"] + a {
margin: -5px 0 -3px !important;
display: inline-block;
}
div[style="height: 36px;"] + a, a[href="/summaryframe"] {
display: inline-block;
margin: -3px 0 !important;
padding: 2px 10px;
border-radius: 15px;
border: 1px solid #7778bf;
}
a[href="/summaryframe"] {
margin: 2px 0 !important;
}
.routersummary hr:first-child {
margin-bottom: 11px;
}

View File

@@ -27,6 +27,18 @@ div[style="height: 36px;"] {
height: auto !important;
}
div[style="height: 36px;"] + a, a[href="/summaryframe"] {
display: inline-block;
margin: 7px 0 0 !important;
padding: 4px 15px !important;
border-radius: 15px;
border: 1px solid #494;
}
a[href="/summaryframe"] {
margin: 3px 0 2px !important;
}
div.routersummary img[src$="i2plogo.png"] {
width: 357px;
margin-top: 6px;
@@ -42,11 +54,6 @@ div.routersummary {
}
}
div[style^='height'] + a {
display: inline-block;
padding-top: 8px !important;
}
.routersummary td,
.routersummary a,
.routersummary h4,

View File

@@ -461,7 +461,8 @@ p:empty + .sb_notice {
padding: 4px 2px 4px 24px;
text-align: left;
border-bottom: 1px dotted #ddf;
background: url(images/application.png) left center no-repeat;
background: #f8f8ff url(/themes/console/images/plugin.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(/themes/console/images/plugin.png) 3px center no-repeat;
background-size: 14px 14px;
}
@@ -476,57 +477,58 @@ p:empty + .sb_notice {
#sb_services a:hover {
background-blend-mode: normal;
background-color: #ffe;
}
#sb_services a[href="/susimail/susimail"] {
background: #f8f8ff url(images/inbox.png) 2px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/inbox.png) 2px center no-repeat;
background: #f8f8ff url(images/inbox.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/inbox.png) 3px center no-repeat;
}
#sb_services a[href="/susimail/susimail"]:hover {
background: #ffe url(images/inbox.png) 2px center no-repeat;
background: #ffe url(images/inbox.png) 3px center no-repeat;
border-radius: 2px;
}
#sb_services a[href="/i2psnark/"] {
background: #f8f8ff url(/themes/console/images/i2psnark.png) 2px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(/themes/console/images/i2psnark.png) 2px center no-repeat;
background: #f8f8ff url(/themes/console/images/i2psnark.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(/themes/console/images/i2psnark.png) 3px center no-repeat;
background-size: 16px 16px;
}
#sb_services a[href="/i2psnark/"]:hover {
background: #ffe url(/themes/console/images/i2psnark.png) 2px center no-repeat;
background: #ffe url(/themes/console/images/i2psnark.png) 3px center no-repeat;
background-size: 16px 16px;
border-radius: 2px;
}
#sb_services a[href="http://127.0.0.1:7658/"] {
background: #f8f8ff url(images/server.png) 2px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/server.png) 2px center no-repeat;
background: #f8f8ff url(images/server.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/server.png) 3px center no-repeat;
}
#sb_services a[href="http://127.0.0.1:7658/"]:hover {
background: #ffe url(images/server.png) 2px center no-repeat;
background: #ffe url(images/server.png) 3px center no-repeat;
border-radius: 2px;
}
#sb_services a[href="/orchid/"] {
background: #f8f8ff url(images/flower.png) 2px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/flower.png) 2px center no-repeat;
background: #f8f8ff url(images/flower.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/flower.png) 3px center no-repeat;
}
#sb_services a[href="/orchid/"]:hover {
background: #ffe url(images/flower.png) 2px center no-repeat;
background: #ffe url(images/flower.png) 3px center no-repeat;
border-radius: 2px;
}
#sb_services a[href*="bote"] {
background: #f8f8ff url(images/mail_black.png) 2px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/mail_black.png) 2px center no-repeat;
background: #f8f8ff url(images/mail_black.png) 3px center no-repeat;
background: rgba(248, 248, 255, 0.8) url(images/mail_black.png) 3px center no-repeat;
}
#sb_services a[href*="bote"]:hover {
background: #ffe url(images/mail_black.png) 2px center no-repeat;
background: #ffe url(images/mail_black.png) 3px center no-repeat;
border-radius: 2px;
}
@@ -2623,7 +2625,7 @@ button:hover, button:focus, button:active, select:hover, select:focus, select:ac
text-shadow: none;
}
a:link, #graphopts a:visited, .news #newsdisplay a {
a:link, #graphopts a:visited, .news #newsdisplay a, .news #newsdisplay a:visited {
color: #3b6bbf;
text-decoration: none;
font-weight: bold;

View File

@@ -1,21 +1,23 @@
/* Console Theme "Light" - Mobile Override */
div.routersummaryouter {
.routersummaryouter {
float: none;
margin: 0 !important;
position: relative;
width: auto;
}
div.routersummary {
.routersummary {
float: none;
width: auto;
max-width: 600px;
margin: 0 auto -6px;
padding-left: 0;
padding-right: 0;
}
@media screen and (min-width: 1500px) {
div.routersummary {
.routersummary {
width: 600px !important;
}
@@ -24,25 +26,55 @@ div.routersummary {
}
}
div[style="height: 36px;"] + a, a[href="/summaryframe"] {
display: inline-block;
margin: 10px 0 -2px;
padding: 2px 10px;
border-radius: 15px;
border: 1px solid #7778bf;
background: #fafaff;
}
a[href="/summaryframe"] {
margin: 5px 0 2px;
}
#xhr {
margin-top: 9px !important;
}
.routersummary h3, .routersummary h4, .routersummary hr {
margin-left: 1px;
margin-right: 1px;
}
.routersummary h3 {
padding-top: 5px;
padding-bottom: 5px;
}
.routersummary h3, .routersummary h3 a {
font-size: 11pt !important;
}
.routersummary hr:first-child {
margin-bottom: 11px;
margin-bottom: 8px;
}
.routersummary td, .routersummary h4, .routersummary a {
font-size: 9pt !important;
}
div.routersummary table, table[id^="sb_"] {
.routersummary table, table[id^="sb_"], #sb_services, #sb_internals, #sb_advanced {
width: 100% !important;
margin: -7px 0 -4px !important;
margin: -9px 0 -7px !important;
border-radius: 4px;
border-collapse: separate;
border-spacing: 0;
}
table[id^="sb_"] td {
padding: 3px 2px;
table[id^="sb_"] td, #sb_localtunnels td {
padding: 3px 6px !important;
}
table[id^="sb_"] tr:nth-child(even) td {
@@ -57,15 +89,25 @@ table[id^="sb_"] tr:nth-child(odd) td {
#sb_services {
text-align: center;
border-collapse: separate !important;
margin: -12px 0 -8px !important;
}
#sb_services td {
border-radius: 4px;
}
#sb_services a {
display: inline-block;
width: 24% !important;
min-width: 100px;
box-sizing: border-box;
white-space: nowrap;
border: none !important;
border-radius: 4px;
padding: 4px 10px 4px 30px !important;
background-position: 8px center !important;
margin: 0 3px;
background-color: transparent !important;
}
.routersummary button[type="submit"], .routersummary button[type="cancel"] {
@@ -75,20 +117,25 @@ table[id^="sb_"] tr:nth-child(odd) td {
}
h1 {
margin: 14px 0 -1px;
margin: 14px 0 -11px;
min-width: 0;
}
div.news {
margin: 0 0 -11px;
.news, .news#news {
margin: 10px 0 -11px;
min-width: 0;
}
div.main {
.main {
margin: 10px 0 0;
min-width: 0;
}
.newsentry + hr + #newsStatus, .newsentry + hr + #newsStatus + #newsDisplay {
margin-top: -3px !important;
margin-bottom: -2px !important;
}
.sorry {
margin-left: 0 !important;
}

View File

@@ -33,9 +33,16 @@ div.routersummary {
}
}
div[style^='height'] + a {
div[style="height: 36px;"] + a, a[href="/summaryframe"] {
display: inline-block;
padding-top: 8px !important;
margin: 12px 0 0 !important;
padding: 4px 15px !important;
border-radius: 15px;
border: 1px solid #241f69;
}
a[href="/summaryframe"] {
margin: 3px 0 2px !important;
}
.routersummary td,
@@ -73,8 +80,8 @@ div.routersummary table,
}
.routersummary tr td {
border-top: 1px inset #000 !important;
border-bottom: 1px inset #000 !important;
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
}
.routersummary tr:hover td {