mirror of
https://github.com/photoprism/photoprism.git
synced 2026-07-17 16:49:04 +00:00
f928844a40
- Centralize sidebar/PhotoSwipe caption link styling via new `.text-html`
class in `text.css`; drops the previous `info`-token overload.
- Swap lightbox `surface-variant` ↔ `on-surface-variant` so Vuetify
tooltips render dark natively (remove `.v-tooltip` override). Lift
`on-surface` to `#f9fafb`, `primary` to `#F2F3F3`, `highlight` to
`#424041`.
- Add cross-theme `add` color token to `ui.js` (dark `#3a6e73`, light
`#cce3de`); register `add` and `remove` in Vuetify color variations.
- Rename chip-selector classes from color-named to action-named
(`chip--add` / `chip--remove` / `chip--default` plus `--mixed` partial
variants); double selectors (`.chip.chip--*`) to win over the UA
`[role="button"] { color: inherit }` reset.
- Tune `remove` saturation in `ui.js`, `default`, and `lavender` themes.
- Bind face-marker chrome in `meta.css` to theme tokens: default rect +
removing rect → `on-surface` / `remove`; Cancel pill → `button`;
Remove pill → `remove`; pill text → `on-surface`.
- Remove the hardcoded `menuBgColor` literal in `lightbox.vue` and the
redundant `.meta-caption a:hover` rule in `lightbox.css`.
- Update chip-selector vitest for renamed classes; Prettier auto-format
in `views.css` and `vuetify.css`.
215 lines
3.4 KiB
CSS
215 lines
3.4 KiB
CSS
/* Text Styles */
|
|
|
|
.text-h1,
|
|
.text-h2,
|
|
.text-h3,
|
|
.text-h4,
|
|
.text-h5,
|
|
.text-h6,
|
|
.text-button,
|
|
.text-overline {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.text-body-1,
|
|
.text-body-2,
|
|
.text-subtitle-1,
|
|
.text-subtitle-2,
|
|
.text-caption {
|
|
/* Use the system fonts defined in root.css for faster rendering and a native look */
|
|
font-family: inherit;
|
|
letter-spacing: normal !important;
|
|
line-height: normal;
|
|
text-justify: inter-word;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: "kern", "liga";
|
|
}
|
|
|
|
.text-body-3,
|
|
.text-subtitle-3 {
|
|
font-size: 0.8125rem;
|
|
letter-spacing: normal;
|
|
line-height: normal;
|
|
}
|
|
|
|
.text-body-3 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.text-subtitle-3 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.text-flex {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.text-flex > * {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.text-flex > i,
|
|
.text-flex > .v-icon {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.text-ltr {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
.text-rtl {
|
|
direction: rtl !important;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.text-columns {
|
|
column-count: 2;
|
|
column-gap: 2em;
|
|
orphans: 3;
|
|
widows: 0;
|
|
}
|
|
}
|
|
|
|
.caption.filename {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.text-break,
|
|
.break-word,
|
|
.v-datatable td,
|
|
.v-card button,
|
|
.v-card .caption {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
}
|
|
|
|
.text-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
.text-monospace {
|
|
font-family: var(--v-font-family-mono);
|
|
}
|
|
|
|
.text-monospace {
|
|
white-space: pre;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.425;
|
|
letter-spacing: 0.0178571429em;
|
|
}
|
|
|
|
/* Headings */
|
|
|
|
.p-page h2 {
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
letter-spacing: normal;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.p-page h3,
|
|
.p-page h4 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.75;
|
|
letter-spacing: normal;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
|
|
.p-page p,
|
|
.p-help-websockets p,
|
|
.p-page li {
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
margin-bottom: 0.85rem;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Links */
|
|
|
|
.text-link,
|
|
p a.text-link {
|
|
color: rgb(var(--v-theme-primary, #ffffff));
|
|
}
|
|
|
|
.text-html a,
|
|
.pswp__dynamic-caption a,
|
|
.p-page a,
|
|
.p-page footer .text-link,
|
|
.p-page footer .body-link {
|
|
color: rgb(var(--v-theme-on-surface, #ffffff));
|
|
}
|
|
|
|
.text-html a,
|
|
.pswp__dynamic-caption a {
|
|
text-decoration-thickness: 1px;
|
|
text-decoration: underline;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
overflow-wrap: normal;
|
|
word-wrap: normal;
|
|
text-align: start;
|
|
text-overflow: ellipsis;
|
|
hyphens: auto;
|
|
pointer-events: auto;
|
|
touch-action: auto;
|
|
}
|
|
|
|
.text-html a:hover,
|
|
.pswp__dynamic-caption a:hover,
|
|
.text-link,
|
|
p a.text-link,
|
|
.p-page a,
|
|
.p-page footer .text-link,
|
|
.p-page footer .body-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Custom Line Heights */
|
|
|
|
.lh-15 {
|
|
line-height: 1.5rem !important;
|
|
}
|
|
|
|
.lh-16 {
|
|
line-height: 1.6rem !important;
|
|
}
|
|
|
|
.lh-17 {
|
|
line-height: 1.7rem !important;
|
|
}
|
|
|
|
.lh-18 {
|
|
line-height: 1.8rem !important;
|
|
}
|
|
|
|
.lh-19 {
|
|
line-height: 1.9rem !important;
|
|
}
|
|
|
|
.lh-20 {
|
|
line-height: 2rem !important;
|
|
}
|