@tilde-nlp/ngx-translate 1.0.0

package/src/styles/styles.scss

@@ -0,0 +1,377 @@
+@use "@tilde-nlp/ngx-common/styles/tilde-style";
+@use "@tilde-nlp/ngx-common/styles/typography";
+
+@import '@tilde-nlp/ngx-common/styles/mixins/tld-all-mixins.mixin.scss';
+@import "colors";
+@import "fonts";
+@import "mixin/tld-translate-colors";
+@import "translator-borders";
+
+@include tld-translate-colors($primary, $accent);
+@include tld-all-mixins();
+
+html,
+body {
+  height: 100%;
+  font-family: $primary-font;
+}
+
+a {
+  font-weight: 500;
+  color: $link-color;
+}
+
+.description-text {
+  color: $description-text;
+  font-size: 16px;
+  text-align: justify;
+
+  .description-smaller {
+    font-size: 0.8em;
+  }
+
+  .description-small {
+    font-size: 12px;
+  }
+}
+
+.tld-translate-target-footer {
+  min-height: 84px;
+  height: 84px;
+  border-top: 1px solid var(--base-70);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tld-translate {
+  margin: 0;
+  font-size: 16px;
+
+  min-height: 530px;
+  min-width: 320px;
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  :not(.textarea-highlight-background) ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  :not(.textarea-highlight-background)::-webkit-scrollbar-thumb {
+    background: #e8eaec;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+
+  .textarea-with-background .textarea-highlight-background {
+    ::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 6px transparent;
+      box-shadow: inset 0 0 6px transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: transparent;
+      -webkit-box-shadow: inset 0 0 5px transparent;
+      box-shadow: inset 0 0 5px transparent;
+    }
+
+    ::-webkit-scrollbar-thumb:window-inactive {
+      background: transparent;
+    }
+  }
+
+  &:not(.tld-translate-tablet) {
+    max-width: 100vw;
+    max-height: 100%;
+    min-height: 400px;
+  }
+
+  &.tld-translate-mobile {
+    max-width: 100vw;
+    max-height: 576px;
+    height: 576px;
+    min-height: 576px;
+    max-width: 100vw;
+    width: 100vw;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  &.tld-translate-multiple-files-active {
+    max-height: initial !important;
+  }
+
+  * {
+    max-width: 100%;
+  }
+
+  .gramcheck-active {
+    .tld-invalid-phrase {
+      text-decoration-thickness: 1px;
+      text-decoration: underline;
+      text-decoration-style: wavy;
+      text-decoration-color: $incorrect-phrase-color;
+    }
+  }
+
+  .highlight-active {
+    .tld-word.hovered:not(.tld-invalid-phrase) {
+      background-color: $word-highlight;
+    }
+
+    .tld-sentence {
+      &.selected-sentence {
+        background-color: $selected-sentence-background;
+      }
+
+      &.hovered {
+        background-color: $sentence-highlight;
+      }
+    }
+  }
+}
+
+.auto-vertical-overflow {
+  overflow-y: auto !important;
+}
+
+.tld-translate-mobile {
+  .source-wrapper {
+    height: 320px;
+    min-height: 320px !important;
+    overflow-x: hidden;
+  }
+
+  .target-wrapper {
+    height: 200px;
+  }
+
+  .tld-translate-target-footer {
+    min-height: 50px;
+  }
+
+  .mat-button {
+    padding: 0 !important;
+    text-align: left;
+    width: 100%;
+  }
+
+  .dictionary-area {
+    padding: 0 0.5em !important;
+  }
+}
+
+.tld-translate-tablet {
+  min-height: 566px;
+
+  .tld-translate-target-footer {
+    min-height: 50px;
+  }
+
+  .source-wrapper {
+    height: 310px;
+    min-height: 310px !important;
+  }
+
+  .target-wrapper {
+    height: 200px;
+    min-height: 200px;
+  }
+}
+
+.tld-translate-web {
+  box-sizing: content-box;
+  font-family: $primary-font;
+  font-size: 14px;
+
+  .url {
+    font-family: $primary-font;
+  }
+}
+
+.collection-name-form-field {
+  display: block;
+  width: 100%;
+}
+
+mat-dialog-container {
+  position: relative;
+}
+
+.tld-translate-switcher-container-mobile.tld-switcher-with-collections {
+  button {
+    padding: 0 !important;
+  }
+}
+
+.mat-input-element {
+  caret-color: black;
+}
+
+.tld-collection-menu {
+  min-width: 320px !important;
+  max-width: 480px !important;
+  width: 480px !important;
+  position: relative;
+  max-height: 800px;
+
+  tld-close-button {
+    position: absolute;
+    right: 0;
+  }
+
+  .mat-menu-content {
+    padding: 0 !important;
+  }
+}
+
+.tld-word,
+.multiple-word-wrapper {
+  display: inline-block;
+}
+
+tld-highlight-tree div,
+.textarea-with-background textarea,
+.textarea-highlight-background,
+.asr-result-wrapper {
+  outline: none;
+  border: none;
+  font-size: 1em;
+  background-color: transparent;
+  font-family: $primary-font;
+  line-height: 1.5;
+  word-break: break-word;
+  letter-spacing: 0.5px;
+}
+
+.grammar-check-menu {
+  padding: 0.5em;
+  max-width: unset !important;
+
+  .title {
+    font-style: italic;
+    font-size: 1em;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+[source-language="ar" i] .textarea-with-background,
+[source-language="fa" i] .textarea-with-background,
+[source-language="ur" i] .textarea-with-background,
+[source-language="he" i] .textarea-with-background,
+[source-language="yi" i] .textarea-with-background,
+[source-language="ar" i] .source-text,
+[source-language="fa" i] .source-text,
+[source-language="ur" i] .source-text,
+[source-language="he" i] .source-text,
+[source-language="yi" i] .source-text,
+[target-language="ar" i] .translated-source,
+[target-language="fa" i] .translated-source,
+[target-language="ur" i] .translated-source,
+[target-language="he" i] .translated-source,
+[target-language="yi" i] .translated-source {
+  direction: rtl;
+  text-align: right;
+}
+
+#docPreviewContent span {
+  display: inline-block;
+}
+
+.btn-as-link {
+  background: transparent;
+  text-decoration: underline;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-family: $primary-font;
+  color: $primary;
+  font-size: 16px;
+  line-height: 36px;
+}
+
+a.no-underline,
+a.no-underline:hover {
+  text-decoration: none;
+}
+
+h1.term-window-title {
+  margin: 0;
+  margin-bottom: 0.5em;
+  font-weight: 500;
+  font-size: 1.25em;
+}
+
+p.term-window-description {
+  margin: 0;
+}
+
+/* For language menu. With flex layout it would be lt-md*/
+@media only screen and (max-width: 959px) {
+
+  div.language-menu-overlay,
+  div.language-menu-overlay .language-menu {
+    $width: 100%;
+    min-width: $width;
+    width: $width;
+    max-width: $width;
+    max-height: 330px;
+  }
+}
+
+/*Overflow must be hidden because textareas oferflow is scrollable*/
+tld-translate-text .source-container {
+  overflow: hidden !important;
+}
+
+.system-picker-button,
+.system-picker-button button.mat-button {
+  display: block !important;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+
+  +.system-picker-button {
+    margin-top: 0.75rem;
+    text-align: left;
+  }
+
+  .system-picker-button:not(.active),
+  .system-picker-button button.mat-button:not(.active) {
+    color: var(--base-30);
+  }
+
+  .filter-highlight {
+    font-weight: 600;
+  }
+
+  &.opened,
+  &.active {
+    color: var(--accent);
+  }
+
+  &.active {
+    font-weight: 600;
+  }
+
+  &.active::after {
+    content: '✓';
+    margin-left: 3rem;
+  }
+
+  &:hover .mat-button-focus-overlay {
+    opacity: 0 !important;
+  }
+}
+
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 0.95em 0 0.60em 0 !important;
+  border-top: 0;
+}

package/src/styles/translator-borders.scss

@@ -0,0 +1,28 @@
+@import "mixin/border-default";
+
+$translatorBorderWidth: 2px;
+.tld-translate-switcher-wrapper {
+  @include border-direction-default("bottom", $translatorBorderWidth);
+}
+.tld-translate-wrapper {
+  @include border-default($translatorBorderWidth);
+}
+
+.tld-translate {
+  &:not(.tld-translate-tablet, .tld-translate-mobile) {
+    .tld-translate-wrapper {
+      border-radius: 16px;
+    }
+
+    .source-wrapper {
+      @include border-direction-default("right", $translatorBorderWidth);
+    }
+  }
+
+  &.tld-translate-tablet,
+  &.tld-translate-mobile {
+    .source-wrapper {
+      @include border-direction-default("bottom", $translatorBorderWidth);
+    }
+  }
+}