Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.resources.themes.starpass.styles.css Maven / Gradle / Ivy
StarPass theme package as a re-usable starting point for your own Vaadin theme.
@import "typography.css";
@import "component-styles/badge.css";
@import "component-styles/vaadin-accordion.css";
@import "component-styles/vaadin-app-layout.css";
@import "component-styles/vaadin-avatar.css";
@import "component-styles/vaadin-button.css";
@import "component-styles/vaadin-checkbox.css";
@import "component-styles/vaadin-combo-box.css";
@import "component-styles/vaadin-confirm-dialog.css";
@import "component-styles/vaadin-context-menu.css";
@import "component-styles/vaadin-crud.css";
@import "component-styles/vaadin-custom-field.css";
@import "component-styles/vaadin-date-picker.css";
@import "component-styles/vaadin-date-time-picker.css";
@import "component-styles/vaadin-details.css";
@import "component-styles/vaadin-dialog.css";
@import "component-styles/vaadin-email-field.css";
@import "component-styles/vaadin-grid.css";
@import "component-styles/vaadin-grid-pro.css";
@import "component-styles/vaadin-list-box.css";
@import "component-styles/vaadin-login-form.css";
@import "component-styles/vaadin-menu-bar.css";
@import "component-styles/vaadin-message-input.css";
@import "component-styles/vaadin-message-list.css";
@import "component-styles/vaadin-multi-select-combo-box.css";
@import "component-styles/vaadin-notification.css";
@import "component-styles/vaadin-number-field.css";
@import "component-styles/vaadin-password-field.css";
@import "component-styles/vaadin-progress-bar.css";
@import "component-styles/vaadin-radio-button.css";
@import "component-styles/vaadin-rich-text-editor.css";
@import "component-styles/vaadin-scroller.css";
@import "component-styles/vaadin-select.css";
@import "component-styles/vaadin-tabs.css";
@import "component-styles/vaadin-text-area.css";
@import "component-styles/vaadin-text-field.css";
@import "component-styles/vaadin-time-picker.css";
@import "component-styles/vaadin-tooltip.css";
@import "component-styles/vaadin-tree-grid.css";
@import "component-styles/vaadin-upload.css";
@font-face {
font-family: 'Satoshi';
src: url('./fonts/Satoshi-Variable.woff2') format('woff2');
font-weight: 300 900;
font-display: swap;
font-style: normal;
}
html,
html[theme] {
--primary-h: 226;
--primary-s: 70%;
--primary-l: 50%;
--primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
--lumo-primary-color: var(--primary);
--lumo-primary-color-50pct: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .75);
--lumo-primary-color-10pct: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .13);
--lumo-primary-text-color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 3%));
--primary-alt: hsl(calc(var(--primary-h) - 30) var(--primary-s) var(--primary-l));
--base-l: 100%;
--base: hsl(0 0% var(--base-l) / 1);
--base-trans: hsl(0 0% var(--base-l) / .8);
--main-grad: linear-gradient(to bottom right, var(--base), var(--primary) 50%, var(--primary-alt) 100%);
--bg:
radial-gradient(83% 132% at 76% 20%, transparent 84%, var(--base-trans) 100%),
linear-gradient(var(--base-trans), var(--base-trans)),
radial-gradient(62% 100% at 25% 80%, var(--primary) 0%, transparent 100%),
var(--main-grad);
--blend: color-burn;
background-blend-mode: normal, normal, var(--blend), normal;
background: var(--bg);
--lumo-shade-5pct: hsla(var(--primary-h), 61%, 25%, 0.05);
--lumo-shade-10pct: hsla(var(--primary-h), 57%, 24%, 0.1);
--lumo-shade-20pct: hsla(var(--primary-h), 53%, 23%, 0.16);
--lumo-shade-30pct: hsla(var(--primary-h), 50%, 22%, 0.26);
--lumo-shade-40pct: hsla(var(--primary-h), 47%, 21%, 0.38);
--lumo-shade-50pct: hsla(var(--primary-h), 45%, 20%, 0.52);
--lumo-shade-60pct: hsla(var(--primary-h), 43%, 19%, 0.6);
--lumo-shade-70pct: hsla(var(--primary-h), 42%, 18%, 0.69);
--lumo-shade-80pct: hsla(var(--primary-h), 41%, 17%, 0.83);
--lumo-shade-90pct: hsla(var(--primary-h), 40%, 16%, 0.94);
--lumo-shade: hsl(var(--primary-h), 35%, 15%);
--lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
--vaadin-input-field-background: var(--lumo-contrast-5pct);
--vaadin-input-field-border-width: 1px;
--vaadin-input-field-border-color: var(--lumo-contrast-20pct);
--lumo-border-radius-s: 5px;
--lumo-border-radius-m: 7px;
--lumo-border-radius-l: 12px;
--lumo-icon-size-s: 16px;
--lumo-icon-size-m: 20px;
--lumo-icon-size-l: 24px;
}
html[theme~=dark] {
--base-l: 0%;
--main-grad: linear-gradient(to bottom right, var(--primary-alt), var(--primary) 50%, var(--base) 100%);
--blend: color-dodge;
--lumo-primary-text-color: hsl(var(--primary-h) calc(var(--primary-s) + 30%) calc(var(--primary-l) + 30%));
--lumo-base-color: hsl(var(--primary-h) calc(var(--primary-s) / 6) 10%);
--lumo-shade-5pct: hsla(var(--primary-h), 0%, 0%, 0.07);
--lumo-shade-10pct: hsla(var(--primary-h), 4%, 2%, 0.15);
--lumo-shade-20pct: hsla(var(--primary-h), 8%, 4%, 0.23);
--lumo-shade-30pct: hsla(var(--primary-h), 12%, 6%, 0.32);
--lumo-shade-40pct: hsla(var(--primary-h), 16%, 8%, 0.41);
--lumo-shade-50pct: hsla(var(--primary-h), 20%, 10%, 0.5);
--lumo-shade-60pct: hsla(var(--primary-h), 24%, 12%, 0.6);
--lumo-shade-70pct: hsla(var(--primary-h), 28%, 13%, 0.7);
--lumo-shade-80pct: hsla(var(--primary-h), 32%, 13%, 0.8);
--lumo-shade-90pct: hsla(var(--primary-h), 33%, 13%, 0.9);
--lumo-shade: hsl(var(--primary-h), 33%, 13%);
--lumo-tint-5pct: hsla(var(--primary-h), 65%, 85%, 0.06);
--lumo-tint-10pct: hsla(var(--primary-h), 60%, 80%, 0.14);
--lumo-tint-20pct: hsla(var(--primary-h), 64%, 82%, 0.23);
--lumo-tint-30pct: hsla(var(--primary-h), 69%, 84%, 0.32);
--lumo-tint-40pct: hsla(var(--primary-h), 73%, 86%, 0.41);
--lumo-tint-50pct: hsla(var(--primary-h), 78%, 88%, 0.5);
--lumo-tint-60pct: hsla(var(--primary-h), 82%, 90%, 0.58);
--lumo-tint-70pct: hsla(var(--primary-h), 87%, 92%, 0.69);
--lumo-tint-80pct: hsla(var(--primary-h), 91%, 94%, 0.8);
--lumo-tint-90pct: hsla(var(--primary-h), 96%, 96%, 0.9);
--lumo-tint: hsl(var(--primary-h), 100%, 98%);
}
#outlet {
display: flex;
perspective: 1000px;;
}
:not(vaadin-button)::part(label) {
color: var(--lumo-body-text-color);
}
:not(vaadin-button)[focused]::part(label) {
color: var(--lumo-header-text-color);
}
vaadin-button {
font-weight: 600;
}
vaadin-button[theme~=primary] {
font-weight: 700;
}
vaadin-grid {
background-color: transparent;
}
vaadin-grid::part(body-cell) {
background-color: transparent;
}
vaadin-grid::part(header-cell) {
background-color: var(--lumo-tint-10pct);
}
::part(overlay) {
background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.9), transparent 50%), hsl(0 0% 98% / 0.7);
background-origin: border-box;
box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06), 0 0 0 1px hsl(0 0% 0% / 0.06), var(--lumo-box-shadow-l);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
[theme~=dark] ::part(overlay) {
background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.05), transparent 50%), hsl(var(--primary-h) calc(var(--primary-s) / 5) 20% / 0.5);
background-origin: border-box;
}
vaadin-item::part(content),
vaadin-menu-bar-item::part(content) {
display: flex;
align-items: center;
gap: var(--lumo-space-s);
font-weight: 500;
}
vaadin-select.minimal {
--vaadin-input-field-border-width: 0px;
--vaadin-input-field-background: transparent;
}
vaadin-drawer-toggle {
color: var(--lumo-tertiary-text-color);
}
vaadin-menu-bar.icon-only vaadin-menu-bar-item > :not(vaadin-icon) {
display: none;
}
vaadin-tooltip-overlay::part(overlay) {
font-weight: 500;
}
