Mobile responsive settings, and fix bug with index.js

This commit is contained in:
wearrrrr 2024-02-23 13:56:21 -06:00
parent a9df5402e5
commit 5636a91028
2 changed files with 51 additions and 14 deletions

View file

@ -49,8 +49,10 @@ app.use(
})
);
app.use(function(req, res, next) {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
if (req.originalUrl.includes("/games")) {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
}
next();
});
app.use("/", express.static("dist/client/"));

View file

@ -385,6 +385,7 @@ const t = useTranslations(lang);
gap: 20px;
position: relative;
z-index: 2;
flex-wrap: wrap;
}
.content-setting-header {
color: var(--text-color);
@ -460,6 +461,38 @@ const t = useTranslations(lang);
position: relative;
gap: 25px;
}
@media (max-width: 880px) {
.popup {
flex-direction: column;
min-height: 80%;
max-height: 80%;
}
.tabs {
flex-direction: row;
max-width: 100%;
max-height: 70px;
min-height: 70px;
gap: 0;
align-items: center;
}
label {
width: auto;
margin-left: 0;
}
}
@media (max-width: 500px) {
label {
font-size: 20px;
}
}
@media (max-width: 375px) {
label {
font-size: 18px;
}
}
.setting {
width: 140px
}
.marker {
position: absolute;
width: 100%;
@ -484,16 +517,18 @@ const t = useTranslations(lang);
height: calc(50% - 72px);
border-radius: 0 32px 0 0;
}
#setting-tab-proxy:checked ~ .marker {
transform: translateY(0%);
}
#setting-tab-customization:checked ~ .marker {
transform: translateY(13.5%);
}
#setting-tab-cloaking:checked ~ .marker {
transform: translateY(27%);
}
#setting-tab-credits:checked ~ .marker {
transform: translateY(41%);
@media (min-width: 880px) {
#setting-tab-proxy:checked ~ .marker {
transform: translateY(0%);
}
#setting-tab-customization:checked ~ .marker {
transform: translateY(13.5%);
}
#setting-tab-cloaking:checked ~ .marker {
transform: translateY(27%);
}
#setting-tab-credits:checked ~ .marker {
transform: translateY(41%);
}
}
</style>