12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019 |
- /* ATTENTION: This file is not compiled when building gluon.
- The compiled version is at ../files/www/luci-static/gluon/cascade.css
- Use sass like this to update it:
- sass cascade.scss ../files/www/luci-static/gluon/cascade.css
- When commiting changes to this file make sure to commit the respective
- changes to the compilid version within the same commit!
- */
- @charset "utf-8";
- $ffyellow: #ffb400;
- $ffmagenta: #dc0067;
- $ffzusatz: #009ee0;
- $red: #ee3300;
- @mixin button {
- &::-moz-focus-inner {
- padding: 0;
- border: 0;
- }
- display: inline-block;
- zoom: 1;
- line-height: normal;
- white-space: nowrap;
- vertical-align: baseline;
- text-align: center;
- cursor: pointer;
- -webkit-user-drag: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 100%;
- padding: 0.5em 1em;
- color: rgba(0, 0, 0, 0.80);
- border: none rgba(0, 0, 0, 0);
- background-color: #E6E6E6;
- text-decoration: none;
- border-radius: 2px;
- /* Transitions */
- -webkit-transition: 0.1s linear -webkit-box-shadow;
- -moz-transition: 0.1s linear -moz-box-shadow;
- -ms-transition: 0.1s linear box-shadow;
- -o-transition: 0.1s linear box-shadow;
- transition: 0.1s linear box-shadow;
- &:active {
- box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
- }
- &:focus {
- outline: 0;
- }
- &:hover, &:focus {
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
- background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
- background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
- background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
- background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
- }
- &[disabled] {
- border: none;
- background-image: none;
- opacity: 0.40;
- cursor: not-allowed;
- box-shadow: none;
- }
- }
- @mixin button-primary {
- background-color: $ffzusatz;
- color: #fff;
- }
- .lang_he {
- direction: RTL;
- unicode-bidi: embed;
- }
- .hidden {
- display: none;
- }
- html {
- min-height: 100%;
- height: auto;
- position:relative;
- }
- body, input, select, option {
- font-family: 'Open Sans', Arial, sans-serif;
- font-size: 12pt;
- }
- body {
- color: rgb(77, 78, 83);
- line-height: 1.5em;
- margin: 0;
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- background-color: #f3f3f3;
- }
- a img {
- border: none;
- text-decoration: none;
- }
- .tabmenu1 {
- text-align: center;
- }
- ul.tabmenu {
- list-style: none;
- padding: 0;
- margin: 2em 0;
- display: inline-flex;
- }
- ul.tabmenu li {
- white-space: nowrap;
- margin: 0 0.5em;
- padding: 0;
- text-align: center;
- a {
- display: block;
- text-decoration: none;
- padding: 1em;
- margin: 0;
- color: #333;
- border-radius: 2em;
- &:hover {
- background: lighten($ffyellow, 35);
- }
- }
- &.active a {
- font-weight: bold;
- background: white;
- color: #333;
- }
- }
- 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;
- }
- .error {
- color: #ff0000;
- background-color: white;
- }
- div.hostinfo {
- margin: 0;
- padding: 0;
- font-size: 80%;
- padding: 0.5em;
- flex: 1;
- font-weight: bold;
- }
- #xhr_poll_status {
- cursor: pointer;
- }
- #xhr_poll_status #xhr_poll_status_off {
- font-weight: bold;
- color: #FF0000;
- }
- #xhr_poll_status #xhr_poll_status_on {
- font-weight: bold;
- color: #00FF00;
- }
- #menubar {
- display: flex;
- background: $ffmagenta;
- color: #ffffff;
- }
- #menubar .warning {
- color: red;
- background-color: #557788;
- }
- #menubar a:link,
- #menubar a:visited {
- position: relative;
- display: block;
- padding: 0.5em;
- text-decoration: none;
- font-size: 80%;
- font-weight: normal;
- color: white;
- }
- #menubar a:link:hover,
- #menubar a:visited:hover,
- #menubar a:link:focus,
- #menubar a:visited:focus {
- background: $ffyellow;
- color: black;
- }
- #menubar a:link.active,
- #menubar a:visited.active {
- background: $ffyellow;
- color: black;
- font-weight: bold;
- }
- #menubar a:link.warning,
- #menubar a:visited.warning {
- background: #000000;
- color: red;
- font-weight: bold;
- }
- #modemenu {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- #modemenu li {
- display: inline-block;
- }
- #savemenu {
- }
- .lang_he #savemenu {
- }
- .lang_de #submenu_admin_uci {
- width: 12em;
- }
- .lang_ru #submenu_admin_uci {
- width: 11.5em;
- }
- textarea#syslog {
- width: 98%;
- min-height: 500px;
- border: 3px solid #cccccc;
- padding: 5px;
- font-family: monospace;
- }
- #maincontent {
- padding: 0 1em 2em;
- max-width: 60em;
- min-width: 40em;
- margin: 1em auto;
- }
- .lang_he #maincontent {
- direction: rtl;
- }
- #maincontent h2 {
- }
- #maincontent h3 {
- }
- #maincontent p {
- margin-bottom: 1em;
- }
- .cbi-section {
- margin: 0;
- padding: 0;
- border: none;
- }
- .cbi-section legend {
- font-size: 1.4em;
- font-weight: bold;
- color: $ffmagenta;
- position: relative;
- padding: 0;
- margin-bottom: 0.5em;
- }
- .cbi-section h2 {
- margin: 0em 0 0.5em -0.5em !important;
- }
- .cbi-section h3 {
- text-decoration: none !important;
- font-weight: bold !important;
- color: #555555 !important;
- margin: 0.25em !important;
- font-size: 100% !important;
- }
- .cbi-section-descr {
- margin-bottom: 2em;
- }
- .cbi-title-ref {
- color: inherit;
- text-decoration: none;
- padding-right: 18px;
- background: url('../resources/cbi/link.gif') no-repeat scroll right center;
- background-color: inherit;
- }
- ul.cbi-apply {
- font-size: 90%;
- }
- input:-webkit-input-placeholder {
- color: #AAAAAA;
- }
- input:-moz-placeholder {
- color: #AAAAAA;
- }
- input:-ms-input-placeholder {
- color: #AAAAAA;
- }
- input[type=checkbox] {
- display: none;
- & + label {
- display: inline-block;
- width: 1em;
- height: 1em;
- margin: 0;
- }
- &:checked + label:after {
- content: '✔';
- color: $ffmagenta;
- vertical-align: middle;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -0.5em;
- width: 100%;
- text-align: center;
- font-size: 1.7em;
- }
- }
- input[type=submit],
- input[type=reset],
- input[type=image],
- input[type=button] {
- cursor: pointer;
- }
- select,
- input,
- textarea,
- input[type=checkbox] + label {
- color: darken($ffzusatz, 30);
- border: none;
- background: lighten($ffyellow, 30);
- border-radius: 3pt;
- padding: 0.5em;
- }
- input[type=image] {
- border: none;
- }
- 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 {
- @include button;
- background-repeat: no-repeat;
- }
- input.cbi-input-user {
- background-image: url('../resources/cbi/user.gif');
- background-repeat: no-repeat;
- background-position: 1px center;
- color: #000000;
- text-indent: 17px;
- }
- input.cbi-input-find,
- input.cbi-button-find {
- background-image: url('../resources/cbi/find.gif');
- color: #000000;
- padding-left: 17px;
- }
- input.cbi-input-reload {
- background-image: url('../resources/cbi/reload.gif');
- color: #000000;
- padding-left: 17px;
- }
- input.cbi-input-add,
- input.cbi-button-add {
- background-image: url('../resources/cbi/add.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-input-fieldadd,
- input.cbi-button-fieldadd {
- background-image: url(../resources/cbi/fieldadd.gif);
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-input-reset,
- input.cbi-button-reset {
- background-color: $red;
- color: #fff;
- }
- input.cbi-input-save,
- input.cbi-button-save {
- @include button-primary;
- }
- input.cbi-input-apply,
- input.cbi-button-apply {
- @include button-primary;
- }
- input.cbi-input-link,
- input.cbi-button-link {
- background-image: url('../resources/cbi/link.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-input-download,
- input.cbi-button-download {
- background-image: url('../resources/cbi/download.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-input-remove,
- div.cbi-section-remove input {
- background-image: url('../resources/cbi/remove.gif');
- color: #000000;
- padding-left: 17px;
- 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: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-button-reload {
- background-image: url('../resources/cbi/reload.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- input.cbi-button-remove {
- background-image: url('../resources/cbi/remove.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
- }
- .cbi-input-invalid {
- background: $red !important;
- color: white;
- }
- div.cbi-section-remove input {
- border-bottom: none;
- }
- textarea {
- margin-left: -1px;
- margin-bottom: 0.5em;
- }
- form > div > input[type=submit],
- form > div > input[type=reset] {
- margin-left: 0.5em;
- }
- table td,
- table th {
- color: #000000;
- }
- table.smalltext {
- background: #f5f5f5;
- color: #000000;
- border-top: 1px solid #666666;
- border-right: 1px solid #666666;
- border-bottom: 1px solid #666666;
- font-size: 90%;
- width: 80%;
- margin-left: auto;
- margin-right: auto;
- border-collapse: collapse;
- }
- table.smalltext tr:hover td {
- background-color: #bbddee;
- color: #000000;
- }
- table.smalltext tr th {
- padding: 0 0.25em;
- border-left: 1px solid #666666;
- text-align: left;
- }
- table.smalltext tr td {
- padding: 0 0.25em;
- border-top: 1px solid #666666;
- border-left: 1px solid #666666;
- }
- table.cbi-section-table .cbi-rowstyle-1 {
- background-color: #eeeeff;
- color: #000000;
- }
- table.cbi-section-table .cbi-rowstyle-1:hover,
- table.cbi-section-table .cbi-rowstyle-2:hover {
- background-color: #b2c8d4;
- color: #000000;
- }
- table.cbi-section-table .cbi-section-table-cell {
- padding: 3px;
- white-space: nowrap;
- }
- .cbi-section .cbi-rowstyle-1 h3 {
- background-color: #eeeeff;
- color: #555555;
- }
- .cbi-rowstyle-2 {
- color: #000000;
- }
- div.cbi-value {
- display: flex;
- flex-direction: row;
- margin-bottom: 0.5em;
- }
- .cbi-value-title {
- flex: 2;
- text-align: right;
- padding-right: 1em;
- font-weight: bold;
- }
- div.cbi-value-field {
- flex: 3;
- position: relative;
- input, select, input + label {
- position: relative;
- top: -0.39em;
- }
- }
- div.cbi-value-description {
- font-size: 8pt;
- }
- 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;
- }
- .cbi-map-descr:empty, .cbi-section-descr:empty {
- display: none;
- }
- .cbi-map-descr, .cbi-section-descr, .cbi-page-actions {
- padding: 1em;
- background: #ececec;
- }
- .cbi-page-actions {
- text-align: right;
- display: flex;
- display: -moz-flex;
- -moz-flex-flow: row-reverse;
- flex-flow: row-reverse;
- }
- div.cbi-optionals {
- padding: 0.25em;
- border-bottom: 1px dotted #bbbbbb;
- }
- div.cbi-section-remove {
- float: right;
- }
- .cbi-section-node {
- clear: both;
- position: relative;
- border: none;
- }
- .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%;
- }
- table.cbi-section-table th,
- table.cbi-section-table td {
- text-align: center;
- }
- tr.cbi-section-table-descr th {
- font-weight: normal;
- font-size: 90%;
- vertical-align: top;
- }
- td.cbi-section-table-optionals {
- text-align: left !important;
- padding-top: 1em;
- }
- .cbi-value-helpicon img {
- display: none;
- }
- div.cbi-error {
- font-size: 95%;
- font-weight: bold;
- color: #ff0000;
- background-color: #ffffff;
- }
- td.cbi-value-error {
- border-color: red;
- }
- .cbi-value-error input,
- .cbi-value-error select {
- background-color: #ffcccc;
- }
- .cbi-section-error {
- color: red;
- background-color: white;
- font-size: 95%;
- border: 1px dotted red;
- margin: 3px;
- padding: 3px;
- }
- .cbi-value-field var {
- color: #2222FF;
- }
- ul.cbi-tabmenu {
- padding: 3px 0;
- margin-left: 0 !important;
- list-style-type: none;
- position: relative;
- z-index: 10;
- top: 4px;
- line-height: 20px;
- }
- 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 #BBBBBB;
- border-bottom: none;
- border-radius: 3px 3px 0 0;
- background-color: #EEEEEE;
- color: #BBBBBB;
- }
- ul.cbi-tabmenu li.cbi-tab-highlighted a {
- color: #000000;
- background-color: #FFEEAA;
- }
- ul.cbi-tabmenu li a:hover {
- color: #000000;
- }
- ul.cbi-tabmenu li.cbi-tab a {
- padding-top: 4px;
- color: #000000;
- background-color: #FFFFFF;
- }
- 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 #CCCCCC;
- 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%;
- }
- .luci a:link,
- .luci a:visited {
- background-color: transparent;
- color: #666666;
- text-decoration: none;
- font-size: 70%;
- }
- .inline {
- display: inline;
- }
- .error500 {
- white-space: normal;
- border: 1px dotted #ff0000;
- background-color: #ffffff;
- color: #000000;
- padding: 0.5em;
- }
- .errorbox {
- border: 1px solid #FF0000;
- background-color: #FFCCCC;
- padding: 5px;
- margin-bottom: 5px;
- }
- .errorbox a {
- color: #000000 !important;
- }
- .ifacebox {
- background-color: #FFFFFF;
- border: 1px solid #CCCCCC;
- margin: 0 10px;
- text-align: center;
- white-space: nowrap;
- }
- .ifacebox .ifacebox-head {
- border-bottom: 1px solid #CCCCCC;
- padding: 2px;
- }
- .ifacebox .ifacebox-body {
- padding: 2px;
- }
- .ifacebadge {
- background-color: #FFFFFF;
- border: 1px solid #CCCCCC;
- padding: 2px;
- margin-left: 2px;
- display: inline-block;
- }
- .ifacebadge-active {
- border-color: #000000;
- font-weight: bold;
- }
- .zonebadge {
- padding: 2px;
- display: inline-block;
- white-space: nowrap;
- cursor: pointer;
- }
- .zonebadge em,
- .zonebadge strong {
- margin: 3px;
- display: inline-block;
- }
- .zonebadge input {
- width: 6em;
- height: 1.5em;
- }
- .zonebadge-empty {
- border: 1px dashed #AAAAAA;
- 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 #00FF00;
- background-color: #CCFFCC;
- display: block;
- padding: 2px;
- }
- .uci-change-list del,
- .uci-change-legend-label del {
- text-decoration: none;
- border: 1px solid #FF0000;
- background-color: #FFCCCC;
- 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: #EEEEEE;
- 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;
- }
- // Hide show/hide password toggle image
- .cbi-input-password + img {
- display: none;
- }
- .the-key {
- text-align: left;
- font-size: 1.4em;
- background: lighten($ffyellow, 35);
- border: 3pt dashed $ffmagenta;
- margin-bottom: 0.5em;
- padding: 0.5em
- }
|