mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
Merge pull request #86 from teaxyz/styling-work
Have more styling items to check off, but merging this PR to consolidate with main
This commit is contained in:
Thomas Smith
GitHub
commit
b08e997ddb
10 changed files with 41 additions and 18 deletions
|
|
@ -22,3 +22,20 @@ html {
|
|||
font-family: sono, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary,
|
||||
header,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
button,
|
||||
.click-copy {
|
||||
font-family: 'pp-neue-machina' !important;
|
||||
}
|
||||
|
||||
.pk-version {
|
||||
font-family: 'sono';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
{#if courses.length}
|
||||
<Posts posts={courses} />
|
||||
{:else}
|
||||
<section class="h-64 border border-gray p-4">
|
||||
<section class="h-64 border border-gray bg-black p-4">
|
||||
<Preloader />
|
||||
</section>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
<ul id="NavBar">
|
||||
<nav data-tauri-drag-region class="flex justify-between">
|
||||
<div class="flex gap-1 p-3">
|
||||
<div class="flex gap-1 p-3 pt-3">
|
||||
<button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
|
||||
<img src="/images/close.svg" alt="close" />
|
||||
</button>
|
||||
|
|
@ -139,8 +139,8 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
{#if news.length}
|
||||
<Posts posts={news} />
|
||||
{:else}
|
||||
<section class="h-64 border border-gray p-4">
|
||||
<section class="h-64 border border-gray bg-black p-4">
|
||||
<Preloader />
|
||||
</section>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</article>
|
||||
</header>
|
||||
<footer class="flex h-20 border-t border-gray text-white">
|
||||
<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
|
||||
<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
|
||||
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
|
||||
<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
|
||||
>OPEN IN TERMINAL</Button
|
||||
|
|
|
|||
|
|
@ -18,12 +18,13 @@
|
|||
</nav>
|
||||
<section class="pt-24">
|
||||
{#if backLink}
|
||||
<header class="px-16 py-2 text-3xl text-gray hover:text-primary">
|
||||
<header class="border-b border-gray px-16 text-3xl text-gray hover:text-primary">
|
||||
<a href={backLink}>←</a>
|
||||
</header>
|
||||
{/if}
|
||||
<figure />
|
||||
<div class="px-16">
|
||||
|
||||
<div class="content">
|
||||
<!-- all pages get inserted in this slot -->
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -49,7 +50,8 @@
|
|||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@media screen and (min-width: 1215px) {
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
figure {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
|
|
@ -59,10 +61,13 @@
|
|||
bottom: 0px;
|
||||
background-image: url('/images/gui-background-grid.svg');
|
||||
background-size: cover;
|
||||
background-repeat: repeat;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.content {
|
||||
padding: 0vw 3.6vw !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1215px) {
|
||||
@media screen and (max-width: 1440px) {
|
||||
figure {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
|
|
@ -74,14 +79,16 @@
|
|||
background-size: contain;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.content {
|
||||
padding: 0vw 3.33vw;
|
||||
}
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: #ccc 1px solid;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
slot {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
focus = i;
|
||||
resetLoop();
|
||||
}}
|
||||
class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
|
||||
class={`bg-purple h-3 w-3 rounded-lg border border-white transition-colors ${
|
||||
i === focus ? 'bg-purple-900' : ''
|
||||
}`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,7 @@
|
|||
<style>
|
||||
.gallery-item :global(.featured-img) {
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card-thumb-label i {
|
||||
font-size: 1.5vw;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<footer class="mt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p>
|
||||
<span class="text-xs">V {pkg.version}</span>
|
||||
<span class="pk-version text-xs">V {pkg.version}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class={`flex items-center py-2 ${size} ${clazz}`}>
|
||||
<section class={`flex items-center border-b border-r-0 border-l-0 py-2 ${size} ${clazz}`}>
|
||||
<div class="icon pl-4">
|
||||
<i class="icon-search-icon" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue