tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tamius Han 2020-12-12 00:38:51 +01:00
parent 1badce511e
commit f4f69d4eaa
14 changed files with 606 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/components/ActionAlt.vue
View File

@ -151,6 +151,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../res/css/colors.scss'; @import '../../res/css/colors.scss';
.uw-ultrawidify-container-root {
.action { .action {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -244,5 +245,5 @@ export default {
.transparent { .transparent {
opacity: 0; opacity: 0;
} }
}
</style> </style>

4
src/common/components/Icon.vue
View File

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

2
src/common/components/JsonEditor/json.scss
View File

@ -1,3 +1,4 @@
.uw-ultrawidify-container-root {
.json-level-indent { .json-level-indent {
padding-left: 2em !important; padding-left: 2em !important;
font-family: 'Overpass Mono', monospace; font-family: 'Overpass Mono', monospace;
@ -21,3 +22,4 @@
.json-value-string { .json-value-string {
color: rgb(226, 175, 7); color: rgb(226, 175, 7);
} }
}

4
src/common/components/QsElement.vue
View File

@ -21,7 +21,8 @@ export default {
} }
</script> </script>
<style> <style lang="scss" scoped>
.uw-ultrawidify-container-root {
.mt2px { .mt2px {
margin-top: 7px; margin-top: 7px;
} }
@ -50,4 +51,5 @@ export default {
margin-right: 3px; margin-right: 3px;
margin-bottom: 2px; margin-bottom: 2px;
} }
}
</style> </style>

4
src/common/components/ShortcutButton.vue
View File

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

4
src/csui/LoggerUi.vue
View File

@ -306,7 +306,7 @@ export default {
@import '../res/css/font/overpass-mono.css'; @import '../res/css/font/overpass-mono.css';
@import '../res/css/common.scss'; @import '../res/css/common.scss';
.uw-ultrawidify-container-root {
.root-window { .root-window {
position: fixed !important; position: fixed !important;
top: 5vh !important; top: 5vh !important;
@ -435,5 +435,5 @@ pre {
margin-top: 3em; margin-top: 3em;
margin-bottom: 3em; margin-bottom: 3em;
} }
}
</style> </style>

2
src/csui/NotificationUi.vue
View File

@ -145,7 +145,7 @@ export default {
@import '../res/css/font/overpass-mono.css'; @import '../res/css/font/overpass-mono.css';
@import '../res/css/common.scss'; @import '../res/css/common.scss';
.uw-ultrawidify-container { .uw-ultrawidify-container-root {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;

2
src/ext/lib/uwui/UI.js
View File

@ -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('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.setAttribute('id', uwid);
rootDiv.classList.add('uw-ultrawidify-container-root');
if (this.uiConfig?.parentElement) { if (this.uiConfig?.parentElement) {
this.uiConfig.parentElement.appendChild(rootDiv); this.uiConfig.parentElement.appendChild(rootDiv);

1
src/ext/uw-ui.js
View File

@ -182,6 +182,7 @@ class UwUi {
const rootDiv = document.createElement('div'); const rootDiv = document.createElement('div');
rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;"); rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;");
rootDiv.setAttribute("id", uwid); rootDiv.setAttribute("id", uwid);
rootDiv.classList.add('uw-ultrawidify-container-root');
document.body.appendChild(rootDiv); document.body.appendChild(rootDiv);

2
src/options/options.html
View File

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

2
src/popup/popup.html
View File

@ -9,7 +9,7 @@
<!-- Load some resources only in development environment --> <!-- Load some resources only in development environment -->
<% } %> <% } %>
</head> </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 id="app">
</div> </div>

3
src/res/css/common.scss
View File

@ -17,7 +17,7 @@ body {
} }
/* STANDARD WIDTHS AND HEIGHTS */ /* STANDARD WIDTHS AND HEIGHTS */
.uw-ultrawidify-container-root {
.w100 { .w100 {
width: 100%; width: 100%;
} }
@ -388,3 +388,4 @@ small {
.monospace { .monospace {
font-family: 'Overpass Mono'; font-family: 'Overpass Mono';
} }
}

2
src/res/css/flex.scss
View File

@ -1,3 +1,4 @@
.uw-ultrawidify-container-root {
.flex { .flex {
display: flex; display: flex;
} }
@ -49,3 +50,4 @@
.flex-self-center { .flex-self-center {
align-self: center; align-self: center;
} }
}

3
src/res/css/form.scss
View File

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