diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css index 7dda26184..f8b78ed41 100644 --- a/installer/resources/themes/console/classic/console.css +++ b/installer/resources/themes/console/classic/console.css @@ -11,7 +11,7 @@ body { font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; } -.hide { +.hide, .hideme { display: none; } @@ -199,12 +199,6 @@ div.sorry hr { margin: 10px 0; } -div.toolbar { - margin: 0 0 2em 0; - font-weight: bold; - display: none !important; -} - /* Side panel */ div.routersummaryouter { @@ -367,6 +361,11 @@ div.routersummary td { margin: -1px 0 -3px; } +#sb_internals a, #sb_services a, #sb_advanced a { + display: inline-block; + padding: 2px 2px 1px; +} + div.routersummary form { margin: -2px 0; } @@ -466,6 +465,582 @@ div.routersummary a:hover { filter: drop-shadow(0 0 1px #f60) saturate(200%); -webkit-filter: drop-shadow(0 0 1px #f60) saturate(200%); } +/* end sidebar */ + +/* buttons & inputs */ +select { + margin: 3px 5px; + vertical-align: middle; + min-width: 160px; + background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + border-radius: 2px; + border: 1px solid #bbb; + box-shadow: inset 0 0 0 1px #fff; + padding: 4px 16px 4px 2px; + text-overflow: ellipsis; + color: #333; +} + +select option { + background: #fff; +} + +@-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%); +} + +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 0 1px #89f; +} +} + +select:focus { + color: #000; +} + +select[name="newlogclass"] { + width: 80%; + width: calc(100% - 180px); + margin-right: 0; +} + +select[name="newlogclass"] { + margin-right: 0; +} + +.optbox { + vertical-align: middle; + margin-right: 0; +} + +.homelinkedit .optbox { + margin: 0; +} + +input { + margin: 3px 5px 3px 0; +} + +input[type="radio"], input[type="checkbox"] { + min-width: 16px !important; + min-height: 16px !important; + vertical-align: middle; +} + +input[type="file"] { + margin: 3px 5px; +} + +input[type="text"], input[type="password"] { + margin: 3px 5px 3px 5px; + vertical-align: middle; + min-width: 160px; + border: 1px solid #bbb; + box-shadow: inset 1px 1px 1px #ddd; + border-radius: 2px; + padding: 4px; + color: #333; +} + +input[type="text"]:focus, input[type="password"]:focus { + box-shadow: inset 0 0 0 1px #89f; + color: #000; +} + +button, input, select { + font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + color: #333; +} + +button:hover, input[type="submit"]:hover, input[type="reset"]:hover { + background: #fff; + background: linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button:active, input[type="submit"]:active, input[type="reset"]:active { + background: #ddd; +} + +input.search[type="text"] { + background: #fff url(/themes/console/images/buttons/search.png) no-repeat 2px center; + padding: 3px 3px 3px 24px; + min-height: 22px; + border: 1px solid #bbb; + color: #333 !important; +} + +input[name="refreshInterval"] { + text-align: right; +} + +/* accessibility tweak - colors rather than focus rings where possible */ + +.optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus { +/* -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#89f')";*/ + -webkit-filter: drop-shadow(0 0 2px #89f); + filter: drop-shadow( 0 0 2px #89f); + border: 0; + outline: none; +} + +.optbox:disabled:hover, input:disabled:hover { + filter: none; +} + +button:focus, input[type="submit"]:focus, input[type="reset"]:focus { + filter: drop-shadow(0 0 2px #89f); + -webkit-filter: drop-shadow(0 0 2px #89f); +} + +button::-moz-focus-inner, input::-moz-focus-inner { + outline: none; + border: none; +} + +/* end accessibility */ + +/* graphical buttons */ + +input[type="submit"], input[type="reset"], button { + border: 1px solid #999; + box-shadow: inset 0 0 0 1px #fff; + background: #eee; + background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + color: #333; + margin: 3px 8px 3px 0; + font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + padding: 4px 5px; + text-decoration: none; + border-radius: 2px; + opacity: 1; + background-size: 14px auto, 100% 100% !important; + filter: saturate(70%) drop-shadow(0 0 1px #ccc); + -webkit-filter: saturate(70%) drop-shadow(0 0 1px #ccc); +} + +button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus { + background: linear-gradient(to bottom, #ddd 0%, #fff 100%); + border: 1px solid #89f; + color: #222; + filter: saturate(100%) drop-shadow(0 0 1px #89f); + -webkit-filter: saturate(100%) drop-shadow(0 0 1px #89f); +} + +button:active, input[type="submit"]:active, input[type="reset"]:active { + border: 1px solid #999; + box-shadow: inset 2px 2px 2px #555; + background-blend-mode: luminosity; + filter: saturate(100%) drop-shadow(0 0 1px #ccc); + -webkit-filter: saturate(100%) drop-shadow(0 0 1px #ccc); +} + +input.accept, button.accept { + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.accept:hover, button.accept:hover, +input.accept:focus, button.accept:focus { + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.accept[value^="Unban"], button.accept[value^="Unban"] { + background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover, +input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus { + background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.accept[value^="Create"], button.accept[value^="Create"] { + background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover, +input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus { + background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.accept[value^="Filter"], button.accept[value^="Filter"] { + background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover, +input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus { + background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.add, button.add { + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.add:hover, button.add:hover, +input.add:focus, button.add:focus { + background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.add[value^="Adjust"], button.add[value^="Adjust"] { + background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover, +input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus { + background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.cancel, button.cancel { + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.cancel:hover, button.cancel:hover, +input.cancel:focus, button.cancel:focus { + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.accept[value^="Show"], button.accept[value^="Show"], +input.check[value^="View"], button.check[value^="View"] { + background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover, +input.check[value^="View"]:hover, button.check[value^="View"]:hover, +input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus, +input.check[value^="View"]:focus, button.check[value^="View"]:focus { + background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); +} + +input.cancel[value^="Hide"], button.cancel[value^="Hide"], +input.delete[value^="Do not view"], button.delete[value^="Do not view"] { + background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover, +input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover, +input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus, +input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus { + background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.check, button.check { + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.check:hover, button.check:hover, +input.check:focus, button.check:focus { + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.check[value$="updates"], button.check[value$="updates"] { + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.check[value$="updates"]:hover, button.check[value$="updates"]:hover, +input.check[value$="updates"]:focus, button.check[value$="updates"]:focus { + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.delete, button.delete { + background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.delete:hover, button.delete:hover, +input.delete:focus, button.delete:focus { + background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.delete[value^="Ban"], button.delete[value^="Ban"] { + background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover, +input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus { + background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.download, button.download { + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.download:hover, button.download:hover, +input.download:focus, button.download:focus { + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.download[value^="Join"], button.download[value^="Join"] { + background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.download[value^="Join"]:hover, button.download[value^="Join"]:hover, +input.download[value^="Join"]:focus, button.download[value^="Join"]:focus { + background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.download[value$="from File"], button.download[value$="from File"], +input.download[value$="from file"], button.download[value$="from file"] { + background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.download[value$="from File"]:hover, button.download[value$="from File"]:hover, +input.download[value$="from file"]:hover, button.download[value$="from file"]:hover, +input.download[value$="from File"]:focus, button.download[value$="from File"]:focus, +input.download[value$="from file"]:focus, button.download[value$="from file"]:focus { + background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.download[value^="Dump"], button.download[value^="Dump"] { + background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover, +input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus { + background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.go, button.go, input[value="GO"] { + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.go:hover, button.go:hover, input[value="GO"]:hover, +input.go:focus, button.go:focus, input[value="GO"]:focus { + background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.go[value^="Create"], button.go[value^="Create"] { + background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.go[value^="Create"]:hover, button.go[value^="Create"]:hover, +input.go[value^="Create"]:focus, button.go[value^="Create"]:focus { + background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reload, button.reload { + background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.reload:hover, button.reload:hover, +input.reload:focus, button.reload:focus { + background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reload[value$="restart"], button.reload[value$="restart"] { + background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover, +input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus { + background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reload[value^="Update"], button.reload[value^="Update"] { + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover, +input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus { + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reload[value="Force GC"], button.reload[value="Force GC"] { + background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover, +input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus { + background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.stop, button.stop { + background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px 6px, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +input.stop:hover, button.stop:hover, +input.stop:focus, button.stop:focus { + background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px 6px, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.search { + background: url(/themes/console/images/buttons/search.png) no-repeat 6px 6px, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 5px 5px 21px; +} + +button.search:hover, +button.search:focus { + background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px 6px, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + + +/* client config buttons aka project "X" */ + +button.Xaccept { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xaccept:hover, button.Xaccept:focus { + background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.Xstop { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xstop:hover, button.Xstop:focus { + background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.Xadd { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xadd:hover, button.Xadd:focus { + background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.Xdelete { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xdelete:hover, button.Xdelete:focus { + background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.Xcheck { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xcheck:hover, button.Xcheck:focus { + background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button.Xdownload { + font-size: 0; + text-indent: -99999px; + background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 12px 11px; +} + +button.Xdownload:hover, button.Xdownload:focus { + background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { + outline: none; + border: none; +} + +/* end project "X" */ + +/* sidebar buttons */ + +.routersummary button { + margin: 0 1px -3px; + min-width: 87px; +} + +.routersummary .reload, .routersummary .stop { + text-indent: -99999px; + background-size: 16px 16px, 100% 100% !important; +} + +.routersummary .reload { + background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; +} + +.routersummary .reload:hover, .routersummary .reload:focus { + background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; + border: 1px solid #89f; +} + +.routersummary .reload:active, .routersummary .stop:active, .routersummary .download:active { + box-shadow: inset 2px 2px 2px #555; + border: 1px solid #999 !important; +} + +.routersummary .stop { + background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); +} + +.routersummary .stop:hover, .routersummary .stop:focus { + background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); + border: 1px solid #89f; +} + +.routersummary .download { + background: url(/themes/console/images/buttons/download.png) 3px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 5px 3px 5px 17px !important; +/* margin-top: -4px;*/ +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +.routersummary .download, .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { + padding-left: 19px !important; +} +} + +.routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { + background: url(/themes/console/images/buttons/download.png) 3px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); + background-size: 16px 16px, 100% 100% !important; + padding: 5px 3px 5px 17px !important; + border: 1px solid #f60; +} + +/* end sidebar buttons */ +/* end buttons & inputs */ + + div.main { margin: 0 1px 0 200px; @@ -547,6 +1122,10 @@ div.welcome { margin-top: 5px; } +.welcome + div .tidylist { + line-height: 150% !important; +} + .main#dns, .main#webmail, .main#torrents { padding: 0 !important; } @@ -630,6 +1209,19 @@ div.news h3 { text-shadow: none !important; padding: 5px 10px 3px; margin: 10px 10px -7px !important; + letter-spacing: 0.1em; +} + +.newsentry h3 { + letter-spacing: 0.1em; +} + +.newsentry h3 a { + letter-spacing: 0.08em !important; +} + +.newsentry p { + line-height: 140% !important; } div.news p { @@ -834,7 +1426,9 @@ table#profiles td:first-child, #profiles td:last-child { #profiles td[colspan="7"] hr { display: none; } -#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, .homelinkedit tr:hover, .main#debug table:first-of-type tr:hover td { + +#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, +.homelinkedit tr:hover, .main#debug table:first-of-type tr:hover td { background: #fff; background: linear-gradient(to bottom, #fff 0%, #ffe 100%); color: #104e99; @@ -842,6 +1436,16 @@ table#profiles td:first-child, #profiles td:last-child { border-bottom: 1px solid #89f; } +@media screen and (-webkit-min-device-pixel-ratio:0) { + +#profiles tr:hover, #floodfills tr:hover, #ntcpconnections tr:hover, #udpconnections tr:hover, +.homelinkedit tr:nth-last-child(n+2):hover, .main#debug table:first-of-type tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td { + border-top: inherit; + border-bottom: inherit; + background: #ffd !important; +} +} + tr:hover th { color: #0c153d; } @@ -957,7 +1561,6 @@ table#pluginconfig { } #pluginconfig button, #webappconfig button, #clientconfig button { -/* min-width: 60px !important;*/ margin: 3px; } @@ -985,6 +1588,10 @@ table#enviro td, table#eventlogs td { padding: 0 0 0 2px; } +#criticallogs tr:first-child { + display: none; +} + .logtable tr:first-child { border-bottom: 1px solid #89f; padding: 5px 10px; @@ -1043,7 +1650,13 @@ div.configure h2:first-child { #sidebarconf button { margin: 2px; - padding: 1px; + padding: 2px 3px; + background-size: 100% 100% !important; +} + +#sidebarconf button img { + height: 14px; + width: 14px; } #sidebarconf th:nth-child(1) { @@ -1071,7 +1684,7 @@ div.configure h2:first-child { } #sidebarconf tr:hover, #eventlog tr:hover, .tunneldisplay tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #jardump tr:hover { - background: #fff; + background: #ffd; background: linear-gradient(to bottom, #fff 0%, #ffe 100%); color: #104e99; border-top: 1px solid #89f !important; @@ -1099,7 +1712,7 @@ div.configure h2:first-child { } #sidebarconf td:nth-child(3), #sidebarconf td:nth-child(4) { - width: 75px; + width: 59px; padding: 0; white-space: nowrap; } @@ -1202,7 +1815,7 @@ h2 { } h3, h4#updateplugins { - font-size: 10.5pt; + font-size: 11pt; padding: 6px 10px; border: 1px solid #89f; margin-bottom: 10px; @@ -1217,6 +1830,10 @@ h3.ptitle { margin-bottom: -13px; } +h3.ptitle, h3.tabletitle, th.th_title { + font-size: 10pt; +} + h3.enbeddedtitle, h4.embeddedtitle { margin-bottom: 5px !important; } @@ -1601,7 +2218,6 @@ img.app, img.app2p { width: auto; max-height: 32px; max-width: 32px; - max-width: auto; padding: 5px 40px; } @@ -1675,6 +2291,7 @@ h3#servicedebug a, h3#graphinfo a { .main#tunnels h3 a[href^="/configtunnels#"]::after, #logs h3 a::after { content: url(/themes/console/images/buttons/configure.png); float: right; + padding: 1px; } .main#tunnels h3 a[href^="/configtunnels#"]:hover { @@ -1712,7 +2329,8 @@ h3 + .statusnotes { border: 1px solid #89f !important; border-top: 0; padding: 5px 0; - background: #fff url(images/tinytitle.png) center center repeat-x !important; + background: #fff url(images/tinytitle.png) center center repeat-x; + background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); } .statusnotes + .statusnotes { @@ -1889,6 +2507,11 @@ table#oldhome { vertical-align: sub !important; } +.homelinkedit th:first-child, #sidebarconf th:first-child { + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + font-size: 0; +} + .homelinkedit th:last-child, .homelinkedit th:nth-child(3) { text-align: left !important; } @@ -1966,6 +2589,10 @@ p#pluginconfigtext { border-top: 1px solid #89f; } +#addkeyring tr:last-child td { + padding: 7px 2px; +} + .formaction form, td form { margin-bottom: 0; } @@ -1996,13 +2623,16 @@ p#enablefullstats { margin-bottom: 0; } -.formaction#shutdown, .formaction#restart, .formaction#systray, .formaction#runonstart, .formaction#dumpthreads, .formaction#browserstart, .formaction#sidebardefaults, .formaction#tunnelconfigsave, .formaction#updateplugins, .formaction#consolepass { +.formaction#shutdown, .formaction#restart, .formaction#systray, .formaction#runonstart, +.formaction#dumpthreads, .formaction#browserstart, .formaction#sidebardefaults, +.formaction#tunnelconfigsave, .formaction#updateplugins, .formaction#consolepass { border: 1px solid #89f; margin-top: -13px; margin-bottom: -5px; } -.formaction#clientsconfig, .formaction#webappconfigactions, .formaction#pluginupdater, .formaction#sidebardefaults, .formaction#tunnelconfigsave, .formaction#consolepass { +.formaction#clientsconfig, .formaction#webappconfigactions, .formaction#pluginupdater, .formaction#sidebardefaults, +.formaction#tunnelconfigsave, .formaction#consolepass { border: 1px solid #89f; margin-top: -6px; } @@ -2061,7 +2691,7 @@ p#enablefullstats { opacity: 0.9; filter: drop-shadow(0 0 1px #999); -webkit-filter: drop-shadow(0 0 1px #999); - transition: ease all 0.3s 0; + transition: ease all 0.3s 0s; } .langbox img:hover { @@ -2069,7 +2699,7 @@ p#enablefullstats { filter: drop-shadow(0 0 1px #f60); -webkit-filter: drop-shadow(0 0 1px #f60); transform: scale(1.1); - transition: ease all 0.3s 0; + transition: ease all 0.3s 0s; } .links { @@ -2099,7 +2729,7 @@ p#enablefullstats { } a:link { - color: #006; + color: #33a; text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -2119,11 +2749,16 @@ a:hover, a:focus { } a:active { - color: #f93; + color: #f93 !important; text-decoration: none; font-weight: bold; } +a.script { + letter-spacing: normal; + word-spacing: normal; +} + pre { margin: 0 20px; overflow: auto; @@ -2214,10 +2849,11 @@ div.graphspanel a img { } div.graphspanel a img:hover { - border: 1px solid #89f; + border: 1px solid #f60; text-align: center !important; - background: #001; + background: #ccf; opacity: 1; + cursor: url(/themes/console/images/cursor_zoom.png), pointer; } div.graphspanel hr { @@ -2291,143 +2927,6 @@ div.footnote hr { border: 0 solid #99f; } -select { - margin: 3px 5px; - vertical-align: middle; - min-width: 160px; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); - border-radius: 2px; - border: 1px solid #bbb; - box-shadow: inset 0 0 0 1px #fff; - padding: 4px 16px 4px 2px; - text-overflow: ellipsis; - color: #333; -} - -select option { - background: #fff; -} - -@-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%); -} - -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 0 1px #89f; -} -} - -select:focus { - color: #000; -} - -select[name="newlogclass"] { - width: 80%; - width: calc(100% - 180px); - margin-right: 0; -} - -select[name="newlogclass"] { - margin-right: 0; -} - -button, input, select { - font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; - color: #333; -} - -.optbox { - vertical-align: middle; - margin-right: 0; -} - -.homelinkedit .optbox { - margin: 0; -} - -input { - margin: 3px 5px 3px 0; -} - -input[type="file"] { - margin: 3px 5px; -} - -input[type="text"], input[type="password"] { - margin: 3px 5px 3px 5px; - vertical-align: middle; - min-width: 160px; - border: 1px solid #bbb; - box-shadow: inset 1px 1px 1px #ddd; - border-radius: 2px; - padding: 4px; - color: #333; -} - -input[type="text"]:focus, input[type="password"]:focus { - box-shadow: inset 0 0 0 1px #89f; - color: #000; -} - -button { - margin: 1px; -/* min-width: 50px;*/ -} - -button:hover, input[type="submit"]:hover, input[type="reset"]:hover { - background: #fff; - background: linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button:active, input[type="submit"]:active, input[type="reset"]:active { - background: #ddd; -} - -input.search[type="text"] { - background: #fff url(/themes/console/images/buttons/search.png) no-repeat 2px center; - padding: 3px 3px 3px 24px; - min-height: 22px; - border: 1px solid #bbb; - color: #333 !important; -} - -input[name="refreshInterval"] { - text-align: right; -} - -/* accessibility tweak - colors rather than focus rings where possible */ - -.optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus { -/* -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#89f')";*/ - -webkit-filter: drop-shadow(0 0 2px #89f); - filter: drop-shadow( 0 0 2px #89f); - border: 0; - outline: none; -} - -.optbox:disabled:hover, input:disabled:hover { - filter: none; -} - -button:focus, input[type="submit"]:focus, input[type="reset"]:focus { - filter: drop-shadow(0 0 2px #89f); - -webkit-filter: drop-shadow(0 0 2px #89f); -} - -button::-moz-focus-inner, input::-moz-focus-inner { - outline: none; - border: none; -} - -/* end accessibility */ - .topness { font-size: 7.5pt; text-align: right; @@ -3624,425 +4123,6 @@ p#enablefullstats, p#gatherstats { } /* end informational images */ -/* buttons */ - -input[type="submit"], input[type="reset"], button { - border: 1px solid #999; - box-shadow: inset 0 0 0 1px #fff; - background: #eee; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); - color: #333; - margin: 3px 8px 3px 0; - font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; - padding: 4px 5px; - text-decoration: none; - border-radius: 2px; - opacity: 1; - background-size: 14px auto, 100% 100% !important; - filter: saturate(70%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(70%) drop-shadow(0 0 1px #ccc); -} - -button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus { - background: linear-gradient(to bottom, #ddd 0%, #fff 100%); - border: 1px solid #f60; - color: #222; - filter: saturate(100%) drop-shadow(0 0 1px #ccc); - -webkit-filter: saturate(100%) drop-shadow(0 0 1px #ccc); -} - -button:active, input[type="submit"]:active, input[type="reset"]:active { - box-shadow: inset 2px 2px 2px #555; - background-blend-mode: luminosity; -} - -input.accept, button.accept { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.accept:hover, button.accept:hover, -input.accept:focus, button.accept:focus { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.accept[value^="Unban"], button.accept[value^="Unban"] { - background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover, -input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus { - background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.accept[value^="Create"], button.accept[value^="Create"] { - background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover, -input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus { - background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.accept[value^="Filter"], button.accept[value^="Filter"] { - background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover, -input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus { - background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.add, button.add { - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.add:hover, button.add:hover, -input.add:focus, button.add:focus { - background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.add[value^="Adjust"], button.add[value^="Adjust"] { - background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover, -input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus { - background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.cancel, button.cancel { - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.cancel:hover, button.cancel:hover, -input.cancel:focus, button.cancel:focus { - background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.accept[value^="Show"], button.accept[value^="Show"], -input.check[value^="View"], button.check[value^="View"] { - background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover, -input.check[value^="View"]:hover, button.check[value^="View"]:hover, -input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus, -input.check[value^="View"]:focus, button.check[value^="View"]:focus { - background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); -} - -input.cancel[value^="Hide"], button.cancel[value^="Hide"], -input.delete[value^="Do not view"], button.delete[value^="Do not view"] { - background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover, -input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover, -input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus, -input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus { - background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.check, button.check { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.check:hover, button.check:hover, -input.check:focus, button.check:focus { - background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.check[value$="updates"], button.check[value$="updates"] { - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.check[value$="updates"]:hover, button.check[value$="updates"]:hover, -input.check[value$="updates"]:focus, button.check[value$="updates"]:focus { - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.delete, button.delete { - background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.delete:hover, button.delete:hover, -input.delete:focus, button.delete:focus { - background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.delete[value^="Ban"], button.delete[value^="Ban"] { - background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover, -input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus { - background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.download, button.download { - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.download:hover, button.download:hover, -input.download:focus, button.download:focus { - background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.download[value^="Join"], button.download[value^="Join"] { - background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.download[value^="Join"]:hover, button.download[value^="Join"]:hover, -input.download[value^="Join"]:focus, button.download[value^="Join"]:focus { - background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.download[value$="from File"], button.download[value$="from File"], -input.download[value$="from file"], button.download[value$="from file"] { - background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.download[value$="from File"]:hover, button.download[value$="from File"]:hover, -input.download[value$="from file"]:hover, button.download[value$="from file"]:hover, -input.download[value$="from File"]:focus, button.download[value$="from File"]:focus, -input.download[value$="from file"]:focus, button.download[value$="from file"]:focus { - background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.download[value^="Dump"], button.download[value^="Dump"] { - background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover, -input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus { - background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.go, button.go, input[value="GO"] { - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.go:hover, button.go:hover, input[value="GO"]:hover, -input.go:focus, button.go:focus, input[value="GO"]:focus { - background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.go[value^="Create"], button.go[value^="Create"] { - background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.go[value^="Create"]:hover, button.go[value^="Create"]:hover, -input.go[value^="Create"]:focus, button.go[value^="Create"]:focus { - background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.reload, button.reload { - background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.reload:hover, button.reload:hover, -input.reload:focus, button.reload:focus { - background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.reload[value$="restart"], button.reload[value$="restart"] { - background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover, -input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus { - background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.reload[value^="Update"], button.reload[value^="Update"] { - background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover, -input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus { - background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.reload[value="Force GC"], button.reload[value="Force GC"] { - background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover, -input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus { - background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -input.stop, button.stop { - background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); - padding: 5px 5px 5px 21px; -} - -input.stop:hover, button.stop:hover, -input.stop:focus, button.stop:focus { - background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -/* client config buttons aka project "X" */ - -button.Xaccept { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xaccept:hover, button.Xaccept:focus { - background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button.Xstop { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xstop:hover, button.Xstop:focus { - background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button.Xadd { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xadd:hover, button.Xadd:focus { - background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button.Xdelete { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xdelete:hover, button.Xdelete:focus { - background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button.Xcheck { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xcheck:hover, button.Xcheck:focus { - background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button.Xdownload { - font-size: 0; - text-indent: -99999px; - background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 12px 11px; -} - -button.Xdownload:hover, button.Xdownload:focus { - background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); -} - -button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { - outline: none; - border: none; -} - -/* end project "X" */ - -/* sidebar buttons */ - -.routersummary button { - margin: 0 1px -3px; - min-width: 87px; -} - -.routersummary .reload, .routersummary .stop { - text-indent: -99999px; - background-size: 16px 16px, 100% 100% !important; -} - -.routersummary .reload { - background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; -} - -.routersummary .reload:hover, .routersummary .reload:focus { - background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; - border: 1px solid #f60; -} - -.routersummary .reload:active, .routersummary .stop:active, .routersummary .download:active { - box-shadow: inset 2px 2px 2px #555; -} - -.routersummary .stop { - background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); -} - -.routersummary .stop:hover, .routersummary .stop:focus { - background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); - border: 1px solid #f60; -} - -.routersummary .download { - background: url(/themes/console/images/buttons/download.png) 3px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 5px 3px 5px 17px !important; -/* margin-top: -4px;*/ -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { -.routersummary .download, .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { - padding-left: 19px !important; -} -} - -.routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active { - background: url(/themes/console/images/buttons/download.png) 3px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%); - background-size: 16px 16px, 100% 100% !important; - padding: 5px 3px 5px 17px !important; - border: 1px solid #f60; -} - -/* end sidebar buttons */ - -/* end buttons */ /* login inputs */ @@ -4059,17 +4139,17 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re background-size: 16px 16px !important; } - /* responsive layout */ @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, -#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea { +body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, +#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, +.netdbentry th, .configtable th { font-size: 10pt !important; } .routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, -code, tt, div.news { +div.news { font-size: 9pt !important; } @@ -4092,7 +4172,7 @@ code, tt, div.news { width: 226px !important; } -.routersummary h3 a { +.routersummary h3 a, #netdboverview th, .newsentry h3 { font-size: 11pt !important; } @@ -4107,9 +4187,55 @@ div.app { .applabel { width: 150px !important; + padding: 4px 2px 2px !important; +} + +.applabel a { + height: 16px !important; } .footnote { font-size: 8pt !important; } + +h3, h3.ptitle, h3.tabletitle, th.th_title { + font-size: 11pt; +} + +h3#i2pclientconfig, h3.ptitle { + margin-bottom: -15px !important; +} + +h3#pluginmanage { + margin-bottom: -20px !important; +} + +h4#updateplugins { + margin-top: -16px !important; +} + + +#shutdown.formaction, #restart.formaction, #systray.formaction, #runonstart.formaction, #dumpthreads.formaction, #browserstart.formaction, #updateplugins.formaction { + margin-top: -15px; +} + +button[class^="X"] { + font-size: 0 !important; +} + +#jardump td { + font-size: 9pt !important; +} + +#jardump tt { + font-size: 8pt !important; +} + +table#leasesetdebug th, table#leasesetsummary th { + font-size: 11pt !important; +} + +div.news { + padding-bottom: 5px !important; +} } diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css index 5d3f038a8..ee6b4f610 100644 --- a/installer/resources/themes/console/classic/i2ptunnel.css +++ b/installer/resources/themes/console/classic/i2ptunnel.css @@ -7,9 +7,8 @@ body { 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; + font-size: 9pt; + background: #a4a4cb url(images/bg.png); } body.iframed { @@ -30,52 +29,6 @@ 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; } @@ -85,7 +38,7 @@ div.statusNotRunning { height: 16px; overflow: hidden; color: #d00; - background: url('images/console_status_stopped.png') center center no-repeat; + 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); @@ -96,7 +49,7 @@ div.statusRunning { height: 16px; overflow: hidden; color: #0b0; - background: url('images/console_status_running.png') center center no-repeat; + 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); } @@ -107,7 +60,7 @@ div.statusStarting { height: 16px; overflow: hidden; color: #339933; - background: url('images/console_status_starting.png') center center no-repeat; + 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); } @@ -180,8 +133,8 @@ hr { .control:hover, .control:focus { text-decoration: none; - color: #111; - border: 1px solid #f60 !important; + color: #111 !important; + border: 1px solid #89f !important; background: #ddd; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); box-shadow: inset 0 0 0 1px #fff !important; @@ -189,6 +142,8 @@ hr { .control:active { box-shadow: inset 2px 2px 1px #999 !important; + border: 1px solid #999 !important; + color: #333 !important; } .iframed .panel.iframed { @@ -198,8 +153,8 @@ hr { .panel { width: calc(100% - 14px); margin: 8px auto; - min-width: 450px; - max-width: 1400px; + min-width: 600px; + max-width: 1500px; overflow: hidden; text-align: left !important; border-radius: 2px; @@ -242,6 +197,10 @@ select:focus { box-shadow: 0 0 1px #89f; } +select option { + background: #fff; +} + @-moz-document url-prefix() { /* target firefox and derivatives only */ select { -moz-appearance: none; @@ -260,7 +219,7 @@ select:focus { } a:link { - color: #006; + color: #33a; text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -324,7 +283,7 @@ h3 { } th { - background: #fff url("/themes/console/classic/images/tinytitle.png") repeat right center; + background: #fff url(/themes/console/classic/images/tinytitle.png) repeat-x center center; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); padding: 5px; border-top: 1px solid #89f; @@ -344,7 +303,7 @@ td { } td.infohelp { - background: url(images/infohelp.png) 10px center no-repeat; + background: url(/themes/console/images/info/infohelp.png) 10px center no-repeat; background-size: 24px 24px; background-position: 6px center; padding: 10px 10px 10px 38px !important; @@ -444,13 +403,57 @@ th.tunnelControl { text-align: center; } -/* -.tunnelControl .control { - min-width: 60px !important; - display: inline-block; - margin: 0 !important; + +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::-moz-focus-inner, input::-moz-focus-inner { + outline: none; + border: none; +} + +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; } -*/ a.control { display: inline-block; @@ -473,6 +476,10 @@ a.control { border-top: 1px solid #89f; } +button.control, input[type="submit"], input[type="reset"] { + padding: 5px 8px !important; +} + .buttons > * { vertical-align: middle; } @@ -524,7 +531,7 @@ input { margin: 3px 0 !important; } -#localDestination { +#localDestination, .authentication { height: 30px !important; } @@ -612,14 +619,12 @@ table#statusMessages textarea, table#statusMessages textarea:active { } input::-moz-placeholder { - color: #f00; - font-weight: bold; + color: #900; opacity: 1; } ::-webkit-input-placeholder { - color: #f00; - font-weight: bold; + color: #900; opacity: 1; } @@ -732,7 +737,7 @@ input.tunnelName, input.tunnelDescription, #userAgents { } #wizardPanel p { - padding: 5px; + padding: 5px 10px; margin: 0; text-align: justify; } @@ -799,7 +804,7 @@ input[type="checkbox"] { margin: 5px !important; } -textarea[name="accessList"], #hostField, #localDestination { +textarea[name="accessList"], #hostField, #localDestination, .authentication { width: calc(100% - 15px) !important; margin: 5px !important; } @@ -831,4 +836,20 @@ td.tunnelDestination, td.tunnelDescription { background: linear-gradient(to right, #fff 50%, #eff2ff); } -/* end more space */ \ No newline at end of file +/* end more space */ + +/* responsive layout */ + +@media screen and (min-width: 1200px) { +body, .control, button, select, textarea, .freetext { + font-size: 10pt !important; +} + +th { + font-size: 10.5pt; +} + +h2, h3 { + font-size: 12pt; +} +} \ No newline at end of file diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css index 6fa728002..9a6c4ed5b 100644 --- a/installer/resources/themes/console/dark/console.css +++ b/installer/resources/themes/console/dark/console.css @@ -16,6 +16,16 @@ body { display: none; } +::selection { + background: #030 !important; + color: white; +} + +::-moz-selection { + background: #030 !important; + color: white; +} + div.clearer { clear: left; height: 0; @@ -613,6 +623,7 @@ div.sorry { .main#dns { padding: 0 0 3px; min-width: 650px !important; + background: #000; } .main#webmail, .main#torrents { @@ -1899,7 +1910,7 @@ th.smallhead { .tablefooter tr, .tablefooter td { background: #000 url(images/header.png) repeat-x center center !important; background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%) !important; - border-top: 1px solid #494; + border-top: 1px solid #494 !important; border-bottom: 1px solid #494 !important; line-height: 110%; padding: 6px 10px; @@ -3202,6 +3213,10 @@ th > img[src^="/imagegen"] { /* scale down header images */ margin: -6px -11px !important; } +#criticallogs ul:empty { + display: none; +} + table#enviro, table#criticallogs, table#routerlogs, table#eventlogs, table#wrapperlogs { margin-top: -11px; } @@ -3224,6 +3239,7 @@ table#enviro td:first-child { width: 100px; text-align: right; padding-right: 0; + white-space: nowrap; } table#criticallogs td , table#routerlogs td, table#eventlogs td, table#wrapperlogs td { @@ -4899,7 +4915,7 @@ form[action="events"] { /* responsive layout */ @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p { +body, .main, .main td, .news p, #news p, textarea, .main textarea, code, tt, pre { font-size: 10pt !important; } @@ -4928,10 +4944,6 @@ body, .main, .main td, .news p, #news p { font-size: 9pt !important; } -.routersummary h3 a { - font-size: 11pt !important; -} - div.app { min-width: 138px; } @@ -4949,7 +4961,19 @@ table#floodfills th:first-child, table#floodfills td:first-child { padding-right: 3px !important; } -h3 { - font-size: 11pt; +h3, .routersummary h3 a, th.th_title, #leasesetdebug th, #leasesetsummary th, .netdbentry th { + font-size: 11pt !important; +} + +select { + padding: 3px 16px 3px 2px; +} + +h3#pluginmanage { + margin-bottom: -15px !important; +} + +h4#updateplugins { + margin-top: -15px !important; } } diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css index 6c1aece3f..50c8eb9c6 100644 --- a/installer/resources/themes/console/dark/i2ptunnel.css +++ b/installer/resources/themes/console/dark/i2ptunnel.css @@ -17,6 +17,16 @@ body.iframed { overflow: hidden; } +::selection { + background: #030 !important; + color: white; +} + +::-moz-selection { + background: #030 !important; + color: white; +} + div { -moz-box-sizing: border-box; box-sizing: border-box; @@ -322,7 +332,9 @@ textarea:focus { color: #ee9; background: #000 !important; filter: drop-shadow(0 0 1px #880); + -webkit-filter: drop-shadow(0 0 1px #880); transition: ease filter 0.3s 0s; + box-shadow: inset 0 0 1px #880; } textarea#statusMessages, textarea#statusMessages:active { @@ -330,7 +342,7 @@ textarea#statusMessages, textarea#statusMessages:active { border: 0; box-shadow: none; height: 80px; - font-size: 9pt; + font-size: 8.5pt; width: 100%; border-radius: 0; padding: 2px 4px; @@ -386,7 +398,8 @@ input { text-decoration: none; } -input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { +input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, +button::-moz-focus-inner { border: none; outline: none; } @@ -422,6 +435,10 @@ input[type="text"], input[type="password"], textarea, textarea[readonly="readonl color: #bb7; } +textarea[readonly="readonly"]:focus { + box-shadow: inset 0 0 0 1px #880; +} + input[type="text"]:focus, input[type="password"]:focus { color: #ee9; background: #000; @@ -458,9 +475,10 @@ a.control, input.control { border-radius: 2px; vertical-align: middle; text-decoration: none; - padding: 4px 2px !important; + padding: 5px 8px !important; -moz-box-sizing: border-box; box-sizing: border-box; + display: inline-block; } .control:link { @@ -493,7 +511,6 @@ a.control, input.control { box-shadow: inset 0 0 0 1px #000; box-sizing: border-box; min-width: 70px !important; - padding: 4px 8px !important; } .control:hover, .control:focus { @@ -508,23 +525,18 @@ a.control, input.control { color: #ee9 !important; text-decoration: none; box-shadow: inset 0 0 0 1px #000 !important; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important; } a.control { display: inline-block; } -button.control { - box-sizing: border-box; - -moz-box-sizing: border-box; - padding: 3px 4px !important; -} - select { color: #494; font: 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; font-weight: bold; - padding: 2px 16px 2px 3px; + padding: 3px 16px 3px 3px; background: #000; border-radius: 2px; cursor: pointer; @@ -540,6 +552,10 @@ select option { /* dropdown menu reverts to normal font-weight */ font-size: 9.5pt; } +select option:hover, select option:checked { + box-shadow: inset 0 0 20px 20px #f60; +} + select:focus, select:hover { color: #f60; border: 1px solid #f60; @@ -935,9 +951,21 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { color: #bb7; } - td.tunnelDestination, td.tunnelDescription { background: linear-gradient(to right, #000 50%, #010); } -/* end more space */ \ No newline at end of file +/* end more space */ + +/* responsive layout */ + +@media screen and (min-width: 1400px) { + +body, td, a { + font-size: 10pt; +} + +button, input, .control, select, textarea#statusMessages, .freetext, textarea { + font-size: 9pt; +} +} diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css index d5eb0ddd6..1d07bafd2 100644 --- a/installer/resources/themes/console/light/console.css +++ b/installer/resources/themes/console/light/console.css @@ -9,9 +9,9 @@ html { body { margin: 8px 6px 8px 8px; text-align: center; - color: #001; - font: 9pt/130% "Droid Sans", Ubuntu, "Noto Sans", "Bitstream Vera Sans", "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; - background: #a4a4cb url(images/tile2.png); + color: #333; + font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + background: #a4a4cb url(images/tile2.png) fixed; background-size: 32px 32px; } @@ -73,52 +73,6 @@ pre { margin: 10px; } -div.logo { - float: left; - padding: 10px; - text-align: center; - color: #222; - margin: 0 10px; - border: 1px solid #447; - border-radius: 2px; - background: #fff; - width: 185px; - box-shadow: inset 0 0 0 1px #bbf; -} - -div.toolbar { - margin: 0; - padding: 10px; - font-weight: bold; - background: #ffe; - border: 1px solid #447; - display: none !important; -} - -div.toolbar a:link { - border: 1px outset #ddddc0; - padding: 0 5px 1px 5px; - line-height: 250%; - background: #bbf; - text-decoration: none; - border-radius: 2px; - display: none !important; -} - -div.toolbar a:visited { - background: #ffe; -} - -div.toolbar a:hover { - border: 1px solid #eeffef; - background: #003; - color: #f60; -} - -a:active { - color: #900; -} - div.routersummaryouter { float: left; width: 200px; @@ -137,7 +91,7 @@ div.routersummary { margin-bottom: 8px; text-align: center !important; border: 1px solid #447; - color: #000; + color: #333; font-size: 8pt; clear: left;/* fixes a bug in Opera */ border-radius: 2px; @@ -211,9 +165,6 @@ div.routersummary hr.b { margin-bottom: 5px; } -div.routersummary hr:last-child { -} - div.routersummary h3 { font-size: 9.5pt; letter-spacing: 0.04em; @@ -228,6 +179,7 @@ div.routersummary h3 { border-radius: 0; box-shadow: inset 0 0 0 1px #fff; filter: none; + -webkit-filter: none; } .routersummary h3:hover { @@ -249,12 +201,13 @@ div.routersummary h3 a { display: inline-block; width: 100%; width: calc(100% - 4px); + padding: 2px 0; } div.routersummary h4 { border: none; font-size: 8.5pt; - letter-spacing: 0.02em; + letter-spacing: normal; text-transform: none; margin: -7px; padding: 6px 2px !important; @@ -266,6 +219,12 @@ div.routersummary h4 { line-height: 105%; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.routersummary h4 { + margin-bottom: -8px !important; +} +} + h4.sb_info { margin-top: -11px !important; } @@ -275,10 +234,6 @@ h4.sb_info + hr + form { margin-bottom: -1px; } -.routersummary a:link { - padding: 2px; -} - div.routersummary ul { text-align: left !important; } @@ -315,6 +270,11 @@ div.routersummary table { padding-right: 0; } +#sb_internals a, #sb_advanced a { + padding: 1px 2px; + display: inline-block; +} + div.routersummary tr { background-image: none !important; background-color: transparent !important; @@ -408,12 +368,30 @@ div.refresh { /* proxy error messages */ +div.logo { + float: left; + padding: 10px; + text-align: center; + color: #222; + margin: 0 10px; + border: 1px solid #447; + border-radius: 2px; + background: #fff; + width: 185px; + box-shadow: inset 0 0 0 1px #bbf; +} + +.logo hr { + margin: 8px -11px; + background: #447; +} + div.warning { margin: 20px 20px 30px 240px; - padding: 5px 25px 20px 75px; + padding: 10px 25px 20px 75px; background: #fff; border: 1px solid #447; - color: inherit; + color: #333; border-radius: 2px; text-align: justify; background-image:url(/themes/console/images/itoopie_sm.png); @@ -424,6 +402,65 @@ div.warning { min-width: 400px; } +.warning h3 { + text-align: left; +} + +.proxyfooter { + margin: 0 20px 10px 240px; + padding: 20px 25px 20px 75px; + color: #f00; + font-size: 7pt; + text-align: right !important; + border-radius: 2px; + border: 1px solid #447; + display: none; +} + +@media screen and (max-width: 800px) { +.warning { + margin-left: 20px !important; + background: #fff !important; + padding-left: 25px !important; +} + +.logo { + display: none; +} +} + +@media screen and (min-height: 700px) { +.proxyfooter { + position: absolute; + bottom: 0; + right: 0; + padding: 0 20px 0 0; + text-align: right; + background: #030; + width: 100%; + opacity: 0.7; + border-top: 1px solid #000; +} + +.proxyfooter p { + text-align: right; + line-height: 130% !important; + margin: 5px 0; +} + +.warning { + margin-bottom: 30px; +} +} + +@media screen and (max-height: 700px) { +.proxyfooter { + display: none; +} +} + +/* end proxy error messages */ + /* console error messages */ div.sorry { @@ -585,7 +622,7 @@ div.news { box-shadow: inset 0 0 0 1px #bbf; background: #fff url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom; background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to right, #fff, #f7f8ff, #fff); - min-width: 500px; + min-width: 526px; filter: drop-shadow(0 1px 1px #999); -webkit-filter: drop-shadow(0 1px 1px #999); } @@ -716,8 +753,8 @@ div.newscontent h6 { @media screen and (-webkit-min-device-pixel-ratio:0) { .tab { - margin: -5px -2px -1px -4px; - padding: 1px 6px 1px 7px; + margin: -5px -2px -1px -3px; + padding: 1px 8px 1px 7px; } .tab:first-child { @@ -726,6 +763,7 @@ div.newscontent h6 { .tab2 { margin-left: -2px !important; + margin-right: -1px !important; } } @@ -764,7 +802,7 @@ div.newscontent h6 { } .tab2 { - color: #008; + color: #31334f; padding: 2px 5px 1px; margin: -11px -1px -1px -3px; background: #fff; @@ -913,7 +951,7 @@ h3#advancedclientconfig, p#webappconfigtext, p#pluginconfigtext, p#clientconf.in } h3#pluginconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientconf.infohelp, #config_stats h3 { - margin-bottom: -15px; + margin-bottom: -13px; } p#enablefullstats { @@ -1230,7 +1268,7 @@ tr:nth-child(odd) { td { padding: 3px 5px; - color: #222; + color: #333; vertical-align: middle; border-top: 1px inset #cfd1ff; border-bottom: 1px outset #cfd1ff; @@ -1415,11 +1453,17 @@ table.search td:nth-child(3) { padding-left: 0; } -table.search input[type="text"], table.search select { +table.search input[type="text"] { min-width: 40px !important; width: 100%; } +table.search select { + min-width: 80px; + width: 100%; + text-overflow: ellipsis; +} + img.app, img.app2p { width: auto; height: 32px; @@ -1468,9 +1512,11 @@ div.applabel { .applabel a { display: inline-block; width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - /* end home page */ tt { @@ -1838,7 +1884,7 @@ h1 { background: #fff; border: 1px solid #447; border-radius: 2px; - min-width: 520px; + min-width: 526px; filter: drop-shadow(0 0 1px #999); -webkit-filter: drop-shadow(0 0 1px #999); } @@ -2052,7 +2098,7 @@ input, input:visited, button, button:visited { background: linear-gradient(to bottom, #fff 0%, #ddd 100%); color: #333; margin: 3px; - font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; padding: 4px 5px; text-decoration: none; border-radius: 2px; @@ -2463,7 +2509,7 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re input[type="text"], input[type="password"] { background: #fff; box-shadow: inset 1px 1px 1px #999; - font-family: "Droid Sans", Ubuntu, "Noto Sans", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } input[type="text"]:focus, input[type="password"]:focus { @@ -2479,8 +2525,17 @@ input[type="file"] { box-shadow: none; } -input[type="checkbox"] { +input[type="checkbox"], input[type="radio"] { border: 0 !important; + box-shadow: none; + vertical-align: middle !important; + margin-top: 4px !important; + margin-bottom: 4px !important; +} + +input[type="checkbox"]:focus, input[type="radio"]:focus { + filter: drop-shadow(0 0 2px #89f); + -webkit-filter: drop-shadow(0 0 2px #89f); } select { @@ -2490,7 +2545,7 @@ select { padding: 4px; border: 1px solid #999; min-width: 120px; - font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Bitstream Vera Sans", Verdana, "Lucida Sans Unicode", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; border-radius: 2px; text-align: left !important; box-shadow: inset 0 0 0 1px #fff; @@ -2555,17 +2610,6 @@ textarea:focus { filter: drop-shadow(0 0 1px #89f); } -.proxyfooter { - margin: 0 20px 10px 240px; - padding: 20px 25px 20px 75px; - color: #f00; - font-size: 7pt; - text-align: right !important; - border-radius: 2px; - border: 1px solid #447; - display: none; -} - .statusnotes { font-style: normal; font-size: 9pt; @@ -3540,6 +3584,11 @@ ul#banlist { word-spacing: 0.1em; } +#tunnelconfig font[color="red"] { + background: url(images/warn.png) left center no-repeat; + padding: 4px 5px 4px 20px; +} + #tunnelconfig td:nth-child(n+2) { text-align: left; } @@ -3707,6 +3756,8 @@ table#floodfills th { color: #001 !important; filter: none; -webkit-filter: none; + outline: none; + line-height: 140%; } .main#jardump { @@ -3718,6 +3769,26 @@ table#floodfills th { border: none; } +#jardump tt { + letter-spacing: -0.03em; +} + +#jardump a tt { + color: #359; +} + +#jardump a:visited tt { + color: #218; +} + +#jardump a:hover tt { + color: #f60; +} + +#jardump a:active tt { + color: #f90; +} + /* experimental sidebar navigation for webapps */ #sb_services a:link, #sb_services a:visited { @@ -3809,6 +3880,11 @@ table#floodfills th { margin-left: 0; } +.homelinkedit img { + width: auto; + height: 20px; +} + #clientconfig th:first-child, #webappconfig th:first-child, #pluginconfig th:first-child { text-align: right; padding-right: 10%; @@ -3917,6 +3993,21 @@ a[href^="configpeer?peer"]:hover { /* responsive layout */ +@media screen and (max-width: 800px) { +div.app { + width: 112px !important; + min-width: 0; +} + +.applabel { + width: 100px !important; +} + +img.app, img.app2p { + padding: 10px 35px; +} +} + @media screen and (min-width: 1500px) { body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea { @@ -3928,6 +4019,10 @@ code, tt, div.news { font-size: 9pt !important; } +button[class^="X"] { + font-size: 0 !important; +} + .main, .news, h1 { margin-left: 232px !important; } @@ -3968,4 +4063,12 @@ div.app { .footnote { font-size: 8pt !important; } + +h3#pluginconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientconf.infohelp, #config_stats h3 { + margin-bottom: -15px; } + +#jardump tt, #jardump td { + font-size: 9pt !important; +} +} \ No newline at end of file diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css index f470cc09e..1c2b5d540 100644 --- a/installer/resources/themes/console/light/i2ptunnel.css +++ b/installer/resources/themes/console/light/i2ptunnel.css @@ -8,7 +8,7 @@ body { text-align: center; font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif; color: #333; - font-size: 10pt; + font-size: 9pt; background: #a4a4cb url(images/tile2.png); background-size: 32px 32px; } @@ -164,6 +164,11 @@ hr { width: 100px; } +.control::-moz-focus-inner { + outline: none; + border: none; +} + .control, .control:link, .control:visited { text-align: center; white-space: nowrap; @@ -184,6 +189,10 @@ hr { padding: 4px 8px; } +button.control, input.control { + padding: 5px 8px !important; +} + .control:hover, .control:focus { text-decoration: none; color: #111; @@ -195,6 +204,7 @@ hr { .control:active { box-shadow: inset 2px 2px 1px #999 !important; + color: #333; } a.control { @@ -208,7 +218,7 @@ a.control { .panel { width: calc(100% - 14px); - max-width: 1200px; + max-width: 1400px; margin: 8px auto; min-width: 450px; overflow: hidden; @@ -457,6 +467,10 @@ div[class^="status"] { width: 20%; } +.tunnelLocation font[color="red"] { + margin-left: 2px; +} + .tunnelStatus { text-align: center; width: 10%; @@ -553,12 +567,12 @@ select#profile, select#connectionProfile { .multiOption#isServer { background: url(/themes/console/images/server.png) left center no-repeat; - padding-left: 20px; + padding-left: 18px; } .multiOption#isClient { background: url(/themes/console/images/client.png) left center no-repeat; - padding-left: 21px; + padding-left: 18px; } td#throttle { @@ -625,13 +639,11 @@ table#statusMessages textarea, table#statusMessages textarea:active { input::-moz-placeholder { color: #f00; - font-weight: bold; opacity: 1; } ::-webkit-input-placeholder { color: #f00; - font-weight: bold; opacity: 1; } @@ -686,10 +698,6 @@ input.tunnelName, input.tunnelDescription, #userAgents { /* wizard specifics */ -#wizardPanel { - font-size: 10pt; -} - #wizardTable { padding: 0; } @@ -720,16 +728,6 @@ input.tunnelName, input.tunnelDescription, #userAgents { 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: #eef; } @@ -747,7 +745,7 @@ input.tunnelName, input.tunnelDescription, #userAgents { } #wizardPanel p { - padding: 5px; + padding: 5px 10px; margin: 0; text-align: justify; } @@ -857,4 +855,16 @@ td.tunnelDestination, td.tunnelDescription { #tunnelRegistration td b { margin-left: 5px; } -/* end more space */ \ No newline at end of file +/* end more space */ + +/* responsive layout */ + +@media screen and (min-width: 1500px) { +body, select, .control, input, textarea { + font-size: 10pt !important; +} + +th { + font-size: 10.5pt; +} +} \ No newline at end of file diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css index 18ab2ccfc..3d0df4f2e 100644 --- a/installer/resources/themes/console/midnight/console.css +++ b/installer/resources/themes/console/midnight/console.css @@ -12,7 +12,7 @@ body { background: linear-gradient(to bottom, #001, #000); background-size: auto 2px; color: #c9ceff; - font: 8.5pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; + font: 8.5pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } .hide, .hideme { @@ -45,7 +45,7 @@ button, input[type="submit"], input[type="reset"], select { } button, button:visited, input[type="submit"], input[type="reset"] { - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; border: 1px solid #3e3f8f; border-bottom-color: #14144f; border-right-color: #14144f; @@ -87,7 +87,7 @@ input { background: #000; color: #443da0; margin: 5px; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; padding: 3px 2px; text-decoration: none; min-width: 110px; @@ -114,7 +114,7 @@ input[type=text], input[type=password] { color: #c9ceff; margin: 5px 10px; padding: 4px 2px; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; border: 1px solid #443da0 !important; text-decoration: none; border-radius: 2px; @@ -222,7 +222,7 @@ select { border-right-color: #14144f; border-radius: 2px; min-width: 110px; - font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; padding: 3px 16px 3px 2px; cursor: pointer; @@ -243,7 +243,7 @@ select option { } select option:hover, select option:focus, select option:checked { - box-shadow: inset 0 0 20px 20px #114; + box-shadow: inset 0 0 20px 20px #652787; } @-moz-document url-prefix() { /* target firefox and derivatives only */ @@ -3099,6 +3099,7 @@ table#i2pupdates input[name*="URL"], table#i2pupdates textarea { table#i2pupdates tr:last-child td { padding-right: 6px; + background: #000 !important; } form[action="graphs"] { @@ -3625,7 +3626,7 @@ table#profiles td:first-child, table#profiles th:first-child { table#profiles td:first-child { text-align: right !important; - padding-left: 1px; + padding-left: 4px; } table#profiles td:first-child, table#profiles th:first-child, table#profiles td:nth-last-child(2), table#profiles th:nth-last-child(2) { @@ -3735,7 +3736,7 @@ table#floodfills th:first-child, table#floodfills td:first-child { table#floodfills td:first-child { text-align: right !important; - padding-left: 1px !important; + padding-left: 4px !important; padding-right: 5px !important; } @@ -4168,6 +4169,7 @@ iframe.iframed { .main#dns { padding: 0; min-width: 650px; + background: #000 !important; } #susidnsframe { @@ -4196,26 +4198,9 @@ body.iframed { /* Override error log colors */ -font[color="#ff00cc"] { /* warning */ - color: #070088; -} - -font[color="#ff3300"] { /* critical */ - color: #0b0099; -} - -font[color="#cc0000"] { /* error */ - color: #0e00cc; -} - -font[color="#000099"] { /* info */ - color: #060055; -} - font[color="#006600"] { /* debug */ - color: #EBDBFF; + color: #ebdbff; } -/*--*/ font[color="#ff00cc"] { /* warning */ color: #0028a0; @@ -4655,7 +4640,7 @@ h3#webappconfig { p#webappconfigtext { margin: 1px 0 -2px 0; - background: url(/themes/console/images/info/java_edit.png) 12px center no-repeat !important; + background: #000 url(/themes/console/images/info/java_edit.png) 12px center no-repeat !important; background-size: 28px 28px !important; } @@ -4723,7 +4708,6 @@ input#hideme { #pluginupdater { border: 1px solid #443da0; - padding: 5px; margin-top: -11px; margin-bottom: 10px !important; background: #000; @@ -4804,6 +4788,7 @@ table#configstats { #configstats tr.tablefooter td { padding: 4px 10px; line-height: 140%; + background: #000 !important; } p#enablefullstats { margin-top: 5px; @@ -4987,7 +4972,7 @@ form[action="events"] { /* responsive layout */ @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, .statusnotes { +body, .main, .main td, .news p, #news p, .statusnotes, textarea, pre, tt, code { font-size: 10pt !important; } @@ -4996,10 +4981,14 @@ h1 { padding: 15px; } -.main button, .main input, select, textarea { +.main button, .main input, select { font-size: 9pt !important; } +button[class^="X"] { + font-size: 0 !important; +} + .main, .news, h1 { margin-left: 232px !important; } @@ -5021,7 +5010,7 @@ h1 { width: 216px !important; } -.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a { +.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, .smallhead, .applabel a { font-size: 9pt !important; } @@ -5041,15 +5030,19 @@ div.app { width: 134px !important; } -.applabel a { - font-size: 9pt !important; -} - .themelabel { padding: 2px; } -code, tt { - font-size: 9pt !important; +h3#i2pclientconfig, h3#pluginconfig, h3#pluginfromurl, h3#pluginfromfile, #clientconf.infohelp, h3#pluginmanage, h3#webappconfig { + margin-bottom: -15px !important; +} + +h4#updateplugins { + margin-top: -15px !important; +} + +#profiles td:first-child, #profiles th:first-child, #floodfills td:first-child, #floodfills th:first-child { + width: 56px !important; } } diff --git a/installer/resources/themes/console/midnight/i2ptunnel.css b/installer/resources/themes/console/midnight/i2ptunnel.css index 4c22eb6a8..dddaf17b1 100644 --- a/installer/resources/themes/console/midnight/i2ptunnel.css +++ b/installer/resources/themes/console/midnight/i2ptunnel.css @@ -12,7 +12,7 @@ body { } body.iframed { - background: transparent url('images/transparent.gif') !important; + background: transparent url(/themes/console/images/transparent.gif) !important; padding: 0; overflow: hidden; } @@ -439,28 +439,6 @@ a.control, input.control { vertical-align: middle; } -.control { - margin: 2px 0 0 2px !important; - overflow: hidden; - min-width: 78px; - font-size: 8pt; - font-weight: bold; - background: #000; - background: linear-gradient(to bottom, #002 0%, #000 20%, #000 80%, #001 100%) !important; - color: #443da0 !important; - border: 1px solid #3e3f8f; - border-bottom: 1px solid #14144f; - border-right: 1px solid #14144f; - text-align: center; - white-space: nowrap; - border-radius: 2px; - vertical-align: middle; - text-decoration: none; - padding: 4px 2px !important; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - .control, .control:link, .control:visited { overflow: hidden; margin: 2px !important; @@ -468,10 +446,16 @@ a.control, input.control { white-space: nowrap; text-decoration: none; font-style: normal; + border: 1px solid #3e3f8f; + border-bottom: 1px solid #14144f; + border-right: 1px solid #14144f; border-radius: 2px; + min-width: 78px; + font-size: 8pt; + font-weight: bold; box-sizing: border-box; min-width: 70px !important; - padding: 4px 8px !important; + padding: 5px 8px !important; color: #443da0 !important; background: #000 !important; background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; @@ -500,7 +484,6 @@ a.control { button.control { box-sizing: border-box; -moz-box-sizing: border-box; - padding: 4px !important; } button, input[type="submit"], input[type="reset"], .control, select { @@ -511,7 +494,7 @@ select { color: #443da0; font: 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; font-weight: bold; - padding: 2px 16px 2px 3px; + padding: 3px 16px 3px 3px; background: #000; border-radius: 2px; cursor: pointer; @@ -527,6 +510,10 @@ select option { /* dropdown menu reverts to normal font-weight */ font-size: 9.5pt; } +select option:hover, select option:focus, select option:checked { + box-shadow: inset 0 0 20px 20px #652787; +} + select:focus, select:hover { color: #652787; border: 1px solid #652787; diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index 04893f5f9..1f5212eec 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -2,7 +2,7 @@ /* Author: dr|z3d */ body { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif; color: #0c153d; background: #eef; background: url(/themes/console/classic/images/bg0.png) repeat scroll center bottom #eef; @@ -37,8 +37,8 @@ body.iframed { text-transform: uppercase !important; color: #000; border: 1px solid #89f; - background: none !important; - background-image: linear-gradient(to bottom, #eef 0%, #fff 50%, #eef 50%, #fff 100%) !important; + background: #eff2ff !important; + background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; box-shadow: 0 0 1px #fff; } @@ -573,6 +573,7 @@ table.snarkTorrents { .snarkTorrentInfo td { text-align: left !important; + vertical-align: middle !important; } .snarkTorrentInfo td:first-child { @@ -646,6 +647,12 @@ table.SnarkDirInfo { padding-right: 6px; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; @@ -738,7 +745,7 @@ td { font-size: 9pt; padding: 1px; opacity: 1; - color: #0c153d !important; + color: #333 !important; } .mainsection td { @@ -878,16 +885,17 @@ td.snarkTorrentstatus:nth-child(2) { text-align: center !important; } -.snarkTorrentDownloaded { - color: #0c153d !important; -} - td.snarkTorrentDownloaded { font-weight: bold; width: 110px; padding: 0 5px; } +/* +.snarkTorrentDownloaded { + color: #0c153d !important; +} + .snarkTorrentUploaded { color: #0c153d !important; } @@ -899,6 +907,7 @@ td.snarkTorrentDownloaded { .snarkTorrentRateDown { color: #0c153d !important; } +*/ .snarkTorrents img { padding: 4px 3px !important; @@ -969,7 +978,7 @@ td[onclick^="document.location"]:hover { .snarkTorrentOdd td, .snarkTorrentEven td { - color: #0c153d !important; +/* color: #0c153d !important;*/ border-top: none !important; } @@ -1060,8 +1069,13 @@ div.percentBarInner.percentBarComplete { } .thumb { + transition: ease all 0.3s 0s; +} + +.thumb:hover { max-width: 96px; max-height: 64px; + transition: ease all 0.3s 0s; } .snarkNewTorrent { @@ -1069,9 +1083,10 @@ div.percentBarInner.percentBarComplete { } .snarkAddInfo { - font-size: 8.5pt; + font-size: 9pt; line-height: 130% !important; margin-left: 10px; + font-weight: normal; } .snarkConfigTitle, @@ -1176,7 +1191,7 @@ a:link { text-decoration: none; word-wrap: break-word; opacity: 1; - color: #006; + color: #33a; border-radius: 0; } @@ -1199,7 +1214,7 @@ a:active { } input { - font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif; margin: 2px 4px 2px 0; padding: 3px 4px !important; cursor: pointer; @@ -1242,35 +1257,42 @@ a img:focus { filter: drop-shadow(0 0 2px #f60) !important; } +input::-moz-focus-inner { + border: 0; + outline: 0; +} + input[type="submit"], input[type="reset"] { font-size: 9pt; font-weight: normal; + color: #333; min-width: 90px !important; - min-height: 22px; - /* opera fix */ - - padding: 3px 2px !important; + padding: 5px 3px !important; text-align: center; - color: #000; - border: 1px solid #bbb; + 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; + } -input[type="submit"]:hover, -input[type="reset"]:hover { - color: #000; +input[type="submit"]:hover, input[type="reset"]:hover, +input[type="submit"]:focus, input[type="reset"]:focus { + color: #111; background: #fff; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); + border: 1px solid #89f; } input[type="submit"]:active, input[type="reset"]:active { - color: #000; + color: #333; background: #ddd; + border: 1px solid #999; + box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555; } a.control { @@ -1318,10 +1340,10 @@ input[type="password"], input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif !important; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif !important; min-width: 160px; margin: 2px 2px 2px 0; - padding: 3px 2px; + padding: 5px !important; cursor: text; vertical-align: middle; color: #333; @@ -1342,9 +1364,8 @@ textarea[name="i2cpOpts"]:focus { textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { width: 500px; - height: 22px; margin: 3px 0; - padding: 3px; + padding: 5px; resize: none; cursor: text; } @@ -1376,6 +1397,10 @@ img[src$="status.png"]:hover, img[src$="status.png"]:focus, img[src$="status.png filter: invert(100%) hue-rotate(180deg) drop-shadow(0 0 2px #f60) !important; } +img[src$="magnet.png"] { + transform: rotate(-90deg); +} + input[type=text], input.r { min-width: 100px; @@ -1409,14 +1434,10 @@ input[size="85"] { } select { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; -} - -select { - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif; min-width: 100px; margin: 2px 4px 2px 0; - padding: 2px 16px 2px 2px; + padding: 4px 16px 4px 2px; cursor: pointer; vertical-align: middle; text-overflow: ellipsis; @@ -1578,16 +1599,17 @@ table#trackerselect { } #trackerselect tr:first-child td { - padding: 2px 5px 2px 20px; + padding: 5px 10px; border-bottom: 1px solid #89f; } #trackerselect td { - padding: 3px 5px 3px 20px; + padding: 3px 10px; } #trackerselect td:first-child { width: 20%; + font-weight: normal; } #trackerselect td:nth-child(4) { @@ -1851,7 +1873,7 @@ div.configsection a:hover { code { font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - font-size: 8pt; + font-size: 9pt; font-weight: bold; padding: 0 2px; color: #090; @@ -1948,3 +1970,11 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transform: rotate(90deg); transition: ease transform 0.3s 0s; } + +/* responsive layout */ + +@media screen and (min-width: 1400px) { +body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"] { + font-size: 10pt !important; +} +} \ No newline at end of file diff --git a/installer/resources/themes/snark/dark/images/delete.png b/installer/resources/themes/snark/dark/images/delete.png index 40516eebe..c65b2c446 100644 Binary files a/installer/resources/themes/snark/dark/images/delete.png and b/installer/resources/themes/snark/dark/images/delete.png differ diff --git a/installer/resources/themes/snark/dark/images/remove.png b/installer/resources/themes/snark/dark/images/remove.png index e5513afa3..f4713b835 100644 Binary files a/installer/resources/themes/snark/dark/images/remove.png and b/installer/resources/themes/snark/dark/images/remove.png differ diff --git a/installer/resources/themes/snark/dark/images/start.png b/installer/resources/themes/snark/dark/images/start.png index 262151e9c..e371d61fa 100644 Binary files a/installer/resources/themes/snark/dark/images/start.png and b/installer/resources/themes/snark/dark/images/start.png differ diff --git a/installer/resources/themes/snark/dark/images/start_all.png b/installer/resources/themes/snark/dark/images/start_all.png index 0e1f96daa..876efaee9 100644 Binary files a/installer/resources/themes/snark/dark/images/start_all.png and b/installer/resources/themes/snark/dark/images/start_all.png differ diff --git a/installer/resources/themes/snark/dark/images/stop.png b/installer/resources/themes/snark/dark/images/stop.png index bddf3d0bf..dbf5ca3e7 100644 Binary files a/installer/resources/themes/snark/dark/images/stop.png and b/installer/resources/themes/snark/dark/images/stop.png differ diff --git a/installer/resources/themes/snark/dark/images/stop_all.png b/installer/resources/themes/snark/dark/images/stop_all.png index d04d318f0..daf502311 100644 Binary files a/installer/resources/themes/snark/dark/images/stop_all.png and b/installer/resources/themes/snark/dark/images/stop_all.png differ diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index f9b3e7f6d..2c5ce93fa 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -3,16 +3,12 @@ body { margin: 9px 8px; color: #ee9; - font: 9pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; background: #000; background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(../../console/dark/images/camotile2.png) top left; background-size: 3px 3px, 175px 175px; } -tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; -} - body.iframed { background: transparent url('../../console/dark/images/transparent.gif') !important; margin: 1px 0 !important; @@ -28,6 +24,16 @@ body.iframed { background: linear-gradient(to right, #000 0%, #020 50%, #000 100%); } +::selection { + background: #030 !important; + color: white; +} + +::-moz-selection { + background: #030 !important; + color: white; +} + .snarknavbar { margin: 0 0 -6px !important; padding: 8px 0; @@ -245,6 +251,10 @@ body.iframed { border-top: 0 none; } +tt { + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; +} + .logshim { margin-top: -10px !important; } @@ -407,7 +417,6 @@ tfoot tr:nth-child(n+1) { color: #ff0; font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; background: none; - font-weight: bold; } .snarkTorrents tfoot th:nth-child(3) { @@ -438,9 +447,6 @@ table.SnarkTorrents { .snarkTorrents td { line-height: 110%; text-align: left; -} - -.iframed .snarkTorrents td { font-size: 8pt !important; } @@ -486,7 +492,7 @@ table.SnarkTorrents { } .snarkTorrentInfo th:first-child { - background: url(/themes/snark/camo/images/file_sm.png) no-repeat 6px 7px, linear-gradient(to bottom, #010, #000); + background: url(images/file_sm.png) no-repeat 6px 7px, linear-gradient(to bottom, #010, #000); } .snarkTorrentInfo th:nth-child(2) { @@ -587,6 +593,12 @@ table.SnarkDirInfo { padding-right: 6px; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; @@ -837,6 +849,10 @@ td.snarkTorrentDownloaded { color: #9f9; } +.snarkDirInfo tr:hover .snarkFileStatus img { + mix-blend-mode: normal; +} + .snarkTorrents a:hover, td[onclick^="document.location"]:hover a, .snarkDirInfo a:hover { color: #f40 !important; } @@ -969,8 +985,14 @@ div.percentBarInner.percentBarComplete { } .thumb { - max-height: 64px; - max-width: 96px; + max-width: 16px; + transition: ease all 0.3s 0s; +} + +.thumb:hover { + max-height: 80px; + max-width: 80px; + transition: ease all 0.3s 0s; } .snarkNewTorrent { @@ -978,9 +1000,10 @@ div.percentBarInner.percentBarComplete { } .snarkAddInfo { - font-size: 8.5pt; + font-size: 9pt; line-height: 130% !important; margin-left: 10px; + font-weight: normal; } .snarkConfigTitle, label.toggleview { @@ -1003,6 +1026,10 @@ div.percentBarInner.percentBarComplete { box-shadow: inset 0 0 0 1px #000; } +.snarkConfigTitle { + margin-bottom: -2px !important; +} + .snarkConfigTitle a, label.toggleview { text-shadow: 0 0 1px #000 !important; } @@ -1071,6 +1098,7 @@ hr { hr.debug { width: 100%; background: #131; + background: linear-gradient(to right, #131 50%, #000700); } hr.debug + b { @@ -1117,7 +1145,7 @@ input { background: #000; color: #494; margin: 2px 4px 2px 0; - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; cursor: pointer; } @@ -1147,7 +1175,7 @@ input[type=submit], input[type=submit]:visited { background: #000; border: 1px outset #191; padding: 4px 3px !important; - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; margin-top: 6px; min-width: 95px; text-align: center; @@ -1156,17 +1184,19 @@ input[type=submit], input[type=submit]:visited { } input[type=submit]:hover, input[type=submit]:focus { - border: 1px outset #f60; + border: 1px solid #f60; background-color: #000; color: #f60; box-shadow: 0 1px 1px 0 #ee9 inset; } input[type=submit]:active { - border: 1px inset #f60; + border: 1px solid #f60; background: #f60; color: #ee9; text-shadow: none !important; + box-shadow: inset 3px 3px 3px #000; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; } input[type=submit]:disabled { @@ -1211,7 +1241,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { border: 1px solid #000 !important; border: 1px solid #151 !important; margin: 0 2px !important; - padding: 3px !important; + padding: 4px !important; background: #030; background: linear-gradient(to bottom, #030 0%, #030 50%, #010 50%, #010 100%); box-shadow: inset 0 0 0 1px #000; @@ -1220,10 +1250,16 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { filter: drop-shadow(0 0 1px #000); } -.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:hover { /* borders on hover only for torrent control buttons, otherwise drop-shadow */ +.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:hover, +.snarkTorrents th:last-child input[type="image"]:focus, .snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */ border: 1px solid #f60 !important; } +.snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active { + box-shadow: inset 3px 3px 3px #000; + background-blend-mode: luminosity; +} + input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { color: #bb7; padding: 4px 3px !important; @@ -1308,7 +1344,7 @@ input[size="85"] { select { background: #000 !important; color: #494; - font: 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; padding: 2px 16px 2px 2px; border-radius: 2px; @@ -1324,6 +1360,10 @@ select option { /* dropdown menu reverts to normal font-weight */ font-size: 9.5pt; } +select option:hover, select option:checked { + box-shadow: inset 0 0 20px 20px #f60; +} + select:hover, select:focus { background: #000 !important; color: #f60 !important; @@ -1387,41 +1427,10 @@ img:hover { line-height: 100%; } -img.thumb { /* consistent size for thumbnail images in file manifest */ - width: 16px; - border-radius: 1px; -} - img[src$="magnet.png"] { transform: rotate(-90deg); } -/* -img[src$="folder.png"] { - filter: hue-rotate(60deg); -} - -img[src$="folder.png"]:hover { - filter: hue-rotate(60deg) drop-shadow(0 0 1px #f90) !important; -} - -.infoz { - margin: 0 -1px 0 0 !important; - padding: 0 !important; - line-height: 100%; - float: left; -} - -.infoz img { - border: none; - opacity: 1 !important; -} - -.infoz img:hover { - opacity: 1 !important; -} -*/ - #pagenav img.disable, #pagenav img.disable:hover { opacity: 0.3; margin: 0 2px !important; @@ -1485,6 +1494,7 @@ table#trackerselect { #trackerselect td:first-child { width: 20%; + font-weight: normal; } #trackerselect td:nth-child(4) { @@ -1717,14 +1727,14 @@ table.trackerconfig td:first-child { } code { - font-size: 8pt; + font-size: 8.5pt; color: #ff6; padding: 0 2px; - font-weight: bold; font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; } -.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel { +.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, +.iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel { border-left: none !important; border-right: none !important; border-radius: 0; @@ -1796,3 +1806,32 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent label.toggleview, .snarkConfigTitle a:visited { color: #7c7; } + +/* responsive layout */ + +@media screen and (min-width: 1400px) { +body, .snarkTorrents td, .snarkAddInfo, th, td { + font-size: 10pt !important; +} + +.snarkRefresh:link { + font-size: 10.5pt; +} + +.snarkRefresh:link:first-child { + padding-left: 13px !important; +} + +tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, button, textarea { + font-size: 9pt; +} + +select { + padding-top: 4px; + padding-bottom: 4px; +} + +select:nth-child(2) { + margin-left: -14px; +} +} diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index c3783558c..3e8307c17 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -4,10 +4,9 @@ body { color: #272e3f; - font: 8pt "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; - background: #a4a4cb url(/themes/console/light/images/tile2.png) center top; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed; background-size: 32px 32px; - font-size-adjust: 0.58; margin: 5px; } @@ -75,6 +74,10 @@ button::-moz-focus-inner, input::-moz-focus-inner { box-shadow: none; } +.snarkRefresh img { + display: none; +} + .snarkRefresh:link,.snarkRefresh:visited { text-decoration: none !important; text-transform: uppercase !important; @@ -116,9 +119,10 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .snarkRefresh:first-child { + padding: 4px 10px 4px 19px !important; border-radius: 2px 0 0 2px; - padding-left: 16px !important; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); + background: url(images/button_snark.png) 10px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); } .snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { @@ -162,7 +166,8 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .snarkMessages { - font: normal 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", "Andale Mono", Courier, mono !important; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font-size: 8pt; text-align: left; margin: -2px 0 0; padding: 3px 5px 3px 5px; @@ -177,11 +182,12 @@ button::-moz-focus-inner, input::-moz-focus-inner { border-top: 1px solid #7778bf; border-bottom: 1px solid #7778bf; box-shadow: inset 0 0 1px #fff; - background-size: 50px 60px, 100% 100%; + background-size: auto 100%, 100% 100%; } .snarkMessages a:link, .snarkMessages a:visited { color: #505 !important; + font-size: 8pt; } .snarkMessages a:hover { @@ -196,6 +202,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { .snarkMessages li { margin-left: -15px; + line-height: 120%; } .snarkMessages li::before { @@ -238,9 +245,49 @@ button::-moz-focus-inner, input::-moz-focus-inner { margin-top: 11px !important; } + +a:link { + color: #359; + text-decoration: none; + font-weight: normal; + word-wrap: break-word; + font-size: 9pt; +} + +a:visited { + color: #218; + text-decoration: none; +} + +a:hover, a:focus { + color: #f60; +} + +a:active { + color: #6f072b; +} + +a.control, a.controld { + background: #fff; + border-radius: 2px; + font-weight: bold; + margin: 5px 4px !important; + padding: 5px !important; + white-space: nowrap; + display: inline-block; + float: right; + min-width: 0 !important; +} + +a.controld { + color: #459; + font-weight: normal; + display: none; +} + pre { width: 100%; - font: 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important; + font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; padding: 0; text-align: left !important; height: 8px; @@ -285,7 +332,7 @@ thead { th { padding: 3px 2px; - font-size: 8pt; + font-size: 9pt; border-top: 1px solid #7778bf; border-bottom: 1px solid #7778bf; background: #fff url("../../console/light/images/header.png") repeat-x scroll center center; @@ -396,12 +443,16 @@ tfoot tr:nth-child(n+1) { text-align: right !important; } +.snarkTorrents thead th:nth-child(6), .snarkTorrents thead th:nth-child(7) { + text-align: center !important; +} + .snarkTorrents td { line-height: 110%; } .snarkTorrents td:nth-child(1) { - width: 20px !important; + max-width: 20px !important; text-align: left; padding: 2px; } @@ -448,7 +499,7 @@ td { padding: 2px 4px; color: #272e3f !important; opacity: 1; - font-size: 8pt; + font-size: 9pt; } .mainsection td { @@ -457,7 +508,6 @@ td { td:first-child { text-align: right; - font-size: 8pt; } .center { @@ -510,8 +560,9 @@ td:first-child { } .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active { - filter: hue-rotate(290deg) invert(100%) !important; - -webkit-filter: hue-rotate(290deg) invert(100%) !important; + box-shadow: inset 3px 3px 3px #333; + filter: hue-rotate(110deg) !important; + -webkit-filter: hue-rotate(110deg) !important; } .snarkTorrentEven { @@ -560,7 +611,6 @@ td:first-child { } .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { - font-size: 8pt; padding: 0 3px; line-height: 90%; } @@ -570,20 +620,6 @@ td:first-child { text-align: center; } -/* -.snarkTorrentUploaded { - color: #001 !important; -} - -.snarkTorrentRateUp { - color: #001 !important; -} - -.snarkTorrentRateDown { - color: #001 !important; -} -*/ - .snarkTorrentOdd { background: #e0e0ff; font-size: 8pt; @@ -632,7 +668,6 @@ td:first-child { .snarkFileStatus { padding: 4px 5px 4px 15px; font-style: italic; - font-size: 8pt; text-align: left; min-width: 230px; } @@ -650,8 +685,14 @@ td:first-child { } .thumb { - max-height: 64px; - max-width: 96px; + max-width: 16px; + transition: ease all 0.3s 0s; +} + +.thumb:hover { + max-height: 80px; + max-width: 80px; + transition: ease all 0.3s 0s; } .snarkNewTorrent { @@ -659,12 +700,12 @@ td:first-child { } .snarkAddInfo { - font-size: 8pt; + font-size: 9pt; line-height: 130% !important; } .snarkConfigTitle, label.toggleview { - font-size: 10.5pt; + font-size: 11pt; font-weight: bold; padding: 2px 15px 2px 15px; margin: 0 0 -3px 0 !important; @@ -680,18 +721,17 @@ td:first-child { color: #559; } +.snarkConfigTitle a { + font-size: 11pt !important; +} + .snarkConfigTitle img:hover { /* inert titles */ color: #40404f; } @media screen and (-webkit-min-device-pixel-ratio:0) { - -.snarkRefresh:link { - padding-top: 6px !important; -} - -.snarkConfigTitle, label.toggleview { - font-size: 12pt; +.snarkConfigTitle a, label.toggleview { + font-size: 14pt !important; padding: 1px 15px 4px; } } @@ -787,6 +827,12 @@ td:first-child { min-width: 0 !important; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + table#trackerselect { width: 100% !important; border-collapse: separate; @@ -807,15 +853,26 @@ table#trackerselect { box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px #999); -webkit-filter: drop-shadow(0 0 1px #ccc); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#trackerselect td { + padding: 2px; } #trackerselect td:first-child { - width: 150px !important; + width: 100px !important; white-space: nowrap; } #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) { - max-width: 50px !important; +} + +#trackerselect td:last-child { + overflow: hidden; + text-overflow: ellispis; } form { @@ -846,44 +903,6 @@ hr.debug:nth-child(n+7) { background: #339; } -a:link { - color: #359; - text-decoration: none; - font-weight: normal; - word-wrap: break-word; -} - -a:visited { - color: #218; - text-decoration: none; -} - -a:hover, a:focus { - color: #f60; -} - -a:active { - color: #6f072b; -} - -a.control, a.controld { - background: #fff; - border-radius: 2px; - font-weight: bold; - margin: 5px 4px !important; - padding: 5px !important; - white-space: nowrap; - display: inline-block; - float: right; - min-width: 0 !important; -} - -a.controld { - color: #459; - font-weight: normal; - display: none; -} - .headerpriority br { display: none; } @@ -902,7 +921,7 @@ input { background: #fff; color: #272e3f; margin: 2px 4px 2px 0; - font: bold 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; box-shadow: inset 0 0 1px #fff, 0 0 1px #999; } @@ -918,7 +937,7 @@ input[type=submit], a.control { background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 50%, #ddf 100%); border: 1px solid #7778bf; padding: 2px; - font: bold 8pt "Droid Sans", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; margin: 6px 10px 6px 0; border-radius: 2px; min-width: 90px; @@ -1015,7 +1034,7 @@ input.disabled, input.disabled:hover, a.controld { select { background: #eef url(images/dropdown.png) right center no-repeat !important; - font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; padding: 5px 16px 5px 3px !important; border-radius: 2px; @@ -1083,26 +1102,6 @@ img[src$="details.png"] { mix-blend-mode: luminosity; } -img.thumb { - width: 16px; -} - -.infoz { - margin: 0 -1px 0 0 !important; - padding: 0 !important; - line-height: 100%; - float: left; -} - -.infoz img { - border: none; - opacity: 1 !important; -} - -.infoz img:hover { - opacity: 1 !important; -} - .newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child { width: auto !important; } @@ -1238,10 +1237,10 @@ form:last-child .configsectionpanel { } code, tt { - font-size: 8pt; + font-size: 8.5pt; color: #0045ff; font-weight: bold; - font-family: "DejaVu Sans Mono", "Droid Sans Mono", Courier, mono; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; } .routerdown { @@ -1325,3 +1324,84 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent .iframed input#toggle_addtorrent:checked + label + hr + table, .iframed input#toggle_createtorrent:checked + label + hr + table { display: none; } + +/*responsive layout */ + +@media screen and (max-width: 1000px) { +body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus { + font-size: 8pt !important; +} + +.snarkConfigTitle a { + font-size: 10.5pt !important; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkConfigTitle a, label.toggleview { + font-size: 12pt !important; +} +} +} + +/* enable to hide status text, upload speed + upload amount in main torrent table at 800px or less */ +/* +@media screen and (max-width: 800px) { +.snarkTorrents th:nth-child(2), .snarkTorrents td:nth-child(2), +.snarkTorrents th:nth-child(7), .snarkTorrents tfoot th:nth-child(3), .snarkTorrents td.snarkTorrentUploaded, +.snarkTorrents th:nth-child(9), .snarkTorrents tfoot th:nth-child(5), .snarkTorrents td.snarkTorrentRateUp { + max-width: 0 !important; + overflow: hidden; + white-space: nowrap; + font-size: 0 !important; + padding: 0 !important; +} + +.snarkTorrents th:nth-child(7) img { + display: none; +} +} +*/ + +@media screen and (min-width: 1400px) { +body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link { + font-size: 10pt !important; +} + +.snarkMessages li, .snarkMessages a { + font-size: 9pt !important; + line-height: 130%; +} + +a.snarkRefresh { + font-size: 11pt !important; +} + +a.snarkRefresh:first-child { + padding-left: 16px !important; +} + +.snarkConfigTitle a, label.toggleview { + font-size: 12pt !important; + padding: 1px 15px 4px; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkConfigTitle a, label.toggleview { + font-size: 15pt !important; + padding: 1px 15px 4px; +} +} + +input[type="submit"] { + min-width: 100px; +} + +.snarkMessages { + height: 60px; +} + +.snarkConfigTitle, label.toggleview { + font-size: 12pt; + padding: 3px 15px; +} +} \ No newline at end of file diff --git a/installer/resources/themes/snark/midnight/images/delete.png b/installer/resources/themes/snark/midnight/images/delete.png index a37f8c7f1..6b9484bea 100644 Binary files a/installer/resources/themes/snark/midnight/images/delete.png and b/installer/resources/themes/snark/midnight/images/delete.png differ diff --git a/installer/resources/themes/snark/midnight/images/remove.png b/installer/resources/themes/snark/midnight/images/remove.png index 12f988b18..2d029616c 100644 Binary files a/installer/resources/themes/snark/midnight/images/remove.png and b/installer/resources/themes/snark/midnight/images/remove.png differ diff --git a/installer/resources/themes/snark/midnight/images/start.png b/installer/resources/themes/snark/midnight/images/start.png index 6bf001c4e..459d1070d 100644 Binary files a/installer/resources/themes/snark/midnight/images/start.png and b/installer/resources/themes/snark/midnight/images/start.png differ diff --git a/installer/resources/themes/snark/midnight/images/start_all.png b/installer/resources/themes/snark/midnight/images/start_all.png index a30d3a034..ac398a802 100644 Binary files a/installer/resources/themes/snark/midnight/images/start_all.png and b/installer/resources/themes/snark/midnight/images/start_all.png differ diff --git a/installer/resources/themes/snark/midnight/images/stop.png b/installer/resources/themes/snark/midnight/images/stop.png index ca007e86f..9f2878c60 100644 Binary files a/installer/resources/themes/snark/midnight/images/stop.png and b/installer/resources/themes/snark/midnight/images/stop.png differ diff --git a/installer/resources/themes/snark/midnight/images/stop_all.png b/installer/resources/themes/snark/midnight/images/stop_all.png index 5153c4e85..ab8452d50 100644 Binary files a/installer/resources/themes/snark/midnight/images/stop_all.png and b/installer/resources/themes/snark/midnight/images/stop_all.png differ diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index e8b727aa2..334076842 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -1,7 +1,8 @@ -/* I2PSnark theme "Midnight" by dr|z3d */ +/* I2PSnark theme "Midnight" */ +/* Author: dr|z3d */ body { - font: 9pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; color: #c9ceff; background: #000; margin: 7px 6px; @@ -9,7 +10,7 @@ body { body.iframed { margin: 1px 0 !important; - background: transparent url(../../console/dark/images/transparent.gif) !important; + background: transparent url(/themes/console/images/transparent.gif) !important; } * { @@ -160,16 +161,6 @@ code { text-shadow: none; } -/* -.snarkRefresh:active:first-child { - background: #000 !important; - background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; - background-position: 7px center, center center !important; - background-repeat: no-repeat, repeat !important; -} - -*/ - .snarkRefresh:link:last-of-type { border-radius: 2px !important; } @@ -485,16 +476,18 @@ tfoot tr:nth-child(n+1) { width: 24px !important; } -.snarkTorrents td:nth-child(3), -.SnarkTorrents td:nth-child(4) { +.snarkTorrents td:nth-child(3) { width: 16px !important; padding: 0 !important; + text-align: right !important; +} + +.SnarkTorrents td:nth-child(4) { + width: 16px !important; + padding: 0 2px 0 0 !important; text-align: center !important; } -.snarkTorrents td:nth-child(3) { - text-align: right !important; -} .snarkTorrents td[colspan="10"] { padding: 2px; @@ -534,6 +527,7 @@ tfoot tr:nth-child(n+1) { .snarkTorrentInfo th:first-child { background: url(images/file.png) no-repeat 6px center, linear-gradient(to bottom, #010011, #000); background-size: 14px; + background-blend-mode: luminosity; } .snarkTorrentInfo th:nth-child(2) { @@ -618,6 +612,12 @@ tfoot tr:nth-child(n+1) { padding-right: 6px; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; @@ -744,7 +744,7 @@ td:first-child { .snarkTorrentAction { width: 60px; margin: 0 !important; - padding: 1px 1px 1px 1px !important; + padding: 1px !important; text-align: center !important; } @@ -853,6 +853,10 @@ td.snarkTorrentDownloaded { color: #c9ceff !important; } +.snarkDirInfo tr:hover .snarkFileStatus img { + mix-blend-mode: normal; +} + .ParentDir a, .ParentDir a:visited, .ParentDir:hover a { color: #7972d1 !important; } @@ -994,7 +998,14 @@ div.percentBarInner.percentBarComplete { } .thumb { - width: 16px; + max-width: 16px; + transition: ease all 0.3s 0s; +} + +.thumb:hover { + max-width: 96px; + max-height: 64px; + transition: ease all 0.3s 0s; } .snarkNewTorrent { @@ -1029,6 +1040,10 @@ label.toggleview { margin-bottom: -7px; } +.configsectionpanel .snarkConfigTitle { + padding-bottom: 4px; +} + .snarkConfigTitle a, .snarkConfigTitle a:visited { color: #89f !important; } @@ -1112,7 +1127,7 @@ a:visited { color: #362e9e; } -a:hover { +a:hover, a:focus { color: #652787; } @@ -1121,7 +1136,7 @@ a:active { } input { - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; margin: 2px 4px 2px 0; padding: 3px 4px !important; cursor: pointer; @@ -1132,12 +1147,6 @@ input { background: #001; } -input[type="submit"], -input[type="reset"] { - filter: drop-shadow(0 0 1px #000); - -webkit-filter: drop-shadow(0 0 1px #000); -} - input:disabled { cursor: auto; opacity: .5 !important; @@ -1155,33 +1164,52 @@ input.r { background: #001; } -input[type=submit], -input[type=submit]:visited { - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; - min-width: 95px; + +input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { + border: none; + outline: none; +} + +input[type="submit"], input[type="reset"] { + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + min-width: 95px !important; margin-top: 6px; - padding: 2px; + padding: 5px !important; text-align: center; color: #443da0; border: 1px solid #3e3f8f; border-bottom-color: #14144f; border-right-color: #14144f; background: #000; + background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + box-shadow: inset 0 0 0 1px #000; + filter: drop-shadow(0 0 1px #000); + -webkit-filter: drop-shadow(0 0 1px #000); } -input[type=submit]:hover, -input[type=submit]:focus { +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { +input[type="submit"], +input[type="reset"] { + padding: 5px !important; +} +} +*/ + +input[type="submit"]:hover, input[type="submit"]:focus, +input[type="reset"]:hover, input[type="reset"]:focus { color: #652787; border: 1px solid #652787 !important; - background-color: #000; + background: #000 !important; box-shadow: 0 1px 1px 0 #c9ceff inset; } -input[type=submit]:active { +input[type="submit"]:active, +input[type="reset"]:active { color: #c9ceff; border: 1px inset #652787; - background: #652787; - text-shadow: none !important; + background: #652787 !important; + box-shadow: inset 3px 3px 3px #000; } input[type=submit]:disabled { @@ -1210,14 +1238,14 @@ input[type="checkbox"], .optbox, input[type="radio"] { min-width: 16px !important; + min-height: 16px !important; filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */ -webkit-filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); } -input[type="checkbox"]:hover, -.optbox:hover, -input[type="radio"]:hover { - filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 1px #652787); +input[type="checkbox"]:hover, .optbox:hover, input[type="radio"]:hover, +input[type="checkbox"]:focus, .optbox:focus, input[type="radio"]:focus { + filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 2px #652787); } .snarkTorrents th:last-child, @@ -1226,7 +1254,7 @@ input[type="radio"]:hover { } .snarkTorrents td:last-child { - padding: 1px 2px !important; + padding: 4px 2px !important; } .snarkTorrents th:last-child input[type="image"], @@ -1235,7 +1263,7 @@ input[type="radio"]:hover { border: 1px solid #443da0 !important; border: 1px solid #171c3f !important; box-shadow: inset 0 0 0 1px #000; - padding: 3px !important; + padding: 4px !important; border-radius: 2px; text-align: center; mix-blend-mode: normal; @@ -1256,7 +1284,7 @@ input[type="radio"]:hover { .snarkTorrents th:last-child input[type="image"]:focus, .snarkTorrents td:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:focus { - /* borders on hover only for torrent control buttons, otherwise drop-shadow */ +/* borders on hover only for torrent control buttons, otherwise drop-shadow */ border: 1px solid #652787 !important; } @@ -1270,13 +1298,12 @@ input.r:hover { cursor: text; } -input[type=text]:focus, -textarea:focus, -input.r:focus, -textarea[name="i2cpOpts"]:focus, -input[name="nofilter_dataDir"]:focus { +input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus { color: #7166ff; background: #000; + filter: drop-shadow(0px 0 1px #99f); + -webkit-filter: drop-shadow(0px 0 1px #99f); + transition: ease all 0.3s 0s; } textarea[name="i2cpOpts"], @@ -1285,6 +1312,7 @@ input[name="nofilter_dataDir"] { margin: 3px 0; padding: 4px !important; cursor: text; + resize: none; } thead img, @@ -1332,11 +1360,11 @@ input[size="85"] { } select { - font: 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, "Lucida Grande", Helvetica, sans-serif; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", "Lucida Grande", Helvetica, sans-serif; font-weight: bold; min-width: 100px; margin: 2px 4px 2px 0; - padding: 2px 16px 2px 2px; + padding: 3px 16px 3px 2px; cursor: pointer; text-overflow: ellipsis; color: #443da0; @@ -1347,12 +1375,6 @@ select { background: #000 !important; } -select option { - font-size: 9.5pt; - /* dropdown menu reverts to normal font-weight */ - font-weight: normal; -} - select:hover, select:focus { color: #652787 !important; @@ -1364,25 +1386,31 @@ select:hover { box-shadow: inset 0 1px 1px 0 #c9ceff; } + +select option { + font-size: 9.5pt; + /* dropdown menu reverts to normal font-weight */ + font-weight: normal; +} + +select option:hover, select option:checked { + box-shadow: inset 20px 20px #652787; +} + +/* target firefox and derivatives only */ @-moz-document url-prefix() { - /* target firefox and derivatives only */ - select - { - background: #000 url(images/dropdown.png) right center no-repeat !important; - -moz-appearance: none; - } - - select:hover, - select:focus, - select:active - { - background: #000 url(images/dropdown_hover.png) right center no-repeat !important; - } +select { + background: #000 url(images/dropdown.png) right center no-repeat !important; + -moz-appearance: none; +} +select:hover, select:focus, select:active { + background: #000 url(images/dropdown_hover.png) right center no-repeat !important; +} } select:nth-child(2) { - margin-left: -18px; + margin-left: -16px; } textarea { @@ -1428,7 +1456,7 @@ img[src$="details.png"] { } img.thumb { - width: 16px; + max-width: 16px; } .snarkFileStatus img { @@ -1439,24 +1467,6 @@ img.thumb { mix-blend-mode: normal !important; } -/* -.infoz { - line-height: 100%; - float: left; - margin: 0 -1px 0 0 !important; - padding: 0 !important; -} - -.infoz img { - opacity: 1 !important; - border: none; -} - -.infoz img:hover { - opacity: 1 !important; -} -*/ - #pagenav img.disable, #pagenav img.disable:hover { opacity: .3; @@ -1542,6 +1552,7 @@ img.thumb { #trackerselect td:first-child { width: 20%; + font-weight: normal; } #trackerselect td:nth-child(4) { @@ -1894,3 +1905,36 @@ label.toggleview, .snarkConfigTitle a:visited { color: #89f; } + +/* responsive layout */ + +@media screen and (min-width: 1400px) { +code, textarea, .snarkMessages li, input { + font-size: 9pt !important; +} + +thead th, tfoot th, td, select, select option, .snarkAddInfo { + font-size: 10pt !important; +} + +.snarkRefresh { + font-size: 10.5pt !important; +} + +.snarkConfigTitle, .toggleview { + font-size: 12.5pt !important; + padding: 4px 25px 5px 22px; +} + +.snarkConfigTitle { + padding: 2px 25px 3px 22px +} + +.snarkMessages { + height: 54px; +} + +select:nth-child(2) { + margin-left: -14px !important; +} +} diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index b4cd5d5af..46fc53ce7 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -1,5 +1,6 @@ -/* I2PSnark theme "Ubergine" by dr|z3d */ +/* I2PSnark theme "Ubergine" */ /* Guantanamo Commemorative Edition. */ +/* Author: dr|z3d */ html { min-height: 100%; @@ -10,11 +11,11 @@ body { background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #26092f; background-size: 100% 100%, 96px 96px; color: #fff; - font: 8pt "Bitstream Vera Sans", "Noto Sans", Verdana, Ubuntu, Tahoma, Helvetica, sans-serif; + font: 8pt "Bitstream Vera Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; } body.iframed { - background: transparent url('../../console/dark/images/transparent.gif') !important; + background: transparent url(themes/console/images/transparent.gif) !important; margin: 0 !important; } @@ -182,7 +183,7 @@ body.iframed { width: calc(100% - 12px); background: #2a192a url(images/hat.png) no-repeat scroll right center; background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #2a192a 0%, #202 100%); - background-size: 80px 83px; + background-size: 80px 83px, 100% 100%; box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6); outline: none; filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5)); @@ -664,7 +665,12 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t .snarkFileIcon { width: 16px; text-align: center; - padding-left: 3px; + padding: 4px !important; +} + +.snarkFileIcon img { + margin: 1px; + padding: 0; } .snarkFileName { @@ -787,6 +793,12 @@ table.SnarkDirInfo { opacity: 1; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + .snarkDirInfo .headerpriority { text-align: right !important; vertical-align: middle; @@ -809,8 +821,14 @@ table.SnarkDirInfo { } .thumb { - max-height: 64px; - max-width: 96px; + max-width: 16px; + transition: ease-out all 0.3s 0s; +} + +.thumb:hover { + max-width: 80px; + max-height: 80px; + transition: ease all 0.3s 0s; } div.snarkNewTorrent { @@ -865,6 +883,12 @@ table#trackerselect { min-width: 200px; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkConfigTitle, label.toggleview { + font-size: 12pt; +} +} + .snarkConfigTitle img, label.toggleview img { margin-right: -3px; margin-bottom: 1px; @@ -943,7 +967,6 @@ a.control, a.controld, a.control:active { padding: 4px 6px 4px 4px; text-shadow: 0 0 #410; white-space: nowrap; - min-height: 22px; filter: drop-shadow(0 0 1px #313) !important; -webkit-filter: drop-shadow(0 0 1px #313) !important; } @@ -970,9 +993,14 @@ a.controld img { display: none; } +a.control, input[type="submit"], input[type="reset"] { + background-size: 14px 14px, 100% 100% !important; +} + a.control:active, input[type="submit"]:active, input[type="reset"]:active { color: #ce1641 !important; border: 1px solid #fff !important; + box-shadow: inset 3px 3px 3px #fff; } .snarkDirInfo tr:last-child { @@ -995,7 +1023,7 @@ th.headerstatus { */ input, a.control { - font: 8pt "Droid Sans", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; font-weight: bold; } @@ -1014,7 +1042,7 @@ input { input.r { text-align: right; background: url(images/graytile.png); - font-family: "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; + font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; } input[type=submit] { @@ -1151,7 +1179,7 @@ input[type="submit"]:disabled:active, a.control:disabled:active { input[type="text"], input.r, input[name="nofilter_dataDir"] { padding: 4px !important; - font-family: "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; + font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; box-shadow: inset 1px 1px 2px 1px #101; letter-spacing: 0.03em; background: url(images/graytile.png) #212; @@ -1209,111 +1237,108 @@ input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled: } input.accept, input.accept:active { - background: #989 url(images/accept.png) no-repeat 2px center; - background: url(images/accept.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/accept.png) no-repeat 4px center; + background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.accept:hover, input.accept:focus { - background: #767 url(images/accept.png) no-repeat 2px center; - background: url(images/accept.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/accept.png) no-repeat 4px center; + background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.add, input.add:active { - background: #989 url(images/add.png) no-repeat 2px center; - background: url(images/add.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/add.png) no-repeat 4px center; + background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.add:hover, input.add:focus { - background: #767 url(images/add.png) no-repeat 2px center; - background: url(images/add.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/add.png) no-repeat 4px center; + background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.cancel, input.cancel:active { - background: #989 url(images/cancel.png) no-repeat 2px center; - background: url(images/cancel.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/cancel.png) no-repeat 4px center; + background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.cancel:hover, input.cancel:focus { - background: #767 url(images/cancel.png) no-repeat 2px center; - background: url(images/cancel.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/cancel.png) no-repeat 4px center; + background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.create, input.create:active { - background: #989 url(images/create.png) no-repeat 2px center; - background: url(images/create.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/create.png) no-repeat 4px center; + background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.create:hover, input.create:focus { - background: #767 url(images/create.png) no-repeat 2px center; - background: url(images/create.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/create.png) no-repeat 4px center; + background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.delete, input.delete:active { - background: #989 url(images/nuke.png) no-repeat 2px center; - background: url(images/nuke.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/nuke.png) no-repeat 4px center; + background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.delete:hover, input.delete:focus { - background: #767 url(images/nuke.png) no-repeat 2px center; - background: url(images/nuke.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/nuke.png) no-repeat 4px center; + background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.reload, input.reload:active { - background: #989 url(images/restore.png) no-repeat 2px center; - background: url(images/restore.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/restore.png) no-repeat 4px center; + background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.reload:hover, input.reload:focus { - background: #767 url(images/restore.png) no-repeat 2px center; - background: url(images/restore.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/restore.png) no-repeat 4px center; + background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.reload[name="recheck"], input.reload[name="recheck"]:active { - background: #989 url(images/recheck.png) no-repeat 2px center; - background: url(images/recheck.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/recheck.png) no-repeat 4px center; + background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus { - background: #767 url(images/recheck.png) no-repeat 2px center; - background: url(images/recheck.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/recheck.png) no-repeat 4px center; + background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.starttorrent, input.starttorrent:active { - background: #989 url(images/next.png) no-repeat 2px center; - background: url(images/next.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/next.png) no-repeat 4px center; + background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.starttorrent:hover, input.starttorrent:focus { - background: #767 url(images/next.png) no-repeat 2px center; - background: url(images/next.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/next.png) no-repeat 4px center; + background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.stoptorrent, input.stoptorrent:active { - background: #989 url(images/btn_stop.png) no-repeat 2px center; - background: url(images/btn_stop.png) no-repeat 2px center, linear-gradient(to bottom, #989 0%, #878 100%); + background: #989 url(images/btn_stop.png) no-repeat 4px center; + background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); padding: 4px 3px 4px 18px !important; - min-height: 22px; } input.stoptorrent:hover, input.stoptorrent:focus { - background: #767 url(images/btn_stop.png) no-repeat 2px center; - background: url(images/btn_stop.png) no-repeat 2px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/btn_stop.png) no-repeat 4px center; + background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +input[type="submit"], input[type="reset"], a.control { + padding-left: 21px !important; +} } .configsectionpanel tr:nth-last-child(2) td { @@ -1328,7 +1353,7 @@ select { background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important; background-size: 17px 17px, 96px 96px !important; color: #f60; - font: 8pt "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; + font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; font-weight: bold; padding: 2px 18px 2px 1px; border-radius: 2px; @@ -1371,6 +1396,10 @@ select option:hover { select { padding: 4px 18px 4px 4px; } + +select + select { + margin-left: -12px !important; +} } textarea { @@ -1399,11 +1428,6 @@ img:hover { line-height: 100%; } -img.thumb { /* consistent size for thumbnail images in file manifest */ - width: 16px; - border-radius: 1px; -} - img[src$="magnet.png"] { transform: rotate(-90deg); } diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index 9de8ad725..1a00fcdb2 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -217,8 +217,8 @@ body.iframed { color: #cfc7c2; height: 56px; width: auto; - background: #3f3833 url('/themes/snark/ubergine/images/hat.png') no-repeat scroll right center; - background: url('/themes/snark/ubergine/images/hat.png') no-repeat scroll right center, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); + background: #3f3833 url(images/hat.png) no-repeat scroll right center; + background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); background-size: 80px 83px, 100% 100%; } @@ -691,6 +691,10 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { background: #cfbda8 !important; } +.snarkDirInfo tr:hover .snarkFileStatus img { + mix-blend-mode: normal; +} + .snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) { background: #303; background: #cfc8c2; @@ -722,6 +726,11 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { width: 16px; } +.snarkFileIcon img { + filter: none; + -webkit-filter: none; +} + td.snarkFileIcon:first-child { text-align: center; } @@ -811,6 +820,12 @@ thead img.disable, img.disable:hover { min-width: 0 !important; } +.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { + display: inline-block; + width: 100%; + padding: 2px 0; +} + .snarkDirInfo .headerpriority { text-align: right !important; vertical-align: middle; @@ -831,8 +846,14 @@ th[colspan="4"] + .headerpriority { } .thumb { - max-height: 64px; - max-width: 96px; + transition: ease all 0.3s 0s; + max-width: 16px; +} + +.thumb:hover { + max-width: 80px; + max-height: 80px; + transition: ease all 0.3s 0s; } .snarkNewTorrent { @@ -880,6 +901,12 @@ th[colspan="4"] + .headerpriority { text-shadow: 0 0 1px #fff5ef; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkConfigTitle, label.toggleview { + font-size: 12pt; +} +} + .snarkConfigTitle a, label.toggleview { color: #930 !important; text-shadow: 0 0 1px #fff5ef; @@ -962,8 +989,9 @@ a:active { } a.control, input[type="submit"], input[type="reset"] { - font: 8pt "Droid Sans", "Bitstream Vera Sans", Verdana, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif; + font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; font-weight: bold; + background-size: 14px 14px, 100% 100% !important; } a.control, a.controld { @@ -1007,7 +1035,7 @@ input { background: #efe6e0; color: #2f1500; margin: 2px 4px; - font-family: "Bitstream Vera Sans", Verdana, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif; + font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; } input.r { @@ -1079,104 +1107,96 @@ input.disabled, input.disabled:hover { } input.accept { - background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; + background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.accept:hover, input.accept:focus { - background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.add { - background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.add:hover, input.add:focus { - background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.cancel { - background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.cancel:hover, input.cancel:focus { - background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.create { - background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.create:hover, input.create:focus { - background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.delete { - background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.delete:hover, input.delete:focus { - background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.reload { - background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; } input.reload:hover, input.reload:focus { - background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.reload[name="recheck"] { - background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; float: right; margin: 6px 2px; } input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus { - background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.starttorrent { - background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 18px !important; float: right; margin: 6px; } input.starttorrent:hover, input.starttorrent:focus { - background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } input.stoptorrent { - background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - padding: 5px 5px 5px 22px !important; - min-height: 22px; + background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); + padding: 5px 5px 5px 21px !important; float: right; margin: 6px; } input.stoptorrent:hover, input.stoptorrent:focus { - background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } select { background: #efe6e0 url(images/dropdown.png) right center no-repeat !important; color: #2f1500; - font: 8pt "Bitstream Vera Sans", Verdana, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif; + font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; font-weight: bold; padding: 5px 14px 5px 5px; border-radius: 2px; @@ -1217,7 +1237,7 @@ textarea, input[name="nofilter_dataDir"] { border: 1px solid #2f1500; font-size: 8pt; margin-left: 5px; - font-family: "Bitstream Vera Sans", Verdana, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif; + font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; width: 70%; } @@ -1260,10 +1280,6 @@ img[src$="details.png"] { mix-blend-mode: luminosity; } -img.thumb { - width: 16px; -} - .snarkFileStatus img { mix-blend-mode: luminosity; } diff --git a/installer/resources/themes/susidns/classic/susidns.css b/installer/resources/themes/susidns/classic/susidns.css index 4f72fc31a..db43373fb 100644 --- a/installer/resources/themes/susidns/classic/susidns.css +++ b/installer/resources/themes/susidns/classic/susidns.css @@ -5,6 +5,7 @@ body { font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; background: #eef; color: #0c153d; + min-width: 700px; } body.iframed { @@ -78,9 +79,33 @@ table.book td:nth-child(2) { white-space: nowrap; } -table.book td:nth-child(3), table.book td:nth-child(4) { - width: 50px; +table.book td:nth-child(3) { + width: 30px; white-space: nowrap; + padding-left: 10px; +} + +.book td:nth-child(4) { + text-align: center; + width: 20px; + padding: 2px 25px 2px 0 !important; +} + +.book td:nth-child(4) a:not(old) { + font-size: 0 !important; +} + +.book td:nth-child(4) .addrhlpr a::after { + content: url(/themes/console/images/buttons/fullview.png); + text-align: center; + padding: 0 10px !important; + filter: drop-shadow(0 0 1px #555); + -webkit-filter: drop-shadow(0 0 1px #555); +} + +.book td:nth-child(4) .addrhlpr:hover { + filter: drop-shadow(0 0 1px #f60); + -webkit-filter: drop-shadow(0 0 1px #f60); } td.destinations { @@ -219,8 +244,8 @@ h4 { } a { - color:#006; - text-decoration:none; + color: #33a; + text-decoration: none; font-weight: bold; } @@ -298,9 +323,14 @@ p.book, #messages + p { } p.footer { - font-size:7pt; + font-size: 7pt; text-align: center; - padding: 10px 0 0; + padding: 0; + margin: 12px auto -15px; + border: 1px solid #89f; + border-radius: 0 0 3px 3px; + width: 200px; + background: #fff; } .iframed #footer { @@ -331,17 +361,20 @@ div#filter { font-size: 10pt; box-shadow: inset 0 0 0 1px #fff; text-transform: capitalize; - color: #006; + color: #555; } -#filter a:hover { +#filter a:hover, #filter a:focus { text-decoration: none; - color: #f60; - border: 1px solid #f60; - border-radius: 2px; + color: #f60 !important; + border: 1px solid #f60 !important; background: #fff; } +#filter a:active { + box-shadow: inset 3px 3px 3px #999; +} + #filter p b { font-size: 12pt; vertical-align: bottom; @@ -411,6 +444,9 @@ td.search:last-child { #search input[type="text"] { width: 200px; + margin-left: 10px; + background: url(/themes/console/images/buttons/search.png) 5px center no-repeat; + padding: 5px 5px 5px 25px; } #messages:empty { @@ -479,6 +515,11 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { color: #000; } +input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { + border: none; + outline: none; +} + input[type="submit"], input[type="reset"] { min-width: 80px; } @@ -510,17 +551,30 @@ button, input[type="submit"], input[type="reset"] { background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); margin: 2px 0 2px 4px; + filter: drop-shadow(0 0 1px #ccc); + color: #333; } -button:hover, input[type="submit"]:hover, input[type="reset"]:hover { +button:hover, input[type="submit"]:hover, input[type="reset"]:hover, +button:focus, input[type="submit"]:focus, input[type="reset"]:focus { background: #fff; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); - border: 1px solid #bbb; + border: 1px solid #89f; + filter: drop-shadow(0 0 1px #89f); + -webkit-filter: drop-shadow(0 0 1px #89f); + color: #222; } button:active, input[type="submit"]:active, input[type="reset"]:active { - background: #ddd; + box-shadow: inset 3px 3px 3px #999; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999; border: 1px solid #bbb; + color: #333; +} + +input[type="radio"], input[type="checkbox"] { + min-width: 16px; + min-height: 16px; } form[action="subscriptions"], form[action="config"] { @@ -537,7 +591,7 @@ form[action="subscriptions"] textarea { padding: 3px !important; } -#navi a { +#navi a, #navi a:visited { border: 1px solid #6b78bf; border-radius: 2px; margin: 3px 0 !important; @@ -545,16 +599,19 @@ form[action="subscriptions"] textarea { -webkit-filter: drop-shadow(0 0 1px #ccc); display: inline-block; outline: none; + color: #448 !important; } #navi a:hover, #navi a:focus { border: 1px solid #f60; + color: #f60 !important; } #navi a:active { border: 1px solid #f90; box-shadow: inset 2px 2px 2px #555; background-blend-mode: luminosity; + color: #777 !important; } #navi a.abook { @@ -638,11 +695,75 @@ form[action="subscriptions"] textarea { } p#filtered { - background: #fff url(/themes/susidns/images/filter.png) 18px center no-repeat; + background: #fff url(/themes/console/images/buttons/filter.png) 18px center no-repeat; padding: 0 10px 0 38px !important; } p.book { background: #fff url(/themes/susidns/images/abook.png) 18px center no-repeat; padding: 0 10px 0 38px !important; -} \ No newline at end of file +} + +/* responsive layout */ + +@media screen and (min-width: 1400px) { +body, p, td, textarea, input, button, li, a { + font-size: 10pt !important; +} + +code, tt { + font-size: 9pt !important; +} + +h4, #navi a { + font-size: 11pt; +} + +h3 { + font-size: 12pt !important; +} + +p.footer { + margin: 12px auto -21px !important; +} + +#export { + margin-top: -40px !important; +} + +#filter span, #filter a { + font-size: 11pt !important; +} + +} + +/* end responsive layout */ + + +/* export hosts */ + +#export { + text-align: right; + margin-top: -36px; + margin-bottom: -4px; +} + +#filter { + margin-top: -2px !important; +} + +p#filtered { + padding-right: 200px !important; + padding-top: 2px !important; + padding: 2px 200px 0 20px !important; + background-position: left center !important; +} + +#book p { + margin-left: 2px; +} + +p.book { + padding-left: 26px !important; + background-position: left center !important; +} diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css index 6a1a8ee4b..62860af79 100644 --- a/installer/resources/themes/susidns/dark/susidns.css +++ b/installer/resources/themes/susidns/dark/susidns.css @@ -4,10 +4,11 @@ body { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; line-height:120%; - background-color: #000; + background: #000; color:#ee9; padding-top: 5px; margin: 0 10px; + min-width: 650px; } body.iframed { @@ -15,16 +16,50 @@ body.iframed { margin: 0; } +::selection { + background: #030 !important; + color: white; +} + +::-moz-selection { + background: #030 !important; + color: white; +} + +.page { + color:#ee9; + margin: 10px 0; + padding: 0 5px; + font-size: 9pt !important; + box-shadow: inset 0 0 1px 0 #002; + background: #000; +} + +.iframed .page { + margin: 0; + padding: 0 15px; +} + #logo { display: none; } +#logo img { + display: none; +} + +/* topnav */ + div#navi { border: 1px solid #2a5f29; - padding: 10px 0 5px; + padding: 5px 3px; background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important; - background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; - margin-bottom: 30px; + background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; + margin: -16px auto 30px; + position: sticky; + top: -1px; + border-radius: 0 0 2px 2px; + z-index: 999; } .iframed div#navi { @@ -32,7 +67,8 @@ div#navi { border: 1px solid #494; border-right: none; border-left: none; - padding: 6px 0 2px; + padding: 5px 0; + border-radius: 0; } #navi p { @@ -45,6 +81,102 @@ div#navi { text-transform: capitalize; } +#navi a, #navi a:visited { + color: #494 !important; + border: 1px solid #2a5f29; + border-radius: 2px; + display: inline-block; + margin: 1px 0; + box-shadow: inset 0 0 0 1px #000; + filter: drop-shadow(0 0 1px #000); + -webkit-filter: drop-shadow(0 0 1px #000); +} + +#navi a:hover, #navi a:focus { + border: 1px solid #f60; + color: #f60 !important; + background: #000; + box-shadow: inset 0 1px 1px #ee9; +} + +#navi a:active { + border: 1px solid #f60; + box-shadow: inset 3px 3px 3px #000; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; + color: #ee9 !important; + background-blend-mode: luminosity; +} + +#navi a.abook { + background: #000 url(/themes/susidns/images/abook.png) 5px center no-repeat; + background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); + padding: 3px 5px 3px 24px; +} + +#navi a.abook:hover, #navi a.abook:focus { + background: #000 url(/themes/susidns/images/abook.png) 5px center no-repeat !important; +} + +#navi a.abook:active { + background: #f60 url(/themes/susidns/images/abook.png) 5px center no-repeat !important; +} + +#navi a#subs { + background: #000 url(/themes/susidns/images/subs.png) 5px center no-repeat; + background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); + padding: 3px 5px 3px 24px; +} + +#navi a#subs:hover, #navi a#subs:focus { + background: #000 url(/themes/susidns/images/subs.png) 5px center no-repeat !important; +} + +#navi a#subs:active { + background: #f60 url(/themes/susidns/images/subs.png) 5px center no-repeat !important; +} + +#navi a#config { + background: #000 url(/themes/console/images/buttons/configure.png) 5px center no-repeat; + background: url(/themes/console/images/buttons/configure.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); + padding: 3px 5px 3px 24px; +} + +#navi a#config:hover, #navi a#config:focus { + background: #000 url(/themes/console/images/buttons/configure.png) 5px center no-repeat !important; +} + +#navi a#config:active { + background: #f60 url(/themes/console/images/buttons/configure.png) 5px center no-repeat !important; +} + +#navi a#overview { + background: #000 url(/themes/susidns/images/overview.png) 5px center no-repeat; + background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); + padding: 3px 5px 3px 24px; +} + +#navi a#overview:hover, #navi a#overview:focus { + background: #000 url(/themes/susidns/images/overview.png) 5px center no-repeat !important; +} + +#navi a#overview:active { + background: #f60 url(/themes/susidns/images/overview.png) 5px center no-repeat !important; +} + +#navi p { + text-align: center !important; + text-transform: capitalize; + font-weight: bold; + padding: 2px 5px !important; + margin: 0 !important; +} + +#navi p > * { + vertical-align: middle; +} + +/* end topnav */ + hr { color: #494; background: #494; @@ -60,11 +192,12 @@ div#filter { border: 1px solid #2a5f29; padding: 0 0 15px; text-align: center; + background: #000; } div#filter + div#search { border: 1px solid #2a5f29; - margin-top: 13px; + margin: -1px 0 14px !important; } div#filter + div#search > form { @@ -78,7 +211,8 @@ div#filter + div#search > form { } #search { - text-align: center + text-align: center; + background: #000; } #search table { @@ -99,7 +233,6 @@ div#filter + div#search > form { } #filter p { -/* border: 1px solid #f00; */ padding: 20px 20px 10px 17px; text-align: center; } @@ -113,7 +246,6 @@ div#filter + div#search > form { } #search { -/* border: 1px solid #2a5f29; */ padding: 0 10px; margin-top: 5px !important; margin-bottom: 15px; @@ -139,6 +271,7 @@ div#filter + div#search > form { background: linear-gradient(to bottom, #010 0%, #000 100%); font-size: 10pt; text-transform: uppercase; + white-space: nowrap; } #filter a:hover { @@ -149,6 +282,10 @@ div#filter + div#search > form { background: #020; } +#filter a:active { + box-shadow: inset 3px 3px 3px #000; +} + #filter span { display: inline-block; border: 1px solid #2a5f29; @@ -165,6 +302,10 @@ div#filter + div#search > form { background: none; } +#filter span a:active { + box-shadow: none; +} + #filter span b { text-transform: uppercase; font-size: 10pt; @@ -178,16 +319,6 @@ p { text-align: justify; } -#messages + p, p.book { - border: 1px solid #2a5f29; - background: #000 url(/themes/susidns/images/addressbook.png) 10px center no-repeat; - padding: 20px 20px 20px 50px !important; -} - -#messages:empty { - margin-top: -10px -} - span.addrhlpr { font-size: 9pt; } @@ -234,15 +365,40 @@ div.headline { } div#messages { + margin: -16px 0 25px !important; + background: #020; + z-index: 999; + border: 1px solid #2a5f29; + box-shadow: inset 0 0 0 1px #000; + line-height: 120%; } -div#messages + p { +#messages p { + padding: 15px 15px 15px 40px !important; + background: url(/themes/console/dark/images/infohelp.png) 6px center no-repeat; + color: #ee9; + padding: 5px 5px 10px; + margin: 0; + border-radius: 0; +} + +#messages + p, p.book { + border: 1px solid #2a5f29; + background: #000 url(/themes/susidns/images/addressbook.png) 10px center no-repeat; + padding: 20px 20px 20px 50px !important; +} + +#messages:empty { + display: none; +} + +p#filtered { padding: 12px 10px 8px 20px; font-size: 10pt; - margin-bottom: 15px; + margin: -15px 0 10px; } -div#book p { +div#book p, p.messages { font-size: 10pt; } @@ -250,32 +406,49 @@ div#book p { padding: 0 !important; } +.book td { + padding: 0; +} + +.book td:nth-child(3) { + padding: 2px 0 2px 5px !important; + width: 30px; +} + +.book td:nth-child(4) { + text-align: center; + width: 20px; + padding: 2px 25px 2px 0 !important; +} + +.book td:nth-child(4) a:not(old) { + font-size: 0 !important; +} + +.book td:nth-child(4) .addrhlpr a::after { + content: url(/themes/console/images/buttons/fullview.png); + text-align: center; + padding: 0 10px !important; + filter: drop-shadow(0 0 1px #555); + -webkit-filter: drop-shadow(0 0 1px #555); +} + +.book td:nth-child(4) .addrhlpr:hover { + filter: drop-shadow(0 0 1px #f60); + -webkit-filter: drop-shadow(0 0 1px #f60); +} + h4 { font-size: 9pt; margin-top: -15px; word-spacing: 0.1em; border: 1px solid #2a5f29; - padding: 8px 10px; + padding: 8px 10px 8px 35px; margin-bottom: 30px !important; - background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; + background: #000 url(/themes/susidns/drive.png) 9px center no-repeat; + background: url(/themes/susidns/images/drive.png) 9px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; } -div#messages > p.messages { - padding: 10px; -} - -#messages p { - padding: 15px 15px 15px 40px !important; - background: url(/themes/console/dark/images/infohelp.png) 6px center no-repeat; -} -/* -a { - color:#f60; - text-decoration:none; - font-weight: bold; -} -*/ - a:link { color: #494; text-decoration: none; @@ -307,7 +480,6 @@ th { td { color: #ee9; - line-height: 12pt; padding: 5px; font-size: 9pt; vertical-align: middle; @@ -369,7 +541,6 @@ ol, ul { li { color: #ee9; - line-height: 12pt; margin: 0; font-size: 9pt; list-style: square; @@ -383,20 +554,9 @@ tr.list0 { background-color: #000; } -p.messages { -/* background-color:#000; */ - color:#ee9; - border: 1px solid #2a5f29; - padding: 5px 5px 10px; - margin: 5px 0 10px; - margin: -15px 0 14px; - border-radius: 0; -} - .help { border: 1px solid #2a5f29; padding: 20px 30px; - background: #000; } .help h3 { @@ -412,14 +572,18 @@ p.messages { } #helpsubs { - padding: 0; + padding: 0 0 0 40px; + background: #000 url(/themes/console/dark/images/infohelp.png) 15px center no-repeat !important; } #helpsubs p { border: none; + line-height: 130%; + padding: 15px; } -div#content { +#helpconfig { + background: #000; } div#content p { @@ -427,8 +591,9 @@ div#content p { } p.footer { - font-size:7pt; + font-size: 7pt; text-align: center; + display: none; } .iframed #footer { @@ -444,7 +609,8 @@ p.buttons, #buttons { div#book + div#buttons { border: 1px solid #2a5f29; padding: 0 0 10px; - margin-top: -1px; + margin-top: 3px; + background: #000; } form[action="export"] > div#buttons { @@ -456,7 +622,7 @@ form[action="export"] > div#buttons { div#config > textarea, div#content > textarea { border-radius: 0; - margin-top: -17px; + margin-top: -26px; } textarea[name="config"] { @@ -489,6 +655,7 @@ div#config + div#buttons, div#content + div#buttons { div#book { padding: 0; + margin: -15px 0 -5px; } #book table { @@ -512,6 +679,10 @@ div#book { background: #001a00; } +#book table tr:hover td textarea { + color: #ee9; +} + #book th:first-child { background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000; background: url(images/bin.png) center center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important; @@ -556,19 +727,6 @@ div#add { padding-top: 5px; } -.page { - color:#ee9; - margin: 10px 0; - padding: 0 5px; - font-size: 9pt !important; - box-shadow: inset 0px 0px 1px 0px #002; -} - -.iframed .page { - margin: 0; - padding: 0 15px; -} - input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus { background: #000; color: #f60; @@ -585,7 +743,7 @@ input { font-size: 9pt; font-weight: bold; text-align: left; - padding: 3px 4px !important; + padding: 5px !important; border-radius: 2px; border: 1px solid #2a5f29; background: #000 none !important; @@ -601,7 +759,7 @@ input[type="submit"], input[type="reset"] { border: 1px outset #191; border-radius: 2px; margin: 5px; - padding: 4px 2px !important; + padding: 5px !important; font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; text-align: center; min-height: 22px !important; @@ -611,9 +769,10 @@ input[type="submit"], input[type="reset"] { input[type=submit]:active, input[type=reset]:active { background: #f60 !important; color: #ee9 !important; - border: 1px inset #f60; + border: 1px solid #f60; filter: none; - box-shadow: none; + box-shadow: inset 3px 3px 3px #000; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; } input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */ @@ -637,7 +796,7 @@ input[type="text"], textarea { textarea { color: #bb7; border: 1px solid #2a5f29; - padding: 3px; + padding: 3px 5px; font: bold 8.5pt "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; border-radius: 2px; width: 100%; @@ -653,10 +812,13 @@ textarea[cols="70"] { .destinations textarea { width: 100%; - width: calc(100% - 3px); padding: 1px !important; - height: 34px; + height: 32px; resize: none; + border: none; + border-left: 1px solid #2a5f29; + margin: 0 !important; + border-radius: 0; } input:focus, textarea:focus { @@ -667,63 +829,20 @@ input:focus, textarea:focus { transition: ease filter 0.3s 0s; } -/* topnav */ - -#navi { - padding: 8px 3px !important; +textarea:focus { + filter: none; + -webkit-filter: none; + box-shadow: inset 0 0 1px #880; } -#navi a { - border: 1px solid #494; - border-radius: 2px; - filter: drop-shadow(0 0 1px #000); - -webkit-filter: drop-shadow(0 0 1px #000); +input[name="search"] { + background: url(/themes/console/images/buttons/search.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important; + padding: 5px 5px 5px 25px !important; } -#navi a:hover { - border: 1px solid #f60; -} - -#navi a:active { - border: 1px solid #f90; - box-shadow: inset 2px 2px 2px #000; - background-blend-mode: luminosity; -} - -#navi a.abook { - background: #000 url(/themes/susidns/images/abook.png) 5px center no-repeat; - background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); - padding: 4px 5px 4px 24px; -} - -#navi a#subs { - background: #000 url(/themes/susidns/images/subs.png) 5px center no-repeat; - background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); - padding: 4px 5px 4px 24px; -} - -#navi a#config { - background: #000 url(/themes/console/images/buttons/configure.png) 5px center no-repeat; - background: url(/themes/console/images/buttons/configure.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); - padding: 4px 5px 4px 24px; -} - -#navi a#overview { - background: #000 url(/themes/susidns/images/overview.png) 5px center no-repeat; - background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%); - padding: 4px 5px 4px 24px; -} - -#navi p { - text-align: center !important; - text-transform: capitalize; - font-weight: bold; - padding: 2px 5px !important; - margin: 0 !important; -} - -#navi p > * { - vertical-align: middle; +input[name="search"]:focus { + background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat !important; + padding: 5px 5px 5px 25px !important; } /* page titles */ @@ -744,3 +863,70 @@ input:focus, textarea:focus { .headline#config h3 { background: url(/themes/susidns/images/configure_24.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%); } + +/* responsive layout */ + +@media screen and (max-width: 710px) { +#navi a { + background: linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%) !important; + padding: 3px 8px !important; +} +} + +@media screen and (min-width: 1400px) { +textarea { + font-size: 9pt; +} + +body, input[type="submit"], input[type="reset"], input, select, h4, td.names a, p, li { + font-size: 10pt !important; +} + +div#navi { + padding: 6px 5px !important; +} + +#navi a { + font-size: 10.5pt !important; + padding: 6px 5px 6px 25px !important; +} + +h3, #filter a { + font-size: 11pt !important; +} + +#filter a:link, #filter a:visited { + margin: 3px 2px !important; +} +} + +/* end responsive layout */ + +/* export hosts button adjustments */ + +#export { + text-align: right; + margin-top: -58px; + margin-bottom: 23px; + padding-right: 4px; + float: right; + clear: left !important; +} + +#export input[type="submit"] { + display: inline-block; +} + +p#filtered { + padding-left: 35px !important; + padding-right: 250px !important; +} + +p.book { + padding-left: 35px !important; +} + +#messages + p, p.book { + border: 1px solid #2a5f29; + background: #000 url(/themes/susidns/images/addressbook.png) 5px center no-repeat; +} diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css index 2a30eaa00..6eab5eed0 100644 --- a/installer/resources/themes/susidns/light/susidns.css +++ b/installer/resources/themes/susidns/light/susidns.css @@ -488,6 +488,7 @@ td.search:first-child { background: #f60; text-decoration: none; box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333; } #filter span { @@ -599,6 +600,35 @@ table.book { font-weight: bold; } +.book td:nth-child(3) { + width: 30px; + white-space: nowrap; + padding-left: 10px; +} + +.book td:nth-child(4) { + text-align: center; + width: 20px; + padding: 2px 25px 2px 0 !important; +} + +.book td:nth-child(4) a:not(old) { + font-size: 0 !important; +} + +.book td:nth-child(4) .addrhlpr a::after { + content: url(/themes/console/images/buttons/fullview.png); + text-align: center; + padding: 0 10px !important; + filter: drop-shadow(0 0 1px #555); + -webkit-filter: drop-shadow(0 0 1px #555); +} + +.book td:nth-child(4) .addrhlpr:hover { + filter: drop-shadow(0 0 1px #f60); + -webkit-filter: drop-shadow(0 0 1px #f60); +} + .book th { border-bottom: 1px solid #7778bf; } @@ -841,3 +871,18 @@ form[action="addressbook"] table { width: 100% !important; font-weight: bold; } + +/* export hosts */ + +#export { + text-align: right; + margin-top: -36px; +} + +#filter { + margin-top: -2px !important; +} + +p#filtered { + padding-right: 200px !important; +} diff --git a/installer/resources/themes/susidns/midnight/susidns.css b/installer/resources/themes/susidns/midnight/susidns.css index 5fcde48bc..e915962bc 100644 --- a/installer/resources/themes/susidns/midnight/susidns.css +++ b/installer/resources/themes/susidns/midnight/susidns.css @@ -2,9 +2,9 @@ /* Author: dr|z3d */ body { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; background-color: #000; - color:#C9CEFF; + color:#c9ceff; margin: 0 10px; font-size: 9pt; } @@ -20,32 +20,127 @@ body.iframed { display: none; } +/* topnav */ + div#navi { border: 1px solid #2d295f; - padding: 5px 0; + padding: 2px 0; background: #002 url(/themes/console/midnight/images/header.png) repeat-x scroll center center !important; background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%, #000000 100%) !important; - margin-bottom: 30px; + margin: -10px 0 27px; + box-shadow: inset 0 0 0 1px #000; + position: sticky; + top: 0; + z-index: 999; } -/* .iframed #navi { - border-left: none; - border-right: none; - border-radius: 0; + padding: 0 !important; + border: 1px solid #443da0 !important; + margin: 0 0 27px; +} + +#navi a, #navi a:visited { + border: 1px solid #2d295f; + border-radius: 2px; + padding: 5px; + margin: 3px 0 !important; + filter: drop-shadow(0 0 1px #000); + -webkit-filter: drop-shadow(0 0 1px #000); + display: inline-block; + outline: none; + text-transform: capitalize; + color: #928fbf !important; + box-shadow: inset 0 0 0 1px #000; +} + +#navi a:hover, #navi a:focus { + border: 1px solid #652787; + color: #652787 !important; +} + +#navi a:active { + border: 1px solid #652787; + background-blend-mode: luminosity; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important; + color: #c9ceff !important; +} + +#navi a.abook { + background: #001 url(/themes/susidns/images/abook.png) 6px center no-repeat; + background: url(/themes/susidns/images/abook.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%); + padding: 5px 8px 5px 25px; +} + +#navi a.abook:hover, #navi a.abook:focus { + background: #000 url(/themes/susidns/images/abook.png) 6px center no-repeat !important; + box-shadow: inset 0 1px 1px 0 #c9ceff; +} + +#navi a.abook:active { + background: #652787 url(/themes/susidns/images/abook.png) 6px center no-repeat !important; +} + +#navi a#subs { + background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat; + background: url(/themes/susidns/images/subs.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%); + padding: 5px 8px 5px 25px; +} + +#navi a#subs:hover, #navi a#subs:focus { + background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat; + box-shadow: inset 0 1px 1px 0 #c9ceff; +} + +#navi a#subs:active { + background: #652787 url(/themes/susidns/images/subs.png) 6px center no-repeat; +} + +#navi a#config { + background: #001 url(/themes/console/images/buttons/configure.png) 6px center no-repeat; + background: url(/themes/console/images/buttons/configure.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%); + padding: 5px 8px 5px 25px; +} + +#navi a#config:hover, #navi a#config:focus { + background: #000 url(/themes/console/images/buttons/configure.png) 6px center no-repeat; + box-shadow: inset 0 1px 1px 0 #c9ceff; +} + +#navi a#config:active { + background: #652787 url(/themes/console/images/buttons/configure.png) 6px center no-repeat; +} + +#navi a#overview { + background: #001 url(/themes/susidns/images/overview.png) 6px center no-repeat; + background: url(/themes/susidns/images/overview.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%); + padding: 5px 8px 5px 25px; +} + +#navi a#overview:hover, #navi a#overview:focus { + background: #000 url(/themes/susidns/images/overview.png) 6px center no-repeat; + box-shadow: inset 0 1px 1px 0 #c9ceff; +} + +#navi a#overview:active { + background: #652787 url(/themes/susidns/images/overview.png) 6px center no-repeat; } -*/ #navi p { - text-align: center; + text-align: center !important; + text-transform: capitalize; font-weight: bold; font-size: 9pt; + padding: 2px 5px !important; + margin: 0 !important; } -#navi a:link { - text-transform: capitalize; +#navi p > * { + vertical-align: middle; } +/* end topnav */ + hr { color: #2d295f; background: #2d295f; @@ -66,6 +161,7 @@ div#filter { div#filter + div#search { border: 1px solid #2d295f; margin-top: 13px; + margin-bottom: 14px; } div#filter + div#search > form { @@ -74,14 +170,25 @@ div#filter + div#search > form { } #filter p, #search td { - font-size: 10pt !important; + font-size: 9pt !important; font-weight: bold; } -#search input { +td.search > * { + vertical-align: middle; +} + +#search input[type="text"] { + background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat; + background: url(/themes/console/images/buttons/search.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #000019 100%) !important; + padding: 5px 5px 5px 25px !important; margin-left: 5px; } +#search input[type="text"]:focus { + background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat !important; +} + #filter p { padding: 15px 10px 0; } @@ -91,11 +198,10 @@ div#filter + div#search > form { } p#filtered { - margin-bottom: 10px !important; + margin: -15px 0 10px !important; } #search { -/* border: 1px solid #494; */ padding: 0 10px; margin-top: -1px !important; padding-bottom: -20px; @@ -104,18 +210,29 @@ p#filtered { #filter a:link, #filter a:visited { text-transform: capitalize; + background: #000; border: 1px solid #443da0; border-radius: 2px; - padding: 2px 5px; - min-width: 16px; + padding: 3px 8px; text-align: center; color: #443da0; display: inline-block; - margin: 0; + margin: 2px 0; +} + +#filter a:hover, #filter a:focus { + border: 1px solid #652787; + transform: scale(1.1); +} + +#filter a:active { + background: #652787; + color: #c9ceff !important; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; } #filter span { - display: inline-block; + display: inherit; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; @@ -126,7 +243,10 @@ p#filtered { border-radius: 0 0 2px 2px; padding: 5px 10px !important; min-width: 300px; - margin: -1px 10%; + max-width: 500px; + width: 40%; + white-space: nowrap; + margin: -1px auto; box-shadow: inset 0 0 0 1px #000; background: url(/themes/console/midnight/images/header.png) repeat-x scroll center center #000; background-image: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important; @@ -138,6 +258,13 @@ p#filtered { display: inline-block; border: none !important; background: !important; + transform: none; +} + +#filter span a:active { + background: none; + box-shadow: none; + color: #4f0519 !important; } #filter span b { @@ -157,7 +284,7 @@ p#filtered { } p { - color:#C9CEFF; + color:#c9ceff; margin: 0 0 4px; font-size: 9pt; text-align: justify; @@ -170,8 +297,13 @@ p { padding: 20px 20px 20px 42px !important; } +#messages { + margin-bottom: 24px; +} + #messages:empty { - margin-top: -10px + margin-top: -10px; + display: none; } span.addrhlpr { @@ -179,9 +311,9 @@ span.addrhlpr { } h3 { - color:#C9CEFF; - font-size:10pt; - font-weight:bold; + color: #c9ceff; + font-size: 10pt; + font-weight: bold; border: 1px solid #2d295f; padding: 7px 10px; border-radius: 2px; @@ -191,6 +323,7 @@ h3 { word-spacing: 0.1em; text-shadow: 0 0 2px #010011; text-transform: uppercase; + box-shadow: inset 0 0 0 1px #000; } #content h3 { @@ -206,16 +339,6 @@ h3 { margin-top: 15px !important; } -/* -.iframed h3, .iframed h4 { - border: none; - border-bottom: 1px solid #443da0; - border-radius: 0; - background: none !important; - margin: 5px 0 10px; -} -*/ - .headline h3 { border-radius: 2px 2px 0 0; margin-top: -10px; @@ -257,16 +380,15 @@ h3 { margin-top: -16px; } -div#messages { +div#messages p { } div#messages + p { padding: 12px 10px 8px 20px; - font-size: 10pt; } div#book p { - font-size: 10pt; + padding: 15px 15px 15px 35px !important; } h4 { @@ -288,14 +410,6 @@ div#messages > p.messages { background: url(/themes/console/images/info/infohelp.png) 6px center no-repeat; } -/* -a { - color:#f60; - text-decoration:none; - font-weight: bold; -} -*/ - a:link { color: #443da0; text-decoration: none; @@ -318,19 +432,30 @@ a:active { } th { - color: #C9CEFF; + color: #c9ceff; font-size: 9pt; padding: 5px 10px; font-size: 10pt; text-align: left; } +.iframed .book tr.head th { + border-top: 1px solid #2d295f; + border-bottom: 1px solid #2d295f; +} + +.book th:first-child { + background: #000 url(/themes/console/images/buttons/delete.png) center center no-repeat !important; + font-size: 0; + padding: 0 !important; +} + table.book td:first-child { font-weight: bold; } td { - color: #C9CEFF; + color: #c9ceff; padding: 5px; font-size: 9pt; vertical-align: center; @@ -344,26 +469,6 @@ td.names a { font-size: 9pt !important; } -/* -div#buttons + div > table { - width: 100%; - border: 1px solid #2d295f; - margin-top: -46px; -} - -div#buttons + div > table > tbody > tr > td { - padding-top: 51px !important; -} - -div#buttons + div > table > tbody > tr > td:first-child { - text-align: right; -} - -div#buttons + div > table > tbody > tr > td { - text-align: left; -} -*/ - td > img[width="320"], td > img[src^="/imagegen"] { border-radius: 2px; width: 240px; @@ -397,8 +502,7 @@ tr.list0 { } p.messages { -/* background-color:#000; */ - color:#C9CEFF; + color:#c9ceff; border: 1px solid #2d295f; padding: 5px 5px 10px; margin: 5px 0 10px; @@ -439,24 +543,23 @@ p.messages { div#content { } -/* -.iframed #content { - margin: 0 10px; -} -*/ - div#content p { padding: 0 30px; - font-size: 10pt; -} - -#content p a, #helpconfig li, p.help { - font-size: 10pt; } p.footer { - font-size:7pt; + font-size: 8pt; text-align: center; + border: 1px solid #113; + padding: 5px 0 2px; +} + +#footer { + position: fixed; + bottom: -4px; + width: calc(100% - 20px); + margin: 0; + display: none; } .iframed #footer { @@ -481,7 +584,7 @@ p.buttons { } div#book + div#buttons { - margin: -6px 0 20px !important; + margin: 9px 0 20px !important; } #add p.buttons { @@ -495,15 +598,11 @@ form[action="subscriptions"] { textarea[name="config"], textarea[name="content"] { border-radius: 0; - margin-top: -17px; + margin-top: -26px; resize: none; border: 1px solid #2d295f; + font-size: 8.5pt; } -/* -.iframed textarea[name="config"], .iframed textarea[name="content"] { - margin: 0 0 20px; -} -*/ textarea[name="config"] { height: 220px; @@ -511,10 +610,6 @@ textarea[name="config"] { resize: none; } -textarea[name="content"] { - -} - div#config + div#buttons, div#content + div#buttons { border: 1px solid #2d295f; margin-top: -3px; @@ -539,14 +634,19 @@ div#config + div#buttons, div#content + div#buttons { div#book { padding: 0; + margin: -15px 0 -10px; } #book table { width: 100%; - border: 1px solid #2d295f; + border: 1px solid #2d295f !important; margin-top: -10px; } +.iframed #book table { + border: none !important; +} + #book table th { padding: 5px 0; background: url(/themes/console/midnight/images/header.png) repeat-x scroll center center #000; @@ -563,10 +663,42 @@ div#book { background: #003; } +#book table tr:hover textarea { + color: #c9ceff; +} + #book, #messages, #filter, #search { background: #001; } +.book td:nth-child(3) { + padding: 2px 0 2px 5px !important; + width: 30px; +} + +.book td:nth-child(4) { + text-align: center; + width: 20px; + padding: 2px 25px 2px 0 !important; +} + +.book td:nth-child(4) a:not(old) { + font-size: 0 !important; +} + +.book td:nth-child(4) .addrhlpr a::after { + content: url(/themes/console/images/buttons/fullview.png); + text-align: center; + padding: 2px 10px !important; + filter: drop-shadow(0 0 1px #555); + -webkit-filter: drop-shadow(0 0 1px #555); +} + +.book td:nth-child(4) .addrhlpr:hover { + filter: drop-shadow(0 0 1px #b73fff); + -webkit-filter: drop-shadow(0 0 1px #b73fff); +} + .headline + #book > table td { padding: 5px; } @@ -594,11 +726,11 @@ div#add { } .page { - color:#C9CEFF; + color:#c9ceff; margin: 10px 0; padding: 0; font-size: 9pt !important; - box-shadow: inset 0px 0px 1px 0px #020022; + background: #000; } .iframed .page { @@ -616,39 +748,47 @@ input { background: #000 none !important; color: #443da0; margin: 2px 4px 2px 0; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; min-width: 64px !important; } -input[type=submit]:hover, input[type=reset]:hover { - background: #000; - color: #652787; - border: 1px solid #652787; - box-shadow: inset 0 1px 1px 0 #C9CEFF; -} - input[type="checkbox"], .optbox { filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */ -webkit-filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); } +input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner { + border: none; + outline: none; +} + input[type=submit], input[type=reset] { color: #443da0; background: #000; + background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; border: 1px solid #3e3f8f; border-bottom-color: #14144f; border-right-color: #14144f; - padding: 4px 2px !important; -/* box-shadow: 0 1px 1px 0 #190f9b inset; */ - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + padding: 5px !important; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; text-align: center; - min-width: 90px; + min-width: 90px !important; + box-shadow: inset 0 0 0 1px #000; +} + +input[type=submit]:hover, input[type=reset]:hover, +input[type=submit]:focus, input[type=reset]:focus { + background: #000 !important; + color: #652787; + border: 1px solid #652787; + box-shadow: inset 0 1px 1px 0 #c9ceff; } input[type=submit]:active, input[type=reset]:active { background: #652787 !important; - color: #C9CEFF !important; + color: #c9ceff !important; border: 1px solid #652787; + box-shadow: inset 3px 3px 3px #000; } textarea { @@ -656,7 +796,7 @@ textarea { background: #000; border: 1px solid #443da0; padding: 3px 5px; - font: bold 8.5pt "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: bold 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; border-radius: 2px; width: 100%; height: 120px; @@ -664,6 +804,24 @@ textarea { resize: none; } +input[type="text"], textarea { + background: linear-gradient(to bottom, #000 0%, #000019 100%) !important; + box-shadow: inset 0 0 3px 3px #000; +} + +input[type="text"]:focus, textarea:focus { + background: #000 !important; + color: #c9ceff; +} + +input[type=text]:focus { + color: #c9ceff !important; + background: #000; + filter: drop-shadow(0 0 1px #99f); + -webkit-filter: drop-shadow( 0 0 1px #99f); + transition: filter ease 0.3s 0s; +} + textarea[cols="70"] { width: 100% !important; height: 40px; @@ -679,70 +837,8 @@ textarea[cols="70"] { border: none; border-left: 1px solid #17142f; height: 30px; -} - -input:focus, textarea:focus { - color: #C9CEFF; -} - -/* topnav */ - -.iframed #navi { - padding: 0 !important; - border: 1px solid #443da0 !important; -} - -#navi a { - border: 1px solid #2d295f; - border-radius: 2px; - padding: 5px; - margin: 3px 0 !important; - filter: drop-shadow(0 0 1px #000); - -webkit-filter: drop-shadow(0 0 1px #000); - display: inline-block; - outline: none; -} - -#navi a:hover, #navi a:focus { - border: 1px solid #652787; - color: #652787 -} - -#navi a:active { - border: 1px solid #4f0519; - background-blend-mode: luminosity; -} - -#navi a.abook { - background: #001 url(/themes/susidns/images/abook.png) 5px center no-repeat; - padding: 5px 5px 5px 24px; -} - -#navi a#subs { - background: #001 url(/themes/susidns/images/subs.png) 5px center no-repeat; - padding: 5px 5px 5px 24px; -} - -#navi a#config { - background: #001 url(/themes/console/images/buttons/configure.png) 5px center no-repeat; - padding: 5px 5px 5px 24px; -} - -#navi a#overview { - background: #001 url(/themes/susidns/images/overview.png) 5px center no-repeat; - padding: 5px 5px 5px 24px; -} - -#navi p { - text-align: center !important; - text-transform: capitalize; - font-weight: bold; - padding: 2px 5px !important; - margin: 0 !important; -} - -#navi p > * { - vertical-align: middle; + overflow-x: auto; + overflow-y: hidden !important; } .iframed iframe { @@ -753,7 +849,7 @@ input:focus, textarea:focus { .iframed #navi, .iframed h3, .iframed h4, .iframed #book, .iframed #add, .iframed #filtered, .iframed #filter, .iframed #search, table.book, .iframed #buttons, .iframed .buttons, .iframed #messages + p, .iframed p.book, .iframed #helpsubs, -.iframed textarea[name="config"], .iframed textarea[name="content"], .iframed #helpconfig { +.iframed textarea[name="config"], .iframed textarea[name="content"], .iframed #helpconfig, .iframed p.messages { border-right: none !important; border-left: none !important; } @@ -784,10 +880,59 @@ table.book, .iframed #buttons, .iframed .buttons, .iframed #messages + p, .ifram p#filtered { background: url(/themes/console/images/buttons/filter.png) 13px center no-repeat; - padding: 10px 10px 10px 35px !important; + padding: 15px 15px 15px 35px !important; } p.book { background: url(/themes/susidns/images/abook.png) 13px center no-repeat; padding: 10px 10px 10px 35px !important; -} \ No newline at end of file +} + +/* responsive layout */ + +@media screen and (min-width: 1500px) { +body, input[type="text"], select, h4, td.names a, #filter p, #search td, p, a, textarea { + font-size: 10pt !important; +} + +textarea, input[type="submit"], input[type="reset"] { + font-size: 9pt !important; +} + +h3, #filter a, #navi a { + font-size: 11pt; +} + +#filter a:link, #filter a:visited { + margin: 3px 2px !important; +} +} + +/* export hosts button adjustments */ + +#export { + text-align: right; + margin-top: -48px; + margin-bottom: 23px; + padding-right: 4px; + float: right; + clear: left !important; +} + +#export input[type="submit"] { + display: inline-block; +} + +p#filtered { + padding-left: 35px !important; + padding-right: 250px !important; +} + +p.book { + padding-left: 35px !important; +} + +#messages + p, p.book { + border: 1px solid #2d295f; + background: #000 url(/themes/susidns/images/addressbook.png) 5px center no-repeat; +} diff --git a/installer/resources/themes/susimail/classic/susimail.css b/installer/resources/themes/susimail/classic/susimail.css index e426083e6..4b2551243 100644 --- a/installer/resources/themes/susimail/classic/susimail.css +++ b/installer/resources/themes/susimail/classic/susimail.css @@ -4,7 +4,7 @@ body { background: #eef url(/themes/console/classic/images/bg0.png); color: #0c153d; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-size: 9pt; } @@ -35,7 +35,6 @@ h3#config { margin: 0 auto 10px; background: url(/themes/console/classic/images/titlebg.png) right center no-repeat; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); - box-shadow: 0 1px 0 1px #ddd; border-radius: 0 0 2px 2px; } @@ -45,17 +44,15 @@ textarea[name="config_text"] { li { color: #0c153d; - line-height:12pt; font-size: 8.5pt; - margin-left:5mm; - margin-right:5mm; + margin-left: 5mm; + margin-right: 5mm; } p { color: #0c153d; - line-height:12pt; - margin-left:5mm; - margin-right:5mm; + margin-left: 5mm; + margin-right: 5mm; font-size: 9pt; } @@ -113,9 +110,6 @@ p.footer { font-size:8pt; line-height:10pt; text-align: center; -/* border-top: 1px solid #000; - padding-top: 5px; - margin-top: -10px; */ display: none; } @@ -168,44 +162,8 @@ td#attachedfile { display: none; } -/* -.iframed p:first-child { - display: none; -} -*/ -/* -.mailbody { - display: block !important; -} -*/ - -/* -a { - color:#327BBF; - text-decoration:none; - font-weight: bold; -} - -a.linkspam { - color:#927B40; -} - -a.linknew { - color:#327B40; -} - -a.linkold { - color:#327BBF; -} - -a:hover { - text-decoration:underline; - color: #f60; -} -*/ - a:link { - color: #006; + color: #33a; text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -230,6 +188,14 @@ a:active { font-weight: bold; } +a.linkspam { + color: #8f1a1a; +} + +a.linknew { + color: #2a7f00; +} + td { color: #0c153d; line-height: 12pt; @@ -306,7 +272,16 @@ div#prefsave { } #mailbox th:first-child { - background: url(images/bin.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%); + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; +} + +#mailbox th:nth-child(2) { + background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; + background-blend-mode: luminosity; +} + +#mailbox th:nth-child(4) { + background: url(/susimail/icons/attach.png) center right 3px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important; } #mailbox th:last-child, #mailbox td:last-child, #mailbox th:nth-last-child(3), #mailbox td:nth-last-child(3) { @@ -368,6 +343,11 @@ div#prefsave { -webkit-filter: drop-shadow(0 0 1px #f60); } +img.sort { + height: 8px; + width: auto; +} + #newmail input[type="text"] { width: 665px; } @@ -379,8 +359,8 @@ div#prefsave { pre { font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - margin-left:1cm; - margin-right:1cm; + margin-left: 1cm; + margin-right: 1cm; } .page { @@ -450,8 +430,12 @@ table#message_full { margin-bottom: -1px; } +#message_full tr:last-child { + border-bottom: 1px solid #89f; +} + input, textarea { /* opera fix */ - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-size: 9pt; } @@ -465,7 +449,7 @@ input[type="text"], input[type="password"], textarea { input[type=submit] { margin: 3px; - min-width: 60px; +/* min-width: 60px;*/ } input.new_upload, input.delete_attachment { @@ -487,28 +471,33 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus { } button, input[type="submit"], input[type="reset"] { - padding: 5px !important; + padding: 5px; border-radius: 2px; color: #333; border: 1px solid #bbb; box-shadow: inset 0 0 0 1px #fff; background: #eee; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); - min-width: 88px; +/* min-width: 88px;*/ outline: none !important; filter: drop-shadow(0 0 1px #fff); -webkit-filter: drop-shadow(0 0 1px #fff); display: inline-block; + background-size: 14px 14px, 100% 100% !important; } input[type="file"] { padding: 3px 2px; } -button:hover, input[type="submit"]:hover, input[type="reset"]:hover { +button:hover, input[type="submit"]:hover, input[type="reset"]:hover, +button:focus, input[type="submit"]:focus, input[type="reset"]:focus { + color: #222; background: #fff; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); - color: #222; + border: 1px solid #89f; + filter: drop-shadow(0 0 1px #89f); + -webkit-filter: drop-shadow(0 0 1px #89f); } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { @@ -518,6 +507,10 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { button:active, input[type="submit"]:active, input[type="reset"]:active { background: #ddd; + box-shadow: inset 3px 3px 3px #999; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999; + color: #555; + border: 1px solid #bbb; } input[disabled][type="submit"], input[disabled][type="submit"]:hover, input[disabled][type="submit"]:active { @@ -529,6 +522,314 @@ input.optbox { vertical-align: middle; } +/* illustrated images inc */ + +input.cancel { + background: #eee url(/themes/console/images/buttons/no.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.cancel:hover, input.cancel:focus { + background: #fff url(/themes/console/images/buttons/no.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.clearselection { + background: #eee url(/themes/susimail/images/none.png) no-repeat 7px center; + background: url(/themes/susimail/images/none.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.clearselection:hover, input.clearselection:focus { + background: #fff url(/themes/susimail/images/none.png) no-repeat 7px center; + background: url(/themes/susimail/images/none.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.delete, input.delete_attachment, input.really_delete { + background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/delete.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.delete:hover, input.delete_attachment:hover, input.really_delete:hover, +input.delete:focus, input.delete_attachment:focus, input.really_delete:focus { + background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +.topbuttons input.delete { + margin-left: 0; +} + +input.download { + background: #eee url(/themes/console/images/buttons/download.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.download:hover, input.download:focus { + background: #fff url(/themes/console/images/buttons/download.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.offline { + background: #eee url(/themes/susimail/images/offline.png) no-repeat 7px center; + background: url(/themes/susimail/images/offline.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.offline:hover, input.offline:focus { + background: #fff url(/themes/susimail/images/offline_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/offline_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.list { + background: #eee url(/themes/susimail/images/folder.png) no-repeat 7px center; + background: url(/themes/susimail/images/folder.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.list:hover, input.list:focus { + background: #eee url(/themes/susimail/images/folder-open.png) no-repeat 7px center; + background: url(/themes/susimail/images/folder-open.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.forward { + background: #eee url(/themes/susimail/images/forward.png) no-repeat 7px center; + background: url(/themes/susimail/images/forward.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.forward:hover, input.forward:focus { + background: #fff url(/themes/susimail/images/forward.png) no-repeat 7px center; + background: url(/themes/susimail/images/forward.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.login { + background: #eee url(/themes/susimail/images/login.png) no-repeat 7px center; + background: url(/themes/susimail/images/login.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.login:hover, input.login:focus { + background: #fff url(/themes/susimail/images/login_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/login_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.logout { + background: #eee url(/themes/susimail/images/logout.png) no-repeat 7px center; + background: url(/themes/susimail/images/logout.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.logout:hover, input.logout:focus { + background: #fff url(/themes/susimail/images/logout_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/logout_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reload, input.refresh { + background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.reload:hover, input.refresh:hover, input.reload:focus, input.refresh:focus { + background: #eee url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.invertselection { + background: #eee url(/themes/susimail/images/selection.png) no-repeat 7px center; + background: url(/themes/susimail/images/selection.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.invertselection:hover, input.invertselection:focus { + background: #eee url(/themes/susimail/images/selection.png) no-repeat 7px center; + background: url(/themes/susimail/images/selection.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.show { + background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.show:hover, input.show:focus { + background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + padding: 5px 8px 5px 24px; +} + +input.markall { + background: #eee url(/themes/susimail/images/all.png) no-repeat 7px center; + background: url(/themes/susimail/images/all.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.markall:hover, input.markall:focus { + background: #fff url(/themes/susimail/images/all.png) no-repeat 7px center; + background: url(/themes/susimail/images/all.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.new { + background: #eee url(/themes/susimail/images/compose.png) no-repeat 7px center; + background: url(/themes/susimail/images/compose.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.new:hover, input.new:focus { + background: #fff url(/themes/susimail/images/compose_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/compose_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.reply { + background: #eee url(/themes/susimail/images/reply.png) no-repeat 7px center; + background: url(/themes/susimail/images/reply.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.reply:hover, input.reply:focus { + background: #fff url(/themes/susimail/images/reply.png) no-repeat 7px center; + background: url(/themes/susimail/images/reply.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.replyall { + background: #eee url(/themes/susimail/images/reply-all.png) no-repeat 7px center; + background: url(/themes/susimail/images/reply-all.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.replyall:hover, input.replyall:focus { + background: #fff url(/themes/susimail/images/reply-all.png) no-repeat 7px center; + background: url(/themes/susimail/images/reply-all.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.setpagesize, input.save { + background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.setpagesize:hover, input.save:hover, input.setpagesize:focus, input.save:focus { + background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + padding: 5px 8px 5px 24px; +} + +input.send { + background: #eee url(/themes/susimail/images/send.png) no-repeat 7px center; + background: url(/themes/susimail/images/send.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.send:hover, input.send:focus { + background: #fff url(/themes/susimail/images/send_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/send_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.configure { + background: #eee url(/themes/console/images/buttons/configure.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/configure.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.configure:hover, input.configure:focus { + background: #fff url(/themes/console/images/buttons/configure_hover.png) no-repeat 7px center; + background: url(/themes/console/images/buttons/configure_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.saveas { + background: #eee url(/themes/susimail/images/save.png) no-repeat 7px center; + background: url(/themes/susimail/images/save.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.saveas:hover, input.saveas:focus { + background: #fff url(/themes/susimail/images/save_hover.png) no-repeat 7px center; + background: url(/themes/susimail/images/save_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.new_upload { + background: #eee url(/themes/susimail/images/attach.png) no-repeat 7px center; + background: url(/themes/susimail/images/attach.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%); + padding: 5px 8px 5px 24px; +} + +input.new_upload:hover, input.new_upload:focus { + background: #fff url(/themes/susimail/images/attach.png) no-repeat 7px center; + background: url(/themes/susimail/images/attach.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%); + padding: 5px 8px 5px 24px; +} + +/* pagenav */ + +input.firstpage, input[name="firstpage"], +input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover, +input.firstpage[disabled]:focus, input[name="firstpage"][disabled]:focus { + background: #eee url(/themes/susimail/images/first.png) no-repeat center center !important; + background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + padding: 5px 14px !important; + text-indent: -99999px; +} + +input.firstpage:hover, input[name="firstpage"]:hover, +input.firstpage:focus, input[name="firstpage"]:focus { + background: #fff url(/themes/susimail/images/first.png) no-repeat center center; + background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.lastpage, input[name="lastpage"], +input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover, +input.lastpage[disabled]:focus, input[name="lastpage"][disabled]:focus { + background: #eee url(/themes/susimail/images/last.png) no-repeat center center !important; + background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + padding: 5px 14px !important; + text-indent: -99999px; +} + +input.lastpage:hover, input[name="lastpage"]:hover, +input.lastpage:focus, input[name="lastpage"]:focus { + background: #fff url(/themes/susimail/images/last.png) no-repeat center center; + background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.prevpage, input.prev, input[name="prev"], input[name="prevpage"], +input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover, +input.prevpage[disabled]:focus, input.prev[disabled]:focus, input[name="prev"][disabled]:focus, input[name="prevpage"][disabled]:focus { + background: #eee url(/themes/susimail/images/previous.png) no-repeat center center; + background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + padding: 5px 14px !important; + text-indent: -99999px; +} + +input.prevpage:hover, input.prev, input[name="prev"]:hover, input[name="prevpage"]:hover, +input.prevpage:focus, input.prev, input[name="prev"]:focus, input[name="prevpage"]:focus { + background: #fff url(/themes/susimail/images/previous.png) no-repeat center center; + background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +input.nextpage, input.next, input[name="nextpage"], input[name="next"], +input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover, +input.nextpage[disabled]:focus, input.next[disabled]:focus, input[name="nextpage"][disabled]:focus, input[name="next"][disabled]:focus { + background: #eee url(/themes/susimail/images/next.png) no-repeat center center; + background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + padding: 5px 14px !important; + text-indent: -99999px; +} + +input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover, +input.nextpage:focus, input.next:focus, input[name="nextpage"]:focus { + background: #fff url(/themes/susimail/images/next.png) no-repeat center center; + background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%); +} + +/* end pagenav */ + + +/* end illustrated images */ + div#composemail { text-align: center !important; padding: 10px; @@ -578,7 +879,7 @@ div#mailheader { } div#dologin { - border: 1px solid #89f; + border: 1px solid #777; padding: 10px 0 0; width: 500px; margin: 60px auto 40px; @@ -605,6 +906,9 @@ div#dologin { padding: 4px 5px 4px 26px !important; } +#dologin input[name="host"] { + width: calc(65% + 26px) !important; +} #dologin table { width: 100%; @@ -616,15 +920,17 @@ div#dologin { #dologin td { padding: 3px; font-weight: bold !important; + color: #333; } #dologin td:first-child { white-space: nowrap; padding-left: 0; + width: 120px !important; } #dologin td:last-child { - width: 80%; + width: auto !important; padding-right: 0; } @@ -637,7 +943,7 @@ div#dologin { } #dologin h1 { - border-bottom: 1px solid #89f; + border-bottom: 1px solid #777; padding: 10px 15px; margin: -10px 0 10px; font-size: 14pt; @@ -652,7 +958,7 @@ div#dologin { #dologin hr { display: block !important; - background: #89f; + background: #777; box-shadow: 0 1px 0 1px #fff; } diff --git a/installer/resources/themes/susimail/dark/susimail.css b/installer/resources/themes/susimail/dark/susimail.css index bd23ad57c..fc3efef7d 100644 --- a/installer/resources/themes/susimail/dark/susimail.css +++ b/installer/resources/themes/susimail/dark/susimail.css @@ -6,7 +6,7 @@ body { background-color: #000; color:#ee9; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-size: 9pt; margin: 8px 5px; } @@ -17,6 +17,16 @@ body.iframed { padding-top: 0; } +::selection { + background: #030 !important; + color: white; +} + +::-moz-selection { + background: #030 !important; + color: white; +} + div.header { padding: 8px 5px 12px 5px; } @@ -172,6 +182,21 @@ table#mailbox { margin-bottom: -10px; } +#mailbox th:first-child { + padding: 0 !important; + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; +} + +#mailbox th:nth-child(2) { + background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; + background-blend-mode: luminosity; +} + + +#mailbox th:nth-child(4) { + background: url(/susimail/icons/attach.png) center right 5px no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important; +} + table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] { border-top: 1px solid #494 !important; padding: 6px 0 2px !important; @@ -234,35 +259,24 @@ input.optbox:hover { -webkit-filter: drop-shadow(0 0 2px #f60); } +#attachedfile { + border-bottom: 1px dotted #151; + padding: 5px 5px 5px 8px !important; +} + td#attachedfile:last-child { padding-left: 10px; } td#deleteattached { - padding: 5px 10px 0 !important; + padding: 5px 5px 0 !important; text-align: right; - border-top: 1px solid #131; } tr.bottombuttons:last-child td { padding-bottom: 20px !important; } -/* -p img { - display: none; - height: 0; - width: 0; - margin: -20px 0; -} -*/ - -/* -p:first-child { - display: none; -} -*/ - a:link { color: #f60; color: #5a5; @@ -464,7 +478,7 @@ textarea[name="new_text"] { } td#addattach { - padding: 0 10px 15px !important; + padding: 0 10px 10px !important; border-bottom: 1px solid #131; } @@ -653,10 +667,11 @@ input[type=submit]:hover, input.cancel:hover, input[type=submit]:focus, input.ca } input[type=submit]:active, input.cancel:active { - border: 1px inset #f60; + border: 1px solid #f60; background: #f60 !important; color: #EE9 !important; - box-shadow: inset 0 0 0 1px #000; + box-shadow: inset 3px 3px 3px #000; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; } #dologin input:disabled, #dologin input:disabled:hover, #dologin input:disabled:active { @@ -697,6 +712,7 @@ input[type="text"], input[type="password"], textarea { border: 1px solid #363; background: linear-gradient(to bottom, #000 0%, #010 100%) !important; box-shadow: inset 0 0 3px 3px #000; + font-size: 9pt; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { @@ -707,6 +723,24 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { transition: ease filter 0.3s 0s; } +input[name="user"] { + background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important; + padding: 5px 5px 5px 25px !important; +} + +input[name="user"]:focus { + background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat !important; +} + +input[name="pass"] { + background: url(/themes/console/images/buttons/password.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important; + padding: 5px 5px 5px 25px !important; +} + +input[name="pass"]:focus { + background: #000 url(/themes/console/images/buttons/password.png) 5px center no-repeat !important; +} + input.delete { margin-left: 5px; } @@ -1086,9 +1120,17 @@ body, td, textarea, div, p.mailbody { } @media screen and (min-width: 1500px) { -input { +input, textarea { font-size: 10pt !important; } + +select, button, input[type="submit"], input[type="reset"] { + font-size: 9pt; +} + +textarea[name="new_text"] { + width: 660px; +} } @media screen and (max-width: 600px) { diff --git a/installer/resources/themes/susimail/light/susimail.css b/installer/resources/themes/susimail/light/susimail.css index 83cfbb87b..ebbc8bf99 100644 --- a/installer/resources/themes/susimail/light/susimail.css +++ b/installer/resources/themes/susimail/light/susimail.css @@ -399,6 +399,10 @@ input { cursor: pointer; } +input[type="radio"], input[type="checkbox"] { + vertical-align: middle; +} + input[type="text"], input[type="password"] { cursor: text; } @@ -1136,6 +1140,14 @@ td p.error { padding: 10px; } +#attachedfile input[type="checkbox"] { + margin: 0 2px 0 0; +} + +#attachedfile { +border-bottom: 1px dotted #7778bf; +} + .attached { text-align: left; background: url(/themes/susimail/images/attach.png) 10px center no-repeat; diff --git a/installer/resources/themes/susimail/midnight/susimail.css b/installer/resources/themes/susimail/midnight/susimail.css index a68024f6b..659f9da8d 100644 --- a/installer/resources/themes/susimail/midnight/susimail.css +++ b/installer/resources/themes/susimail/midnight/susimail.css @@ -4,7 +4,7 @@ body { background-color: #000; - color: #C9CEFF; + color: #c9ceff; font-family: "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; font-size: 9pt; margin: 6px 5px; @@ -34,7 +34,7 @@ hr { } li { - color: #C9CEFF; + color: #c9ceff; line-height: 12pt; font-size: 10pt; margin-left: 5mm; @@ -42,7 +42,7 @@ li { } p { - color: #C9CEFF; + color: #c9ceff; line-height: 12pt; margin-left: 5mm; margin-right: 5mm; @@ -62,7 +62,7 @@ p.text { } p.info, p.error { - color: #C9CEFF; + color: #c9ceff; display: block !important; border: 1px solid #443da0; margin: 20px 20px 0 !important; @@ -169,6 +169,29 @@ table#mailbox { margin-bottom: 0; } +#mailbox th:first-child { + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%, #000000 100%) !important; + font-size: 0; + padding: 0; +} + +#mailbox th:nth-child(2) { + background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%, #000000 100%) !important; + font-size: 0; + padding: 0; + background-blend-mode: luminosity; +} + +#mailbox th:nth-child(3) { + text-align: left; +} + +#mailbox th:nth-child(4) { + background: url(/susimail/icons/attach.png) center right 5px no-repeat, linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%, #000000 100%) !important; + font-size: 0; + padding: 0; +} + table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] { border-top: 1px solid #443da0 !important; padding: 6px 0 2px !important; @@ -229,6 +252,7 @@ input.optbox:hover { input[type="checkbox"], .optbox { min-width: 16px !important; + min-height: 16px !important; filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */ -webkit-filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); } @@ -237,6 +261,16 @@ td#deleteattached { padding-top: 5px !important; } +#attachedfile input[type="checkbox"] { + margin: 0 2px 0 0; + vertical-align: middle; +} + +#attachedfile { + border-bottom: 1px dotted #322e6b; + padding: 5px 5px 5px 8px !important; +} + tr.bottombuttons:last-child td { padding-bottom: 20px !important; } @@ -262,7 +296,7 @@ a:active { } td { - color: #C9CEFF; + color: #c9ceff; margin: 0 5px; font-size: 9pt; padding: 2px; @@ -284,7 +318,7 @@ tr.list0 td, tr.list1 td { } tr.list0:hover td, tr.list1:hover td { - color: #C9CEFF; + color: #c9ceff; } tr.list0:hover, tr.list1:hover, tr.list0:hover a, tr.list1:hover a { @@ -293,7 +327,7 @@ tr.list0:hover, tr.list1:hover, tr.list0:hover a, tr.list1:hover a { } tr.list0:hover td:nth-child(3) a, tr.list1:hover td:nth-child(3) a { - color: #C9CEFF !important; + color: #c9ceff !important; } @@ -393,7 +427,7 @@ pre { } .page { - color: #C9CEFF; + color: #c9ceff; margin: 0; padding: 0; font-size: 9pt !important; @@ -429,7 +463,7 @@ form table { textarea { background: #000; - color: #C9CEFF; + color: #c9ceff; border: 1px solid #443da0; border-radius: 2px; padding: 5px; @@ -504,30 +538,39 @@ input { border: 1px solid #443da0; color: #443da0; margin: 3px; - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; - min-width: 64px !important; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +/* min-width: 64px !important;*/ } input.optbox { min-width: 16px !important; + min-height: 16px !important; +} + +input[type=submit]::-moz-focus-inner, input.cancel::-moz-focus-inner { + border: none; + box-shadow: none; } input[type=submit], input.cancel { color: #443da0; background: #000; + background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; border: 1px solid #3e3f8f; border-bottom-color: #14144f; border-right-color: #14144f; - font: bold 8pt "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif; + font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; text-align: center; - padding: 4px 8px !important; - min-width: 95px !important; + padding: 5px 8px !important; +/* min-width: 95px !important;*/ margin: 4px 5px; + box-shadow: inset 0 0 0 1px #000; } -input[type=submit]:hover, input.cancel:hover { +input[type=submit]:hover, input.cancel:hover, +input[type=submit]:focus, input.cancel:focus { color: #652787; - background: #000; + background: #000 !important; border: 1px solid #652787; box-shadow: inset 0 1px 1px 0 #c9ceff; } @@ -535,8 +578,9 @@ input[type=submit]:hover, input.cancel:hover { input[type=submit]:active, input.cancel:active { border: 1px inset #652787; background: #652787 !important; - color: #C9CEFF !important; - box-shadow: inset 0px 0px 0px 0px #652787; + color: #c9ceff !important; + box-shadow: inset 3px 3px 3px #000 !important; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important; } input[type=text], input[type=password], textarea { @@ -549,7 +593,7 @@ input[type=text], input[type=password], textarea { #dologin input:disabled, #dologin input:disabled:hover, #dologin input:disabled:active { border: none; - color: #652787; + color: #9b9ebf; margin: 0; padding-top: 3px; box-shadow: none; @@ -565,7 +609,7 @@ input[name="user"], input[name="pass"] { input[name="user"]:focus, input[name="pass"]:focus, input[type="text"]:focus, textarea:focus { border: 1px solid #443da0; - color: #C9CEFF; + color: #c9ceff; } input[name="host"], input[name="pop3"], input[name="smtp"] { @@ -621,6 +665,7 @@ div#dologin { background: #020020 url("/themes/console/images/email.png") 8px center no-repeat; background: url("images/mail.png") 8px center no-repeat, linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%, #000000 100%) !important; text-shadow: 0 1px 1px #000; + box-shadow: inset 0 0 0 1px #000; } #dologin table { @@ -757,10 +802,6 @@ table#pagenav { background: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important; } -table#pagenav tr:hover td { - color: #C9CEFF; -} - table#pagenav td { white-space: nowrap; font-size: 10pt; @@ -769,7 +810,7 @@ table#pagenav td { word-spacing: 0.1em; padding: 3px 5px; text-align: center; - color: #7670c2; + color: #c9ceff; } table#pagenav td:first-child { @@ -902,6 +943,295 @@ div#bottombuttons { /* config page button positioning */ padding: 10px 10px 20px; } + +/* illustrated buttons inc */ + +input[type="submit"][class], input[type="cancel"][class], +input[type="submit"][class]:hover, input[type="cancel"][class]:hover, +input[type="submit"][class]:focus, input[type="cancel"][class]:focus { + background-size: 14px 14px, 100% 100% !important; +} + +input.cancel { + background: #000 url(/themes/console/images/buttons/no.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.cancel:hover, input.cancel:focus { + background: #000 url(/themes/console/images/buttons/no.png) no-repeat 6px center !important; +} + +input.clearselection { + background: #000 url(/themes/susimail/images/none.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.clearselection:hover, input.clearselection:focus { + background: #000 url(/themes/susimail/images/none.png) no-repeat 6px center !important; +} + +input.delete, input.delete_attachment, input.really_delete { + background: #000 url(/themes/console/images/buttons/delete.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.delete:hover, input.delete_attachment:hover, input.really_delete:hover, +input.delete:focus, input.delete_attachment:focus, input.really_delete:focus { + background: #000 url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center !important; +} + +input.download { + background: #000 url(/themes/console/images/buttons/download.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.download:hover, input.download:focus { + background: #000 url(/themes/console/images/buttons/download.png) no-repeat 6px center !important; +} + +input.offline { + background: #000 url(/themes/susimail/images/offline.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/offline.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.offline:hover, input.offline:focus { + background: #000 url(/themes/susimail/images/offline_hover.png) no-repeat 6px center !important; +} + +input.list { + background: #000 url(/themes/susimail/images/folder.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/folder.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.list:hover, input.list:focus { + background: #000 url(/themes/susimail/images/folder-open.png) no-repeat 6px center !important; +} + +input.forward { + background: #000 url(/themes/susimail/images/forward.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.forward:hover, input.forward:focus { + background: #000 url(/themes/susimail/images/forward.png) no-repeat 6px center !important; +} + +input.login { + background: #000 url(/themes/susimail/images/login.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/login.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.login:hover, input.login:focus { + background: #000 url(/themes/susimail/images/login_hover.png) no-repeat 6px center !important; +} + +input.logout { + background: #000 url(/themes/susimail/images/logout.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/logout.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.logout:hover, input.logout:focus { + background: #000 url(/themes/susimail/images/logout_hover.png) no-repeat 6px center !important; +} + +input.reload, input.refresh { + background: #000 url(/themes/console/images/buttons/update.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.reload:hover, input.refresh:hover, +input.reload:focus, input.refresh:focus { + background: #000 url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center !important; +} + +input.invertselection { + background: #000 url(/themes/susimail/images/selection.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.invertselection:hover, input.invertselection:focus { + background: #000 url(/themes/susimail/images/selection.png) no-repeat 6px center !important; +} + +input.show { + background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.show:hover, input.show:focus { + background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important; +} + +input.markall { + background: #000 url(/themes/susimail/images/all.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.markall:hover, input.markall:focus { + background: #000 url(/themes/susimail/images/all.png) no-repeat 6px center !important; +} + +input.new { + background: #000 url(/themes/susimail/images/compose.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/compose.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.new:hover, input.new:focus { + background: #000 url(/themes/susimail/images/compose_hover.png) no-repeat 6px center !important; +} + +input.reply { + background: #000 url(/themes/susimail/images/reply.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.reply:hover, input.reply:focus { + background: #000 url(/themes/susimail/images/reply.png) no-repeat 6px center !important; +} + +input.replyall { + background: #000 url(/themes/susimail/images/reply-all.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.replyall:hover, input.replyall:focus { + background: #000 url(/themes/susimail/images/reply-all.png) no-repeat 6px center !important; +} + +input.setpagesize, input.save { + background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.setpagesize:hover, input.save:hover, +input.setpagesize:focus, input.save:focus { + background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important; +} + +input.send { + background: #000 url(/themes/susimail/images/send.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/send.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.send:hover, input.send:focus { + background: #000 url(/themes/susimail/images/send_hover.png) no-repeat 6px center !important; +} + +input.configure { + background: #000 url(/themes/console/images/buttons/configure.png) no-repeat 6px center !important; + background: url(/themes/console/images/buttons/configure.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.configure:hover, input.configure:focus { + background: #000 url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center !important; +} + +input.saveas { + background: #000 url(/themes/susimail/images/save.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/save.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +input.saveas:hover, input.saveas:focus { + background: #000 url(/themes/susimail/images/save_hover.png) no-repeat 6px center !important; +} + +input.new_upload { + background: #000 url(/themes/susimail/images/attach.png) no-repeat 6px center !important; + background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 5px 5px 22px !important; +} + +/* pagenav */ + +input.firstpage, input[name="firstpage"], +input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover { + background: #000 url(/themes/susimail/images/first.png) no-repeat center center; + background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 10px !important; + text-indent: -99999px; + background-size +} + +input.firstpage:hover, input[name="firstpage"]:hover, +input.firstpage:focus, input[name="firstpage"]:focus { + background: #000 url(/themes/susimail/images/first.png) no-repeat center center; +} + +input.lastpage, input[name="lastpage"], +input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover, +input.lastpage[disabled]:focus, input[name="lastpage"][disabled]:focus { + background: #000 url(/themes/susimail/images/last.png) no-repeat center center; + background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 10px !important; + text-indent: -99999px; +} + +input.lastpage:hover, input[name="lastpage"]:hover, +input.lastpage:focus, input[name="lastpage"]:focus { + background: #000 url(/themes/susimail/images/last.png) no-repeat center center; +} + +input.prevpage, input.prev, input[name="prev"], input[name="prevpage"], +input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover, +input.prevpage[disabled]:focus, input.prev[disabled]:focus, input[name="prev"][disabled]:focus, input[name="prevpage"][disabled]:focus { + background: #000 url(/themes/susimail/images/previous.png) no-repeat center center; + background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 10px !important; + text-indent: -99999px; +} + +input.prevpage:hover, input.prev, input[name="prev"]:hover, input[name="prevpage"]:hover, +input.prevpage:focus, input.prev, input[name="prev"]:focus, input[name="prevpage"]:focus { + background: #000 url(/themes/susimail/images/previous.png) no-repeat center center; +} + +input.nextpage, input.next, input[name="nextpage"], input[name="next"], +input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover, +input.nextpage[disabled]:focus, input.next[disabled]:focus, input[name="nextpage"][disabled]:focus, input[name="next"][disabled]:focus { + background: #000 url(/themes/susimail/images/next.png) no-repeat center center; + background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; + padding: 5px 10px !important; + text-indent: -99999px; +} + +input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover, +input.nextpage:focus, input.next:focus, input[name="nextpage"]:focus { + background: #000 url(/themes/susimail/images/next.png) no-repeat center center; +} + +/* end pagenav */ + +/* end illustrated buttons */ + +input[type=submit]:active, input.cancel:active { + border: 1px solid #652787; + background-color: #652787 !important; + background-blend-mode: luminosity; + color: #c9ceff !important; + box-shadow: inset 3px 3px 3px #000 !important; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important; +} + /* responsive layout */ @media screen and (min-width: 1024px) { @@ -909,22 +1239,19 @@ body, td, textarea, div, p.mailbody { font-size: 10pt !important; } -input { - font-size: 9pt !important; -} - -#pagenav input { - font-size: 0 !important; -} - .topbuttons input[type="submit"], .topbuttons input[type="reset"] { margin: 3px 5px !important; } } @media screen and (min-width: 1500px) { + input { - font-size: 10pt !important; + font-size: 9pt !important; +} + +#pagenav input { + font-size: 0 !important; } }