mirror of
https://github.com/photoprism/photoprism.git
synced 2026-01-23 02:24:24 +00:00
CSS: Use variables to define app fonts, refactor text and splash styles
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer
parent
7989b88299
commit
9661742972
8 changed files with 165 additions and 177 deletions
|
|
@ -25,8 +25,8 @@ Additional information can be found in our Developer Guide:
|
|||
|
||||
@import url("../../node_modules/photoswipe/dist/photoswipe.css");
|
||||
@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
|
||||
@import url("root.css");
|
||||
@import url("splash.css");
|
||||
@import url("body.css");
|
||||
@import url("text.css");
|
||||
@import url("lightbox.css");
|
||||
@import url("controls.css");
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
/* Browser Scrollbar, see https://css-tricks.com/custom-scrollbars-in-webkit/#aa-the-different-pieces */
|
||||
|
||||
#p-navigation ::-webkit-scrollbar {
|
||||
/* Hides scrollbar in sidebar navigation to save space */
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles for Mozilla Firefox: */
|
||||
|
||||
body.firefox.dark-theme {
|
||||
scrollbar-color: dark !important;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles for Google Chrome (and compatible browsers): */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
::-webkit-scrollbar {
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(var(--v-theme-secondary), 0.2);
|
||||
border: solid transparent;
|
||||
border-width: 0 0 0 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--v-theme-on-surface), 0.28);
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--v-theme-secondary), 0.56);
|
||||
border-width: 1px;
|
||||
border-radius: 6px;
|
||||
min-height: 28px;
|
||||
padding: 100px 0 0;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
display: block;
|
||||
text-align: left;
|
||||
font-size: 0.825rem;
|
||||
font-family: monospace;
|
||||
font-family: var(--v-font-family-mono);
|
||||
white-space: normal;
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
padding: 4px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#p-navigation ::-webkit-scrollbar {
|
||||
/* Hides scrollbar in sidebar navigation to save space */
|
||||
/* see https://css-tricks.com/custom-scrollbars-in-webkit/#aa-the-different-pieces */
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
nav .v-list__item__title.title {
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
|
|
|||
114
frontend/src/css/root.css
Normal file
114
frontend/src/css/root.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
:root {
|
||||
--v-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
|
||||
--v-font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
|
||||
}
|
||||
|
||||
/* HTML Body: Fonts, Color Schemes, Loading, and Scrollbar Styles */
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
body #app {
|
||||
/* Use the system fonts defined above for faster rendering and a native look */
|
||||
font-family: var(--v-font-family);
|
||||
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";
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333333;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
[data-color-mode="light"][data-light-theme*="dark"],
|
||||
[data-color-mode="dark"][data-dark-theme*="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-color-mode="light"][data-light-theme*="light"],
|
||||
[data-color-mode="dark"][data-dark-theme*="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
|
||||
html.loading {
|
||||
overflow-y: hidden !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
html.hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body.nojs::-webkit-scrollbar,
|
||||
body.hide-scrollbar::-webkit-scrollbar,
|
||||
html.hide-scrollbar ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
body.nojs,
|
||||
body.hide-scrollbar,
|
||||
html.hide-scrollbar body {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* Mozilla Firefox */
|
||||
|
||||
body.firefox.dark-theme {
|
||||
scrollbar-color: dark !important;
|
||||
}
|
||||
|
||||
/* Chrome, Chromium, and compatible browsers */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
::-webkit-scrollbar {
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(var(--v-theme-secondary), 0.2);
|
||||
border: solid transparent;
|
||||
border-width: 0 0 0 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--v-theme-on-surface), 0.28);
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--v-theme-secondary), 0.56);
|
||||
border-width: 1px;
|
||||
border-radius: 6px;
|
||||
min-height: 28px;
|
||||
padding: 100px 0 0;
|
||||
}
|
||||
|
|
@ -1,68 +1,4 @@
|
|||
/* Inline <HTML>, <Body>, and Splash Screen Styles */
|
||||
|
||||
html.loading {
|
||||
overflow-y: hidden !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
html.hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
[data-color-mode="light"][data-light-theme*="dark"],
|
||||
[data-color-mode="dark"][data-dark-theme*="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-color-mode="light"][data-light-theme*="light"],
|
||||
[data-color-mode="dark"][data-dark-theme*="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333333;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
/* Use a system font for faster rendering and a native look */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* Text rendering defaults. */
|
||||
letter-spacing: normal !important;
|
||||
line-height: normal;
|
||||
text-justify: inter-word;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Support for Safari and Chrome. */
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Enable font features. */
|
||||
font-feature-settings: "kern", "liga";
|
||||
}
|
||||
|
||||
body.nojs::-webkit-scrollbar,
|
||||
body.hide-scrollbar::-webkit-scrollbar,
|
||||
html.hide-scrollbar ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
body.nojs,
|
||||
body.hide-scrollbar,
|
||||
html.hide-scrollbar body {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* Loading Animation Styles */
|
||||
/* Splash Screen Styles */
|
||||
|
||||
#busy-overlay {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,29 @@
|
|||
/* UI Font Presets */
|
||||
/* Text Styles */
|
||||
|
||||
body #app,
|
||||
.text-h1,
|
||||
.text-h2,
|
||||
.text-h3,
|
||||
.text-h4,
|
||||
.text-h5,
|
||||
.text-h6,
|
||||
.text-subtitle-1,
|
||||
.text-subtitle-2,
|
||||
.text-body-1,
|
||||
.text-body-2,
|
||||
.text-caption,
|
||||
.text-button,
|
||||
.text-overline {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
body #app,
|
||||
.text-subtitle-1,
|
||||
.text-subtitle-2,
|
||||
.text-body-1,
|
||||
.text-body-2,
|
||||
.text-subtitle-1,
|
||||
.text-subtitle-2,
|
||||
.text-caption {
|
||||
/* Text rendering defaults. */
|
||||
/* 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;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Support for Safari and Chrome. */
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Enable font features. */
|
||||
font-feature-settings: "kern", "liga";
|
||||
}
|
||||
|
||||
|
|
@ -113,41 +98,20 @@ body #app,
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.text-monospace {
|
||||
font-family: var(--v-font-family-mono);
|
||||
}
|
||||
|
||||
.text-monospace {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.425;
|
||||
letter-spacing: 0.0178571429em;
|
||||
}
|
||||
|
||||
/* Line Height Styles */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
|
||||
.p-page h2 {
|
||||
|
|
@ -179,6 +143,11 @@ body #app,
|
|||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
.text-link,
|
||||
|
|
@ -194,9 +163,28 @@ p a.text-link {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Footers */
|
||||
/* Custom Line Heights */
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
import "css/root.css";
|
||||
import "css/splash.css";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue