Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-04-03 06:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve theming, and make auto theme work with media query.

Browse Source
This commit is contained in:
FireMasterK
2021-12-28 00:04:20 +00:00
parent 13a1f352d8
commit 77010ccac4
6 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/SearchSuggestions.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="absolute suggestions-container" :style="[{ background: secondaryBackgroundColor }]">
<div class="absolute suggestions-container">
<ul>
<li
v-for="(suggestion, i) in searchSuggestions"
:key="i"
:style="[selected === i ? { background: secondaryForegroundColor } : {}]"
class="suggestion"
:class="{ 'suggestion-selected': selected === i }"
@mouseover="onMouseOver(i)"
@mousedown.stop="onClick(i)"
>
@@ -76,7 +76,27 @@ export default {
<style>
.suggestions-container {
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)];
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)] bg-gray-300;
}
.dark .suggestions-container {
@apply bg-dark-400;
}
.auto .suggestions-container {
@apply dark:bg-dark-400;
}
.suggestion-selected {
@apply bg-gray-200;
}
.dark .suggestion-selected {
@apply bg-dark-100;
}
.auto .suggestion-selected {
@apply dark:bg-dark-100;
}
.suggestion {