Cosmetics on dark theme

pull/345/head
cagataycivici 2020-05-12 16:43:10 +03:00
parent 6553127034
commit c5ceda1a61
10 changed files with 209 additions and 385 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -9,7 +9,6 @@
height: calc(100% - 70px);
transition: transform .3s;
transform: translate3d(550px,0,0);
background-color: #ffffff;
backface-visibility: hidden;
&.layout-config-active {
@ -36,9 +35,9 @@
width: 52px;
height: 52px;
line-height: 52px;
background-color: #41b883;
background-color: var(--primary-color);
text-align: center;
color: #fafafa;
color: var(--primary-color-text);
top: 200px;
left: -51px;
z-index: -1;
@ -58,16 +57,11 @@
transform: rotate(0deg);
transition: transform 1s;
}
&:hover {
background-color: #3aa476;
}
}
}
a {
color: #1976D2;
transition: color .2s;
color: $linkColor;
font-weight: 500;
}
@ -85,18 +79,18 @@
right: 20px;
top: 20px;
z-index: 999;
background-color: #41b783;
background-color: var(--primary-color);
border-radius: 50%;
transition: background-color .2s, box-shadow .2s;
transition: background-color .2s, box-shadow .2s, transform .2s;
i {
color: #ffffff;
color: var(--primary-color-text);
line-height: inherit;
font-size: 16px;
}
&:hover {
background-color: #3aa476;
transform: scale(1.1);
}
&:focus {
@ -126,8 +120,8 @@
.free-themes {
padding: 2em;
color: #495057;
background-color: #ffffff;
color: var(--text-color);
background-color: var(--layer-0);
img {
width: 50px;
@ -186,10 +180,11 @@
img {
width: 100%;
}
a {
color: #2196F3;
transition: box-shadow .2s, transform .2s;
&:hover {
transform: scale(1.1);
}
}
}
}

View File

@ -65,10 +65,10 @@
}
a {
background-color: var(--primary-color-text);
color: var(--primary-color);
border-radius: 3px;
background-color: var(--layer-0);
padding: 2px 4px;
color: var(--text-color);
}
}
}
@ -80,7 +80,8 @@
h3 {
font-weight: 500;
margin: 2rem 0 1rem 0;
font-size: 1.286rem;
font-size: 1.5rem;
color: var(--text-color);
&:first-child,
&.first {
@ -111,10 +112,16 @@
margin-top: 1.5rem;
margin-bottom: 0;
font-size: 1.5rem;
font-weight: 600;
font-weight: 500;
color: var(--text-color);
}
a {
text-decoration: none;
color: $linkColor;
font-weight: 500;
}
p {
font-size: 1rem;
line-height: 1.5;
@ -128,8 +135,8 @@
}
i:not([class~="pi"]) {
background-color: var(--layer-0);
color: var(--primary-color);
background-color: var(--primary-color);
color: var(--primary-color-text);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-style: normal;
font-size: 14px;
@ -154,8 +161,8 @@
border: 0 none;
top: 1px;
a {
color: var(-text-color-secondary);
a, a:visited {
color: var(--text-color-secondary);
text-shadow: none;
height: inherit;
background-color: transparent;
@ -163,6 +170,7 @@
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: background-color .2s;
font-weight: 500;
&:focus {
outline: 0 none;
@ -174,8 +182,8 @@
&.p-highlight a,
&.p-highlight:hover a {
background: transparent;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
color: $linkColor;
border-bottom: 1px solid $linkColor;
}
&:not(.p-highlight):not(.p-disabled):hover a {
@ -188,42 +196,20 @@
background: transparent;
border: 0 none;
a {
background-color: var(--primary-color);
color: var(--primary-color-text);
border-radius: 3px;
padding: 2px 4px;
}
.btn-viewsource {
display: inline-block;
padding: .5rem 1rem;
}
a {
text-decoration: none;
color: $linkColor;
font-weight: 500;
}
}
}
}
&.support {
.support-image {
background-color: var(--text-color-secondary);
padding: 2rem;
color: var(--layer-0);
text-align: left;
.p-md-6:last-child {
text-align: right;
}
h3, p {
color: var(--layer-0);
}
}
li {
line-height: 1.5;
}
}
.doc-table {
border-collapse: collapse;
width: 100%;

View File

@ -10,6 +10,7 @@
}
}
$linkColor: #2196f3;
$focusBorderColor:#BBDEFB;
html {
@ -41,7 +42,6 @@ input[type="number"] {
a {
text-decoration: none;
color: #1976D2;
}
.layout-mask {
@ -144,4 +144,19 @@ pre[class*="language-"] code {
.p-toast.p-toast-topright,
.p-toast.p-toast-topleft {
top: 100px;
}
.action-button {
font-weight: bold;
text-align: center;
color: #ffffff !important;
background-color: #455C71;
padding: 10px 24px 9px 24px;
border-radius: 3px;
transition: background-color .2s;
&:hover {
background-color: #708EA5;
color: #ffffff;
}
}

View File

@ -1,15 +1 @@
/* DESIGNER */
.primevue-designer {
background-color: #ffffff;
padding: 30px;
h3 {
margin: 10px 0 20px 0;
display: block;
text-align: center;
font-size: 24px;
}
img {
width: 100%;
margin-bottom: 30px;
}
}

View File

@ -2,7 +2,7 @@
font-size: 14px;
a {
color: #495057;
color: var(--text-color);
font-weight: 600;
}
}

View File

@ -1,63 +1,33 @@
/* Home Component*/
.home {
p {
line-height: 22px;
line-height: 1.5;
margin-top: 0;
margin-bottom: 2em;
margin-bottom: 2rem;
}
a {
color: #2E86C1;
color: var(--primary-color);
font-weight: 500;
transition: color .2s;
}
.home-button {
font-weight: bold;
text-align: center;
color: #ffffff !important;
background-color: #455C71;
padding: 10px 24px 9px 24px;
border-radius: 3px;
transition: background-color .2s;
&:hover {
background-color: #708EA5;
color: #ffffff;
}
}
.home-button2 {
font-weight: bold;
text-align: center;
color: #8C6816 !important;
background-color: #FFCB54;
padding: 10px 24px 9px 24px;
border-radius: 3px;
transition: background-color .2s;
display: inline-block;
&:hover {
background-color: #E5AF36;
color: #8C6816 !important;
}
}
/* Introduction */
.introduction {
background-color: #1976d2;
background-color: var(--layer-0);
background: url('./assets/images/home/primevue-introduction.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 115px 30px 135px 50px;
color: #455C71;
h1 {
font-weight: normal;
font-weight: 400;
margin-bottom: 5px;
font-size: 24px;
}
h2 {
font-weight: bold;
font-weight: 700;
margin-bottom: 40px;
margin-top: 0;
font-size: 24px;
@ -88,17 +58,16 @@
}
}
/* Features */
.features {
background-color: #f9f9f9;
background-color: var(--layer-1);
text-align: center;
padding: 0 30px 30px 30px;
.feature-card {
background-color: #ffffff;
background-color: var(--layer-0);
box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03);
height: 100%;
border-radius: 4px;
border-radius: 3px;
.feature-card-detail {
padding: 0 16px 16px 16px;
@ -107,7 +76,7 @@
h3 {
font-size:24px;
color: #495057;
color: var(--text-color);
padding: 30px 0 12px 0;
margin: 0;
}
@ -128,27 +97,17 @@
margin-bottom: 2em;
&.features-tagline {
color: #495057;
color: var(--text-color);
margin-bottom: 0;
margin-top: -5px;
margin-bottom: 2em;
}
&.features-description {
color: #495057;
text-align: left;
}
> a {
font-weight: bold;
}
}
}
/* Who Uses */
.whouses {
background-color: #495057;
color: #ffffff;
background-color: #34495E;
color: #eAECEE;
text-align: center;
padding: 30px;
@ -177,14 +136,14 @@
}
.templates {
background-color: #f5f7f8;
background-color: var(--layer-1);
text-align: center;
padding: 30px;
border-bottom: 1px solid #c4c5c6;
border-bottom: 1px solid var(--layer-2);
h3 {
font-size:24px;
color: #495057;
color: var(--text-color);
margin-top: 0;
margin-bottom: 12px;
}
@ -203,11 +162,29 @@
}
}
/* PRO */
.prosupport {
border-bottom: 1px solid #dcdedf;
background-color: #f5f7f8;
.primevue-designer {
background-color: var(--layer-0);
color: var(--text-color);
padding: 30px;
h3 {
margin: 10px 0 20px 0;
display: block;
text-align: center;
font-size: 24px;
}
img {
width: 100%;
margin-bottom: 30px;
}
}
.prosupport {
border-bottom: 1px solid var(--layer-0);
background-color: var(--layer-1);
padding: 30px;
color: var(--text-color);
p {
line-height: 22px;
@ -225,233 +202,10 @@
.p-md-6:last-child {
text-align: center;
}
}
}/* Home Component*/
.home {
p {
line-height: 22px;
margin-top: 0;
margin-bottom: 2em;
}
a {
color: #2E86C1;
font-weight: 500;
transition: color .2s;
}
.home-button {
font-weight: bold;
text-align: center;
color: #ffffff !important;
background-color: #455C71;
padding: 10px 24px 9px 24px;
border-radius: 3px;
transition: background-color .2s;
&:hover {
background-color: #708EA5;
color: #ffffff;
}
}
.home-button2 {
font-weight: bold;
text-align: center;
color: #8C6816 !important;
background-color: #FFCB54;
padding: 10px 24px 9px 24px;
border-radius: 3px;
transition: background-color .2s;
display: inline-block;
&:hover {
background-color: #E5AF36;
color: #8C6816 !important;
}
}
/* Introduction */
.introduction {
background-color: #1976d2;
background: url('./assets/images/home/primevue-introduction.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 115px 30px 135px 50px;
h1 {
font-weight: normal;
margin-bottom: 5px;
font-size: 24px;
}
h2 {
font-weight: bold;
margin-bottom: 40px;
margin-top: 0;
font-size: 24px;
}
> div {
padding: 100px 100px 0 100px;
height: 200px;
}
.introduction-promo {
.action-button {
display: inline-block;
margin-left: -50px;
margin-bottom: 20px;
padding: 10px 50px 10px 175px;
font-size: 1.5em;
background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%);
position: relative;
color: #ffffff;
font-weight: 700;
img {
position: absolute;
height: 75px;
left: 50px;
top: -12px;
}
}
}
/* Features */
.features {
background-color: #f9f9f9;
text-align: center;
padding: 0 30px 30px 30px;
.feature-card {
background-color: #ffffff;
box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03);
height: 100%;
border-radius: 4px;
.feature-card-detail {
padding: 0 16px 16px 16px;
}
}
h3 {
font-size:24px;
color: #495057;
padding: 30px 0 12px 0;
margin: 0;
}
img {
width: 100%;
}
.feature-name {
display: block;
font-weight: bold;
font-size: 16px;
margin-top: 1em;
}
p {
margin-top: 1em;
margin-bottom: 2em;
&.features-tagline {
color: #495057;
margin-bottom: 0;
margin-top: -5px;
margin-bottom: 2em;
}
&.features-description {
color: #495057;
text-align: left;
}
> a {
font-weight: bold;
}
}
}
/* Who Uses */
.whouses {
background-color: #495057;
color: #ffffff;
text-align: center;
padding: 30px;
h3 {
font-size: 24px;
margin-top: 0;
margin-bottom: 12px;
}
img {
height: 30px;
width: 100%;
}
.p-grid > div {
padding: 2em .5em;
}
p {
margin-bottom: 30px;
> a {
font-weight: bold;
}
}
}
.templates {
background-color: #f5f7f8;
text-align: center;
padding: 30px;
border-bottom: 1px solid #c4c5c6;
h3 {
font-size:24px;
color: #495057;
margin-top: 0;
margin-bottom: 12px;
}
h4 {
font-size: 16px;
font-weight: 700;
}
img {
width: 100%;
}
a {
font-weight: bold;
}
}
/* PRO */
.prosupport {
border-bottom: 1px solid #dcdedf;
background-color: #f5f7f8;
padding: 30px;
p {
line-height: 22px;
margin-bottom: 1em;
}
h3 {
font-size: 24px;
}
img {
margin-top: 10px;
}
.p-md-6:last-child {
text-align: center;
margin-top: 1rem;
}
}
}

View File

@ -6,7 +6,7 @@
<h1>The Ultimate UI Component Library</h1>
<h2>for Vue</h2>
<router-link to="/setup" class="home-button">GET STARTED</router-link>
<router-link to="/setup" class="action-button">GET STARTED</router-link>
</div>
<div class="features">
@ -117,7 +117,6 @@
</div>
</div>
<div class="templates">
<h3>Premium Application Templates</h3>
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
@ -195,7 +194,7 @@
<h3>PrimeVue PRO Support</h3>
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
<p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
<a class="home-button2" href="mailto:contact@primetek.com.tr">
<a class="action-button" href="mailto:contact@primetek.com.tr">
Get a Quote
</a>
</div>

View File

@ -3,33 +3,29 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Support</h1>
<span>Professional support for the open source innovation</span>
<p>Professional support for the open source innovation</p>
</div>
</div>
<div class="content-section support documentation">
<div class="content-section documentation">
<h3 style="margin-top:0">Community Support</h3>
<p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.</p>
<h3>Enterprise Support</h3>
<p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
<div class="support-image">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<h3>PrimeVue PRO Support</h3>
<p>With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
<a class="home-button2" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
</div>
<div class="p-col-12 p-md-6">
<img alt="PRO" src="../../assets/images/home/icon-pro-white.svg" />
</div>
<h3>PrimeVue PRO Support</h3>
<div class="pro-section p-grid p-nogutter">
<div class="pro-section-text p-col-12 p-md-8">
<p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
you no longer need to post your questions in the community forum and your issues to community issue tracker.
With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
<a class="action-button" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
</div>
<div class="pro-section-image p-col-12 p-md-4">
<img alt="PRO" src="../../assets/images/home/icon-pro.svg" />
</div>
</div>
<h3>Standard PRO Services</h3>
<ul>
<li>Access to pro.primefaces.org</li>
@ -60,4 +56,31 @@
<p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>
</div>
</div>
</template>
</template>
<style lang="scss" scoped>
/deep/ .pro-section {
display: flex;
margin-top: .75rem;
.pro-section-text {
flex: 1 1 auto;
padding: 0rem 1rem 0 0;
.action-button {
display: inline-block;
margin-top: 1rem;
}
}
.pro-section-image {
text-align: center;
padding: 1rem;
}
}
li {
line-height: 1.5;
}
</style>

View File

@ -38,7 +38,7 @@
<p>PrimeVue utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components
is easy as configuring the font size of your document. Code below sets the scale of the components based on 16px. If you reqire bigger or smaller component, you may
change this variable and components will resize accordingly.</p>
<CodeHighlight lang="css">
html {
font-size: 16px;
@ -65,7 +65,7 @@ html {
.p-panel-titlebar {
background: #212121;
}
}
&lt;/style&gt;
</CodeHighlight>