diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md index a8cfdd1802befd13c41411a9d6da1d7d98179acf..a5cabb0c6f0707b11ddd414fe08ac4f9bafa677f 100644 --- a/docs/release-notes-player.md +++ b/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 diff --git a/projects/common/assets/common-styles.css b/projects/common/assets/common-styles.css index c3673bb6063c62539b51b81633e7867d04b815b1..ab47f0d4a023db80260a2367c924424acd26c328 100644 --- a/projects/common/assets/common-styles.css +++ b/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; -} diff --git a/projects/common/assets/customTheme.scss b/projects/common/assets/customTheme.scss index 0583975c3670e258460d9e741f4acb75f53b6aa3..23901b4f0ce156b25a40627d26ecaa455a146dfe 100644 --- a/projects/common/assets/customTheme.scss +++ b/projects/common/assets/customTheme.scss @@ -1,6 +1,8 @@ @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 + } +} diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts index 14dafbbcd101c3e631267aca3550a6af1a1b4668..8e22a8937727dd58d19fb0be4a5b1a057cea3e5b 100644 --- a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts +++ b/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}', diff --git a/projects/common/math-editor.module.ts b/projects/common/math-editor.module.ts index f794a8560329a187200e938c37d453afbe9e6be8..f0ef08b60aabe26de186960862fb2088cd915e07 100644 --- a/projects/common/math-editor.module.ts +++ b/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}' ] })