Nest ultrawidify classes inside a css class that guarantees reset of global css
This commit is contained in:
parent
1badce511e
commit
f4f69d4eaa
@ -151,98 +151,99 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../res/css/colors.scss';
|
@import '../../res/css/colors.scss';
|
||||||
|
|
||||||
.action {
|
.uw-ultrawidify-container-root {
|
||||||
cursor: pointer;
|
.action {
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
}
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.action .command-details {
|
.action .command-details {
|
||||||
height: 0px;
|
height: 0px;
|
||||||
max-height: 0px;
|
max-height: 0px;
|
||||||
transition: max-height 0.5s ease;
|
transition: max-height 0.5s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: height 0.5s ease;
|
transition: height 0.5s ease;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action:hover .command-details {
|
.action:hover .command-details {
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
transition: max-height 0.5s ease;
|
transition: max-height 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.command-details {
|
.command-details {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-name-cmd-container, .p1rem {
|
.action-name-cmd-container, .p1rem {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-pad {
|
.cd-pad {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-name {
|
.action-name {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: $text-normal;
|
color: $text-normal;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-name:hover, .action:hover .action-name {
|
.action-name:hover, .action:hover .action-name {
|
||||||
color: lighten($primary-color, 20%);
|
color: lighten($primary-color, 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.red {
|
.red {
|
||||||
color: $primary-color !important;
|
color: $primary-color !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cmd-container {
|
.cmd-container {
|
||||||
width: 13.37rem;
|
width: 13.37rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cmdlist {
|
.cmdlist {
|
||||||
font-family: 'Overpass Mono';
|
font-family: 'Overpass Mono';
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: $text-dim;
|
color: $text-dim;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-scope {
|
.scope-scope {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
color: $secondary-color;
|
color: $secondary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-visible {
|
.scope-visible {
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-button-label {
|
.scope-button-label {
|
||||||
width: 16rem;
|
width: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-row-label {
|
.scope-row-label {
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-row-highlight {
|
.scope-row-highlight {
|
||||||
color: $text-normal;
|
color: $text-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparent {
|
.transparent {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -25,9 +25,11 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.icon {
|
.uw-ultrawidify-container-root {
|
||||||
margin-left: 0.25em;
|
.icon {
|
||||||
margin-right: 0.25em;
|
margin-left: 0.25em;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,23 +1,25 @@
|
|||||||
.json-level-indent {
|
.uw-ultrawidify-container-root {
|
||||||
padding-left: 2em !important;
|
.json-level-indent {
|
||||||
font-family: 'Overpass Mono', monospace;
|
padding-left: 2em !important;
|
||||||
}
|
font-family: 'Overpass Mono', monospace;
|
||||||
.item-key {
|
}
|
||||||
color: rgb(255, 196, 148);
|
.item-key {
|
||||||
}
|
color: rgb(255, 196, 148);
|
||||||
.item-key-boolean-false {
|
}
|
||||||
color: rgb(207, 149, 101)
|
.item-key-boolean-false {
|
||||||
}
|
color: rgb(207, 149, 101)
|
||||||
|
}
|
||||||
|
|
||||||
.json-value-boolean-true {
|
.json-value-boolean-true {
|
||||||
color: rgb(150, 240, 198);
|
color: rgb(150, 240, 198);
|
||||||
}
|
}
|
||||||
.json-value-boolean-false {
|
.json-value-boolean-false {
|
||||||
color: rgb(241, 21, 21);
|
color: rgb(241, 21, 21);
|
||||||
}
|
}
|
||||||
.json-value-number {
|
.json-value-number {
|
||||||
color: rgb(121, 121, 238);
|
color: rgb(121, 121, 238);
|
||||||
}
|
}
|
||||||
.json-value-string {
|
.json-value-string {
|
||||||
color: rgb(226, 175, 7);
|
color: rgb(226, 175, 7);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,33 +21,35 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
.mt2px {
|
.uw-ultrawidify-container-root {
|
||||||
margin-top: 7px;
|
.mt2px {
|
||||||
}
|
margin-top: 7px;
|
||||||
.id {
|
}
|
||||||
border: 1px solid #d00;
|
.id {
|
||||||
background-color: rgba(216, 94, 24, 0.25)
|
border: 1px solid #d00;
|
||||||
}
|
background-color: rgba(216, 94, 24, 0.25)
|
||||||
.class {
|
}
|
||||||
border: 1px solid #33d;
|
.class {
|
||||||
background-color: rgba(69, 69, 255, 0.25)
|
border: 1px solid #33d;
|
||||||
}
|
background-color: rgba(69, 69, 255, 0.25)
|
||||||
.closeButton {
|
}
|
||||||
margin-top: 2px;
|
.closeButton {
|
||||||
margin-left: 4px;
|
margin-top: 2px;
|
||||||
margin-right: 4px;
|
margin-left: 4px;
|
||||||
font-size: 1.5em;
|
margin-right: 4px;
|
||||||
color: #e00;
|
font-size: 1.5em;
|
||||||
}
|
color: #e00;
|
||||||
.closeButton:hover {
|
}
|
||||||
cursor: pointer;
|
.closeButton:hover {
|
||||||
color: #fa6;
|
cursor: pointer;
|
||||||
}
|
color: #fa6;
|
||||||
.qsb {
|
}
|
||||||
cursor:default;
|
.qsb {
|
||||||
margin-left: 3px;
|
cursor:default;
|
||||||
margin-right: 3px;
|
margin-left: 3px;
|
||||||
margin-bottom: 2px;
|
margin-right: 3px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -20,11 +20,13 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.center-text {
|
.uw-ultrawidify-container-root {
|
||||||
text-align: center;
|
.center-text {
|
||||||
}
|
text-align: center;
|
||||||
.dark {
|
}
|
||||||
opacity: 50%;
|
.dark {
|
||||||
|
opacity: 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -306,134 +306,134 @@ 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 {
|
||||||
|
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 {
|
box-sizing: border-box !important;
|
||||||
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;
|
div {
|
||||||
}
|
font-family: 'Overpass';
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
h1, h2 {
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass Thin';
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
|
||||||
font-family: 'Overpass Thin';
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 4em;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: -0.20em;
|
font-size: 4em;
|
||||||
margin-top: 0.0em;
|
|
||||||
}
|
}
|
||||||
.header-top, .header-bottom {
|
h2 {
|
||||||
padding-left: 16px;
|
font-size: 2em;
|
||||||
padding-right: 16px;
|
|
||||||
}
|
}
|
||||||
.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 {
|
.content {
|
||||||
font-size: 1.75em;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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%;
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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);
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -17,7 +17,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* STANDARD WIDTHS AND HEIGHTS */
|
/* STANDARD WIDTHS AND HEIGHTS */
|
||||||
|
.uw-ultrawidify-container-root {
|
||||||
.w100 {
|
.w100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -99,292 +99,293 @@ body {
|
|||||||
.description {
|
.description {
|
||||||
color: $text-dim;
|
color: $text-dim;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-secondary {
|
.label-secondary {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-box {
|
.button-box {
|
||||||
padding-top: 0.69rem;
|
padding-top: 0.69rem;
|
||||||
padding-bottom: 0.69rem;
|
padding-bottom: 0.69rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indent {
|
.indent {
|
||||||
padding-left: 4.2rem;
|
padding-left: 4.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-padding {
|
.row-padding {
|
||||||
padding-top: 0.69rem;
|
padding-top: 0.69rem;
|
||||||
padding-bottom: 0.69rem;
|
padding-bottom: 0.69rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:visited {
|
a, a:visited {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
color: lighten($primary-color, 10%);
|
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;
|
outline: none;
|
||||||
background-color: $input-background;
|
background-color: $input-background;
|
||||||
color: $text-normal;
|
color: $text-normal;
|
||||||
padding: 0.1rem;
|
padding: 0.1rem;
|
||||||
padding-top: 0.2rem;
|
padding-top: 0.2rem;
|
||||||
padding-bottom: 0.1rem;
|
padding-bottom: 0.1rem;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
border: 1px solid $input-border;
|
border: 1px solid $input-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled {
|
input:disabled {
|
||||||
background: #444444;
|
background: #444444;
|
||||||
color: darken($text-normal, 50%);
|
color: darken($text-normal, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ELEMENT POSITIONING */
|
/* ELEMENT POSITIONING */
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-row {
|
.button-row {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-left {
|
.float-left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.float-right {
|
.float-right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-block {
|
.inline-block {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* TEXT FORMATTING (no colors) */
|
/* TEXT FORMATTING (no colors) */
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-small {
|
.medium-small {
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallcaps{
|
.smallcaps{
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center{
|
.center{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.invalid-input {
|
.invalid-input {
|
||||||
border: 1px solid #720 !important;
|
border: 1px solid #720 !important;
|
||||||
background-color: #410 !important;
|
background-color: #410 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
/*display: inline-block;*/
|
/*display: inline-block;*/
|
||||||
// padding-top: 8px;
|
// padding-top: 8px;
|
||||||
// padding-bottom: 3px;
|
// padding-bottom: 3px;
|
||||||
//padding-left: 5px;
|
//padding-left: 5px;
|
||||||
//padding-right: 5px;
|
//padding-right: 5px;
|
||||||
border: 1px solid rgb(39, 39, 39);
|
border: 1px solid rgb(39, 39, 39);
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
color: $text-dim;
|
color: $text-dim;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;;
|
user-select: none;;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.selected, .setting-selected {
|
.selected, .setting-selected {
|
||||||
color: $selected-color !important;
|
color: $selected-color !important;
|
||||||
background-color: $background-selected !important;
|
background-color: $background-selected !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-tab {
|
.selected-tab {
|
||||||
color: $selected-color;
|
color: $selected-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-selected {
|
.setting-selected {
|
||||||
border: 1px solid shade($selected-color, 25%);
|
border: 1px solid shade($selected-color, 25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
color: lighten($selected-color, 10%);
|
color: lighten($selected-color, 10%);
|
||||||
background-color: lighten($background-selected, 10%);
|
background-color: lighten($background-selected, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
/* color: #666; */
|
/* color: #666; */
|
||||||
filter: contrast(50%) brightness(40%) grayscale(100%);
|
filter: contrast(50%) brightness(40%) grayscale(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled-button {
|
.disabled-button {
|
||||||
color: #666 !important;
|
color: #666 !important;
|
||||||
cursor: not-allowed !important;
|
cursor: not-allowed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled-button:hover {
|
.disabled-button:hover {
|
||||||
color: #777 !important;
|
color: #777 !important;
|
||||||
background-color: #222 !important;
|
background-color: #222 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BROWSER-SPECIFIC DISABLE */
|
/* BROWSER-SPECIFIC DISABLE */
|
||||||
.disabled-edge {
|
.disabled-edge {
|
||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
filter: contrast(50%) brightness(40%) grayscale(100%) !important;
|
filter: contrast(50%) brightness(40%) grayscale(100%) !important;
|
||||||
content: "NOT SUPPORTED IN THIS BROWSER";
|
content: "NOT SUPPORTED IN THIS BROWSER";
|
||||||
}
|
}
|
||||||
.disabled-edge::after {
|
.disabled-edge::after {
|
||||||
background-color: #333272;
|
background-color: #333272;
|
||||||
color: #d8d9e6;
|
color: #d8d9e6;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** misc **/
|
/** misc **/
|
||||||
|
|
||||||
.warning-color {
|
.warning-color {
|
||||||
color: #d6ba4a;
|
color: #d6ba4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning, .warning-lite {
|
.warning, .warning-lite {
|
||||||
color: #d6ba4a;
|
color: #d6ba4a;
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning::before, .warning-lite::before {
|
.warning::before, .warning-lite::before {
|
||||||
content: "⚠ ";
|
content: "⚠ ";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.warning::before {
|
.warning::before {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
margin-left: -35px;
|
margin-left: -35px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: $info-color;
|
color: $info-color;
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info::before {
|
.info::before {
|
||||||
content: "ⓘ";
|
content: "ⓘ";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: -35px;
|
margin-left: -35px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new {
|
.new {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new::after {
|
.new::after {
|
||||||
content: "ⓘ";
|
content: "ⓘ";
|
||||||
color: $info-color !important;
|
color: $info-color !important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.experimental::after {
|
.experimental::after {
|
||||||
// content: "Experimental";
|
// content: "Experimental";
|
||||||
content: "Ⓔ";
|
content: "Ⓔ";
|
||||||
color: #ffde12;
|
color: #ffde12;
|
||||||
// background-color: #1f1f1f;
|
// background-color: #1f1f1f;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
}
|
}
|
||||||
.experimental:hover::after {
|
.experimental:hover::after {
|
||||||
content: "Ⓔ Experimental";
|
content: "Ⓔ Experimental";
|
||||||
// content: "";
|
// content: "";
|
||||||
color: #ffde12;
|
color: #ffde12;
|
||||||
// background-color: #1f1f1f;
|
// background-color: #1f1f1f;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticky-bottom {
|
.sticky-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
// position: fixed;
|
// position: fixed;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
background-color: rgba($background-primary, 0.7);
|
background-color: rgba($background-primary, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rtl {
|
.rtl {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ltr {
|
.ltr {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
.monospace {
|
.monospace {
|
||||||
font-family: 'Overpass Mono';
|
font-family: 'Overpass Mono';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,51 +1,53 @@
|
|||||||
.flex {
|
.uw-ultrawidify-container-root {
|
||||||
display: flex;
|
.flex {
|
||||||
}
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-row {
|
.flex-row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-column {
|
.flex-column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-auto {
|
.flex-auto {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
.flex-nogrow {
|
.flex-nogrow {
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
.flex-shrink {
|
.flex-shrink {
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
.flex-noshrink {
|
.flex-noshrink {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.flex-wrap {
|
.flex-wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-center {
|
.flex-center {
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-end {
|
.flex-end {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-cross-center {
|
.flex-cross-center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-self-center {
|
.flex-self-center {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.uw-ultrawidify-container-root {
|
||||||
|
/* todo: any form CSS must be nested under this element */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user