mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-12-23 14:03:35 +00:00
UI fixes
This commit is contained in:
parent
5e5875316b
commit
f0e8dd3b91
156
src/App.vue
156
src/App.vue
@ -125,159 +125,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</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 New Issue
Block a user