diff --git a/client/components/ThemeMenu.tsx b/client/components/ThemeMenu.tsx new file mode 100644 index 000000000..9dc7687cc --- /dev/null +++ b/client/components/ThemeMenu.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; + +import { useGlobalContext } from "../context/GlobalContext"; + +export default function ThemeMenu() { + const { + state: { userTheme }, + action: { setUserTheme }, + } = useGlobalContext(); + + function changeTheme(e) { + setUserTheme(e.target.value); + } + + return ( + + Theme + + + ); +} diff --git a/client/components/edit/ObjectButtonBar.tsx b/client/components/edit/ObjectButtonBar.tsx index 75ac4d8a0..cd48bba30 100644 --- a/client/components/edit/ObjectButtonBar.tsx +++ b/client/components/edit/ObjectButtonBar.tsx @@ -20,7 +20,7 @@ const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => { diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css index ad8cbe4ed..bec37dfe3 100644 --- a/client/components/edit/ObjectStatus.module.css +++ b/client/components/edit/ObjectStatus.module.css @@ -1,19 +1,29 @@ +.active, +.inactive, +.deleted, +.unknown { + display: inline-flex; + width: 100px; + text-align: left; +} + +.indicator__label { + flex: 1 1 0%; + text-align: center; +} + .active .indicator { - color: green; + color: var(--object-status-active); } .inactive .indicator { - color: yellow; + color: var(--object-status-inactive); } .deleted .indicator { - color: red; + color: var(--object-status-deleted); } .unknown .indicator { - color: gray; -} - -.indicator { - text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; + color: var(--object-status-unknown); } diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx index 3cbfe67ca..de62ba714 100644 --- a/client/components/edit/ObjectStatus.tsx +++ b/client/components/edit/ObjectStatus.tsx @@ -27,7 +27,7 @@ export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => const stateMsg = loaded ? ( ) : ( "" diff --git a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap index 6a0f8aaa4..86559a0be 100644 --- a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap +++ b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap @@ -12,7 +12,11 @@ exports[`ObjectStatus defaults to unknown state 1`] = ` ◉   - Unknown + + Unknown + , ",", ] @@ -30,7 +34,11 @@ exports[`ObjectStatus displays the state found in the response 1`] = ` ◉   - Inactive + + Inactive + , ",", ] diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx index c4e89458c..bebed4853 100644 --- a/client/components/edit/children/Child.tsx +++ b/client/components/edit/children/Child.tsx @@ -1,3 +1,4 @@ +import styles from "./ChildList.module.css"; import React, { useState } from "react"; import { useEditorContext } from "../../../context/EditorContext"; import ChildList from "./ChildList"; @@ -41,7 +42,11 @@ export const Child = ({ const title = !loaded ? initialTitle : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-"); const expandControl = ( setExpanded(!expanded)}> - {expanded ? : } + { + expanded + ? + : + } ); const childList = expanded ? ( @@ -53,33 +58,36 @@ export const Child = ({ forceThumbs={thumbnail} /> ) : ( - "" + null ); const hasExtraTools = thumbnail || models || showChildCounts; const extraTools = hasExtraTools ? ( - + {thumbnail ? : ""} {showChildCounts ? : ""} {models ? : ""} ) : null; return ( - <> - - - {expandControl} +
+ + + {expandControl}{" "} {loaded && parentPid ? : ""} - {(title.length > 0 ? title : "-") + ` [${pid}]`}{" "} - + {title || "(no title)"} - + + {pid} + + + {loaded ? : ""} {extraTools} {childList} - +
); }; diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css index 7b13a2d4c..dd5fe81c7 100644 --- a/client/components/edit/children/ChildList.module.css +++ b/client/components/edit/children/ChildList.module.css @@ -1,7 +1,38 @@ .childlist { + margin-block: 0.75rem; +} + +.childlist__list { + margin-block: 0; + padding-inline: 0; list-style-type: none; + background-color: white; +} +.childlist__list > li { + margin-block: 0; + border-block-start: 1px solid var(--page-list-border); +} + +.childlist__item { + margin-block: 0; + padding: 0.25rem; +} + +.childlist__expandicon { + vertical-align: bottom; +} + +/* Nested */ + +.childlist__list .childlist { + margin-inline-start: 1.5rem; } -.childlist li { - border-top: 1px solid gray; +/* Pagination alignment */ + +.childlist .pagination { + margin-block-end: 1px; +} +.childlist .pagination li { + margin: 0; } diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx index 63f49c3ff..24f5e7798 100644 --- a/client/components/edit/children/ChildList.tsx +++ b/client/components/edit/children/ChildList.tsx @@ -4,6 +4,7 @@ import { useEditorContext } from "../../../context/EditorContext"; import Child from "./Child"; import SelectableChild from "./SelectableChild"; import CircularProgress from "@mui/material/CircularProgress"; +import Grid from "@mui/material/Grid"; import Pagination from "@mui/material/Pagination"; export interface ChildListProps { @@ -88,38 +89,34 @@ export const ChildList = ({ {showThumbs ? "Hide Thumbnails" : "Show Thumbnails"} ) : null; - const contents = - childDocs.length > 0 ? ( - childDocs.map((child: Record) => { - return ( -
  • - {selectCallback === false ? ( - - ) : ( - - )} -
    • - ); - }) - ) : ( -

    Empty.

    - ); + const contents = childDocs.map((child: Record) => { + return ( +
  • + {selectCallback === false ? ( + + ) : ( + + )} +
    • + ); + }); const pageCount = Math.ceil(children.numFound / pageSize); const paginator = pageCount > 1 ? ( 1 ? ( -

    + <> Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "} {children.numFound} -

    + ) : null; return ( - <> +
    {thumbsButton} {modelsButton} {childButton} - {paginatorLabel} - {paginator} -
      {contents}
    - + + + {paginatorLabel} + + + {paginator} + + +
      {contents.length ? contents : Empty.}
    +
    ); }; diff --git a/client/components/edit/children/__snapshots__/Child.test.tsx.snap b/client/components/edit/children/__snapshots__/Child.test.tsx.snap index 5871a0d96..54ae93ec5 100644 --- a/client/components/edit/children/__snapshots__/Child.test.tsx.snap +++ b/client/components/edit/children/__snapshots__/Child.test.tsx.snap @@ -2,16 +2,16 @@ exports[`Child handles empty titles appropriately 1`] = `
    ; // Snackbar snackbarState: SnackbarState; + // User theme + userTheme: ThemeOption, } /** @@ -26,12 +35,15 @@ const initialGlobalState: GlobalState = { message: "", severity: "info", }, + // User theme + userTheme: localLoadUserTheme(), }; type Action = | { type: 'OPEN_MODAL'; payload: string } | { type: 'CLOSE_MODAL'; payload: string } - | { type: 'SET_SNACKBAR_STATE'; payload: SnackbarState }; + | { type: 'SET_SNACKBAR_STATE'; payload: SnackbarState } + | { type: 'SET_USER_THEME'; payload: ThemeOption }; /** * Update the shared states of react components. @@ -127,11 +139,23 @@ export const useGlobalContext = () => { }); }; + // User theme + + const setUserTheme = (userTheme: ThemeOption) => { + localSaveUserTheme(userTheme); + applyUserThemeToBody(userTheme); + dispatch({ + type: "SET_USER_THEME", + payload: userTheme, + }); + }; + return { state: { // only return limited state // to create "private" attributes snackbarState: state.snackbarState, + userTheme: state.userTheme, }, action: { // Modal control @@ -141,6 +165,8 @@ export const useGlobalContext = () => { toggleModal, // Snackbar setSnackbarState, + // User theme + setUserTheme, }, }; } @@ -149,3 +175,50 @@ export default { GlobalContextProvider, useGlobalContext } + +/* User Theme */ + +// Get system theme from CSS media queries +function systemTheme(): ThemeOption { + let defaultTheme = "light" as ThemeOption; + + if (typeof window != "undefined" && typeof window.matchMedia != "undefined") { + if (window.matchMedia("(prefers-color-scheme)").media == "not all") { + return defaultTheme; + } + + const isDark = !window.matchMedia("(prefers-color-scheme: light)").matches; + return (isDark ? "dark" : "light") as ThemeOption; + } + + return defaultTheme; +} + +function applyUserThemeToBody(userTheme: ThemeOption) { + if (typeof window != "undefined") { + document.body.setAttribute( + "color-scheme", + userTheme == "system" ? systemTheme() : userTheme + ); + } +} + +// Save page theme to localStorage +function localSaveUserTheme(mediaTheme: ThemeOption) { + if (typeof window != "undefined") { + localStorage.setItem("vudl-theme", mediaTheme); + } +} + +// Get page theme from localStorage +function localLoadUserTheme(): ThemeOption { + if (typeof window != "undefined") { + let mediaTheme = (localStorage.getItem("vudl-theme") ?? "system") as ThemeOption; + + applyUserThemeToBody(mediaTheme); + + return mediaTheme; + } + + return "system" as ThemeOption; +} diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 44e603ea5..53d891553 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -5,11 +5,15 @@ import { PaginatorContextProvider } from "../context/PaginatorContext"; import { FetchContextProvider } from "../context/FetchContext"; import "../styles/normalize.css"; -import "../styles/application.css"; -import "../styles/client.css"; import "../styles/justgrid.css"; +import "../styles/globals.css"; import "@fortawesome/fontawesome-free/css/all.min.css"; + +import "../styles/application.css"; +import "../styles/client.css"; + import LogoutButton from "../components/LogoutButton"; +import ThemeMenu from "../components/ThemeMenu"; function MyApp({ Component, pageProps }: { Component: React.ReactNode }): React.ReactElement { return ( diff --git a/client/styles/application.css b/client/styles/application.css index 5c6286eda..15fcdefcf 100644 --- a/client/styles/application.css +++ b/client/styles/application.css @@ -1,28 +1,50 @@ +html { + font-size: 16px; +} + body { - background: #fafbfc; - font-size: 14px; - font-family: "Roboto", Arial; + padding-inline: 1rem; + font-size: 1rem; + font-family: var(--family-sans); font-weight: 500; + line-height: 1.5; + color: var(--body-color); + background-color: var(--body-bg); overflow-x: hidden; } +a { + color: var(--link-color); +} +a:hover, +a:focus { + color: var(--heading-color); +} +a:visited { + color: var(--link-visited); +} + +a, +button { + font-weight: 500; +} + .hidden { display: none; } -#jobSelector { - margin-left: 1rem; +h1, h2, h3, h4 { + color: var(--heading-color); } h2 { margin-top: 2rem; margin-bottom: 0; font-size: 1.6rem; - color: #4d4d4d; } ul { - margin-top: 0.25rem; + margin-block: 1rem; padding-left: 1rem; list-style-position: inside; } @@ -34,12 +56,12 @@ button, .button { display: inline-block; margin: 0 2px; - padding: 4px 10px; + padding: 6px 10px; border: 0; - color: #fff; - line-height: 1.5; + color: var(--btn-text); + line-height: 1.15; text-decoration: none; - background-color: #485a6c; + background-color: var(--btn-bg); cursor: pointer; border-radius: 5px; } @@ -50,33 +72,33 @@ button.active, .button:hover, .button:focus, .button.active { - background-color: #3498db; - border-color: #275575; + background-color: var(--btn-focus-bg); + border-color: var(--btn-border); } button.primary, .button.primary { - background-color: #27ae60; - border-color: #13562f; - color: #fff; + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-border); + color: var(--btn-primary-text); } button.primary:hover, .button.primary:hover, button.primary:focus, .button.primary:focus { - background-color: #155724; + background-color: var(--btn-primary-focus-bg); } button.danger, .button.danger { - background-color: red; + background-color: var(--btn-danger-bg); margin-left: 20px; } button.danger:hover, .button.danger:hover, button.danger:focus, .button.danger:focus { - background-color: #a10705; + background-color: var(--btn-danger-focus-bg); } button.btn-link { @@ -84,18 +106,52 @@ button.btn-link { padding: 0 0.25rem; border-color: transparent; font-weight: bold; - color: #008aed; + color: var(--link-color); text-decoration: underline; background-color: transparent; box-shadow: none; } -.logout { +/* Layout */ + +#jobSelector { + margin-left: 1rem; +} + +.nav--right { position: absolute; top: 12px; right: 8px; + display: flex; + gap: 0.25rem; } + +.user-theme__menu { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.25rem; +} +#user-theme { + min-height: auto; + padding-block: 6px; + line-height: 1.25rem; + background-color: var(--input-bg); +} +#user-theme__label { + position: relative; + width: fit-content; + transform: none; + transition: none; +} + .logout .button { - background: #1abc9c; - border-color: #16a085; + color: var(--btn-text); + background-color: var(--btn-logout-bg); + border-color: var(--btn-logout-border); +} +.logout .button:hover, +.logout .button:focus { + background-color: var(--btn-logout-focus-bg); } diff --git a/client/styles/client.css b/client/styles/client.css index 4456f7797..d5dd36d46 100644 --- a/client/styles/client.css +++ b/client/styles/client.css @@ -1,16 +1,15 @@ p { - padding: 0 12px; + padding: 0 1rem; width: 100%; - margin-bottom: 9px; + margin-block: 1rem; } .controls { margin-top: 0px; - padding: 0 8px; } .top { position: absolute; - top: 41px; - right: 8px; + top: 3.5rem; + right: 1rem; } .top button { margin: 0 2px; @@ -23,23 +22,24 @@ p { } input { padding: 2px; - border: 1px solid #6a737d; + background-color: var(--input-bg) !important; + border: 1px solid var(--input-border); border-radius: 4px; } input:focus { - border-color: #2188ff; - outline-color: #2188ff; - box-shadow: 0 0 0 4px #c8e1ff; + border-color: var(--input-focus-border); + outline-color: var(--input-focus-border); + box-shadow: 0 0 0 4px var(--shadow-gray); } .status { padding: 0; - padding-top: 5px; +/* padding-top: 5px;*/ } .group input[type="text"] { height: auto; margin-right: 3px; padding: 6px; - border: 1px solid #53626f; + border: 1px solid var(--group-border); border-radius: 2px; } @@ -54,7 +54,7 @@ label { cursor: pointer; } label:hover { - background-color: #c8e1ff; + background-color: var(--label-hover); } label input[type="text"], label input[type="number"], @@ -79,8 +79,7 @@ label input[type="radio"] { } .group button { margin: 0; - border-right: 1px solid #ececec; - color: #fff; + border-right: 1px solid var(--group-border); border-radius: 0; } .group input[type="text"] + button, @@ -101,14 +100,14 @@ label input[type="radio"] { .toggles button, .toggles + button { padding: 5px 40px; - background-color: #7f8c8d; - border-color: #34495e; + background-color: var(--btn-toggle-bg); + border-color: var(--btn-toggle-border); } .toggles button:hover, .toggles + button:hover, .toggles button:focus, .toggles + button:focus { - background-color: #53626f; + background-color: var(--btn-toggle-focus-bg); } .group#prefixes button { @@ -128,8 +127,8 @@ label input[type="radio"] { margin-left: 8px; padding: 4px; padding-bottom: 400px; - border: 1px solid #c1c1c1; - background-color: #fff; + border: 1px solid var(--page-list-border); + background-color: var(--page-list-bg); border-radius: 6px 0 0 6px; } .thumbnail { @@ -141,15 +140,19 @@ label input[type="radio"] { height: 202px; margin: 2px; padding: 4px; - background: #e1e1e1; font-weight: 400; + color: var(--thumbnail-label); text-align: center; - text-shadow: 0 1px 0 #fff; + background-color: var(--thumbnail-bg); + border-radius: 0.25rem; cursor: pointer; word-break: break-all; } +[color-scheme="light"] .thumbnail { + text-shadow: 0 1px 0 #fff; +} .thumbnail.selected { - background: #51aded; + background-color: var(--thumbnail-focus-bg); } .thumbnail img { display: block; @@ -173,10 +176,11 @@ label input[type="radio"] { display: table; top: 0; left: 0; - padding: 2px; + padding-inline: 4px; font-size: 10px; - background: #fff; - color: #000; + font-weight: 700; + background-color: var(--thumbnail-number-bg); + color: var(--thumbnail-number-text); } .preview, #zoomy { @@ -191,11 +195,11 @@ label input[type="radio"] { } .preview img { - border: 1px solid black; + border: 1px solid var(--thumbnail-preview-border); } .MuiTreeItem-root.Mui-selected, .MuiTreeItem-root.Mui-selected:hover { - color: #fff; - background-color: #000; + color: var(--tree-item-focus-text); + background-color: var(--tree-item-focus-bg); } diff --git a/client/styles/globals.css b/client/styles/globals.css index e5e2dcc23..5edc50704 100644 --- a/client/styles/globals.css +++ b/client/styles/globals.css @@ -1,16 +1,134 @@ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +:root { + --family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, var(--family-emoji); } +:root, +[color-scheme="light"] { + --body-bg: #f2f4f8; + --body-color: #343a3f; + --heading-color: #121619; + --link-color: #0043ce; + --link-visited: #6929c4; -a { - color: inherit; - text-decoration: none; + --btn-bg: #4d5358; + --btn-text: #ffffff; + --btn-border: #343a3f; + --btn-focus-bg: #21272a; + + --btn-primary-bg: #198038; + --btn-primary-text: #ffffff; + --btn-primary-border: #044317; + --btn-primary-focus-bg: #022d0d; + + --btn-danger-bg: #da1e28; + --btn-danger-text: #ffffff; + --btn-danger-border: #750e13; + --btn-danger-focus-bg: #520408; + + --btn-logout-bg: #007d79; + --btn-logout-text: #ffffff; + --btn-logout-border: #004144; + --btn-logout-focus-bg: #022b30; + + --btn-toggle-bg: #7f8c8d; + --btn-toggle-text: #ffffff; + --btn-toggle-border: #34495e; + --btn-toggle-focus-bg: #53626f; + + --group-border: #121619; + + --input-bg: #ffffff; + --input-border: #6a737d; + --input-focus-border: #2188ff; + + --label-hover: #c8e1ff; + + /* Paginator */ + + --page-list-bg: #ffffff; + --page-list-border: #c1c1c1; + + --thumbnail-bg: #dde1e6; + --thumbnail-label: #121619; + --thumbnail-focus-bg: #82cfff; + --thumbnail-number-bg: #ffffff; + --thumbnail-number-text: #4d5358; + --thumbnail-preview-border: #000000; + + /* Editor */ + + --object-status-active: #bef264; + --object-status-inactive: #fde047; + --object-status-deleted: #fca5a5; + --object-status-unknown: #c1c7cd; + + --tree-item-focus-bg: #000000; + --tree-item-focus-text: #ffffff; + + --shadow-gray: #c8e1ff; } -* { - box-sizing: border-box; +[color-scheme="dark"] { + --body-bg: #21272a; + --body-color: #c1c7cd; + --heading-color: #dde1e6; + --link-color: #78a9ff; + --link-visited: #be95ff; + + --btn-bg: #dde1e6; + --btn-text: #121619; + --btn-border: #a2a9b0; + --btn-focus-bg: #a2a9b0; + + --btn-primary-bg: #42be65; + --btn-primary-text: #071908; + --btn-primary-border: #198038; + --btn-primary-focus-bg: #6fdc8c; + + --btn-danger-bg: #ff8389; + --btn-danger-text: #2d0709; + --btn-danger-border: #fa4d56; + --btn-danger-focus-bg: #ffb3b8; + + --btn-logout-bg: #3ddbd9; + --btn-logout-text: #081a1c; + --btn-logout-border: #08bdba; + --btn-logout-focus-bg: #9ef0f0; + + --btn-toggle-bg: #c1c7cd; + --btn-toggle-text: #121619; + --btn-toggle-border: #a2a9b0; + --btn-toggle-focus-bg: #f2f4f8; + + --group-border: #697077; + + --input-bg: #ffffff; + --input-border: #6a737d; + --input-focus-border: #2188ff; + + --label-hover: #c8e1ff; + + /* Paginator */ + + --page-list-bg: #343a3f; + --page-list-border: #121619; + + --thumbnail-bg: #697077; + --thumbnail-label: #f2f4f8; + --thumbnail-focus-bg: #0072c3; + --thumbnail-number-bg: #121619; + --thumbnail-number-text: #f2f4f8; + --thumbnail-preview-border: #121619; + + /* Editor */ + + --object-status-active: #bef264; + --object-status-inactive: #fde047; + --object-status-deleted: #fca5a5; + --object-status-unknown: #c1c7cd; + + --tree-item-focus-bg: #000000; + --tree-item-focus-text: #ffffff; + + --shadow-gray: #c8e1ff; } diff --git a/client/styles/justgrid.css b/client/styles/justgrid.css index 760c7e67b..d3a7aeec7 100644 --- a/client/styles/justgrid.css +++ b/client/styles/justgrid.css @@ -1 +1,20 @@ -.row:after,.row:before{clear:both;content:"";display:table}.col,.row{box-sizing:border-box;width:100%}.col{float:left}.col.one{width:8.333%}.col.two{width:16.666%}.col.three{width:25%}.col.four{width:33.333%}.col.five{width:41.666%}.col.six{width:50%}.col.seven{width:58.333%}.col.eight{width:66.666%}.col.nine{width:75%}.col.ten{width:83.333%}.col.eleven{width:91.666%}@media(max-width:600px){.row:not(.static)>.col{width:100%}} \ No newline at end of file +/* +.row:after,.row:before{clear:both;content:"";display:table}.col,.row{box-sizing:border-box;width:100%}.col{float:left}.col.one{width:8.333%}.col.two{width:16.666%}.col.three{width:25%}.col.four{width:33.333%}.col.five{width:41.666%}.col.six{width:50%}.col.seven{width:58.333%}.col.eight{width:66.666%}.col.nine{width:75%}.col.ten{width:83.333%}.col.eleven{width:91.666%}@media(max-width:600px){.row:not(.static)>.col{width:100%}} +*/ + +.row { + display: flex; + width: 100%; +} +.col.one { flex: 1 1 0%; } +.col.two { flex: 2 2 0%; } +.col.three { flex: 3 3 0%; } +.col.four { flex: 4 4 0%; } +.col.five { flex: 5 5 0%; } +.col.six { flex: 6 6 0%; } +.col.seven { flex: 7 7 0%; } +.col.eight { flex: 8 8 0%; } +.col.nine { flex: 9 9 0%; } +.col.ten { flex: 10 10 0%; } +.col.eleven { flex: 11 11 0%; } +.col.twelve { flex: 12 12 0%; } diff --git a/client/styles/normalize.css b/client/styles/normalize.css index 2e2610e91..8a3397ee1 100644 --- a/client/styles/normalize.css +++ b/client/styles/normalize.css @@ -1,2 +1,3 @@ -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ -*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item} \ No newline at end of file +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +*,:before,:after{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline} +::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item} \ No newline at end of file