mirror of
https://github.com/IvarK/AntimatterDimensionsSourceCode.git
synced 2024-11-22 04:05:42 +00:00
add stylelint-order, configure, and apply changes
This commit is contained in:
WaitingIdly
parent
e07e35220f
commit
579c2e142f
@ -1,4 +1,7 @@
|
|||||||
{
|
{
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-order"
|
||||||
|
],
|
||||||
"extends": [
|
"extends": [
|
||||||
"stylelint-config-standard",
|
"stylelint-config-standard",
|
||||||
"stylelint-config-recommended-vue"
|
"stylelint-config-recommended-vue"
|
||||||
@ -11,7 +14,8 @@
|
|||||||
"color-hex-length": "long",
|
"color-hex-length": "long",
|
||||||
"custom-property-empty-line-before": null,
|
"custom-property-empty-line-before": null,
|
||||||
"color-function-notation": null,
|
"color-function-notation": null,
|
||||||
|
"declaration-empty-line-before": null,
|
||||||
|
"comment-empty-line-before": null,
|
||||||
|
|
||||||
"property-no-vendor-prefix": [
|
"property-no-vendor-prefix": [
|
||||||
true,
|
true,
|
||||||
@ -52,6 +56,338 @@
|
|||||||
{
|
{
|
||||||
"message": "Expected id selector name to be kebab-case"
|
"message": "Expected id selector name to be kebab-case"
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"order/order": [
|
||||||
|
"custom-properties",
|
||||||
|
"at-rules",
|
||||||
|
"rules",
|
||||||
|
"declarations"
|
||||||
|
],
|
||||||
|
"order/properties-order": [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"groupName": "content",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"content"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "display",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"display",
|
||||||
|
"visibility",
|
||||||
|
"float",
|
||||||
|
"clear",
|
||||||
|
"resize",
|
||||||
|
"overflow",
|
||||||
|
"overflow-x",
|
||||||
|
"overflow-y",
|
||||||
|
"white-space",
|
||||||
|
"word-break",
|
||||||
|
"overflow-wrap",
|
||||||
|
"tab-size",
|
||||||
|
"clip",
|
||||||
|
"zoom"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "flex",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"flex",
|
||||||
|
"flex-grow",
|
||||||
|
"flex-shrink",
|
||||||
|
"flex-basis",
|
||||||
|
"flex-flow",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-wrap"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "grid",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"grid",
|
||||||
|
"grid-auto-columns",
|
||||||
|
"grid-auto-flow",
|
||||||
|
"grid-auto-rows",
|
||||||
|
"grid-template-areas",
|
||||||
|
"grid-template-columns",
|
||||||
|
"grid-template-rows",
|
||||||
|
"grid-row-gap",
|
||||||
|
"grid-column-gap",
|
||||||
|
"row-gap",
|
||||||
|
"column-gap",
|
||||||
|
"grid-row",
|
||||||
|
"grid-row-start",
|
||||||
|
"grid-row-end",
|
||||||
|
"grid-column",
|
||||||
|
"grid-column-start",
|
||||||
|
"grid-column-end"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "table",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"table-layout",
|
||||||
|
"empty-cells",
|
||||||
|
"caption-side",
|
||||||
|
"border-spacing",
|
||||||
|
"border-collapse",
|
||||||
|
"list-style",
|
||||||
|
"list-style-position",
|
||||||
|
"list-style-type",
|
||||||
|
"list-style-image"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "size",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"width",
|
||||||
|
"height",
|
||||||
|
"min-width",
|
||||||
|
"max-width",
|
||||||
|
"min-height",
|
||||||
|
"max-height"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "position",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"position",
|
||||||
|
"will-change",
|
||||||
|
"inset",
|
||||||
|
"top",
|
||||||
|
"right",
|
||||||
|
"bottom",
|
||||||
|
"left",
|
||||||
|
"z-index"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "alignment",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"place-content",
|
||||||
|
"justify-content",
|
||||||
|
"align-content",
|
||||||
|
"align-items",
|
||||||
|
"align-self",
|
||||||
|
"vertical-align",
|
||||||
|
"text-align",
|
||||||
|
"text-align-last"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "scrollbar",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"scrollbar-color",
|
||||||
|
"scrollbar-width"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "svg",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"stroke",
|
||||||
|
"stroke-width",
|
||||||
|
"stroke-linecap",
|
||||||
|
"stroke-dasharray",
|
||||||
|
"fill",
|
||||||
|
"text-anchor"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "font",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"font",
|
||||||
|
"font-family",
|
||||||
|
"font-size",
|
||||||
|
"font-stretch",
|
||||||
|
"font-style",
|
||||||
|
"font-variant",
|
||||||
|
"font-weight",
|
||||||
|
"font-smoothing",
|
||||||
|
"font-smooth",
|
||||||
|
"line-height",
|
||||||
|
"src",
|
||||||
|
"unicode-range"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "color",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"opacity",
|
||||||
|
"color"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "text",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"text-shadow",
|
||||||
|
"text-decoration"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"appearance",
|
||||||
|
{
|
||||||
|
"groupName": "background",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"background",
|
||||||
|
"background-attachment",
|
||||||
|
"background-clip",
|
||||||
|
"background-color",
|
||||||
|
"background-image",
|
||||||
|
"background-origin",
|
||||||
|
"background-position",
|
||||||
|
"background-position-x",
|
||||||
|
"background-position-y",
|
||||||
|
"background-repeat",
|
||||||
|
"background-size"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "border",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"border",
|
||||||
|
"border-color",
|
||||||
|
"border-style",
|
||||||
|
"border-width",
|
||||||
|
"border-top",
|
||||||
|
"border-top-color",
|
||||||
|
"border-top-style",
|
||||||
|
"border-top-width",
|
||||||
|
"border-right",
|
||||||
|
"border-right-color",
|
||||||
|
"border-right-style",
|
||||||
|
"border-right-width",
|
||||||
|
"border-bottom",
|
||||||
|
"border-bottom-color",
|
||||||
|
"border-bottom-style",
|
||||||
|
"border-bottom-width",
|
||||||
|
"border-left",
|
||||||
|
"border-left-color",
|
||||||
|
"border-left-style",
|
||||||
|
"border-left-width",
|
||||||
|
"border-radius",
|
||||||
|
"border-top-left-radius",
|
||||||
|
"border-top-right-radius",
|
||||||
|
"border-bottom-right-radius",
|
||||||
|
"border-bottom-left-radius",
|
||||||
|
"border-spacing"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "box",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"box-shadow",
|
||||||
|
"box-sizing"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "outline",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"outline",
|
||||||
|
"outline-width",
|
||||||
|
"outline-style",
|
||||||
|
"outline-color",
|
||||||
|
"outline-offset"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "margin",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"margin",
|
||||||
|
"margin-top",
|
||||||
|
"margin-right",
|
||||||
|
"margin-bottom",
|
||||||
|
"margin-left"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "padding",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"padding",
|
||||||
|
"padding-top",
|
||||||
|
"padding-right",
|
||||||
|
"padding-bottom",
|
||||||
|
"padding-left"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "animation",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"transform",
|
||||||
|
"transform-origin",
|
||||||
|
"filter",
|
||||||
|
"mix-blend-mode",
|
||||||
|
"transition",
|
||||||
|
"transition-delay",
|
||||||
|
"transition-timing-function",
|
||||||
|
"transition-duration",
|
||||||
|
"transition-property",
|
||||||
|
"animation",
|
||||||
|
"animation-name",
|
||||||
|
"animation-duration",
|
||||||
|
"animation-play-state",
|
||||||
|
"animation-timing-function",
|
||||||
|
"animation-delay",
|
||||||
|
"animation-iteration-count",
|
||||||
|
"animation-direction",
|
||||||
|
"animation-fill-mode"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "pointer",
|
||||||
|
"emptyLineBefore": "never",
|
||||||
|
"noEmptyLineBetween": true,
|
||||||
|
"properties": [
|
||||||
|
"pointer-events",
|
||||||
|
"user-select",
|
||||||
|
"cursor"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
{
|
||||||
|
"unspecified": "bottomAlphabetical",
|
||||||
|
"emptyLineBeforeUnspecified": "always"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -44,6 +44,7 @@
|
|||||||
"stylelint": "^14.8.2",
|
"stylelint": "^14.8.2",
|
||||||
"stylelint-config-recommended-vue": "^1.4.0",
|
"stylelint-config-recommended-vue": "^1.4.0",
|
||||||
"stylelint-config-standard": "^25.0.0",
|
"stylelint-config-standard": "^25.0.0",
|
||||||
|
"stylelint-order": "^5.0.0",
|
||||||
"vue-template-compiler": "^2.6.11",
|
"vue-template-compiler": "^2.6.11",
|
||||||
"webpack": "^5.64.0"
|
"webpack": "^5.64.0"
|
||||||
}
|
}
|
||||||
@ -13212,6 +13213,15 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/postcss-sorting": {
|
||||||
|
"version": "7.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
|
||||||
|
"integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
|
||||||
|
"dev": true,
|
||||||
|
"peerDependencies": {
|
||||||
|
"postcss": "^8.3.9"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/postcss-svgo": {
|
"node_modules/postcss-svgo": {
|
||||||
"version": "5.0.3",
|
"version": "5.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
|
||||||
@ -14648,6 +14658,19 @@
|
|||||||
"stylelint": "^14.4.0"
|
"stylelint": "^14.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/stylelint-order": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"postcss": "^8.3.11",
|
||||||
|
"postcss-sorting": "^7.0.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"stylelint": "^14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/stylelint/node_modules/balanced-match": {
|
"node_modules/stylelint/node_modules/balanced-match": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
|
||||||
@ -26403,6 +26426,13 @@
|
|||||||
"util-deprecate": "^1.0.2"
|
"util-deprecate": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"postcss-sorting": {
|
||||||
|
"version": "7.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
|
||||||
|
"integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"postcss-svgo": {
|
"postcss-svgo": {
|
||||||
"version": "5.0.3",
|
"version": "5.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
|
||||||
@ -27554,6 +27584,16 @@
|
|||||||
"stylelint-config-recommended": "^7.0.0"
|
"stylelint-config-recommended": "^7.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"stylelint-order": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"postcss": "^8.3.11",
|
||||||
|
"postcss-sorting": "^7.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"supports-color": {
|
"supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
|
|||||||
@ -45,6 +45,7 @@
|
|||||||
"stylelint": "^14.8.2",
|
"stylelint": "^14.8.2",
|
||||||
"stylelint-config-recommended-vue": "^1.4.0",
|
"stylelint-config-recommended-vue": "^1.4.0",
|
||||||
"stylelint-config-standard": "^25.0.0",
|
"stylelint-config-standard": "^25.0.0",
|
||||||
|
"stylelint-order": "^5.0.0",
|
||||||
"vue-template-compiler": "^2.6.11",
|
"vue-template-compiler": "^2.6.11",
|
||||||
"webpack": "^5.64.0"
|
"webpack": "^5.64.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,9 +30,9 @@ SOFTWARE.
|
|||||||
|
|
||||||
.l-ad-slider {
|
.l-ad-slider {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider--horizontal {
|
.l-ad-slider--horizontal {
|
||||||
@ -69,54 +69,54 @@ SOFTWARE.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__bg {
|
.l-ad-slider__bg {
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__bg {
|
.c-ad-slider__bg {
|
||||||
border-radius: var(--var-border-radius, 1.5rem);
|
|
||||||
background-color: #cccccc;
|
background-color: #cccccc;
|
||||||
|
border-radius: var(--var-border-radius, 1.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__bg::after {
|
.l-ad-slider__bg::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__process {
|
.l-ad-slider__process {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: all 0s;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
transition: all 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__process {
|
.c-ad-slider__process {
|
||||||
border-radius: var(--var-border-radius, 15px);
|
|
||||||
background-color: #3498db;
|
background-color: #3498db;
|
||||||
|
border-radius: var(--var-border-radius, 15px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-process.ad-slider-process-draggable {
|
.l-ad-slider__wrap .ad-slider-process.ad-slider-process-draggable {
|
||||||
cursor: pointer;
|
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider--horizontal .l-ad-slider__process {
|
.l-ad-slider--horizontal .l-ad-slider__process {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
will-change: width;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
will-change: width;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider--vertical .l-ad-slider__process {
|
.l-ad-slider--vertical .l-ad-slider__process {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
will-change: height;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
will-change: height;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider--horizontal-reverse .l-ad-slider__process {
|
.l-ad-slider--horizontal-reverse .l-ad-slider__process {
|
||||||
@ -135,9 +135,9 @@ SOFTWARE.
|
|||||||
|
|
||||||
.l-ad-slider__dot {
|
.l-ad-slider__dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: all 0s;
|
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
transition: all 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__dot {
|
.c-ad-slider__dot {
|
||||||
@ -145,16 +145,16 @@ SOFTWARE.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__dot-handle {
|
.l-ad-slider__dot-handle {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__dot-handle {
|
.c-ad-slider__dot-handle {
|
||||||
border-radius: var(--var-border-radius, 50%) !important;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
border-radius: var(--var-border-radius, 50%) !important;
|
||||||
box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 32%);
|
box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 32%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -187,16 +187,16 @@ SOFTWARE.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__button {
|
.c-ad-slider__button {
|
||||||
height: 1.6rem;
|
|
||||||
width: 1.6rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: var(--var-border-radius, 50%);
|
|
||||||
border: 0.1rem solid var(--color-reality-light);
|
border: 0.1rem solid var(--color-reality-light);
|
||||||
cursor: pointer;
|
border-radius: var(--var-border-radius, 50%);
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ad-slider__button:hover {
|
.c-ad-slider__button:hover {
|
||||||
@ -212,15 +212,15 @@ SOFTWARE.
|
|||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip {
|
.l-ad-slider__wrap .ad-slider-tooltip {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 2px 5px;
|
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border-radius: var(--var-border-radius, 5px);
|
|
||||||
border: 0.1rem solid #3498db;
|
|
||||||
background-color: #3498db;
|
background-color: #3498db;
|
||||||
|
border: 0.1rem solid #3498db;
|
||||||
|
border-radius: var(--var-border-radius, 5px);
|
||||||
|
padding: 2px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top {
|
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top {
|
||||||
@ -250,11 +250,11 @@ SOFTWARE.
|
|||||||
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top .ad-slider-tooltip::before,
|
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top .ad-slider-tooltip::before,
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip-top .vue-merged-tooltip .ad-slider-tooltip::before {
|
.l-ad-slider__wrap .ad-slider-tooltip-top .vue-merged-tooltip .ad-slider-tooltip::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -10px;
|
bottom: -10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 5px solid transparent;
|
border: 5px solid transparent;
|
||||||
border: 6px solid transparent\0;
|
border: 6px solid transparent\0;
|
||||||
border-top-color: inherit;
|
border-top-color: inherit;
|
||||||
@ -269,11 +269,11 @@ SOFTWARE.
|
|||||||
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-bottom .ad-slider-tooltip::before,
|
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-bottom .ad-slider-tooltip::before,
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip-bottom .vue-merged-tooltip .ad-slider-tooltip::before {
|
.l-ad-slider__wrap .ad-slider-tooltip-bottom .vue-merged-tooltip .ad-slider-tooltip::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 5px solid transparent;
|
border: 5px solid transparent;
|
||||||
border: 6px solid transparent\0;
|
border: 6px solid transparent\0;
|
||||||
border-bottom-color: inherit;
|
border-bottom-color: inherit;
|
||||||
@ -283,11 +283,11 @@ SOFTWARE.
|
|||||||
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-left .ad-slider-tooltip::before,
|
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-left .ad-slider-tooltip::before,
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip-left .vue-merged-tooltip .ad-slider-tooltip::before {
|
.l-ad-slider__wrap .ad-slider-tooltip-left .vue-merged-tooltip .ad-slider-tooltip::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 5px solid transparent;
|
border: 5px solid transparent;
|
||||||
border: 6px solid transparent\0;
|
border: 6px solid transparent\0;
|
||||||
border-left-color: inherit;
|
border-left-color: inherit;
|
||||||
@ -297,11 +297,11 @@ SOFTWARE.
|
|||||||
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-right .ad-slider-tooltip::before,
|
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-right .ad-slider-tooltip::before,
|
||||||
.l-ad-slider__wrap .ad-slider-tooltip-right .vue-merged-tooltip .ad-slider-tooltip::before {
|
.l-ad-slider__wrap .ad-slider-tooltip-right .vue-merged-tooltip .ad-slider-tooltip::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 5px solid transparent;
|
border: 5px solid transparent;
|
||||||
border: 6px solid transparent\0;
|
border: 6px solid transparent\0;
|
||||||
border-right-color: inherit;
|
border-right-color: inherit;
|
||||||
@ -317,33 +317,33 @@ SOFTWARE.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-piecewise {
|
.l-ad-slider__wrap .ad-slider-piecewise {
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-piecewise-item {
|
.l-ad-slider__wrap .ad-slider-piecewise-item {
|
||||||
position: absolute;
|
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider__wrap .ad-slider-piecewise-dot {
|
.l-ad-slider__wrap .ad-slider-piecewise-dot {
|
||||||
position: absolute;
|
display: inline-block;
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 2;
|
||||||
background-color: rgba(0, 0, 0, 16%);
|
background-color: rgba(0, 0, 0, 16%);
|
||||||
border-radius: var(--var-border-radius, 50%);
|
border-radius: var(--var-border-radius, 50%);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 2;
|
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -354,26 +354,26 @@ SOFTWARE.
|
|||||||
|
|
||||||
.l-ad-slider--horizontal .ad-slider-piecewise-label,
|
.l-ad-slider--horizontal .ad-slider-piecewise-label,
|
||||||
.l-ad-slider--horizontal-reverse .ad-slider-piecewise-label {
|
.l-ad-slider--horizontal-reverse .ad-slider-piecewise-label {
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
visibility: visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
transform: translate(-50%, 8px);
|
transform: translate(-50%, 8px);
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-ad-slider--vertical .ad-slider-piecewise-label,
|
.l-ad-slider--vertical .ad-slider-piecewise-label,
|
||||||
.l-ad-slider--vertical-reverse .ad-slider-piecewise-label {
|
.l-ad-slider--vertical-reverse .ad-slider-piecewise-label {
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
visibility: visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
transform: translate(8px, -50%);
|
transform: translate(8px, -50%);
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,18 +4,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-tab {
|
.c-automator-tab {
|
||||||
height: 57rem;
|
|
||||||
width: 100rem;
|
width: 100rem;
|
||||||
|
height: 57rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-tab > div {
|
.c-automator-tab > div {
|
||||||
height: 50rem;
|
|
||||||
width: 100rem;
|
width: 100rem;
|
||||||
|
height: 50rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-tab--full-screen {
|
.c-automator-tab--full-screen {
|
||||||
height: auto;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-tab {
|
.l-automator-tab {
|
||||||
@ -35,9 +35,9 @@
|
|||||||
|
|
||||||
.c-automator-points-list-col {
|
.c-automator-points-list-col {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
border: var(--var-border-width, 0.15rem) solid var(--color-text);
|
border: var(--var-border-width, 0.15rem) solid var(--color-text);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-points-list-side-col {
|
.l-automator-points-list-side-col {
|
||||||
@ -55,27 +55,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-points-list-cell {
|
.c-automator-points-list-cell {
|
||||||
position: relative;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48%;
|
height: 48%;
|
||||||
padding: 1rem;
|
position: relative;
|
||||||
border: var(--var-border-width, 0.15rem) solid var(--color-text);
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
overflow: hidden;
|
border: var(--var-border-width, 0.15rem) solid var(--color-text);
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-points-list-symbol {
|
.c-automator-points-list-symbol {
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
align-items: center;
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
font-size: 15rem;
|
font-size: 15rem;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
text-shadow: 0 0 2rem;
|
text-shadow: 0 0 2rem;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,17 +105,17 @@
|
|||||||
|
|
||||||
.l-automator-tab--full-screen {
|
.l-automator-tab--full-screen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: -6.5rem;
|
top: -6.5rem;
|
||||||
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin-top: 0;
|
left: 0;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-tab--full-screen > div {
|
.l-automator-tab--full-screen > div {
|
||||||
height: calc(100% - 6.5rem);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: calc(100% - 6.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-pane {
|
.l-automator-pane {
|
||||||
@ -143,29 +143,29 @@
|
|||||||
.l-automator__controls {
|
.l-automator__controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
/* for corner buttons */
|
/* for corner buttons */
|
||||||
position: relative;
|
position: relative;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator__button {
|
.l-automator__button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
padding: 0.3rem 0.8rem;
|
padding: 0.3rem 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator__button--corner {
|
.l-automator__button--corner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator__script-names {
|
.l-automator__script-names {
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -174,10 +174,10 @@
|
|||||||
.l-automator__scripts-dropdown {
|
.l-automator__scripts-dropdown {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
padding: 0.2rem 0 0.3rem;
|
|
||||||
border-width: 0.1rem;
|
border-width: 0.1rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 0.4rem;
|
margin: 0.4rem;
|
||||||
|
padding: 0.2rem 0 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator__rename-input {
|
.l-automator__rename-input {
|
||||||
@ -194,8 +194,8 @@
|
|||||||
.c-automator-editor__active-line-gutter {
|
.c-automator-editor__active-line-gutter {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: rgb(43, 6, 92);
|
background: rgb(43, 6, 92);
|
||||||
filter: brightness(200%);
|
|
||||||
outline: 0.1rem solid rgb(68, 0, 255);
|
outline: 0.1rem solid rgb(68, 0, 255);
|
||||||
|
filter: brightness(200%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-editor__event-line {
|
.c-automator-editor__event-line {
|
||||||
@ -206,8 +206,8 @@
|
|||||||
.c-automator-editor__event-line-gutter {
|
.c-automator-editor__event-line-gutter {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: rgb(0, 127, 0);
|
background: rgb(0, 127, 0);
|
||||||
filter: brightness(200%);
|
|
||||||
outline: 0.1rem solid rgb(25, 200, 25);
|
outline: 0.1rem solid rgb(25, 200, 25);
|
||||||
|
filter: brightness(200%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-editor__error-line {
|
.c-automator-editor__error-line {
|
||||||
@ -218,32 +218,32 @@
|
|||||||
.c-automator-editor__error-line-gutter {
|
.c-automator-editor__error-line-gutter {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: rgb(172, 6, 23);
|
background: rgb(172, 6, 23);
|
||||||
filter: brightness(200%);
|
|
||||||
outline: 0.1rem solid rgb(255, 0, 64);
|
outline: 0.1rem solid rgb(255, 0, 64);
|
||||||
|
filter: brightness(200%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-editor {
|
.c-automator-editor {
|
||||||
|
text-align: left;
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
text-align: left;
|
|
||||||
border-bottom: 0.15rem solid #262626;
|
border-bottom: 0.15rem solid #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-editor {
|
.l-automator-editor {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-automator-editor__codemirror-container {
|
.l-automator-editor__codemirror-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeMirror-hint {
|
.CodeMirror-hint {
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
|
.s-base--metro .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
|
||||||
@ -252,23 +252,23 @@
|
|||||||
|
|
||||||
.cm-s-liquibyte.CodeMirror,
|
.cm-s-liquibyte.CodeMirror,
|
||||||
.cm-s-panda-syntax.CodeMirror {
|
.cm-s-panda-syntax.CodeMirror {
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
line-height: 1.6rem;
|
|
||||||
|
|
||||||
/* required for expanding into pane */
|
/* required for expanding into pane */
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-docs {
|
.c-automator-docs {
|
||||||
border-right: 0.15rem solid #262626;
|
overflow: auto;
|
||||||
border-bottom: 0.15rem solid #262626;
|
text-align: left;
|
||||||
background-color: lightgray;
|
|
||||||
padding-left: 1rem;
|
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: black;
|
color: black;
|
||||||
text-align: left;
|
background-color: lightgray;
|
||||||
overflow: auto;
|
border-right: 0.15rem solid #262626;
|
||||||
|
border-bottom: 0.15rem solid #262626;
|
||||||
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-automator-docs-page {
|
.c-automator-docs-page {
|
||||||
@ -289,9 +289,9 @@
|
|||||||
.c-automator-docs--button {
|
.c-automator-docs--button {
|
||||||
width: 2.8rem;
|
width: 2.8rem;
|
||||||
height: 2.2rem;
|
height: 2.2rem;
|
||||||
margin: 0.1rem;
|
|
||||||
border-radius: var(--var-border-radius, 0.3rem);
|
|
||||||
border-width: 0.1rem;
|
border-width: 0.1rem;
|
||||||
|
border-radius: var(--var-border-radius, 0.3rem);
|
||||||
|
margin: 0.1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -302,13 +302,13 @@
|
|||||||
|
|
||||||
.o-automator-error-underline::before {
|
.o-automator-error-underline::before {
|
||||||
content: "~~~~~~~~~~~~";
|
content: "~~~~~~~~~~~~";
|
||||||
font-size: 0.6rem;
|
overflow: hidden;
|
||||||
font-weight: 700;
|
|
||||||
font-family: "Times New Roman", serif;
|
|
||||||
color: red;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
left: -1px;
|
left: -1px;
|
||||||
overflow: hidden;
|
font-family: "Times New Roman", serif;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
.l-glyph-component {
|
.l-glyph-component {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-component {
|
.c-glyph-component {
|
||||||
@ -37,14 +37,15 @@
|
|||||||
.l-glyph-sacrifice-options {
|
.l-glyph-sacrifice-options {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1rem;
|
width: 27rem;
|
||||||
|
position: relative;
|
||||||
margin-top: -0.2rem;
|
margin-top: -0.2rem;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
position: relative;
|
padding: 1rem;
|
||||||
width: 27rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options {
|
.c-glyph-sacrifice-options {
|
||||||
|
position: relative;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
background: black;
|
background: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
@ -52,7 +53,6 @@
|
|||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
padding: 0.8rem 0.8rem 0.5rem;
|
padding: 0.8rem 0.8rem 0.5rem;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-inventory-management-with-border {
|
.c-glyph-inventory-management-with-border {
|
||||||
@ -69,14 +69,14 @@
|
|||||||
|
|
||||||
.l-glyph-sacrifice-options__help {
|
.l-glyph-sacrifice-options__help {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(100% - 1.8rem);
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: calc(100% - 1.8rem);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__help {
|
.c-glyph-sacrifice-options__help {
|
||||||
color: var(--color-reality-light);
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-reality-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-sacrifice-options__option {
|
.l-glyph-sacrifice-options__option {
|
||||||
@ -85,15 +85,15 @@
|
|||||||
|
|
||||||
.c-glyph-sacrifice-options__option {
|
.c-glyph-sacrifice-options__option {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
width: 4.6rem;
|
width: 4.6rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid;
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__option:hover {
|
.c-glyph-sacrifice-options__option:hover {
|
||||||
@ -103,8 +103,8 @@
|
|||||||
|
|
||||||
.c-glyph-sacrifice-options__option--active {
|
.c-glyph-sacrifice-options__option--active {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: var(--color-reality-light);
|
|
||||||
background-color: var(--color-reality-light);
|
background-color: var(--color-reality-light);
|
||||||
|
border-color: var(--color-reality-light);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,46 +115,46 @@
|
|||||||
|
|
||||||
.c-glyph-sacrifice-options__option__tooltip {
|
.c-glyph-sacrifice-options__option__tooltip {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
font-family: Typewriter;
|
|
||||||
color: var(--color-reality);
|
|
||||||
background: black;
|
|
||||||
width: 17rem;
|
width: 17rem;
|
||||||
line-height: 2rem;
|
|
||||||
padding: 0.3rem 0;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 2rem;
|
||||||
|
opacity: 0;
|
||||||
|
color: var(--color-reality);
|
||||||
|
background: black;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 0.3rem 0;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__option__tooltip::after {
|
.c-glyph-sacrifice-options__option__tooltip::after {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -0.7rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
width: 0;
|
|
||||||
border-bottom: 0 solid var(--color-reality-light);
|
|
||||||
border-right: 0.7rem solid transparent;
|
|
||||||
border-left: 0.7rem solid transparent;
|
|
||||||
content: " ";
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
border-right: 0.7rem solid transparent;
|
||||||
|
border-bottom: 0 solid var(--color-reality-light);
|
||||||
|
border-left: 0.7rem solid transparent;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-left: -0.7rem;
|
||||||
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip {
|
.c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip {
|
||||||
opacity: 1;
|
|
||||||
top: calc(100% + 0.9rem);
|
top: calc(100% + 0.9rem);
|
||||||
border-color: var(--color-reality-light);
|
opacity: 1;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
|
border-color: var(--color-reality-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip {
|
.s-base--metro .c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip {
|
||||||
@ -177,8 +177,8 @@
|
|||||||
.l-glyph-sacrifice-options__rarity-slider-div {
|
.l-glyph-sacrifice-options__rarity-slider-div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
padding-top: 0.3rem;
|
padding-top: 0.3rem;
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
@ -194,8 +194,8 @@
|
|||||||
.c-glyph-sacrifice-options__rarity-slider-handle {
|
.c-glyph-sacrifice-options__rarity-slider-handle {
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
background-color: black !important;
|
background-color: black !important;
|
||||||
box-shadow: 0 0 0 0.1rem var(--color-reality-light) !important;
|
|
||||||
border-radius: var(--var-border-radius, 0.8rem) !important;
|
border-radius: var(--var-border-radius, 0.8rem) !important;
|
||||||
|
box-shadow: 0 0 0 0.1rem var(--color-reality-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__advanced {
|
.c-glyph-sacrifice-options__advanced {
|
||||||
@ -216,14 +216,14 @@
|
|||||||
.c-auto-sac-type-tab__input {
|
.c-auto-sac-type-tab__input {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
font-size: 1.2rem;
|
|
||||||
background-color: #333333;
|
|
||||||
color: var(--color-reality-light);
|
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
|
||||||
border: solid 0.1rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-reality-light);
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
|
background-color: #333333;
|
||||||
|
border: solid 0.1rem;
|
||||||
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-effect-tab__input::-webkit-inner-spin-button,
|
.c-auto-sac-effect-tab__input::-webkit-inner-spin-button,
|
||||||
@ -236,22 +236,22 @@
|
|||||||
.c-auto-sac-effect-tab__input {
|
.c-auto-sac-effect-tab__input {
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
font-size: 1.2rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #333333;
|
font-size: 1.2rem;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
|
||||||
border: solid 0.1rem;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
|
background-color: #333333;
|
||||||
|
border: solid 0.1rem;
|
||||||
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-effect-tab__checkbox {
|
.c-auto-sac-effect-tab__checkbox {
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
|
||||||
border: solid 0.1rem;
|
border: solid 0.1rem;
|
||||||
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-type-tab__input:focus {
|
.c-auto-sac-type-tab__input:focus {
|
||||||
@ -273,11 +273,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__advanced-toggle {
|
.c-glyph-sacrifice-options__advanced-toggle {
|
||||||
background: black;
|
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
|
||||||
border: solid 0.1rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background: black;
|
||||||
|
border: solid 0.1rem;
|
||||||
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-advanced-sac-options-for-glyph-type {
|
.l-advanced-sac-options-for-glyph-type {
|
||||||
@ -294,30 +294,30 @@
|
|||||||
.l-auto-sac-type-tab__row-wrapper {
|
.l-auto-sac-type-tab__row-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
margin: 0.25rem 0.5rem;
|
margin: 0.25rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-type-tab__effect-desc {
|
.c-auto-sac-type-tab__effect-desc {
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
border: 0.1rem solid;
|
|
||||||
padding: 0.25rem 1.5rem;
|
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border: 0.1rem solid;
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 0.25rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-type-tab__effect-desc--active {
|
.c-auto-sac-type-tab__effect-desc--active {
|
||||||
cursor: pointer;
|
|
||||||
opacity: 1;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
opacity: 1;
|
||||||
text-shadow: 0 0 0.3rem;
|
text-shadow: 0 0 0.3rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-type-tab__effect-desc--inactive {
|
.c-auto-sac-type-tab__effect-desc--inactive {
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-auto-sac-type-tab__effect-desc--inactive:hover {
|
.c-auto-sac-type-tab__effect-desc--inactive:hover {
|
||||||
@ -328,38 +328,38 @@
|
|||||||
.l-specified-effect-tab__effect-desc {
|
.l-specified-effect-tab__effect-desc {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-auto-sac-type-tab__effect-desc {
|
.l-auto-sac-type-tab__effect-desc {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: calc(100% - 5rem);
|
width: calc(100% - 5rem);
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-sacrifice-options__advanced-type-select {
|
.l-glyph-sacrifice-options__advanced-type-select {
|
||||||
font-size: 2rem;
|
display: inline-flex;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2rem;
|
||||||
border-radius: var(--var-border-radius, 50%);
|
border-radius: var(--var-border-radius, 50%);
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__advanced-type-select {
|
.c-glyph-sacrifice-options__advanced-type-select {
|
||||||
color: #888888;
|
|
||||||
font-size: 2rem;
|
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
margin: 1rem 0.25rem 0.25rem;
|
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
cursor: pointer;
|
font-size: 2rem;
|
||||||
line-height: 0.1rem;
|
line-height: 0.1rem;
|
||||||
|
color: #888888;
|
||||||
|
margin: 1rem 0.25rem 0.25rem;
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sacrifice-options__advanced-type-select:hover {
|
.c-glyph-sacrifice-options__advanced-type-select:hover {
|
||||||
@ -380,19 +380,19 @@
|
|||||||
.c-glyph-auto-pick-options__option {
|
.c-glyph-auto-pick-options__option {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
padding: 0 0.5rem;
|
justify-content: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
border: var(--var-border-width, 0.2rem) solid;
|
border: var(--var-border-width, 0.2rem) solid;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
margin: 0 0.5rem 1rem;
|
margin: 0 0.5rem 1rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-auto-pick-options__option:hover {
|
.c-glyph-auto-pick-options__option:hover {
|
||||||
@ -402,8 +402,8 @@
|
|||||||
|
|
||||||
.c-glyph-auto-pick-options__option--active {
|
.c-glyph-auto-pick-options__option--active {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: var(--color-reality-light);
|
|
||||||
background-color: var(--color-reality-light);
|
background-color: var(--color-reality-light);
|
||||||
|
border-color: var(--color-reality-light);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -421,10 +421,10 @@
|
|||||||
.l-glyph-tooltip {
|
.l-glyph-tooltip {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
width: 27.4rem;
|
width: 27.4rem;
|
||||||
padding: 0.5rem 0;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-tooltip--up-left {
|
.l-glyph-tooltip--up-left {
|
||||||
@ -444,17 +444,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip {
|
.c-glyph-tooltip {
|
||||||
background-color: black;
|
text-align: center;
|
||||||
color: #ffffff;
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
color: #ffffff;
|
||||||
border-radius: var(--var-border-radius, 0.6rem);
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
background-color: black;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid black;
|
||||||
|
border-radius: var(--var-border-radius, 0.6rem);
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
padding-bottom: 0.6rem;
|
padding-bottom: 0.6rem;
|
||||||
border: var(--var-border-width, 0.2rem) solid black;
|
transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip__description {
|
.c-glyph-tooltip__description {
|
||||||
@ -469,12 +469,12 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: calc(100% + 2.4rem);
|
width: calc(100% + 2.4rem);
|
||||||
border: var(--var-border-width, 0.2rem) solid;
|
|
||||||
padding: 0.3rem 1rem 0.7rem;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: -4rem;
|
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid;
|
||||||
border-radius: var(--var-border-radius, 0.8rem);
|
border-radius: var(--var-border-radius, 0.8rem);
|
||||||
|
margin-top: -4rem;
|
||||||
|
padding: 0.3rem 1rem 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-tooltip__effects {
|
.l-glyph-tooltip__effects {
|
||||||
@ -483,9 +483,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip__sacrifice {
|
.c-glyph-tooltip__sacrifice {
|
||||||
color: #b4b4b4;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
color: #b4b4b4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip__sacrifice--touchable {
|
.c-glyph-tooltip__sacrifice--touchable {
|
||||||
@ -511,10 +511,10 @@
|
|||||||
.l-equipped-glyphs {
|
.l-equipped-glyphs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 20rem;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 20rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-equipped-glyphs__slots {
|
.l-equipped-glyphs__slots {
|
||||||
@ -525,20 +525,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-equipped-glyphs__dropzone {
|
.l-equipped-glyphs__dropzone {
|
||||||
border-radius: 50%;
|
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
height: 7rem;
|
height: 7rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
left: 50%;
|
||||||
background-color: rgba(0, 0, 0, 0%);
|
background-color: rgba(0, 0, 0, 0%);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-equipped-glyphs__empty {
|
.l-equipped-glyphs__empty {
|
||||||
border-radius: 50%;
|
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-equipped-glyphs__empty {
|
.c-equipped-glyphs__empty {
|
||||||
@ -582,9 +582,9 @@
|
|||||||
.c-glyph-set-save-container {
|
.c-glyph-set-save-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
max-width: 30rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 1rem auto 0;
|
margin: 1rem auto 0;
|
||||||
max-width: 30rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-single-set-save {
|
.c-glyph-single-set-save {
|
||||||
@ -610,26 +610,26 @@
|
|||||||
.c-glyph-sets-save-name__input {
|
.c-glyph-sets-save-name__input {
|
||||||
width: 16rem;
|
width: 16rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
font-size: 1.35rem;
|
|
||||||
background-color: black;
|
|
||||||
color: var(--color-reality-light);
|
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
|
||||||
border: none;
|
|
||||||
border-bottom: 0.1rem solid;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0.5rem;
|
font-size: 1.35rem;
|
||||||
|
color: var(--color-reality-light);
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
|
background-color: black;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 0.1rem solid;
|
||||||
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-setting-button {
|
.c-glyph-set-save-setting-button {
|
||||||
width: 12.5rem;
|
width: 12.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
font-size: 0.9rem;
|
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: black;
|
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
|
background-color: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
margin: 0 0.4rem 1rem;
|
margin: 0 0.4rem 1rem;
|
||||||
@ -638,8 +638,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-setting-button:hover {
|
.c-glyph-set-save-setting-button:hover {
|
||||||
background-color: var(--color-reality-light);
|
|
||||||
color: black;
|
color: black;
|
||||||
|
background-color: var(--color-reality-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-setting-button--disabled {
|
.c-glyph-set-save-setting-button--disabled {
|
||||||
@ -647,22 +647,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-setting-button--disabled:hover {
|
.c-glyph-set-save-setting-button--disabled:hover {
|
||||||
background-color: black;
|
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-button {
|
.c-glyph-set-save-button {
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
cursor: pointer;
|
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
text-align: center;
|
cursor: pointer;
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-set-save-button:hover {
|
.c-glyph-set-save-button:hover {
|
||||||
@ -682,9 +682,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-set-save-spacing {
|
.l-glyph-set-save-spacing {
|
||||||
height: 6rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 6rem;
|
||||||
place-content: flex-end;
|
place-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -719,19 +719,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-current-glyph-effects {
|
.c-current-glyph-effects {
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
height: 30rem;
|
|
||||||
width: 45rem;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
width: 45rem;
|
||||||
|
height: 30rem;
|
||||||
|
position: relative;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
background: black;
|
background: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
padding: 0.8rem 0.8rem 1.8rem;
|
padding: 0.8rem 0.8rem 1.8rem;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-current-glyph-effects-with-top-border {
|
.c-current-glyph-effects-with-top-border {
|
||||||
@ -743,8 +743,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip .pelle-current-glyph-effects {
|
.c-glyph-tooltip .pelle-current-glyph-effects {
|
||||||
color: var(--color-pelle--base);
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .c-current-glyph-effects {
|
.t-s8 .c-current-glyph-effects {
|
||||||
@ -752,15 +752,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-current-glyph-effects__header {
|
.c-current-glyph-effects__header {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-equipped-glyphs-and-effects-container {
|
.l-equipped-glyphs-and-effects-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
|
||||||
width: 65rem;
|
width: 65rem;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-info-wrapper {
|
.l-glyph-info-wrapper {
|
||||||
@ -776,9 +776,9 @@
|
|||||||
.c-glyph-info-options {
|
.c-glyph-info-options {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
|
||||||
height: 2.8rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 2.8rem;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .c-glyph-info-options {
|
.t-s8 .c-glyph-info-options {
|
||||||
@ -787,20 +787,20 @@
|
|||||||
|
|
||||||
.c-glyph-info-button {
|
.c-glyph-info-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 50%;
|
||||||
|
z-index: 1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 50%;
|
text-align: center;
|
||||||
cursor: pointer;
|
font-family: Typewriter;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-reality-light);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: 0.2rem solid var(--color-reality);
|
border: 0.2rem solid var(--color-reality);
|
||||||
border-radius: 0.5rem 0.5rem 0 0;
|
border-radius: 0.5rem 0.5rem 0 0;
|
||||||
color: var(--color-reality-light);
|
|
||||||
transition: all 0.2s, border-bottom 0ms, padding-bottom 0ms;
|
transition: all 0.2s, border-bottom 0ms, padding-bottom 0ms;
|
||||||
text-align: center;
|
cursor: pointer;
|
||||||
font-size: 1.2rem;
|
|
||||||
font-family: Typewriter;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .c-glyph-info-button {
|
.t-s8 .c-glyph-info-button {
|
||||||
@ -810,23 +810,23 @@
|
|||||||
.l-glyph-info-button {
|
.l-glyph-info-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 22rem;
|
width: 22rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .c-glyph-info-button {
|
.s-base--metro .c-glyph-info-button {
|
||||||
border-radius: 0;
|
|
||||||
border-width: 0.1rem;
|
|
||||||
height: 2.9rem;
|
height: 2.9rem;
|
||||||
|
border-width: 0.1rem;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-info-button--active {
|
.c-glyph-info-button--active {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
cursor: default;
|
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
transition-duration: 0ms;
|
transition-duration: 0ms;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-info-button--inactive:hover {
|
.c-glyph-info-button--inactive:hover {
|
||||||
@ -839,11 +839,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-peek {
|
.c-glyph-peek {
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
height: 9rem;
|
||||||
border: 0.1rem solid #b8b8b8;
|
border: 0.1rem solid #b8b8b8;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
height: 9rem;
|
|
||||||
width: calc(100% - 1rem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-choice-container {
|
.c-glyph-choice-container {
|
||||||
@ -855,38 +855,38 @@
|
|||||||
.c-glyph-choice-single-glyph {
|
.c-glyph-choice-single-glyph {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
width: 36rem;
|
||||||
|
height: 12rem;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
height: 12rem;
|
|
||||||
width: 36rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-choice-icon {
|
.c-glyph-choice-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-shadow: 0.1rem 0.1rem 0.1rem black, 0.1rem 0.1rem 0 black;
|
||||||
background-color: rgba(0, 0, 0, 10%);
|
background-color: rgba(0, 0, 0, 10%);
|
||||||
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
|
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
font-size: 1.2rem;
|
|
||||||
height: 10rem;
|
|
||||||
width: 10rem;
|
|
||||||
text-shadow: 0.1rem 0.1rem 0.1rem black, 0.1rem 0.1rem 0 black;
|
|
||||||
box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 50%);
|
box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-choice-effect-list {
|
.c-glyph-choice-effect-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 25rem;
|
||||||
|
height: 11rem;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
background-color: rgba(0, 0, 0, 10%);
|
background-color: rgba(0, 0, 0, 10%);
|
||||||
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
|
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
height: 11rem;
|
|
||||||
width: 25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .c-glyph-peek {
|
.t-s8 .c-glyph-peek {
|
||||||
@ -894,16 +894,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-sacrificed-glyphs--dragover {
|
.c-sacrificed-glyphs--dragover {
|
||||||
|
z-index: 1;
|
||||||
border: 0.3rem solid gray;
|
border: 0.3rem solid gray;
|
||||||
box-shadow: 0 0 0.1rem 0.1rem black;
|
box-shadow: 0 0 0.1rem 0.1rem black;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--dark .c-sacrificed-glyphs--dragover {
|
.s-base--dark .c-sacrificed-glyphs--dragover {
|
||||||
|
z-index: 2;
|
||||||
|
background-color: transparent;
|
||||||
border: 0.2rem solid white;
|
border: 0.2rem solid white;
|
||||||
box-shadow: 0 0 0.1rem 0.1rem white;
|
box-shadow: 0 0 0.1rem 0.1rem white;
|
||||||
background-color: transparent;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-sacrificed-glyphs__header {
|
.c-sacrificed-glyphs__header {
|
||||||
@ -943,9 +943,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-sacrificed-glyphs__confirm {
|
.c-sacrificed-glyphs__confirm {
|
||||||
cursor: pointer;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-altered-glyphs-toggle-button {
|
.c-altered-glyphs-toggle-button {
|
||||||
@ -987,18 +987,18 @@
|
|||||||
.c-glyph-inventory-option {
|
.c-glyph-inventory-option {
|
||||||
width: 19rem;
|
width: 19rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
text-align: center;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1010,54 +1010,54 @@
|
|||||||
|
|
||||||
.c-glyph-inventory-option__tooltip {
|
.c-glyph-inventory-option__tooltip {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
font-family: Typewriter;
|
|
||||||
color: var(--color-reality);
|
|
||||||
background: black;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0%;
|
|
||||||
line-height: 1.8rem;
|
|
||||||
padding: 0.3rem;
|
|
||||||
z-index: 3;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
|
left: 0%;
|
||||||
|
z-index: 3;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.8rem;
|
||||||
|
opacity: 0;
|
||||||
|
color: var(--color-reality);
|
||||||
|
background: black;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 0.3rem;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-inventory-option__tooltip::after {
|
.c-glyph-inventory-option__tooltip::after {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -0.7rem;
|
z-index: 0;
|
||||||
margin-bottom: 0;
|
|
||||||
width: 0;
|
|
||||||
border-top: 0 solid var(--color-reality-light);
|
border-top: 0 solid var(--color-reality-light);
|
||||||
border-right: 0.7rem solid transparent;
|
border-right: 0.7rem solid transparent;
|
||||||
border-left: 0.7rem solid transparent;
|
border-left: 0.7rem solid transparent;
|
||||||
content: " ";
|
margin-bottom: 0;
|
||||||
|
margin-left: -0.7rem;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip {
|
.c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip {
|
||||||
opacity: 1;
|
|
||||||
bottom: calc(100% + 0.9rem);
|
bottom: calc(100% + 0.9rem);
|
||||||
border-color: var(--color-reality-light);
|
opacity: 1;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
|
border-color: var(--color-reality-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip {
|
.s-base--metro .c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip {
|
||||||
opacity: 1;
|
|
||||||
bottom: calc(100% + 0.8rem);
|
bottom: calc(100% + 0.8rem);
|
||||||
border-color: var(--color-reality-light);
|
opacity: 1;
|
||||||
color: var(--color-reality-light);
|
color: var(--color-reality-light);
|
||||||
|
border-color: var(--color-reality-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip::after {
|
.c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip::after {
|
||||||
@ -1072,51 +1072,51 @@
|
|||||||
.l-glyph-color-box {
|
.l-glyph-color-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -50%;
|
|
||||||
top: 27.9rem;
|
top: 27.9rem;
|
||||||
|
left: -50%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-color-position__top {
|
.l-glyph-color-position__top {
|
||||||
|
width: 0%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 22.5rem;
|
right: 22.5rem;
|
||||||
width: 0%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-color-position__low {
|
.l-glyph-color-position__low {
|
||||||
|
width: 0%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2.9rem;
|
top: 2.9rem;
|
||||||
right: 22.5rem;
|
right: 22.5rem;
|
||||||
width: 0%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-sidebar-option-container {
|
.l-glyph-sidebar-option-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 5rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-sidebar-tab-container {
|
.l-glyph-sidebar-tab-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
|
||||||
height: 5rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 5rem;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sidebar-button {
|
.c-glyph-sidebar-button {
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-reality-light);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-radius: var(--var-border-radius, 0.5rem) var(--var-border-radius, 0.5rem) 0 0;
|
border-radius: var(--var-border-radius, 0.5rem) var(--var-border-radius, 0.5rem) 0 0;
|
||||||
color: var(--color-reality-light);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s, border-bottom 0ms, padding-bottom 0ms;
|
transition: all 0.2s, border-bottom 0ms, padding-bottom 0ms;
|
||||||
text-align: center;
|
cursor: pointer;
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Typewriter;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .c-glyph-sidebar-button {
|
.s-base--metro .c-glyph-sidebar-button {
|
||||||
@ -1130,9 +1130,9 @@
|
|||||||
|
|
||||||
.c-glyph-sidebar-button--active {
|
.c-glyph-sidebar-button--active {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
cursor: default;
|
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
transition-duration: 0ms;
|
transition-duration: 0ms;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-sidebar-button--active:hover {
|
.c-glyph-sidebar-button--active:hover {
|
||||||
@ -1143,11 +1143,11 @@
|
|||||||
.l-glyph-sidebar-button {
|
.l-glyph-sidebar-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 4rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
margin: 0 0.5rem;
|
margin: 0 0.5rem;
|
||||||
height: 4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-glyph-sidebar-panel-size {
|
.l-glyph-sidebar-panel-size {
|
||||||
@ -1166,20 +1166,20 @@
|
|||||||
|
|
||||||
.o-glyph-color-checkbox {
|
.o-glyph-color-checkbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 2rem;
|
font-weight: bold;
|
||||||
width: 2rem;
|
color: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
border: var(--var-border-width, 0.2rem) solid var(--color-reality);
|
||||||
border-top-right-radius: var(--var-border-radius, 1rem);
|
border-top-right-radius: var(--var-border-radius, 1rem);
|
||||||
border-bottom-left-radius: var(--var-border-radius, 0.3rem);
|
border-bottom-left-radius: var(--var-border-radius, 0.3rem);
|
||||||
color: black;
|
transition-duration: 0.2s;
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition-duration: 0.2s;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .o-glyph-color-checkbox {
|
.t-s8 .o-glyph-color-checkbox {
|
||||||
|
|||||||
@ -33,14 +33,14 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
margin: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
background: none;
|
background: none;
|
||||||
height: 100%;
|
margin: auto;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -60,10 +60,10 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.resource {
|
.resource {
|
||||||
height: 7rem;
|
|
||||||
width: 12rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 12rem;
|
||||||
|
height: 7rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--color-base);
|
background-color: var(--color-base);
|
||||||
@ -73,9 +73,9 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.resource h2 {
|
.resource h2 {
|
||||||
margin: 0;
|
|
||||||
font-size: 1.9rem;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
font-size: 1.9rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-dark .resource h2,
|
.t-dark .resource h2,
|
||||||
@ -86,10 +86,10 @@ body.t-s9 {
|
|||||||
.resource-information {
|
.resource-information {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
|
||||||
color: var(--color-text);
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-gain {
|
.resource-gain {
|
||||||
@ -147,8 +147,8 @@ body.t-s9 {
|
|||||||
.resource-infinity-canreset,
|
.resource-infinity-canreset,
|
||||||
.resource-eternity-canreset {
|
.resource-eternity-canreset {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
cursor: pointer;
|
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-infinity-canreset:hover,
|
.resource-infinity-canreset:hover,
|
||||||
@ -163,13 +163,13 @@ body.t-s9 {
|
|||||||
|
|
||||||
.o-tab-btn {
|
.o-tab-btn {
|
||||||
height: 4.6rem;
|
height: 4.6rem;
|
||||||
|
position: relative;
|
||||||
|
font-size: 1.4rem;
|
||||||
border-width: 0.1rem;
|
border-width: 0.1rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-top: -0.1rem;
|
margin-top: -0.1rem;
|
||||||
font-size: 1.4rem;
|
|
||||||
position: relative;
|
|
||||||
transition-duration: 0.15s;
|
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
|
transition-duration: 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn:hover {
|
.o-tab-btn:hover {
|
||||||
@ -181,34 +181,34 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-tab-btn-inner {
|
.l-tab-btn-inner {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn:hover .subtabs {
|
.o-tab-btn:hover .subtabs {
|
||||||
|
left: 14.3rem;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
left: 14.3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn::after {
|
.o-tab-btn::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
left: calc(100% + 0.1rem);
|
|
||||||
top: calc(0% + -0.1rem);
|
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(0% + -0.1rem);
|
||||||
|
left: calc(100% + 0.1rem);
|
||||||
|
z-index: 4;
|
||||||
|
border-top: 2.3rem solid transparent;
|
||||||
border-bottom: 2.3rem solid transparent;
|
border-bottom: 2.3rem solid transparent;
|
||||||
border-left: 0 solid var(--color-accent);
|
border-left: 0 solid var(--color-accent);
|
||||||
border-top: 2.3rem solid transparent;
|
|
||||||
z-index: 4;
|
|
||||||
transition-duration: 0.15s;
|
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
|
transition-duration: 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--subtabs:hover::after {
|
.o-tab-btn--subtabs:hover::after {
|
||||||
@ -250,9 +250,9 @@ body.t-s9 {
|
|||||||
|
|
||||||
.tab-container {
|
.tab-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-container > .l-antimatter-dim-tab {
|
.tab-container > .l-antimatter-dim-tab {
|
||||||
@ -271,28 +271,28 @@ body.t-s9 {
|
|||||||
|
|
||||||
.subtabs {
|
.subtabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.6rem;
|
top: -0.6rem;
|
||||||
left: 12rem;
|
left: 12rem;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
transition: pointer-events 0s linear 0s, all 0.15s linear 0.2s;
|
opacity: 0;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
transition: pointer-events 0s linear 0s, all 0.15s linear 0.2s;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--subtab {
|
.o-tab-btn--subtab {
|
||||||
height: 4.7rem;
|
|
||||||
width: 4.7rem;
|
width: 4.7rem;
|
||||||
|
height: 4.7rem;
|
||||||
font-size: 2.3rem;
|
font-size: 2.3rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: -0.1rem;
|
|
||||||
line-height: 4.5rem;
|
line-height: 4.5rem;
|
||||||
cursor: pointer;
|
margin-left: -0.1rem;
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--subtab .o-tab-btn--cel3 {
|
.o-tab-btn--subtab .o-tab-btn--cel3 {
|
||||||
@ -301,41 +301,41 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-subtab__tooltip {
|
.o-subtab__tooltip {
|
||||||
opacity: 0;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border: 0.1rem solid var(--color-accent);
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-base);
|
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
line-height: 2.8rem;
|
|
||||||
margin-left: -7.7rem;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
opacity: 0;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-base);
|
||||||
|
border: 0.1rem solid var(--color-accent);
|
||||||
|
margin-left: -7.7rem;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-subtab__tooltip::after {
|
.o-subtab__tooltip::after {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -0.7rem;
|
z-index: 0;
|
||||||
margin-bottom: 0;
|
|
||||||
width: 0;
|
|
||||||
border-top: 0 solid var(--color-accent);
|
border-top: 0 solid var(--color-accent);
|
||||||
border-right: 0.7rem solid transparent;
|
border-right: 0.7rem solid transparent;
|
||||||
border-left: 0.7rem solid transparent;
|
border-left: 0.7rem solid transparent;
|
||||||
content: " ";
|
margin-bottom: 0;
|
||||||
|
margin-left: -0.7rem;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--subtab:hover .o-subtab__tooltip {
|
.o-tab-btn--subtab:hover .o-subtab__tooltip {
|
||||||
opacity: 1;
|
|
||||||
bottom: calc(100% + 0.7rem);
|
bottom: calc(100% + 0.7rem);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--subtab:hover .o-subtab__tooltip::after {
|
.o-tab-btn--subtab:hover .o-subtab__tooltip::after {
|
||||||
@ -392,86 +392,86 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-primary-btn--new {
|
.o-primary-btn--new {
|
||||||
background-color: var(--color-base);
|
overflow: hidden;
|
||||||
border: 0.1rem solid var(--color-good);
|
|
||||||
padding: 1rem;
|
|
||||||
color: var(--color-text);
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
position: relative;
|
|
||||||
width: 21rem;
|
width: 21rem;
|
||||||
height: 4.4rem;
|
height: 4.4rem;
|
||||||
overflow: hidden;
|
position: relative;
|
||||||
|
font-family: Typewriter, serif;
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-base);
|
||||||
|
border: 0.1rem solid var(--color-good);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-primary-btn--dimension-reset {
|
.o-primary-btn--dimension-reset {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-content {
|
.button-content {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
z-index: 1;
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill-purchased {
|
.fill-purchased {
|
||||||
height: 100%;
|
|
||||||
width: 20%;
|
|
||||||
background-color: var(--color-good);
|
|
||||||
float: left;
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-good);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill-possible {
|
.fill-possible {
|
||||||
height: 100%;
|
|
||||||
width: 40%;
|
|
||||||
background-color: var(--color-good-dark);
|
|
||||||
float: left;
|
float: left;
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-good-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modes-container {
|
.modes-container {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 5rem;
|
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
padding: 0 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resets-container {
|
.resets-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
|
||||||
height: 16rem;
|
height: 16rem;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reset-container h4 {
|
.reset-container h4 {
|
||||||
margin: 0;
|
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reset-container {
|
.reset-container {
|
||||||
width: 40%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
width: 40%;
|
||||||
justify-content: space-between;
|
|
||||||
height: 16rem;
|
height: 16rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
margin-top: 0.3rem;
|
margin-top: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -490,34 +490,34 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tickspeed-btn {
|
.tickspeed-btn {
|
||||||
padding: 0.5rem;
|
height: 3rem;
|
||||||
min-width: 15rem;
|
min-width: 15rem;
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
height: 3rem;
|
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tickspeed-max-btn {
|
.tickspeed-max-btn {
|
||||||
padding: 0.5rem;
|
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tickspeed-labels span {
|
.tickspeed-labels span {
|
||||||
color: var(--color-text);
|
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
|
color: var(--color-text);
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.particle {
|
.particle {
|
||||||
position: absolute;
|
|
||||||
color: var(--color-text);
|
|
||||||
height: 1rem;
|
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
color: var(--color-text);
|
||||||
background-image: url("../icon.png");
|
background-image: url("../icon.png");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sacrifice-btn {
|
.sacrifice-btn {
|
||||||
@ -527,29 +527,29 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-big-crunch {
|
.btn-big-crunch {
|
||||||
padding: 2rem;
|
z-index: 1;
|
||||||
font-size: 5rem;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-infinity);
|
|
||||||
background-color: black;
|
|
||||||
color: var(--color-infinity);
|
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
|
font-size: 5rem;
|
||||||
|
color: var(--color-infinity);
|
||||||
|
background-color: black;
|
||||||
|
border: var(--var-border-width, 0.2rem) solid var(--color-infinity);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 2rem;
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-big-crunch--small {
|
.btn-big-crunch--small {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4.3rem;
|
top: 4.3rem;
|
||||||
left: calc(50% - 0.6rem);
|
left: calc(50% - 0.6rem);
|
||||||
transform: translateX(-50%);
|
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-big-crunch:hover {
|
.btn-big-crunch:hover {
|
||||||
background-color: var(--color-infinity);
|
|
||||||
color: black;
|
color: black;
|
||||||
|
background-color: var(--color-infinity);
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-normal .c-game-header__tesseract-available {
|
.t-normal .c-game-header__tesseract-available {
|
||||||
@ -562,12 +562,12 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.information-header {
|
.information-header {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
border-bottom: 0.1rem solid var(--color-good);
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
border-bottom: 0.1rem solid var(--color-good);
|
|
||||||
padding-bottom: 0.6rem;
|
padding-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -578,8 +578,8 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.t-normal .o-achievement__tooltip {
|
.t-normal .o-achievement__tooltip {
|
||||||
border: 0.1rem solid var(--color-accent);
|
|
||||||
background: var(--color-base);
|
background: var(--color-base);
|
||||||
|
border: 0.1rem solid var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-normal .o-achievement__tooltip::after {
|
.t-normal .o-achievement__tooltip::after {
|
||||||
@ -587,23 +587,23 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-infinity-upgrade-btn--unavailable {
|
.o-infinity-upgrade-btn--unavailable {
|
||||||
background: #525252;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
background: #525252;
|
||||||
border: 0.1rem solid var(--color-accent);
|
border: 0.1rem solid var(--color-accent);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-infinity-upgrade-btn--unavailable:hover {
|
.o-infinity-upgrade-btn--unavailable:hover {
|
||||||
background: #525252;
|
|
||||||
color: var(--color-text-inverted);
|
color: var(--color-text-inverted);
|
||||||
|
background: #525252;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-primary-btn--option,
|
.o-primary-btn--option,
|
||||||
.o-primary-btn--option-wide,
|
.o-primary-btn--option-wide,
|
||||||
.c-select-theme__item,
|
.c-select-theme__item,
|
||||||
.c-select-notation__item {
|
.c-select-notation__item {
|
||||||
background: var(--color-base);
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
background: var(--color-base);
|
||||||
border: 0.1rem solid var(--color-good);
|
border: 0.1rem solid var(--color-good);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -645,16 +645,16 @@ body.t-s9 {
|
|||||||
|
|
||||||
.o-autobuyer-input,
|
.o-autobuyer-input,
|
||||||
.c-autobuyer-box__mode-select {
|
.c-autobuyer-box__mode-select {
|
||||||
|
color: var(--color-accent);
|
||||||
background: var(--color-base);
|
background: var(--color-base);
|
||||||
border: 0.1rem solid var(--color-accent);
|
border: 0.1rem solid var(--color-accent);
|
||||||
color: var(--color-accent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-metro .o-autobuyer-input,
|
.t-metro .o-autobuyer-input,
|
||||||
.t-metro .c-autobuyer-box__mode-select {
|
.t-metro .c-autobuyer-box__mode-select {
|
||||||
color: black;
|
color: black;
|
||||||
border: 0.1rem solid #a9a9a9;
|
|
||||||
background: white;
|
background: white;
|
||||||
|
border: 0.1rem solid #a9a9a9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-dark .o-autobuyer-input,
|
.t-dark .o-autobuyer-input,
|
||||||
@ -692,11 +692,11 @@ body.t-s9 {
|
|||||||
.c-antimatter-dim-row,
|
.c-antimatter-dim-row,
|
||||||
.c-infinity-dim-row,
|
.c-infinity-dim-row,
|
||||||
.c-time-dim-row {
|
.c-time-dim-row {
|
||||||
color: var(--color-text);
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: var(--color-text);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.5rem 0 0.5rem 1rem;
|
padding: 0.5rem 0 0.5rem 1rem;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-antimatter-dim-row:nth-child(even) {
|
.c-antimatter-dim-row:nth-child(even) {
|
||||||
@ -780,11 +780,11 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-eternity-button__eternity-text {
|
.o-eternity-button__eternity-text {
|
||||||
color: var(--color-eternity);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
color: var(--color-eternity);
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -804,13 +804,13 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-game-header__infinity-points {
|
.l-game-header__infinity-points {
|
||||||
left: 72%;
|
|
||||||
top: 8.5rem;
|
top: 8.5rem;
|
||||||
|
left: 72%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-game-header__eternity-points {
|
.l-game-header__eternity-points {
|
||||||
right: 72%;
|
|
||||||
top: 8.5rem;
|
top: 8.5rem;
|
||||||
|
right: 72%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-reset-buttons-container__reality-button {
|
.l-reset-buttons-container__reality-button {
|
||||||
@ -823,10 +823,10 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-reset-buttons-container {
|
.l-reset-buttons-container {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 8rem;
|
min-height: 8rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-game-header__antimatter-container {
|
.l-game-header__antimatter-container {
|
||||||
@ -891,11 +891,11 @@ body.t-s9 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-help-me {
|
.l-help-me {
|
||||||
|
height: 2rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4.9rem;
|
top: 4.9rem;
|
||||||
height: 2rem;
|
|
||||||
border-radius: var(--var-border-radius, 50%);
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
border-radius: var(--var-border-radius, 50%);
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
.c-old-ui {
|
.c-old-ui {
|
||||||
padding: 0.9rem 1.5rem 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.9rem 1.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui {
|
.l-old-ui {
|
||||||
@ -21,8 +21,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui__big-crunch-btn {
|
.l-old-ui__big-crunch-btn {
|
||||||
margin-top: 1.9rem;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin-top: 1.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui__big-crunch-btn--overlay {
|
.l-old-ui__big-crunch-btn--overlay {
|
||||||
@ -30,15 +30,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui__page {
|
.l-old-ui__page {
|
||||||
width: 100%;
|
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui-page {
|
.l-old-ui-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-emptiness {
|
.o-emptiness {
|
||||||
@ -46,17 +46,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-big-crunch-btn {
|
.o-big-crunch-btn {
|
||||||
font-family: Typewriter, serif;
|
|
||||||
font-size: 5rem;
|
|
||||||
width: 36rem;
|
width: 36rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
font-family: Typewriter, serif;
|
||||||
|
font-size: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-old-ui-antimatter-dim-tab {
|
.l-old-ui-antimatter-dim-tab {
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -77,9 +77,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--secondary {
|
.o-tab-btn--secondary {
|
||||||
font-size: 1.3rem;
|
|
||||||
width: 17.5rem;
|
width: 17.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
margin: 0.5rem 0.8rem;
|
margin: 0.5rem 0.8rem;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,12 @@
|
|||||||
body.t-dark-metro {
|
body.t-dark-metro {
|
||||||
|
color: #757575;
|
||||||
background-image: url("../images/dark-bg.png");
|
background-image: url("../images/dark-bg.png");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
color: #757575;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-dark-metro .c-tt-buy-button--unlocked {
|
.t-dark-metro .c-tt-buy-button--unlocked {
|
||||||
background: #212121;
|
|
||||||
color: #00bcd4;
|
color: #00bcd4;
|
||||||
|
background: #212121;
|
||||||
border: 0.1rem solid #00bcd4;
|
border: 0.1rem solid #00bcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
body.t-dark {
|
body.t-dark {
|
||||||
|
color: #888888;
|
||||||
background-image: url("../images/dark-bg.png");
|
background-image: url("../images/dark-bg.png");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
color: #888888;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input.t-dark {
|
input.t-dark {
|
||||||
|
|||||||
@ -24,8 +24,8 @@ body.t-inverted-metro {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.t-inverted-metro .c-tt-buy-button--unlocked {
|
.t-inverted-metro .c-tt-buy-button--unlocked {
|
||||||
background: #212121;
|
|
||||||
color: #00bcd4;
|
color: #00bcd4;
|
||||||
|
background: #212121;
|
||||||
border: 0.1rem solid #00bcd4;
|
border: 0.1rem solid #00bcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.t-metro .c-tt-buy-button--unlocked {
|
.t-metro .c-tt-buy-button--unlocked {
|
||||||
background: #212121;
|
|
||||||
color: #00bcd4;
|
color: #00bcd4;
|
||||||
|
background: #212121;
|
||||||
border: 0.1rem solid #00bcd4;
|
border: 0.1rem solid #00bcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
html {
|
html {
|
||||||
background: url("../images/s1-bg.svg") no-repeat;
|
|
||||||
align-content: center;
|
align-content: center;
|
||||||
background-size: 100%;
|
background: url("../images/s1-bg.svg") no-repeat;
|
||||||
background-color: #d72621;
|
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
background-color: #d72621;
|
||||||
background-position: center bottom;
|
background-position: center bottom;
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.t-s1 {
|
body.t-s1 {
|
||||||
@ -37,16 +37,16 @@ body.t-s1 {
|
|||||||
|
|
||||||
#snow {
|
#snow {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
height: 100%;
|
||||||
top: 0;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: none;
|
background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
|
||||||
animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
|
animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes snow {
|
@keyframes snow {
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
.t-s10 #stars {
|
.t-s10 #stars {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
/* Make video to at least 100% wide and tall */
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
|
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
|
/* Make video to at least 100% wide and tall */
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
/* Center the video */
|
/* Center the video */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -21,8 +21,8 @@ body.t-s10 {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
background: black;
|
background: black;
|
||||||
background-image: url("../images/stars-bg.png");
|
background-image: url("../images/stars-bg.png");
|
||||||
background-size: 100%;
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s10 .c-tt-amount {
|
.t-s10 .c-tt-amount {
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
body.t-s11 {
|
body.t-s11 {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
background: black;
|
background: black;
|
||||||
background-size: 100%;
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s11 .c-tt-amount {
|
.t-s11 .c-tt-amount {
|
||||||
@ -52,9 +52,9 @@ body.t-s11 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-tachyon-particle {
|
.o-tachyon-particle {
|
||||||
|
fill: orange !important;
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
fill: orange !important;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
html {
|
html {
|
||||||
background: url("../images/s2-bg.svg") no-repeat;
|
background: url("../images/s2-bg.svg") no-repeat;
|
||||||
|
background-color: white;
|
||||||
background-position-x: 50%;
|
background-position-x: 50%;
|
||||||
background-position-y: 50%;
|
background-position-y: 50%;
|
||||||
background-size: 50%;
|
background-size: 50%;
|
||||||
background-color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
* {
|
* {
|
||||||
border-radius: 40% !important;
|
|
||||||
box-shadow: 1px 1px 1px 0 #9e9e9e;
|
|
||||||
font-family:
|
font-family:
|
||||||
"Comic Sans MS",
|
"Comic Sans MS",
|
||||||
cursive,
|
cursive,
|
||||||
@ -10,12 +8,14 @@
|
|||||||
fab,
|
fab,
|
||||||
"Font Awesome 6 Brands",
|
"Font Awesome 6 Brands",
|
||||||
"Font Awesome 6 Free" !important;
|
"Font Awesome 6 Free" !important;
|
||||||
|
border-radius: 40% !important;
|
||||||
|
box-shadow: 1px 1px 1px 0 #9e9e9e;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: #ff00ff;
|
|
||||||
color: black !important;
|
color: black !important;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
background-color: #ff00ff;
|
||||||
background-position: center bottom;
|
background-position: center bottom;
|
||||||
border: 0.1rem solid white !important;
|
border: 0.1rem solid white !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
.t-s6 #stars {
|
.t-s6 #stars {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
/* Make video to at least 100% wide and tall */
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
|
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
|
/* Make video to at least 100% wide and tall */
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
/* Center the video */
|
/* Center the video */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -21,8 +21,8 @@ body.t-s6 {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
background: black;
|
background: black;
|
||||||
background-image: url("../images/stars-bg.png");
|
background-image: url("../images/stars-bg.png");
|
||||||
background-size: 100%;
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s6 .c-tt-amount {
|
.t-s6 .c-tt-amount {
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
* {
|
* {
|
||||||
font-family: Arial, Typewriter;
|
font-family: Arial, Typewriter;
|
||||||
transition-duration: 1ms !important;
|
|
||||||
border-width: 1px !important;
|
border-width: 1px !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
transition-duration: 1ms !important;
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -12,21 +12,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border-radius: 0 !important;
|
|
||||||
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
|
||||||
padding: 3px !important;
|
|
||||||
border: 0.1rem solid #9b9b9b !important;
|
|
||||||
color: black !important;
|
color: black !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
|
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||||
|
border: 0.1rem solid #9b9b9b !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
padding: 3px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-primary-btn {
|
.o-primary-btn {
|
||||||
border-radius: 0 !important;
|
|
||||||
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
|
||||||
padding: 3px !important;
|
|
||||||
border: 0.1rem solid #9b9b9b !important;
|
|
||||||
color: black !important;
|
color: black !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
|
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||||
|
border: 0.1rem solid #9b9b9b !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
padding: 3px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
@ -34,8 +34,8 @@ button:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip {
|
.c-glyph-tooltip {
|
||||||
filter: saturate(0);
|
|
||||||
text-shadow: none !important;
|
text-shadow: none !important;
|
||||||
|
filter: saturate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-glyph-tooltip__effect span {
|
.c-glyph-tooltip__effect span {
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
body.t-s8 {
|
body.t-s8 {
|
||||||
background: url("../images/s8-bg.jpg") no-repeat;
|
|
||||||
color: black;
|
|
||||||
background-color: white;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
color: black;
|
||||||
|
background: url("../images/s8-bg.jpg") no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
/* Center and scale the image nicely */
|
/* Center and scale the image nicely */
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .container {
|
.t-s8 .container {
|
||||||
@ -23,8 +23,8 @@ body.t-s8 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.t-s8 .c-tt-buy-button--unlocked {
|
.t-s8 .c-tt-buy-button--unlocked {
|
||||||
background: #212121;
|
|
||||||
color: #00bcd4;
|
color: #00bcd4;
|
||||||
|
background: #212121;
|
||||||
border: 0.1rem solid #00bcd4;
|
border: 0.1rem solid #00bcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
.l-time-studies-tab {
|
.l-time-studies-tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-time-studies-tab__tree {
|
.l-time-studies-tab__tree {
|
||||||
@ -30,23 +30,23 @@
|
|||||||
|
|
||||||
.l-time-study-connection {
|
.l-time-study-connection {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #region o-time-study */
|
/* #region o-time-study */
|
||||||
|
|
||||||
.c-pelle-useless {
|
.c-pelle-useless {
|
||||||
border: 0.1rem solid;
|
|
||||||
background-color: crimson;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
transition-duration: 0.2s;
|
font-family: Typewriter, serif;
|
||||||
border-radius: var(--var-border-radius, 0.4rem);
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: crimson;
|
||||||
|
border: 0.1rem solid;
|
||||||
|
border-radius: var(--var-border-radius, 0.4rem);
|
||||||
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-useless-available {
|
.c-pelle-useless-available {
|
||||||
@ -55,15 +55,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-useless--unavailable {
|
.c-pelle-useless--unavailable {
|
||||||
animation: none;
|
|
||||||
color: black;
|
color: black;
|
||||||
filter: grayscale(90%);
|
filter: grayscale(90%);
|
||||||
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-useless--unavailable:hover {
|
.c-pelle-useless--unavailable:hover {
|
||||||
cursor: default;
|
|
||||||
background-color: var(--color-bad);
|
background-color: var(--color-bad);
|
||||||
filter: grayscale(0%);
|
filter: grayscale(0%);
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-useless--bought {
|
.c-pelle-useless--bought {
|
||||||
@ -72,15 +72,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study {
|
.o-time-study {
|
||||||
border: 0.1rem solid;
|
|
||||||
background-color: black;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Typewriter, serif;
|
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
transition-duration: 0.2s;
|
font-family: Typewriter, serif;
|
||||||
border-radius: var(--var-border-radius, 0.4rem);
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: black;
|
||||||
|
border: 0.1rem solid;
|
||||||
|
border-radius: var(--var-border-radius, 0.4rem);
|
||||||
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--available {
|
.o-time-study--available {
|
||||||
@ -89,8 +89,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--available:hover {
|
.o-time-study--available:hover {
|
||||||
animation: none;
|
|
||||||
background-color: #00bcd4;
|
background-color: #00bcd4;
|
||||||
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--unavailable {
|
.o-time-study--unavailable {
|
||||||
@ -123,8 +123,8 @@
|
|||||||
.o-time-study--small {
|
.o-time-study--small {
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-normal--available {
|
.o-time-study-normal--available {
|
||||||
@ -248,9 +248,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-triad--available {
|
.o-time-study-triad--available {
|
||||||
border-color: black;
|
|
||||||
color: var(--color-v--base);
|
color: var(--color-v--base);
|
||||||
background: black;
|
background: black;
|
||||||
|
border-color: black;
|
||||||
animation: a-time-study 1.5s infinite;
|
animation: a-time-study 1.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -328,44 +328,44 @@
|
|||||||
|
|
||||||
.o-time-study-normal--bought {
|
.o-time-study-normal--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: var(--color-eternity);
|
background-color: var(--color-eternity);
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-antimatter-dim--bought {
|
.o-time-study-antimatter-dim--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #22aa48;
|
background-color: #22aa48;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-infinity-dim--bought {
|
.o-time-study-infinity-dim--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #b67f33;
|
background-color: #b67f33;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-time-dim--bought {
|
.o-time-study-time-dim--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #b241e3;
|
background-color: #b241e3;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-active--bought {
|
.o-time-study-active--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #e60000;
|
background-color: #e60000;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-passive--bought {
|
.o-time-study-passive--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #5e33b6;
|
background-color: #5e33b6;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-idle--bought {
|
.o-time-study-idle--bought {
|
||||||
color: black;
|
color: black;
|
||||||
border-color: black;
|
|
||||||
background-color: #0080ff;
|
background-color: #0080ff;
|
||||||
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-dark--bought {
|
.o-time-study-dark--bought {
|
||||||
@ -389,8 +389,8 @@
|
|||||||
.o-time-study-eternity-challenge--running {
|
.o-time-study-eternity-challenge--running {
|
||||||
color: var(--color-eternity);
|
color: var(--color-eternity);
|
||||||
background-color: black;
|
background-color: black;
|
||||||
animation: a-eternity-challenge-running 6s infinite;
|
|
||||||
border: 0.1rem solid var(--color-eternity);
|
border: 0.1rem solid var(--color-eternity);
|
||||||
|
animation: a-eternity-challenge-running 6s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes a-eternity-challenge-running {
|
@keyframes a-eternity-challenge-running {
|
||||||
@ -456,15 +456,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--secret {
|
.o-time-study--secret {
|
||||||
|
opacity: 0;
|
||||||
transition: opacity 1s;
|
transition: opacity 1s;
|
||||||
transition-delay: 1s;
|
transition-delay: 1s;
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--secret-unlocked {
|
.o-time-study--secret-unlocked {
|
||||||
transition: opacity 1s;
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
transition: opacity 1s;
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -473,8 +473,8 @@
|
|||||||
opacity: 0.02;
|
opacity: 0.02;
|
||||||
background: #f1aa7f;
|
background: #f1aa7f;
|
||||||
transition: opacity 2s 0.5s;
|
transition: opacity 2s 0.5s;
|
||||||
cursor: pointer;
|
|
||||||
animation: a-time-study 0.5s infinite;
|
animation: a-time-study 0.5s infinite;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study--secret-enslaved-unlocked {
|
.o-time-study--secret-enslaved-unlocked {
|
||||||
@ -484,9 +484,9 @@
|
|||||||
/* #endregion o-time-study */
|
/* #endregion o-time-study */
|
||||||
|
|
||||||
.o-time-study-connection {
|
.o-time-study-connection {
|
||||||
|
stroke: #444444;
|
||||||
/* This one should be px, because it rem svg behaves weirdly under scale */
|
/* This one should be px, because it rem svg behaves weirdly under scale */
|
||||||
stroke-width: 16px;
|
stroke-width: 16px;
|
||||||
stroke: #444444;
|
|
||||||
transition: stroke 0.3s;
|
transition: stroke 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -563,12 +563,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-connection--secret {
|
.o-time-study-connection--secret {
|
||||||
transition: opacity 1s;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
transition: opacity 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-time-study-connection--secret-unlocked {
|
.o-time-study-connection--secret-unlocked {
|
||||||
|
opacity: 1;
|
||||||
transition: opacity 1s;
|
transition: opacity 1s;
|
||||||
transition-delay: 1s;
|
transition-delay: 1s;
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,31 +5,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip .tooltip-inner {
|
.general-tooltip .tooltip-inner {
|
||||||
background: rgba(0, 0, 0, 90%);
|
|
||||||
color: white;
|
|
||||||
border-radius: var(--var-border-radius, 3px);
|
|
||||||
width: 160px;
|
width: 160px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5px 10px 4px;
|
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
color: white;
|
||||||
|
background: rgba(0, 0, 0, 90%);
|
||||||
|
border-radius: var(--var-border-radius, 3px);
|
||||||
|
padding: 5px 10px 4px;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-inner.automator-tooltip {
|
.tooltip-inner.automator-tooltip {
|
||||||
|
display: inline-block !important;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
width: unset;
|
width: unset;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block !important;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.automator-tooltip-header {
|
.automator-tooltip-header {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-weight: bold;
|
|
||||||
min-width: 16rem;
|
min-width: 16rem;
|
||||||
|
font-weight: bold;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -39,17 +39,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.automator-tooltip-content div {
|
.automator-tooltip-content div {
|
||||||
width: 0;
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip .tooltip-arrow {
|
.general-tooltip .tooltip-arrow {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 5px;
|
|
||||||
border: solid rgba(0, 0, 0, 90%);
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
border: solid rgba(0, 0, 0, 90%);
|
||||||
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="top"] {
|
.general-tooltip[x-placement^="top"] {
|
||||||
@ -57,12 +57,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="top"] .tooltip-arrow {
|
.general-tooltip[x-placement^="top"] .tooltip-arrow {
|
||||||
border-width: 5px 5px 0 !important;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
border-bottom-color: transparent !important;
|
|
||||||
bottom: -5px;
|
bottom: -5px;
|
||||||
left: calc(50% - 5px);
|
left: calc(50% - 5px);
|
||||||
|
border-width: 5px 5px 0 !important;
|
||||||
|
border-right-color: transparent !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
border-left-color: transparent !important;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -72,12 +72,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="bottom"] .tooltip-arrow {
|
.general-tooltip[x-placement^="bottom"] .tooltip-arrow {
|
||||||
border-width: 0 5px 5px;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
border-top-color: transparent !important;
|
|
||||||
top: -5px;
|
top: -5px;
|
||||||
left: calc(50% - 5px);
|
left: calc(50% - 5px);
|
||||||
|
border-width: 0 5px 5px;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-right-color: transparent !important;
|
||||||
|
border-left-color: transparent !important;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -87,14 +87,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="right"] .tooltip-arrow {
|
.general-tooltip[x-placement^="right"] .tooltip-arrow {
|
||||||
|
top: calc(50% - 5px);
|
||||||
|
left: -5px;
|
||||||
border-width: 5px 5px 5px 0;
|
border-width: 5px 5px 5px 0;
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-top-color: transparent !important;
|
border-top-color: transparent !important;
|
||||||
border-bottom-color: transparent !important;
|
border-bottom-color: transparent !important;
|
||||||
left: -5px;
|
border-left-color: transparent !important;
|
||||||
top: calc(50% - 5px);
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="left"] {
|
.general-tooltip[x-placement^="left"] {
|
||||||
@ -102,22 +102,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip[x-placement^="left"] .tooltip-arrow {
|
.general-tooltip[x-placement^="left"] .tooltip-arrow {
|
||||||
|
top: calc(50% - 5px);
|
||||||
|
right: -5px;
|
||||||
border-width: 5px 0 5px 5px;
|
border-width: 5px 0 5px 5px;
|
||||||
border-top-color: transparent !important;
|
border-top-color: transparent !important;
|
||||||
border-right-color: transparent !important;
|
border-right-color: transparent !important;
|
||||||
border-bottom-color: transparent !important;
|
border-bottom-color: transparent !important;
|
||||||
right: -5px;
|
|
||||||
top: calc(50% - 5px);
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip.popover .popover-inner {
|
.general-tooltip.popover .popover-inner {
|
||||||
background: #f9f9f9;
|
|
||||||
color: black;
|
color: black;
|
||||||
padding: 24px;
|
background: #f9f9f9;
|
||||||
border-radius: var(--var-border-radius, 5px);
|
border-radius: var(--var-border-radius, 5px);
|
||||||
box-shadow: 0 5px 30px rgba(0, 0, 0, 10%);
|
box-shadow: 0 5px 30px rgba(0, 0, 0, 10%);
|
||||||
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.general-tooltip.popover .popover-arrow {
|
.general-tooltip.popover .popover-arrow {
|
||||||
|
|||||||
@ -40,11 +40,11 @@
|
|||||||
|
|
||||||
.c-news-line {
|
.c-news-line {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: left;
|
||||||
font-family: Typewriter, serif;
|
font-family: Typewriter, serif;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
@ -55,9 +55,9 @@
|
|||||||
|
|
||||||
.new-ui .c-news-ticker {
|
.new-ui .c-news-ticker {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 3.9rem;
|
||||||
border-bottom: 0.1rem solid var(--color-accent);
|
border-bottom: 0.1rem solid var(--color-accent);
|
||||||
padding: 0.8rem 0;
|
padding: 0.8rem 0;
|
||||||
height: 3.9rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-ui .c-news-line {
|
.new-ui .c-news-line {
|
||||||
@ -65,10 +65,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.old-ui .c-news-ticker {
|
.old-ui .c-news-ticker {
|
||||||
|
height: 3rem;
|
||||||
border: var(--var-border-width, 0.2rem) solid black;
|
border: var(--var-border-width, 0.2rem) solid black;
|
||||||
border-radius: var(--var-border-radius, 0.4rem);
|
border-radius: var(--var-border-radius, 0.4rem);
|
||||||
padding: 0.2rem 0;
|
padding: 0.2rem 0;
|
||||||
height: 3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.old-ui .s-base--metro .c-news-ticker,
|
.old-ui .s-base--metro .c-news-ticker,
|
||||||
@ -78,8 +78,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.old-ui .t-dark .c-news-ticker {
|
.old-ui .t-dark .c-news-ticker {
|
||||||
border-color: #546e7a;
|
|
||||||
background-color: #455a64;
|
background-color: #455a64;
|
||||||
|
border-color: #546e7a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.old-ui .t-dark-metro .c-news-ticker {
|
.old-ui .t-dark-metro .c-news-ticker {
|
||||||
|
|||||||
@ -45,13 +45,13 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-blob-background {
|
.o-blob-background {
|
||||||
|
overflow: visible;
|
||||||
fill: #fbc21b;
|
fill: #fbc21b;
|
||||||
|
opacity: 0.3;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
0 0 5px #000000,
|
0 0 5px #000000,
|
||||||
0 0 5px #000000,
|
0 0 5px #000000,
|
||||||
0 0 5px #000000;
|
0 0 5px #000000;
|
||||||
opacity: 0.3;
|
|
||||||
overflow: visible;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -97,13 +97,13 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-blob-snowflake {
|
.o-blob-snowflake {
|
||||||
|
overflow: visible;
|
||||||
fill: #fbc21b;
|
fill: #fbc21b;
|
||||||
|
opacity: 0.9;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
0 0 5px #000000,
|
0 0 5px #000000,
|
||||||
0 0 5px #000000,
|
0 0 5px #000000,
|
||||||
0 0 5px #000000;
|
0 0 5px #000000;
|
||||||
opacity: 0.9;
|
|
||||||
overflow: visible;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -67,13 +67,13 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-blob-snowflake-container {
|
.c-blob-snowflake-container {
|
||||||
|
overflow: visible;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
overflow: visible;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -81,13 +81,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-blob-background-container {
|
.c-blob-background-container {
|
||||||
|
overflow: visible;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: -9999;
|
z-index: -9999;
|
||||||
overflow: visible;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -141,38 +141,38 @@ export default {
|
|||||||
.c-tooltip-arrow {
|
.c-tooltip-arrow {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
|
||||||
transition: 0.4s linear;
|
transition: 0.4s linear;
|
||||||
transition-property: opacity, visibility;
|
transition-property: opacity, visibility;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip-content {
|
.c-tooltip-content {
|
||||||
position: absolute;
|
|
||||||
padding: 0.7rem;
|
|
||||||
width: 16rem;
|
|
||||||
border-radius: var(--var-border-radius, 0.3rem);
|
|
||||||
background-color: hsla(0deg, 0%, 5%, 90%);
|
|
||||||
color: #ffffff;
|
|
||||||
content: attr(ach-tooltip);
|
content: attr(ach-tooltip);
|
||||||
|
width: 16rem;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
z-index: 4;
|
color: #ffffff;
|
||||||
|
background-color: hsla(0deg, 0%, 5%, 90%);
|
||||||
|
border-radius: var(--var-border-radius, 0.3rem);
|
||||||
|
padding: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip-arrow {
|
.c-tooltip-arrow {
|
||||||
position: absolute;
|
content: " ";
|
||||||
transform: translate(-50%, -100%);
|
|
||||||
width: 0;
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
border-top: 0.55rem solid transparent;
|
border-top: 0.55rem solid transparent;
|
||||||
border-right: 0.55rem solid transparent;
|
border-right: 0.55rem solid transparent;
|
||||||
border-bottom: 0.55rem solid transparent;
|
border-bottom: 0.55rem solid transparent;
|
||||||
border-left: 0.55rem solid transparent;
|
border-left: 0.55rem solid transparent;
|
||||||
content: " ";
|
transform: translate(-50%, -100%);
|
||||||
font-size: 0;
|
|
||||||
line-height: 0;
|
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
z-index: 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip--top.c-tooltip-content {
|
.c-tooltip--top.c-tooltip-content {
|
||||||
@ -189,8 +189,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip--bottom.c-tooltip-arrow {
|
.c-tooltip--bottom.c-tooltip-arrow {
|
||||||
border-bottom: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
|
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
border-bottom: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip--right.c-tooltip-content {
|
.c-tooltip--right.c-tooltip-content {
|
||||||
@ -207,8 +207,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip--left.c-tooltip-arrow {
|
.c-tooltip--left.c-tooltip-arrow {
|
||||||
border-left: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
|
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
border-left: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tooltip-show {
|
.c-tooltip-show {
|
||||||
|
|||||||
@ -201,11 +201,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-expanding-control-box__container {
|
.l-expanding-control-box__container {
|
||||||
position: absolute;
|
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
@ -215,16 +215,16 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-expanding-control-box__button {
|
.l-expanding-control-box__button {
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: none !important;
|
width: 100%;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: none !important;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-indicator-arrow--flipped {
|
.c-indicator-arrow--flipped {
|
||||||
|
|||||||
@ -38,19 +38,19 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-save-timer {
|
.o-save-timer {
|
||||||
color: var(--color-text);
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: var(--color-base);
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-base);
|
||||||
border-top: 0.1rem solid var(--color-accent);
|
border-top: 0.1rem solid var(--color-accent);
|
||||||
border-right: 0.1rem solid var(--color-accent);
|
border-right: 0.1rem solid var(--color-accent);
|
||||||
cursor: pointer;
|
padding: 0 0.5rem;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: 0 0.5rem;
|
cursor: pointer;
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-inverted .o-save-timer,
|
.t-inverted .o-save-timer,
|
||||||
|
|||||||
@ -106,22 +106,22 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.speedrun-status {
|
.speedrun-status {
|
||||||
font-size: 1.2rem;
|
white-space: nowrap;
|
||||||
color: var(--color-text);
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
|
z-index: 5;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-text);
|
||||||
background-color: var(--color-base);
|
background-color: var(--color-base);
|
||||||
white-space: nowrap;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-accent);
|
border: var(--var-border-width, 0.2rem) solid var(--color-accent);
|
||||||
|
padding: 0.8rem 2rem;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.speedrun-collapse {
|
.speedrun-collapse {
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -105,10 +105,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-info-body {
|
.c-info-body {
|
||||||
margin: 1rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-socials {
|
.c-socials {
|
||||||
@ -117,8 +117,8 @@ export default {
|
|||||||
|
|
||||||
.l-socials {
|
.l-socials {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-socials--icon {
|
.c-socials--icon {
|
||||||
|
|||||||
@ -74,17 +74,17 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-progress-bar {
|
.modal-progress-bar {
|
||||||
position: fixed;
|
|
||||||
z-index: 3;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 40rem;
|
width: 40rem;
|
||||||
/* stylelint-disable-next-line unit-allowed-list */
|
position: fixed;
|
||||||
left: 50vw;
|
|
||||||
/* stylelint-disable-next-line unit-allowed-list */
|
/* stylelint-disable-next-line unit-allowed-list */
|
||||||
top: 50vh;
|
top: 50vh;
|
||||||
|
/* stylelint-disable-next-line unit-allowed-list */
|
||||||
|
left: 50vw;
|
||||||
|
z-index: 3;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,10 +96,10 @@ export default {
|
|||||||
|
|
||||||
.modal-progress-bar__bg {
|
.modal-progress-bar__bg {
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
margin-left: 1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
background: black;
|
background: black;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-progress-bar__fg {
|
.modal-progress-bar__fg {
|
||||||
|
|||||||
@ -80,8 +80,8 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.pelle-effects-container {
|
.pelle-effects-container {
|
||||||
height: 40rem;
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
height: 40rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|||||||
@ -107,13 +107,13 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-indicator-icon {
|
.c-indicator-icon {
|
||||||
color: black;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
padding: 0.2rem;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
color: black;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
padding: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-hidden-tabs-background__visible {
|
.c-hidden-tabs-background__visible {
|
||||||
|
|||||||
@ -162,18 +162,17 @@ export const automatorBlocksMap = automatorBlocks.mapToObject(b => b.cmd, b => b
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.block-container {
|
.block-container {
|
||||||
margin: 1rem 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-automator-block-list {
|
.o-automator-block-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 5.5rem;
|
|
||||||
width: 8.7rem;
|
width: 8.7rem;
|
||||||
|
height: 5.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -14,9 +14,9 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.c-automator__button {
|
.c-automator__button {
|
||||||
width: 3.3rem;
|
width: 3.3rem;
|
||||||
margin: 0.4rem;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
border: 0.2rem solid #767676;
|
border: 0.2rem solid #767676;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
margin: 0.4rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -31,8 +31,8 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-automator-docs-template--button {
|
.c-automator-docs-template--button {
|
||||||
margin: 0.4rem;
|
|
||||||
border-radius: 0.3rem;
|
border-radius: 0.3rem;
|
||||||
|
margin: 0.4rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -144,17 +144,17 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-slider-toggle-button {
|
.c-slider-toggle-button {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
color: black;
|
color: black;
|
||||||
background-color: #626262;
|
background-color: #626262;
|
||||||
border: 0.2rem solid #767676;
|
border: 0.2rem solid #767676;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
margin: 0.4rem;
|
margin: 0.4rem;
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.3rem 0;
|
padding: 0.3rem 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-slider-toggle-button .fas {
|
.c-slider-toggle-button .fas {
|
||||||
@ -165,15 +165,15 @@ export default {
|
|||||||
|
|
||||||
.c-slider-toggle-button::before {
|
.c-slider-toggle-button::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
width: 3rem;
|
||||||
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 3rem;
|
z-index: 0;
|
||||||
height: 100%;
|
background-color: white;
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
transition: 0.3s ease all;
|
transition: 0.3s ease all;
|
||||||
background-color: white;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-slider-toggle-button--right::before {
|
.c-slider-toggle-button--right::before {
|
||||||
|
|||||||
@ -145,11 +145,11 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-laitela-milestone--glow {
|
.o-laitela-milestone--glow {
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-laitela--base);
|
color: var(--color-laitela--base);
|
||||||
background: var(--color-laitela--accent);
|
background: var(--color-laitela--accent);
|
||||||
border-color: var(--color-laitela--accent);
|
border-color: var(--color-laitela--accent);
|
||||||
box-shadow: 0 0 0.5rem 0.1rem inset, 0 0 0.3rem 0;
|
box-shadow: 0 0 0.5rem 0.1rem inset, 0 0 0.3rem 0;
|
||||||
font-weight: bold;
|
|
||||||
animation: 3s a-laitela-flash infinite;
|
animation: 3s a-laitela-flash infinite;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -51,30 +51,30 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-armageddon-button {
|
.c-armageddon-button {
|
||||||
width: 100%;
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
|
color: var(--color-text);
|
||||||
background: var(--color-text-inverted);
|
background: var(--color-text-inverted);
|
||||||
border: 0.1rem solid var(--color-pelle--base);
|
border: 0.1rem solid var(--color-pelle--base);
|
||||||
color: var(--color-text);
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-armageddon-button:hover {
|
.c-armageddon-button:hover {
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0.1rem 0.1rem 0.5rem var(--color-pelle--base);
|
box-shadow: 0.1rem 0.1rem 0.5rem var(--color-pelle--base);
|
||||||
transition-duration: 0.12s;
|
transition-duration: 0.12s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-armageddon-button--unavailable {
|
.c-armageddon-button--unavailable {
|
||||||
cursor: default;
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-remnant-gain {
|
.c-remnant-gain {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-pelle--base);
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -97,102 +97,6 @@ export default {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-credits-container {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 9;
|
|
||||||
color: rgb(185, 185, 185);
|
|
||||||
pointer-events: none;
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-credits-header {
|
|
||||||
color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-credits-section {
|
|
||||||
margin-top: 10rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
color: white;
|
|
||||||
text-shadow: 1px 1px 2px turquoise;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-credits--bulk {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
position: relative;
|
|
||||||
width: 76%;
|
|
||||||
left: 12%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-credit-entry {
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-credits-cel-symbol {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 14rem;
|
|
||||||
text-shadow: 0 0 3rem;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
height: 14rem;
|
|
||||||
width: 14rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-teresa-credits {
|
|
||||||
left: 65%;
|
|
||||||
top: 130rem;
|
|
||||||
color: var(--color-teresa--base);
|
|
||||||
animation: a-teresa-credits 10s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-effarig-credits {
|
|
||||||
left: 80%;
|
|
||||||
top: 50rem;
|
|
||||||
color: #ff4400;
|
|
||||||
animation: a-effarig-credits 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-enslaved-credits {
|
|
||||||
left: 52%;
|
|
||||||
top: 220rem;
|
|
||||||
color: var(--color-enslaved--base);
|
|
||||||
animation: a-enslaved-credits 10s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-v-credits {
|
|
||||||
left: 20%;
|
|
||||||
top: 170rem;
|
|
||||||
color: var(--color-v--base);
|
|
||||||
animation: a-v-credits 15s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-ra-credits {
|
|
||||||
left: 44%;
|
|
||||||
top: 300rem;
|
|
||||||
color: var(--color-ra--base);
|
|
||||||
animation: a-ra-credits 10s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-laitela-credits {
|
|
||||||
left: 13%;
|
|
||||||
top: 90rem;
|
|
||||||
color: #ffffff;
|
|
||||||
animation: a-laitela-credits 5s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-pelle-credits {
|
|
||||||
left: 30%;
|
|
||||||
top: 8rem;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
animation: a-pelle-credits 5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes a-teresa-credits {
|
@keyframes a-teresa-credits {
|
||||||
0% { transform: rotate(61deg); }
|
0% { transform: rotate(61deg); }
|
||||||
10% { transform: rotate(322deg); }
|
10% { transform: rotate(322deg); }
|
||||||
@ -273,4 +177,100 @@ perfectly the same. */
|
|||||||
75% { transform: translateX(-50%) rotate3d(0, 1, 0, 270deg) scaleY(1.3); }
|
75% { transform: translateX(-50%) rotate3d(0, 1, 0, 270deg) scaleY(1.3); }
|
||||||
100% { transform: translateX(-50%) rotate3d(0, 1, 0, 360deg) scaleY(1); }
|
100% { transform: translateX(-50%) rotate3d(0, 1, 0, 360deg) scaleY(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c-credits-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9;
|
||||||
|
color: rgb(185, 185, 185);
|
||||||
|
transform: translateY(100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-credits-header {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-credits-section {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 1px 1px 2px turquoise;
|
||||||
|
margin-top: 10rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-credits--bulk {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
width: 76%;
|
||||||
|
position: relative;
|
||||||
|
left: 12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-credit-entry {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-credits-cel-symbol {
|
||||||
|
display: flex;
|
||||||
|
width: 14rem;
|
||||||
|
height: 14rem;
|
||||||
|
position: absolute;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14rem;
|
||||||
|
text-shadow: 0 0 3rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-teresa-credits {
|
||||||
|
top: 130rem;
|
||||||
|
left: 65%;
|
||||||
|
color: var(--color-teresa--base);
|
||||||
|
animation: a-teresa-credits 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-effarig-credits {
|
||||||
|
top: 50rem;
|
||||||
|
left: 80%;
|
||||||
|
color: #ff4400;
|
||||||
|
animation: a-effarig-credits 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-enslaved-credits {
|
||||||
|
top: 220rem;
|
||||||
|
left: 52%;
|
||||||
|
color: var(--color-enslaved--base);
|
||||||
|
animation: a-enslaved-credits 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-v-credits {
|
||||||
|
top: 170rem;
|
||||||
|
left: 20%;
|
||||||
|
color: var(--color-v--base);
|
||||||
|
animation: a-v-credits 15s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-ra-credits {
|
||||||
|
top: 300rem;
|
||||||
|
left: 44%;
|
||||||
|
color: var(--color-ra--base);
|
||||||
|
animation: a-ra-credits 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-laitela-credits {
|
||||||
|
top: 90rem;
|
||||||
|
left: 13%;
|
||||||
|
color: #ffffff;
|
||||||
|
animation: a-laitela-credits 5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-pelle-credits {
|
||||||
|
top: 8rem;
|
||||||
|
left: 30%;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
|
animation: a-pelle-credits 5s linear infinite;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -26,12 +26,12 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.black-overlay {
|
.black-overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: black;
|
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
|
background: black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -63,32 +63,32 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-new-game-container {
|
.c-new-game-container {
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 9;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 9;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
|
||||||
background-color: black;
|
background-color: black;
|
||||||
box-shadow: 0 0 20px 1px black;
|
box-shadow: 0 0 20px 1px black;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-new-game-button-container {
|
.c-new-game-button-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-new-game-button {
|
.c-new-game-button {
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
background: grey;
|
background: grey;
|
||||||
border: black;
|
border: black;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -64,25 +64,25 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-pelle-panel-title {
|
.c-pelle-panel-title {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-collapse-icon-clickable {
|
.c-collapse-icon-clickable {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1.5rem;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
left: 1.5rem;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-pelle-panel-container {
|
.l-pelle-panel-container {
|
||||||
padding: 1rem;
|
|
||||||
margin: 1rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -145,25 +145,25 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-pelle-panel-title {
|
.c-pelle-panel-title {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-collapse-icon-clickable {
|
.c-collapse-icon-clickable {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1.5rem;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
left: 1.5rem;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-pelle-panel-container {
|
.l-pelle-panel-container {
|
||||||
padding: 1rem;
|
|
||||||
margin: 1rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.2rem);
|
border-radius: var(--var-border-radius, 0.2rem);
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
@ -175,16 +175,16 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-generator-unlock-button {
|
.c-generator-unlock-button {
|
||||||
padding: 2rem;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
font-family: Typewriter;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
|
font-family: Typewriter;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
|
||||||
color: black;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
padding: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-galaxy-generator-upgrades-container {
|
.l-galaxy-generator-upgrades-container {
|
||||||
@ -194,34 +194,35 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-galaxies-amount {
|
.c-galaxies-amount {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
|
font-weight: bold;
|
||||||
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-pelle--base);
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-increase-cap {
|
.c-increase-cap {
|
||||||
padding: 2rem;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 11.4rem;
|
||||||
|
max-width: 70rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 1.1rem;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #004b55;
|
background-color: #004b55;
|
||||||
border: var(--var-border-width, 0.1rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.1rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
font-family: Typewriter;
|
|
||||||
margin: 1rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 70rem;
|
|
||||||
height: 11.4rem;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: inset 0 0 0.1rem 0.1rem var(--color-pelle--base);
|
box-shadow: inset 0 0 0.1rem 0.1rem var(--color-pelle--base);
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
/* box-shadow is here to prevent a weird grey border forming around the background */
|
/* box-shadow is here to prevent a weird grey border forming around the background */
|
||||||
}
|
}
|
||||||
@ -241,12 +242,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-increase-cap-background {
|
.c-increase-cap-background {
|
||||||
background: linear-gradient(black, var(--color-pelle--base));
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
background: linear-gradient(black, var(--color-pelle--base));
|
||||||
transition: width 0.1s;
|
transition: width 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -97,12 +97,12 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 1rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
|
||||||
/* transparent crimson */
|
/* transparent crimson */
|
||||||
box-shadow: inset 0 0 1rem 0.1rem rgba(237, 20, 61, 45%), 0 0 1rem 0.1rem rgba(237, 20, 61, 45%);
|
box-shadow: inset 0 0 1rem 0.1rem rgba(237, 20, 61, 45%), 0 0 1rem 0.1rem rgba(237, 20, 61, 45%);
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-s1 .c-pelle-rift {
|
.t-s1 .c-pelle-rift {
|
||||||
@ -123,20 +123,20 @@ export default {
|
|||||||
|
|
||||||
.c-pelle-rift-rift-info-container {
|
.c-pelle-rift-rift-info-container {
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
color: var(--color-text);
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-rift-status {
|
.c-pelle-rift-status {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
width: 26rem;
|
width: 26rem;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-rift-name-header {
|
.c-pelle-rift-name-header {
|
||||||
color: var(--color-pelle--base);
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -180,96 +180,6 @@ export default {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* CONTAINER STYLES */
|
|
||||||
|
|
||||||
.c-pelle-rift-bar {
|
|
||||||
--color-bar-bg: #1e1e1e;
|
|
||||||
|
|
||||||
height: 5rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--secondary);
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
width: 32rem;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--color-bar-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-pelle-rift-bar--filling,
|
|
||||||
.c-pelle-rift-bar--idle {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-overflow-hidden {
|
|
||||||
overflow: hidden;
|
|
||||||
border: var(--var-border-width, 0.16rem) solid transparent;
|
|
||||||
width: 32rem;
|
|
||||||
height: 5rem;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
position: absolute;
|
|
||||||
top: -0.2rem;
|
|
||||||
left: -0.2rem;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.o-pelle-rift-bar-overlay {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
box-shadow: inset 0 0 0.3rem 0.1rem var(--color-bar-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-pelle-rift-bar--filling .o-pelle-rift-bar-overlay {
|
|
||||||
box-shadow: inset 0 0 0.3rem 0.1rem var(--color-pelle--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FILLING STYLES */
|
|
||||||
.o-pelle-rift-bar-fill {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-pelle--secondary);
|
|
||||||
z-index: 0;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.o-pelle-rift-bar-reducedto {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-pelle--base);
|
|
||||||
z-index: 0;
|
|
||||||
filter: brightness(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SPECIAL BAR OVERLAY STYLES */
|
|
||||||
.o-pelle-rift-bar-permanent {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
filter: brightness(50%);
|
|
||||||
background: var(--color-pelle--secondary);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.o-pelle-rift-bar-overfilled {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-pelle--base);
|
|
||||||
opacity: 0.5;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes a-pelle-bar-overfill-pulse {
|
@keyframes a-pelle-bar-overfill-pulse {
|
||||||
/* #ed143d66 is the base pelle colour except transparent. */
|
/* #ed143d66 is the base pelle colour except transparent. */
|
||||||
0% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 40%); }
|
0% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 40%); }
|
||||||
@ -283,6 +193,126 @@ export default {
|
|||||||
100% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 53.3%); }
|
100% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 53.3%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ACTIVE RIFT FILLING STYLES */
|
||||||
|
@keyframes a-pelle-bar-filling-sweep {
|
||||||
|
0% {
|
||||||
|
width: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
width: 2rem;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
width: 2rem;
|
||||||
|
left: calc(100% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 0;
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes a-pelle-bar-unfinished-milestone-flash {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
20% { opacity: 1; }
|
||||||
|
50% { opacity: 0.3; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CONTAINER STYLES */
|
||||||
|
|
||||||
|
.c-pelle-rift-bar {
|
||||||
|
--color-bar-bg: #1e1e1e;
|
||||||
|
display: flex;
|
||||||
|
width: 32rem;
|
||||||
|
height: 5rem;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--color-bar-bg);
|
||||||
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--secondary);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-pelle-rift-bar--filling,
|
||||||
|
.c-pelle-rift-bar--idle {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 32rem;
|
||||||
|
height: 5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -0.2rem;
|
||||||
|
left: -0.2rem;
|
||||||
|
z-index: 0;
|
||||||
|
border: var(--var-border-width, 0.16rem) solid transparent;
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-pelle-rift-bar-overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
box-shadow: inset 0 0 0.3rem 0.1rem var(--color-bar-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-pelle-rift-bar--filling .o-pelle-rift-bar-overlay {
|
||||||
|
box-shadow: inset 0 0 0.3rem 0.1rem var(--color-pelle--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FILLING STYLES */
|
||||||
|
.o-pelle-rift-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
background: var(--color-pelle--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-pelle-rift-bar-reducedto {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
background: var(--color-pelle--base);
|
||||||
|
filter: brightness(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SPECIAL BAR OVERLAY STYLES */
|
||||||
|
.o-pelle-rift-bar-permanent {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
background: var(--color-pelle--secondary);
|
||||||
|
filter: brightness(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-pelle-rift-bar-overfilled {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: var(--color-pelle--base);
|
||||||
|
}
|
||||||
|
|
||||||
.c-pelle-rift-bar-overfill-container {
|
.c-pelle-rift-bar-overfill-container {
|
||||||
animation: a-pelle-bar-overfill-pulse 1s infinite linear;
|
animation: a-pelle-bar-overfill-pulse 1s infinite linear;
|
||||||
}
|
}
|
||||||
@ -291,44 +321,21 @@ export default {
|
|||||||
animation: a-pelle-bar-overfill-pulse-but-green 1s infinite linear;
|
animation: a-pelle-bar-overfill-pulse-but-green 1s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ACTIVE RIFT FILLING STYLES */
|
|
||||||
@keyframes a-pelle-bar-filling-sweep {
|
|
||||||
0% {
|
|
||||||
left: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
10% {
|
|
||||||
left: 0;
|
|
||||||
width: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
left: calc(100% - 2rem);
|
|
||||||
width: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.o-pelle-rift-bar-active-fill {
|
.o-pelle-rift-bar-active-fill {
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--color-pelle--base);
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
|
background: var(--color-pelle--base);
|
||||||
animation: a-pelle-bar-filling-sweep infinite 2s linear;
|
animation: a-pelle-bar-filling-sweep infinite 2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* PERCENTAGE STYLES */
|
/* PERCENTAGE STYLES */
|
||||||
.o-pelle-rift-bar-percentage {
|
.o-pelle-rift-bar-percentage {
|
||||||
|
z-index: 2;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0.1rem 0.1rem 0.2rem var(--color-pelle--base);
|
text-shadow: 0.1rem 0.1rem 0.2rem var(--color-pelle--base);
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
/* This keeps the percentage from blocking the hover area */
|
/* This keeps the percentage from blocking the hover area */
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -344,20 +351,12 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes a-pelle-bar-unfinished-milestone-flash {
|
|
||||||
0% { opacity: 1; }
|
|
||||||
20% { opacity: 1; }
|
|
||||||
50% { opacity: 0.3; }
|
|
||||||
80% { opacity: 1; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.o-pelle-rift-bar-milestone-line {
|
.o-pelle-rift-bar-milestone-line {
|
||||||
position: absolute;
|
|
||||||
width: 0.25rem;
|
width: 0.25rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--color-pelle--base);
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
background: var(--color-pelle--base);
|
||||||
animation: a-pelle-bar-unfinished-milestone-flash infinite 1s linear;
|
animation: a-pelle-bar-unfinished-milestone-flash infinite 1s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -366,8 +365,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-pelle-rift-bar-milestone-line--disabled {
|
.o-pelle-rift-bar-milestone-line--disabled {
|
||||||
animation: none;
|
|
||||||
filter: brightness(0.25);
|
filter: brightness(0.25);
|
||||||
|
animation: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -37,21 +37,21 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.c-pelle-strike {
|
.c-pelle-strike {
|
||||||
background: var(--color-pelle--base);
|
|
||||||
color: black;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid black;
|
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
|
||||||
font-weight: bold;
|
|
||||||
min-height: 3.8rem;
|
min-height: 3.8rem;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background: var(--color-pelle--base);
|
||||||
|
border: var(--var-border-width, 0.2rem) solid black;
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-strike-container {
|
.c-pelle-strike-container {
|
||||||
padding: 0.5rem 0.5rem 2rem;
|
width: 26rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
width: 26rem;
|
padding: 0.5rem 0.5rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-strike-description {
|
.c-pelle-strike-description {
|
||||||
|
|||||||
@ -106,20 +106,20 @@ export default {
|
|||||||
.l-pelle-all-content-container {
|
.l-pelle-all-content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-pelle-button {
|
.o-pelle-button {
|
||||||
background: var(--color-text-inverted);
|
font-family: Typewriter;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
background: var(--color-text-inverted);
|
||||||
border: 0.1rem solid var(--color-pelle--base);
|
border: 0.1rem solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
padding: 1rem;
|
|
||||||
font-family: Typewriter;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
cursor: pointer;
|
padding: 1rem;
|
||||||
transition-duration: 0.12s;
|
transition-duration: 0.12s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-pelle-button:hover {
|
.o-pelle-button:hover {
|
||||||
@ -128,36 +128,36 @@ export default {
|
|||||||
|
|
||||||
.o-pelle-quotes-button {
|
.o-pelle-quotes-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
font-size: 5rem;
|
|
||||||
height: 7rem;
|
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
|
height: 7rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 5rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pelle-unlock-requirements {
|
.pelle-unlock-requirements {
|
||||||
|
width: 40rem;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
background: black;
|
|
||||||
color: var(--color-pelle--base);
|
color: var(--color-pelle--base);
|
||||||
|
background: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
width: 40rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pelle-doom-button {
|
.pelle-doom-button {
|
||||||
|
width: 20rem;
|
||||||
|
align-self: center;
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
padding: 1rem;
|
|
||||||
background: black;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
|
background: black;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
width: 20rem;
|
padding: 1rem;
|
||||||
cursor: pointer;
|
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
align-self: center;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pelle-doom-button:hover {
|
.pelle-doom-button:hover {
|
||||||
@ -165,25 +165,25 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pelle-icon-container {
|
.pelle-icon-container {
|
||||||
background: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 15rem;
|
|
||||||
width: 15rem;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 3rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 15rem;
|
||||||
|
height: 15rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: var(--var-border-width, 0.4rem) solid var(--color-pelle--base);
|
|
||||||
font-size: 10rem;
|
font-size: 10rem;
|
||||||
transition-duration: 0.4s;
|
|
||||||
text-shadow: 0 0 1.5rem #9b0101;
|
text-shadow: 0 0 1.5rem #9b0101;
|
||||||
|
background: white;
|
||||||
|
border: var(--var-border-width, 0.4rem) solid var(--color-pelle--base);
|
||||||
|
border-radius: 50%;
|
||||||
box-shadow: 0 0 1.5rem #9b0101;
|
box-shadow: 0 0 1.5rem #9b0101;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 3rem;
|
||||||
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pelle-doom-button:hover .pelle-icon-container {
|
.pelle-doom-button:hover .pelle-icon-container {
|
||||||
background: black;
|
|
||||||
color: var(--color-pelle--base);
|
color: var(--color-pelle--base);
|
||||||
|
background: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes roll {
|
@keyframes roll {
|
||||||
|
|||||||
@ -159,24 +159,24 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-pelle-upgrade {
|
.c-pelle-upgrade {
|
||||||
padding: 2rem;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 18.5rem;
|
||||||
|
height: 12rem;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: var(--color-text-inverted);
|
background: var(--color-text-inverted);
|
||||||
border: 0.1rem solid var(--color-pelle--secondary);
|
border: 0.1rem solid var(--color-pelle--secondary);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
font-family: Typewriter;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 18.5rem;
|
|
||||||
height: 12rem;
|
|
||||||
margin: 0.6rem 0.3rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: inset 0 0 1rem 0.1rem var(--color-pelle--secondary);
|
box-shadow: inset 0 0 1rem 0.1rem var(--color-pelle--secondary);
|
||||||
display: flex;
|
margin: 0.6rem 0.3rem;
|
||||||
flex-direction: column;
|
padding: 2rem;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-upgrade:hover {
|
.c-pelle-upgrade:hover {
|
||||||
@ -186,29 +186,29 @@ export default {
|
|||||||
|
|
||||||
/* stylelint-disable-next-line selector-class-pattern */
|
/* stylelint-disable-next-line selector-class-pattern */
|
||||||
.c-pelle-upgrade--galaxyGenerator {
|
.c-pelle-upgrade--galaxyGenerator {
|
||||||
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
|
||||||
color: black;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-upgrade--unavailable {
|
.c-pelle-upgrade--unavailable {
|
||||||
background: #5f5f5f;
|
|
||||||
color: black;
|
color: black;
|
||||||
cursor: default;
|
background: #5f5f5f;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-upgrade--faded {
|
.c-pelle-upgrade--faded {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
cursor: default;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-pelle-upgrade--bought {
|
.c-pelle-upgrade--bought {
|
||||||
|
color: black;
|
||||||
background: var(--color-pelle--secondary);
|
background: var(--color-pelle--secondary);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* stylelint-disable-next-line selector-class-pattern */
|
/* stylelint-disable-next-line selector-class-pattern */
|
||||||
@ -221,14 +221,14 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-pelle-upgrade-gap {
|
.l-pelle-upgrade-gap {
|
||||||
height: 0.5rem;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
height: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-improved-effect {
|
.c-improved-effect {
|
||||||
color: #00bb00;
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00bb00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .c-pelle-upgrade--unavailable {
|
.s-base--metro .c-pelle-upgrade--unavailable {
|
||||||
|
|||||||
@ -135,25 +135,25 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-pelle-panel-title {
|
.c-pelle-panel-title {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 3rem;
|
|
||||||
color: var(--color-pelle--base);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-collapse-icon-clickable {
|
.c-collapse-icon-clickable {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1.5rem;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
left: 1.5rem;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-pelle-panel-container {
|
.l-pelle-panel-container {
|
||||||
padding: 1rem;
|
|
||||||
margin: 1rem;
|
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
@ -165,15 +165,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-pelle-button {
|
.o-pelle-button {
|
||||||
background: var(--color-text-inverted);
|
font-family: Typewriter;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
background: var(--color-text-inverted);
|
||||||
border: 0.1rem solid var(--color-pelle--base);
|
border: 0.1rem solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
padding: 1rem;
|
|
||||||
font-family: Typewriter;
|
|
||||||
margin: 1rem 0 0.5rem;
|
margin: 1rem 0 0.5rem;
|
||||||
cursor: pointer;
|
padding: 1rem;
|
||||||
transition-duration: 0.12s;
|
transition-duration: 0.12s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-pelle-button:hover {
|
.o-pelle-button:hover {
|
||||||
@ -183,17 +183,17 @@ export default {
|
|||||||
.c-pelle-upgrade-container {
|
.c-pelle-upgrade-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
|
||||||
max-width: 110rem;
|
max-width: 110rem;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-armageddon-container {
|
.c-armageddon-container {
|
||||||
align-self: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
align-items: flex-start;
|
||||||
|
align-self: center;
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -207,8 +207,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-remnants-amount {
|
.c-remnants-amount {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-pelle--base);
|
color: var(--color-pelle--base);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -138,13 +138,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-remnant-factors {
|
.c-remnant-factors {
|
||||||
background-color: var(--color-text-inverted);
|
z-index: 4;
|
||||||
|
font-weight: bold;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-text-inverted);
|
||||||
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
font-weight: bold;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-remnant-factors-text {
|
.c-remnant-factors-text {
|
||||||
@ -158,10 +158,10 @@ export default {
|
|||||||
|
|
||||||
.l-remnant-factors-col {
|
.l-remnant-factors-col {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-remnant-factors-col--first {
|
.l-remnant-factors-col--first {
|
||||||
|
|||||||
@ -310,8 +310,8 @@ export default {
|
|||||||
|
|
||||||
.c-ra-pet-upgrade-memory {
|
.c-ra-pet-upgrade-memory {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-ra-pet-upgrade-chunk {
|
.c-ra-pet-upgrade-chunk {
|
||||||
|
|||||||
@ -103,23 +103,23 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-selected-effect-toggle-indicator--active {
|
.c-selected-effect-toggle-indicator--active {
|
||||||
color: black;
|
|
||||||
font-size: 1rem;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/* -0.1rem = -1px, needed because CSS renders a black border between the check and the border of the selector
|
/* -0.1rem = -1px, needed because CSS renders a black border between the check and the border of the selector
|
||||||
otherwise */
|
otherwise */
|
||||||
top: -0.1rem;
|
top: -0.1rem;
|
||||||
right: -0.1rem;
|
right: -0.1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: black;
|
||||||
|
text-shadow: none;
|
||||||
border-radius: 0 var(--var-border-radius, 0.4rem);
|
border-radius: 0 var(--var-border-radius, 0.4rem);
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
text-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-dock {
|
.l-dock {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0 4rem;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
margin: 0 4rem;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -47,36 +47,36 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.c-shop-button-container {
|
.c-shop-button-container {
|
||||||
width: 30rem;
|
width: 30rem;
|
||||||
padding: 1rem;
|
color: white;
|
||||||
|
background: #3c3c3c;
|
||||||
border: var(--var-border-width, 0.2rem) solid #1f7d1f;
|
border: var(--var-border-width, 0.2rem) solid #1f7d1f;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
background: #3c3c3c;
|
padding: 1rem;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-shop-button-button {
|
.o-shop-button-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Typewriter;
|
||||||
background: turquoise;
|
background: turquoise;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
align-items: center;
|
|
||||||
font-family: Typewriter;
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-shop-button-button__img {
|
.o-shop-button-button__img {
|
||||||
margin-left: 1rem;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-shop-button-multiplier {
|
.o-shop-button-multiplier {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -107,11 +107,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-shop-disclaimer {
|
.c-shop-disclaimer {
|
||||||
color: black;
|
|
||||||
background: var(--color-bad);
|
|
||||||
width: 100rem;
|
width: 100rem;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background: var(--color-bad);
|
||||||
border: var(--var-border-width, 0.2rem) solid black;
|
border: var(--var-border-width, 0.2rem) solid black;
|
||||||
border-radius: var(--var-border-radius, 1rem);
|
border-radius: var(--var-border-radius, 1rem);
|
||||||
margin-top: 0.8rem;
|
margin-top: 0.8rem;
|
||||||
@ -139,15 +139,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.o-shop-button-button {
|
.o-shop-button-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Typewriter;
|
||||||
background: turquoise;
|
background: turquoise;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
align-items: center;
|
|
||||||
font-family: Typewriter;
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -123,8 +123,8 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.l-tt-save-load-btn__wrapper {
|
.l-tt-save-load-btn__wrapper {
|
||||||
margin: 0.3rem;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-tt-save-load-btn {
|
.l-tt-save-load-btn {
|
||||||
@ -135,18 +135,18 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -100%);
|
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tt-save-load-btn__menu {
|
.c-tt-save-load-btn__menu {
|
||||||
|
text-align: left;
|
||||||
|
font-family: Typewriter;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
background: black;
|
background: black;
|
||||||
border-radius: var(--var-border-radius, 0.5rem);
|
border-radius: var(--var-border-radius, 0.5rem);
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Typewriter;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-tt-save-load-btn__menu::after {
|
.l-tt-save-load-btn__menu::after {
|
||||||
@ -154,10 +154,10 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -0.5rem;
|
|
||||||
border-width: var(--var-border-width, 0.5rem);
|
|
||||||
border-style: solid;
|
|
||||||
border-color: black transparent transparent;
|
border-color: black transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: var(--var-border-width, 0.5rem);
|
||||||
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-tt-save-load-btn__menu-rename {
|
.l-tt-save-load-btn__menu-rename {
|
||||||
@ -166,9 +166,9 @@ export default {
|
|||||||
|
|
||||||
.c-tt-save-load-btn__menu-rename {
|
.c-tt-save-load-btn__menu-rename {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: bold;
|
|
||||||
font-family: Typewriter;
|
font-family: Typewriter;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--var-border-radius, 0.3rem);
|
border-radius: var(--var-border-radius, 0.3rem);
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
@ -180,7 +180,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c-tt-save-load-btn__menu-item:hover {
|
.c-tt-save-load-btn__menu-item:hover {
|
||||||
background: white;
|
|
||||||
color: black;
|
color: black;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -117,8 +117,8 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.c-primary-btn--black-hole-header {
|
.c-primary-btn--black-hole-header {
|
||||||
margin: 0.2rem;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
margin: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-black-hole-status-text {
|
.c-black-hole-status-text {
|
||||||
|
|||||||
@ -47,14 +47,14 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-tab-btn {
|
.o-tab-btn {
|
||||||
padding-top: 0.2rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-top: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-subtab-btn--active {
|
.o-subtab-btn--active {
|
||||||
border-bottom-width: 0.4rem;
|
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
border-bottom-width: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .o-subtab-btn--active {
|
.s-base--metro .o-subtab-btn--active {
|
||||||
|
|||||||
@ -60,15 +60,15 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.o-tab-btn {
|
.o-tab-btn {
|
||||||
|
height: 3.1rem;
|
||||||
|
vertical-align: middle;
|
||||||
margin: 0.2rem;
|
margin: 0.2rem;
|
||||||
margin-bottom: 0.7rem;
|
margin-bottom: 0.7rem;
|
||||||
vertical-align: middle;
|
|
||||||
height: 3.1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.o-tab-btn--active {
|
.o-tab-btn--active {
|
||||||
border-bottom-width: 0.5rem;
|
|
||||||
height: 3.1rem;
|
height: 3.1rem;
|
||||||
|
border-bottom-width: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-base--metro .o-tab-btn--active {
|
.s-base--metro .o-tab-btn--active {
|
||||||
|
|||||||
@ -109,8 +109,8 @@ export default {
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
|
left: 0;
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
transition: width 0.15s;
|
transition: width 0.15s;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user