drifty/driftywinds.github.io
1
0
Fork 0
mirror of https://github.com/driftywinds/driftywinds.github.io.git synced 2025-12-19 11:03:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add border colors for some elements

Browse Source
This commit is contained in:
foxster-mp4
2023-05-30 17:45:29 -07:00
parent 50c7c382d4
commit f368b0f1e3
5 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app.html
View File

@@ -17,10 +17,12 @@
<div id="top"> <div id="top">
<!-- Navigation bar --> <!-- Navigation bar -->
<div id="nav-bar"> <div id="nav-bar">
<div id="back-container">
<button id="back" type="button"> <button id="back" type="button">
<i class="bi bi-chevron-left"></i> <i class="bi bi-chevron-left"></i>
Back Back
</button> </button>
</div>
<div id="title" class="hidden"> <div id="title" class="hidden">
<img id="app-icon" src="img/generic_app.jpeg" alt="generic-app-icon"> <img id="app-icon" src="img/generic_app.jpeg" alt="generic-app-icon">
<p>AltSource</p> <p>AltSource</p>

7
css/app.css
View File

@@ -20,6 +20,10 @@ a {
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
} }
#nav-bar #back-container {
min-width: 78px;
}
/* IPA install & download */ /* IPA install & download */
.ipa { .ipa {
@@ -61,7 +65,8 @@ a {
#preview #screenshots>img { #preview #screenshots>img {
max-width: 70%; max-width: 70%;
margin-left: 1em; margin-left: 1em;
border-radius: 0.25em; border-radius: 0.5em;
border: 0.75px solid rgba(0, 0, 0, 0.2);
} }
#preview #description { #preview #description {

1
css/apps.css
View File

@@ -24,4 +24,5 @@
.screenshot { .screenshot {
max-width: 48%; max-width: 48%;
border-radius: 4px; border-radius: 4px;
border: 0.75px solid rgba(0, 0, 0, 0.2);
} }

11
css/shared.css
View File

@@ -22,7 +22,6 @@
/* Dark appearance */ /* Dark appearance */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body, body,
.uibanner, .uibanner,
#loading { #loading {
@@ -51,6 +50,12 @@
#more button { #more button {
background: linear-gradient(to right, transparent, var(--color-bg-dark) 35%) !important; background: linear-gradient(to right, transparent, var(--color-bg-dark) 35%) !important;
} }
#nav-bar #title>img,
.app-header img,
.screenshot {
border-color: rgba(255, 255, 255, 0.2) !important;
}
} }
body.loading { body.loading {
@@ -162,7 +167,8 @@ body {
#nav-bar #title>img { #nav-bar #title>img {
max-height: 2em; max-height: 2em;
border-radius: 0.4em; border-radius: 0.5em;
border: 0.75px solid rgba(0, 0, 0, 0.1);
} }
#nav-bar #back { #nav-bar #back {
@@ -276,6 +282,7 @@ body {
display: block; display: block;
border-radius: 13.5px; border-radius: 13.5px;
max-width: 64px; max-width: 64px;
border: 0.75px solid rgba(0, 0, 0, 0.1);
} }
.app-header .background { .app-header .background {

5
js/app.js
View File

@@ -91,7 +91,7 @@ function main(json) {
preview.querySelector("#subtitle").textContent = app.subtitle; preview.querySelector("#subtitle").textContent = app.subtitle;
// Screenshots // Screenshots
app.screenshotURLs.forEach(url => { app.screenshotURLs.forEach(url => {
preview.querySelector("#screenshots").insertAdjacentHTML("beforeend", `<img src="${url}" alt="">`); preview.querySelector("#screenshots").insertAdjacentHTML("beforeend", `<img src="${url}" alt="" class="screenshot">`);
}); });
// Description // Description
const previewDescription = preview.querySelector("#description"); const previewDescription = preview.querySelector("#description");
@@ -215,7 +215,6 @@ function main(json) {
icon = "gear-wide-connected"; icon = "gear-wide-connected";
break; break;
} }
permissions.insertAdjacentHTML("beforeend", ` permissions.insertAdjacentHTML("beforeend", `
<div class="permission"> <div class="permission">
<i class="bi-${icon}" style="color: ${tintColor};"></i> <i class="bi-${icon}" style="color: ${tintColor};"></i>
@@ -227,6 +226,8 @@ function main(json) {
}); });
} }
//
// Source info
const source = document.getElementById("source"); const source = document.getElementById("source");
const sourceContainer = source.querySelector(".container"); const sourceContainer = source.querySelector(".container");
const sourceTitle = source.querySelector(".row-title"); const sourceTitle = source.querySelector(".row-title");