diff --git a/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss b/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss index 04d2337581..373990a71c 100644 --- a/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss +++ b/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss @@ -2,13 +2,23 @@ example-viewer { .example-viewer-wrapper { background-color: #fff; margin: 4px; + .stark-pretty-print { + pre[class*="language-"] { + padding: 1em; + margin: 0; + border-radius: 0; + } + } + .mat-tab-body-wrapper { + border-bottom: 1px solid #555; + } } .example-viewer-title { color: #fff; background-color: mat-color(map-get($base-theme, primary-palette), 700); } .mat-tab-body { - background-color: mat-color($mat-light-theme-background, card); + background-color: #272822; } .example-viewer-body { background-color: mat-color($mat-light-theme-background, card); @@ -22,80 +32,4 @@ example-viewer { border-bottom: 1px solid mat-color($mat-light-theme-foreground, divider); overflow-x: scroll; } - - .hljs { - display: block; - overflow-x: auto; - padding: 1em; - background: #fafafa; - color: #37474f; - -webkit-font-smoothing: antialiased; - text-size-adjust: 100%; - font: 300 100%/1 Roboto Mono, monospace; - font-size: 14px; - } - .hljs > *::selection, - .hljs-section { - background-color: #d6edea; - } - .hljs-comment { - color: #b0bec5; - font-style: italic; - } - .hljs-tag, - .hljs-selector-tag, - .hljs-regexp, - .hljs-meta { - color: #9c27b0; - } - .hljs-string, - .hljs-subst { - color: #0d904f; - } - .hljs-number, - .hljs-variable, - .hljs-template-variable { - color: #80cbc4; - } - .hljs-name, - .hljs-keyword, - .hljs-type, - .hljs-attribute { - color: #3b78e7; - } - .hljs-title, - .hljs-function > .hljs-title, - .hljs-symbol, - .hljs-bullet, - .hljs-built_in, - .hljs-builtin-name, - .hljs-link { - color: #6182b8; - } - .hljs-params { - color: #d81b60; - } - .hljs-addition { - color: #3b78e7; - display: inline-block; - width: 100%; - } - .hljs-deletion { - color: #e53935; - display: inline-block; - width: 100%; - } - .hljs-selector-id, - .hljs-selector-class { - color: #8796b0; - } - .hljs-emphasis { - font-style: italic; - } - .hljs-strong { - font-weight: bold; - } - .hljs-link { - text-decoration: underline; - } } diff --git a/showcase/src/app/shared/example-viewer/example-viewer.component.html b/showcase/src/app/shared/example-viewer/example-viewer.component.html index 06dc04eef4..e778951bc9 100644 --- a/showcase/src/app/shared/example-viewer/example-viewer.component.html +++ b/showcase/src/app/shared/example-viewer/example-viewer.component.html @@ -18,7 +18,6 @@ -