Skip to content

Commit

Permalink
Working on polishing stuff up a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@kckarnige
kckarnige committed Dec 20, 2023
1 parent 64511ef commit f125fa8
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 76 deletions.
16 changes: 1 addition & 15 deletions src/config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,13 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="res/css/style.css" />
<style>
div#background {
background-image: url("res/background.png");
}
a#cornerButton {
position: absolute;
}
</style>
<link rel="shortcut icon" href="res/icons/icon.ico" />
<title>Ecsta - Set API Key</title>
</head>
<body>
<div id="background"></div>
<div id="root">
<div id="cornerButtonContainer">
<a id="cornerButton" class="home" href="index.html">Back</a>
<a id="cornerButton" class="settings" title="Close Settings">Close Settings</a>
<a id="cornerButton" class="key" href="setKey.html" title="Access Key">Key</a>
</div>
<div id="setContainer">
Expand All @@ -30,12 +21,7 @@ <h1>Change Query</h1>
<button id="resetQuery">Reset</button>
<button id="saveSettings">Save</button>
</div>
<div id="cornerButtonContainer" class="bottomCorner">
<a id="cornerButton" class="gh" href="https://github.com/kckarnige/EcstaTab" title="GitHub" target="_blank">GH</a>
<a id="cornerButton" class="kofi" href="https://ko-fi.com/kckarnige" title="Buy me a Ko-fi!" target="_blank">Ko-fi</a>
</div>
</div>
<script src="res/js/index.js"></script>
<script src="res/js/config.js"></script>
</body>
</html>
12 changes: 9 additions & 3 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<body>
<div id="background"></div>
<div id="root">
<div id="cornerButtonContainer">
<a id="cornerButton" class="settings" href="config.html" title="Settings">Settings</a>
<div id="cornerButtonContainer" class="options">
<a id="cornerButton" class="settings" title="Open Settings">Open Settings</a>
<a id="cornerButton" class="reload" title="Reroll background">Reroll</a>
</div>
<div id="timeContainer">
Expand All @@ -22,7 +22,13 @@
</div>
<div id="cornerButtonContainer" class="bottomCorner">
<a id="cornerButton" class="gh" href="https://github.com/kckarnige/EcstaTab" title="GitHub" target="_blank">GH</a>
<a id="cornerButton" class="kofi" href="https://ko-fi.com/kckarnige" title="Buy me a Ko-fi!" target="_blank">Ko-fi</a>
<a id="cornerButton" class="ko-fi" href="https://ko-fi.com/kckarnige" title="Buy me a Ko-fi!" target="_blank">Ko-fi</a>
</div>
<div id="settingsPanelContainer">
<iframe id="settingsPanel" src="config.html" allowtransparency="true">Looks like the iFrame couldn't load :/</iframe>
<div id="cornerButtonContainer">
<a id="cornerButton" class="home" href="index.html">Back</a>
</div>
</div>
</div>
<script src="res/js/index.js"></script>
Expand Down
10 changes: 10 additions & 0 deletions src/res/config.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 47 additions & 28 deletions src/res/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
html,
body {
font-size: 16px;
margin: 0;
Expand All @@ -10,7 +9,6 @@ body {
-moz-user-select: none;
user-select: none;
}
html div#background,
body div#background {
margin: 0;
height: 100vh;
Expand All @@ -20,7 +18,6 @@ body div#background {
background-position: center;
background-repeat: no-repeat;
}
html div#root,
body div#root {
overflow-x: hidden;
overflow-y: auto;
Expand All @@ -31,17 +28,14 @@ body div#root {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
html div#root a[href],
body div#root a[href] {
color: white;
transition: 0.1s ease-out;
}
html div#root a[href]:hover,
body div#root a[href]:hover {
opacity: 0.75;
transition: 0.1s ease-out;
}
html div#root input,
body div#root input {
font-size: 14px;
width: 344px;
Expand All @@ -54,9 +48,9 @@ body div#root input {
border-radius: 4px;
outline: none;
}
html div#root button,
body div#root button {
margin-top: 12px;
cursor: pointer;
font-size: 20px;
width: 160px;
text-align: center;
Expand All @@ -68,35 +62,37 @@ body div#root button {
border-radius: 4px;
outline: none;
}
html div#root div#setContainer,
body div#root button:hover {
color: lightgray;
}
body div#root button:active {
color: grey;
background-color: rgb(33, 33, 33);
}
body div#root div#setContainer {
padding-top: 72px;
text-align: center;
overflow: hidden;
}
html div#root div#setContainer div#setInfo,
body div#root div#setContainer div#setInfo {
margin-left: auto;
margin-right: auto;
font-size: 16px;
width: -moz-fit-content;
width: fit-content;
}
html div#root div#setContainer div#setInfo p,
body div#root div#setContainer div#setInfo p {
text-align: left;
margin-bottom: 6px;
}
html div#root div#cornerButtonContainer,
body div#root div#cornerButtonContainer {
height: 36px;
position: absolute;
overflow: hidden;
}
html div#root div#cornerButtonContainer.bottomCorner,
body div#root div#cornerButtonContainer.bottomCorner {
bottom: 0;
}
html div#root div#cornerButtonContainer a#cornerButton,
body div#root div#cornerButtonContainer a#cornerButton {
position: relative;
margin: 8px;
Expand All @@ -105,7 +101,6 @@ body div#root div#cornerButtonContainer a#cornerButton {
transition: 0.4s;
cursor: pointer;
}
html div#root div#cornerButtonContainer a#cornerButton.settings,
body div#root div#cornerButtonContainer a#cornerButton.settings {
content: url("../space.svg");
-webkit-mask-image: url("../gear.svg");
Expand All @@ -120,8 +115,24 @@ body div#root div#cornerButtonContainer a#cornerButton.settings {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton.home,
body div#root div#cornerButtonContainer a#cornerButton.config {
content: url("../space.svg");
-webkit-mask-image: url("../config.svg");
mask-image: url("../config.svg");
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-repeat: no-repeat;
background-color: currentColor;
color: #fff;
}
body div#root div#cornerButtonContainer a#cornerButton.home {
position: absolute;
right: 0;
float: right;
content: url("../space.svg");
-webkit-mask-image: url("../home.svg");
mask-image: url("../home.svg");
Expand All @@ -135,7 +146,6 @@ body div#root div#cornerButtonContainer a#cornerButton.home {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton.gh,
body div#root div#cornerButtonContainer a#cornerButton.gh {
content: url("../space.svg");
-webkit-mask-image: url("../github.svg");
Expand All @@ -150,8 +160,7 @@ body div#root div#cornerButtonContainer a#cornerButton.gh {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton.kofi,
body div#root div#cornerButtonContainer a#cornerButton.kofi {
body div#root div#cornerButtonContainer a#cornerButton.ko-fi {
content: url("../space.svg");
-webkit-mask-image: url("../kofi.svg");
mask-image: url("../kofi.svg");
Expand All @@ -165,11 +174,9 @@ body div#root div#cornerButtonContainer a#cornerButton.kofi {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton.kofi:hover,
body div#root div#cornerButtonContainer a#cornerButton.kofi:hover {
body div#root div#cornerButtonContainer a#cornerButton.ko-fi:hover {
color: #ff5e5b;
}
html div#root div#cornerButtonContainer a#cornerButton.reload,
body div#root div#cornerButtonContainer a#cornerButton.reload {
content: url("../space.svg");
-webkit-mask-image: url("../reload.svg");
Expand All @@ -184,7 +191,6 @@ body div#root div#cornerButtonContainer a#cornerButton.reload {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton.key,
body div#root div#cornerButtonContainer a#cornerButton.key {
content: url("../space.svg");
-webkit-mask-image: url("../key.svg");
Expand All @@ -199,12 +205,29 @@ body div#root div#cornerButtonContainer a#cornerButton.key {
background-color: currentColor;
color: #fff;
}
html div#root div#cornerButtonContainer a#cornerButton:hover,
body div#root div#cornerButtonContainer a#cornerButton:hover {
transition: 0.2s;
opacity: 0.7;
}
html div#root a#imgCreator,
body div#root div#settingsPanelContainer {
height: 100vh;
width: 36vw;
overflow: hidden;
display: none;
position: absolute;
}
body div#root div#settingsPanelContainer iframe#settingsPanel {
margin: 0;
border: none;
left: 0;
float: left;
height: 100vh;
width: 36vw;
position: absolute;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
box-shadow: 3px #000;
}
body div#root a#imgCreator {
position: absolute;
bottom: 0;
Expand All @@ -213,25 +236,21 @@ body div#root a#imgCreator {
opacity: 0.3;
text-decoration: none;
}
html div#root a#imgCreator:hover,
body div#root a#imgCreator:hover {
opacity: 0.4;
}
html div#root div#timeContainer,
body div#root div#timeContainer {
float: right;
right: 0;
font-size: 48px;
margin-top: 8px;
margin-right: 12px;
}
html div#root div#timeContainer span#time-sec,
body div#root div#timeContainer span#time-sec {
font-family: "Consolas";
font-size: 24px;
opacity: 0.5;
}
html div#root .hide,
body div#root .hide {
display: none !important;
}/*# sourceMappingURL=style.css.map */
2 changes: 1 addition & 1 deletion src/res/css/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f125fa8

Please sign in to comment.