standardize units from px > rem

This commit is contained in:
Omsi 2020-04-17 22:42:09 -07:00
parent 84850eee60
commit 9a89ad4f86
16 changed files with 46 additions and 46 deletions

View File

@ -4,7 +4,7 @@
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css?3">
<style>
td {
border: 1px solid gray;
border: 0.1rem solid gray;
}
</style>
</head>

View File

@ -22,7 +22,7 @@ Vue.component("plus-minus-button", {
height: this.size,
position: "relative !important",
"border-radius": "50% !important",
border: "1px solid " + this.color + " !important",
border: "0.1rem solid " + this.color + " !important",
};
},
horizStyle() {

View File

@ -1520,7 +1520,7 @@ GameDatabase.news = [
{
id: "a271",
text:
"<i style='border: 1px solid black; border-radius: 50%; padding: 0.4rem; color: #2196F3; background: white; " +
"<i style='border: 0.1rem solid black; border-radius: 50%; padding: 0.4rem; color: #2196F3; background: white; " +
"cursor: pointer;' class='fas fa-volume-up' onclick='(function(){new Audio(`audio/news.mp3`).play();})();'>" +
"</i> This news message is a test of \"News 2.0\". News 2.0 will feature things like the ability to listen to " +
"an audio version of any news message!"

View File

@ -16,64 +16,64 @@
<body>
Tooltips are shown to assist in validation. Boundaries are shown for clarity.
<div id="ui" style="height: 100%; width: 100%; background:black;">
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :interval="1" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :piecewise-label="true" :label-style="{color: 'white'}" :data="['ace','b','car','doggy','ear']" :show="true" dot-width="3rem" width="20rem" tooltip-dir="top"
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="false" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="true" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; width: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="1rem" height="20rem" tooltip-dir="right"
:value-in-dot="true" direction="vertical" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; width: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="6px" height="20rem" tooltip-dir="right"
:value-in-dot="true" direction="vertical" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: block; width: 100%">
<div style="border: 0.1rem solid red !important; display: block; width: 100%">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="100%" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="display:block; height: 80px"></div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
:disabled="true" bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
:enable-cross="false" bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<br>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
<ad-slider-component :value="1" :min="1" :max="3" :interval="0.25" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :piecewise="true"
process-class="glyph-level-weight-slider-process">
@ -83,7 +83,7 @@
</template>
</ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px; padding: 20px">
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.125" :show="true" dot-size="4rem" width="30rem"
tooltip-dir="bottom" height="4rem" :bg-style="{'border-radius': '0.4rem !important', background:'black', 'box-sizing': 'content-box', border: '0.4rem double #0b600e'}" tooltip="never"
:slider-style="{border: '0.2rem outset gray', 'box-sizing': 'border-box', 'border-radius': '0.1rem !important', background:'black'}"
@ -93,7 +93,7 @@
</template>
</ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px; padding: 20px">
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.05" :show="true" dot-size="3rem" width="15rem"
tooltip-dir="bottom" height="3rem" :xformatter="e => ((e-1)*40).toFixed() + '%'"
:bg-style="{'border-radius': '0.1rem', background:'#0b600e', 'box-sizing': 'border-box'}" tooltip="hover"

View File

@ -203,7 +203,7 @@ SOFTWARE.
text-align: center;
color: #fff;
border-radius: 5px;
border: 1px solid #3498db;
border: 0.1rem solid #3498db;
background-color: #3498db;
}

View File

@ -115,14 +115,14 @@
.c-automator-editor__active-line {
background: rgb(43, 6, 92);
outline: 1px solid rgb(68, 0, 255);
outline: 0.1rem solid rgb(68, 0, 255);
}
.c-automator-editor__active-line-gutter {
font-weight: bold;
background: rgb(43, 6, 92);
filter: brightness(200%);
outline: 1px solid rgb(68, 0, 255);
outline: 0.1rem solid rgb(68, 0, 255);
}
.c-automator-editor {

View File

@ -53,8 +53,8 @@ body.t-normal {
display: flex;
flex-direction: column;
background-color: var(--color-base);
border-right: 1px solid var(--color-accent);
border-bottom: 1px solid var(--color-accent);
border-right: 0.1rem solid var(--color-accent);
border-bottom: 0.1rem solid var(--color-accent);
padding: 10px;
}
@ -444,7 +444,7 @@ body.t-normal {
.o-infinity-upgrade-btn--unavailable {
background: #525252;
color: white;
border: 1px solid var(--color-accent);
border: 0.1rem solid var(--color-accent);
cursor: default;
}
@ -454,14 +454,14 @@ body.t-normal {
}
.o-infinity-upgrade-btn--bought {
border: 1px solid var(--color-accent);
border: 0.1rem solid var(--color-accent);
background: var(--color-good);
}
.o-primary-btn--option, .c-select-theme__item, .c-select-notation__item {
background: var(--color-base);
color: var(--color-text);
border: 1px solid var(--color-good);
border: 0.1rem solid var(--color-good);
}
.o-primary-btn {
@ -478,7 +478,7 @@ body.t-normal {
.c-challenge-box--normal {
color: var(--color-text);
background: var(--color-base);
border: 1px solid var(--color-accent);
border: 0.1rem solid var(--color-accent);
}
.c-challenge-box--infinity {

View File

@ -6,13 +6,13 @@ body.t-dark-metro {
.t-dark-metro input {
background-color: #455A64;
border: 1px solid black;
border: 0.1rem solid black;
}
.t-dark-metro .c-tt-buy-button--unlocked {
background: #212121;
color: #00BCD4;
border: 1px solid #00BCD4;
border: 0.1rem solid #00BCD4;
}
.t-dark-metro .c-tt-buy-button--unlocked:hover {

View File

@ -6,7 +6,7 @@ body.t-dark {
input.t-dark {
background-color: #455A64;
border: 1px solid black;
border: 0.1rem solid black;
}
.t-dark .c-tt-amount {
@ -17,7 +17,7 @@ input.t-dark {
.t-dark .c-tt-buy-button--unlocked {
color: #3AACD6;
background: #161616;
border: 1px solid #3AACD6;
border: 0.1rem solid #3AACD6;
}
.t-dark .c-tt-buy-button--unlocked:hover {
@ -27,12 +27,12 @@ input.t-dark {
.t-dark .c-tt-buy-button--locked {
background: #263238;
border: 1px solid #3AACD6;
border: 0.1rem solid #3AACD6;
}
.t-dark .c-tt-buy-button--locked:hover {
background: var(--color-bad);
border: 1px solid var(--color-bad);
border: 0.1rem solid var(--color-bad);
}
.t-dark .c-rm-amount__desc {

View File

@ -13,7 +13,7 @@ body.t-inverted-metro {
.t-inverted-metro .c-tt-buy-button--unlocked {
background: #212121;
color: #00BCD4;
border: 1px solid #00BCD4;
border: 0.1rem solid #00BCD4;
}
.t-inverted-metro .c-tt-buy-button--unlocked:hover {

View File

@ -19,7 +19,7 @@ body.t-s1 {
input {
background-color: #9a921d !important;
border: 1px solid black !important;
border: 0.1rem solid black !important;
border-radius: 3px !important;
}

View File

@ -11,7 +11,7 @@ html{
color: black !important;
background-attachment:fixed;
background-position:center bottom;
border: 1px solid white !important;
border: 0.1rem solid white !important;
}
#container {
@ -20,7 +20,7 @@ html{
body {
background: #0FFF0F !important;
border: 1px solid white !important;
border: 0.1rem solid white !important;
}
.o-achievement {

View File

@ -27,7 +27,7 @@ body.t-s6 {
.t-s6 input {
color: white;
background-color: black;
border: 1px solid grey;
border: 0.1rem solid #888;
}
.t-s6 .c-tt-amount {
@ -38,7 +38,7 @@ body.t-s6 {
.t-s6 .c-tt-buy-button--unlocked {
color: #3AACD6;
background: black;
border: 1px solid #3AACD6;
border: 0.1rem solid #3AACD6;
}
.t-s6 .c-tt-buy-button--unlocked:hover {
@ -49,13 +49,13 @@ body.t-s6 {
.t-s6 .c-tt-buy-button--locked {
color: grey;
background: black;
border: 1px solid grey;
border: 0.1rem solid grey;
}
.t-s6 .c-tt-buy-button--locked:hover {
color: black;
background: var(--color-bad);
border: 1px solid var(--color-bad);
border: 0.1rem solid var(--color-bad);
}
.t-s6 .c-rm-amount__desc {

View File

@ -19,7 +19,7 @@ button {
background-image: -moz-linear-gradient(center bottom, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
padding: 3px !important;
border: 1px solid #9B9B9B !important;
border: 0.1rem solid #9B9B9B !important;
color: black !important;
text-decoration: none !important;
}
@ -32,11 +32,11 @@ button {
background-image: -moz-linear-gradient(center bottom, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
padding: 3px !important;
border: 1px solid #9B9B9B !important;
border: 0.1rem solid #9B9B9B !important;
color: black !important;
text-decoration: none !important;
}
button:hover {
border: 1px solid #737373 !important;
border: 0.1rem solid #737373 !important;
}

View File

@ -19,13 +19,13 @@ body.t-s8 {
.t-s8 input, .t-s8 select {
border: 1px solid #A9A9A9;
border: 0.1rem solid #A9A9A9;
}
.t-s8 .c-tt-buy-button--unlocked {
background: #212121;
color: #00BCD4;
border: 1px solid #00BCD4;
border: 0.1rem solid #00BCD4;
}
.t-s8 .c-tt-buy-button--unlocked:hover {

View File

@ -22,7 +22,7 @@
.c-component-block {
padding: 10px;
border: 1px solid black;
border: 0.1rem solid black;
}
.c-component-block,