diff --git a/client/src/app/site/config/components/config-field/config-field.component.html b/client/src/app/site/config/components/config-field/config-field.component.html
index 5b35be24c..6336fc4e5 100644
--- a/client/src/app/site/config/components/config-field/config-field.component.html
+++ b/client/src/app/site/config/components/config-field/config-field.component.html
@@ -38,11 +38,14 @@
[type]="formType(configItem.inputType)"
/>
+
+ {{ configItem.helpText | translate }}
-
-
-
diff --git a/client/src/app/site/config/components/config-field/config-field.component.scss b/client/src/app/site/config/components/config-field/config-field.component.scss
index 6980b01da..61fa66b06 100644
--- a/client/src/app/site/config/components/config-field/config-field.component.scss
+++ b/client/src/app/site/config/components/config-field/config-field.component.scss
@@ -1,47 +1,3 @@
-/* Full width form fields */
-.mat-form-field {
- width: 100%;
-}
-
-.datetimepicker-container {
- margin-left: -20px;
-
- .mat-form-field {
- width: 50%;
- box-sizing: border-box;
- padding-left: 20px;
-
- .suffix-wrapper {
- display: flex;
- align-items: center;
-
- .mat-datepicker-toggle {
- padding-left: 4px;
- padding-right: 4px;
-
- .mat-datepicker-toggle-default-icon {
- width: 20px;
- margin-bottom: 10px;
- }
- }
-
- .ngx-material-timepicker-toggle {
- width: 28px;
- }
- }
- }
-}
-
-/* limit the color bar of color inputs */
-input[type='color'] {
- max-width: 100px;
-}
-
-/* Spacing between config entries */
-.config-form-group {
- margin-bottom: 15px;
-}
-
.config-field-wrapper {
width: 100%;
display: flex;
@@ -49,9 +5,58 @@ input[type='color'] {
.form-item {
flex: 2;
}
- .reset-button {
- max-width: 30px;
- width: 30px;
- flex: 1;
+
+ .mat-form-field {
+ .mat-form-field-subscript-wrapper {
+ position: static;
+ }
+ .mat-form-field-underline {
+ display: none;
+ }
+ }
+
+ /* Full width form fields */
+ .mat-form-field {
+ width: 100%;
+ }
+
+ .datetimepicker-container {
+ margin-left: -20px;
+ display: flex;
+
+ .mat-form-field {
+ flex: 1;
+ box-sizing: border-box;
+ padding-left: 20px;
+
+ .suffix-wrapper {
+ display: flex;
+ align-items: center;
+
+ .mat-datepicker-toggle {
+ padding-left: 4px;
+ padding-right: 4px;
+
+ .mat-datepicker-toggle-default-icon {
+ width: 20px;
+ margin-bottom: 10px;
+ }
+ }
+
+ .ngx-material-timepicker-toggle {
+ width: 28px;
+ }
+ }
+ }
+ }
+
+ /* limit the color bar of color inputs */
+ input[type='color'] {
+ max-width: 100px;
+ }
+
+ /* Spacing between config entries */
+ .config-form-group {
+ margin-bottom: 15px;
}
}
diff --git a/client/src/app/site/config/components/config-field/config-field.component.scss-theme.scss b/client/src/app/site/config/components/config-field/config-field.component.scss-theme.scss
new file mode 100644
index 000000000..78e836618
--- /dev/null
+++ b/client/src/app/site/config/components/config-field/config-field.component.scss-theme.scss
@@ -0,0 +1,23 @@
+@import '~@angular/material/theming';
+
+@mixin os-config-field-style($theme) {
+ $foreground: map-get($theme, foreground);
+
+ $is-dark-theme: map-get($theme, is-dark);
+
+ .config-field-wrapper {
+ .mat-form-field {
+ .mat-form-field-flex {
+ border-bottom: 1px solid mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+ }
+ }
+
+ .datetimepicker-container {
+ .ngx-material-timepicker-toggle {
+ mat-icon {
+ color: mat-color($foreground, icon);
+ }
+ }
+ }
+ }
+}
diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss
index 27e6c38df..df1853054 100644
--- a/client/src/assets/styles/global-components-style.scss
+++ b/client/src/assets/styles/global-components-style.scss
@@ -11,6 +11,8 @@
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
+ $is-dark-theme: map-get($theme, is-dark);
+
h1,
h3.accent {
color: mat-color($primary);
@@ -39,6 +41,14 @@
background: mat-color($background, background);
}
+ .underline {
+ border-bottom: 1px solid mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+ }
+
+ .hint {
+ color: mat-color($foreground, secondary-text);
+ }
+
/* Custom hint and error classes. Same values as .mat-hint and -mat-error */
.hint,
.error {
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 480097c3b..fc7186f72 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -24,6 +24,7 @@
@import './app/site/common/components/super-search/super-search.component.scss';
@import './app/shared/components/rounded-input/rounded-input.component.scss';
@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
+@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
/** fonts */
@import './assets/styles/fonts.scss';
@@ -48,6 +49,7 @@ $narrow-spacing: (
@include os-super-search-style($theme);
@include os-rounded-input-style($theme);
@include os-meta-text-block-style($theme);
+ @include os-config-field-style($theme);
}
/** Load projector specific SCSS values */