diff --git a/about.html b/about.html index 6f80044..e0b30e5 100755 --- a/about.html +++ b/about.html @@ -1,5 +1,5 @@ - + diff --git a/css/main.css b/css/main.css index 99442f7..1b33054 100755 --- a/css/main.css +++ b/css/main.css @@ -13,7 +13,7 @@ html, body { /* height: 100vh; */ width: 100vw; - color: white; + color: var(--text-color); background-color: black; } @@ -69,6 +69,39 @@ p { font-size: 16px; margin: 2px; } +a { + color: var(--text-color); +} img { image-rendering: pixelated; +} +select, +::picker(select) { + appearance: base-select; +} +select { + padding: 8px; + background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%); + transition-duration: 0.25s; +} +select:hover, +select:focus { + background: color-mix(in srgb, var(--color-3) 60%, #00000000 40%); +} +::picker(select) { + border: none; + border-radius: 8px; +} +option { + display: flex; + background: color-mix(in srgb, var(--color-3) 30%, var(--color-4) 60%); + padding: 2px; + transition: 0.25s; + color: var(--text-color) +} +option:hover { + background: color-mix(in srgb, var(--color-2) 40%, var(--color-4) 50%); +} +option:focus { + background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%); } \ No newline at end of file diff --git a/css/oldstyle.css b/css/oldstyle.css deleted file mode 100755 index 6a0502b..0000000 --- a/css/oldstyle.css +++ /dev/null @@ -1,673 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap"); - -@keyframes loadInAnimation { - 0% { - opacity: 0; - } - 100% { - opacity: 100; - } -} - -:root { - --inputbg: #3c096c; - --inputborder: #5a189a; - --uibg: #240046; - --textcolor: #fff; - --bg: #10002b; - --margin: 4rem; -} -.hiddenUpload { - display: none; - visibility: hidden; -} -* { - transition-duration: 0.5s; - outline: none; - border: none; - box-sizing: border-box; - align-content: center; - text-align: center; - font-family: "Prompt", sans-serif; - color: var(--textcolor); -} -body { - margin: 0; - padding: 0; - background: var(--bg); - color: var(--textcolor); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; -} - -header, -footer { - background-color: var(--uibg); - display: flex; - border-bottom: none; - font-weight:700; - padding: 0.7rem; - width: 100%; - z-index: 1; - justify-content: center; - text-align: center; - text-decoration: none; -} - -#time { -font-weight:100; -} -header { - top: 0; - border-radius: 0 0 20px 20px; - position: fixed; - box-shadow: 0 5px 10px var(--uibg); -} - -footer.noscroll { - position: fixed; - overflow: hidden; -} - -footer { - bottom: 0; - border-radius: 20px 20px 0 0; - box-shadow: 0 -5px 10px var(--uibg); -} - -footer a, -footer a:visited, -header a, -header a:visited { - margin-right: 1.5rem; - margin-left: 1.5rem; - text-decoration: none; -} - -footer a:hover, -header a:hover { - text-shadow: 2px 2px 6px var(--textcolor); -} - - -@media only screen and (max-width: 768px) { - header, - footer { - flex-direction: column; - align-items: center; - } - - header { - border-radius: 0; - } - - footer { - border-radius: 0; - } - * { - --margin: 12rem; - } -} - -main { - animation: 1.25s ease-in-out 0s 1 loadInAnimation; - align-items: center; - flex-direction: column; - display: flex; - min-height: calc(100vh - (2 * 0.7rem)); - gap: 0; - flex-wrap: wrap; - margin: auto; - margin-top: var(--margin); - width: 90%; - height:auto; -} -main#main.noscroll { - justify-content: center; -} -h1, -h2, -h3, -p, -a, -label { - margin: 0; - padding: 0; - text-shadow: var(--shadow); -} -.samerow { - display: flex; - justify-content: center; - gap: 0; - flex-wrap: wrap; - align-items: center; - justify-content: center -} -h1 { - font-size: 60px; -} - -h2 { - font-size: 40px; -} -h3 { - font-size: 20px; -} -p, -a { - font-size: 16px; -} - -button, -input#websubmit.submit, -input[type="submit"] { - cursor: pointer; - background-color: var(--inputbg); - border-color: var(--inputborder); - border-width: 2px; - border-radius: 10px; - border-style: solid; - padding: 7px; - margin-left: 20px; - margin-right: 20px; - margin: 10px; -} - -button:hover, -input#websubmit.submit:hover, -input[type="submit"]:hover { - filter: brightness(80%); - transform: scale(1.07); -} - -img { - width: 100%; - aspect-ratio: auto; - user-select: none; - filter: drop-shadow(var(--shadow)); - image-rendering: pixelated; -} - -.img-container a { - width: 100%; -} - -.img-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 0; - flex-wrap: wrap; - width: 6%; - aspect-ratio: 1 / 1; - margin: 2%; -} - -.game, -.suggest { - width: 15%; - border-radius: 20px; - display: inline-block; - background-color: var(--uibg); - margin: 15px; - cursor: pointer; - box-shadow: 0px 0px 5px 5px var(--uibg); -} - -.game:hover, -.suggest:hover { - transform: scale(1.1); - filter: brightness(85%); - box-shadow: 0px 0px 5px 5px var(--uibg); -} - -.game h1, -.suggest h1 { - font-size: 12px; - float: right; - margin-right: 10px; - margin-top: 3px; - margin-bottom: 3px; -} - -.game img, -.suggest img { - width: 100%; - border-radius: 20px; - aspect-ratio: 1 / 1; -} - -img.star { - float: left; - width: 10%; - margin-top: 3px; - margin-bottom: 3px; - margin-left: 10px; -} - -#noscroll { - overflow-y: hidden; - justify-content: center; -} - -#games, -#pinned { - width: 100%; - justify-content: center; -} - -input[type="text"], -input[type="password"] { - width: 50%; - background-color: var(--inputbg); - box-sizing: border-box; - font-size: 20px; - padding: 0.8% 0.8%; - text-align: center; - border-radius: 5px; - outline: none; - margin: 10px; - border: 2px solid var(--inputborder); - border-radius: 5px; - transition: opacity 0.25s ease-in-out; - opacity: 100%; -} -input[type="text"]:hover, -input[type="password"]:hover { - opacity: 80%; -} -::placeholder { - color: var(--textcolor); - opacity: 0.4; /* Firefox */ -} - -.bookmarkletdiv { - width: 30%; - background-color: var(--uibg); - box-shadow: 0px 0px 5px 5px var(--uibg); - padding: 5px; - margin: 15px; - border-radius: 10px; - display: inline-block; -} - -.bookmarkletdiv a { - font-size: 30px; -} - -form { - width: 100%; -} -.samerow.themebtns { - width: 70%; -} - -select { - border-radius: 5px; - background-color: var(--inputbg); - border-color: var(--inputborder); - border-width: 5px; - border-radius: 10px; - border-style: solid; - padding: 0.5% 0.5%; - margin: 0.25%; -} - -thumb.png .img-credits { - height: 40vh; - width: auto; - box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.555); -} - -label { - font-size: 20px; - padding-left: 5px; -} -.avatar { - margin: 5px; -} -#bgimg { - width: 30vw; - font-size: 16px; -} -.usericon { - width: 24px; - height: 24px; - align-self: right; - /* display: none; */ -} -#toast { - position: fixed; - top: 0; - right: 0; - margin: 10px; - padding: 10px; - background-color: var(--inputbg); - border-radius: 10px; - border-width: 10px; - border-color: var(--inputborder); - border-style: solid; - z-index: 10000; - text-align: center; - opacity: 0; - transition-duration: 1s; - max-width: 30%; -} -#toast h1 { - font-size: 20px; - text-align: center; -} -#toast p { - font-size: 16px; - text-align: center; -} -#discord { - position: fixed; - bottom: 10px; - right: 10px; - width: 56px; - height: 56px; - z-index: 199975; - border-radius: 100%; - background-image: url("/img/discord.svg"); - background-size: 60%; - background-position: center; - background-repeat: no-repeat; - border-width: 0; -} - -div.profile.top { - width: 90%; - height: 20vh; - background-color: var(--uibg); - border-radius: 10px; - display: flex; - justify-content: left; - align-items: center; - box-shadow: 0px 0px 5px 5px var(--uibg); -} -div.profile.top.text { - position: relative; - display: flex; - flex-direction: column; - width: auto; - justify-self: center; - height: auto; - margin: 30px; - max-width: 40%; -} - -div.profile.top.text.right { - margin-left: auto; - margin-right: 80px; -} - -div.profile.top.text h1 { - font-size: 2vw; -} -div.profile.top.text h2 { - font-size: 1.25vw; -} -div.profile.top.text a { - font-size: 1.25vw; -} - -img.pfp { - height: 80%; - object-fit: contain; - width: auto; - margin: 30px; - border-radius: 20px; - aspect-ratio: 1 / 1; -} -div.profile.top.text .about { - height: auto; - max-width: 100%; -} - -#edit { - cursor: pointer; - position: relative; - height: 2vw; - margin-left: 5px; - width: auto; -} -#counter { - position: absolute; - bottom: 0; - right: 0; -} -#popup { - width: 50%; - height: 40%; - z-index: 99999999; - position: absolute; - position: absolute; - top: 50%; - left: 50vw; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - background-color: var(--inputbg); - border-color: var(--inputborder); - border-width: 5px; - border-radius: 10px; - border-style: solid; - justify-content: center; - align-items: center; - box-shadow: 0px 0px 5px 5px var(--uibg); -} -#popup input { - width: 90%; - height: 30%; -} -#popup input[type=file] { - height: auto; - text-align-last: center; - display: block; - margin: 30px; -} -#popup h1 { - font-size: 32px; -} - -#popup #close { - position: absolute; - right: 10px; - top: 10px; - -} -img.badges { - position: relative; - height: 2vw; - margin-left: 5px; - width: auto; -} - -p#counter { - bottom: 38%; - right: 7%; -} - - -.users { - text-decoration: none; - width: 30%; - height: 10vh; - background-color: var(--uibg); - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0px 0px 5px 5px var(--uibg); - margin: 1.5%; -} -.users h1, .users p { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - justify-self: center; - height: auto; - max-width: 100%; - margin: auto; -} -.user_info { - width: 100%; -} - -.users h1 { - font-size: 1vw; -} -.users p { - font-size: 0.75vw; -} -.users a { - font-size: 0.75vw; - text-decoration: underline; -} - -.users p { - height: auto; - max-width: 100%; -} -#users { - width: 95%; - display: flex; - align-items: center; - flex-wrap: wrap; - flex-direction: row; - display: flex; - align-items: center; - justify-content: center; -} - -.pages-btn { - margin: 10px; -} -#ai { - position: absolute; - right: 10px; - bottom: 10px; -} - -div.profile.played { - margin: 40px; - width: 90%; - height: auto; - padding: 30px; - background-color: var(--uibg); - border-radius: 10px; - display: flex; - justify-content: left; - align-items: center; - box-shadow: 0px 0px 5px 5px var(--uibg); - justify-content: center; - flex-wrap: wrap; - -} -#played-games { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; -} -div.played-game { - width: 13%; - height: auto; - margin: 2%; - padding: 0; -} -div.played-game img { - aspect-ratio: 1 / 1; - border-radius: 20px; -} -.friend-icon { - width: 5%; - position: absolute; - left: 2%; -} -#chat { - width: 90%; - background-color: var(--uibg); - height: calc(100vh - (var(--margin) * 2) - 60px - 24px - 12px - 30px - 80px); -} -#messages { - align-items: end; - flex-direction: column; - overflow-y: scroll; - overflow-x: hidden; - height: 88%; - display: flex; -} -message { - width: calc(100% - 20px); - padding: 20px; - margin: 10px; - background-color: var(--inputbg); - border-radius: 10px; -} -message h1 { - font-size: 40px; -} -message h2 { - font-size: 32px; -} -message.user { - background-color: var(--inputborder); -} -message.bot { - justify-self: right; -} -#chatbox { - width: calc(100% - 20px); -} -.messagebox { - width: 100%; - height: 12%; -} -.evensmaller { - font-size: 12px; -} -#gamecontainer { - width: 80vw; - height: calc(100vh - (var(--margin) * 2)); - padding: 10px; - border-radius: 10px; - background-color: var(--uibg); -} -#gameFrame { - width: 100%; - height: 90%; - border-radius: 10px; - margin: 0; - padding: 0; -} -#infobox { - width: 100%; - height: 10%; - display: flex; -} -#infobox img { - height: 90%; - width: auto; - margin-right: 20px; - border-radius: 10px; -} -@keyframes toastFade { - 0% { - opacity: 0; - } - 15% { - opacity: 1; - } - 85% { - opacity: 1; - } - 100% { - opacity: 0; - } -} \ No newline at end of file diff --git a/css/pages.css b/css/pages.css index a3e9107..8d01ea8 100755 --- a/css/pages.css +++ b/css/pages.css @@ -44,7 +44,27 @@ body { transition-duration: 0.05s; transition-timing-function: ease-out; } -input[type=text] { +button { + border-style: solid; + border-width: 2px; + padding: 12px; + margin: 8px; + text-align: center; + border-radius: 10px; + background-color: var(--color-2); + border-color: var(--color-3); + color: var(--text-color); + outline: none; + transition-duration: 0.25s; + font-size: 14px; + text-shadow: var(--color-1) 0 0 10px; + cursor:pointer; +} +button:hover { + filter: brightness(1.1); + transform: scale(1.05); +} +input[type=text], input[type=password] { width: 70%; border-style: solid; border-width: 2px; @@ -60,13 +80,13 @@ input[type=text] { font-size: 20px; text-shadow: var(--color-1) 0 0 10px; } -input[type=text]:focus { +input[type=text]:focus, input[type=password]:focus { filter:brightness(1.25) !important; } -input[type=text]:hover { +input[type=text]:hover, input[type=password]:hover { filter:brightness(1.1); } -input[type=text]::placeholder { +input[type=text]::placeholder, input[type=password]::placeholder { color: color-mix(in srgb, var(--text-color) 20%, #00000000 80%); text-shadow: color-mix(in srgb, var(--text-color) 40%, #00000000 60%) 0 0 10px; } @@ -103,4 +123,45 @@ input[type=text]::placeholder { .title { color: var(--color-1); text-shadow: var(--color-1) 0 0 24px; +} +.h-captcha { + margin: 8px; +} +#popup { + width: 50%; + height: 40%; + z-index: 99999999; + position: absolute; + position: absolute; + top: 50%; + left: 50vw; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + background-color: var(--color-3); + border-radius: 10px; + justify-content: center; + align-items: center; + box-shadow: 0px 0px 5px 5px var(--color-3); +} +#popup input { + width: 90%; + height: 30%; +} +#popup input[type=file] { + height: auto; + text-align-last: center; + display: block; + margin: 30px; +} +#popup h1 { + font-size: 32px; +} + +#popup #close { + position: absolute; + right: 10px; + top: 10px; + outline: none; + background-color: color-mix(in srgb, var(--color-4) 20%, #00000000 80%);; } \ No newline at end of file diff --git a/css/settings.css b/css/settings.css new file mode 100644 index 0000000..856cff8 --- /dev/null +++ b/css/settings.css @@ -0,0 +1,23 @@ +section { + width: 30%; + height: 400px; + height: auto; + padding: 8px; + margin: 16px; + background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 20px; + margin: 15px; + transition-duration: 0.25s; + backdrop-filter: blur(2px); + box-shadow: 0 0 10px var(--color-2); +} +sections { + width: 90vw; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/css/themes.css b/css/themes.css index 22f0a1c..c493de1 100755 --- a/css/themes.css +++ b/css/themes.css @@ -6,4 +6,40 @@ body { --color-2: #7B2CBF; --color-3: #3C096C; --color-4: #240046; +} +body[theme=blackandwhite] { + --text-color: #fff; + --bg-1: #504d53; + --bg-2: #090909; + --color-1: #bfbfbf; + --color-2: #8e8e8e; + --color-3: #5c5c5c; + --color-4: #000000; +} +body[theme=grass] { + --text-color: #ffffff; + --bg-1: #1d3024; + --bg-2: #385041; + --color-1: #a8e5a7; + --color-2: #559b7a; + --color-3: #3a5c3f; + --color-4: #242e22; +} +body[theme=evil] { + --text-color: #ffffff; + --bg-1: #591414; + --bg-2: #ba2a2a; + --color-1: #eb8181; + --color-2: #ae4141; + --color-3: #7b3838; + --color-4: #4f2626; +} +body[theme=sky] { + --text-color: #ffffff; + --bg-1: #6aacbe; + --bg-2: #3e87bb; + --color-1: #46ccd6; + --color-2: #337792; + --color-3: #38617b; + --color-4: #263b4f; } \ No newline at end of file diff --git a/home.html b/home.html index f3ee942..669aa2e 100755 --- a/home.html +++ b/home.html @@ -1,5 +1,5 @@ - + @@ -32,8 +32,6 @@ ] } - - diff --git a/index.html b/index.html index 93510d6..9ea8d3b 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/js/main.js b/js/main.js index 8ad8a71..b398c9a 100755 --- a/js/main.js +++ b/js/main.js @@ -32,15 +32,18 @@ function cursor() { cursor.style.left = `${e.pageX - 15}px`; }) } +function themes() { + document.body.setAttribute("theme", localStorage.getItem("selenite.theme") || "") +} document.addEventListener("DOMContentLoaded", ()=>{ setBackground(); loadPJS(); cursor(); + themes(); }) document.addEventListener("scroll", ()=>{ - console.log("scroll"); document.getElementById("particles-js").style.top = window.scrollY + "px"; }) diff --git a/settings.html b/settings.html index 040dff1..5191077 100755 --- a/settings.html +++ b/settings.html @@ -1,153 +1,74 @@ - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - Settings | Selenite - - - - - - - - - -
- Home - Bookmarklets - Games - Apps - Settings - Open Blank - - -
- -
-

Settings

-
-

Website Name

-
-

Website Icon

-
-

Or select a preset:

-
- -
- -
-
- -
-
-
- -
-
-
- -
-
-

Themes

-
- -
-
-
- - - - - - - - - - - - - - - - - - - - -
- -
-
-

Website URL

-
- -
-
-
- - - + + + + + + Selenite + + + + + +

settings

+ +
+

theme

+ +
+
+ - -