nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark mode improvements

Browse Source
This commit is contained in:
Čarodej
2021-11-24 17:59:05 +01:00
parent be04715f8b
commit f71a31ab78
18 changed files with 175 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/App.vue
View File

@@ -135,11 +135,11 @@ export default {
@import '/resources/sass/vuefilemanager/_mixins';
.card {
@apply bg-white lg:p-8 p-6 rounded-lg lg:mb-6 mb-4
@apply dark:bg-dark-foreground bg-white lg:p-8 p-6 rounded-lg lg:mb-6 mb-4
}
.input-dark {
@apply w-full bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
}
[v-cloak],

2
resources/js/components/Admin/AppInputSwitch.vue
View File

@@ -3,7 +3,7 @@
<!--Label for input-->
<div class="leading-5">
<label class="text-sm font-bold text-gray-700 mb-1.5 block">
<label class="text-sm font-bold dark:text-gray-400 text-gray-700 mb-1.5 block">
{{ title }}:
</label>

4
resources/js/components/Admin/AppInputText.vue
View File

@@ -2,7 +2,7 @@
<div :class="{'mb-7': !isLast}">
<!--Label for input-->
<label v-if="title" class="text-sm font-bold text-gray-700 mb-1.5 block">
<label v-if="title" class="text-sm font-bold dark:text-gray-400 text-gray-700 mb-1.5 block">
{{ title }}:
</label>
@@ -10,7 +10,7 @@
<slot></slot>
<!--Input Description-->
<small v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></small>
<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small>
<!--Input Description-->
<span v-if="error" class="text-red-700 pt-2 text-xs">

2
resources/js/components/Admin/CardNavigation.vue
View File

@@ -2,7 +2,7 @@
<div class="whitespace-nowrap overflow-x-auto">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': routeName === page.route, 'text-gray-600': routeName !== page.route}"
:class="{'text-theme': routeName === page.route, 'dark:text-gray-400 text-gray-600': routeName !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"

28
resources/js/components/Admin/ProgressLine.vue
View File

@@ -115,4 +115,32 @@
}
}
}
.dark {
.chart {
background: #282A2F !important;
}
.chart-wrapper {
&:nth-child(1) {
.chart-progress {
border-color: #151515 !important;
}
}
.chart-progress {
border-color: #151515 !important;
}
}
.chart-progress {
&.secondary {
background: #282A2F !important;
box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important;
}
}
}
</style>

20
resources/js/components/Others/Tables/DatatableWrapper.vue
View File

@@ -11,14 +11,14 @@
:class="{ 'sortable': column.sortable, 'text-right': (Object.values(columns).length - 1) === index }"
v-if="! column.hidden"
>
<span class="text-gray-400 dark-text-theme text-xs">
<span class="dark:text-gray-500 text-gray-400 text-xs">
{{ column.label }}
</span>
<chevron-up-icon
v-if="column.sortable"
:class="{ 'arrow-down': filter.sort === 'ASC' }"
class="inline-block vue-feather text-gray-300"
class="inline-block vue-feather dark:text-gray-500 text-gray-300"
size="12"
/>
</th>
@@ -120,7 +120,9 @@
</li>
</ul>
<span class="paginator-info">Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records</span>
<span class="mt-10 flex items-center justify-between text-xs text-gray-600">
Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records
</span>
</div>
</div>
</template>
@@ -273,16 +275,4 @@ export default {
}
}
}
.paginator-wrapper {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
.paginator-info {
font-size: 13px;
color: $text-muted;
}
}
</style>

15
resources/js/components/Sidebar/ContentSidebar.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background" id="content-sidebar">
<slot></slot>
</section>
</template>
@@ -9,16 +9,3 @@
name: 'ContentSidebar',
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.content-sidebar {
background: rgb(249, 249, 250);
}
.dark .content-sidebar {
background: rgba($dark_mode_foreground, 0.2);
}
</style>

7
resources/js/components/Sidebar/SidebarNavigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav class="menu-bar flex-none xl:w-20 w-16 lg:grid hidden">
<nav class="menu-bar dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
<div class="icon-navigation menu" v-if="user">
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
@@ -101,7 +101,6 @@
}
.menu-bar {
background: $light_background;
user-select: none;
padding-top: 25px;
}
@@ -215,10 +214,6 @@
}
}
}
.menu-bar {
background: #1d1d1d;
}
}
</style>

2
resources/js/views/Admin.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
<div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />

4
resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
View File

@@ -27,11 +27,11 @@
</AppInputText>
<div class="flex space-x-4">
<AppInputText :title="$t('admin_settings.billings.city')">
<AppInputText :title="$t('admin_settings.billings.city')" class="w-full">
<input @input="$updateText('/admin/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" :placeholder="$t('admin_settings.billings.city_plac')" type="text" class="focus-border-theme input-dark"/>
</AppInputText>
<AppInputText :title="$t('admin_settings.billings.postal_code')">
<AppInputText :title="$t('admin_settings.billings.postal_code')" class="w-full">
<input @input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)" v-model="billingInformation.billing_postal_code" :placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" class="focus-border-theme input-dark"/>
</AppInputText>
</div>

2
resources/js/views/Admin/Invoices.vue
View File

@@ -9,7 +9,7 @@
:columns="columns"
>
<template slot-scope="{ row }">
<tr style="border-bottom: 1px dashed #f3f3f3;">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-5">
<span class="text-sm font-bold">
{{ row.data.attributes.plan_name }}

4
resources/js/views/Admin/Pages.vue
View File

@@ -4,7 +4,7 @@
<div class="card shadow-card">
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr style="border-bottom: 1px dashed #f3f3f3;">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
{{ row.data.attributes.title }}
@@ -22,7 +22,7 @@
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
</div>

6
resources/js/views/Admin/Users.vue
View File

@@ -11,7 +11,7 @@
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr style="border-bottom: 1px dashed #f3f3f3;">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
@@ -67,10 +67,10 @@
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>

2
resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
View File

@@ -8,7 +8,7 @@
:columns="columns"
>
<template slot-scope="{ row }">
<tr style="border-bottom: 1px dashed #f3f3f3;">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.plan_name }}

2
resources/js/views/Profile.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
<div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />

2
resources/js/views/User/Invoices.vue
View File

@@ -8,7 +8,7 @@
:columns="columns"
>
<template slot-scope="{ row }">
<tr style="border-bottom: 1px dashed #f3f3f3;">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.plan_name }}