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>
|
||||
@import '../../res/css/colors.scss';
|
||||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.uw-ultrawidify-container-root {
|
||||
.action {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action .command-details {
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.5s ease;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.action .command-details {
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.5s ease;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action:hover .command-details {
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
.action:hover .command-details {
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
|
||||
.command-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.command-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action-name-cmd-container, .p1rem {
|
||||
padding: 1rem;
|
||||
}
|
||||
.action-name-cmd-container, .p1rem {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cd-pad {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.cd-pad {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: $text-normal;
|
||||
width: 50%;
|
||||
}
|
||||
.action-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: $text-normal;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.action-name:hover, .action:hover .action-name {
|
||||
color: lighten($primary-color, 20%);
|
||||
}
|
||||
.action-name:hover, .action:hover .action-name {
|
||||
color: lighten($primary-color, 20%);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
.red {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.cmd-container {
|
||||
width: 13.37rem;
|
||||
}
|
||||
.cmd-container {
|
||||
width: 13.37rem;
|
||||
}
|
||||
|
||||
.cmdlist {
|
||||
font-family: 'Overpass Mono';
|
||||
font-size: 0.9rem;
|
||||
color: $text-dim;
|
||||
}
|
||||
.cmdlist {
|
||||
font-family: 'Overpass Mono';
|
||||
font-size: 0.9rem;
|
||||
color: $text-dim;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scope-scope {
|
||||
width: 5rem;
|
||||
text-align: right !important;
|
||||
color: $secondary-color;
|
||||
}
|
||||
.scope-scope {
|
||||
width: 5rem;
|
||||
text-align: right !important;
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.scope-visible {
|
||||
width: 7rem;
|
||||
}
|
||||
.scope-visible {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
.scope-button-label {
|
||||
width: 16rem;
|
||||
}
|
||||
.scope-button-label {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.scope-row-label {
|
||||
color: $text-dark;
|
||||
}
|
||||
.scope-row-label {
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
.scope-row-highlight {
|
||||
color: $text-normal;
|
||||
}
|
||||
.scope-row-highlight {
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -25,9 +25,11 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
margin-left: 0.25em;
|
||||
margin-right: 0.25em;
|
||||
<style lang="scss" scoped>
|
||||
.uw-ultrawidify-container-root {
|
||||
.icon {
|
||||
margin-left: 0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,33 +21,35 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mt2px {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.id {
|
||||
border: 1px solid #d00;
|
||||
background-color: rgba(216, 94, 24, 0.25)
|
||||
}
|
||||
.class {
|
||||
border: 1px solid #33d;
|
||||
background-color: rgba(69, 69, 255, 0.25)
|
||||
}
|
||||
.closeButton {
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 1.5em;
|
||||
color: #e00;
|
||||
}
|
||||
.closeButton:hover {
|
||||
cursor: pointer;
|
||||
color: #fa6;
|
||||
}
|
||||
.qsb {
|
||||
cursor:default;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
<style lang="scss" scoped>
|
||||
.uw-ultrawidify-container-root {
|
||||
.mt2px {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.id {
|
||||
border: 1px solid #d00;
|
||||
background-color: rgba(216, 94, 24, 0.25)
|
||||
}
|
||||
.class {
|
||||
border: 1px solid #33d;
|
||||
background-color: rgba(69, 69, 255, 0.25)
|
||||
}
|
||||
.closeButton {
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 1.5em;
|
||||
color: #e00;
|
||||
}
|
||||
.closeButton:hover {
|
||||
cursor: pointer;
|
||||
color: #fa6;
|
||||
}
|
||||
.qsb {
|
||||
cursor:default;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,11 +20,13 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.dark {
|
||||
opacity: 50%;
|
||||
<style lang="scss" scoped>
|
||||
.uw-ultrawidify-container-root {
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.dark {
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
.flex-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