Nest ultrawidify classes inside a css class that guarantees reset of global css

src/common/components/ActionAlt.vue

@@ -151,13 +151,14 @@ export default {
 <style lang="scss" scoped>
 @import '../../res/css/colors.scss';
 
-.action {
+.uw-ultrawidify-container-root {
+  .action {
     cursor: pointer;
     position: relative;
     box-sizing: border-box;
-}
+  }
 
-.action .command-details {
+  .action .command-details {
     height: 0px;
     max-height: 0px;
     transition: max-height 0.5s ease;
@@ -167,82 +168,82 @@ export default {
     top: 0;
     right: 0;
     width: 50%;
-}
+  }
 
-.action:hover .command-details {
+  .action:hover .command-details {
     height: auto;
     max-height: 200px;
     transition: max-height 0.5s ease;
-}
+  }
 
-.command-details {
+  .command-details {
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
-}
+  }
 
-.action-name-cmd-container, .p1rem {
+  .action-name-cmd-container, .p1rem {
     padding: 1rem;
-}
+  }
 
-.cd-pad {
+  .cd-pad {
     padding: 0.5em;
-}
+  }
 
-.action-name {
+  .action-name {
     font-size: 1.5rem;
     font-weight: 300;
     color: $text-normal;
     width: 50%;
-}
+  }
 
-.action-name:hover, .action:hover .action-name {
+  .action-name:hover, .action:hover .action-name {
     color: lighten($primary-color, 20%);
-}
+  }
 
-.red {
+  .red {
     color: $primary-color !important;
-}
+  }
 
-.cmd-container {
+  .cmd-container {
     width: 13.37rem;
-}
+  }
 
-.cmdlist {
+  .cmdlist {
     font-family: 'Overpass Mono';
     font-size: 0.9rem;
     color: $text-dim;
-}
+  }
 
-.bold {
+  .bold {
     font-weight: 600;
-}
+  }
 
-.scope-scope {
+  .scope-scope {
     width: 5rem;
     text-align: right !important;
     color: $secondary-color;
-}
+  }
 
-.scope-visible {
+  .scope-visible {
     width: 7rem;
-}
+  }
 
-.scope-button-label {
+  .scope-button-label {
     width: 16rem;
-}
+  }
 
-.scope-row-label {
+  .scope-row-label {
     color: $text-dark;
-}
+  }
 
-.scope-row-highlight {
+  .scope-row-highlight {
     color: $text-normal;
-}
+  }
 
-.transparent {
+  .transparent {
     opacity: 0;
+  }
 }
-
 </style>

src/common/components/Icon.vue

@@ -25,9 +25,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.icon {
+.uw-ultrawidify-container-root {
+  .icon {
     margin-left: 0.25em;
     margin-right: 0.25em;
+  }
 }
 </style>

src/common/components/JsonEditor/json.scss

@@ -1,23 +1,25 @@
-.json-level-indent {
+.uw-ultrawidify-container-root {
+  .json-level-indent {
     padding-left: 2em !important;
     font-family: 'Overpass Mono', monospace;
-}
+  }
-.item-key {
+  .item-key {
     color: rgb(255, 196, 148);
-}
+  }
-.item-key-boolean-false {
+  .item-key-boolean-false {
     color: rgb(207, 149, 101)
-}
+  }
 
-.json-value-boolean-true {
+  .json-value-boolean-true {
     color: rgb(150, 240, 198);
-}
+  }
-.json-value-boolean-false {
+  .json-value-boolean-false {
     color: rgb(241, 21, 21);
-}
+  }
-.json-value-number {
+  .json-value-number {
     color: rgb(121, 121, 238);
-}
+  }
-.json-value-string {
+  .json-value-string {
     color:  rgb(226, 175, 7);
+  }
 }

src/common/components/QsElement.vue

@@ -21,33 +21,35 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.mt2px {
+.uw-ultrawidify-container-root {
+  .mt2px {
     margin-top: 7px;
-}
+  }
-.id {
+  .id {
     border: 1px solid #d00;
     background-color: rgba(216, 94, 24, 0.25)
-}
+  }
-.class {
+  .class {
     border: 1px solid #33d;
     background-color: rgba(69, 69, 255, 0.25)
-}
+  }
-.closeButton {
+  .closeButton {
     margin-top: 2px;
     margin-left: 4px;
     margin-right: 4px;
     font-size: 1.5em;
     color: #e00;
-}
+  }
-.closeButton:hover {
+  .closeButton:hover {
     cursor: pointer;
     color: #fa6;
-}
+  }
-.qsb {
+  .qsb {
     cursor:default;
     margin-left: 3px;
     margin-right: 3px;
     margin-bottom: 2px;
+  }
 }
 </style>

src/common/components/ShortcutButton.vue

@@ -20,11 +20,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.center-text {
+.uw-ultrawidify-container-root {
+  .center-text {
     text-align: center;
-}
+  }
-.dark {
+  .dark {
     opacity: 50%;
+  }
 }
 </style>

src/csui/LoggerUi.vue

@@ -306,8 +306,8 @@ export default {
 @import '../res/css/font/overpass-mono.css';
 @import '../res/css/common.scss';
 
-
+.uw-ultrawidify-container-root {
-.root-window {
+  .root-window {
     position: fixed !important;
     top: 5vh !important;
     left: 5vw !important;
@@ -319,23 +319,23 @@ export default {
     font-size: 14px !important;
 
     box-sizing: border-box !important;
-}
+  }
 
-div {
+  div {
     font-family: 'Overpass';
-}
+  }
 
-h1, h2 {
+  h1, h2 {
     font-family: 'Overpass Thin';
-}
+  }
-h1 {
+  h1 {
     font-size: 4em;
-}
+  }
-h2 {
+  h2 {
     font-size: 2em;
-}
+  }
 
-.header {
+  .header {
     h1 {
       margin-bottom: -0.20em;
       margin-top: 0.0em;
@@ -350,90 +350,90 @@ h2 {
     .header-bottom {
       font-size: 1.75em;
     }
-}
+  }
-.content {
+  .content {
     box-sizing: border-box;
     padding: 8px 32px;
     width: 100%;
-}
+  }
-.settings-panel {
+  .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 {
+  .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 {
+  .scrollable {
     overflow: auto;
-}
+  }
 
-.overflow-hidden {
+  .overflow-hidden {
     overflow: hidden;
-}
+  }
 
-pre {
+  pre {
     font-family: 'Overpass Mono';
-}
+  }
 
-.m-025em {
+  .m-025em {
     margin: 0.25em;
-}
+  }
 
-.p-t-025em {
+  .p-t-025em {
     padding-top: 0.25em;
-}
+  }
 
-.button {
+  .button {
     display: inline-flex;
     align-items: center;
     justify-items: center;
     padding-left: 2em;
     padding-right: 2em;
-}
+  }
 
-.button-primary {
+  .button-primary {
     background-color: $primary;
     color: #fff;
-}
+  }
 
-.button-big {
+  .button-big {
     font-size: 1.5em;
     padding: 1.75em 3.25em;
-}
+  }
 
-.button-bar {
+  .button-bar {
     font-size: 1.25em;
     padding: 0.25em 1.25em;
     margin-left: 0.25em;
-}
+  }
 
-.button-header {
+  .button-header {
     font-size: 2em;
     padding-top: 0.1em;
     padding-left: 1em;
     padding-right: 1em;
-}
+  }
 
-.jsonbg {
+  .jsonbg {
     background-color: #131313;
-}
+  }
-.jsonbg-error {
+  .jsonbg-error {
     background-color: #884420;
-}
+  }
 
-.log-config-margin {
+  .log-config-margin {
     margin-top: 3em;
     margin-bottom: 3em;
+  }
 }
-
 </style>

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%;

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);

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);
    

src/options/options.html

@@ -8,7 +8,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body>
+<body class="uw-ultrawidify-container-root">
   <div id="app"></div>
   <script src="options.js"></script>
 </body>

src/popup/popup.html

@@ -9,7 +9,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body style="width: 100%; height: 100%; overflow-x: hidden;">
+<body style="width: 100%; height: 100%; overflow-x: hidden;" class="uw-ultrawidify-container-root">
   <div id="app">
 
   </div>

src/res/css/common.scss

@@ -17,7 +17,7 @@ body {
 }
 
 /* STANDARD WIDTHS AND HEIGHTS */
-
+.uw-ultrawidify-container-root {
 .w100 {
   width: 100%;
 }
@@ -99,42 +99,42 @@ body {
 .description {
   color: $text-dim;
   font-size: 1rem;
-}
+  }
 
-.label {
+  .label {
     padding-top: 1.5rem;
     font-size: 1.5rem;
     font-variant: small-caps;
     font-weight: 600;
-}
+  }
 
-.label-secondary {
+  .label-secondary {
     font-weight: 600;
-}
+  }
 
-.button-box {
+  .button-box {
     padding-top: 0.69rem;
     padding-bottom: 0.69rem;
-}
+  }
 
-.indent {
+  .indent {
     padding-left: 4.2rem;
-}
+  }
 
-.row-padding {
+  .row-padding {
     padding-top: 0.69rem;
     padding-bottom: 0.69rem;
-}
+  }
 
-a, a:visited {
+  a, a:visited {
     color: $primary-color;
-}
+  }
-a:hover {
+  a:hover {
     color: lighten($primary-color, 10%);
-}
+  }
 
-/* INPUT FORMATTING */
+  /* INPUT FORMATTING */
-input[type="number"], input[type="text"], input {
+  input[type="number"], input[type="text"], input {
     outline: none;
     background-color: $input-background;
     color: $text-normal;
@@ -143,88 +143,88 @@ input[type="number"], input[type="text"], input {
     padding-bottom: 0.1rem;
     margin-left: 1rem;
     border: 1px solid $input-border;
-}
+  }
 
-input:disabled {
+  input:disabled {
     background: #444444;
     color: darken($text-normal, 50%);
-}
+  }
 
-/* ELEMENT POSITIONING */
+  /* ELEMENT POSITIONING */
 
-.row {
+  .row {
     display: block;
     margin-top: 20px;
     margin-bottom: 10px;
-}
+  }
 
-.button-row {
+  .button-row {
     display: block;
     margin-top: 5px;
     margin-bottom: 10px;
-}
+  }
 
-.float-left {
+  .float-left {
     float: left;
-}
+  }
-.float-right {
+  .float-right {
     float: right;
-}
+  }
 
-.inline-block {
+  .inline-block {
     display: inline-block;
-}
+  }
 
-.block {
+  .block {
     display: block;
-}
+  }
 
-.hidden {
+  .hidden {
     display: none !important;
-}
+  }
 
-.hide {
+  .hide {
     display: none !important;
-}
+  }
 
 
 
-/* TEXT FORMATTING (no colors) */
+  /* TEXT FORMATTING (no colors) */
 
-small {
+  small {
     font-size: 0.75em;
     font-weight: 200;
-}
+  }
 
-.small {
+  .small {
     font-size: 0.75em;
     font-weight: 200;
-}
+  }
 
-.medium-small {
+  .medium-small {
     font-size: 0.85em;
     font-weight: 200;
-}
+  }
 
-.smallcaps{
+  .smallcaps{
     font-variant: small-caps;
-}
+  }
 
-.center{
+  .center{
     text-align: center;
     width: 100%;
-}
+  }
-.text-center {
+  .text-center {
     text-align: center;
-}
+  }
 
 
-.invalid-input {
+  .invalid-input {
     border: 1px solid #720 !important;
     background-color: #410 !important;
-}
+  }
 
-.button {
+  .button {
     /*display: inline-block;*/
     // padding-top: 8px;
     // padding-bottom: 3px;
@@ -237,50 +237,50 @@ small {
     text-align: center;
     cursor: pointer;
     user-select: none;;
-}
+  }
 
       
-.selected, .setting-selected {
+  .selected, .setting-selected {
     color: $selected-color !important;
     background-color: $background-selected !important;
-}
+  }
 
-.selected-tab {
+  .selected-tab {
     color: $selected-color;
-}
+  }
 
-.setting-selected {
+  .setting-selected {
     border: 1px solid shade($selected-color, 25%);
-}
+  }
 
-.button:hover {
+  .button:hover {
     color: lighten($selected-color, 10%);
     background-color: lighten($background-selected, 10%);
-}
+  }
 
-.disabled {
+  .disabled {
     pointer-events: none;
     /* color: #666; */
     filter: contrast(50%) brightness(40%) grayscale(100%);
-}
+  }
 
-.disabled-button {
+  .disabled-button {
     color: #666 !important;
     cursor: not-allowed !important;     
-}
+  }
 
-.disabled-button:hover {
+  .disabled-button:hover {
     color: #777 !important;
     background-color: #222 !important;
-}
+  }
 
-/* BROWSER-SPECIFIC DISABLE */
+  /* BROWSER-SPECIFIC DISABLE */
-.disabled-edge {
+  .disabled-edge {
     pointer-events: none !important;
     filter: contrast(50%) brightness(40%) grayscale(100%) !important;
     content: "NOT SUPPORTED IN THIS BROWSER";
-}
+  }
-.disabled-edge::after {
+  .disabled-edge::after {
     background-color: #333272;
     color: #d8d9e6;
     display: inline-block;
@@ -289,61 +289,61 @@ small {
     padding-left: 5px;
     padding-right: 5px;
     margin-left: 10px;
-}
+  }
 
 
 
 
-/** misc **/
+  /** misc **/
 
-.warning-color {
+  .warning-color {
     color: #d6ba4a;
-}
+  }
 
-.warning, .warning-lite {
+  .warning, .warning-lite {
     color: #d6ba4a;
     padding-left: 35px;
     float: right;
-}
+  }
 
-.warning::before, .warning-lite::before {
+  .warning::before, .warning-lite::before {
     content: "⚠ ";
     display: inline-block;
-}
+  }
-.warning::before {
+  .warning::before {
     font-weight: bold;
     font-size: 2.5em;
     margin-left: -35px;
     padding-right: 10px;
-}
+  }
 
-.info {
+  .info {
     color: $info-color;
     padding-left: 35px;
     float: right;
-}
+  }
 
-.info::before {
+  .info::before {
     content: "ⓘ";
     display: inline-block;
     font-weight: bold;
     margin-left: -35px;
     padding-right: 10px;
-}
+  }
 
-.new {
+  .new {
     color: #fff;
-}
+  }
 
-.new::after {
+  .new::after {
     content: "ⓘ";
     color: $info-color !important;
     display: inline-block;
     font-weight: bold;
     padding-right: 10px;
-}
+  }
 
-.experimental::after {
+  .experimental::after {
     // content: "Experimental";
     content: "Ⓔ";
     color: #ffde12;
@@ -355,8 +355,8 @@ small {
     padding-right: 5px;
     margin-left: 10px;
     margin-top: -4px;
-}
+  }
-.experimental:hover::after {
+  .experimental:hover::after {
     content: "Ⓔ Experimental";
     //  content: "";
     color: #ffde12;
@@ -368,23 +368,24 @@ small {
     padding-right: 5px;
     margin-left: 10px;
     margin-top: -4px;
-}
+  }
 
-.sticky-bottom {
+  .sticky-bottom {
     width: 100%;
     position: sticky;
     // position: fixed;
     bottom: 0px;
     background-color: rgba($background-primary, 0.7);
-}
+  }
 
-.rtl {
+  .rtl {
     direction: rtl;
-}
+  }
 
-.ltr {
+  .ltr {
     direction: ltr;
-}
+  }
-.monospace {
+  .monospace {
     font-family: 'Overpass Mono';
+  }
 }

src/res/css/flex.scss

@@ -1,51 +1,53 @@
-.flex {
+.uw-ultrawidify-container-root {
+  .flex {
     display: flex;
-}
+  }
 
-.flex-row {
+  .flex-row {
     flex-direction: row;
-}
+  }
 
-.flex-column {
+  .flex-column {
     flex-direction: column;
-}
+  }
 
-.flex-auto {
+  .flex-auto {
     flex: 1 1 auto;
-}
+  }
 
-.flex-grow {
+  .flex-grow {
     flex-grow: 1;
-}
+  }
-.flex-nogrow {
+  .flex-nogrow {
     flex-grow: 0;
-}
+  }
-.flex-shrink {
+  .flex-shrink {
     flex-shrink: 1;
-}
+  }
-.flex-noshrink {
+  .flex-noshrink {
     flex-shrink: 0;
-}
+  }
 
 
-.flex-wrap {
+  .flex-wrap {
     flex-wrap: wrap;
-}
+  }
 
-.flex-center {
+  .flex-center {
     align-content: center;
     align-items: center;
-}
+  }
 
-.flex-end {
+  .flex-end {
     justify-content: flex-end;
-}
+  }
 
-.flex-cross-center {
+  .flex-cross-center {
     justify-content: center;
     justify-items: center;
-}
+  }
 
-.flex-self-center {
+  .flex-self-center {
     align-self: center;
+  }
 }

src/res/css/form.scss

@@ -0,0 +1,3 @@
+.uw-ultrawidify-container-root {
+  /* todo: any form CSS must be nested under this element */
+}