update to Tabler v1.5.1

This commit is contained in:
JACS 2026-09-12 23:29:45 -05:00
parent 58bd5490e2
commit 0e6063f421
426 changed files with 57276 additions and 16205 deletions

View file

@ -10,6 +10,10 @@
* @param {Color} $color - The base color to be made transparent.
* @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
* @return {Color} - The resulting color with the specified transparency.
*
* Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
* over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
* the same result in every color space.
*/
.body-marketing {
--tblr-body-font-size: 1rem;
@ -21,15 +25,15 @@
}
.hero {
text-align: center;
padding: 6.5rem 0;
text-align: center;
}
.hero-title {
font-size: 3rem;
font-weight: var(--tblr-font-weight-black);
letter-spacing: -0.04em;
font-weight: var(--tblr-font-weight-bold);
line-height: 1.2;
letter-spacing: -0.04em;
}
@media (max-width: 767.98px) {
.hero-title {
@ -38,11 +42,11 @@
}
.hero-description {
color: var(--tblr-secondary);
max-width: 45rem;
margin: 0 auto;
font-size: var(--tblr-font-size-h2);
line-height: 1.5;
margin: 0 auto;
max-width: 45rem;
color: var(--tblr-secondary);
}
@media (max-width: 575.98px) {
.hero-description {
@ -64,60 +68,38 @@
margin-bottom: 0.5rem;
}
.hero-img {
margin: 4rem auto;
max-width: 65rem;
border-radius: 8px;
}
@supports (corner-shape: squircle) {
.hero-img {
corner-shape: squircle;
border-radius: calc(8px * 2.5) !important;
}
}
.hero-img {
position: relative;
z-index: 1;
max-width: 65rem;
margin: 4rem auto;
border-radius: 8px;
}
.hero-img img,
.hero-img svg {
position: relative;
display: block;
max-width: 100%;
height: auto;
display: block;
position: relative;
}
.browser {
border-radius: var(--tblr-border-radius-lg);
}
@supports (corner-shape: squircle) {
.browser {
corner-shape: squircle;
border-radius: calc(var(--tblr-border-radius-lg) * 2.5) !important;
}
}
.browser {
box-shadow: 0 0 0 1px var(--tblr-border-color);
background: var(--tblr-bg-surface-secondary);
overflow: hidden;
background: var(--tblr-bg-surface-secondary);
box-shadow: 0 0 0 1px var(--tblr-border-color);
}
.browser-header {
padding: 0.25rem 1rem;
background: var(--tblr-border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
background: var(--tblr-bg-surface-tertiary) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
border-bottom: 1px solid var(--tblr-border-color);
border-radius: calc(var(--tblr-border-radius-lg) - 1px) calc(var(--tblr-border-radius-lg) - 1px) 0 0;
}
@supports (corner-shape: squircle) {
.browser-header {
corner-shape: squircle;
border-radius: calc(calc(var(--tblr-border-radius-lg) - 1px) calc(var(--tblr-border-radius-lg) - 1px) 0 0 * 2.5) !important;
}
}
.browser-dots {
margin-inline-end: 3rem;
display: flex;
margin-inline-end: 3rem;
}
.browser-dots-colored .browser-dot:nth-child(1) {
@ -131,45 +113,29 @@
}
.browser-dot {
margin-inline-end: 0.5rem;
width: 0.75rem;
min-width: 0.75rem;
height: 0.75rem;
margin-inline-end: 0.5rem;
background: var(--tblr-border-color);
border-radius: var(--tblr-border-radius-circle);
}
@supports (corner-shape: squircle) {
.browser-dot {
corner-shape: squircle;
border-radius: calc(var(--tblr-border-radius-circle) * 2.5) !important;
}
}
.browser-dot {
border: 1px solid var(--tblr-border-color-dark);
border: 1px solid var(--tblr-border-active-color);
border-radius: var(--tblr-border-radius-pill);
}
.browser-input {
flex: 1;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0.25rem;
color: var(--tblr-secondary);
font-size: var(--tblr-font-size-h5);
border-radius: var(--tblr-border-radius);
}
@supports (corner-shape: squircle) {
.browser-input {
corner-shape: squircle;
border-radius: calc(var(--tblr-border-radius) * 2.5) !important;
}
}
.browser-input {
line-height: 1;
color: var(--tblr-secondary);
text-decoration: none;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, var(--tblr-bg-surface), var(--tblr-bg-surface-secondary));
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border-radius: var(--tblr-border-radius);
}
.browser-input:hover {
text-decoration: none;
@ -201,9 +167,9 @@
}
.section {
--section-bg: transparent;
background: var(--section-bg);
position: relative;
padding: 5rem 0;
background: var(--section-bg);
}
.section-sm {
@ -220,18 +186,18 @@
.section-primary {
--section-bg: var(--tblr-primary);
color: #ffffff;
color: #fff;
}
.section-dark {
--section-bg: var(--tblr-dark);
color: #ffffff;
color: #fff;
}
.section-header {
text-align: center;
max-width: 45rem;
margin: 0 auto 5rem;
text-align: center;
}
.section-sm .section-header {
margin-bottom: 4rem;
@ -248,18 +214,18 @@
}
.section-description {
color: var(--tblr-secondary);
margin-top: 1rem;
font-size: var(--tblr-font-size-h3);
line-height: var(--tblr-line-height-h3);
margin-top: 1rem;
color: var(--tblr-secondary);
}
.section-divider {
position: absolute;
bottom: 100%;
pointer-events: none;
height: 5rem;
width: 100%;
height: 5rem;
pointer-events: none;
}
.section-divider path {
fill: var(--section-bg);
@ -269,13 +235,13 @@
animation-delay: -2s;
}
.section-divider .wave-2 {
animation: move-forever2 24s linear infinite;
opacity: 0.5;
animation: move-forever2 24s linear infinite;
animation-delay: -2s;
}
.section-divider .wave-3 {
animation: move-forever3 18s linear infinite;
opacity: 0.3;
animation: move-forever3 18s linear infinite;
animation-delay: -2s;
}
@ -286,8 +252,8 @@
.pricing {
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: center;
margin: 0 auto;
}
@media (min-width: 768px) {
.pricing {
@ -296,52 +262,34 @@
}
.pricing-card {
flex: 1;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background: var(--tblr-bg-surface);
border: 1px solid var(--tblr-gray-200);
padding: 2rem;
margin: 0 0 1rem;
position: relative;
box-shadow: var(--tblr-shadow-card);
text-align: center;
background: var(--tblr-bg-surface);
border: 1px solid var(--tblr-gray-200);
box-shadow: var(--tblr-shadow-card);
border-radius: 8px;
}
@supports (corner-shape: squircle) {
.pricing-card {
corner-shape: squircle;
border-radius: calc(8px * 2.5) !important;
}
}
@media (min-width: 768px) {
.pricing-card {
margin: 1rem -1px;
max-width: 22rem;
margin: 1rem -1px;
}
.pricing-card:first-child {
border-radius: 8px 0 0 8px;
}
@supports (corner-shape: squircle) {
.pricing-card:first-child {
corner-shape: squircle;
border-radius: calc(8px 0 0 8px * 2.5) !important;
}
}
.pricing-card:last-child {
border-radius: 0 8px 8px 0;
}
@supports (corner-shape: squircle) {
.pricing-card:last-child {
corner-shape: squircle;
border-radius: calc(0 8px 8px 0 * 2.5) !important;
}
}
}
.pricing-card.featured {
z-index: 1;
border: 2px solid var(--tblr-primary);
order: -1;
border: 2px solid var(--tblr-primary);
}
@media (min-width: 768px) {
.pricing-card.featured {
@ -351,12 +299,6 @@
box-shadow: var(--tblr-shadow-card);
border-radius: 8px;
}
@supports (corner-shape: squircle) {
.pricing-card.featured {
corner-shape: squircle;
border-radius: calc(8px * 2.5) !important;
}
}
}
.pricing-title {
@ -366,51 +308,51 @@
.pricing-label {
position: absolute;
top: 0;
inset-inline-start: 0;
transform: translateY(-50%);
vertical-align: bottom;
inset-inline-end: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
vertical-align: bottom;
transform: translateY(-50%);
}
.pricing-btn {
margin-top: auto;
padding-top: 2rem;
margin-top: auto;
}
.pricing-price {
display: flex;
justify-content: center;
font-size: 2.5rem;
line-height: 1;
font-weight: 600;
margin: 0.75rem 0;
font-size: 2.5rem;
font-weight: 600;
line-height: 1;
}
.pricing-price-currency {
font-size: 1.25rem;
line-height: 1.5;
margin-inline-end: 0.25rem;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
}
.pricing-price-description {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
color: #6b7280;
align-self: center;
margin-inline-start: 0.5rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
color: oklch(55.1% 0.0234 264.36deg);
}
.pricing-features {
margin: 1rem 0 0;
padding: 0;
list-style: none;
margin: 1rem 0 0;
text-align: start;
list-style: none;
}
.pricing-features > li:not(:first-child) {
margin-top: 0.25rem;
@ -420,22 +362,14 @@
--tblr-shape-size: 2.5rem;
--tblr-shape-icon-size: 1.5rem;
--tblr-shape-border-radius: 35%;
background-color: var(--tblr-primary-lt);
color: var(--tblr-primary);
border-radius: var(--tblr-shape-border-radius);
}
@supports (corner-shape: squircle) {
.shape {
corner-shape: squircle;
border-radius: calc(var(--tblr-shape-border-radius) * 2.5) !important;
}
}
.shape {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--tblr-shape-size);
width: var(--tblr-shape-size);
height: var(--tblr-shape-size);
color: var(--tblr-primary);
background-color: var(--tblr-primary-lt);
border-radius: var(--tblr-shape-border-radius);
}
.shape .icon {
width: var(--tblr-shape-icon-size);
@ -478,83 +412,83 @@
}
.shape-blue {
background: var(--tblr-blue-lt);
color: var(--tblr-blue);
background: var(--tblr-blue-lt);
}
.shape-azure {
background: var(--tblr-azure-lt);
color: var(--tblr-azure);
background: var(--tblr-azure-lt);
}
.shape-indigo {
background: var(--tblr-indigo-lt);
color: var(--tblr-indigo);
background: var(--tblr-indigo-lt);
}
.shape-purple {
background: var(--tblr-purple-lt);
color: var(--tblr-purple);
background: var(--tblr-purple-lt);
}
.shape-pink {
background: var(--tblr-pink-lt);
color: var(--tblr-pink);
background: var(--tblr-pink-lt);
}
.shape-red {
background: var(--tblr-red-lt);
color: var(--tblr-red);
background: var(--tblr-red-lt);
}
.shape-orange {
background: var(--tblr-orange-lt);
color: var(--tblr-orange);
background: var(--tblr-orange-lt);
}
.shape-yellow {
background: var(--tblr-yellow-lt);
color: var(--tblr-yellow);
background: var(--tblr-yellow-lt);
}
.shape-lime {
background: var(--tblr-lime-lt);
color: var(--tblr-lime);
background: var(--tblr-lime-lt);
}
.shape-green {
background: var(--tblr-green-lt);
color: var(--tblr-green);
background: var(--tblr-green-lt);
}
.shape-teal {
background: var(--tblr-teal-lt);
color: var(--tblr-teal);
background: var(--tblr-teal-lt);
}
.shape-cyan {
background: var(--tblr-cyan-lt);
color: var(--tblr-cyan);
background: var(--tblr-cyan-lt);
}
.shape-black {
background: var(--tblr-black-lt);
color: var(--tblr-black);
background: var(--tblr-black-lt);
}
.shape-white {
background: var(--tblr-white-lt);
color: var(--tblr-white);
background: var(--tblr-white-lt);
}
.shape-gray {
background: var(--tblr-gray-lt);
color: var(--tblr-gray);
background: var(--tblr-gray-lt);
}
.shape-gray-dark {
background: var(--tblr-gray-dark-lt);
color: var(--tblr-gray-dark);
background: var(--tblr-gray-dark-lt);
}
.m-7 {
@ -1326,32 +1260,26 @@
}
.column-gap-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
@ -2081,27 +2009,21 @@
row-gap: 8rem !important;
}
.column-gap-sm-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-sm-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-sm-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-sm-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-sm-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-sm-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
.gx-sm-7 {
@ -2749,27 +2671,21 @@
row-gap: 8rem !important;
}
.column-gap-md-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-md-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-md-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-md-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-md-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-md-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
.gx-md-7 {
@ -3417,27 +3333,21 @@
row-gap: 8rem !important;
}
.column-gap-lg-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-lg-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-lg-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-lg-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-lg-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-lg-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
.gx-lg-7 {
@ -4085,27 +3995,21 @@
row-gap: 8rem !important;
}
.column-gap-xl-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-xl-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-xl-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-xl-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-xl-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-xl-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
.gx-xl-7 {
@ -4753,27 +4657,21 @@
row-gap: 8rem !important;
}
.column-gap-xxl-7 {
-moz-column-gap: 3rem !important;
column-gap: 3rem !important;
}
.column-gap-xxl-8 {
-moz-column-gap: 4rem !important;
column-gap: 4rem !important;
}
.column-gap-xxl-9 {
-moz-column-gap: 5rem !important;
column-gap: 5rem !important;
}
.column-gap-xxl-10 {
-moz-column-gap: 6rem !important;
column-gap: 6rem !important;
}
.column-gap-xxl-11 {
-moz-column-gap: 7rem !important;
column-gap: 7rem !important;
}
.column-gap-xxl-12 {
-moz-column-gap: 8rem !important;
column-gap: 8rem !important;
}
.gx-xxl-7 {