mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-20 04:57:38 -04:00
seperated css for the sidebar into its own file
This commit is contained in:
parent
e5b3cfc937
commit
e781189e56
|
@ -6,9 +6,10 @@
|
|||
import { Router, Route } from "svelte-routing";
|
||||
import Jak1 from "/src/routes/Jak1.svelte";
|
||||
import Settings from "./routes/Settings.svelte";
|
||||
import Sidebar from "/src/components/Sidebar.svelte";
|
||||
import Sidebar from "./components/siderbar/Sidebar.svelte";
|
||||
import { initConfig } from "$lib/config";
|
||||
import { isInDebugMode } from "$lib/setup";
|
||||
import Statusbar from "./components/statusbar/Statusbar.svelte";
|
||||
|
||||
export let url = "";
|
||||
|
||||
|
@ -57,10 +58,15 @@
|
|||
</div>
|
||||
<div class="container">
|
||||
<Sidebar />
|
||||
<div id="main">
|
||||
<Route path="/" component={Jak1} />
|
||||
<Route path="/jak1" component={Jak1} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
<div class="test">
|
||||
<div id="main">
|
||||
<Route path="/" component={Jak1} />
|
||||
<Route path="/jak1" component={Jak1} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
</div>
|
||||
<div id="footer">
|
||||
<Statusbar status="Downloading assets..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
import logoJak2 from "$assets/images/jak-2.webp";
|
||||
import logoJak3 from "$assets/images/jak-3.webp";
|
||||
import { Link } from "svelte-routing";
|
||||
import "./sidebar.css";
|
||||
</script>
|
||||
|
||||
<nav id="sidebar">
|
72
src/components/siderbar/sidebar.css
Normal file
72
src/components/siderbar/sidebar.css
Normal file
|
@ -0,0 +1,72 @@
|
|||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--bg-blue);
|
||||
opacity: 75%;
|
||||
transition: 500ms ease;
|
||||
width: 10vw;
|
||||
max-width: 10vw;
|
||||
}
|
||||
|
||||
#sidebar:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.games {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 5px;
|
||||
filter: grayscale(100%);
|
||||
transition: 500ms ease;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
filter: grayscale(0%);
|
||||
opacity: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item.disabled:hover,
|
||||
.nav-item.disabled {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.nav-item a::before,
|
||||
.nav-item a::after {
|
||||
--scale: 0;
|
||||
position: absolute;
|
||||
transform: translateX(55px) scale(var(--scale));
|
||||
transition: 200ms ease;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.nav-item a::before {
|
||||
padding: 0.5rem;
|
||||
width: max-content;
|
||||
background: #333;
|
||||
color: white;
|
||||
content: attr(data-tooltip);
|
||||
border-radius: 0.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item a:hover::before {
|
||||
--scale: 1;
|
||||
}
|
||||
|
||||
.nav-item img {
|
||||
width: 100%;
|
||||
}
|
8
src/components/statusbar/Statusbar.svelte
Normal file
8
src/components/statusbar/Statusbar.svelte
Normal file
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
export let status;
|
||||
</script>
|
||||
|
||||
<!-- TODO - eventually use this for everything (update available, setup status, MOTD)-->
|
||||
<div id="statusbar">
|
||||
<h4>{status}</h4>
|
||||
</div>
|
5
src/components/statusbar/statusbar.css
Normal file
5
src/components/statusbar/statusbar.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
#statusbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -45,79 +45,7 @@ body {
|
|||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--bg-blue);
|
||||
opacity: 75%;
|
||||
transition: 500ms ease;
|
||||
width: 10vw;
|
||||
max-width: 10vw;
|
||||
}
|
||||
|
||||
#sidebar:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.games {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 5px;
|
||||
filter: grayscale(100%);
|
||||
transition: 500ms ease;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
filter: grayscale(0%);
|
||||
opacity: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item.disabled:hover,
|
||||
.nav-item.disabled {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.nav-item a::before,
|
||||
.nav-item a::after {
|
||||
--scale: 0;
|
||||
position: absolute;
|
||||
transform: translateX(55px) scale(var(--scale));
|
||||
transition: 200ms ease;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.nav-item a::before {
|
||||
padding: 0.5rem;
|
||||
width: max-content;
|
||||
background: #333;
|
||||
color: white;
|
||||
content: attr(data-tooltip);
|
||||
border-radius: 0.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item a:hover::before {
|
||||
--scale: 1;
|
||||
}
|
||||
|
||||
.nav-item img {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
|
@ -140,14 +68,25 @@ body {
|
|||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 95vh;
|
||||
width: 90vw;
|
||||
max-width: 90vw;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 5vh;
|
||||
width: 90vw;
|
||||
max-width: 90vw;
|
||||
background-color: var(--bg-blue);
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -155,7 +94,7 @@ body {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-center > div {
|
||||
.flex-center>div {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
|
@ -221,6 +160,7 @@ body {
|
|||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
@ -259,7 +199,7 @@ body {
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
details > summary:hover {
|
||||
details>summary:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -291,4 +231,4 @@ ul.no-decoration {
|
|||
.error-row * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue