custom color theme part 1

This commit is contained in:
Peter Papp
2021-03-20 10:25:10 +01:00
parent aa51484303
commit cff7cd6b32
44 changed files with 994 additions and 417 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}
}