I love the OpenWRT Theme layout, but wasn't a huge fan of the color scheme... so I edited cascades.css and gave it a more modern look. If anyone cares to try it, let me know what you think
cascades.css [/www/luci-static/openwrt.org]
**permissions for cascades.css must be set back to 644 after editing**
@charset "utf-8";
.lang_he {
direction: RTL;
unicode-bidi: embed;
}
@media all {
html {
min-height: 100%;
height: auto;
position:relative;
}
body {
color: #aad200;
background-color: #282828;
background-position: bottom center;
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: 11pt;
line-height: 100%;
padding-bottom: 1.5em;
}
* {
margin: 0;
padding: 0;
}
a img {
border: none;
text-decoration: none;
}
ul.tabmenu {
margin: 0;
clear: both;
display: block;
vertical-align: bottom;
font-size: 10pt;
padding: 5px 0 0 5px;
}
div.tabmenu2 {
background-color: #3C3C3C;
# background-image: url(tabbg.png);
background-repeat: repeat-x;
margin-top: -1px;
border: 1px solid #464646;
border-bottom: none;
}
div.tabmenu3,
div.tabmenu4,
div.tabmenu5 {
background-color: #323232;
# background-image: url(tabbg.png);
background-repeat: repeat-x;
border: none;
}
ul.tabmenu li {
float: left;
display: block;
overflow: hidden;
}
.lang_he ul.tabmenu li {
float: right;
}
ul.tabmenu li a {
text-decoration: none;
color: #969696;
background: #323232;
display: block;
padding: 3px 8px;
margin: 0 2px;
line-height: 1.3em;
border: 1px solid transparent;
border-bottom: none;
font-size: 85%;
}
ul.tabmenu li.active a {
font-weight: bold;
color: #aad200;
background: #;789600;
border: 1px solid #789600;
border-bottom: none;
}
ul.tabmenu li a:hover {
color: #969696;
border-color: #969696;
}
ul.l1 li a {
background-color: #4b4b4b;
# background-image: url(tabbg.png);
background-repeat: repeat-x;
border-color: #3C3C3C;
}
ul.l1 li.tabmenu-item-logout a {
margin-left: 30px;
}
.lang_he ul.l1 li.tabmenu-item-logout a {
margin-right: 30px;
}
abbr,
acronym {
font-style: normal;
font-variant: normal;
}
abbr[title],
acronym[title] {
border-bottom: 1px dotted;
cursor: help;
}
a:link abbr[title],
a:visited abbr[title],
a:link acronym[title],
a:visited acronym[title] {
cursor: pointer;
}
code {
font-family: monospace;
white-space: pre;
}
#maincontent ul {
margin-left: 2em;
}
.warning {
color: red;
background-color: white;
font-weight: bold;
}
.clear {
clear: both;
}
.skiplink,
.navigation,
.hidden {
position: absolute;
left: -1000px;
top: -1000px;
width: 0px;
height: 0px;
overflow: hidden;
display: inline;
}
.error {
color: #ff0000;
background-color: white;
}
div.hostinfo {
float: left;
margin: 0;
padding: 0;
width: auto;
font-size: 80%;
padding: 0.5em;
color: #00A3FF;
}
.lang_he div.hostinfo {
float: right;
}
#xhr_poll_status {
cursor: pointer;
color: #ff7d00;
}
#xhr_poll_status #xhr_poll_status_off {
font-weight: bold;
color: #FF0000;
}
#xhr_poll_status #xhr_poll_status_on {
font-weight: bold;
color: #aad200;
}
#menubar {
position: relative;
width: 100%;
background: #191919;
color: #969696;
}
#menubar .warning {
color: ff0000;
background-color: #323232;
}
html #menubar a:link,
html #menubar a:visited {
position: relative;
display: block;
padding: 0.5em;
background: #323232;
color: #aad200;
border-color: #969696;
text-decoration: none;
font-size: 80%;
font-weight: normal;
}
html #menubar a:link:hover,
html #menubar a:visited:hover,
html #menubar a:link:active,
html #menubar a:visited:active,
#menubar a:link:focus,
#menubar a:visited:focus {
background: #323232;
color: #ffff00;
font-weight: bold;
}
html #menubar a:link.active,
html #menubar a:visited.active,
html #menubar a:link.preactive,
html #menubar a:visited.preactive {
background: #323232;
color: #ffff00;
font-weight: bold;
}
html #menubar a:link.warning,
html #menubar a:visited.warning {
background: #323232;
color: #ff0000;
font-weight: bold;
}
#modemenu {
width: auto;
background: #323232;
color: #ffffff;
list-style: none;
margin-right: 1px;
margin-left: 2em;
float: right;
}
#modemenu li {
float: right;
list-style: none;
}
#savemenu {
float: right;
}
.lang_he #savemenu {
float: left;
}
.lang_de #submenu_admin_uci {
width: 12em;
}
.lang_ru #submenu_admin_uci {
width: 11.5em;
}
textarea#syslog {
width: 98%;
min-height: 500px;
border: 2px solid #aad200;
color: #aad200;
background: #282828;
padding: 5px;
font-family: monospace;
}
#maincontainer {
clear: both;
width: 96%;
margin: 0 auto;
height:100%;
}
#maincontent {
padding: 0.5em;
background: #505050;
color: #C86400;
font-size: 80%;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #aad200;
}
.lang_he #maincontent {
direction: rtl;
}
#maincontent h2 {
font-size: 150%;
font-family: Trebuchet MS, Verdana, sans-serif;
font-weight: bold;
margin: 0.25em 0 0.7em 0;
border-bottom: 1px solid;
padding-top: 10px;
padding-bottom: 4px;
color: #ff7d00
}
#maincontent h3 {
margin: 0.5em 0 1.1em 0;
font-size: 125%;
font-weight: bold;
font-style: italic;
font-family: Trebuchet MS, Verdana, sans-serif;
color: #ff7d00;
}
#maincontent p {
margin-bottom: 1em;
}
.cbi-section {
margin-bottom: 0.5em;
padding: 0.5em 1em;
border: 1px dotted #aad200;
background-color: #323232;
color: #00A3FF;
}
.cbi-section legend {
font-size: 110%;
font-weight: bold;
height: 1em;
padding: 0 0.25em;
background-color: transparent;
color: #aad200;
}
.cbi-section h2 {
margin: 0em 0 0.5em -0.5em !important;
}
.cbi-section h3 {
text-decoration: none !important;
font-weight: bold !important;
color: #96B900 !important;
margin: 0.25em !important;
font-size: 100% !important;
}
.cbi-section-descr {
margin-bottom: 0.5em;
font-size: 95%;
color: #00a3ff;
}
.cbi-title-ref {
color: inherit;
text-decoration: none;
padding-right: 18px;
background: url('../resources/cbi/link.gif') no-repeat scroll right center;
background-color: transparent;
}
ul.cbi-apply {
font-size: 90%;
}
input:-webkit-input-placeholder {
color: #aad200;
}
input:-moz-placeholder {
color: #969696;
}
input:-ms-input-placeholder {
color: #969696;
}
input[type=submit],
input[type=reset],
input[type=image],
input[type=button] {
cursor: pointer;
}
select,
input,
textarea {
background: #505050;
color: #aad200;
border-width: 1px;
border-color: #969696;
}
input[type=image] {
border: none;
}
input:focus,
input:hover,
select:focus,
select:hover {
background-color: #505050;
color: #C8FF00;
}
select,
input[type=text],
input[type=password] {
width: 20em;
}
td select,
td input[type=text],
td input[type=password] {
width: 99%;
}
img.cbi-image-button {
cursor: pointer;
margin: 0 2px;
vertical-align: middle;
}
input.cbi-button {
background-color: #646464;
background-repeat: no-repeat;
background-position: 1px center;
border: 1px solid #646464;
border-radius: 3px;
}
input.cbi-button:hover {
border-color: #aad200;
background-color: #aad200;
}
input.cbi-button[disabled] {
color: #cccccc;
border-color: #CCCCCC;
background-color: #646464;
cursor: default;
}
input.cbi-input-user {
background-image: url('../resources/cbi/user.gif');
background-repeat: no-repeat;
background-position: 1px center;
color: #00A3FF;
text-indent: 22px;
}
input.cbi-input-password {
background-image: url('../resources/cbi/key.gif');
background-repeat: no-repeat;
background-position: 1px center;
color: #00A3FF;
text-indent: 22px;
}
input.cbi-input-find,
input.cbi-button-find {
background-image: url('../resources/cbi/find.gif');
color: #000000;
padding-left: 22px;
}
input.cbi-input-reload {
background-image: url('../resources/cbi/reload.gif');
color: #000000;
padding-left: 22px;
}
input.cbi-input-add,
input.cbi-button-add {
background-image: url('../resources/cbi/add.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-fieldadd,
input.cbi-button-fieldadd {
background-image: url(../resources/cbi/fieldadd.gif);
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-reset,
input.cbi-button-reset {
background-image: url('../resources/cbi/reset.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-save,
input.cbi-button-save {
background-image: url('../resources/cbi/save.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-apply,
input.cbi-button-apply {
background-image: url('../resources/cbi/apply.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-link,
input.cbi-button-link {
background-image: url('../resources/cbi/link.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-download,
input.cbi-button-download {
background-image: url('../resources/cbi/download.gif');
color: #000000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-input-remove,
div.cbi-section-remove input {
background-image: url('../resources/cbi/remove.gif');
color: #ff0000;
padding-left: 22px;
padding-right: 1px;
}
input.cbi-button-up {
background-image: url('../resources/cbi/up.gif');
padding-left: 11px;
padding-right: 1px;
}
input.cbi-button-down {
background-image: url('../resources/cbi/down.gif');
padding-left: 11px;
padding-right: 1px;
}
input.cbi-button-edit {
background-image: url('../resources/cbi/edit.gif');
color: #ffffff;
background: #00A3FF;
border-color: #00A3FF;
padding-left: 10px;
padding-right: 10px;
}
input.cbi-button-edit:hover {
background: #323232;
color: #00A3FF;
border-color: #00A3FF;
}
input.cbi-button-reload {
background-image: url('../resources/cbi/reload.gif');
color: #ffffff;
background: #aad200;
border-color: #aad200;
padding-left: 10px;
padding-right: 10px;
}
input.cbi-button-reload:hover {
background: #323232;
color: #aad200;
border-color: #aad200;
}
input.cbi-button-reset {
background-image: url('../resources/cbi/reset.gif');
color: #ffffff;
background: #FF7D00;
border-color: #FF7D00;
padding-left: 10px;
padding-right: 10px;
}
input.cbi-button-reset:hover {
background: #323232;
color: #FF7D00;
border-color: #FF7D00;
}
input.cbi-button-remove {
background-image: url('../resources/cbi/remove.gif');
color: #ffffff;
background: #960000;
border-color: #960000;
padding-left: 10px;
padding-right: 10px;
}
input.cbi-button-remove:hover {
background: #323232;
color: #c80000;
border-color: #c80000;
}
.cbi-input-invalid {
background-image: url('../resources/cbi/reset.gif');
background-repeat: no-repeat;
background-position: right;
color: #ff0000 !important;
border-color: #ff0000;
}
div.cbi-section-remove input {
border-bottom: none;
color: #00A3FF;
}
textarea {
margin-left: -1px;
margin-bottom: 0.5em;
background: #464646;
color: #aad200;
}
form > div > input[type=submit] {
float: right;
margin-left: 0.5em;
color: #aad200;
background: #323232;
padding-left: 10px;
padding-right: 10px;
}
form > div > input[type=submit]:hover {
background: #aad200;
color: #ffffff;
border-color: #aad200;
}
form > div > input[type=reset] {
float: right;
margin-left: 0.5em;
color: #ff7d00;
background: #323232;
border-color: #ff7d00;
padding-left: 10px;
padding-right: 10px;
}
form > div > input[type=reset]:hover {
background: #ff7d00;
color: #ffffff;
border-color: #ff7d00;
}
table td,
table th {
color: #00A3FF;
# background: #323232;
}
table.smalltext {
background: #aad200;
color: #505050;
border-top: 1px solid #aad200;
border-right: 1px solid #aad200;
border-bottom: 1px solid #aad200;
font-size: 90%;
width: 80%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
table.smalltext tr:hover td {
background-color: #646464;
color: #aad200;
}
table.smalltext tr th {
padding: 0 0.25em;
border-left: 1px solid #aad200;
text-align: left;
}
table.smalltext tr td {
padding: 0 0.25em;
border-top: 1px solid #aad200;
border-left: 1px solid #aad200;
}
table.cbi-section-table .cbi-rowstyle-1 {
background-color: #464646;
color: #aad200;
}
table.cbi-section-table .cbi-rowstyle-1:hover,
table.cbi-section-table .cbi-rowstyle-2:hover {
background-color: #5a5a5a;
color: #aad200;
}
table.cbi-section-table .cbi-section-table-cell {
padding: 3px;
white-space: nowrap;
}
.cbi-section .cbi-rowstyle-1 h3 {
background-color: #464646;
color: #aad200;
}
.cbi-rowstyle-2 {
color: #ff0000;
}
div.cbi-value {
clear: left;
vertical-align: middle;
padding: 0.25em 0.6em;
border-bottom: 1px dotted #aad200;
}
div.cbi-value:hover {
background: #aad200;
color: #323232;
}
.cbi-value-title {
float: left;
width: 40%;
line-height: 1.8em;
color: #00A3FF;
font-style: italic;
}
div.cbi-value-field {
width: 58%;
margin-left: 40%;
padding: 0.25em 0;
}
div.cbi-value-description {
font-size: 90%;
display: inline;
}
div.cbi-section-create {
clear: left;
white-space: nowrap;
vertical-align: top;
}
div.cbi-section-create .cbi-button {
margin: 0.25em;
}
input.cbi-section-create-name {
margin-right: -0.25em;
}
div.cbi-map-descr {
margin-bottom: 1em;
}
div.cbi-optionals {
padding: 0.25em;
border-bottom: 1px dotted #aad200;
}
div.cbi-section-remove {
float: right;
}
.cbi-section-node {
clear: both;
border: 1px solid #aad200;
border-radius: 3px;
padding-bottom: 0;
position: relative;
}
.cbi-section-node-tabbed {
border-top-left-radius: 0;
}
.cbi-section-node .cbi-value-last {
border-bottom: none;
}
.cbi-section-node table div {
padding-bottom: 0;
border-bottom: none;
}
.cbi-section-node div.cbi-section-table-row {
margin: 0.25em;
}
table.cbi-section-table {
width: 100%;
font-size: 95%;
background: #323232;
}
table.cbi-section-table th,
table.cbi-section-table td {
text-align: center;
border-color: #aad200;
}
tr.cbi-section-table-descr th {
font-weight: normal;
font-size: 90%;
vertical-align: top;
background: #282828;
color: #aad200;
}
td.cbi-section-table-optionals {
text-align: left !important;
padding-top: 1em;
}
.cbi-value-helpicon img {
vertical-align: bottom;
}
div.cbi-error {
font-size: 95%;
font-weight: bold;
color: #ff0000;
background-color: #323232;
}
td.cbi-value-error {
border-color: #ff0000;
}
.cbi-value-error input,
.cbi-value-error select {
color: red;
background-color: #ffcccc;
}
.cbi-section-error {
color: #ff0000;
background-color: #282828;
font-size: 95%;
border: 1px dotted #ff0000;
margin: 3px;
padding: 3px;
}
.cbi-value-field var {
color: #aad200;
}
ul.cbi-tabmenu {
padding: 3px 0;
margin-left: 0 !important;
list-style-type: none;
position: relative;
z-index: 10;
# top: 4px;
line-height: 18px;
background: #7d7d7d;
border-color: #aad200;
}
ul.cbi-tabmenu li.cbi-tab,
ul.cbi-tabmenu li.cbi-tab-disabled {
display: inline;
margin: 0;
}
ul.cbi-tabmenu li.cbi-tab a,
ul.cbi-tabmenu li.cbi-tab-disabled a {
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #aad200;
border-bottom: none;
border-radius: 3px 3px 0 0;
background-color: #505050;
color: #aad200;
}
ul.cbi-tabmenu li.cbi-tab-highlighted a {
color: #ffffff;
background-color: #aad200;
}
ul.cbi-tabmenu li a:hover {
color: #ff7d00;
}
ul.cbi-tabmenu li.cbi-tab a {
padding-top: 4px;
color: #ffffff;
font-weight: bold;
background-color: #aad200;
}
div.cbi-tab-descr {
background-image: url(/luci-static/resources/cbi/help.gif);
background-position: 0.25em 50%;
background-repeat: no-repeat;
border-bottom: 1px solid #aad200;
margin: 0.25em 0.25em 2em;
padding: 0.5em 0.5em 0.5em 2em;
}
.left {
text-align: left !important;
}
.right {
text-align: right !important;
}
.luci {
position: absolute;
bottom: 0;
left: 1em;
height: 1.5em;
font-size: 80%;
color: #aad200;
}
.luci a:link,
.luci a:visited {
background-color: transparent;
color: #969696;
text-decoration: none;
font-size: 70%;
}
.inline {
display: inline;
}
.error500 {
white-space: normal;
border: 1px dotted #ff0000;
background-color: #414141;
color: #ff0000;
padding: 0.5em;
}
.errorbox {
border: 1px solid #FF0000;
background-color: #FFcccc;
padding: 5px;
margin-bottom: 5px;
}
.errorbox a {
color: #ff0000 !important;
}
.ifacebox {
background-color: #414141;
border: 1px solid #505050;
margin: 0 10px;
text-align: center;
white-space: nowrap;
color: #00A3FF;
}
.ifacebox .ifacebox-head {
border-bottom: 1px solid #aad200;
padding: 2px;
color: #505050;
}
.ifacebox .ifacebox-body {
padding: 2px;
}
.ifacebadge {
background-color: #ffffff;
border: 1px solid #96B900;
color: #96B900;
padding: 2px;
margin-left: 2px;
display: inline-block;
}
.ifacebadge-active {
border-color: #aad200;
font-weight: bold;
}
.zonebadge {
padding: 2px;
display: inline-block;
white-space: wrap;
cursor: pointer;
}
.zonebadge em,
.zonebadge strong {
margin: 3px;
display: inline-block;
}
.zonebadge input {
width: 6em;
height: 1.5em;
}
.zonebadge-empty {
border: 1px dashed #aad200;
color: #AAAAAA;
font-style: italic;
font-size: smaller;
}
.uci-change-list {
font-family: monospace;
}
.uci-change-list ins,
.uci-change-legend-label ins {
text-decoration: none;
border: 1px solid #96B900;
background-color: #ff0000;
display: block;
padding: 2px;
}
.uci-change-list del,
.uci-change-legend-label del {
text-decoration: none;
border: 1px solid #FF0000;
background-color: #FF0000;
display: block;
font-style: normal;
padding: 2px;
}
.uci-change-list var,
.uci-change-legend-label var {
text-decoration: none;
border: 1px solid #CCCCCC;
background-color: #505050;
display: block;
font-style: normal;
padding: 2px;
}
.uci-change-list var ins,
.uci-change-list var del {
/*display: inline;*/
border: none;
white-space: pre;
font-style: normal;
padding: 0px;
}
.uci-change-legend {
padding: 5px;
}
.uci-change-legend-label {
width: 150px;
float: left;
font-size: 80%;
}
.uci-change-legend-label>ins,
.uci-change-legend-label>del,
.uci-change-legend-label>var {
float: left;
margin-right: 4px;
width: 10px;
height: 10px;
display: block;
}
.uci-change-legend-label var ins,
.uci-change-legend-label var del {
line-height: 6px;
border: none;
}
}
I have a few last tweaks to make (such as the usage bars on the status page, changing the color of hyperlinks, and reverting the highlight color back to gray), but all in all, it's about 95% complete. If anyone notices bright red where it shouldn't be, please let me know, as I use bright red (#ff0000] to determine what code applies to what sections.
The only thing I noticed was the processes tab's background, if viewed other than in fullscreen/maximized, isn't scrolling to keep the command buttons within the appropriate boxes. At first I thought this was due to code I added, however, even after reverting back to the default cascades.css, this issue was still apparent.
**I'm not sure if there are rules regarding changing packages and coding someone else wrote, however I asked yesterday and never recieved an answer, so if this is an issue, please let me know**
(Last edited by JW0914 on 8 Jun 2015, 16:56)