diff --git a/package/gluon-config-mode-theme/sass/gluon.scss b/package/gluon-config-mode-theme/sass/gluon.scss index e1a59560..e6172a8a 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,624 @@ $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; + 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.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); + border: none rgba(0, 0, 0, 0); + background-color: #E6E6E6; + 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; - } + &[disabled] { + border: none; + background-image: none; + opacity: 0.40; + cursor: not-allowed; + box-shadow: none; + } } @mixin button-primary { - background-color: $ffzusatz; - color: #fff; + background-color: $ffzusatz; + color: #fff; } .lang_he { - direction: RTL; - unicode-bidi: embed; + direction: RTL; + unicode-bidi: embed; } .hidden { - display: none; + display: 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; + 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; + border: none; + text-decoration: none; } .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; - } + &.active a { + font-weight: bold; + background: white; + color: #333; + } } abbr, acronym { - font-style: normal; - font-variant: normal; + font-style: normal; + font-variant: normal; } abbr[title], acronym[title] { - border-bottom: 1px dotted; - cursor: help; + border-bottom: 1px dotted; + cursor: help; } a:link abbr[title], a:visited abbr[title], a:link acronym[title], a:visited acronym[title] { - cursor: pointer; + cursor: pointer; } code { - font-family: monospace; - white-space: pre; + font-family: monospace; + white-space: pre; } #maincontent ul { - margin-left: 2em; + margin-left: 2em; } .clear { - clear: both; + clear: both; } .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%; + 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; + &: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 !important; } .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 !important; + font-weight: bold !important; + color: #555555 !important; + margin: 0.25em !important; + font-size: 100% !important; } .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; + color: #aaaaaa; } input:-webkit-input-placeholder { - color: #aaaaaa; + color: #aaaaaa; } input:-moz-placeholder { - color: #aaaaaa; + color: #aaaaaa; } input:-ms-input-placeholder { - color: #aaaaaa; + 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; } option { - color: darken($ffzusatz, 30); - background: lighten($ffyellow, 30); + color: darken($ffzusatz, 30); + background: lighten($ffyellow, 30); } input[type=image] { - border: none; + border: none; } select, input[type=text], input[type=password] { - min-width: 20em; + min-width: 20em; } input.gluon-button { - @include 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; + background-color: $red; + color: #fff; } input.gluon-button-submit { - @include button-primary; + @include button-primary; } input.gluon-button-submit:active { - background: grey; + background: grey; } .gluon-input-invalid { - background: $red !important; - color: white; + background: $red !important; + color: white; } div.gluon-section-remove input { - border-bottom: none; + border-bottom: none; } 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; + background-color: #eeeeff; + color: #555555; } .gluon-rowstyle-2 { - color: #000000; + color: #000000; } div.gluon-value { - display: flex; - flex-direction: row; - margin-bottom: 0.5em; + 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; + 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; + flex: 3; + padding-top: 0.39em; } div.gluon-value-field-long { - flex: 10; - position: relative; - margin-top: 0.65em; + 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; + flex: 2; } div.gluon-value-description { - font-size: 8pt; + font-size: 8pt; } div.gluon-section-create { - clear: left; - white-space: nowrap; - vertical-align: top; + clear: left; + white-space: nowrap; + vertical-align: top; } div.gluon-section-create .gluon-button { - margin: 0.25em; + margin: 0.25em; } input.gluon-section-create-name { - margin-right: -0.25em; + margin-right: -0.25em; } div.gluon-form-descr { - margin-bottom: 1em; + 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; + text-align: right; + display: flex; + flex-flow: row-reverse; } div.gluon-optionals { - padding: 0.25em; - border-bottom: 1px dotted #bbbbbb; + padding: 0.25em; + border-bottom: 1px dotted #bbbbbb; } div.gluon-section-remove { - float: right; + float: right; } .gluon-section-node { - clear: both; - position: relative; - border: none; + clear: both; + position: relative; + border: none; } .gluon-section-node-tabbed { - border-top-left-radius: 0; + border-top-left-radius: 0; } div.gluon-error { - font-size: 95%; - font-weight: bold; - color: #ff0000; - background-color: #ffffff; + font-size: 95%; + font-weight: bold; + color: #ff0000; + background-color: #ffffff; } .gluon-value-error input, .gluon-value-error select { - background-color: #ffcccc; + background-color: #ffcccc; } .gluon-value-field var { - color: #2222FF; + 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; + 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: '–'; - } + &:after { + content: '–'; + } } .left { - text-align: left !important; + text-align: left !important; } .right { - text-align: right !important; + text-align: right !important; } .inline { - display: inline; + display: inline; } .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 }