mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 01:12:14 +00:00
dark mode update
This commit is contained in:
carodej
@@ -64,12 +64,12 @@
|
||||
|
||||
.title {
|
||||
max-width: 100%;
|
||||
font-size: 28px;
|
||||
font-size: 32px;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 15px;
|
||||
|
||||
/deep/ span {
|
||||
font-size: 28px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
axios.get('/api/public/pricing')
|
||||
.then(response => {
|
||||
this.plans = response.data
|
||||
this.$emit('load', false)
|
||||
this.$emit('load', response.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -138,4 +138,52 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.plans-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.plan {
|
||||
border-color: $dark_mode_border_color;
|
||||
|
||||
.plan-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.plan-header {
|
||||
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-features {
|
||||
|
||||
.storage-size {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.storage-description {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-footer {
|
||||
|
||||
.sign-in-button {
|
||||
background: rgba($theme, 0.1);
|
||||
|
||||
/deep/ .content {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -316,7 +316,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
@media only screen and (max-width: 960px) {
|
||||
.page-title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.get-started-button {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cloud-bg,
|
||||
.icons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="page-wrapper large hero-screenshot">
|
||||
<img src="/assets/images/vuefilemanager-screenshot.png" alt="VueFileManager screenshot">
|
||||
<img class="hero-light" src="/assets/images/vuefilemanager-screenshot-light.png" alt="VueFileManager application">
|
||||
<img class="hero-dark" src="/assets/images/vuefilemanager-screenshot-dark.png" alt="VueFileManager application">
|
||||
|
||||
<div class="icons">
|
||||
<link-icon size="20" class="icon"></link-icon>
|
||||
@@ -59,6 +60,7 @@
|
||||
.icons {
|
||||
|
||||
.icon {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
|
||||
&:nth-child(1) {
|
||||
@@ -168,31 +170,53 @@
|
||||
}
|
||||
|
||||
.hero-screenshot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 75px;
|
||||
padding-bottom: 130px;
|
||||
|
||||
img {
|
||||
border-radius: 8px;
|
||||
max-width: 1165px;
|
||||
width: 80%;
|
||||
box-shadow: 0 7px 255px rgba(#19363C, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1390px) and (min-width: 1190px) {
|
||||
.hero-screenshot {
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
&.hero-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1190px) {
|
||||
@media only screen and (max-width: 890px) {
|
||||
|
||||
.icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-screenshot {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.hero-screenshot {
|
||||
|
||||
img {
|
||||
|
||||
&.hero-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hero-dark {
|
||||
display: block;
|
||||
box-shadow: 0 7px 185px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section class="main-features page-wrapper medium">
|
||||
<PageTitle
|
||||
type="center"
|
||||
title="The Fastest Growing <span style='color: #41B883'>File Manager</span><br> on the CodeCanyon Market"
|
||||
title="The Fastest Growing <span style='color: #41B883'>File Manager</span> on the CodeCanyon Market"
|
||||
description="Your private cloud storage software build on Laravel & Vue.js. No limits & no monthly fees. Trully freedom."
|
||||
></PageTitle>
|
||||
<div class="content">
|
||||
@@ -147,4 +147,39 @@
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.features {
|
||||
.feature {
|
||||
margin-bottom: 35px;
|
||||
|
||||
.title {
|
||||
@include font-size(22);
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.features {
|
||||
|
||||
.feature {
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<nav class="main-navigation">
|
||||
<router-link :to="{name: 'SaaSLandingPage'}" tag="div" class="logo">
|
||||
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager">
|
||||
<img v-if="config.app_logo_horizontal" :src="config.app_logo_horizontal" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
|
||||
</router-link>
|
||||
<div class="navigation">
|
||||
<ul class="navigation-links">
|
||||
@@ -36,8 +37,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'IndexNavigation',
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -55,12 +61,18 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
height: 38px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-weight: 800;
|
||||
@include font-size(25);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<footer class="page-wrapper medium">
|
||||
<div class="logo">
|
||||
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager">
|
||||
</div>
|
||||
<router-link :to="{name: 'SaaSLandingPage'}" tag="div" class="logo">
|
||||
<img v-if="config.app_logo_horizontal" :src="config.app_logo_horizontal" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
|
||||
</router-link>
|
||||
<ul class="navigation-links">
|
||||
<li>
|
||||
<a href="/#pricing">
|
||||
@@ -14,31 +15,38 @@
|
||||
Contact Us
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navigation-links">
|
||||
<li>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms'}}">
|
||||
Terms
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}">
|
||||
Terms of Service
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy'}}">
|
||||
Privacy
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}">
|
||||
Privacy Policy
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'cookies'}}">
|
||||
Cookies
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">
|
||||
Cookie Policy
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="copyright">
|
||||
© 2020 VueFileManager. All rights reserved.
|
||||
© 2020 {{ config.app_name }}. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'IndexPageFooter',
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -49,15 +57,22 @@
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: 38px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-weight: 800;
|
||||
@include font-size(25);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
@@ -67,6 +82,7 @@
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 19px;
|
||||
font-weight: 700;
|
||||
@include font-size(17);
|
||||
@@ -86,7 +102,24 @@
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
@media only screen and (max-width: 960px) {
|
||||
.navigation-links {
|
||||
display: block;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.copyright {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -94,6 +94,11 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.main-header {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: block;
|
||||
|
||||
@@ -106,5 +111,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign-up-button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="page-wrapper medium pricing">
|
||||
<div class="page-wrapper medium pricing" v-if="! isEmpty">
|
||||
<div id="pricing" class="page-title center">
|
||||
<h1 class="title">
|
||||
Pick the <span style="color: #41B883">Best Plan</span> For Your Needs
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<PricingTables class="pricing-tables"/>
|
||||
<PricingTables class="pricing-tables" @load="pricingLoaded"/>
|
||||
|
||||
<div class="page-title center">
|
||||
<h2 class="description">
|
||||
@@ -33,6 +33,18 @@
|
||||
PricingTables,
|
||||
AuthButton,
|
||||
CloudIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEmpty: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pricingLoaded(pricing) {
|
||||
|
||||
if (pricing.length === 0)
|
||||
this.isEmpty = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -125,6 +137,10 @@
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.cloud-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
|
||||
.title {
|
||||
@@ -143,5 +159,10 @@
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user