mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-12-14 14:20:28 +05:30
Merge pull request #1661 from thecashewtrader/light-theme-black-bars
Respect light theme properly
This commit is contained in:
commit
4c564d8a8f
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="background: #0f0f0f" lang="en">
|
||||
<html style="background: #0f0f0f" lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
37
src/App.vue
37
src/App.vue
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="w-full min-h-screen px-1vw reset" :class="[theme]">
|
||||
<div class="w-full min-h-screen px-1vw py-5 reset" :class="[theme]">
|
||||
<NavBar />
|
||||
|
||||
<router-view v-slot="{ Component }">
|
||||
@ -33,6 +33,10 @@ export default {
|
||||
let themePref = this.getPreferenceString("theme", "dark");
|
||||
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
|
||||
else this.theme = themePref;
|
||||
|
||||
// Used for the scrollbar
|
||||
const root = document.querySelector(":root");
|
||||
this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@ -97,7 +101,7 @@ b {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #15191a;
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@ -116,8 +120,35 @@ b {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-color: #4b4f52 #d1d5db;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar {
|
||||
background-color: #15191a;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: #4b4f52;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #5b6469;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:active {
|
||||
background-color: #485053;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-corner {
|
||||
background-color: #0b0e0f;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
scrollbar-color: #4b4f52 #15191a;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: #15191a #444a4e;
|
||||
@apply font-sans;
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<footer class="text-center py-4 rounded-xl children:(mx-3) w-full mt-10 mb-5">
|
||||
<footer class="text-center py-4 rounded-xl children:(mx-3) w-full mt-10">
|
||||
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
|
||||
<font-awesome-icon :icon="['fab', 'github']" />
|
||||
<span class="ml-2" v-t="'actions.source_code'" />
|
||||
|
@ -34,7 +34,10 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
|
||||
@apply fixed z-50 top-0 left-0 w-full h-full bg-gray bg-opacity-80 transition-opacity table;
|
||||
}
|
||||
.dark .modal {
|
||||
@apply bg-dark-900 bg-opacity-80;
|
||||
}
|
||||
|
||||
.modal > div {
|
||||
@ -42,7 +45,10 @@ export default {
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
|
||||
@apply w-min m-auto px-8 bg-white p-6 rounded-xl min-w-[20vw] relative;
|
||||
}
|
||||
.dark .modal-container {
|
||||
@apply bg-dark-700;
|
||||
}
|
||||
|
||||
.modal-container > button {
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
|
||||
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 pb-2.5 w-full relative">
|
||||
<div class="flex-1 flex justify-start">
|
||||
<router-link class="flex font-bold text-3xl items-center font-sans" to="/"
|
||||
><img
|
||||
|
Loading…
Reference in New Issue
Block a user