/* vim: set tabstop=2 shiftwidth=2 expandtab smarttab: */ * { box-sizing: border-box; } html { min-height: 100%; } body { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 11.5pt; font-weight: 300; line-height: 1.6; } b, strong { font-weight: 700; } header, section, footer, nav { display: block; } #main-header { position: sticky; top: 0; z-index: 3; } #mobile-subheader { position: sticky; z-index: 2; transition: transform 150ms ease; } #mobile-subheader.mobile-subheader-hidden, #mobile-subheader.mobile-subheader-locked { transform: translateY(-100%); } /* Column layout */ .left-column, .middle-column, .right-column { /* * NOTE: This is sometimes overridden by content with a margin of "-12px -16px" (see table styles) * or "padding: 0" (see overrides below for main-content) */ padding: 12px 16px; } .columns-wrap { display: flex; max-width: 1000px; margin: 0 auto; } .middle-column { flex: 1; } .right-column { white-space: nowrap; } .header-columns { align-items: center; } .header-columns .left-column, .header-columns .middle-column, .header-columns .right-column { padding-left: 8px; padding-right: 8px; overflow: hidden; } .header-columns > :first-child { padding-left: 16px; } .header-columns .header-search { padding-right: 16px; } .header-columns h1, .header-columns h2, .header-columns h3 { white-space: nowrap; overflow: hidden; text-overflow: ".."; } .header-columns .left-column { box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, .2); } .header-columns .header-site-name { padding-left: 18px; flex: 1 1 auto; min-width: 0; } .header-columns .header-add-expense { flex-shrink: 0; } .header-columns .header-search { flex: 0 0 auto; min-width: 0; } .header-search label { display: flex; align-items: center; gap: 4px; } .header-search input[type=search] { width: calc(100vw - 300px); box-sizing: border-box; transition: width 0.3s ease-in-out; } .header-search input[type=search]:focus { width: calc(100vw - 150px); } /* really small screens: "g.f" is much shorter than "group.finance" */ @media screen and (max-width: 374px) { .header-search input[type=search] { width: calc(100vw - 190px); } } #main-content { display: flex; flex-direction: column; /* * Ensures we don't grow wider to support extra wide content when that content could * scroll itself instead. The min-width component is needed so we also don't try to * push into the sidebar's allotted space either in this situation. * * We used to get this same effect by setting `overflow: auto` here, but that caused * issues for content using sticky positioning. */ max-width: 100%; min-width: 0; /* * override default padding from .middle-column since we want the footer to be flush * with the edges of the element (and we can't use negative margins on the footer * because it causes weird scrollbars in Safari with flex layouting) */ padding: 0; } #main-content section { flex: 1; padding: 12px 16px; } #main-content footer { padding: 5px; } a { text-decoration: none; transition: text-shadow 0.1s; } button, input[type=submit], input[type=button], input[type=reset] { padding: 0.25rem 0.5rem; } /* Minimum 16px font size on form inputs prevents iOS Safari from zooming in on focus (scoped to iOS via server-side UA detection on ) */ .is-ios input:not([type=submit]):not([type=button]):not([type=reset]):not(.font-size-inherit), .is-ios textarea:not(.font-size-inherit), .is-ios select:not(.font-size-inherit) { font-size: max(1em, 16px); } textarea { font-family: inherit; line-height: inherit; font-weight: inherit; } h1, h2, h3, h4 { margin: 0; padding: 0; } h1 a, h2 a, h3 a, nav a, footer a { color: inherit; text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover, nav a:hover, footer a:hover { text-decoration: underline; } h1 { font-size: 1.6em; } h2 { font-size: 1.3em; } section h3, section h4 { margin-top: 12px; } h3 { font-size: 1.2em; } .full-width, table.full-width { width: 100%; box-sizing: border-box; } input[type=range].full-width { width: 100%; box-sizing: border-box; margin: 0; } .gf-truncated { display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ".."; /* You should specify your own max-width when using this, and probably a title="" too */ } .subtag { font-variant: small-caps; cursor: default; display: inline-block; padding: 2px 3px; font-size: 80%; border-radius: 3px; margin: 0 2px; vertical-align: middle; } .subtag code { font-variant: normal; } /* Tables */ div.wide-table-container { overflow-x: auto; margin: 10px -16px; width: calc(100% + 32px); } /* -12px to cancel section padding; replaces the 10px margin from above */ #main-content section > div.wide-table-container:first-child, #main-content section > style:first-child + div.wide-table-container, #main-content section > script:first-child + div.wide-table-container { margin-top: -12px; } #main-content section > div.wide-table-container:last-child { margin-bottom: -12px; } table { width: 100%; margin: 10px auto; border-collapse: collapse; } table.wide-table { margin: 0; width: 100%; } th, td { text-align: left; padding: 6px 12px; border-bottom-width: 1px; border-bottom-style: solid; } tr.new-section > th, tr.new-section > td { border-top-width: 4px; border-top-style: solid; } tfoot th, tfoot td { border-bottom-style: none; vertical-align: top; } tr.double-row-top > td { border-bottom-style: none; } tr.double-row-middle > td { border-top-style: none; border-bottom-style: none; padding-left: 20px; } tr.double-row-bottom > td { border-top-style: none; padding-left: 20px; } table.tight-double-rows tr.double-row-top > td { padding-bottom: 0; } table.tight-double-rows tr.double-row-middle > td { padding-top: 0; padding-bottom: 0; } table.tight-double-rows tr.double-row-bottom > td { padding-top: 0; } table.noborder th, table.noborder td { border-bottom-style: none; } th.bordered, td.bordered { border-style: solid !important; } table.little, table.little table { margin: 0; width: auto; } table.little th, table.little td { padding: 2px; border-bottom-style: none; } .unseen-on-load { font-weight: bold; } .dotted-underline { text-decoration: underline; text-decoration-style: dotted; -webkit-text-decoration-style: dotted; } .only-emojis { text-underline-offset: 0.2em; font-size: 200%; } .serif-plz { font-family: "Times New Roman", times, serif; } .arrow-container { display: inline-block; min-width: 0.8em; text-align: center; } .info-box { border-left: 3px solid; padding: 0.4em 0.8em; margin: 0.6em 0; font-size: 90%; } /* Flex-based result list (search results, member lists, etc.) */ .gf-result-list { list-style: none; margin: 0 0 0 1em; padding: 0; max-width: 500px; } .gf-result-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; } .gf-result-item-main { min-width: 0; } .gf-result-item-side { flex-shrink: 0; text-align: right; white-space: nowrap; } .gf-result-divider { margin: 4px 0; opacity: 0.4; } .gf-result-heading { margin: 0.8em 0 0.3em; font-size: 1.05em; font-weight: bold; } .gf-search-summary { margin: 0 0 0.5em; font-size: 0.95em; } .gf-empty-state { text-align: center; padding: 2em 1em; } .gf-showmore-link { display: block; padding: 4px 0; font-size: 0.9em; cursor: pointer; } .gf-showmore-hidden { display: none; } .listing-page-header-line { font-size: 90%; } .listing-page-details-block { font-size: 90%; } .listing-page-status-update { font-size: 90%; font-style: italic; } .listing-page-timestamp-line { font-size: 80%; font-style: italic; } /* Footer */ footer { padding: 5px; } footer p, footer ul { margin: 5px; padding: 0; text-align: center; } footer ul { list-style-type: none; } footer ul > li { display: inline; } footer ul > li::before { content: "\0020 \00B7 \0020"; font-size: inherit; padding: 0 2px; } footer ul > li:first-child::before { content: none; } .transition-background, .transition-background > * { transition: background-color 1.5s; } .desktop { display: none; } .screen-really-small { display: none; } /* large screens (desktop) */ /* This same width threshold is also used in nav.css and themes/*.css */ @media print, screen and (min-width: 700px) { .desktop { display: revert; } .mobile { display: none; } body.wide-mode .columns-wrap { max-width: calc(100vw - 80px); } .left-column { width: 218px; } .content-columns { min-height: calc(100vh - var(--header-height, 69px)); } .content-columns .left-column { padding-top: 0; padding-bottom: 0; } .content-columns .left-column, .content-columns .middle-column { box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 0.2); } .header-columns .left-column, .header-columns .middle-column, .header-columns .right-column { padding-left: 16px; padding-right: 16px; } .header-columns .header-search { flex: 0 0 auto; } .header-search input[type=search] { width: clamp(10em, calc(100vw - 500px), 20em); } .header-search input[type=search]:focus { width: clamp(15em, calc(100vw - 400px), 30em); } table { margin: 10px auto; width: auto; } table:not(.little) { min-width: 435px; } } .gf-inline-btn { background: none; border: none; opacity: 0.5; cursor: pointer; padding: 0 4px; font-size: inherit; vertical-align: middle; color: inherit; } .gf-inline-btn:hover { opacity: 1; } /* Action bar */ .gf-action-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 24px; } .gf-action-bar > form { display: contents; } .gf-action-btn { display: inline-flex; align-items: center; line-height: normal; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; font-size: 0.95em; cursor: pointer; transition: opacity 0.15s ease; font-family: inherit; text-shadow: none; } .gf-action-btn:hover { opacity: 0.85; } .gf-action-btn:active { opacity: 0.7; } .gf-action-btn.pressed { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); opacity: 0.85; } .gf-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .gf-action-btn:disabled:hover, .gf-action-btn:disabled:active { opacity: 0.5; } .gf-action-btn-secondary { border-color: transparent; } .gf-action-btn-sm { padding: 5px 10px; font-size: 0.85em; } .gf-action-bar-flush { margin: 0; } .gf-action-bar-left { justify-content: flex-start; } .gf-action-bar-right { justify-content: flex-end; } .gf-action-bar-sticky-container { position: sticky; bottom: 0; padding: 10px 16px 16px; margin: 0 -16px -12px; background-color: var(--content-bg); border-top: 1px solid rgba(128, 128, 128, 0.2); z-index: 1; } /* Overflow menu */ .gf-overflow-menu-wrapper { position: relative; display: inline-flex; } .gf-overflow-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 220px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); overflow: hidden; } .gf-overflow-menu-open { display: block; } .gf-overflow-menu-item, a.gf-overflow-menu-item, a.gf-overflow-menu-item:hover { display: flex; align-items: center; gap: 8px; padding: 10px 14px; width: 100%; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 0.95em; color: inherit; text-align: left; text-decoration: none; text-shadow: none; box-sizing: border-box; } .gf-overflow-menu-item-icon { width: 1.2em; text-align: center; flex-shrink: 0; } .gf-overflow-menu-item-text { flex: 1; } .gf-overflow-menu-item-subtitle { font-size: 0.85em; opacity: 0.7; } .gf-overflow-menu-item-static { cursor: default; } .gf-overflow-menu-divider { margin: 4px 0; border: none; border-top-width: 1px; border-top-style: solid; } /* Overflow menu: mobile bottom sheet */ .gf-overflow-menu-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 14; background: rgba(0, 0, 0, 0.4); } .gf-overflow-menu-backdrop-visible { display: block; } /* Segmented control */ .gf-segmented-control { display: flex; } .gf-segmented-option { flex: 1; cursor: pointer; } .gf-segmented-option input { position: absolute; opacity: 0; pointer-events: none; } .gf-segmented-option span { display: block; text-align: center; padding: 8px 2px; border: 1.5px solid; font-size: 0.78em; line-height: 1.3; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .gf-segmented-option span i { font-size: 1.2em; display: block; margin-bottom: -1px; } .gf-segmented-option:first-child span { border-radius: 6px 0 0 6px; } .gf-segmented-option:last-child span { border-radius: 0 6px 6px 0; } .gf-segmented-option:not(:first-child) span { border-left-width: 0; } @media screen and (min-width: 700px) { .gf-segmented-option span { padding: 10px 4px; font-size: 0.85em; } } /* Infinite scroll spinner */ .gf-lazyload-spinner { display: inline-block; padding: 12px; font-size: 1.2em; } /* Back-to-top button */ .back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .back-to-top.visible { opacity: 1; pointer-events: auto; } /* small screens (mobile): action bar + overflow menu */ @media screen and (max-width: 699px) { .gf-action-bar { flex-wrap: wrap; flex-direction: row; } .gf-action-btn { justify-content: center; } .gf-action-btn:not(.gf-action-btn-secondary) { flex: 1 0 100%; } .gf-action-bar:not(:has(> .gf-action-btn-secondary)) .gf-action-btn:not(.gf-action-btn-secondary) { flex: 1 0 auto; } .gf-action-bar-compact .gf-action-btn { flex: 1 1 0; white-space: nowrap; } .gf-action-btn-secondary { flex: 1 1 auto; } .gf-action-bar-inline .gf-action-btn-secondary { flex: none; } .gf-action-bar-right .gf-action-btn { flex: none; } .gf-overflow-menu-wrapper { flex: 0 0 auto; } .gf-overflow-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 10px 10px 0 0; min-width: 0; z-index: 15; padding: 10px 0; } .gf-overflow-menu-item { padding: 14px 18px; } .gf-overflow-menu-divider { margin: 8px 0; } } /* really small screens */ @media screen and (max-width: 374px) { .screen-really-small { display: revert; } .screen-reasonably-sized { display: none; } }