Compare commits
3 commits
v2
...
springboar
| Author | SHA1 | Date | |
|---|---|---|---|
| 386757cbb9 | |||
| ab3380b68e | |||
| e38c8421f4 |
17 changed files with 377 additions and 28 deletions
BIN
dist/assets/bootstrap-icons-BOrJxbIo.woff
vendored
Normal file
BIN
dist/assets/bootstrap-icons-BOrJxbIo.woff
vendored
Normal file
Binary file not shown.
BIN
dist/assets/bootstrap-icons-BtvjY1KL.woff2
vendored
Normal file
BIN
dist/assets/bootstrap-icons-BtvjY1KL.woff2
vendored
Normal file
Binary file not shown.
1
dist/assets/index-M6NLxF6S.css
vendored
1
dist/assets/index-M6NLxF6S.css
vendored
|
|
@ -1 +0,0 @@
|
||||||
body{margin:0;padding:0;background-color:gray}*{box-sizing:border-box}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,20%);place-items:center;align-items:start;min-width:100vw;max-width:100vw;width:100vw;padding-bottom:25%;padding-top:5%}.applist-page>*:not(.section){width:auto;margin-bottom:5%;display:flex;flex-direction:column;align-items:center}.applist-page:has(.section){display:flex;flex-direction:column;align-items:center;padding:5%;gap:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;border-radius:15px;background-color:#00000080;border:1px solid white;width:100%;color:#fff}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-a45179cd]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-a45179cd]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-a45179cd]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-a45179cd]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-a45179cd]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}
|
|
||||||
5
dist/assets/index-_sk3xYAV.css
vendored
Normal file
5
dist/assets/index-_sk3xYAV.css
vendored
Normal file
File diff suppressed because one or more lines are too long
17
dist/assets/index-mum_jNSN.js
vendored
Normal file
17
dist/assets/index-mum_jNSN.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17
dist/assets/index-zJphMIID.js
vendored
17
dist/assets/index-zJphMIID.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/bundle.zip
vendored
BIN
dist/bundle.zip
vendored
Binary file not shown.
65
dist/error.svg
vendored
Normal file
65
dist/error.svg
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
viewBox="150 240 165 165"
|
||||||
|
version="1.1"
|
||||||
|
id="svg2"
|
||||||
|
sodipodi:docname="dotgrid-25G10-623290.svg"
|
||||||
|
width="165"
|
||||||
|
height="165"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview2"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="false"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:clip-to-page="false"
|
||||||
|
inkscape:antialias-rendering="true"
|
||||||
|
showborder="true"
|
||||||
|
inkscape:zoom="3.608628"
|
||||||
|
inkscape:cx="47.38643"
|
||||||
|
inkscape:cy="80.501509"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1014"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" />
|
||||||
|
<!-- Filled triangle -->
|
||||||
|
<path
|
||||||
|
stroke-width="15.0001"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke="#ff8888"
|
||||||
|
fill="#ff8888"
|
||||||
|
d="M 157.49952,389.99997 H 307.50049 L 232.5,254.99926 Z"
|
||||||
|
id="path1" />
|
||||||
|
<path
|
||||||
|
stroke-width="15"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke="#000000"
|
||||||
|
fill="none"
|
||||||
|
d="m 232.49948,283.49921 v 60"
|
||||||
|
id="path2" />
|
||||||
|
<circle
|
||||||
|
cx="232.56358"
|
||||||
|
cy="371.59991"
|
||||||
|
stroke="rgb(255,136,136)"
|
||||||
|
stroke-width="7.50004"
|
||||||
|
fill="rgb(0,0,0)"
|
||||||
|
id="circle2"
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||||
|
r="7.5" />
|
||||||
|
<!-- Vertical line -->
|
||||||
|
<!-- Circle below the vertical line -->
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
4
dist/index.html
vendored
4
dist/index.html
vendored
|
|
@ -5,8 +5,8 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>SpringBoard</title>
|
<title>SpringBoard</title>
|
||||||
<script type="module" crossorigin src="/assets/index-zJphMIID.js"></script>
|
<script type="module" crossorigin src="/assets/index-mum_jNSN.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-M6NLxF6S.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-_sk3xYAV.css">
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color:transparent;">
|
<body style="background-color:transparent;">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@bridgelauncher/api-mock": "^0.1.0",
|
"@bridgelauncher/api-mock": "^0.1.0",
|
||||||
|
"bootstrap-icons": "^1.11.3",
|
||||||
|
"fuzzy": "^0.1.3",
|
||||||
"vue": "^3.5.13"
|
"vue": "^3.5.13"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
|
|
@ -11,6 +11,12 @@ importers:
|
||||||
'@bridgelauncher/api-mock':
|
'@bridgelauncher/api-mock':
|
||||||
specifier: ^0.1.0
|
specifier: ^0.1.0
|
||||||
version: 0.1.0
|
version: 0.1.0
|
||||||
|
bootstrap-icons:
|
||||||
|
specifier: ^1.11.3
|
||||||
|
version: 1.11.3
|
||||||
|
fuzzy:
|
||||||
|
specifier: ^0.1.3
|
||||||
|
version: 0.1.3
|
||||||
vue:
|
vue:
|
||||||
specifier: ^3.5.13
|
specifier: ^3.5.13
|
||||||
version: 3.5.13(typescript@5.8.2)
|
version: 3.5.13(typescript@5.8.2)
|
||||||
|
|
@ -424,6 +430,9 @@ packages:
|
||||||
'@vue/shared@3.5.13':
|
'@vue/shared@3.5.13':
|
||||||
resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
|
resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
|
||||||
|
|
||||||
|
bootstrap-icons@1.11.3:
|
||||||
|
resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==}
|
||||||
|
|
||||||
braces@3.0.3:
|
braces@3.0.3:
|
||||||
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
|
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
|
@ -461,6 +470,10 @@ packages:
|
||||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
|
|
||||||
|
fuzzy@0.1.3:
|
||||||
|
resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
|
||||||
|
engines: {node: '>= 0.6.0'}
|
||||||
|
|
||||||
immutable@5.1.1:
|
immutable@5.1.1:
|
||||||
resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}
|
resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}
|
||||||
|
|
||||||
|
|
@ -858,6 +871,8 @@ snapshots:
|
||||||
|
|
||||||
'@vue/shared@3.5.13': {}
|
'@vue/shared@3.5.13': {}
|
||||||
|
|
||||||
|
bootstrap-icons@1.11.3: {}
|
||||||
|
|
||||||
braces@3.0.3:
|
braces@3.0.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
fill-range: 7.1.1
|
fill-range: 7.1.1
|
||||||
|
|
@ -912,6 +927,8 @@ snapshots:
|
||||||
fsevents@2.3.3:
|
fsevents@2.3.3:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
fuzzy@0.1.3: {}
|
||||||
|
|
||||||
immutable@5.1.1: {}
|
immutable@5.1.1: {}
|
||||||
|
|
||||||
is-extglob@2.1.1:
|
is-extglob@2.1.1:
|
||||||
|
|
|
||||||
65
public/error.svg
Normal file
65
public/error.svg
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
viewBox="150 240 165 165"
|
||||||
|
version="1.1"
|
||||||
|
id="svg2"
|
||||||
|
sodipodi:docname="dotgrid-25G10-623290.svg"
|
||||||
|
width="165"
|
||||||
|
height="165"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview2"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="false"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:clip-to-page="false"
|
||||||
|
inkscape:antialias-rendering="true"
|
||||||
|
showborder="true"
|
||||||
|
inkscape:zoom="3.608628"
|
||||||
|
inkscape:cx="47.38643"
|
||||||
|
inkscape:cy="80.501509"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1014"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" />
|
||||||
|
<!-- Filled triangle -->
|
||||||
|
<path
|
||||||
|
stroke-width="15.0001"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke="#ff8888"
|
||||||
|
fill="#ff8888"
|
||||||
|
d="M 157.49952,389.99997 H 307.50049 L 232.5,254.99926 Z"
|
||||||
|
id="path1" />
|
||||||
|
<path
|
||||||
|
stroke-width="15"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke="#000000"
|
||||||
|
fill="none"
|
||||||
|
d="m 232.49948,283.49921 v 60"
|
||||||
|
id="path2" />
|
||||||
|
<circle
|
||||||
|
cx="232.56358"
|
||||||
|
cy="371.59991"
|
||||||
|
stroke="rgb(255,136,136)"
|
||||||
|
stroke-width="7.50004"
|
||||||
|
fill="rgb(0,0,0)"
|
||||||
|
id="circle2"
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||||
|
r="7.5" />
|
||||||
|
<!-- Vertical line -->
|
||||||
|
<!-- Circle below the vertical line -->
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
20
src/App.vue
20
src/App.vue
|
|
@ -13,13 +13,17 @@
|
||||||
</template>
|
</template>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
<Dock></Dock>
|
<div id="dock-wrapper">
|
||||||
|
<Search></Search>
|
||||||
|
<Dock></Dock>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed, onUnmounted } from 'vue';
|
||||||
import AppIcon from './components/AppIcon.vue';
|
import AppIcon from './components/AppIcon.vue';
|
||||||
import Dock from './components/Dock.vue';
|
import Dock from './components/Dock.vue';
|
||||||
|
import Search from './components/Search.vue';
|
||||||
import Settings from './components/Settings.vue';
|
import Settings from './components/Settings.vue';
|
||||||
|
|
||||||
const apps = ref([])
|
const apps = ref([])
|
||||||
|
|
@ -28,10 +32,22 @@ async function loadApps() {
|
||||||
const resp = await fetch(Bridge.getAppsURL())
|
const resp = await fetch(Bridge.getAppsURL())
|
||||||
const data = await resp.json()
|
const data = await resp.json()
|
||||||
apps.value = data.apps.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
|
apps.value = data.apps.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
|
||||||
|
window.springboard.apps = apps.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
loadApps()
|
loadApps()
|
||||||
|
|
||||||
|
let lastUpdate = 0;
|
||||||
|
function updateApps() {
|
||||||
|
const now = performance.now();
|
||||||
|
if (now - lastUpdate >= 100) {
|
||||||
|
loadApps();
|
||||||
|
lastUpdate = now;
|
||||||
|
}
|
||||||
|
requestAnimationFrame(updateApps);
|
||||||
|
}
|
||||||
|
updateApps();
|
||||||
|
|
||||||
const itemsPerPage = 4 * 6;
|
const itemsPerPage = 4 * 6;
|
||||||
const paginatedApps = computed(() => {
|
const paginatedApps = computed(() => {
|
||||||
return Array(Math.ceil(apps.value.length / itemsPerPage)).fill().map((_, index) => {
|
return Array(Math.ceil(apps.value.length / itemsPerPage)).fill().map((_, index) => {
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,21 @@ if (props.label.length >= 12) {
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
Bridge.requestLaunchApp(props.packageName);
|
Bridge.requestLaunchApp(props.packageName);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadIcon() {
|
||||||
|
const iconsrc = await Bridge.getDefaultAppIconURL(props.packageName);
|
||||||
|
const img = new Image();
|
||||||
|
img.src = iconsrc;
|
||||||
|
img.onload = () => {
|
||||||
|
icon.value = iconsrc;
|
||||||
|
};
|
||||||
|
img.onerror = () => {
|
||||||
|
if (icon.value != '/error.svg') icon.value = '/error.svg';
|
||||||
|
setTimeout(loadIcon, 100);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
loadIcon();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
152
src/components/Search.vue
Normal file
152
src/components/Search.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<Suspense>
|
||||||
|
<div id="search_background">
|
||||||
|
<div class="section" id="search_results">
|
||||||
|
<AppIcon
|
||||||
|
v-for="(app, index) in filteredApps"
|
||||||
|
:key="app.packageName || index"
|
||||||
|
:packageName="app.packageName"
|
||||||
|
:label="app.label"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Suspense>
|
||||||
|
<div id="search_maindiv">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
@focus="openSearch"
|
||||||
|
placeholder="Search"
|
||||||
|
>
|
||||||
|
<i class="bi bi-x-circle"></i>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import fuzzy from 'fuzzy';
|
||||||
|
import AppIcon from './AppIcon.vue';
|
||||||
|
|
||||||
|
const filteredApps = ref([]);
|
||||||
|
|
||||||
|
function openSearch() {
|
||||||
|
const inputElement = document.querySelector('#search_maindiv input');
|
||||||
|
const backgroundElement = document.querySelector('#search_background');
|
||||||
|
|
||||||
|
function handleInput() {
|
||||||
|
const value = inputElement.value.toString();
|
||||||
|
|
||||||
|
const apps = window.springboard.apps || [];
|
||||||
|
const searchList = apps.map(app => app.label);
|
||||||
|
|
||||||
|
const results = fuzzy.filter(value, searchList);
|
||||||
|
|
||||||
|
filteredApps.value = results
|
||||||
|
.slice(0, 8)
|
||||||
|
.map(result => apps[result.index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!inputElement.hasAttribute('data-added')) {
|
||||||
|
inputElement.addEventListener('input', handleInput);
|
||||||
|
inputElement.addEventListener('blur', async () => {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 100));
|
||||||
|
inputElement.value = '';
|
||||||
|
backgroundElement.style.opacity = '0';
|
||||||
|
backgroundElement.style.pointerEvents = 'none';
|
||||||
|
inputElement.removeEventListener('input', handleInput);
|
||||||
|
filteredApps.value = [];
|
||||||
|
inputElement.removeAttribute('data-added');
|
||||||
|
});
|
||||||
|
inputElement.setAttribute('data-added', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
backgroundElement.style.opacity = '1';
|
||||||
|
backgroundElement.style.pointerEvents = 'all';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||||
|
|
||||||
|
#search_results {
|
||||||
|
scroll-snap-align: center;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 25%);
|
||||||
|
grid-template-rows: repeat(2, 50%);
|
||||||
|
place-items: center;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_background {
|
||||||
|
position: fixed;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 99;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0,0,0,0.25);
|
||||||
|
padding: 5%;
|
||||||
|
transition: opacity 0.25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_maindiv {
|
||||||
|
z-index: 999;
|
||||||
|
width: 25% !important;
|
||||||
|
border: none;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 300px;
|
||||||
|
padding: 2% 4%;
|
||||||
|
background-color: rgba(0,0,0,0.25);
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
display: flex;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
&:has(input:focus) {
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
transform:translateY(-550%);
|
||||||
|
width: 80% !important;
|
||||||
|
& > i {
|
||||||
|
transition: all 0.5s ease-in-out;
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: all;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
& > input {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:has(input:not(:placeholder-shown)) {
|
||||||
|
& > i {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: white;
|
||||||
|
width: 100% !important;
|
||||||
|
text-align: center;
|
||||||
|
&::placeholder {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
&::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
position: relative;
|
||||||
|
right: 0;
|
||||||
|
opacity: 0.0;
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
pointer-events: none;
|
||||||
|
width: 0;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -12,4 +12,9 @@ if (!window.Bridge) {
|
||||||
|
|
||||||
Bridge.requestSetBridgeTheme('system');
|
Bridge.requestSetBridgeTheme('system');
|
||||||
|
|
||||||
|
window.springboard = {
|
||||||
|
apps: [],
|
||||||
|
labelColor: 'ffffff'
|
||||||
|
}
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.applist-page {
|
.applist-page {
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: center;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 25%);
|
grid-template-columns: repeat(4, 25%);
|
||||||
grid-template-rows: repeat(5, 20%);
|
grid-template-rows: repeat(5, 20%);
|
||||||
|
|
@ -47,19 +47,27 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#dock-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
padding: 5%;
|
padding: 5%;
|
||||||
margin: 5%;
|
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
background-color: rgba(0,0,0,0.25);
|
background-color: rgba(0,0,0,0.25);
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: fixed;
|
width: 100%;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue