diff --git a/package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css b/package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css index 16f213e4..3365f449 100644 --- a/package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css +++ b/package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css @@ -1 +1 @@ -.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:#4d4e53;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}ul.tabmenu li a{display:block;text-decoration:none;padding:1em;margin:0;color:#333;border-radius:2em}ul.tabmenu li a:hover{background:#ffe9b3}ul.tabmenu li.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}.clear{clear:both}.error{color:#ff0000;background-color:white}#menubar{display:flex;background:#dc0067;color:#ffffff}#menubar a:link.topcat,#menubar a:visited.topcat{position:relative;display:block;padding:0.5em;text-decoration:none;font-size:80%;font-weight:normal;color:white}#menubar a:link.topcat:hover,#menubar a:link.topcat:focus,#menubar a:visited.topcat:hover,#menubar a:visited.topcat:focus{background:#ffb400;color:black}#menubar a:link.topcat.active,#menubar a:visited.topcat.active{background:#ffb400;color:black;font-weight:bold}#menubar div.hostinfo{position:relative;margin:0;padding:0.5em;flex:1;font-weight:bold;font-size:80%}#menubar div.hostinfo a:link,#menubar div.hostinfo a:visited{text-decoration:none;font-weight:bold;color:white}#menubar div.hostinfo a:link:hover,#menubar div.hostinfo a:link:focus,#menubar div.hostinfo a:visited:hover,#menubar div.hostinfo a:visited:focus{text-decoration:underline}#topmenu{list-style:none;margin:0;padding:0}#topmenu li{display:inline-block}#maincontent{padding:0 1em 2em;max-width:60em;min-width:40em;margin:1em auto}#maincontent p{margin-bottom:1em}.gluon-section{margin:0;padding:0;border:none;margin-bottom:1.3em}.gluon-section:last-child{margin-bottom:0.7em}.gluon-section legend{font-size:1.4em;font-weight:bold;position:relative;padding:0;margin-bottom:0.5em}.gluon-section h2{margin:0em 0 0.5em -0.5em !important}.gluon-section h3{text-decoration:none !important;font-weight:bold !important;color:#555555 !important;margin:0.25em !important;font-size:100% !important}.gluon-section-descr{margin-bottom:2em}.gluon-osm-map{width:100%;height:40em;margin-bottom:1em}input:placeholder{color:#aaaaaa}input:-webkit-input-placeholder{color:#aaaaaa}input:-moz-placeholder{color:#aaaaaa}input:-ms-input-placeholder{color:#aaaaaa}input[type=checkbox]{display:none}input[type=checkbox]+label{display:inline-block;position:relative;width:1em;height:1em;margin:0}input[type=checkbox]:checked+label:after{content:'✔';color:#dc0067;vertical-align:middle;position:absolute;top:50%;left:0;margin-top:-0.5em;width:100%;text-align:center;font-size:1.7em}input[type=radio]{display:none}input[type=radio]+label{display:inline-block;position:relative;width:0.8em;height:0.8em;padding:0.5em;margin:0.2em 0.2em 0.2em 0.1em;border:none;background:#ffe199;vertical-align:middle;border-radius:50%}input[type=radio]:checked+label:after{content:'•';color:#dc0067;vertical-align:middle;position:absolute;top:50%;left:0;margin-top:-0.4em;width:100%;text-align:center;font-size:2em}input[type=submit],input[type=reset],input[type=image],input[type=button]{cursor:pointer}select,input,textarea,input[type=checkbox]+label{color:#003247;border:none;background:#ffe199;border-radius:3pt;padding:0.5em;margin-top:1px;margin-bottom:2px;box-sizing:content-box;outline:0}option{color:#003247;background:#ffe199}input[type=image]{border:none}select,input[type=text],input[type=password]{min-width:20em}input.gluon-button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;user-select:none;font-size:100%;padding:0.5em 1em;color:rgba(0,0,0,0.8);border:none transparent;background-color:#E6E6E6;text-decoration:none;border-radius:2px;transition:0.1s linear box-shadow;margin-left:0.5em;background-repeat:no-repeat}input.gluon-button::-moz-focus-inner{padding:0;border:0}input.gluon-button:active{box-shadow:0 0 0 1px rgba(0,0,0,0.15) inset,0 0 6px rgba(0,0,0,0.2) inset}input.gluon-button:focus{outline:0}input.gluon-button:hover,input.gluon-button:focus{background-image:linear-gradient(transparent, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.1))}input.gluon-button[disabled]{border:none;background-image:none;opacity:0.40;cursor:not-allowed;box-shadow:none}input.gluon-button-reset{background-color:#e30;color:#fff}input.gluon-button-submit{background-color:#009ee0;color:#fff}input.gluon-button-submit:active{background:grey}.gluon-input-invalid{background:#e30 !important;color:white}div.gluon-section-remove input{border-bottom:none}textarea{margin-left:-1px;margin-bottom:0.5em}.gluon-section .gluon-rowstyle-1 h3{background-color:#eeeeff;color:#555555}.gluon-rowstyle-2{color:#000000}div.gluon-value{display:flex;flex-direction:row;margin-bottom:0.5em}.gluon-section-node .gluon-value:last-child{margin-bottom:0}.gluon-value-title{flex:2;text-align:right;padding-top:0.39em;padding-right:1em;font-weight:bold}div.gluon-value-field{flex:3;position:relative}div.gluon-value-field input,div.gluon-value-field select,div.gluon-value-field input+label{position:relative}div.gluon-value-field-text{flex:3;padding-top:0.39em}div.gluon-value-field-long{flex:10;position:relative;margin-top:0.65em}div.gluon-value-field-long input,div.gluon-value-field-long select,div.gluon-value-field-long input+label{position:relative}div.gluon-value-field-long-after{flex:2}div.gluon-value-description{font-size:8pt}div.gluon-section-create{clear:left;white-space:nowrap;vertical-align:top}div.gluon-section-create .gluon-button{margin:0.25em}input.gluon-section-create-name{margin-right:-0.25em}div.gluon-form-descr{margin-bottom:1em}.gluon-form-descr:empty,.gluon-section-descr:empty{display:none}.gluon-form-descr,.gluon-section-descr,.gluon-page-actions{padding:1em;background:#ececec}.gluon-page-actions{text-align:right;display:flex;flex-flow:row-reverse}div.gluon-optionals{padding:0.25em;border-bottom:1px dotted #bbbbbb}div.gluon-section-remove{float:right}.gluon-section-node{clear:both;position:relative;border:none}.gluon-section-node-tabbed{border-top-left-radius:0}div.gluon-error{font-size:95%;font-weight:bold;color:#ff0000;background-color:#ffffff}.gluon-value-error input,.gluon-value-error select{background-color:#ffcccc}.gluon-value-field var{color:#2222FF}.gluon-add:after,.gluon-remove:after{cursor:pointer;display:inline-block;text-align:center;vertical-align:middle;font-size:180%;width:1.2em;height:1em}.gluon-add{color:#008000;position:relative;left:21em}input+.gluon-add{left:0;top:0.04em}.gluon-add:first-child{top:0.53em;left:-0.08em}.gluon-add:after{content:'+'}.gluon-remove{color:#800000;position:relative;top:-0.03em}.gluon-remove:after{content:'–'}.left{text-align:left !important}.right{text-align:right !important}.inline{display:inline}.error500{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}.the-key{text-align:left;font-size:1.4em;background:#ffe9b3;border:3pt dashed #dc0067;margin-bottom:0.5em;padding:0.5em} +html{min-height:100%;height:auto;position:relative}body,input,select,option{font-family:'Open Sans', Arial, sans-serif;font-size:12pt}body{color:#4d4e53;line-height:1.5em;margin:0;display:flex;flex-direction:column;min-height:100vh;background-color:#f3f3f3}.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}ul.tabmenu li a{display:block;text-decoration:none;padding:1em;margin:0;color:#333;border-radius:2em}ul.tabmenu li a:hover{background:#ffe9b3}ul.tabmenu li.active a{font-weight:bold;background:white;color:#333}#maincontent ul{margin-left:2em}.error{color:#ff0000;background-color:white}#menubar{display:flex;background:#dc0067;color:#ffffff}#menubar a:link.topcat,#menubar a:visited.topcat{position:relative;display:block;padding:0.5em;text-decoration:none;font-size:80%;font-weight:normal;color:white}#menubar a:link.topcat:hover,#menubar a:link.topcat:focus,#menubar a:visited.topcat:hover,#menubar a:visited.topcat:focus{background:#ffb400;color:black}#menubar a:link.topcat.active,#menubar a:visited.topcat.active{background:#ffb400;color:black;font-weight:bold}#menubar .hostinfo{position:relative;margin:0;padding:0.5em;flex:1;font-weight:bold;font-size:80%}#menubar .hostinfo a:link,#menubar .hostinfo a:visited{text-decoration:none;font-weight:bold;color:white}#menubar .hostinfo a:link:hover,#menubar .hostinfo a:link:focus,#menubar .hostinfo a:visited:hover,#menubar .hostinfo a:visited:focus{text-decoration:underline}#topmenu{list-style:none;margin:0;padding:0}#topmenu li{display:inline-block}#maincontent{padding:0 1em 2em;max-width:60em;min-width:40em;margin:1em auto}#maincontent p{margin-bottom:1em}.gluon-section{margin:0;padding:0;border:none;margin-bottom:1.3em}.gluon-section:last-child{margin-bottom:0.7em}.gluon-section legend{font-size:1.4em;font-weight:bold;position:relative;padding:0;margin-bottom:0.5em}.gluon-section h2{margin:0em 0 0.5em -0.5em}.gluon-section h3{text-decoration:none;font-weight:bold;color:#555555;margin:0.25em;font-size:100%}.gluon-section-descr{margin-bottom:2em}.gluon-osm-map{width:100%;height:40em;margin-bottom:1em}input::placeholder{color:#aaaaaa}input::-webkit-input-placeholder{color:#aaaaaa}input[type=checkbox]{display:none}input[type=checkbox]+label{display:inline-block;position:relative;width:1em;height:1em;margin:0}input[type=checkbox]:checked+label::after{content:'✔';color:#dc0067;vertical-align:middle;position:absolute;top:50%;left:0;margin-top:-0.5em;width:100%;text-align:center;font-size:1.7em}input[type=radio]{display:none}input[type=radio]+label{display:inline-block;position:relative;width:0.8em;height:0.8em;padding:0.5em;margin:0.2em 0.2em 0.2em 0.1em;border:none;background:#ffe199;vertical-align:middle;border-radius:50%}input[type=radio]:checked+label::after{content:'•';color:#dc0067;vertical-align:middle;position:absolute;top:50%;left:0;margin-top:-0.4em;width:100%;text-align:center;font-size:2em}input[type=submit],input[type=reset],input[type=button]{cursor:pointer}select,input,textarea,input[type=checkbox]+label{color:#003247;border:none;background:#ffe199;border-radius:3pt;padding:0.5em;margin-top:1px;margin-bottom:2px;box-sizing:content-box;outline:0}.select-wrapper{position:relative;display:inline-block}.select-wrapper::before{position:absolute;z-index:1;right:0.05em;top:calc(2px + 0.1em);bottom:calc(2px + 0.1em);width:1.4em;border-left:0.05em solid rgba(0,0,0,0.25);pointer-events:none;background:url('data:image/svg+xml;utf8,') center/0.8em 0.5em no-repeat;content:''}.select-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}option{color:#003247;background:#ffe199}select,input[type=text],input[type=password]{min-width:20em}.gluon-button{display:inline-block;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;user-select:none;font-size:100%;padding:0.5em 1em;color:rgba(0,0,0,0.8);background-color:#E6E6E6;border:none;text-decoration:none;border-radius:2px;transition:0.1s linear box-shadow;margin-left:0.5em;background-repeat:no-repeat}.gluon-button::-moz-focus-inner{padding:0;border:0}.gluon-button:active{box-shadow:0 0 0 1px rgba(0,0,0,0.15) inset,0 0 6px rgba(0,0,0,0.2) inset}.gluon-button:focus{outline:0}.gluon-button:hover,.gluon-button:focus{background-image:linear-gradient(transparent, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.1))}.gluon-button[disabled]{border:none;background-image:none;opacity:0.40;cursor:not-allowed;box-shadow:none}.gluon-button-reset{background-color:#e30;color:#fff}.gluon-button-submit{background-color:#009ee0;color:#fff}.gluon-button-submit:active{background:grey}.gluon-input-invalid{background:#e30 !important;color:white}textarea{margin-left:-1px;margin-bottom:0.5em}.gluon-value{display:flex;flex-direction:row;margin-bottom:0.5em}.gluon-section-node .gluon-value:last-child{margin-bottom:0}.gluon-value-title{flex:2;text-align:right;padding-top:0.39em;padding-right:1em;font-weight:bold}.gluon-value-field{flex:3;position:relative}.gluon-value-field input,.gluon-value-field select,.gluon-value-field input+label{position:relative}.gluon-value-field-text{flex:3;padding-top:0.39em}.gluon-value-field-long{flex:10;position:relative;margin-top:0.65em}.gluon-value-field-long input,.gluon-value-field-long select,.gluon-value-field-long input+label{position:relative}.gluon-value-field-long-after{flex:2}.gluon-value-description{font-size:8pt}.gluon-form-descr{margin-bottom:1em}.gluon-form-descr:empty,.gluon-section-descr:empty{display:none}.gluon-form-descr,.gluon-section-descr,.gluon-page-actions{padding:1em;background:#ececec}.gluon-page-actions{text-align:right;display:flex;flex-flow:row-reverse}.gluon-section-node{clear:both;position:relative;border:none}.gluon-value-error input,.gluon-value-error select{background-color:#ffcccc}.gluon-add::after,.gluon-remove::after{cursor:pointer;display:inline-block;text-align:center;vertical-align:middle;font-size:180%;width:1.2em;height:1em}.gluon-add{color:#008000;position:relative;left:21em}input+.gluon-add{left:0;top:0.04em}.gluon-add:first-child{top:0.53em;left:-0.08em}.gluon-add::after{content:'+'}.gluon-remove{color:#800000;position:relative;top:-0.03em}.gluon-remove::after{content:'–'}.error500{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}.the-key{text-align:left;font-size:1.4em;background:#ffe9b3;border:3pt dashed #dc0067;margin-bottom:0.5em;padding:0.5em} diff --git a/package/gluon-config-mode-theme/sass/gluon.scss b/package/gluon-config-mode-theme/sass/gluon.scss index e1a59560..5e1aeda7 100644 --- a/package/gluon-config-mode-theme/sass/gluon.scss +++ b/package/gluon-config-mode-theme/sass/gluon.scss @@ -1,13 +1,13 @@ /* - ATTENTION: This file is not compiled when building gluon. - The compiled version is at ../files/lib/gluon/config-mode/www/static/gluon.css + ATTENTION: This file is not compiled when building gluon. + The compiled version is at ../files/lib/gluon/config-mode/www/static/gluon.css - Use sass like this to update it: + Use sass like this to update it: - sass --sourcemap=none -C -t compressed sass/gluon.scss files/lib/gluon/config-mode/www/static/gluon.css + sass --sourcemap=none -C -t compressed sass/gluon.scss files/lib/gluon/config-mode/www/static/gluon.css - When commiting changes to this file make sure to commit the respective - changes to the compilid version within the same commit! + When commiting changes to this file make sure to commit the respective + changes to the compilid version within the same commit! */ @charset "utf-8"; @@ -18,624 +18,530 @@ $ffzusatz: #009ee0; $red: #ee3300; @mixin button { - &::-moz-focus-inner { - padding: 0; - border: 0; - } + &::-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; - user-select: none; + display: inline-block; + line-height: normal; + white-space: nowrap; + vertical-align: baseline; + text-align: center; + cursor: pointer; + 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; + font-size: 100%; + padding: 0.5em 1em; + color: rgba(0, 0, 0, 0.80); + background-color: #E6E6E6; + border: none; + text-decoration: none; + border-radius: 2px; - /* Transitions */ - transition: 0.1s linear box-shadow; + /* Transitions */ + 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; - } + &: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; - } + &:focus { + outline: 0; + } - &:hover, &:focus { - background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); - } + &:hover, &:focus { + 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; + &[disabled] { + border: none; + background-image: none; + opacity: 0.40; + cursor: not-allowed; + box-shadow: none; + } } html { - min-height: 100%; - height: auto; - position:relative; + min-height: 100%; + height: auto; + position: relative; } body, input, select, option { - font-family: 'Open Sans', Arial, sans-serif; - font-size: 12pt; + 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; + color: rgb(77, 78, 83); + line-height: 1.5em; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: #f3f3f3; } .tabmenu1 { - text-align: center; + text-align: center; } ul.tabmenu { - list-style: none; - padding: 0; - margin: 2em 0; - display: inline-flex; + 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; + 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; + a { + display: block; + text-decoration: none; + padding: 1em; + margin: 0; + color: #333; + border-radius: 2em; - &:hover { - background: lighten($ffyellow, 35); - } - } + &: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; + &.active a { + font-weight: bold; + background: white; + color: #333; + } } #maincontent ul { - margin-left: 2em; -} - -.clear { - clear: both; + margin-left: 2em; } .error { - color: #ff0000; - background-color: white; + color: #ff0000; + background-color: white; } #menubar { - display: flex; - background: $ffmagenta; - color: #ffffff; + display: flex; + background: $ffmagenta; + color: #ffffff; } #menubar a:link.topcat, #menubar a:visited.topcat { - position: relative; - display: block; - padding: 0.5em; - text-decoration: none; - font-size: 80%; - font-weight: normal; - color: white; + position: relative; + display: block; + padding: 0.5em; + text-decoration: none; + font-size: 80%; + font-weight: normal; + color: white; - &:hover, &:focus { - background: $ffyellow; - color: black; - } + &:hover, &:focus { + background: $ffyellow; + color: black; + } - &.active { - background: $ffyellow; - color: black; - font-weight: bold; - } + &.active { + background: $ffyellow; + color: black; + font-weight: bold; + } } -#menubar div.hostinfo { - position: relative; - margin: 0; - padding: 0.5em; - flex: 1; - font-weight: bold; - font-size: 80%; +#menubar .hostinfo { + position: relative; + margin: 0; + padding: 0.5em; + flex: 1; + font-weight: bold; + font-size: 80%; } -#menubar div.hostinfo a { - &:link, &:visited { - text-decoration: none; - font-weight: bold; - color: white; +#menubar .hostinfo a { + &:link, &:visited { + text-decoration: none; + font-weight: bold; + color: white; - &:hover, &:focus { - text-decoration: underline; - } - } + &:hover, &:focus { + text-decoration: underline; + } + } } #topmenu { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } #topmenu li { - display: inline-block; + display: inline-block; } #maincontent { - padding: 0 1em 2em; - max-width: 60em; - min-width: 40em; - margin: 1em auto; + padding: 0 1em 2em; + max-width: 60em; + min-width: 40em; + margin: 1em auto; } #maincontent p { - margin-bottom: 1em; + margin-bottom: 1em; } .gluon-section { - margin: 0; - padding: 0; - border: none; - margin-bottom: 1.3em; + margin: 0; + padding: 0; + border: none; + margin-bottom: 1.3em; } .gluon-section:last-child { - margin-bottom: 0.7em; + margin-bottom: 0.7em; } .gluon-section legend { - font-size: 1.4em; - font-weight: bold; - position: relative; - padding: 0; - margin-bottom: 0.5em; + font-size: 1.4em; + font-weight: bold; + position: relative; + padding: 0; + margin-bottom: 0.5em; } .gluon-section h2 { - margin: 0em 0 0.5em -0.5em !important; + margin: 0em 0 0.5em -0.5em; } .gluon-section h3 { - text-decoration: none !important; - font-weight: bold !important; - color: #555555 !important; - margin: 0.25em !important; - font-size: 100% !important; + text-decoration: none; + font-weight: bold; + color: #555555; + margin: 0.25em; + font-size: 100%; } .gluon-section-descr { - margin-bottom: 2em; + margin-bottom: 2em; } .gluon-osm-map { - width: 100%; - height: 40em; - margin-bottom: 1em; + width: 100%; + height: 40em; + margin-bottom: 1em; } -input:placeholder { - color: #aaaaaa; +input::placeholder { + color: #aaaaaa; } -input:-webkit-input-placeholder { - color: #aaaaaa; -} - -input:-moz-placeholder { - color: #aaaaaa; -} - -input:-ms-input-placeholder { - color: #aaaaaa; +input::-webkit-input-placeholder { + color: #aaaaaa; } input[type=checkbox] { - display: none; + display: none; - & + label { - display: inline-block; - position: relative; - width: 1em; - height: 1em; - margin: 0; - } + & + label { + display: inline-block; + position: relative; + 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; - } + &: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=radio] { - display: none; + display: none; - & + label { - display: inline-block; - position: relative; - width: 0.8em; - height: 0.8em; - padding: 0.5em; - margin: 0.2em 0.2em 0.2em 0.1em; - border: none; - background: lighten($ffyellow, 30); - vertical-align: middle; - border-radius: 50%; - } + & + label { + display: inline-block; + position: relative; + width: 0.8em; + height: 0.8em; + padding: 0.5em; + margin: 0.2em 0.2em 0.2em 0.1em; + border: none; + background: lighten($ffyellow, 30); + vertical-align: middle; + border-radius: 50%; + } - &:checked + label:after { - content: '•'; - color: $ffmagenta; - vertical-align: middle; - position: absolute; - top: 50%; - left: 0; - margin-top: -0.4em; - width: 100%; - text-align: center; - font-size: 2em; - } + &:checked + label::after { + content: '•'; + color: $ffmagenta; + vertical-align: middle; + position: absolute; + top: 50%; + left: 0; + margin-top: -0.4em; + width: 100%; + text-align: center; + font-size: 2em; + } } input[type=submit], input[type=reset], -input[type=image], input[type=button] { - cursor: pointer; + 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; - margin-top: 1px; - margin-bottom: 2px; - box-sizing: content-box; - outline: 0; + color: darken($ffzusatz, 30); + border: none; + background: lighten($ffyellow, 30); + border-radius: 3pt; + padding: 0.5em; + margin-top: 1px; + margin-bottom: 2px; + box-sizing: content-box; + outline: 0; +} + +.select-wrapper { + position: relative; + display: inline-block; + + &::before { + position: absolute; + z-index: 1; + right: 0.05em; + top: calc(2px + 0.1em); + bottom: calc(2px + 0.1em); + width: 1.4em; + border-left: 0.05em solid rgba(0, 0, 0, 0.25); + pointer-events: none; + background: + url('data:image/svg+xml;utf8,') + center / 0.8em 0.5em + no-repeat + ; + content: ''; + } + + select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + } } option { - color: darken($ffzusatz, 30); - background: lighten($ffyellow, 30); -} - -input[type=image] { - border: none; + color: darken($ffzusatz, 30); + background: lighten($ffyellow, 30); } select, input[type=text], input[type=password] { - min-width: 20em; + min-width: 20em; } -input.gluon-button { - @include button; +.gluon-button { + @include button; - margin-left: 0.5em; - background-repeat: no-repeat; + margin-left: 0.5em; + background-repeat: no-repeat; } -input.gluon-button-reset { - background-color: $red; - color: #fff; -} -input.gluon-button-submit { - @include button-primary; +.gluon-button-reset { + background-color: $red; + color: #fff; } -input.gluon-button-submit:active { - background: grey; +.gluon-button-submit { + background-color: $ffzusatz; + color: #fff; +} +.gluon-button-submit:active { + background: grey; } .gluon-input-invalid { - background: $red !important; - color: white; -} - -div.gluon-section-remove input { - border-bottom: none; + background: $red !important; + color: white; } textarea { - margin-left: -1px; - margin-bottom: 0.5em; + margin-left: -1px; + margin-bottom: 0.5em; } -.gluon-section .gluon-rowstyle-1 h3 { - background-color: #eeeeff; - color: #555555; -} - -.gluon-rowstyle-2 { - color: #000000; -} - -div.gluon-value { - display: flex; - flex-direction: row; - margin-bottom: 0.5em; +.gluon-value { + display: flex; + flex-direction: row; + margin-bottom: 0.5em; } .gluon-section-node .gluon-value:last-child { - margin-bottom: 0; + margin-bottom: 0; } .gluon-value-title { - flex: 2; - text-align: right; - padding-top: 0.39em; - padding-right: 1em; - font-weight: bold; + flex: 2; + text-align: right; + padding-top: 0.39em; + padding-right: 1em; + font-weight: bold; } -div.gluon-value-field { - flex: 3; - position: relative; +.gluon-value-field { + flex: 3; + position: relative; - input, select, input + label { - position: relative; - } + input, select, input + label { + position: relative; + } } -div.gluon-value-field-text { - flex: 3; - padding-top: 0.39em; +.gluon-value-field-text { + flex: 3; + padding-top: 0.39em; } -div.gluon-value-field-long { - flex: 10; - position: relative; - margin-top: 0.65em; +.gluon-value-field-long { + flex: 10; + position: relative; + margin-top: 0.65em; - input, select, input + label { - position: relative; - } + input, select, input + label { + position: relative; + } } -div.gluon-value-field-long-after { - flex: 2; +.gluon-value-field-long-after { + flex: 2; } -div.gluon-value-description { - font-size: 8pt; +.gluon-value-description { + font-size: 8pt; } -div.gluon-section-create { - clear: left; - white-space: nowrap; - vertical-align: top; -} - -div.gluon-section-create .gluon-button { - margin: 0.25em; -} - -input.gluon-section-create-name { - margin-right: -0.25em; -} - -div.gluon-form-descr { - margin-bottom: 1em; +.gluon-form-descr { + margin-bottom: 1em; } .gluon-form-descr:empty, .gluon-section-descr:empty { - display: none; + display: none; } .gluon-form-descr, .gluon-section-descr, .gluon-page-actions { - padding: 1em; - background: #ececec; + padding: 1em; + background: #ececec; } .gluon-page-actions { - text-align: right; - display: flex; - flex-flow: row-reverse; -} - -div.gluon-optionals { - padding: 0.25em; - border-bottom: 1px dotted #bbbbbb; -} - -div.gluon-section-remove { - float: right; + text-align: right; + display: flex; + flex-flow: row-reverse; } .gluon-section-node { - clear: both; - position: relative; - border: none; -} - -.gluon-section-node-tabbed { - border-top-left-radius: 0; -} - -div.gluon-error { - font-size: 95%; - font-weight: bold; - color: #ff0000; - background-color: #ffffff; + clear: both; + position: relative; + border: none; } .gluon-value-error input, .gluon-value-error select { - background-color: #ffcccc; + background-color: #ffcccc; } -.gluon-value-field var { - color: #2222FF; -} - -.gluon-add:after, .gluon-remove:after { - cursor: pointer; - display: inline-block; - text-align: center; - vertical-align: middle; - font-size: 180%; - width: 1.2em; - height: 1em; +.gluon-add::after, .gluon-remove::after { + cursor: pointer; + display: inline-block; + text-align: center; + vertical-align: middle; + font-size: 180%; + width: 1.2em; + height: 1em; } .gluon-add { - color: #008000; + color: #008000; - position: relative; - left: 21em; + position: relative; + left: 21em; - input + & { - left: 0; - top: 0.04em; - } + input + & { + left: 0; + top: 0.04em; + } - &:first-child { - top: 0.53em; - left: -0.08em; - } + &:first-child { + top: 0.53em; + left: -0.08em; + } - &:after { - content: '+'; - } + &::after { + content: '+'; + } } .gluon-remove { - color: #800000; + color: #800000; - position: relative; - top: -0.03em; + position: relative; + top: -0.03em; - &:after { - content: '–'; - } -} - -.left { - text-align: left !important; -} - -.right { - text-align: right !important; -} - -.inline { - display: inline; + &::after { + content: '–'; + } } .error500 { - border: 1px dotted #ff0000; - background-color: #ffffff; - color: #000000; - padding: 0.5em; + 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; + border: 1px solid #FF0000; + background-color: #FFCCCC; + padding: 5px; + margin-bottom: 5px; } .errorbox a { - color: #000000 !important; + color: #000000 !important; } .the-key { - text-align: left; - font-size: 1.4em; - background: lighten($ffyellow, 35); - border: 3pt dashed $ffmagenta; - margin-bottom: 0.5em; - padding: 0.5em + text-align: left; + font-size: 1.4em; + background: lighten($ffyellow, 35); + border: 3pt dashed $ffmagenta; + margin-bottom: 0.5em; + padding: 0.5em } diff --git a/package/gluon-web-admin/files/lib/gluon/config-mode/view/admin/upgrade.html b/package/gluon-web-admin/files/lib/gluon/config-mode/view/admin/upgrade.html index 456b9e5c..31555f16 100644 --- a/package/gluon-web-admin/files/lib/gluon/config-mode/view/admin/upgrade.html +++ b/package/gluon-web-admin/files/lib/gluon/config-mode/view/admin/upgrade.html @@ -26,7 +26,7 @@ $Id$ <%:Firmware image%>
- +
@@ -36,13 +36,13 @@ $Id$
- +
-
+
diff --git a/package/gluon-web-mesh-vpn-fastd/files/lib/gluon/config-mode/view/mesh-vpn-fastd.html b/package/gluon-web-mesh-vpn-fastd/files/lib/gluon/config-mode/view/mesh-vpn-fastd.html index ed527c8e..5bb5f069 100644 --- a/package/gluon-web-mesh-vpn-fastd/files/lib/gluon/config-mode/view/mesh-vpn-fastd.html +++ b/package/gluon-web-mesh-vpn-fastd/files/lib/gluon/config-mode/view/mesh-vpn-fastd.html @@ -1,6 +1,6 @@
- /> + /> >
@@ -18,7 +18,7 @@
- /> + /> >
diff --git a/package/gluon-web-model/files/lib/gluon/web/view/model/dynlist.html b/package/gluon-web-model/files/lib/gluon/web/view/model/dynlist.html index 512a194b..b0cd9d0a 100644 --- a/package/gluon-web-model/files/lib/gluon/web/view/model/dynlist.html +++ b/package/gluon-web-model/files/lib/gluon/web/view/model/dynlist.html @@ -10,7 +10,7 @@ <% for i, val in ipairs(self:cfgvalue()) do %> - /> diff --git a/package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html b/package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html index 47a2ffd1..e63d33ee 100644 --- a/package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html +++ b/package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html @@ -4,23 +4,25 @@ %> <% if self.widget == "select" then %> - +
+ +
<% elseif self.widget == "radio" then %>
<% for i, entry in pairs(entries) do %> @@ -28,7 +30,7 @@ attr("data-index", i) .. attr("data-depends", self:deplist(entry.deps)) %>> - style="width: 100%"<% else %> cols="<%=self.size%>"<% end %> data-update="change"<%= attr("name", id) .. attr("id", id) .. attr("rows", self.rows) .. attr("wrap", self.wrap) %>> + diff --git a/package/gluon-web-model/files/lib/gluon/web/view/model/value.html b/package/gluon-web-model/files/lib/gluon/web/view/model/value.html index f14c122e..fc8b8de6 100644 --- a/package/gluon-web-model/files/lib/gluon/web/view/model/value.html +++ b/package/gluon-web-model/files/lib/gluon/web/view/model/value.html @@ -2,7 +2,6 @@ attr("id", id) .. attr("name", id) .. attr("type", self.password and "password" or "text") .. - attr("class", self.password and "gluon-input-password" or "gluon-input-text") .. attr("value", self:cfgvalue()) .. attr("size", self.size) .. attr("placeholder", self.placeholder) .. diff --git a/package/gluon-web-model/files/lib/gluon/web/www/static/gluon-web-model.js b/package/gluon-web-model/files/lib/gluon/web/www/static/gluon-web-model.js index a826967e..07478cbb 100644 --- a/package/gluon-web-model/files/lib/gluon/web/www/static/gluon-web-model.js +++ b/package/gluon-web-model/files/lib/gluon/web/www/static/gluon-web-model.js @@ -1 +1 @@ -!function(){var f={};function a(e){return/^-?\d+$/.test(e)?+e:NaN}function r(e){return/^-?\d*\.?\d+?$/.test(e)?+e:NaN}var u={integer:function(){return!isNaN(a(this))},uinteger:function(){return 0<=a(this)},float:function(){return!isNaN(r(this))},ufloat:function(){return 0<=r(this)},ipaddr:function(){return u.ip4addr.apply(this)||u.ip6addr.apply(this)},ip4addr:function(){var e;return!!(e=this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/))&&(0<=e[1]&&e[1]<=255&&0<=e[2]&&e[2]<=255&&0<=e[3]&&e[3]<=255&&0<=e[4]&&e[4]<=255)},ip6addr:function(){return this.indexOf("::")<0?null!=this.match(/^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}$/i):!(0<=this.indexOf(":::")||this.match(/::.+::/)||this.match(/^:[^:]/)||this.match(/[^:]:$/))&&(!!this.match(/^(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}$/i)||(!!this.match(/^(?:[a-f0-9]{1,4}:){7}:$/i)||!!this.match(/^:(?::[a-f0-9]{1,4}){7}$/i)))},wpakey:function(){var e=this;return 64==e.length?null!=e.match(/^[a-f0-9]{64}$/i):8<=e.length&&e.length<=63},range:function(e,t){var n=r(this);return+e<=n&&n<=+t},min:function(e){return r(this)>=+e},max:function(e){return r(this)<=+e},irange:function(e,t){var n=a(this);return+e<=n&&n<=+t},imin:function(e){return a(this)>=+e},imax:function(e){return a(this)<=+e},minlength:function(e){return+e<=(""+this).length},maxlength:function(e){return(""+this).length<=+e}};function o(e){for(var t=0;tn.index);i=i.nextSibling);i?r.insertBefore(n.node,i):r.appendChild(n.node),n.node.dispatchEvent(new Event("gluon-show")),e=!0}r&&r.parentNode&&r.getAttribute("data-optionals")&&(r.parentNode.style.display=r.options.length<=1?"none":"")}e&&v()}function h(e,t,n,a){return e.addEventListener?e.addEventListener(t,n,!!a):e.attachEvent("on"+t,function(){var e=window.event;return!e.target&&e.srcElement&&(e.target=e.srcElement),!!n(e)}),e}function g(l,s){var c=s.prefix;function o(e,t,n){for(var a=[];l.firstChild;){var r=l.firstChild;(i=+r.index)!=n&&("input"==r.nodeName.toLowerCase()?a.push(r.value||""):"select"==r.nodeName.toLowerCase()&&(a[a.length-1]=r.options[r.selectedIndex].value)),l.removeChild(r)}0<=t?(e=t+1,a.splice(t,0,"")):s.optional||0!=a.length||a.push("");for(var i=1;i<=a.length;i++){var o=document.createElement("input");if(o.id=c+"."+i,o.name=c,o.value=a[i-1],o.type="text",o.index=i,o.className="gluon-input-text",s.size&&(o.size=s.size),s.placeholder&&(o.placeholder=s.placeholder),l.appendChild(o),s.type&&m(o,!1,s.type),h(o,"keydown",f),h(o,"keypress",p),i==e)o.focus();else if(-i==e){o.focus();var d=o.value;o.value=" ",o.value=d}if(s.optional||1=+e},max:function(e){return r(this)<=+e},irange:function(e,t){var n=a(this);return+e<=n&&n<=+t},imin:function(e){return a(this)>=+e},imax:function(e){return a(this)<=+e},minlength:function(e){return+e<=(""+this).length},maxlength:function(e){return(""+this).length<=+e}};function o(e){for(var t=0;tn.index);i=i.nextSibling);i?r.insertBefore(n.node,i):r.appendChild(n.node),n.node.dispatchEvent(new Event("gluon-show")),e=!0}r&&r.parentNode&&r.getAttribute("data-optionals")&&(r.parentNode.style.display=r.options.length<=1?"none":"")}e&&h()}function g(e,t,n,a){return e.addEventListener?e.addEventListener(t,n,!!a):e.attachEvent("on"+t,function(){var e=window.event;return!e.target&&e.srcElement&&(e.target=e.srcElement),!!n(e)}),e}function m(l,s){var c=s.prefix;function o(e,t,n){for(var a=[];l.firstChild;){var r=l.firstChild;(i=+r.index)!=n&&("input"==r.nodeName.toLowerCase()?a.push(r.value||""):"select"==r.nodeName.toLowerCase()&&(a[a.length-1]=r.options[r.selectedIndex].value)),l.removeChild(r)}0<=t?(e=t+1,a.splice(t,0,"")):s.optional||0!=a.length||a.push("");for(var i=1;i<=a.length;i++){var o=document.createElement("input");if(o.id=c+"."+i,o.name=c,o.value=a[i-1],o.type="text",o.index=i,s.size&&(o.size=s.size),s.placeholder&&(o.placeholder=s.placeholder),l.appendChild(o),s.type&&y(o,!1,s.type),g(o,"keydown",f),g(o,"keypress",p),i==e)o.focus();else if(-i==e){o.focus();var d=o.value;o.value=" ",o.value=d}if(s.optional||1