diff --git a/package/gluon-config-mode-theme/files/lib/gluon/config-mode/view/theme/layout.html b/package/gluon-config-mode-theme/files/lib/gluon/config-mode/view/theme/layout.html
index c80cd4b3..6064126c 100644
--- a/package/gluon-config-mode-theme/files/lib/gluon/config-mode/view/theme/layout.html
+++ b/package/gluon-config-mode-theme/files/lib/gluon/config-mode/view/theme/layout.html
@@ -100,6 +100,7 @@ You may obtain a copy of the License at
+
<%| hostname .. ((rnode and rnode.title) and ' - ' .. title(rnode) or '') %>
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 3365f449..4914732e 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 @@
-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}
+html{min-height:100%;height:auto;position:relative;background:#fff;background:-moz-linear-gradient(top, white 0, rgba(0, 159, 222, 0.3) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, rgba(0, 159, 222, 0.3)));background:-webkit-linear-gradient(top, white 0, rgba(0, 159, 222, 0.3) 100%);background:-o-linear-gradient(top, white 0, rgba(0, 159, 222, 0.3) 100%);background:-ms-linear-gradient(top, white 0, rgba(0, 159, 222, 0.3) 100%);background:linear-gradient(to bottom, white 0, rgba(0, 159, 222, 0.3) 100%)}body,input,select,option{font:12pt "Open Sans",Arial,sans-serif}body{color:#4d4e53;line-height:1.5rem;margin:0;display:flex;flex-direction:column;min-height:100vh;background:#f3f3f3 url("/static/footer.ffbsee.animated.svg") no-repeat bottom;background-size:contain}.tabmenu1{text-align:center}ul.tabmenu{list-style:none;padding:0;margin:2rem 0;display:block}ul.tabmenu li{white-space:nowrap;margin:0 .5 erm;padding:0;text-align:center}ul.tabmenu li a{display:block;text-decoration:none;padding:1rem;margin:0;color:#333;border-radius:2rem}ul.tabmenu li a:hover{background:#ffe9b3}ul.tabmenu li.active a{font-weight:bold;background:#fff;color:#333}.error{color:red;background-color:#fff;padding:1rem;font-weight:bold}#menubar{background:#dc0067;color:#fff}#menubar a:link.topcat,#menubar a:visited.topcat{position:relative;display:block;padding:.5rem;text-decoration:none;font-size:80%;font-weight:normal;color:#fff}#menubar a:link.topcat:hover,#menubar a:link.topcat:focus,#menubar a:visited.topcat:hover,#menubar a:visited.topcat:focus{background:#ffb400;color:#000}#menubar a:link.topcat.active,#menubar a:visited.topcat.active{font-weight:bold;background:#009ee0;color:#fff}#menubar .hostinfo{position:relative;margin:0;padding:.5rem;flex:1;font-weight:bold;font-size:80%}#menubar .hostinfo a:link,#menubar .hostinfo a:visited{text-decoration:none;font-weight:bold;color:#fff}#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{max-width:60rem;margin:1rem auto;background-color:rgba(255,255,255,.333);padding:0;border-radius:.5rem}#maincontent p{margin-bottom:1rem}#maincontent ul{margin-left:2rem}.gluon-section{margin:0 0 1.25rem;padding:0;border:none}.gluon-section:last-child{margin-bottom:.75rem}.gluon-section legend{font-size:1.5rem;font-weight:bold;position:relative;margin-bottom:.5rem;padding:1rem}.gluon-section h2{margin:0 0 .5rem -0.5rem}.gluon-section h3{text-decoration:none;font-weight:bold;color:#555;margin:.25rem;font-size:100%}.gluon-section-descr{margin-bottom:2rem}.gluon-osm-map{width:100%;height:40rem;margin-bottom:1rem}#value-id\.1\.6\.map{margin:0 1rem}input::placeholder,input::-webkit-input-placeholder{color:#aaa}input[type=checkbox]{display:none}input[type=checkbox]+label{display:inline-block;position:relative;width:1rem;height:1rem;margin:0}input[type=checkbox]:checked+label::after{content:"✔";color:#dc0067;vertical-align:middle;position:absolute;top:50%;left:0;margin-top:-0.5rem;width:100%;text-align:center;font-size:1.7rem}input[type=radio]{display:none}input[type=radio]+label{display:inline-block;position:relative;width:.75rem;height:.75rem;padding:.75rem;margin:.25rem .25rem .25rem .125rem;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.5rem;width:100%;text-align:center;font-size:2rem}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:.5rem;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:.125rem;top:calc(2px + .125rem);bottom:calc(2px + .125rem);width:1.5rem;border-left:.125rem solid rgba(0,0,0,.25);pointer-events:none;background:url('data:image/svg+xml;utf8,') center/0.75rem .5rem 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:20rem}.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:.5rem 1rem;color:rgba(0,0,0,.8);background-color:#e6e6e6;border:none;text-decoration:none;border-radius:2px;transition:.1s linear box-shadow;margin-left:.5rem;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,.15) inset,0 0 6px rgba(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:.4;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:gray}.gluon-input-invalid{background:#e30 !important;color:#fff}textarea{margin-left:-1px;margin-bottom:.5rem}.gluon-value{margin-bottom:.75rem}.gluon-section-node .gluon-value:last-child{margin-bottom:0}.gluon-value-title{padding-top:.5rem;padding-right:1rem;font-weight:bold;padding-left:1rem}.gluon-value-field{position:relative;margin-right:1rem}.gluon-value-field input,.gluon-value-field select,.gluon-value-field input+label{position:relative}.gluon-value-field input{margin-left:1rem}.gluon-value-field-text{padding-top:.5rem;padding-left:1rem}.gluon-value-field-long{flex:10;position:relative;margin-top:.75rem}.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:1rem}.gluon-form-descr:empty,.gluon-section-descr:empty{display:none}.gluon-form-descr,.gluon-section-descr{padding:1rem;background:#ececec}.gluon-page-actions{padding:1rem;background:#ececec;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:#fcc}.gluon-add::after,.gluon-remove::after{cursor:pointer;display:inline-block;text-align:center;vertical-align:middle;font-size:180%;width:1.25rem;height:1rem}.gluon-add{color:green;position:relative;left:20rem}input+.gluon-add{left:0;top:.125rem}.gluon-add:first-child{top:.5rem;left:-0.125rem}.gluon-add::after{content:"+"}.gluon-remove{color:maroon;position:relative;top:-0.125rem}.gluon-remove::after{content:"–"}.error500{border:1px dotted red;background-color:#fff;color:#000;padding:.5rem}.errorbox{border:1px solid red;background-color:#fcc;padding:5px;margin-bottom:5px}.errorbox a{color:#000 !important}.the-key{text-align:left;font-size:1.5rem;background:#ffe9b3;border:3pt dashed #dc0067;margin-bottom:.5rem;padding:.5rem}h2{color:#009ee0;padding:1rem}fieldset.gluon-section{padding-top:1rem}input[type=checkbox]+label,select{border:1px solid silver;margin-top:0;margin-bottom:1px}input,option,select,input[type=checkbox]+label,textarea,ul.tabmenu li a:hover,#menubar a:link.topcat:hover,#menubar a:link.topcat:focus,#menubar a:visited.topcat:hover,#menubar a:visited.topcat:focus{background-color:#99d9f5}.gluon-page-actions{padding:1rem;border-radius:0 0 .5rem .5rem}.gluon-form-descr,.gluon-section-descr{margin:0 1rem 1rem}.gluon-value:last-child{padding-bottom:1rem}textarea,.gluon-form>p,form>p{margin:0 1rem}@media(min-width: 576px){#menubar{display:flex}}@media(min-width: 768px){#maincontent{min-width:40rem}.gluon-value-field{margin-right:auto}}@media(min-width: 992px){ul.tabmenu{display:inline-flex}.gluon-value{display:flex;flex-direction:row}.gluon-value-title{flex:2;text-align:right}.gluon-value-field{flex:3}.gluon-value-field-text{flex:3;padding-left:0}}@media(min-width: 1200px){#value-id\.1\.6\.map{margin:0}}/*# sourceMappingURL=gluon.css.map */
diff --git a/package/gluon-config-mode-theme/sass/gluon.scss b/package/gluon-config-mode-theme/sass/gluon.scss
index 5e1aeda7..9b798df7 100644
--- a/package/gluon-config-mode-theme/sass/gluon.scss
+++ b/package/gluon-config-mode-theme/sass/gluon.scss
@@ -31,9 +31,8 @@ $red: #ee3300;
cursor: pointer;
user-select: none;
-
font-size: 100%;
- padding: 0.5em 1em;
+ padding: 0.5rem 1rem;
color: rgba(0, 0, 0, 0.80);
background-color: #E6E6E6;
border: none;
@@ -71,13 +70,12 @@ html {
}
body, input, select, option {
- font-family: 'Open Sans', Arial, sans-serif;
- font-size: 12pt;
+ font: 12pt "Open Sans", Arial, sans-serif
}
body {
color: rgb(77, 78, 83);
- line-height: 1.5em;
+ line-height: 1.5rem;
margin: 0;
display: flex;
flex-direction: column;
@@ -92,90 +90,87 @@ body {
ul.tabmenu {
list-style: none;
padding: 0;
- margin: 2em 0;
- display: inline-flex;
-}
+ margin: 2rem 0 0;
+ display: block;
-ul.tabmenu li {
- white-space: nowrap;
- margin: 0 0.5em;
- padding: 0;
- text-align: center;
+ li {
+ white-space: nowrap;
+ margin: 0 0.5rem;
+ 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: 1rem;
+ margin: 0;
+ color: #333;
+ border-radius: 2rem;
- &:hover {
- background: lighten($ffyellow, 35);
+ &:hover {
+ background: lighten($ffyellow, 35);
+ }
+ }
+
+ &.active a {
+ font-weight: bold;
+ background: white;
+ color: #333;
}
}
-
- &.active a {
- font-weight: bold;
- background: white;
- color: #333;
- }
-}
-
-#maincontent ul {
- margin-left: 2em;
}
.error {
color: #ff0000;
background-color: white;
+ padding: 1rem;
+ font-weight: bold;
}
#menubar {
- 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;
-
- &:hover, &:focus {
- background: $ffyellow;
- color: black;
- }
-
- &.active {
- background: $ffyellow;
- 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, &:visited {
+ a:link.topcat,
+ a:visited.topcat {
+ position: relative;
+ display: block;
+ padding: 0.5rem;
text-decoration: none;
- font-weight: bold;
+ font-size: 80%;
+ font-weight: normal;
color: white;
&:hover, &:focus {
- text-decoration: underline;
+ background: $ffyellow;
+ color: black;
+ }
+
+ &.active {
+ font-weight: bold;
+ background: $ffzusatz;
+ color: white;
+ }
+ }
+
+ .hostinfo {
+ position: relative;
+ margin: 0;
+ padding: 0.5rem;
+ flex: 1;
+ font-weight: bold;
+ font-size: 80%;
+
+ a {
+ &:link, &:visited {
+ text-decoration: none;
+ font-weight: bold;
+ color: white;
+
+ &:hover, &:focus {
+ text-decoration: underline;
+ }
+ }
}
}
}
@@ -184,131 +179,142 @@ ul.tabmenu li {
list-style: none;
margin: 0;
padding: 0;
-}
-#topmenu li {
- display: inline-block;
+ li {
+ display: inline-block;
+ }
}
#maincontent {
- padding: 0 1em 2em;
- max-width: 60em;
- min-width: 40em;
- margin: 1em auto;
-}
+ max-width: 60rem;
+ margin: 1rem auto;
+ background-color: rgba(255, 255, 255, 0.333);
+ padding: 0;
+ border-radius: 0.5rem;
-#maincontent p {
- margin-bottom: 1em;
+ p {
+ margin: 0 1rem 1rem;
+ }
+
+ ul {
+ margin-left: 2rem;
+ }
}
.gluon-section {
- margin: 0;
+ margin: 0 0 1.25rem;
padding: 0;
border: none;
- margin-bottom: 1.3em;
+
+ &:last-child {
+ margin-bottom: 0.75rem;
+ }
+
+ legend {
+ font-size: 1.5rem;
+ font-weight: bold;
+ position: relative;
+ margin-bottom: 0.5rem;
+ padding: 1rem;
+ }
+
+ h2 {
+ margin: 0 0 0.5rem -0.5rem;
+ }
+
+ h3 {
+ text-decoration: none;
+ font-weight: bold;
+ color: #555555;
+ margin: 0.25rem;
+ font-size: 100%;
+ }
}
-.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%;
+body.admin-network .gluon-section {
+ margin-bottom: 0;
}
.gluon-section-descr {
- margin-bottom: 2em;
+ margin-bottom: 2rem;
}
.gluon-osm-map {
width: 100%;
- height: 40em;
- margin-bottom: 1em;
+ height: 40rem;
+ margin-bottom: 1rem;
}
-input::placeholder {
- color: #aaaaaa;
+#value-id\.1\.6\.map {
+ margin: 0 1rem;
}
-input::-webkit-input-placeholder {
- color: #aaaaaa;
-}
-
-input[type=checkbox] {
- display: none;
-
- & + label {
- display: inline-block;
- position: relative;
- width: 1em;
- height: 1em;
- margin: 0;
+input {
+ &::placeholder,
+ &::-webkit-input-placeholder {
+ color: #aaaaaa;
}
- &: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;
- }
-}
+ &[type=checkbox] {
+ display: none;
-input[type=radio] {
- display: none;
+ & + label {
+ display: inline-block;
+ position: relative;
+ width: 1rem;
+ height: 1rem;
+ margin: 0;
+ }
- & + 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: -33.333%;
+ width: 100%;
+ text-align: center;
+ font-size: 1.7rem;
+ }
}
- &: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;
- }
-}
+ &[type=radio] {
+ display: none;
-input[type=submit],
-input[type=reset],
-input[type=button] {
- cursor: pointer;
+ & + label {
+ display: inline-block;
+ position: relative;
+ width: 0.75rem;
+ height: 0.75rem;
+ padding: 0.75rem;
+ margin: 0.25rem 0.25rem 0.25rem 0.125rem;
+ 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.5rem;
+ width: 100%;
+ text-align: center;
+ font-size: 2rem;
+ }
+ }
+
+ &[type=submit],
+ &[type=reset],
+ &[type=button] {
+ cursor: pointer;
+ }
}
select,
@@ -319,13 +325,18 @@ input[type=checkbox] + label {
border: none;
background: lighten($ffyellow, 30);
border-radius: 3pt;
- padding: 0.5em;
+ padding: 0.5rem;
margin-top: 1px;
margin-bottom: 2px;
box-sizing: content-box;
outline: 0;
}
+select, input[type="text"],
+input[type="password"] {
+ min-width: auto;
+}
+
.select-wrapper {
position: relative;
display: inline-block;
@@ -333,17 +344,13 @@ input[type=checkbox] + label {
&::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);
+ right: 0.125rem;
+ top: calc(2px + 0.125rem);
+ bottom: calc(2px + 0.125rem);
+ width: 1.5rem;
+ border-left: 0.125rem solid rgba(0, 0, 0, 0.25);
pointer-events: none;
- background:
- url('data:image/svg+xml;utf8,')
- center / 0.8em 0.5em
- no-repeat
- ;
+ background: url('data:image/svg+xml;utf8,') center / 0.75rem 0.5rem no-repeat;
content: '';
}
@@ -360,16 +367,10 @@ option {
background: lighten($ffyellow, 30);
}
-select,
-input[type=text],
-input[type=password] {
- min-width: 20em;
-}
-
.gluon-button {
@include button;
- margin-left: 0.5em;
+ margin-left: 0.5rem;
background-repeat: no-repeat;
}
@@ -381,9 +382,11 @@ input[type=password] {
.gluon-button-submit {
background-color: $ffzusatz;
color: #fff;
-}
-.gluon-button-submit:active {
- background: grey;
+
+ &:active {
+ background: grey;
+ }
+
}
.gluon-input-invalid {
@@ -393,13 +396,12 @@ input[type=password] {
textarea {
margin-left: -1px;
- margin-bottom: 0.5em;
+ margin-bottom: 0.5rem;
+ max-width: calc(100% - 3rem);
}
.gluon-value {
- display: flex;
- flex-direction: row;
- margin-bottom: 0.5em;
+ margin-bottom: .75rem;
}
.gluon-section-node .gluon-value:last-child {
@@ -407,31 +409,43 @@ textarea {
}
.gluon-value-title {
- flex: 2;
- text-align: right;
- padding-top: 0.39em;
- padding-right: 1em;
+ padding-top: .5rem;
+ padding-right: 1rem;
font-weight: bold;
+ padding-left: 1rem;
+ overflow-wrap: break-word;
}
.gluon-value-field {
- flex: 3;
position: relative;
+ margin-right: 1rem;
- input, select, input + label {
+ select, input + label {
position: relative;
+ margin-left: 1rem;
+ }
+
+ select {
+ padding-right: 2rem;
+ }
+
+ input,
+ .gluon-add,
+ .gluon-value-description {
+ margin-left: 1rem;
}
}
.gluon-value-field-text {
- flex: 3;
- padding-top: 0.39em;
+ padding-top: 0.5rem;
+ padding-left: 1rem;
+ overflow-wrap: break-word;
}
.gluon-value-field-long {
flex: 10;
position: relative;
- margin-top: 0.65em;
+ margin-top: 0.75rem;
input, select, input + label {
position: relative;
@@ -443,23 +457,29 @@ textarea {
}
.gluon-value-description {
- font-size: 8pt;
+ font-size: 0.75rem;
}
.gluon-form-descr {
- margin-bottom: 1em;
+ margin-bottom: 1rem;
}
-.gluon-form-descr:empty, .gluon-section-descr:empty {
- display: none;
+.gluon-form-descr,
+.gluon-section-descr {
+ &:empty {
+ display: none;
+ }
}
-.gluon-form-descr, .gluon-section-descr, .gluon-page-actions {
- padding: 1em;
+.gluon-form-descr,
+.gluon-section-descr {
+ padding: 1rem;
background: #ececec;
}
.gluon-page-actions {
+ padding: 1rem;
+ background: #ececec;
text-align: right;
display: flex;
flex-flow: row-reverse;
@@ -471,35 +491,39 @@ textarea {
border: none;
}
-.gluon-value-error input,
-.gluon-value-error select {
- background-color: #ffcccc;
+.gluon-value-error {
+ input,
+ 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,
+.gluon-remove {
+ &::after {
+ cursor: pointer;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ font-size: 180%;
+ width: 1.25rem;
+ height: 1rem;
+ }
}
.gluon-add {
color: #008000;
-
position: relative;
- left: 21em;
+ left: 21.75rem;
input + & {
left: 0;
- top: 0.04em;
+ top: 0.125rem;
}
&:first-child {
- top: 0.53em;
- left: -0.08em;
+ top: 0.5rem;
+ left: -0.125rem;
}
&::after {
@@ -509,9 +533,9 @@ textarea {
.gluon-remove {
color: #800000;
-
position: relative;
- top: -0.03em;
+ top: -0.375rem;
+ margin-left: 0.75rem;
&::after {
content: '–';
@@ -522,7 +546,7 @@ textarea {
border: 1px dotted #ff0000;
background-color: #ffffff;
color: #000000;
- padding: 0.5em;
+ padding: 0.5rem;
}
.errorbox {
@@ -530,18 +554,120 @@ textarea {
background-color: #FFCCCC;
padding: 5px;
margin-bottom: 5px;
-}
-.errorbox a {
- color: #000000 !important;
+ a {
+ color: #000000 !important;
+ }
}
-
.the-key {
text-align: left;
- font-size: 1.4em;
+ font-size: 1.5rem;
background: lighten($ffyellow, 35);
border: 3pt dashed $ffmagenta;
- margin-bottom: 0.5em;
- padding: 0.5em
+ margin-bottom: 0.5rem;
+ padding: 0.5rem
+}
+
+h2 {
+ color: $ffzusatz;
+ padding: 1rem;
+}
+
+fieldset.gluon-section {
+ padding-top: 1rem;
+}
+
+input[type="checkbox"] + label, select {
+ border: 1px solid #c0c0c0;
+ margin-top: 0;
+ margin-bottom: 1px;
+}
+
+input,
+option,
+select,
+input[type="checkbox"] + label,
+textarea,
+ul.tabmenu li a:hover,
+#menubar a:link.topcat:hover,
+#menubar a:link.topcat:focus,
+#menubar a:visited.topcat:hover,
+#menubar a:visited.topcat:focus {
+ background-color: #99d9F5;
+}
+
+.gluon-page-actions {
+ padding: 1rem;
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.gluon-form-descr,
+.gluon-section-descr {
+ margin: 0 1rem 1rem;
+}
+
+.gluon-value:last-child {
+ padding-bottom: 1rem;
+}
+
+textarea,
+.gluon-form > p,
+form > p {
+ margin: 0 1rem;
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) {
+ #menubar {
+ display: flex;
+ }
+
+ select,
+ input[type=text],
+ input[type=password] {
+ min-width: 20rem;
+ }
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) {
+ #maincontent {
+ min-width: 40rem;
+ }
+
+ .gluon-value-field {
+ margin-right: auto;
+ }
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) {
+ ul.tabmenu {
+ display: inline-flex;
+ }
+ .gluon-value {
+ display: flex;
+ flex-direction: row;
+ }
+ .gluon-value-title {
+ flex: 2;
+ text-align: right;
+ }
+
+ .gluon-value-field {
+ flex: 3;
+ }
+
+ .gluon-value-field-text {
+ flex: 3;
+ padding-left: 0;
+ }
+}
+
+// X-Large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+ #value-id\.1\.6\.map {
+ margin: 0;
+ }
}