diff --git a/package/features b/package/features index ef3d3980..57b7dc9f 100644 --- a/package/features +++ b/package/features @@ -58,3 +58,7 @@ when(_'mesh-babel', { when(not _'wireless-encryption-wpa3', { 'hostapd-mini', }) + +when(_'config-mode-theme-funkfeuer', { + '-config-mode-theme' +}) diff --git a/package/gluon-config-mode-theme-funkfeuer/.gitignore b/package/gluon-config-mode-theme-funkfeuer/.gitignore new file mode 100644 index 00000000..fbd81d49 --- /dev/null +++ b/package/gluon-config-mode-theme-funkfeuer/.gitignore @@ -0,0 +1,2 @@ +# ignore all the new stuff +* diff --git a/package/gluon-config-mode-theme-funkfeuer/Makefile b/package/gluon-config-mode-theme-funkfeuer/Makefile new file mode 100644 index 00000000..b817bd6a --- /dev/null +++ b/package/gluon-config-mode-theme-funkfeuer/Makefile @@ -0,0 +1,22 @@ +# Copyright (C) 2021 Maciej Krüger +# This is free software, licensed under the Apache 2.0 license. + +include $(TOPDIR)/rules.mk + +PKG_NAME:=gluon-config-mode-theme-funkfeuer +PKG_VERSION:=1 + +include ../gluon.mk + +# TODO: don't use this gigantic hack +define Build/Prepare + cp -rpn ../gluon-config-mode-theme/* . +endef + +define Package/gluon-config-mode-theme-funkfeuer + TITLE:=Gluon config mode theme for gluon-web customized for funkfeuer + DEPENDS:=+gluon-core +gluon-web + PROVIDES:=gluon-config-mode-theme +endef + +$(eval $(call BuildPackageGluon,gluon-config-mode-theme-funkfeuer)) diff --git a/package/gluon-config-mode-theme-funkfeuer/files/lib/gluon/config-mode/www/static/gluon.css b/package/gluon-config-mode-theme-funkfeuer/files/lib/gluon/config-mode/www/static/gluon.css new file mode 100644 index 00000000..0ae28afd --- /dev/null +++ b/package/gluon-config-mode-theme-funkfeuer/files/lib/gluon/config-mode/www/static/gluon.css @@ -0,0 +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:#e1f1a9}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:#6991aa;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:#a1c820;color:black}#menubar a:link.topcat.active,#menubar a:visited.topcat.active{background:#a1c820;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:#6991aa;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:#d9ee93;vertical-align:middle;border-radius:50%}input[type=radio]:checked+label::after{content:'•';color:#6991aa;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:#000;border:none;background:#d9ee93;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:#000;background:#d9ee93}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:#f23a14;color:#fff}.gluon-button-submit{background-color:#273142;color:#fff}.gluon-button-submit:active{background:grey}.gluon-input-invalid{background:#f23a14 !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:#e1f1a9;border:3pt dashed #6991aa;margin-bottom:0.5em;padding:0.5em} diff --git a/package/gluon-config-mode-theme-funkfeuer/sass/gluon.scss b/package/gluon-config-mode-theme-funkfeuer/sass/gluon.scss new file mode 100644 index 00000000..2c79b41e --- /dev/null +++ b/package/gluon-config-mode-theme-funkfeuer/sass/gluon.scss @@ -0,0 +1,559 @@ +/* + 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: + + 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! +*/ + +/* + Based on the CI from https://download.funkfeuer.at/misc/Funkfeuer-CI/VIguide_FUNKFEUER_last.pdf + + Currently only change is colors +*/ + +@charset "utf-8"; + +$feuer_darkblue: #273142; +$feuer_greyblue: #556270; +$feuer_lightblue: #6991aa; +$feuer_red: #f23a14; +$feuer_green: #a1c820; + +$ffyellow: $feuer_green; +$ffmagenta: $feuer_lightblue; +$ffzusatz: $feuer_darkblue; +$red: $feuer_red; + +@mixin button { + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + 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); + background-color: #E6E6E6; + border: none; + text-decoration: none; + border-radius: 2px; + + /* 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; + } + + &:focus { + outline: 0; + } + + &: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; + } +} + +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; +} + +.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; + } +} + +#maincontent ul { + margin-left: 2em; +} + +.error { + color: #ff0000; + background-color: white; +} + +#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 { + text-decoration: none; + font-weight: bold; + color: white; + + &:hover, &: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; + + & + 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; + } +} + +input[type=radio] { + 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%; + } + + &: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=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; + 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); +} + +select, +input[type=text], +input[type=password] { + min-width: 20em; +} + +.gluon-button { + @include button; + + margin-left: 0.5em; + background-repeat: no-repeat; +} + +.gluon-button-reset { + background-color: $red; + color: #fff; +} + +.gluon-button-submit { + background-color: $ffzusatz; + color: #fff; +} +.gluon-button-submit:active { + background: grey; +} + +.gluon-input-invalid { + background: $red !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; + + input, select, 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; + + input, select, 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 + & { + left: 0; + top: 0.04em; + } + + &:first-child { + top: 0.53em; + left: -0.08em; + } + + &::after { + content: '+'; + } +} + +.gluon-remove { + color: #800000; + + position: relative; + top: -0.03em; + + &::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: lighten($ffyellow, 35); + border: 3pt dashed $ffmagenta; + margin-bottom: 0.5em; + padding: 0.5em +}