Applied telekom design in text tool

css/apps/rich-workspace.scss

@@ -0,0 +1,330 @@
+@import '../_mixins.scss';
+
+:root {
+	--color-info: var(--telekom-color-text-and-icon-primary-standard);
+	--color-success: var(--telekom-color-text-and-icon-functional-success);
+	--color-warning: var(--telekom-color-text-and-icon-functional-warning);
+	--color-danger: var(--telekom-color-text-and-icon-functional-danger);
+}
+
+#rich-workspace {
+	padding-right: 0 !important;
+
+	.editor {
+
+		.text-menubar {
+			padding: 0;
+			opacity: 1;
+			visibility: unset;
+
+			&__entries {
+				gap: 1rem;
+
+				.button-vue {
+					border: none;
+					min-width: 24px;
+					padding: 0;
+					width: 24px !important;
+
+					&:hover:not(:disabled) {
+						background-color: unset;
+						@include color-icon;
+					}
+
+					&__icon {
+
+						svg {
+							display: none;
+						}
+
+						span {
+							background-position: center;
+							height: 24px;
+							width: 24px;
+						}
+
+						.arrow-u-left-top-icon {
+							background-image: var(--icon-undo-dark);
+						}
+
+						.arrow-u-right-top-icon {
+							background-image: var(--icon-redo-dark);
+						}
+
+						.format-bold-icon {
+							background-image: var(--icon-bold-dark);
+						}
+
+						.format-italic-icon {
+							background-image: var(--icon-italic-dark);
+						}
+
+						.format-underline-icon {
+							background-image: var(--icon-underline-dark);
+						}
+
+						.format-strikethrough-icon {
+							background-image: var(--icon-strikethrough-dark);
+						}
+
+						.format-header1-icon {
+							background-image: var(--icon-h1-dark);
+						}
+
+						.format-header2-icon {
+							background-image: var(--icon-h2-dark);
+						}
+
+						.format-header3-icon {
+							background-image: var(--icon-h3-dark);
+						}
+
+						.format-header4-icon {
+							background-image: var(--icon-h4-dark);
+						}
+
+						.format-header5-icon {
+							background-image: var(--icon-h5-dark);
+						}
+
+						.format-header6-icon {
+							background-image: var(--icon-h6-dark);
+						}
+
+						.format-list-bulleted-icon {
+							background-image: var(--icon-ul-dark);
+						}
+
+						.format-list-numbered-icon {
+							background-image: var(--icon-ol-dark);
+						}
+
+						.format-list-checkbox-icon {
+							background-image: var(--icon-checklist-dark);
+						}
+
+						.format-quote-close-icon {
+							background-image: var(--icon-quote-dark);
+						}
+
+						.information-icon {
+							background-image: var(--icon-callout-dark);
+						}
+
+						.checkbox-marked-circle-icon {
+							background-image: var(--icon-success-dark);
+						}
+
+						.alert-icon {
+							background-image: var(--icon-alert-dark);
+						}
+
+						.alert-decagram-icon {
+							background-image: var(--icon-warning-dark);
+						}
+
+						.code-tags-icon {
+							background-image: var(--icon-code-dark);
+						}
+
+						.table-icon {
+							background-image: var(--icon-table-dark);
+						}
+
+						.emoticon-outline-icon {
+							background-image: var(--icon-emoji-dark);
+						}
+
+						.image-multiple-outline-icon {
+							background-image: var(--icon-image-dark);
+						}
+
+						.help-circle-icon {
+							background-image: var(--icon-help-dark);
+						}
+					}
+				}
+
+				.entry-action {
+
+					&.is-active:not(.entry-action-item) {
+						background-color: unset;
+					}
+				}
+			}
+
+			.save-status {
+				color: var(--color-main-text);
+				justify-content: flex-end;
+				margin-right: 6px;
+				top: 0;
+			}
+
+			.session-list {
+				display: none;
+			}
+		}
+
+		.content-wrapper {
+			padding: 1rem 0 !important;
+
+			.ProseMirror {
+
+				*:last-child {
+					margin-bottom: 0;
+				}
+
+				.callout {
+
+					.callout__icon {
+						background-position: center;
+						background-repeat: no-repeat;
+						background-size: 24px;
+						height: 24px;
+						width: 24px;
+
+						svg {
+							margin: 2px;
+							opacity: 0;
+						}
+
+					}
+
+					.information-icon {
+						background-image: var(--icon-info-magenta);
+					}
+
+					.checkbox-marked-circle-icon {
+						background-image: var(--icon-success-success);
+					}
+
+					.alert-icon {
+						background-image: var(--icon-warning-warning);
+					}
+
+					.alert-decagram-icon {
+						background-image: var(--icon-danger-danger);
+					}
+				}
+			}
+
+			.table-wrapper {
+
+				.table-settings {
+					opacity: 1;
+					right: 0;
+					top: 1rem;
+
+					.button-vue {
+
+						&:hover:not(:disabled) {
+							@include color-icon;
+						}
+
+						.table-cog-icon {
+							background-image: var(--icon-table-settings-dark);
+							background-position: center;
+							background-repeat: no-repeat;
+							background-size: 24px;
+							height: 24px;
+							width: 24px;
+
+							svg {
+								display: none;
+							}
+						}
+
+					}
+				}
+
+				th, td:last-child {
+
+					.action-item {
+						opacity: 1;
+					}
+				}
+
+			}
+		}
+
+		.v-popper__popper {
+
+			.v-popper__inner {
+				padding: 0.5rem;
+			}
+
+			svg {
+				display: none;
+			}
+
+			.material-design-icon {
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 24px;
+			}
+
+			.format-header1-icon {
+				background-image: var(--icon-h1-dark);
+			}
+
+			.format-header2-icon {
+				background-image: var(--icon-h2-dark);
+			}
+
+			.format-header3-icon {
+				background-image: var(--icon-h3-dark);
+			}
+
+			.format-header4-icon {
+				background-image: var(--icon-h4-dark);
+			}
+
+			.format-header5-icon {
+				background-image: var(--icon-h5-dark);
+			}
+
+			.format-header6-icon {
+				background-image: var(--icon-h6-dark);
+			}
+
+			.information-icon {
+				background-image: var(--icon-callout-dark);
+			}
+
+			.checkbox-marked-circle-icon {
+				background-image: var(--icon-success-dark);
+			}
+
+			.alert-icon {
+				background-image: var(--icon-alert-dark);
+			}
+
+			.alert-decagram-icon {
+				background-image: var(--icon-warning-dark);
+			}
+		}
+	}
+}
+
+
+
+.v-popper__popper {
+
+	.v-popper__inner {
+		padding: 0.5rem;
+	}
+
+	.material-design-icon {
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 24px;
+
+		&.delete-icon {
+			background-image: var(--icon-delete-dark);
+
+			svg {
+				display: none;
+			}
+		}
+	}
+}

css/nmcstyle.scss

@@ -46,6 +46,7 @@
 @import 'apps/sharing.scss';
 @import 'apps/viewer.scss';
 @import 'apps/media.scss';
+@import 'apps/rich-workspace.scss';
 
 /* v25 override */
 @import 'v25/ncappnavigation.scss';