mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
UI fixes
This commit is contained in:
parent
5e5875316b
commit
f0e8dd3b91
1 changed files with 0 additions and 156 deletions
156
src/App.vue
156
src/App.vue
|
@ -125,159 +125,3 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
h1,
|
|
||||||
p,
|
|
||||||
a,
|
|
||||||
b {
|
|
||||||
unicode-bidi: plaintext;
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
background-color: #15191a;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #4b4f52;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: #5b6469;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:active {
|
|
||||||
background-color: #485053;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background-color: #0b0e0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
scrollbar-color: #15191a #444a4e;
|
|
||||||
@apply font-sans;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-grid {
|
|
||||||
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto lt-md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
@apply h-full py-2 lt-md:px-2 md:px-4 rounded cursor-pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset {
|
|
||||||
@apply text-black bg-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto {
|
|
||||||
@apply dark:(text-white bg-dark-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
@apply text-white bg-dark-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input,
|
|
||||||
.select,
|
|
||||||
.btn {
|
|
||||||
@apply w-auto text-gray-600 bg-gray-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input,
|
|
||||||
.select {
|
|
||||||
@apply h-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
@apply h-4 w-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .input,
|
|
||||||
.dark .select,
|
|
||||||
.dark .btn {
|
|
||||||
@apply text-gray-400 bg-dark-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto .input,
|
|
||||||
.auto .select,
|
|
||||||
.auto .btn {
|
|
||||||
@apply dark:(text-gray-400 bg-dark-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
@apply pl-2.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus {
|
|
||||||
@apply border-2 border-red-500 outline-none;
|
|
||||||
box-shadow: 0 0 15px rgba(239, 68, 68, var(--un-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
@apply !mt-2 !mb-3 border-gray-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark hr {
|
|
||||||
@apply border-dark-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto hr {
|
|
||||||
@apply dark:border-dark-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
@apply m-0 font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@apply !text-5xl;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@apply !text-3xl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
@apply w-full text-lg text-left font-light border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
@apply hover:(text-dark-300 underline underline-dark-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-secondary {
|
|
||||||
@apply hover:(text-dark-400 underline underline-dark-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .link {
|
|
||||||
@apply hover:(text-gray-300 underline underline-gray-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto .link {
|
|
||||||
@apply dark:hover:(text-gray-300 underline underline-gray-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .link-secondary {
|
|
||||||
@apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto .link-secondary {
|
|
||||||
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
@apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .line {
|
|
||||||
@apply bg-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto .line {
|
|
||||||
@apply dark:(bg-white);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
Loading…
Reference in a new issue