diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000000000000000000000000000000000..9565ca804faebd7c5a0e575e4fb8ad9864dde875 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Tab indentation (Size 4) +[*.{js,ts,css,twee,tw}] +indent_style = tab +indent_size = 4 +insert_final_newline = true diff --git a/.gitignore b/.gitignore index 5e8bdda1c1e4fe33ac56f4bbf14a1b184596c98c..5b7c3020a5a82e68765daca5a29a5f7b095562d2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ gitw *.kra Desktop.ini Thumbs.db +.vscode/settings.json # Ignoring working folder for Quin2k mod/ diff --git a/.vscode/.gitkeep b/.vscode/.gitkeep new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000000000000000000000000000000000..3fef56538ee3349ce252e422a38f0bda0dfba295 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "cyrusfirheir.twee3-language-tools", + "dbaeumer.vscode-eslint", + "eamodio.gitlens", + "editorconfig.editorconfig" + ] +} diff --git a/game/02-CSS/base.css b/game/02-CSS/base.css index c04ada8b3c18b96a99c31aab09d809c68b111447..a663d4ef552305922780d552d05e82b66baa4f9f 100644 --- a/game/02-CSS/base.css +++ b/game/02-CSS/base.css @@ -1,6 +1,63 @@ +:root { + /** Base Colours **/ + --000: white; + --100: #eee; + --150: #f1f1db; + --200: #ccc; + --300: #aaa; + --400: #999; + --500: #888; + --600: #777; + --700: #666; + --750: #444; + --800: #333; + --850: #222; + --900: black; + + /** Accent Colours **/ + --red: #EC3535; + --pink: #E40081; + --pink-secondary: #D67CAF; + --purple: #8800ff; + --purple-secondary: #AA4BC8; + --blue: #4372FF; + --blue-secondary: #559BC0; + --teal: #08C1C1; + --green: #38B20A; + --green-secondary: #7caf7c; + --lime: #44e342; + --orange: #F28500; + --brown: #4C2217; + --black: #929292; + /* Yellow and gold seem redundant; very similar yellows */ + --yellow: #FFD700; + --gold: gold; + --silver: silver; + + /* Status Specific */ + --lewd: #E04880; + --defiant: #D20000; + --meek: #C44B8B; + --brat: #B75D41; + --relaxed: #63719C; + --anxious: #973253; + --veteran: #956BB4; + --methodical: #CE7993; + --scarred: #D8621F; + --tattooed: #266568; + + + /** Utility **/ + --link: #5888DD; + + /* Tooltip */ + --tooltip-background: #1a1919; + --tooltip-border: #b0b0b4; +} + mouse.tooltip { font-weight: normal; - border-bottom: 1px dotted rgb(176, 176, 180); + border-bottom: 1px dotted var(--tooltip-border); } mouse.tooltip span:last-of-type { @@ -12,17 +69,17 @@ mouse.tooltip span:last-of-type { max-width: 450px !important; line-height:20px; border-radius:2px; - box-shadow: 0px 0px 8px 4px #000; + box-shadow: 0px 0px 8px 4px var(--900); } mouse.tooltip:hover span:last-of-type { display:inline; position:absolute; - border:2px solid gold; + border:2px solid var(--gold); font-weight: normal; text-decoration: none; font-size:1.0em; - background:#1a1919 repeat-x 0 0; + background: var(--tooltip-background) repeat-x 0 0; } mouse.tooltip-small { @@ -39,17 +96,17 @@ mouse.tooltip-small span:last-of-type { max-width: 450px !important; line-height:20px; border-radius:1px; - box-shadow: 0px 0px 8px 4px #000; + box-shadow: 0px 0px 8px 4px var(--900); } mouse.tooltip-small:hover span:last-of-type { display:inline; position:absolute; - border:1px solid gold; + border:1px solid var(--gold); font-weight: normal; text-decoration: none; font-size:80%; - background:#1a1919 repeat-x 0 0; + background:var(--tooltip-background) repeat-x 0 0; } @media only screen and (max-width: 800px) { @@ -65,13 +122,13 @@ mouse.tooltip-small:hover span:last-of-type { #next { position: fixed; bottom: -1px; - border: 1px solid #aaa; - background-color: #222; + border: 1px solid var(--300); + background-color: var(--850); z-index: 700; } #next a { - color: gold; + color: var(--gold); padding: 10px 20px 30px 20px; display: block; } @@ -83,8 +140,8 @@ mouse.tooltip-small:hover span:last-of-type { align-items: center; bottom: -1px; margin-left: 7em; - border: 1px solid #aaa; - background-color: #222; + border: 1px solid var(--300); + background-color: var(--850); z-index: 700; } @@ -93,7 +150,7 @@ mouse.tooltip-small:hover span:last-of-type { } #cbtToggleMenu .cbtToggle { - color: gold; + color: var(--gold); } #cbtToggleMenu:not(.visible) .cbtToggle { @@ -134,7 +191,7 @@ mouse.tooltip-small:hover span:last-of-type { } #ui-bar-history [id|=history] { - color: #666; + color: var(--700); border: none; } @@ -151,8 +208,8 @@ mouse.tooltip-small:hover span:last-of-type { width: 100%; font-size: 110%; max-width: 260px; - background-color: #222; - border: 1px solid #444; + background-color: var(--850); + border: 1px solid var(--750); } .buttonlike { display: inline-block; @@ -171,28 +228,28 @@ mouse.tooltip-small:hover span:last-of-type { position: -webkit-sticky; position: sticky; top: 0; - background-color: #222; + background-color: var(--850); width: auto; height: auto; margin: 0; z-index: 1; padding: 0; - border-bottom: 1px solid #fff; + border-bottom: 1px solid var(--000); } .macro-button:hover { - background-color: #333; - border: 1px solid #fff; + background-color: var(--800); + border: 1px solid var(--000); } .macro-button:active { - background-color: #ffd700; - border: 1px solid #fff; + background-color: var(--yellow); + border: 1px solid var(--000); } .macro-button:focus { - background-color: #555; - border: 1px solid #ffd700; + background-color: var(--700); + border: 1px solid var(--yellow); } .customOverlay { @@ -204,8 +261,8 @@ mouse.tooltip-small:hover span:last-of-type { right:20px; height: auto; width: auto; - border: 2px #fff solid; - background-color: #222; + border: 2px var(--000) solid; + background-color: var(--850); text-align: left; padding: 0 5px 3px; overflow-y: scroll; @@ -219,6 +276,17 @@ mouse.tooltip-small:hover span:last-of-type { max-width: unset; } +#customOverlayContent { + padding: 0.5rem; +} + +#customOverlayTitle { + display: flex; + gap: 0.25rem; + padding: 0.5rem; + align-items: center; +} + @media only screen and (min-width: 870px) { .customOverlay { left: 300px; @@ -240,8 +308,8 @@ mouse.tooltip-small:hover span:last-of-type { max-width: 85%; z-index: 1001; padding: 3px; - border: 2px #fff solid; - background-color: #333; + border: 2px var(--000) solid; + background-color: var(--800); overflow-y: scroll; text-align: center; } @@ -249,7 +317,7 @@ mouse.tooltip-small:hover span:last-of-type { .overlayMenu { position: sticky; top: 0; - background-color: #333333; + background-color: var(--800); z-index:1; } @@ -275,13 +343,19 @@ mouse.tooltip-small:hover span:last-of-type { } .overlayItem { - border-top: 2px #fff solid; + border-top: 2px var(--000) solid; clear: both; } #statsHelp { - overflow-y: scroll; - height: auto; + display: flex; + gap: 2px; + padding: 0.25rem; + align-items: center; + flex-direction: row; + justify-content: center; + height: 100%; + width: 100%; max-height: 200px; } @@ -322,9 +396,9 @@ input#addEventsWidgets::placeholder { right: 3px; top: 1px; font-size: 0.6em; - color: #777; + color: var(--600); z-index: 1000; - background-color: #111; + background-color: var(--850); } #gameVersionDisplay2 { @@ -332,7 +406,7 @@ input#addEventsWidgets::placeholder { left:1px; bottom: 0px; font-size: 0.55em; - color: #777; + color: var(--600); z-index: 1000; } @@ -351,7 +425,7 @@ input#addEventsWidgets::placeholder { width: 80%; max-width: 400px; z-index: 1000; - background-color: gold; + background-color: var(--gold); padding: 2px; } @@ -359,7 +433,7 @@ input#addEventsWidgets::placeholder { height: 87px; width: 80%; max-width: 400px; - background-color: gold; + background-color: var(--gold); padding: 2px; float: left; } @@ -368,14 +442,14 @@ input#addEventsWidgets::placeholder { display: inline-block; height: 100%; width: 79px; - background-color: #333; + background-color: var(--800); text-align: left; } .dot { height: 74px; width: 74px; - background-color: #999; + background-color: var(--400); border-radius: 50%; display: inline-block; margin: 3px; @@ -392,7 +466,7 @@ input#addEventsWidgets::placeholder { display: inline-block; height: 100%; width: calc(100% - 84px); - background-color: #333; + background-color: var(--800); float: right; } @@ -444,7 +518,7 @@ input.heart:hover{ #scenesViewer span { padding: 2px; - border: solid 1px #aaa; + border: solid 1px var(--300); height: 30px; width: 48%; min-width: 400px; @@ -453,7 +527,7 @@ input.heart:hover{ #produceDisplay .produceItem { padding: 2px; - border: solid 1px #aaa; + border: solid 1px var(--300); width: 48%; min-width: 400px; margin: 0px 3px 3px; @@ -493,7 +567,7 @@ input.heart:hover{ } #mobileStats .stat { - border: 1px solid #444; + border: 1px solid var(--750); text-align: center; font-weight: 500; font-size: 1.2em; @@ -520,7 +594,7 @@ input.heart:hover{ #savesListContainer { display: flex; flex-direction: column; - border: 1px solid #999; + border: 1px solid var(--400); max-width: 800px; } @@ -529,7 +603,7 @@ input.heart:hover{ flex-direction: row; flex-wrap: nowrap; align-items: center; - border: 1px solid #999; + border: 1px solid var(--400); padding: 4px; } @@ -609,11 +683,11 @@ input.heart:hover{ display: flex; } .saveMenuButton { - background-color: #4372FF !important; + background-color: var(--blue) !important; } .saveMenuButton:hover { - background-color: #4372FF !important; + background-color: var(--blue) !important; } .saveMenuConfirm { @@ -622,7 +696,7 @@ input.heart:hover{ } .saveBorder { - border: 1px solid #ccc; + border: 1px solid var(--200); max-width: 700px; padding: 5px 2px 30px; margin: 10px 2px 10px; @@ -639,7 +713,7 @@ input.heart:hover{ min-width: 275px; padding: 3px; margin: 5px; - border: 1px solid #666; + border: 1px solid var(--700); } .settingsToggle input[name|="numberslider-input"]{ @@ -731,7 +805,7 @@ input.heart:hover{ } .solidBorderContainer { - border: 1px solid #333; + border: 1px solid var(--800); padding: 5px; } @@ -806,7 +880,7 @@ body.has-images #storyCaptionContent { padding-bottom: 12px; overflow-y: scroll; overflow-wrap: anywhere; - scrollbar-color: #444 #222; + scrollbar-color: var(--750) var(--850); } body.has-images #story-caption .storyCaptionContentExtended { @@ -815,11 +889,11 @@ body.has-images #story-caption .storyCaptionContentExtended { } *::-webkit-scrollbar-thumb{ - background-color: #444; + background-color: var(--750); } *::-webkit-scrollbar{ - background-color: #222; + background-color: var(--850); width: 10px; } @@ -842,7 +916,7 @@ body.has-images #story-caption .storyCaptionContentExtended { height: 16px; border-radius: 8px; font-size: 12pt; - background: red; + background: var(--red); line-height: 1; cursor: pointer; } @@ -864,7 +938,7 @@ body.no-images #ui-bar-body { float:left; width: 48%; min-width: 375px; - border: solid 2px #555; + border: solid 2px var(--700); padding:4px; height: 310px; } @@ -873,7 +947,7 @@ body.no-images #ui-bar-body { height: 192px; width: 128px; overflow: hidden; - background-color: #222; + background-color: var(--850); } .shopImg > * { @@ -902,7 +976,7 @@ body.no-images #ui-bar-body { display: inline-block; padding: 2px; float: left; - border: solid 1px #aaa; + border: solid 1px var(--300); height: 100%; width: 90%; min-width: 400px; @@ -911,11 +985,10 @@ body.no-images #ui-bar-body { } .furnitureBlock { - display: inline-block; padding: 2px; float: left; - border: solid 1px #aaa; + border: solid 1px var(--300); height: 30px; width: 48%; min-width: 400px; @@ -930,7 +1003,7 @@ body.no-images #ui-bar-body { display: inline-block; padding: 2px; float: left; - border: solid 1px #aaa; + border: solid 1px var(--300); height: 30px; width: 48%; min-width: 400px; @@ -943,7 +1016,7 @@ body.no-images #ui-bar-body { display: inline-block; padding: 2px; float: left; - border: solid 1px #aaa; + border: solid 1px var(--300); height: 100%; width: 90%; min-width: 400px; @@ -953,14 +1026,14 @@ body.no-images #ui-bar-body { } #wardrobeLinks .selected, #bodywritingMenuLinks .selected a { - color: #FFD700; + color: var(--yellow); text-decoration: underline; } .clothingBox { display: inline-block; float: left; - border: solid 2px #fff; + border: solid 2px var(--000); height: 250px; width: 270px; padding: 4px; @@ -984,7 +1057,7 @@ body.no-images #ui-bar-body { } #outfitEditorList > div { - border: 1px solid #ccc; + border: 1px solid var(--200); padding: 5px; margin: 5px; max-width: 500px; @@ -994,7 +1067,7 @@ body.no-images #ui-bar-body { #customColor div { height: 30px; width: 200px; - background-color: red; + background-color: var(--red); } .presetConfirm { @@ -1019,7 +1092,7 @@ body.no-images #ui-bar-body { .card { width:50px; height:75px; - border:1px solid #ccc; + border:1px solid var(--200); margin-right:7px; margin-bottom:7px; border-radius:7px; @@ -1035,86 +1108,82 @@ span.number, span.suit { } .red { - color: #EC3535; + color: var(--red); } .pink { - color: #E40081; + color: var(--pink); } .light-pink { - color: #d67caf; + color: var(--pink-secondary); } .purple { - color: #AA4BC8; + color: var(--purple-secondary); } .blue { - color: #4372FF; + color: var(--blue); } .lblue, .light-blue { - color: #559BC0; + color: var(--blue-secondary); } .teal { - color: #08C1C1; + color: var(--teal); } .green { - color: #38B20A; + color: var(--green); } .lime-green{ - color: #44e342 + color: var(--lime) } .brown { - color: #4C2217; + color: var(--brown); } .brat { - color: #B75D41; + color: var(--brat); } .meek { - color: #C44B8B; + color: var(--meek); } .def { - color: #D20000; + color: var(--defiant); } .hide a { - color: #eee; + color: var(--100); text-decoration: none; } .hide a:hover { - color: #eee; + color: var(--100); text-decoration: none; } .sub { - color: #AA4BC8; + color: var(--purple-secondary); } .gold, .gold button, .goldLink a { - color: #FFD700; -} - -.goldLink a:hover { - color: #ffed8a; + color: var(--yellow); } .linkBlue { - color: #5888dd; + color: var(--link); } .silver { - color: silver; + color: var(--silver); } .bronze { @@ -1131,20 +1200,20 @@ span.number, span.suit { .yellow, .pale-yellow { - color: #FFD700; + color: var(--yellow); } .orange { - color: #f28500; + color: var(--orange); } .tangerine, .pale-tangerine { - color: #f28500; + color: var(--orange); } .black { - color: #929292; + color: var(--black); } .brown { @@ -1180,7 +1249,7 @@ span.number, span.suit { } .lewd { - color: #E04880; + color: var(--lewd); } .grey { @@ -1207,102 +1276,102 @@ span.number, span.suit { color: #667DC1; } -.wine, .apocalypse { +.wine { color: #8B3626; } .relaxed { - color:#63719C + color:var(--relaxed) } .anxious { - color:#973253 + color:var(--anxious) } .veteran { - color:#956BB4 + color:var(--veteran) } .methodical { - color:#CE7993 + color:var(--methodical) } .scarred { - color:#D8621F + color:var(--scarred) } .tattooed { - color:#266568 + color:var(--tattooed); } /* background colours */ .bg-red { - background-color: #EC3535; + background-color: var(--red); } .bg-pink { - background-color: #E40081; + background-color: var(--pink); } .bg-light-pink { - background-color: #d67caf; + background-color: var(--pink-secondary); } .bg-purple { - background-color: #AA4BC8; + background-color: var(--purple-secondary); } .bg-blue { - background-color: #4372FF; + background-color: var(--blue); } .bg-lblue, .bg-light-blue { - background-color: #559BC0; + background-color: var(--blue-secondary); } .bg-teal { - background-color: #08C1C1; + background-color: var(--teal); } .bg-green { - background-color: #38B20A; + background-color: var(--green); } .bg-light-green { - background-color: #7caf7c; + background-color: var(--green-secondary); } .bg-lime-green{ - background-color: #44e342 + background-color: var(--lime); } .bg-brown { - background-color: #4C2217; + background-color: var(--brown); } .bg-brat { - background-color: #B75D41; + background-color: var(--brat); } .bg-meek { - background-color: #C44B8B; + background-color: var(--meek); } .bg-def { - background-color: #D20000; + background-color: var(--defiant); } .bg-sub { - background-color: #AA4BC8; + background-color: var(--purple-secondary); } .bg-gold { - background-color: #FFD700; + background-color: var(--yellow); } .bg-silver { - background-color: silver; + background-color: var(--silver); } .bg-bronze { @@ -1319,25 +1388,25 @@ span.number, span.suit { .bg-yellow, .bg-pale-yellow { - background-color: #FFD700; + background-color: var(--yellow); } .bg-orange { - background-color: #f28500; + background-color: var(--orange); } .bg-tangerine, .bg-pale-tangerine { - background-color: #f28500; + background-color: var(--orange); } .bg-black { - background-color: #000; + background-color: var(--900); } .bg-white, .bg-pale-white { - background-color: #EEE; + background-color: var(--100); } .bg-brown { @@ -1373,7 +1442,7 @@ span.number, span.suit { } .bg-lewd { - background-color: #E04880; + background-color: var(--lewd); } .bg-grey { @@ -1396,7 +1465,7 @@ span.number, span.suit { background-color: #667DC1; } -.bg-wine, .bg-apocalypse { +.bg-wine { background-color: #8B3626; } @@ -1425,7 +1494,7 @@ span.number, span.suit { } .grey-shadow { - filter: drop-shadow(1px 1px 0px #666); + filter: drop-shadow(1px 1px 0px var(--700)); } #stats { @@ -1433,13 +1502,13 @@ span.number, span.suit { line-height: 1.25em; width: 280px; overflow: hidden; - border-top: #fff 2px solid; - border-bottom: #fff 2px solid; + border-top: var(--000) 2px solid; + border-bottom: var(--000) 2px solid; padding-top: 1px; position: fixed; top: 228px; left: 0px; - background-color: #222; + background-color: var(--850); z-index: 1000; } @@ -1472,7 +1541,7 @@ span.number, span.suit { position: fixed; top: 0px; left: 0px; - background-color: #222; + background-color: var(--850); } #img > .canvasimg-both { @@ -1497,15 +1566,15 @@ span.number, span.suit { } .imgLighten { - background-color: #777 !important; + background-color: var(--600) !important; } .imgLighten2 { - background-color: #999 !important; + background-color: var(--400) !important; } #ui-bar-toggle { - background-color: #222; + background-color: var(--850); } #versioninfo, #story-title { @@ -1640,7 +1709,7 @@ span.number, span.suit { } .toysUiElement { - border: 1px solid #ccc; + border: 1px solid var(--200); margin: 2px; padding: 0px 5px 10px; min-width: 300px; @@ -1654,7 +1723,7 @@ span.number, span.suit { } .childUi { - border: 1px solid #ccc; + border: 1px solid var(--200); margin: 2px; padding: 5px; min-width: 300px; @@ -1667,7 +1736,7 @@ span.number, span.suit { } .childrenUi { - border: 1px solid #ccc; + border: 1px solid var(--200); margin: 2px; padding: 5px; min-width: 230px; @@ -1813,7 +1882,7 @@ Combat display styles display: flex; flex-direction: column; padding: 2px; - border: solid 1px #555; + border: solid 1px var(--700); margin: 5px; } @@ -1828,7 +1897,7 @@ Combat display styles position: relative; text-decoration: none; font-family: "Poppins",sans-serif; - color: #ffffff; + color: var(--000); cursor: pointer; } .rainbow:before { @@ -1922,31 +1991,31 @@ Combat display styles } .whiteList select,.whiteList select:hover,.whiteList select:focus{ - border:#fff 2px solid; + border:var(--000) 2px solid; width: 99%; max-width: 300px; } .bratList select,.bratList select:hover,.bratList select:focus{ - border:#B75D41 2px solid; + border:var(--brat) 2px solid; width: 99%; max-width: 300px; } .meekList select,.meekList select:hover,.meekList select:focus{ - border:#C44B8B 2px solid; + border:var(--meek) 2px solid; width: 99%; max-width: 300px; } .defList select,.defList select:hover,.defList select:focus{ - border:#D20000 2px solid; + border:var(--defiant) 2px solid; width: 99%; max-width: 300px; } .subList select,.subList select:hover,.subList select:focus{ - border:#AA4BC8 2px solid; + border:var(--purple-secondary) 2px solid; width: 99%; max-width: 300px; } @@ -2514,8 +2583,8 @@ div[id|="numberslider-body"] input:focus { outline: none; } div[id|="numberslider-body"] input::-webkit-slider-runnable-track { - background: #222; - border: 1px solid #444; + background: var(--850); + border: 1px solid var(--750); border-radius: 0; cursor: pointer; height: 10px; @@ -2524,7 +2593,7 @@ div[id|="numberslider-body"] input::-webkit-slider-runnable-track { div[id|="numberslider-body"] input::-webkit-slider-thumb { -webkit-appearance: none; background: #ddd; - border: 3px solid #aaa; + border: 3px solid var(--300); border-radius: 0; cursor: pointer; height: 18px; @@ -2532,11 +2601,11 @@ div[id|="numberslider-body"] input::-webkit-slider-thumb { width: 33px; } div[id|="numberslider-body"] input:focus::-webkit-slider-runnable-track { - background: #222; + background: var(--850); } div[id|="numberslider-body"] input::-moz-range-track { - background: #222; - border: 1px solid #444; + background: var(--850); + border: 1px solid var(--750); border-radius: 0; cursor: pointer; height: 10px; @@ -2544,7 +2613,7 @@ div[id|="numberslider-body"] input::-moz-range-track { } div[id|="numberslider-body"] input::-moz-range-thumb { background: #ddd; - border: 3px solid #aaa; + border: 3px solid var(--300); border-radius: 0; cursor: pointer; height: 18px; @@ -2560,18 +2629,18 @@ div[id|="numberslider-body"] input::-ms-track { width: calc(100% - 1px); } div[id|="numberslider-body"] input::-ms-fill-lower { - background: #222; - border: 1px solid #444; + background: var(--850); + border: 1px solid var(--750); border-radius: 0; } div[id|="numberslider-body"] input::-ms-fill-upper { - background: #222; - border: 1px solid #444; + background: var(--850); + border: 1px solid var(--750); border-radius: 0; } div[id|="numberslider-body"] input::-ms-thumb { background: #ddd; - border: 3px solid #aaa; + border: 3px solid var(--300); border-radius: 0; cursor: pointer; height: 16px; @@ -2599,7 +2668,7 @@ label { position: relative; height: 0.25em; width: 100%; - background-color: gray; + background-color: var(--600); text-align: center; z-index: -10; } @@ -2615,7 +2684,7 @@ label { position: relative; height: 0.375em; width: 55%; - background-color: gray; + background-color: var(--600); text-align: center; z-index: -10; float: right; @@ -2627,7 +2696,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #EC3535; + background-color: var(--red); z-index: 0; max-width: 100%; } @@ -2641,7 +2710,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #E40081; + background-color: var(--pink); z-index: 0; max-width: 100%; } @@ -2655,7 +2724,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #AA4BC8; + background-color: var(--purple-secondary); z-index: 0; max-width: 100%; } @@ -2669,7 +2738,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #4372FF; + background-color: var(--blue); z-index: 0; max-width: 100%; } @@ -2683,7 +2752,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #559BC0; + background-color: var(--blue-secondary); z-index: 0; max-width: 100%; } @@ -2697,7 +2766,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #08C1C1; + background-color: var(--teal); z-index: 0; max-width: 100%; } @@ -2711,7 +2780,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #38B20A; + background-color: var(--green); z-index: 0; max-width: 100%; } @@ -2725,7 +2794,7 @@ label { left: 0; top: 0; height: 0.25em; - background-color: #FFD700; + background-color: var(--yellow); z-index: 0; max-width: 100%; } @@ -3265,11 +3334,6 @@ label { -webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%); filter: hue-rotate(351deg) saturate(28%) brightness(90%); } - -.clothes-apocalypse { - -webkit-filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0); - filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0); -} .clothes-steel { -webkit-filter: saturate(0%) brightness(310%) sepia(10%); filter: saturate(0%) brightness(310%) sepia(10%); @@ -3387,10 +3451,6 @@ label { -webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%); filter: hue-rotate(351deg) saturate(28%) brightness(90%); } -.upper-apocalypse .colour-upper, .lower-apocalypse .colour-lower, .under_lower-apocalypse .colour-under_lower, .under_upper-apocalypse .colour-under_upper, .head-apocalypse .colour-head, .face-apocalypse .colour-face, .neck-apocalypse .colour-neck, .legs-apocalypse .colour-legs, .feet-apocalypse .colour-feet, .upper_acc-apocalypse .colour-upper_acc, .lower_acc-apocalypse .colour-lower_acc, .under_lower_acc-apocalypse .colour-under_lower_acc, .under_upper_acc-apocalypse .colour-under_upper_acc, .head_acc-apocalypse .colour-head_acc, .face_acc-apocalypse .colour-face_acc, .neck_acc-apocalypse .colour-neck_acc, .legs_acc-apocalypse .colour-legs_acc, .feet_acc-apocalypse .colour-feet_acc, .icon-apocalypse { - -webkit-filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0); - filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0); -} /* wet clothes */ .upper-wetblue .colour-upper, .lower-wetblue .colour-lower, .under_lower-wetblue .colour-under_lower, .under_upper-wetblue .colour-under_upper { @@ -4156,11 +4216,9 @@ canvas { @keyframes anim-default { 0% { - -webkit-transform: translateX(0); transform: translateX(0); } 100% { - -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @@ -4186,7 +4244,7 @@ canvas { flex: 1 1 100px; min-width: 18%; margin: 0.15rem; - border: 1px solid #aaa; + border: 1px solid var(--300); padding: 0.3rem; text-align: center; } @@ -4226,7 +4284,7 @@ canvas { } .characteristic-box-list .characteristic-description.grade-progress { - border-bottom: 1px solid gray; + border-bottom: 1px solid var(--600); width: 80%; padding-bottom: 0; margin-bottom: 0.3rem; @@ -4309,17 +4367,17 @@ canvas { } #sex-diagram .connector-box-top { - border-top: 1px solid #aaa; + border-top: 1px solid var(--300); } #sex-diagram .connector-box-bottom { height: var(--connector-height); - border-bottom: 1px solid #aaa; + border-bottom: 1px solid var(--300); } #sex-diagram .connector-box.invert .connector-box-bottom { top: calc( -1 * var(--connector-height)); - border-top: 1px solid #aaa; + border-top: 1px solid var(--300); border-bottom: none; } @@ -4331,7 +4389,7 @@ canvas { #sex-diagram .left-column .connector-box-bottom { left: calc(100% - var(--center-offset)); right: var(--end-offset); - border-left: 1px solid #aaa; + border-left: 1px solid var(--300); } #sex-diagram .right-column .connector-box-top { @@ -4342,7 +4400,7 @@ canvas { #sex-diagram .right-column .connector-box-bottom { left: var(--end-offset); right: calc(100% - var(--center-offset)); - border-right: 1px solid #aaa; + border-right: 1px solid var(--300); } @media(max-width: 1200px) { @@ -4380,7 +4438,7 @@ canvas { min-width: 250px; max-width: 100%; margin: 0.15rem; - border: 1px solid #aaa; + border: 1px solid var(--300); text-align: center; overflow: hidden; flex: 1 1 32.4%; @@ -4390,7 +4448,7 @@ canvas { display: flex; align-items: space-between; font-size: 1.1em; - border-bottom: 1px solid #444; + border-bottom: 1px solid var(--750); padding: 0.3em; align-self: stretch; } @@ -4419,8 +4477,8 @@ canvas { .relation-box .relation-stat-list { display: flex; flex-wrap: wrap; - background-image: linear-gradient(transparent 50%, #444 0.1em, transparent calc(50% + .1em)), linear-gradient(90deg, transparent 50%, #444 .1em, transparent calc(50% + .1em)); - border-top: 1px solid #444; + background-image: linear-gradient(transparent 50%, var(--750) 0.1em, transparent calc(50% + .1em)), linear-gradient(90deg, transparent 50%, var(--750) .1em, transparent calc(50% + .1em)); + border-top: 1px solid var(--750); background-size: contain; background-repeat: no-repeat; flex: 1; @@ -4517,7 +4575,7 @@ canvas { #secondary-npcs .relation-box, #farm-status .relation-box { min-width: 220px; - border-color: #888; + border-color: var(--500); flex: 0 1 24.3% } @@ -4559,7 +4617,7 @@ canvas { #global-recognition .relation-box { flex: 1 1 30%; min-width: 220px; - border-color: #666; + border-color: var(--700); } #global-recognition .relation-box:last-child { @@ -4592,28 +4650,23 @@ canvas { animation: anim-eyes-blink-trauma 180s infinite steps(1); } .eyes-closed { - -webkit-transform: translateX(-50%); transform: translateX(-50%); } @keyframes anim-eyes-blink { 0%, 5.05%, 13.1%, 16.15%, 16.8%, 23.8%, 36.85%, 41.9%, 42.95%, 47%, 53.05%, 57.1%, 61.15%, 66.2%, 73.25%, 79.3%, 82.35%, 83.4%, 83.95%, 89%, 93.05%, 99.1%, 100% { - -webkit-transform: translateX(0); transform: translateX(0); } 5%, 13.05%, 16.1%, 16.75%, 23.75%, 36.8%, 41.85%, 42.9%, 46.95%, 53%, 57.05%, 61.1%, 66.15%, 73.2%, 79.25%, 82.3%, 83.35%, 83.9%, 88.95%, 93%, 99.05% { - -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes anim-eyes-blink-trauma { 0%, 13.1%, 23.2%, 38.3%, 51.4%, 69.5%, 77.6%, 90.7%, 100% { - -webkit-transform: translateX(0); transform: translateX(0); } 13%, 23.1%, 38.2%, 51.3%, 69.4%, 77.5%, 90.6%, 99.9% { - -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @@ -4664,7 +4717,7 @@ canvas { .clothes-price-container .numberslider-group { display: flex; flex-direction: column; - border: 1px solid #444; + border: 1px solid var(--750); border-left: none; border-right: none; margin-top: 4px; @@ -4688,11 +4741,11 @@ canvas { .button { width: fit-content; - border: 1px solid #888; + border: 1px solid var(--500); padding: 0 0.5em; } .button:hover { - background-color: #333; + background-color: var(--800); cursor: pointer; } @@ -4714,7 +4767,7 @@ canvas { } #card-cover-options .cardcover0 { - background-color: #222; + background-color: var(--850); line-height: 1.75; } @@ -4819,12 +4872,12 @@ a[target="_blank"]::after { top: 0; transform: translateY(-100%); transition: all 0.25s; - border: 1px solid #888; + border: 1px solid var(--500); border-top: none; border-radius: 0 0 5px 5px; padding: 0 3em; text-align: center; - background-color: #222; + background-color: var(--850); z-index: 100; } #action-popup br { @@ -4832,7 +4885,7 @@ a[target="_blank"]::after { } #wardrobewear { display: table; - background-color: #0000; + background-color: var(--900); border-radius: 3px; transition: all 1.25s; } @@ -4862,27 +4915,22 @@ img, canvas { } .rotate-90 { - -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-180 { - -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-270 { - -webkit-transform: rotate(270deg); transform: rotate(270deg); } .flip { - -webkit-transform: scaleX(-1); transform: scaleX(-1); } .none { - -webkit-transform: scaleX(0); transform: scaleX(0); } @@ -4898,7 +4946,7 @@ img, canvas { .rainbow { animation: 60s infinite linear rainbow; - background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, #8800ff, #ff0000); + background: linear-gradient(90deg, var(--red), #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, var(--purple), var(--red)); background-clip: text; -webkit-background-clip: text; color: transparent ; @@ -4911,7 +4959,7 @@ img, canvas { .lustful { animation: 60s infinite linear lustful; - background: linear-gradient(90deg, #8800ff, #E04880, #b66bec, #FF1493 ); + background: linear-gradient(90deg, var(--purple), var(--lewd), #b66bec, #FF1493 ); background-clip: text; -webkit-background-clip: text; color: transparent ; @@ -4924,18 +4972,18 @@ img, canvas { .tentacle { animation: 60s infinite linear tentacle; - background: linear-gradient(90deg, #8800ff, #8800ff, #8800ff, #8800ff, #8800ff, #FF1493 ); + background: linear-gradient(90deg, var(--purple), var(--purple), var(--purple), var(--purple), var(--purple), #FF1493 ); background-clip: text; -webkit-background-clip: text; color: transparent ; } .wraith { - background: #f1f1db; + background: var(--150); text-shadow: - 0 0 7px #f1f1db, - 0 0 22px #8800ff, - 0 0 32px #8800ff; + 0 0 7px var(--150), + 0 0 22px var(--purple), + 0 0 32px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; @@ -4946,38 +4994,38 @@ img, canvas { } .nextWraith a { - background: #f1f1db; + background: var(--150); text-shadow: - 0 0 12px #f1f1db, - 0 0 27px #8800ff, - 0 0 37px #8800ff; + 0 0 12px var(--150), + 0 0 27px var(--purple), + 0 0 37px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; } .nextLink a { - background: #5888dd; + background: var(--link); text-shadow: - 0 0 7px #f1f1db, - 0 0 22px #8800ff, - 0 0 32px #8800ff; + 0 0 7px var(--150), + 0 0 22px var(--purple), + 0 0 32px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; } .fading { - background: #f1f1db; - text-shadow: 0 0 32px #8800ff; + background: var(--150); + text-shadow: 0 0 32px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; opacity: 1; } .faded { - background: #f1f1db; - text-shadow: 0 0 32px #8800ff; + background: var(--150); + text-shadow: 0 0 32px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; @@ -4998,8 +5046,8 @@ img, canvas { } .flicker { - background: #f1f1db; - text-shadow: 0 0 32px #8800ff; + background: var(--150); + text-shadow: 0 0 32px var(--purple); background-clip: text; -webkit-background-clip: text; color: transparent; diff --git a/game/02-CSS/clothing-shop-v2.css b/game/02-CSS/clothing-shop-v2.css index fa36269906f1a8280be0a1146541e4445a331052..46127985ed0f20eb96c6723f7e46e8e807dcc6c3 100644 --- a/game/02-CSS/clothing-shop-v2.css +++ b/game/02-CSS/clothing-shop-v2.css @@ -6,7 +6,7 @@ position: absolute; top: -1em; left: min(1em, 2%); - border: 1px solid #444; + border: 1px solid var(--750); border-left: none; width: fit-content; padding: 0 0.5em; @@ -15,7 +15,7 @@ .button-back-to-shop:before, .button-back-to-shop:after { content: ""; - border-top: 1px solid #444; + border-top: 1px solid var(--750); display: block; position: absolute; width: 1.16em; @@ -35,7 +35,7 @@ .button-back-to-shop:hover, .button-back-to-shop:hover::before, .button-back-to-shop:hover::after { - background-color: #222; + background-color: var(--850); } @media only screen and (max-width: 349px) { @@ -66,7 +66,7 @@ cursor: pointer; } .clothing-item:hover { - background-color: #222; + background-color: var(--850); } .clothing-item-spacer { @@ -74,7 +74,7 @@ width: 49%; min-width: 250px; height: 60px; - border: 1px dashed dimgrey; + border: 1px dashed var(--700); margin: 0.25%; } .clothing-item-spacer.compact { @@ -93,7 +93,7 @@ width: 5px; height: 5px; margin-right: -3px; - border: 1px solid #555; + border: 1px solid var(--750); border-radius: 50%; } @@ -141,8 +141,8 @@ .clothing-price { position: absolute; - background: grey; - color: black; + background: var(--600); + color: var(--900); font-size: 0.8em; font-weight: bold; border-radius: 50% 10% 10% 50%; @@ -154,14 +154,14 @@ transition: all 0.2s; } .clothing-item:hover .clothing-price { - background: gold; + background: var(--gold); transform: rotate(10deg); - filter: drop-shadow(2px 4px 6px black); + filter: drop-shadow(2px 4px 6px var(--900)); } .clothing-price:before { display: inline-block; position: relative; - background-color: black; + background-color: var(--900); width: 0.3em; height: 0.3em; border-radius: 50%; @@ -213,7 +213,7 @@ line-height: 1.25em; margin-bottom: 0.25em; font-size: 0.9em; - color: silver; + color: var(--silver); } .unlocked-hint { font-size: 0.9em; @@ -293,7 +293,7 @@ width: 20px; height: 20px; display: inline-block; - border: 1px solid lightgrey; + border: 1px solid var(--200); border-radius: 10%; margin-right: -2px; } @@ -366,7 +366,7 @@ } .clothing-price { background: none; - color: gold; + color: var(--gold); transform: rotate(0); font-size: 0.9em; top: 0; @@ -399,17 +399,17 @@ -ms-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); transform: skewX(-30deg); - border: 1px solid white; + border: 1px solid var(--000); margin: 0 0 -1px -1px; transition: all 0.1s; } .category-tab:hover { - background-color: lightgrey; + background-color: var(--200); cursor: pointer; } .category-tab.active, .category-tab.active:hover { - background-color: white; + background-color: var(--000); cursor: unset; } .category-tab > img { @@ -438,7 +438,7 @@ } .active > .category-icon-alt, .category-icon-alt:hover { - color: black; + color: var(--900); } @media only screen and (max-width: 345px) { @@ -468,7 +468,7 @@ .page { width: 0.75em; height: 0.75em; - border: 3px solid white; + border: 3px solid var(--000); border-radius: 50%; display: inline-flex; vertical-align: middle; @@ -478,24 +478,24 @@ cursor: pointer; } .page:hover { - background-color: #222; + background-color: var(--850); } .page.active { - background-color: white; + background-color: var(--000); } .page.active a { cursor: default; } .btn-pagination { - border: 2px solid white; + border: 2px solid var(--000); padding: 0 1em; text-align: center; cursor: pointer; transition: all 0.1s; } .btn-pagination:hover { - background-color: #222; + background-color: var(--850); } .btn-pagination-arrow { font-family: monospace; @@ -547,9 +547,9 @@ } .colour-button { - border: 1px solid #444; + border: 1px solid var(--750); margin: 0 0.25em 0.25em 0; - background-color: #222; + background-color: var(--850); height: fit-content; } .colour-button:hover { @@ -568,7 +568,7 @@ filter: none !important; } .colour-options-div > .active > div { - box-shadow: inset 0 0 0 1px #FFF, inset 0 0 0 2px #000; + box-shadow: inset 0 0 0 1px var(--white), inset 0 0 0 2px var(--900); } .colour-button > div > img { @@ -578,15 +578,15 @@ } .colour-name-span { - color: #444; + color: var(--750); mix-blend-mode: hard-light; - filter: drop-shadow(-1px -1px 0px #AAA) drop-shadow(-1px 1px 0px #AAA) drop-shadow(1px 1px 0px #AAA) drop-shadow(1px -1px 0px #AAA); + filter: drop-shadow(-1px -1px 0px var(--300)) drop-shadow(-1px 1px 0px var(--300)) drop-shadow(1px 1px 0px var(--300)) drop-shadow(1px -1px 0px var(--300)); pointer-events: none; } .colour-name-span-highcontrast { - color: #111; + color: var(--850); mix-blend-mode: normal; - filter: drop-shadow(1px 1px 0px #DDD) drop-shadow(1px -1px 0px #DDD) drop-shadow(-1px -1px 0px #DDD) drop-shadow(-1px 1px 0px #DDD); + filter: drop-shadow(1px 1px 0px var(--200)) drop-shadow(1px -1px 0px var(--200)) drop-shadow(-1px -1px 0px var(--200)) drop-shadow(-1px 1px 0px var(--200)); pointer-events: none; } @@ -616,8 +616,8 @@ } .mannequin { overflow: hidden; - border: 1px solid #444; - background-color: #222; + border: 1px solid var(--750); + background-color: var(--850); display: table; z-index: 1; } @@ -661,7 +661,7 @@ opacity: 20%; } .mannequin-gender-button:hover { - background-color: #6666; + background-color: var(--700); opacity: 100%; } @@ -689,7 +689,7 @@ color: #6688dd; } .mannequin-gender-textbutton:hover { - background-color: #222; + background-color: var(--850); } .mannequin-gender-textbutton:hover:before { content: "["; @@ -738,7 +738,7 @@ } .colour-slider > .macro-numberslider > span { - border: 1px solid #444; + border: 1px solid var(--750); border-left: none; margin-left: 0; border-radius: 0 3px 3px 0; @@ -783,7 +783,7 @@ align-items: center; width: 100%; height: 30px; - border: 1px solid #444; + border: 1px solid var(--750); border-radius: 4px; transition: all 0.1s; } @@ -801,7 +801,7 @@ width: 24px; height: 24px; padding: 3px; - border: 1px solid #444; + border: 1px solid var(--750); border-radius: 3px; transition: all 0.1s; } @@ -812,7 +812,7 @@ .save-preset:hover, .delete-preset:hover { - background-color: #222; + background-color: var(--850); } @media only screen and (max-width: 600px) { @@ -857,7 +857,7 @@ flex-direction: column; margin-right: 1em; margin-bottom: 0.5em; - border: 1px solid #444; + border: 1px solid var(--750); line-height: 2em; } .buy-button:last-child, @@ -881,17 +881,17 @@ .buy-button-inner:hover, .try-button:hover { - background-color: #222; + background-color: var(--850); } .disabled { - border-color: #333; - color: #444; + border-color: var(--800); + color: var(--750); cursor: default; background: unset !important; } .disabled * { - color: #444; + color: var(--750); } .disabled img { filter: saturate(0) brightness(0.4); @@ -937,7 +937,7 @@ width: 48px; height: 48px; top: -1.5em; - border: 1px solid #444; + border: 1px solid var(--750); border-radius: 3px; transition: all 0.1s; display: flex; @@ -957,7 +957,7 @@ .clothingshop-options-button:hover, .shop-legend-button:hover, .shop-legend-button.active { - background-color: #222; + background-color: var(--850); } @media only screen and (max-width: 420px) { @@ -1017,8 +1017,8 @@ right: min(7%, 8em); top: min(5%, 8em); bottom: min(5%, 8em); - border: 2px solid white; - background: #111; + border: 2px solid var(--000); + background: var(--850); padding: 1em; display: flex; flex-direction: column; @@ -1030,7 +1030,7 @@ flex-direction: row-reverse; flex-wrap: wrap; padding-bottom: 0.5em; - border-bottom: 2px solid #444; + border-bottom: 2px solid var(--750); } .filters { @@ -1047,7 +1047,7 @@ .filter-block { display: flex; flex-direction: column; - border: 1px dashed #444; + border: 1px dashed var(--750); padding: 0.5em 1em; margin: 0.5em; } @@ -1091,14 +1091,14 @@ .filter-button, .options-button { - border: 1px solid #444; + border: 1px solid var(--750); text-align: center; padding: 0 1em; margin: 0.25em 1em; } .filter-button:hover, .options-button:hover { - background-color: #222; + background-color: var(--850); } .high-contrast-example { @@ -1111,7 +1111,7 @@ position: absolute; top: 2em; border: 1px solid; - background: #222; + background: var(--850); padding: 1em; font-size: 90%; right: 0%; diff --git a/game/02-CSS/debug.css b/game/02-CSS/debug.css index 505aa9cdd6533ab43f738a568ffec6ba3997586d..a46337769b74840d23e7c3763772aa32b339149d 100644 --- a/game/02-CSS/debug.css +++ b/game/02-CSS/debug.css @@ -3,7 +3,7 @@ width: 120px; overflow: hidden; background-color: #222; - border: solid 1px #ddd; + border: solid 1px var(--200); } .debug-images > * { position: absolute; @@ -28,15 +28,15 @@ } #saveCompareUI { - border: solid 1px #aaa; + border: solid 1px var(--300); } #saveCompareUI { - border: solid 1px #aaa; + border: solid 1px var(--300); } #comparedResult .item { - border: solid 1px #aaa; + border: solid 1px var(--300); padding: 3px; margin: 3px 0; word-wrap: break-word; diff --git a/game/02-CSS/ion.rangeSlider.css b/game/02-CSS/ion.rangeSlider.css index c3c936a9d8e82fc41804b27fb0768171013d6cf6..f083ef5f8af7bcd9d2c5ce9d3701f3eb79da65eb 100644 --- a/game/02-CSS/ion.rangeSlider.css +++ b/game/02-CSS/ion.rangeSlider.css @@ -82,7 +82,7 @@ Build date: 2019-12-19 16:51:02 left: 0; width: 1px; height: 8px; - background: #000; + background: var(--900); } .irs-grid-pol.small { height: 4px; @@ -96,7 +96,7 @@ Build date: 2019-12-19 16:51:02 font-size: 9px; line-height: 9px; padding: 0 3px; - color: #000; + color: var(--900); } .irs-disable-mask { position: absolute; @@ -106,11 +106,11 @@ Build date: 2019-12-19 16:51:02 width: 102%; height: 100%; cursor: default; - background: rgba(0, 0, 0, 0); + background: transparent; z-index: 2; } .lt-ie9 .irs-disable-mask { - background: #000; + background: var(--900); filter: alpha(opacity=0); cursor: not-allowed; } @@ -184,7 +184,7 @@ Build date: 2019-12-19 16:51:02 .irs--flat .irs-max { top: 0; padding: 1px 3px; - color: #999; + color: var(--400); font-size: 10px; line-height: 1.333; text-shadow: none; @@ -194,7 +194,7 @@ Build date: 2019-12-19 16:51:02 .irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single { - color: white; + color: var(-000); font-size: 10px; line-height: 1.333; text-shadow: none; @@ -221,7 +221,7 @@ Build date: 2019-12-19 16:51:02 background-color: #e1e4e9; } .irs--flat .irs-grid-text { - color: #999; + color: var(--400); } .irs--big { height: 55px; @@ -232,9 +232,9 @@ Build date: 2019-12-19 16:51:02 .irs--big .irs-line { top: 33px; height: 12px; - background-color: white; - background: linear-gradient(to bottom, #ddd -50%, white 150%); - border: 1px solid #ccc; + background-color: var(--000); + background: linear-gradient(to bottom, var(--300) -50%, var(--000) 150%); + border: 1px solid var(--200); border-radius: 12px; } .irs--big .irs-bar { @@ -242,7 +242,7 @@ Build date: 2019-12-19 16:51:02 height: 12px; background-color: #92bce0; border: 1px solid #428bca; - background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%); + background: linear-gradient(to bottom, var(--000) 0%, #428bca 30%, #b9d4ec 100%); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5); } .irs--big .irs-bar--single { @@ -273,7 +273,7 @@ Build date: 2019-12-19 16:51:02 .irs--big .irs-max { top: 0; padding: 1px 5px; - color: white; + color: var(--000); text-shadow: none; background-color: #9f9f9f; border-radius: 3px; @@ -281,7 +281,7 @@ Build date: 2019-12-19 16:51:02 .irs--big .irs-from, .irs--big .irs-to, .irs--big .irs-single { - color: white; + color: var(--000); text-shadow: none; padding: 1px 5px; background-color: #428bca; @@ -340,7 +340,7 @@ Build date: 2019-12-19 16:51:02 width: 6px; height: 6px; border: 1px solid #a3adc1; - background: white; + background: var(--000); transform: rotate(45deg); } .irs--modern .irs-handle > i:nth-child(2) { @@ -352,7 +352,7 @@ Build date: 2019-12-19 16:51:02 width: 10px; height: 12px; background: #e9e6e6; - background: linear-gradient(to bottom, white 0%, #e9e6e6 100%); + background: linear-gradient(to bottom, var(--000) 0%, #e9e6e6 100%); border-radius: 0 0 3px 3px; } .irs--modern .irs-handle > i:nth-child(3) { @@ -370,7 +370,7 @@ Build date: 2019-12-19 16:51:02 .irs--modern .irs-handle:hover { border-color: #7685a2; background: #c3c7cd; - background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%); + background: linear-gradient(to bottom, var(--000) 0%, #919ba5 30%, var(--000) 100%); } .irs--modern .irs-handle.state_hover > i:nth-child(1), .irs--modern .irs-handle:hover > i:nth-child(1) { @@ -387,7 +387,7 @@ Build date: 2019-12-19 16:51:02 line-height: 1.333; text-shadow: none; padding: 1px 5px; - color: white; + color: var(--000); background-color: #d1d6e0; border-radius: 5px; } @@ -399,7 +399,7 @@ Build date: 2019-12-19 16:51:02 text-shadow: none; padding: 1px 5px; background-color: #20b426; - color: white; + color: var(--000); border-radius: 5px; } .irs--modern .irs-from:before, @@ -424,7 +424,7 @@ Build date: 2019-12-19 16:51:02 background-color: #dedede; } .irs--modern .irs-grid-text { - color: silver; + color: var(--silver); font-size: 13px; } .irs--sharp { @@ -438,7 +438,7 @@ Build date: 2019-12-19 16:51:02 .irs--sharp .irs-line { top: 30px; height: 2px; - background-color: black; + background-color: var(--900); border-radius: 2px; } .irs--sharp .irs-bar { @@ -472,11 +472,11 @@ Build date: 2019-12-19 16:51:02 } .irs--sharp .irs-handle.state_hover, .irs--sharp .irs-handle:hover { - background-color: black; + background-color: var(--900); } .irs--sharp .irs-handle.state_hover > i:first-child, .irs--sharp .irs-handle:hover > i:first-child { - border-top-color: black; + border-top-color: var(--900); } .irs--sharp .irs-min, .irs--sharp .irs-max { @@ -497,7 +497,7 @@ Build date: 2019-12-19 16:51:02 text-shadow: none; padding: 3px 4px; background-color: #a804b2; - color: white; + color: var(--000); border-radius: 2px; } .irs--sharp .irs-from:before, @@ -555,7 +555,7 @@ Build date: 2019-12-19 16:51:02 width: 24px; height: 24px; border: 4px solid #006cfa; - background-color: white; + background-color: var(--000); border-radius: 24px; box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3); } @@ -581,7 +581,7 @@ Build date: 2019-12-19 16:51:02 text-shadow: none; padding: 3px 5px; background-color: #006cfa; - color: white; + color: var(--000); border-radius: 4px; } .irs--round .irs-from:before, @@ -623,7 +623,7 @@ Build date: 2019-12-19 16:51:02 .irs--square .irs-bar { top: 31px; height: 4px; - background-color: black; + background-color: var(--900); } .irs--square .irs-shadow { height: 2px; @@ -634,8 +634,8 @@ Build date: 2019-12-19 16:51:02 top: 25px; width: 16px; height: 16px; - border: 3px solid black; - background-color: white; + border: 3px solid var(--900); + background-color: var(--000); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -646,7 +646,7 @@ Build date: 2019-12-19 16:51:02 } .irs--square .irs-min, .irs--square .irs-max { - color: #333; + color: var(--800); font-size: 14px; line-height: 1; top: 0; @@ -659,8 +659,8 @@ Build date: 2019-12-19 16:51:02 line-height: 1; text-shadow: none; padding: 3px 5px; - background-color: black; - color: white; + background-color: var(--900); + color: var(--000); } .irs--square .irs-from { @@ -668,7 +668,7 @@ Build date: 2019-12-19 16:51:02 line-height: 1; text-shadow: none; padding: 3px 5px; - background-color: black; + background-color: var(--900); color: rgb(0, 0, 255); } @@ -677,7 +677,7 @@ Build date: 2019-12-19 16:51:02 line-height: 1; text-shadow: none; padding: 3px 5px; - background-color: black; + background-color: var(--900); color: rgb(255, 0, 0); } @@ -685,16 +685,16 @@ Build date: 2019-12-19 16:51:02 height: 25px; } .irs--square .irs-grid-pol { - background-color: #dedede; + background-color: var(--100); } .irs--square .irs-grid-text { - color: silver; + color: var(--silver); font-size: 11px; } .irs--roundprobability { height: 50px; - --color: #ffffff; + --color: var(--000); } .irs--roundprobability.irs-with-grid { height: 65px; @@ -702,20 +702,20 @@ Build date: 2019-12-19 16:51:02 .irs--roundprobability .irs-line { top: 36px; height: 4px; - background-color: #ffffff; + background-color: var(--000); background-color: var(--color); border-radius: 4px; } .irs--roundprobability .irs-bar { top: 36px; height: 4px; - background-color: #ffffff; + background-color: var(--000); background-color: var(--color); } .irs--roundprobability .irs-bar2 { top: 36px; height: 4px; - background-color: #ffffff; + background-color: var(--000); background-color: var(--color); } .irs--roundprobability .irs-bar3 { @@ -737,7 +737,7 @@ Build date: 2019-12-19 16:51:02 height: 24px; border: 4px solid #006cfa; border-color: var(--color); - background-color: #ffffff; + background-color: var(--000); border-radius: 24px; box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3); } @@ -764,7 +764,7 @@ Build date: 2019-12-19 16:51:02 padding: 3px 5px; background-color: #006cfa; background-color: var(--color); - color: white; + color: var(--000); border-radius: 4px; margin: auto; } @@ -792,10 +792,10 @@ Build date: 2019-12-19 16:51:02 height: 25px; } .irs--roundprobability .irs-grid-pol { - background-color: #dedede; + background-color: var(--100); } .irs--roundprobability .irs-grid-text { - color: silver; + color: var(--silver); font-size: 13px; } diff --git a/game/02-CSS/pillsInventory.css b/game/02-CSS/pillsInventory.css index 058ece7007b84cb816ef73d5cfec4e9ec4473ef5..f0dbd5e871289799343a247f8c05afa6cc767fea 100644 --- a/game/02-CSS/pillsInventory.css +++ b/game/02-CSS/pillsInventory.css @@ -102,7 +102,7 @@ border-right: 1px solid; vertical-align: bottom; line-height: 250%; - background-color: #1c1c1c!important; + background-color: var(--850) !important; } .hpi_icon:hover, @@ -196,7 +196,7 @@ } .hpi_auto_label { - color: #bcbcbc; + color: var(--300); font-size: 0.65em; font-weight: bolder; text-transform: uppercase; diff --git a/game/02-CSS/sexToysInventory.css b/game/02-CSS/sexToysInventory.css index 5043826d8c0a0ebc96c1ecdf133c6f203e95a9d1..ffcb742c99c37c92d0a2457d6ea62db02a8b05e7 100644 --- a/game/02-CSS/sexToysInventory.css +++ b/game/02-CSS/sexToysInventory.css @@ -58,6 +58,7 @@ } .sti_full { + border: 1px solid transparent; background-color: #616164; cursor:pointer; }