mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-25 02:10:39 +00:00
Make table wrapper and table options components
This commit is contained in:
Milos Holba
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<li class="menu-option">
|
||||
<li class="menu-option" :class="[icon === 'trash' ? 'danger' : '']">
|
||||
<div class="icon">
|
||||
<trash-2-icon v-if="icon === 'trash'" :class="{'danger' : icon === 'trash'}" size="17"></trash-2-icon>
|
||||
<trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
|
||||
<life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
|
||||
<trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
|
||||
<eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
|
||||
@@ -14,7 +14,7 @@
|
||||
<smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
|
||||
<paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label" :class="{'danger' : icon === 'trash'}">
|
||||
<div class="text-label">
|
||||
{{ title }}
|
||||
</div>
|
||||
</li>
|
||||
@@ -60,6 +60,22 @@ import {
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.danger {
|
||||
.text-label {
|
||||
color: $danger !important;
|
||||
}
|
||||
.icon {
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $danger !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
@@ -71,20 +87,6 @@ import {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.danger {
|
||||
color: $danger !important;
|
||||
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $danger !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
@@ -112,6 +114,11 @@ import {
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.danger {
|
||||
&:hover {
|
||||
background: rgba($danger, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
|
||||
@@ -1,60 +1,54 @@
|
||||
<template>
|
||||
<div class="set-folder-icon">
|
||||
|
||||
<div class="select-table">
|
||||
<div @click="changeTab('emoji')" :class="{'active' : activeTab === 'emoji'}">
|
||||
<smile-icon class="icon" size="17" />
|
||||
<b class="select-tab-title">{{$t('popup_rename.tab_emoji_title')}}</b>
|
||||
</div>
|
||||
<div @click="changeTab('color')" :class="{'active' : activeTab === 'color'}">
|
||||
<folder-icon class="icon" size="17"/>
|
||||
<b class="select-tab-title"> {{$t('popup_rename.tab_color_title')}}</b>
|
||||
</div>
|
||||
</div>
|
||||
<TableWrapper >
|
||||
<TableOption :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
|
||||
<div class="select-emoji-wrapper">
|
||||
<label class="main-label">Pick Yout Emoji Icon:</label>
|
||||
|
||||
<div class="select-emoji-wrapper" v-if="activeTab === 'emoji'">
|
||||
<label class="main-label">Pick Yout Emoji Icon:</label>
|
||||
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
|
||||
|
||||
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
|
||||
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<span>{{selectedEmoji.char}}</span>
|
||||
<span>{{selectedEmoji.name}}</span>
|
||||
</div>
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<span>{{selectedEmoji.char}}</span>
|
||||
<span>{{selectedEmoji.name}}</span>
|
||||
</div>
|
||||
|
||||
<div class="not-selected" v-if="! selectedEmoji">
|
||||
<span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
|
||||
<div class="not-selected" v-if="! selectedEmoji">
|
||||
<span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
|
||||
</div>
|
||||
|
||||
<chevron-down-icon size="19" class="chevron-icon"/>
|
||||
</div>
|
||||
|
||||
<transition v-if="selectOpen" name="slide-in">
|
||||
<div class="emoji-wrapper">
|
||||
<input v-model="searchEmoji" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
|
||||
<label class="object-label"> {{$t('popup_rename.emoji_list_label')}}</label>
|
||||
<ul class="options-list">
|
||||
<li @click="setIcon({'emoji':emoji})" class="option" v-for="(emoji,i) in allEmoji" :key="i">
|
||||
{{emoji.char}}
|
||||
</li>
|
||||
<span class="not-found" v-if="allEmoji.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</TableOption>
|
||||
|
||||
<chevron-down-icon size="19" class="chevron-icon"/>
|
||||
</div>
|
||||
|
||||
<transition v-if="selectOpen" name="slide-in">
|
||||
<div class="emoji-wrapper">
|
||||
<input v-model="searchEmoji" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
|
||||
<label class="object-label"> {{$t('popup_rename.emoji_list_label')}}</label>
|
||||
<ul class="options-list">
|
||||
<li @click="setIcon({'emoji':emoji})" class="option" v-for="(emoji,i) in allEmoji" :key="i">
|
||||
{{emoji.char}}
|
||||
</li>
|
||||
<span class="not-found" v-if="allEmoji.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span>
|
||||
<TableOption :title="$t('popup_rename.tab_color_title')" icon="folder">
|
||||
<div class="color-pick-wrapper">
|
||||
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
|
||||
<ul class="color-wrapper">
|
||||
<li v-for="(color, index) in colors"
|
||||
:key="index"
|
||||
@click="setIcon({'color': color})"
|
||||
class="single-color"
|
||||
:class="{'active-color': color === selectedColor }"
|
||||
:style="{background:color}" />
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'color'" class="color-pick-wrapper">
|
||||
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
|
||||
<ul class="color-wrapper">
|
||||
<li v-for="(color, index) in colors"
|
||||
:key="index"
|
||||
@click="setIcon({'color': color})"
|
||||
class="single-color"
|
||||
:class="{'active-color': color === selectedColor }"
|
||||
:style="{background:color}" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</TableOption>
|
||||
</TableWrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -90,7 +84,6 @@
|
||||
selectedEmoji: undefined,
|
||||
selectedColor: undefined,
|
||||
searchEmoji: undefined,
|
||||
activeTab: "emoji",
|
||||
selectOpen: false,
|
||||
emojis: emojis,
|
||||
colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
|
||||
@@ -99,14 +92,6 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(tab) {
|
||||
this.activeTab = tab
|
||||
|
||||
this.selectedEmoji = undefined
|
||||
|
||||
this.selectedColor = undefined
|
||||
|
||||
},
|
||||
openMenu() {
|
||||
this.selectOpen = ! this.selectOpen
|
||||
},
|
||||
@@ -124,11 +109,7 @@
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.activeTab = "emoji"
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
this.viewEmojiList = false
|
||||
}
|
||||
|
||||
}
|
||||
@@ -268,53 +249,11 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.select-table {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $light_background;
|
||||
color: $text;
|
||||
}
|
||||
& > :first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
& > :last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
path,
|
||||
circle,
|
||||
line,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.set-folder-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-table {
|
||||
.active {
|
||||
background: $text;
|
||||
.select-tab-title {
|
||||
color: $light_background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-enter-active {
|
||||
transition: all 5s ease;
|
||||
}
|
||||
@@ -364,21 +303,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.select-table {
|
||||
& > * {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.active {
|
||||
background: $dark_mode_text_primary;
|
||||
.select-tab-title {
|
||||
color: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -9,23 +9,8 @@
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
|
||||
|
||||
<div class="select-share-wrapper" v-if="!isGeneratedShared">
|
||||
<div @click="shareBy = 'link'" :class="{'active' : shareBy === 'link'}">
|
||||
<link-icon class="icon" size="17" />
|
||||
<h1>{{$t('shared_form.share_by_link')}}</h1>
|
||||
</div>
|
||||
<div @click="shareBy = 'email'" :class="{'active' : shareBy === 'email'}">
|
||||
<mail-icon class="icon" size="17"/>
|
||||
<h1> {{$t('shared_form.share_by_email')}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message after successfully sned shared link via email -->
|
||||
<div v-if="shareBy === 'email' && isGeneratedShared" class="successfully-send-wrapper">
|
||||
<div class="successfully-send"> {{$t('shared_form.email_successfully_send_message')}} </div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<!-- Infobox for successfull sended email -->
|
||||
<div v-if="isGeneratedShared && shareViaEmail" class="info-box">
|
||||
<InfoBox >
|
||||
{{$t('shared_form.email_successfully_send_message')}}
|
||||
</InfoBox>
|
||||
@@ -34,11 +19,21 @@
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver v-if="! isGeneratedShared" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<TableWrapper>
|
||||
|
||||
<!-- Share via link -->
|
||||
<TableOption :title="$t('shared_form.share_by_link')" icon="link"/>
|
||||
|
||||
<!-- Share via Email -->
|
||||
<TableOption :title="$t('shared_form.share_by_email')" icon="email">
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<EmailsInput rules="required" v-model="shareOptions.emails" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</TableOption>
|
||||
|
||||
</TableWrapper>
|
||||
|
||||
<!-- Email input for the shared via Email1 -->
|
||||
<ValidationProvider v-if="shareBy === 'email' && ! isGeneratedShared " tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<EmailsInput rules="required" v-model="shareOptions.emails" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
<!--Permision Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
|
||||
@@ -76,7 +71,7 @@
|
||||
<!--Copy generated link-->
|
||||
<div v-if="isGeneratedShared" class="form-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">{{ $t('shared_form.label_shared_url') }}:</label>
|
||||
<label class="input-label">{{ this.shareViaEmail ? $t('shared_form.label_share_vie_email') : $t('shared_form.label_shared_url') }}:</label>
|
||||
<CopyInput size="small" :value="shareLink" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,7 +179,7 @@
|
||||
isGeneratedShared: false,
|
||||
isLoading: false,
|
||||
isMoreOptions: false,
|
||||
shareBy: "link"
|
||||
shareViaEmail: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -218,6 +213,8 @@
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
this.shareViaEmail = response.data.data.attributes.email_share
|
||||
|
||||
this.shareLink = response.data.data.attributes.link
|
||||
this.isGeneratedShared = true
|
||||
|
||||
@@ -239,8 +236,6 @@
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
this.shareBy = 'link'
|
||||
|
||||
if (args.name !== 'share-create') return
|
||||
|
||||
// Store picked item
|
||||
@@ -279,73 +274,14 @@
|
||||
.info-box {
|
||||
padding: 0px 20px;
|
||||
/deep/.info-box {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.successfully-send-wrapper {
|
||||
padding: 0px 20px;
|
||||
margin-bottom: 20px;
|
||||
.successfully-send {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background: $light_background ;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
p {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-share-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0px 20px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $light_background;
|
||||
color: $text;
|
||||
}
|
||||
& > :first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
& > :last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
path,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-share-wrapper {
|
||||
.active {
|
||||
background: $text;
|
||||
h1 {
|
||||
color: $light_background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.more-options {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -361,24 +297,4 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.select-share-wrapper {
|
||||
& > * {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.active {
|
||||
background: $dark_mode_text_primary;
|
||||
h1 {
|
||||
color: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.successfully-send {
|
||||
background: $dark_mode_foreground !important;
|
||||
p {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,68 +1,19 @@
|
||||
<template>
|
||||
<div :class="{'active' : active}">
|
||||
<div class="wrapper">
|
||||
<mail-icon v-if="icon === 'email'" class="icon" size="17"/>
|
||||
<link-icon v-if="icon === 'link'" class="icon" size="17"/>
|
||||
<smile-icon v-if="icon === 'emoji'" class="icon" size="17"/>
|
||||
<folder-icon v-if="icon === 'folder'" class="icon" size="17"/>
|
||||
<b>{{title}}</b>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot v-if="activeTab"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
LinkIcon,
|
||||
MailIcon,
|
||||
SmileIcon,
|
||||
FolderIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: "TableOption",
|
||||
props: ['title', 'icon', 'active'],
|
||||
components: {
|
||||
LinkIcon,
|
||||
MailIcon,
|
||||
SmileIcon,
|
||||
FolderIcon
|
||||
export default {
|
||||
name: "TableOption",
|
||||
props: ['title', 'icon'],
|
||||
data () {
|
||||
return {
|
||||
activeTab: false
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
path,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: $text;
|
||||
b {
|
||||
color: $light_background !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.active {
|
||||
background: $dark_mode_text_primary;
|
||||
h1 {
|
||||
color: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,66 @@
|
||||
<template>
|
||||
<div class="table-wrapper">
|
||||
<slot>
|
||||
<child @click="setTab"></child>
|
||||
</slot>
|
||||
<div>
|
||||
<div class="select-table" >
|
||||
<div :class="{'active' : activeTab === child.title}" @click="setActiveTab(child)" v-for="(child, i) in tabList" :key="i">
|
||||
<mail-icon v-if="child.icon === 'email'" class="icon" size="17"/>
|
||||
<link-icon v-if="child.icon === 'link'" class="icon" size="17"/>
|
||||
<smile-icon v-if="child.icon === 'emoji'" class="icon" size="17"/>
|
||||
<folder-icon v-if="child.icon === 'folder'" class="icon" size="17"/>
|
||||
<b>{{child.title}}</b>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableOption from '@/components/Others/TableOption'
|
||||
import {
|
||||
LinkIcon,
|
||||
MailIcon,
|
||||
SmileIcon,
|
||||
FolderIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: "TableWrapper",
|
||||
components: {TableOption},
|
||||
components: {
|
||||
LinkIcon,
|
||||
MailIcon,
|
||||
SmileIcon,
|
||||
FolderIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tabList: []
|
||||
tabList: [],
|
||||
activeTab: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTab(tab){
|
||||
console.log('setTab')
|
||||
this.$children.find(child => child._props.title === tab)
|
||||
}
|
||||
setActiveTab(tab){
|
||||
|
||||
// Set false active tab for all TableWrapper childrens
|
||||
this.$children.map(child => {
|
||||
if(child._props.title !== tab.title)
|
||||
child._data.activeTab = false
|
||||
})
|
||||
|
||||
// Set active tab for clicked cildren
|
||||
let child = this.$children.find(child => child._props.title === tab.title)._data.activeTab = true
|
||||
|
||||
this.activeTab = tab.title
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
|
||||
//Get all TableWrapper childrens and push to tabList
|
||||
this.$children.map(child => {
|
||||
this.tabList.push(child._props.title)
|
||||
this.tabList.push(child._props)
|
||||
})
|
||||
console.log(this.$children)
|
||||
|
||||
// Set active tab the first one
|
||||
this.activeTab = this.$children[0]._props.title
|
||||
this.$children[0]._data.activeTab = true
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -36,10 +68,9 @@
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.table-wrapper {
|
||||
.select-table {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0px 20px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -57,18 +88,41 @@
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
& > :last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
path,
|
||||
circle,
|
||||
line,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $text;
|
||||
b {
|
||||
color: $light_background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.table-wrapper {
|
||||
.select-table {
|
||||
& > * {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $dark_mode_text_primary;
|
||||
h1 {
|
||||
color: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user