Cosmetics on dark theme
cagataycivici
parent
6553127034
commit
c5ceda1a61
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 22 KiB |
|
|
@ -9,7 +9,6 @@
|
||||||
height: calc(100% - 70px);
|
height: calc(100% - 70px);
|
||||||
transition: transform .3s;
|
transition: transform .3s;
|
||||||
transform: translate3d(550px,0,0);
|
transform: translate3d(550px,0,0);
|
||||||
background-color: #ffffff;
|
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
||||||
&.layout-config-active {
|
&.layout-config-active {
|
||||||
|
|
@ -36,9 +35,9 @@
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
background-color: #41b883;
|
background-color: var(--primary-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fafafa;
|
color: var(--primary-color-text);
|
||||||
top: 200px;
|
top: 200px;
|
||||||
left: -51px;
|
left: -51px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
|
@ -58,16 +57,11 @@
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
transition: transform 1s;
|
transition: transform 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #3aa476;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #1976D2;
|
color: $linkColor;
|
||||||
transition: color .2s;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -85,18 +79,18 @@
|
||||||
right: 20px;
|
right: 20px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
background-color: #41b783;
|
background-color: var(--primary-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: background-color .2s, box-shadow .2s;
|
transition: background-color .2s, box-shadow .2s, transform .2s;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: #ffffff;
|
color: var(--primary-color-text);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #3aa476;
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -126,8 +120,8 @@
|
||||||
|
|
||||||
.free-themes {
|
.free-themes {
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
color: #495057;
|
color: var(--text-color);
|
||||||
background-color: #ffffff;
|
background-color: var(--layer-0);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
@ -186,10 +180,11 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
transition: box-shadow .2s, transform .2s;
|
||||||
|
|
||||||
a {
|
&:hover {
|
||||||
color: #2196F3;
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -65,10 +65,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
background-color: var(--primary-color-text);
|
||||||
|
color: var(--primary-color);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: var(--layer-0);
|
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
color: var(--text-color);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -80,7 +80,8 @@
|
||||||
h3 {
|
h3 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 2rem 0 1rem 0;
|
margin: 2rem 0 1rem 0;
|
||||||
font-size: 1.286rem;
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
|
||||||
&:first-child,
|
&:first-child,
|
||||||
&.first {
|
&.first {
|
||||||
|
|
@ -111,10 +112,16 @@
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $linkColor;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -128,8 +135,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
i:not([class~="pi"]) {
|
i:not([class~="pi"]) {
|
||||||
background-color: var(--layer-0);
|
background-color: var(--primary-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color-text);
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -154,8 +161,8 @@
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
|
|
||||||
a {
|
a, a:visited {
|
||||||
color: var(-text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -163,6 +170,7 @@
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
transition: background-color .2s;
|
transition: background-color .2s;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0 none;
|
outline: 0 none;
|
||||||
|
|
@ -174,8 +182,8 @@
|
||||||
&.p-highlight a,
|
&.p-highlight a,
|
||||||
&.p-highlight:hover a {
|
&.p-highlight:hover a {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--primary-color);
|
color: $linkColor;
|
||||||
border-bottom: 1px solid var(--primary-color);
|
border-bottom: 1px solid $linkColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.p-highlight):not(.p-disabled):hover a {
|
&:not(.p-highlight):not(.p-disabled):hover a {
|
||||||
|
|
@ -188,39 +196,17 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: var(--primary-color-text);
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 2px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-viewsource {
|
.btn-viewsource {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.support {
|
a {
|
||||||
.support-image {
|
text-decoration: none;
|
||||||
background-color: var(--text-color-secondary);
|
color: $linkColor;
|
||||||
padding: 2rem;
|
font-weight: 500;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$linkColor: #2196f3;
|
||||||
$focusBorderColor:#BBDEFB;
|
$focusBorderColor:#BBDEFB;
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
@ -41,7 +42,6 @@ input[type="number"] {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #1976D2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mask {
|
.layout-mask {
|
||||||
|
|
@ -145,3 +145,18 @@ pre[class*="language-"] code {
|
||||||
.p-toast.p-toast-topleft {
|
.p-toast.p-toast-topleft {
|
||||||
top: 100px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1 @@
|
||||||
/* DESIGNER */
|
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #495057;
|
color: var(--text-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,63 +1,33 @@
|
||||||
/* Home Component*/
|
/* Home Component*/
|
||||||
.home {
|
.home {
|
||||||
p {
|
p {
|
||||||
line-height: 22px;
|
line-height: 1.5;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #2E86C1;
|
color: var(--primary-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: color .2s;
|
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 {
|
.introduction {
|
||||||
background-color: #1976d2;
|
background-color: var(--layer-0);
|
||||||
background: url('./assets/images/home/primevue-introduction.jpg');
|
background: url('./assets/images/home/primevue-introduction.jpg');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding: 115px 30px 135px 50px;
|
padding: 115px 30px 135px 50px;
|
||||||
|
color: #455C71;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-weight: bold;
|
font-weight: 700;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
@ -88,17 +58,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Features */
|
|
||||||
.features {
|
.features {
|
||||||
background-color: #f9f9f9;
|
background-color: var(--layer-1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 30px 30px 30px;
|
padding: 0 30px 30px 30px;
|
||||||
|
|
||||||
.feature-card {
|
.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);
|
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%;
|
height: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 3px;
|
||||||
|
|
||||||
.feature-card-detail {
|
.feature-card-detail {
|
||||||
padding: 0 16px 16px 16px;
|
padding: 0 16px 16px 16px;
|
||||||
|
|
@ -107,7 +76,7 @@
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size:24px;
|
font-size:24px;
|
||||||
color: #495057;
|
color: var(--text-color);
|
||||||
padding: 30px 0 12px 0;
|
padding: 30px 0 12px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -128,27 +97,17 @@
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
|
|
||||||
&.features-tagline {
|
&.features-tagline {
|
||||||
color: #495057;
|
color: var(--text-color);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.features-description {
|
|
||||||
color: #495057;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Who Uses */
|
|
||||||
.whouses {
|
.whouses {
|
||||||
background-color: #495057;
|
background-color: #34495E;
|
||||||
color: #ffffff;
|
color: #eAECEE;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
|
||||||
|
|
@ -177,14 +136,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.templates {
|
.templates {
|
||||||
background-color: #f5f7f8;
|
background-color: var(--layer-1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-bottom: 1px solid #c4c5c6;
|
border-bottom: 1px solid var(--layer-2);
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size:24px;
|
font-size:24px;
|
||||||
color: #495057;
|
color: var(--text-color);
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
@ -203,239 +162,29 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* PRO */
|
.primevue-designer {
|
||||||
.prosupport {
|
background-color: var(--layer-0);
|
||||||
border-bottom: 1px solid #dcdedf;
|
color: var(--text-color);
|
||||||
background-color: #f5f7f8;
|
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 22px;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 24px;
|
margin: 10px 0 20px 0;
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
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;
|
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;
|
text-align: center;
|
||||||
padding: 30px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.p-grid > div {
|
|
||||||
padding: 2em .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 30px;
|
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 {
|
.prosupport {
|
||||||
border-bottom: 1px solid #dcdedf;
|
border-bottom: 1px solid var(--layer-0);
|
||||||
background-color: #f5f7f8;
|
background-color: var(--layer-1);
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
color: var(--text-color);
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
|
|
@ -453,5 +202,10 @@
|
||||||
.p-md-6:last-child {
|
.p-md-6:last-child {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<h1>The Ultimate UI Component Library</h1>
|
<h1>The Ultimate UI Component Library</h1>
|
||||||
<h2>for Vue</h2>
|
<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>
|
||||||
|
|
||||||
<div class="features">
|
<div class="features">
|
||||||
|
|
@ -117,7 +117,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="templates">
|
<div class="templates">
|
||||||
|
|
||||||
<h3>Premium Application Templates</h3>
|
<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>
|
<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>
|
<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>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>
|
<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
|
Get a Quote
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,32 +3,28 @@
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Support</h1>
|
<h1>Support</h1>
|
||||||
<span>Professional support for the open source innovation</span>
|
<p>Professional support for the open source innovation</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section support documentation">
|
<div class="content-section documentation">
|
||||||
<h3 style="margin-top:0">Community Support</h3>
|
<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
|
<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>
|
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>
|
<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>
|
<div class="pro-section p-grid p-nogutter">
|
||||||
<a class="home-button2" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
|
<div class="pro-section-text p-col-12 p-md-8">
|
||||||
</div>
|
<p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
|
||||||
<div class="p-col-12 p-md-6">
|
you no longer need to post your questions in the community forum and your issues to community issue tracker.
|
||||||
<img alt="PRO" src="../../assets/images/home/icon-pro-white.svg" />
|
With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
|
||||||
</div>
|
<a class="action-button" href="mailto:primevue@primetek.com.tr">GET A QUOTE</a>
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
<h3>Standard PRO Services</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -61,3 +57,30 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
Loading…
Reference in New Issue