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>
@import '../../res/css/colors.scss';
.uw-ultrawidify-container-root {
.action {
cursor: pointer;
position: relative;
@ -244,5 +245,5 @@ export default {
.transparent {
opacity: 0;
}
}
</style>

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

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

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

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

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

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

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

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

4
src/csui/LoggerUi.vue
View File

@ -306,7 +306,7 @@ 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;
@ -435,5 +435,5 @@ pre {
margin-top: 3em;
margin-bottom: 3em;
}
}
</style>

2
src/csui/NotificationUi.vue
View File

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

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

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

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

2
src/options/options.html
View File

@ -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>

2
src/popup/popup.html
View File

@ -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>

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

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

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

@ -1,3 +1,4 @@
.uw-ultrawidify-container-root {
.flex {
display: flex;
}
@ -49,3 +50,4 @@
.flex-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 */
}