mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 09:12:14 +00:00
custom color theme part 1
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div class="plan-wrapper">
|
||||
<header class="plan-header">
|
||||
<div class="icon">
|
||||
<hard-drive-icon size="26"></hard-drive-icon>
|
||||
<hard-drive-icon class="text-theme" size="26"></hard-drive-icon>
|
||||
</div>
|
||||
<h1 class="title">{{ plan.data.attributes.name }}</h1>
|
||||
<h2 class="description">{{ plan.data.attributes.description }}</h2>
|
||||
@@ -14,7 +14,7 @@
|
||||
<span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
|
||||
</section>
|
||||
<footer class="plan-footer">
|
||||
<b class="price">
|
||||
<b class="price text-theme">
|
||||
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
|
||||
<small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
|
||||
</b>
|
||||
@@ -73,7 +73,7 @@
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,7 +113,6 @@
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $theme;
|
||||
@include font-size(18);
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
:description="index.get_started_description"
|
||||
></PageTitle>
|
||||
|
||||
<router-link tag="button" class="get-started-button" :to="{name: 'SignUp'}">
|
||||
<router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{name: 'SignUp'}">
|
||||
<span class="content">{{ $t('page_index.get_started_button') }}</span>
|
||||
<chevron-right-icon size="22"></chevron-right-icon>
|
||||
</router-link>
|
||||
|
||||
<cloud-icon size="790" class="cloud-bg"></cloud-icon>
|
||||
<cloud-icon size="790" class="cloud-bg svg-color-theme" />
|
||||
|
||||
<div class="icons">
|
||||
<hard-drive-icon size="42" class="icon"></hard-drive-icon>
|
||||
@@ -274,10 +274,10 @@
|
||||
top: 70px;
|
||||
right: 60px;
|
||||
transform: scale(-1, 1) rotate(13deg);
|
||||
opacity: 0.1;
|
||||
|
||||
path {
|
||||
stroke: none;
|
||||
fill: rgba($theme, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -288,26 +288,19 @@
|
||||
.get-started-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
background: rgba($theme, 0.8);
|
||||
padding: 20px 36px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
|
||||
//box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
|
||||
margin-bottom: 395px;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 7px 16px 2px rgba($theme, 0.4);
|
||||
background: rgba($theme, 1);
|
||||
}
|
||||
|
||||
.content {
|
||||
@include font-size(19);
|
||||
font-weight: 700;
|
||||
|
||||
@@ -12,32 +12,32 @@
|
||||
</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<router-link :to="{name: 'ContactUs'}">
|
||||
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.contact_us') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="! config.isAuthenticated" class="navigation-links">
|
||||
<li>
|
||||
<router-link :to="{name: 'SignIn'}">
|
||||
<router-link :to="{name: 'SignIn'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.log_in') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="config.userRegistration">
|
||||
<router-link class="cta-button" :to="{name: 'SignUp'}">
|
||||
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'SignUp'}">
|
||||
{{ $t('page_index.menu.sign_in') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="config.isAuthenticated" class="navigation-links">
|
||||
<li v-if="config.userRegistration">
|
||||
<router-link class="cta-button" :to="{name: 'Files'}">
|
||||
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'Files'}">
|
||||
Go to Files <!--todo: preklad-->
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-link class="cta-button log-in" :to="{name: 'SignIn'}">
|
||||
<router-link class="cta-button log-in text-theme bg-theme-100" :to="{name: 'SignIn'}">
|
||||
{{ $t('page_index.menu.log_in') }}
|
||||
</router-link>
|
||||
</nav>
|
||||
@@ -98,19 +98,13 @@
|
||||
font-weight: 700;
|
||||
@include font-size(17);
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background: rgba($theme, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 8px 23px;
|
||||
color: $theme;
|
||||
@include font-size(17);
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<router-link :to="{name: 'ContactUs'}">
|
||||
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.contact_us') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navigation-links">
|
||||
<li v-if="legal.visibility" v-for="(legal, index) in config.legal" :key="index">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}" class="hover-text-theme">
|
||||
{{ legal.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
@@ -75,10 +75,6 @@
|
||||
font-weight: 700;
|
||||
@include font-size(17);
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,7 +86,6 @@
|
||||
padding-bottom: 20px;
|
||||
|
||||
/deep/ a {
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user