vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Dark cosmetics

pull/4591/head
Cagatay Civici 2023-10-10 14:36:15 +03:00
parent 1c7880882b
commit 35a21f9351
10 changed files with 124 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
assets/styles/layout/landing/_dark.scss
View File

@ -2,60 +2,51 @@
--home-highlight-color:#14B8A6;
--home-highlight-darker-color:#0D9488;
--home-highlight-fore-color:#ffffff;
--home-bg:#030B17;
--home-intro-bg:linear-gradient(180deg, #061730 0%, #030B17 100%);
--home-border-color:#183E71;
--home-bg:#111827;
--home-border-color:#424b57;
--home-primary-text-color:#ffffff;
--home-secondary-text-color:#B6C4D6;
--home-secondary-text-color:rgba(255,255,255,.6);
--home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
--home-box-bg:rgba(11, 33, 63, 0.55);
--home-linkbox-bg:rgba(11, 33, 63, 0.55);
--home-linkbox-border:1px solid #183E71;
--home-box-bg:#1f2937;
--home-linkbox-bg:rgba(255, 255, 255, .1);
--home-linkbox-border:1px solid rgba(255, 255, 255, .2);
--home-linkbox-text-color:#ffffff;
--home-linkbox-hover-bg:rgba(11, 33, 63, 0.9);
--home-header-bg:rgba(11, 33, 63, 0.65);
--home-menu-link-text-color:#ffffff;
--home-menu-link-hover-bg:rgba(11, 33, 63, 0.9);
--home-herobox-bg:#0B213F;
--home-herobox-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
--home-herobox-strip-top-bg:linear-gradient(360deg, rgba(3, 11, 23, 0) 0%, rgba(11, 37, 73, 0.913125) 53.83%, rgba(7, 24, 48, 0) 101.32%);
--home-herobox-strip-bottom-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #0C284E 50%, rgba(3, 11, 23, 0) 100%);
--home-components-strip-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #071934 100%);
--home-blocks-bg:linear-gradient(180deg, #040B17 0%, #061B38 58.33%, #030B17 100%);
--home-blocks-block-bg:#0B213F8C;
--home-linkbox-hover-bg:rgba(255, 255, 255, .2);
--home-blocks-bg:transparent;
--home-blocks-block-bg:#111827;
--home-blocks-block-shadow:0px 4.787564754486084px 10px 0px #0000001A , 0px 4px 25px rgba(0, 0, 0, 0.288);
--home-blocks-border-left:5px solid #0E294D;
--home-blocks-border-bottom:7px solid #0E294D;
--home-blocks-border:1px solid #183E71;
--home-blocks-sidebar-bg:#0D264A;
--home-blocks-list-bg:#0C2242;
--home-blocks-main-bg:#0B213F8C;
--home-blocks-main-border:1px solid #183E71;
--home-blocks-item-bg:#0D264A;
--home-blocks-image-bg:#102F5B;
--home-blocks-text-color:#133667;
--home-blocks-border-left:5px solid #424b57;
--home-blocks-border-bottom:7px solid #424b57;
--home-blocks-border:1px solid #424b57;
--home-blocks-sidebar-bg:#1f2937;
--home-blocks-list-bg:#28323f;
--home-blocks-main-bg:#111827;
--home-blocks-main-border:1px solid #424b57;
--home-blocks-item-bg:#1f2937;
--home-blocks-image-bg:#28323f;
--home-blocks-text-color:rgba(255,255,255,.87);
--home-blocks-active-shadow:0px 30px 50px 0px #00000049;
--home-blocks-active-border-top:1px solid #183E71;
--home-blocks-active-border-right:1px solid #183E71;
--home-blocks-active-border-bottom:6px solid #112d52;
--home-blocks-active-border-left:4px solid #183E71;
--home-blocks-active-border-top:1px solid #424b57;
--home-blocks-active-border-right:1px solid #424b57;
--home-blocks-active-border-bottom:6px solid #424b57;
--home-blocks-active-border-left:4px solid #424b57;
--home-blocks-animation-shadow:0px 30px 50px 20px #00000059;
--home-blocks-tablebar-bg:#194686;
--home-blocks-bar-bg:#15386B;
--home-blocks-bar-button-bg:#0C2E56;
--home-blocks-circle-bg:#15386B;
--home-templates-bg:linear-gradient(180deg,#040b17 0%,#061b38 58.33%,#030b17 100%);
--home-blocks-tablebar-bg:#424b57;
--home-blocks-bar-bg:#0D9488;
--home-blocks-bar-button-bg:#0D9488;
--home-blocks-circle-bg:#0D9488;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px #0000001a;
--home-templates-block-border-left:5px solid rgb(13, 35, 65);
--home-templates-block-border-bottom:7px solid #09182d;
--home-templates-line:linear-gradient(rgba(10, 35, 70, 0),#0e3163 50%,rgba(10, 35, 70, 0));
--home-templates-block-hover-bg:rgba(11, 33, 63, 0.699);
--home-templates-btn-bg:rgb(11, 33, 63);
--home-templates-block-border-left:5px solid #424b57;
--home-templates-block-border-bottom:7px solid #424b57;
--home-templates-line:rgba(255,255,255,.1);
--home-templates-block-hover-bg:rgba(255,255,255,.09);
--home-templates-btn-bg:#1f2937;
--home-templates-btn-text-color:#ffffff;
--home-templates-btn-shadow:0px 10px 15px 0px #00000040;
--home-templates-btn-border-top:1px solid rgb(13, 40, 78);
--home-templates-btn-border-right:1px solid rgb(13, 40, 78);
--home-templates-btn-border-bottom:4px solid rgb(13, 40, 78);
--home-templates-btn-border-left:3px solid rgb(13, 40, 78);
--home-templates-btn-border-top:1px solid #424b57;
--home-templates-btn-border-right:1px solid #424b57;
--home-templates-btn-border-bottom:4px solid #424b57;
--home-templates-btn-border-left:3px solid #424b57;
--home-features-card-shadow: none;
}

9
assets/styles/layout/landing/_light.scss
View File

@ -3,7 +3,6 @@
--home-highlight-darker-color:#0D9488;
--home-highlight-fore-color:#ffffff;
--home-bg:#F9FAFB;
--home-intro-bg:#F9FAFB;
--home-border-color:rgba(0,0,0,.1);
--home-primary-text-color:#191919;
--home-secondary-text-color:#73879E;
@ -13,14 +12,6 @@
--home-linkbox-border:1px solid #C7E0FF;
--home-linkbox-text-color:#191919;
--home-linkbox-hover-bg:#e3f0ff;
--home-header-bg:rgba(255, 255, 255, 0.85);
--home-menu-link-text-color:#191919;
--home-menu-link-hover-bg:#e3f0ff;
--home-herobox-bg:#ffffff;
--home-herobox-shadow:0px 50px 100px rgba(212, 224, 238, 0.25);
--home-herobox-strip-top-bg:linear-gradient(0deg, #F9FAFB 1.9%, #edf0f3 50.44%, #F9FAFB 100%);
--home-herobox-strip-bottom-bg:linear-gradient(90deg, #F9FAFB 1.9%, #edf0f3 50.44%, #F9FAFB 100%);
--home-components-strip-bg:linear-gradient(90deg, #F9FAFB 0.01%, #edf0f3 100%);
--home-blocks-bg:transparent;
--home-blocks-block-bg:#ffffff;
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);

8
assets/styles/layout/landing/_main.scss
View File

@ -3,14 +3,6 @@
scroll-behavior: smooth;
padding-top: 4rem;
.landing-intro {
background: var(--home-intro-bg);
display: flex;
flex-direction: column;
padding-top: 5rem;
min-height: 100vh;
}
.box {
border: 1px solid var(--home-border-color);
border-radius: 10px;

2
pages/landing/DesignerSection.vue
View File

@ -2,7 +2,7 @@
<section class="landing-designer py-8">
<div class="section-header">Theme Designer</div>
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light-gray'}.svg')`, backgroundSize: 'cover' }">
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-gray' : 'light-gray'}.svg')`, backgroundSize: 'cover' }">
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
<div class="text-center mb-4">

2
pages/landing/FeaturesSection.vue
View File

@ -2,7 +2,7 @@
<section class="landing-features py-8">
<div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }">
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt-gray' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }">
<div class="features-container">
<div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">

2
pages/landing/ThemeSection.vue
View File

@ -10,7 +10,7 @@
</div>
<div
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }"
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt-gray' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }"
>
<div class="box overflow-hidden z-1 p-5 table-container">
<DataTable

42
public/themes/lara-dark-blue/theme.css
View File

@ -14,27 +14,27 @@
--text-color-secondary:rgba(255, 255, 255, 0.6);
--primary-color:#93C5FD;
--primary-color-text:#1c2127;
--surface-0: #040d19;
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-0: #111827;
--surface-50: #1f2937;
--surface-100: #374151;
--surface-200: #4b5563;
--surface-300: #6b7280;
--surface-400: #9ca3af;
--surface-500: #d1d5db;
--surface-600: #e5e7eb;
--surface-700: #f3f4f6;
--surface-800: #f9fafb;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #040d19;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--content-padding:1.25rem;
--inline-spacing:0.5rem;
--border-radius:6px;
@ -42,7 +42,7 @@
--surface-section:#111827;
--surface-card:#1f2937;
--surface-overlay:#1f2937;
--surface-border:#374151;
--surface-border:#424b57;
--surface-hover:rgba(255,255,255,.03);
--focus-ring: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
--maskbg: rgba(0, 0, 0, 0.4);

42
public/themes/lara-dark-indigo/theme.css
View File

@ -14,27 +14,27 @@
--text-color-secondary:rgba(255, 255, 255, 0.6);
--primary-color:#A5B4FC;
--primary-color-text:#1c2127;
--surface-0: #040d19;
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-0: #111827;
--surface-50: #1f2937;
--surface-100: #374151;
--surface-200: #4b5563;
--surface-300: #6b7280;
--surface-400: #9ca3af;
--surface-500: #d1d5db;
--surface-600: #e5e7eb;
--surface-700: #f3f4f6;
--surface-800: #f9fafb;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #040d19;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--content-padding:1.25rem;
--inline-spacing:0.5rem;
--border-radius:6px;
@ -42,7 +42,7 @@
--surface-section:#111827;
--surface-card:#1f2937;
--surface-overlay:#1f2937;
--surface-border:#374151;
--surface-border:#424b57;
--surface-hover:rgba(255,255,255,.03);
--focus-ring: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
--maskbg: rgba(0, 0, 0, 0.4);

42
public/themes/lara-dark-purple/theme.css
View File

@ -14,27 +14,27 @@
--text-color-secondary:rgba(255, 255, 255, 0.6);
--primary-color:#C4B5FD;
--primary-color-text:#1c2127;
--surface-0: #040d19;
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-0: #111827;
--surface-50: #1f2937;
--surface-100: #374151;
--surface-200: #4b5563;
--surface-300: #6b7280;
--surface-400: #9ca3af;
--surface-500: #d1d5db;
--surface-600: #e5e7eb;
--surface-700: #f3f4f6;
--surface-800: #f9fafb;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #040d19;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--content-padding:1.25rem;
--inline-spacing:0.5rem;
--border-radius:6px;
@ -42,7 +42,7 @@
--surface-section:#111827;
--surface-card:#1f2937;
--surface-overlay:#1f2937;
--surface-border:#374151;
--surface-border:#424b57;
--surface-hover:rgba(255,255,255,.03);
--focus-ring: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
--maskbg: rgba(0, 0, 0, 0.4);

42
public/themes/lara-dark-teal/theme.css
View File

@ -14,27 +14,27 @@
--text-color-secondary:rgba(255, 255, 255, 0.6);
--primary-color:#5EEAD4;
--primary-color-text:#1c2127;
--surface-0: #040d19;
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
--surface-300: #686e75;
--surface-400: #82868c;
--surface-500: #9b9ea3;
--surface-600: #b4b6ba;
--surface-700: #cdcfd1;
--surface-800: #e6e7e8;
--surface-0: #111827;
--surface-50: #1f2937;
--surface-100: #374151;
--surface-200: #4b5563;
--surface-300: #6b7280;
--surface-400: #9ca3af;
--surface-500: #d1d5db;
--surface-600: #e5e7eb;
--surface-700: #f3f4f6;
--surface-800: #f9fafb;
--surface-900: #ffffff;
--gray-50: #e6e7e8;
--gray-100: #cdcfd1;
--gray-200: #b4b6ba;
--gray-300: #9b9ea3;
--gray-400: #82868c;
--gray-500: #686e75;
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
--gray-900: #040d19;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--content-padding:1.25rem;
--inline-spacing:0.5rem;
--border-radius:6px;
@ -42,7 +42,7 @@
--surface-section:#111827;
--surface-card:#1f2937;
--surface-overlay:#1f2937;
--surface-border:#374151;
--surface-border:#424b57;
--surface-hover:rgba(255,255,255,.03);
--focus-ring: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
--maskbg: rgba(0, 0, 0, 0.4);