Darken the border form fields, toggle buttons & simple text fields

docs/release-notes-player.md

@@ -3,6 +3,7 @@ Player
 ## 1.29.1
 ### Verbesserungen
 - Ändert die voreingestellte Hintergrundfarbe bei Ablegelisten für Ablegeankündigung
+- Ändert die Rahmenfarbe für Eingabefelder, Eingabebereiche, Formeln und Optionsfelder in Lückentexten
 
 
 ## 1.29.0

projects/common/assets/common-styles.css

@@ -65,13 +65,3 @@ blockquote p {
 .cdk-drag-dragging {
   cursor: grabbing;
 }
-
-math-field {
-  border-radius: 4px;
-  outline: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 8px;
-}
-
-math-field:focus {
-  outline-color: #3f51b5;
-}

projects/common/assets/customTheme.scss

 @use '../../../node_modules/@angular/material/index' as mat;
 @import '../../../node_modules/@angular/material/theming';
 
+$aspect-element-border-color: #ccc;
+$aspect-element-border-hover-color: #333;
 $aspect-primary: mat.define-palette(mat.$pink-palette);
 $aspect-accent: mat.define-palette($mat-cyan, 900);
 $aspect-theme: mat.define-light-theme((
@@ -10,3 +12,33 @@ $aspect-theme: mat.define-light-theme((
 @include mat.checkbox-color($aspect-theme);
 @include mat.radio-color($aspect-theme);
 @include mat.slider-color($aspect-theme);
+
+.mat-form-field-appearance-outline:not(.mat-focused ){
+  .mat-form-field-outline {
+    color: $aspect-element-border-color;
+  }
+  &:hover {
+    .mat-form-field-outline {
+      color: $aspect-element-border-hover-color;
+    }
+  }
+}
+
+.mat-button-toggle-group-appearance-standard {
+  border-color: $aspect-element-border-color;
+  .mat-button-toggle+.mat-button-toggle {
+    border-left-color: $aspect-element-border-color;
+  }
+}
+
+math-field {
+  border-radius: 4px;
+  border: 1px solid $aspect-element-border-color;
+  padding: 8px;
+  &:hover {
+    border-color: $aspect-element-border-hover-color
+  };
+  &:focus {
+    outline-color: #3f51b5; //TODO $outline-color-primary
+  }
+}

projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts

@@ -37,7 +37,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
            (blur)="focusChanged.emit({ inputElement: input, focused: false })">
   `,
   styles: [
-    '.cloze-child {border: 1px solid rgba(0,0,0,.12); border-radius: 4px;}',
+    '.cloze-child {border: 1px solid #ccc; border-radius: 4px;}',
     'input {width: 100%; height: 100%; padding: 0 2px; box-sizing: border-box}',
     'input:hover {border: 1px solid currentColor;}',
     'input:focus {border: 1px solid #3f51b5; outline: 0}',

projects/common/math-editor.module.ts

@@ -22,7 +22,7 @@ import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/
   `,
   styles: [
     'mat-button-toggle-group {height: 20px;}',
-    ':host ::ng-deep .read-only math-field {outline: unset}',
+    ':host ::ng-deep .read-only math-field {outline: unset; border: unset }',
     ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}'
   ]
 })