From f4f69d4eaaf27085989f5a76b8fa6820bff90914 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sat, 12 Dec 2020 00:38:51 +0100 Subject: [PATCH] Nest ultrawidify classes inside a css class that guarantees reset of global css --- src/common/components/ActionAlt.vue | 153 +++--- src/common/components/Icon.vue | 10 +- src/common/components/JsonEditor/json.scss | 44 +- src/common/components/QsElement.vue | 58 ++- src/common/components/ShortcutButton.vue | 14 +- src/csui/LoggerUi.vue | 242 ++++----- src/csui/NotificationUi.vue | 2 +- src/ext/lib/uwui/UI.js | 2 +- src/ext/uw-ui.js | 1 + src/options/options.html | 2 +- src/popup/popup.html | 2 +- src/res/css/common.scss | 579 +++++++++++---------- src/res/css/flex.scss | 84 +-- src/res/css/form.scss | 3 + 14 files changed, 606 insertions(+), 590 deletions(-) diff --git a/src/common/components/ActionAlt.vue b/src/common/components/ActionAlt.vue index 5964ac2..da044c2 100644 --- a/src/common/components/ActionAlt.vue +++ b/src/common/components/ActionAlt.vue @@ -151,98 +151,99 @@ export default { diff --git a/src/common/components/Icon.vue b/src/common/components/Icon.vue index 2055033..fd8006f 100644 --- a/src/common/components/Icon.vue +++ b/src/common/components/Icon.vue @@ -25,9 +25,11 @@ export default { } - diff --git a/src/common/components/JsonEditor/json.scss b/src/common/components/JsonEditor/json.scss index 216e47b..60fa7b1 100644 --- a/src/common/components/JsonEditor/json.scss +++ b/src/common/components/JsonEditor/json.scss @@ -1,23 +1,25 @@ -.json-level-indent { - padding-left: 2em !important; - font-family: 'Overpass Mono', monospace; -} -.item-key { - color: rgb(255, 196, 148); -} -.item-key-boolean-false { - color: rgb(207, 149, 101) -} +.uw-ultrawidify-container-root { + .json-level-indent { + padding-left: 2em !important; + font-family: 'Overpass Mono', monospace; + } + .item-key { + color: rgb(255, 196, 148); + } + .item-key-boolean-false { + color: rgb(207, 149, 101) + } -.json-value-boolean-true { - color: rgb(150, 240, 198); -} -.json-value-boolean-false { - color: rgb(241, 21, 21); -} -.json-value-number { - color: rgb(121, 121, 238); -} -.json-value-string { - color: rgb(226, 175, 7); + .json-value-boolean-true { + color: rgb(150, 240, 198); + } + .json-value-boolean-false { + color: rgb(241, 21, 21); + } + .json-value-number { + color: rgb(121, 121, 238); + } + .json-value-string { + color: rgb(226, 175, 7); + } } diff --git a/src/common/components/QsElement.vue b/src/common/components/QsElement.vue index c98ec27..8345d44 100644 --- a/src/common/components/QsElement.vue +++ b/src/common/components/QsElement.vue @@ -21,33 +21,35 @@ export default { } - diff --git a/src/common/components/ShortcutButton.vue b/src/common/components/ShortcutButton.vue index 569e8f1..dc4f99d 100644 --- a/src/common/components/ShortcutButton.vue +++ b/src/common/components/ShortcutButton.vue @@ -20,11 +20,13 @@ export default { } - diff --git a/src/csui/LoggerUi.vue b/src/csui/LoggerUi.vue index d99a454..5c332de 100644 --- a/src/csui/LoggerUi.vue +++ b/src/csui/LoggerUi.vue @@ -306,134 +306,134 @@ export default { @import '../res/css/font/overpass-mono.css'; @import '../res/css/common.scss'; +.uw-ultrawidify-container-root { + .root-window { + position: fixed !important; + top: 5vh !important; + left: 5vw !important; + width: 90vw !important; + height: 90vh !important; + z-index: 999999 !important; + background-color: rgba( $page-background, 0.9) !important; + color: #f1f1f1 !important; + font-size: 14px !important; -.root-window { - position: fixed !important; - top: 5vh !important; - left: 5vw !important; - width: 90vw !important; - height: 90vh !important; - z-index: 999999 !important; - background-color: rgba( $page-background, 0.9) !important; - color: #f1f1f1 !important; - font-size: 14px !important; + box-sizing: border-box !important; + } - box-sizing: border-box !important; -} + div { + font-family: 'Overpass'; + } -div { - font-family: 'Overpass'; -} - -h1, h2 { - font-family: 'Overpass Thin'; -} -h1 { - font-size: 4em; -} -h2 { - font-size: 2em; -} - -.header { + h1, h2 { + font-family: 'Overpass Thin'; + } h1 { - margin-bottom: -0.20em; - margin-top: 0.0em; + font-size: 4em; } - .header-top, .header-bottom { - padding-left: 16px; - padding-right: 16px; + h2 { + font-size: 2em; } - .header-top { - background-color: $popup-header-background !important; + + .header { + h1 { + margin-bottom: -0.20em; + margin-top: 0.0em; + } + .header-top, .header-bottom { + padding-left: 16px; + padding-right: 16px; + } + .header-top { + background-color: $popup-header-background !important; + } + .header-bottom { + font-size: 1.75em; + } } - .header-bottom { - font-size: 1.75em; + .content { + box-sizing: border-box; + padding: 8px 32px; + width: 100%; + } + .settings-panel { + box-sizing: border-box; + padding-right: 8px; + flex-grow: 2 !important; + min-width: 30% !important; + flex-shrink: 0 !important; + height: inherit !important; + } + .results-panel { + box-sizing: border-box; + padding-left: 8px; + max-width: 70% !important; + flex-grow: 5 !important; + flex-shrink: 0 !important; + height: inherit !important; + } + + .scrollable { + overflow: auto; + } + + .overflow-hidden { + overflow: hidden; + } + + pre { + font-family: 'Overpass Mono'; + } + + .m-025em { + margin: 0.25em; + } + + .p-t-025em { + padding-top: 0.25em; + } + + .button { + display: inline-flex; + align-items: center; + justify-items: center; + padding-left: 2em; + padding-right: 2em; + } + + .button-primary { + background-color: $primary; + color: #fff; + } + + .button-big { + font-size: 1.5em; + padding: 1.75em 3.25em; + } + + .button-bar { + font-size: 1.25em; + padding: 0.25em 1.25em; + margin-left: 0.25em; + } + + .button-header { + font-size: 2em; + padding-top: 0.1em; + padding-left: 1em; + padding-right: 1em; + } + + .jsonbg { + background-color: #131313; + } + .jsonbg-error { + background-color: #884420; + } + + .log-config-margin { + margin-top: 3em; + margin-bottom: 3em; } } -.content { - box-sizing: border-box; - padding: 8px 32px; - width: 100%; -} -.settings-panel { - box-sizing: border-box; - padding-right: 8px; - flex-grow: 2 !important; - min-width: 30% !important; - flex-shrink: 0 !important; - height: inherit !important; -} -.results-panel { - box-sizing: border-box; - padding-left: 8px; - max-width: 70% !important; - flex-grow: 5 !important; - flex-shrink: 0 !important; - height: inherit !important; -} - -.scrollable { - overflow: auto; -} - -.overflow-hidden { - overflow: hidden; -} - -pre { - font-family: 'Overpass Mono'; -} - -.m-025em { - margin: 0.25em; -} - -.p-t-025em { - padding-top: 0.25em; -} - -.button { - display: inline-flex; - align-items: center; - justify-items: center; - padding-left: 2em; - padding-right: 2em; -} - -.button-primary { - background-color: $primary; - color: #fff; -} - -.button-big { - font-size: 1.5em; - padding: 1.75em 3.25em; -} - -.button-bar { - font-size: 1.25em; - padding: 0.25em 1.25em; - margin-left: 0.25em; -} - -.button-header { - font-size: 2em; - padding-top: 0.1em; - padding-left: 1em; - padding-right: 1em; -} - -.jsonbg { - background-color: #131313; -} -.jsonbg-error { - background-color: #884420; -} - -.log-config-margin { - margin-top: 3em; - margin-bottom: 3em; -} - diff --git a/src/csui/NotificationUi.vue b/src/csui/NotificationUi.vue index d72b24e..5d5bfcc 100644 --- a/src/csui/NotificationUi.vue +++ b/src/csui/NotificationUi.vue @@ -145,7 +145,7 @@ export default { @import '../res/css/font/overpass-mono.css'; @import '../res/css/common.scss'; -.uw-ultrawidify-container { +.uw-ultrawidify-container-root { position: relative; width: 100%; height: 100%; diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index b75d0b7..53059d6 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -44,7 +44,7 @@ class UI { rootDiv.setAttribute('style', `position: ${this.uiConfig.style?.position ?? 'absolute'}; width: ${this.uiConfig.style?.width ?? '100%'}; height: ${this.uiConfig.style?.height ?? '100%'}; top: ${this.uiConfig.style?.height ?? '0'}; ${this.uiConfig.additionalStyle ?? ''}`); rootDiv.setAttribute('id', uwid); - + rootDiv.classList.add('uw-ultrawidify-container-root'); if (this.uiConfig?.parentElement) { this.uiConfig.parentElement.appendChild(rootDiv); diff --git a/src/ext/uw-ui.js b/src/ext/uw-ui.js index 2d420b4..6e98033 100644 --- a/src/ext/uw-ui.js +++ b/src/ext/uw-ui.js @@ -182,6 +182,7 @@ class UwUi { const rootDiv = document.createElement('div'); rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;"); rootDiv.setAttribute("id", uwid); + rootDiv.classList.add('uw-ultrawidify-container-root'); document.body.appendChild(rootDiv); diff --git a/src/options/options.html b/src/options/options.html index 58247d6..3d27629 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -8,7 +8,7 @@ <% } %> - +
diff --git a/src/popup/popup.html b/src/popup/popup.html index 1a38558..768c503 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -9,7 +9,7 @@ <% } %> - +
diff --git a/src/res/css/common.scss b/src/res/css/common.scss index 8eb55da..97da471 100644 --- a/src/res/css/common.scss +++ b/src/res/css/common.scss @@ -17,7 +17,7 @@ body { } /* STANDARD WIDTHS AND HEIGHTS */ - +.uw-ultrawidify-container-root { .w100 { width: 100%; } @@ -99,292 +99,293 @@ body { .description { color: $text-dim; font-size: 1rem; -} - -.label { - padding-top: 1.5rem; - font-size: 1.5rem; - font-variant: small-caps; - font-weight: 600; -} - -.label-secondary { - font-weight: 600; -} - -.button-box { - padding-top: 0.69rem; - padding-bottom: 0.69rem; -} - -.indent { - padding-left: 4.2rem; -} - -.row-padding { - padding-top: 0.69rem; - padding-bottom: 0.69rem; -} - -a, a:visited { - color: $primary-color; -} -a:hover { - color: lighten($primary-color, 10%); -} - -/* INPUT FORMATTING */ -input[type="number"], input[type="text"], input { - outline: none; - background-color: $input-background; - color: $text-normal; - padding: 0.1rem; - padding-top: 0.2rem; - padding-bottom: 0.1rem; - margin-left: 1rem; - border: 1px solid $input-border; -} - -input:disabled { - background: #444444; - color: darken($text-normal, 50%); -} - -/* ELEMENT POSITIONING */ - -.row { - display: block; - margin-top: 20px; - margin-bottom: 10px; -} - -.button-row { - display: block; - margin-top: 5px; - margin-bottom: 10px; -} - -.float-left { - float: left; -} -.float-right { - float: right; -} - -.inline-block { - display: inline-block; -} - -.block { - display: block; -} - -.hidden { - display: none !important; -} - -.hide { - display: none !important; -} - - - -/* TEXT FORMATTING (no colors) */ - -small { - font-size: 0.75em; - font-weight: 200; -} - -.small { - font-size: 0.75em; - font-weight: 200; -} - -.medium-small { - font-size: 0.85em; - font-weight: 200; -} - -.smallcaps{ - font-variant: small-caps; -} - -.center{ - text-align: center; - width: 100%; -} -.text-center { - text-align: center; -} - - -.invalid-input { - border: 1px solid #720 !important; - background-color: #410 !important; -} - -.button { - /*display: inline-block;*/ - // padding-top: 8px; - // padding-bottom: 3px; - //padding-left: 5px; - //padding-right: 5px; - border: 1px solid rgb(39, 39, 39); - margin-top: 3px; - margin-bottom: 3px; - color: $text-dim; - text-align: center; - cursor: pointer; - user-select: none;; -} - - -.selected, .setting-selected { - color: $selected-color !important; - background-color: $background-selected !important; -} - -.selected-tab { - color: $selected-color; -} - -.setting-selected { - border: 1px solid shade($selected-color, 25%); -} - -.button:hover { - color: lighten($selected-color, 10%); - background-color: lighten($background-selected, 10%); -} - -.disabled { - pointer-events: none; - /* color: #666; */ - filter: contrast(50%) brightness(40%) grayscale(100%); -} - -.disabled-button { - color: #666 !important; - cursor: not-allowed !important; -} - -.disabled-button:hover { - color: #777 !important; - background-color: #222 !important; -} - -/* BROWSER-SPECIFIC DISABLE */ -.disabled-edge { - pointer-events: none !important; - filter: contrast(50%) brightness(40%) grayscale(100%) !important; - content: "NOT SUPPORTED IN THIS BROWSER"; -} -.disabled-edge::after { - background-color: #333272; - color: #d8d9e6; - display: inline-block; - font-size: .75em; - font-variant: small-caps; - padding-left: 5px; - padding-right: 5px; - margin-left: 10px; -} - - - - -/** misc **/ - -.warning-color { - color: #d6ba4a; -} - -.warning, .warning-lite { - color: #d6ba4a; - padding-left: 35px; - float: right; -} - -.warning::before, .warning-lite::before { - content: "⚠ "; - display: inline-block; -} -.warning::before { - font-weight: bold; - font-size: 2.5em; - margin-left: -35px; - padding-right: 10px; -} - -.info { - color: $info-color; - padding-left: 35px; - float: right; -} - -.info::before { - content: "ⓘ"; - display: inline-block; - font-weight: bold; - margin-left: -35px; - padding-right: 10px; -} - -.new { - color: #fff; -} - -.new::after { - content: "ⓘ"; - color: $info-color !important; - display: inline-block; - font-weight: bold; - padding-right: 10px; -} - -.experimental::after { - // content: "Experimental"; - content: "Ⓔ"; - color: #ffde12; - // background-color: #1f1f1f; - display: inline-block; - font-size: .75em; - font-variant: small-caps; - padding-left: 5px; - padding-right: 5px; - margin-left: 10px; - margin-top: -4px; -} -.experimental:hover::after { - content: "Ⓔ Experimental"; - // content: ""; - color: #ffde12; - // background-color: #1f1f1f; - display: inline-block; - font-size: .75em; - font-variant: small-caps; - padding-left: 5px; - padding-right: 5px; - margin-left: 10px; - margin-top: -4px; -} - -.sticky-bottom { - width: 100%; - position: sticky; - // position: fixed; - bottom: 0px; - background-color: rgba($background-primary, 0.7); -} - -.rtl { - direction: rtl; -} - -.ltr { - direction: ltr; -} -.monospace { - font-family: 'Overpass Mono'; + } + + .label { + padding-top: 1.5rem; + font-size: 1.5rem; + font-variant: small-caps; + font-weight: 600; + } + + .label-secondary { + font-weight: 600; + } + + .button-box { + padding-top: 0.69rem; + padding-bottom: 0.69rem; + } + + .indent { + padding-left: 4.2rem; + } + + .row-padding { + padding-top: 0.69rem; + padding-bottom: 0.69rem; + } + + a, a:visited { + color: $primary-color; + } + a:hover { + color: lighten($primary-color, 10%); + } + + /* INPUT FORMATTING */ + input[type="number"], input[type="text"], input { + outline: none; + background-color: $input-background; + color: $text-normal; + padding: 0.1rem; + padding-top: 0.2rem; + padding-bottom: 0.1rem; + margin-left: 1rem; + border: 1px solid $input-border; + } + + input:disabled { + background: #444444; + color: darken($text-normal, 50%); + } + + /* ELEMENT POSITIONING */ + + .row { + display: block; + margin-top: 20px; + margin-bottom: 10px; + } + + .button-row { + display: block; + margin-top: 5px; + margin-bottom: 10px; + } + + .float-left { + float: left; + } + .float-right { + float: right; + } + + .inline-block { + display: inline-block; + } + + .block { + display: block; + } + + .hidden { + display: none !important; + } + + .hide { + display: none !important; + } + + + + /* TEXT FORMATTING (no colors) */ + + small { + font-size: 0.75em; + font-weight: 200; + } + + .small { + font-size: 0.75em; + font-weight: 200; + } + + .medium-small { + font-size: 0.85em; + font-weight: 200; + } + + .smallcaps{ + font-variant: small-caps; + } + + .center{ + text-align: center; + width: 100%; + } + .text-center { + text-align: center; + } + + + .invalid-input { + border: 1px solid #720 !important; + background-color: #410 !important; + } + + .button { + /*display: inline-block;*/ + // padding-top: 8px; + // padding-bottom: 3px; + //padding-left: 5px; + //padding-right: 5px; + border: 1px solid rgb(39, 39, 39); + margin-top: 3px; + margin-bottom: 3px; + color: $text-dim; + text-align: center; + cursor: pointer; + user-select: none;; + } + + + .selected, .setting-selected { + color: $selected-color !important; + background-color: $background-selected !important; + } + + .selected-tab { + color: $selected-color; + } + + .setting-selected { + border: 1px solid shade($selected-color, 25%); + } + + .button:hover { + color: lighten($selected-color, 10%); + background-color: lighten($background-selected, 10%); + } + + .disabled { + pointer-events: none; + /* color: #666; */ + filter: contrast(50%) brightness(40%) grayscale(100%); + } + + .disabled-button { + color: #666 !important; + cursor: not-allowed !important; + } + + .disabled-button:hover { + color: #777 !important; + background-color: #222 !important; + } + + /* BROWSER-SPECIFIC DISABLE */ + .disabled-edge { + pointer-events: none !important; + filter: contrast(50%) brightness(40%) grayscale(100%) !important; + content: "NOT SUPPORTED IN THIS BROWSER"; + } + .disabled-edge::after { + background-color: #333272; + color: #d8d9e6; + display: inline-block; + font-size: .75em; + font-variant: small-caps; + padding-left: 5px; + padding-right: 5px; + margin-left: 10px; + } + + + + + /** misc **/ + + .warning-color { + color: #d6ba4a; + } + + .warning, .warning-lite { + color: #d6ba4a; + padding-left: 35px; + float: right; + } + + .warning::before, .warning-lite::before { + content: "⚠ "; + display: inline-block; + } + .warning::before { + font-weight: bold; + font-size: 2.5em; + margin-left: -35px; + padding-right: 10px; + } + + .info { + color: $info-color; + padding-left: 35px; + float: right; + } + + .info::before { + content: "ⓘ"; + display: inline-block; + font-weight: bold; + margin-left: -35px; + padding-right: 10px; + } + + .new { + color: #fff; + } + + .new::after { + content: "ⓘ"; + color: $info-color !important; + display: inline-block; + font-weight: bold; + padding-right: 10px; + } + + .experimental::after { + // content: "Experimental"; + content: "Ⓔ"; + color: #ffde12; + // background-color: #1f1f1f; + display: inline-block; + font-size: .75em; + font-variant: small-caps; + padding-left: 5px; + padding-right: 5px; + margin-left: 10px; + margin-top: -4px; + } + .experimental:hover::after { + content: "Ⓔ Experimental"; + // content: ""; + color: #ffde12; + // background-color: #1f1f1f; + display: inline-block; + font-size: .75em; + font-variant: small-caps; + padding-left: 5px; + padding-right: 5px; + margin-left: 10px; + margin-top: -4px; + } + + .sticky-bottom { + width: 100%; + position: sticky; + // position: fixed; + bottom: 0px; + background-color: rgba($background-primary, 0.7); + } + + .rtl { + direction: rtl; + } + + .ltr { + direction: ltr; + } + .monospace { + font-family: 'Overpass Mono'; + } } diff --git a/src/res/css/flex.scss b/src/res/css/flex.scss index 95c3f7a..701fa00 100644 --- a/src/res/css/flex.scss +++ b/src/res/css/flex.scss @@ -1,51 +1,53 @@ -.flex { - display: flex; -} +.uw-ultrawidify-container-root { + .flex { + display: flex; + } -.flex-row { - flex-direction: row; -} + .flex-row { + flex-direction: row; + } -.flex-column { - flex-direction: column; -} + .flex-column { + flex-direction: column; + } -.flex-auto { - flex: 1 1 auto; -} + .flex-auto { + flex: 1 1 auto; + } -.flex-grow { - flex-grow: 1; -} -.flex-nogrow { - flex-grow: 0; -} -.flex-shrink { - flex-shrink: 1; -} -.flex-noshrink { - flex-shrink: 0; -} + .flex-grow { + flex-grow: 1; + } + .flex-nogrow { + flex-grow: 0; + } + .flex-shrink { + flex-shrink: 1; + } + .flex-noshrink { + flex-shrink: 0; + } -.flex-wrap { - flex-wrap: wrap; -} + .flex-wrap { + flex-wrap: wrap; + } -.flex-center { - align-content: center; - align-items: center; -} + .flex-center { + align-content: center; + align-items: center; + } -.flex-end { - justify-content: flex-end; -} + .flex-end { + justify-content: flex-end; + } -.flex-cross-center { - justify-content: center; - justify-items: center; -} + .flex-cross-center { + justify-content: center; + justify-items: center; + } -.flex-self-center { - align-self: center; -} \ No newline at end of file + .flex-self-center { + align-self: center; + } +} diff --git a/src/res/css/form.scss b/src/res/css/form.scss index e69de29..268322c 100644 --- a/src/res/css/form.scss +++ b/src/res/css/form.scss @@ -0,0 +1,3 @@ +.uw-ultrawidify-container-root { + /* todo: any form CSS must be nested under this element */ +}