/* * Base styles and theming for the Koppy web application. * * Colours are defined on the :root element via CSS variables. Each theme * overrides these variables by applying a class to the element * (e.g. .theme-dark). Components throughout the site reference these * variables so that switching theme requires no further styling. */ /* Reset and base typography */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--fg); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } /* Themes: default light theme defined on :root, others override on body */ :root { --bg: #f9f9f9; --fg: #242424; --card-bg: #ffffff; --border: #e0e0e0; --accent: #4caf50; --header-bg: #ffffff; --placeholder: #999999; --button-bg: #f0f0f0; --button-fg: #242424; --button-hover: #e8e8e8; --button-active: #dddddd; } /* Dark theme */ .theme-dark { --bg: #1e1e1e; --fg: #f5f5f5; --card-bg: #2a2a2a; --border: #444444; --accent: #90caf9; --header-bg: #2a2a2a; --placeholder: #7a7a7a; --button-bg: #3a3a3a; --button-fg: #f5f5f5; --button-hover: #4a4a4a; --button-active: #5a5a5a; } /* Removed grey theme. Grey styling is no longer supported. */ /* Forest Green theme */ .theme-forest { --bg: #162519; --fg: #e3f2e7; --card-bg: #223828; --border: #2f4a33; --accent: #7fc27b; --header-bg: #1e3122; --placeholder: #96b19b; --button-bg: #2a4230; --button-fg: #e3f2e7; --button-hover: #33503a; --button-active: #3c5e44; } /* Ocean Blue theme */ .theme-ocean { --bg: #0a1f31; --fg: #d7ecff; --card-bg: #123552; --border: #1f4f73; --accent: #51aef7; --header-bg: #102b43; --placeholder: #89a7c4; --button-bg: #1a3f63; --button-fg: #d7ecff; --button-hover: #215074; --button-active: #296287; } /* * Light theme overrides: unify button colours to match the Add Snippet button. In * the light theme we want every button (and other interactive controls that use * the button variables) to adopt the accent colour as their background with * white text. Hover and active states are darker shades of the accent. */ .theme-light { /* Use a deeper green for light theme buttons so they are easier to distinguish */ --button-bg: #388e3c; --button-fg: #ffffff; /* Provide progressively darker shades for hover and active states */ --button-hover: #2e7d32; --button-active: #1b5e20; } /* Additional colour themes. These follow the same variable naming convention as the * existing themes and provide a range of accent colours. */ /* Adjusted purple theme to better match the rich, moody styling of the forest and ocean themes. * The background and card colours are now much darker with light text for improved * contrast. Buttons adopt the same palette so they remain readable. */ .theme-purple { --bg: #140020; --fg: #f2e6f8; --card-bg: #1f0030; --border: #300042; --accent: #9c27b0; --header-bg: #1a0024; --placeholder: #b68ecf; --button-bg: #33004d; --button-fg: #f2e6f8; --button-hover: #3f005f; --button-active: #4a0073; } /* Adjusted pink theme to use deeper berry tones for the background and cards. * Light foreground ensures readability and buttons follow the same palette. */ .theme-pink { /* Soften the pink palette to create a true pastel appearance. The backgrounds and cards are now light blush hues rather than dark berry tones. Foreground text uses a darker mauve for sufficient contrast. Buttons adopt a soft salmon tone with progressively deeper shades on hover and active states. */ /* * Adjust the pastel pink palette based on user feedback. The * lightest tones are now slightly darker to improve contrast and * reduce glare, while the darkest accent hues are lightened a bit * to avoid appearing too saturated. These tweaks maintain the * soft, playful feel of the original palette whilst improving * usability. */ --bg: #ffeaf0; /* slightly deeper pink than before */ --fg: #4e2a31; /* retain dark mauve text for readability */ --card-bg: #ffdee8; /* cards a touch darker for contrast */ --border: #ffc6d4; /* deeper rose border */ --accent: #ff70b1; /* brighten the main accent colour */ --header-bg: #ffe3f1; /* headers darkened slightly */ --placeholder: #b57a8a; /* adjust placeholder to complement new palette */ --button-bg: #ff9ac3; /* lighten the darkest button colour */ --button-fg: #4e2a31; /* retain dark text on buttons */ --button-hover: #ff8ab4;/* hover state remains cohesive */ --button-active: #ff799f;/* active state slightly lighter */ } /* Allow snippets and templates to override their card background colour via a custom CSS variable set directly on the element. If --custom-bg is not provided the element falls back to the current theme’s card colour. */ .snippet, .template-card { background-color: var(--custom-bg, var(--card-bg)); } /* ----------------------------------------------------------------------------- * Per-card colour propagation * * When a user selects a custom colour for a snippet or template card the script * computes lighter shades for interactive elements and stores them on * `--custom-btn-*` variables. These rules ensure that the custom colour * propagates throughout the card: the header, formatting toolbar controls, * ordering dropdown, template field rows and the “Add Field” button inherit * these variables. Elements that should remain white (e.g. text boxes, * dropdowns within fields and edit‑title inputs) continue to use the default * theme colours. */ /* Colour the headers of snippets and templates. * * When the user picks a custom background colour the header should adopt * a lighter shade derived from that colour. This is provided by the * `--custom-header-bg` variable which is set by the script when a card * background is customised. If a header colour isn’t set the header * falls back to the card’s custom background (if present) or the * theme’s header colour. We intentionally avoid using the custom * button shade here so that changing only the button colour does not * unintentionally recolour the header. */ .snippet .snippet-header, .template-card .snippet-header { background-color: var(--custom-header-bg, var(--custom-bg, var(--header-bg))); } /* Colour formatting toolbar select dropdowns and buttons * * Buttons and selects inherit per-card custom button colours when * present. Their text colour likewise inherits a custom button * foreground if one has been specified. */ .snippet .snippet-toolbar .toolbar-select, .template-card .snippet-toolbar .toolbar-select, .snippet .snippet-toolbar .toolbar-btn, .template-card .snippet-toolbar .toolbar-btn { background-color: var(--custom-btn-bg, var(--button-bg)); color: var(--custom-btn-fg, var(--button-fg)); border-color: var(--custom-btn-bg, var(--border)); } /* Colour the ordering dropdown using the lighter shade by default. When a custom colour is applied to a card the dropdown should inherit the computed button shade. The theme‑specific rules for selects set colours with !important; therefore provide more specific overrides below for cards with a custom colour. */ .snippet .order-select, .template-card .order-select { background-color: var(--custom-btn-bg, var(--card-bg)); color: var(--custom-btn-fg, var(--button-fg)); border-color: var(--custom-btn-bg, var(--border)); } /* Override the theme‑specific select styling when a card defines a * custom button or background colour. These selectors rely on * [data-bg-color] and [data-btn-color] attributes set by the script. * !important is used because the theme rules also use !important. */ .snippet[data-bg-color] .order-select, .template-card[data-bg-color] .order-select, .snippet[data-btn-color] .order-select, .template-card[data-btn-color] .order-select { background-color: var(--custom-btn-bg, var(--button-bg)) !important; color: var(--custom-btn-fg, var(--button-fg)) !important; border-color: var(--custom-btn-bg, var(--border)) !important; } .snippet[data-bg-color] .order-select option, .template-card[data-bg-color] .order-select option, .snippet[data-btn-color] .order-select option, .template-card[data-btn-color] .order-select option { background-color: var(--custom-btn-bg, var(--button-bg)) !important; color: var(--custom-btn-fg, var(--button-fg)) !important; } /* Template field rows adopt the card’s primary background colour */ .template-card .template-field-row { background-color: var(--custom-bg, var(--card-bg)); } /* ----------------------------------------------------------------- * Per-card custom foreground colours * * When users customise the text colour of a snippet or template card the * script sets the CSS variables `--custom-fg` and `--custom-btn-fg`. These * rules ensure that general text within the card, as well as text on * buttons, selects and other controls, inherit the chosen colour. If the * custom variables are not set the values fall back to the theme defaults. */ .snippet, .template-card { color: var(--custom-fg, var(--fg)); } .snippet .icon-btn, .template-card .icon-btn, .snippet .color-btn, .template-card .color-btn, .snippet .toolbar-btn, .template-card .toolbar-btn, .snippet .toolbar-select, .template-card .toolbar-select, .snippet .copy-btn, .template-card .copy-btn, .snippet .order-select, .template-card .order-select { color: var(--custom-btn-fg, var(--button-fg)); } .snippet .order-select option, .template-card .order-select option { color: var(--custom-btn-fg, var(--button-fg)); } /* The “Add Field” button uses the lighter button shade when a colour is set * and its label adopts the TXT colour when specified. * * When the user chooses a BTN colour via the colour picker, the Add Field * button’s background and border should match the other buttons within * the card. Separately, choosing a TXT colour should recolour the * “+ Add Field” text itself. To accomplish this the button’s colour * property falls back to `--custom-fg` when available, then * `--custom-btn-fg`, and finally the theme’s default button foreground. * * We set border colours on hover and active states so that the border * continues to match the darker or lighter shades of the custom button * colour. */ .template-card .add-field-btn { background-color: var(--custom-btn-bg, var(--button-bg)); /* Use !important to ensure per-card text and border colours override generic theme-specific rules declared later in this file. */ color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border: 1px solid var(--custom-btn-bg, var(--border)) !important; } .template-card .add-field-btn:hover { background-color: var(--custom-btn-hover, var(--button-hover)); color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border-color: var(--custom-btn-hover, var(--button-hover)) !important; } .template-card .add-field-btn:active { background-color: var(--custom-btn-active, var(--button-active)); color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border-color: var(--custom-btn-active, var(--button-active)) !important; } /* Remove borders from specific icon buttons (tag, clear, delete) for a cleaner look */ .icon-btn.tag-btn, .icon-btn.clear-template-btn, .icon-btn.delete-template-btn, .icon-btn.clear-btn, .icon-btn.delete-btn { border: none; } /* Restore borders for non‑icon field buttons to maintain separation */ .field-confirm-btn, .field-remove-btn, .field-up-btn, .field-down-btn, .field-edit-btn, .padlock-btn, .field-date-btn, .field-time-btn { border: 1px solid var(--border); } /* Search field clear button sits inside the search wrapper and clears the query. */ .search-field { position: relative; } .search-field .clear-search-btn { position: absolute; /* Position the clear button to the left of the search icon. A larger right offset ensures the button does not overlap the built-in search icon. */ /* Position the clear button to the left of the search icon. Using a rem-based offset keeps the spacing consistent across fonts and themes. */ right: 2.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; /* Increase the font size slightly for better visibility and use the accent colour to ensure the × icon is easy to see on all themes. */ font-size: 1.2rem; color: var(--accent); display: none; } .search-field .clear-search-btn:hover { color: var(--accent); } /* Tag filter clear button provides a quick way to deselect all tags. */ .tag-filter-panel .clear-tags-btn { display: block; margin-top: 8px; background: var(--button-bg); color: var(--button-fg); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; width: 100%; text-align: center; } .tag-filter-panel .clear-tags-btn:hover { background: var(--button-hover); } /* Colour picker button used in snippet and template cards. */ /* * Colour button styling * * The colour-picker button now matches the appearance of other icon buttons * such as clear or delete. It uses the same dimensions and backgrounds * defined by the theme and responds to hover/active states. A palette icon * (🎨) is used within the button but may be replaced with an inline SVG. */ .color-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 4px; background: var(--button-bg); color: var(--button-fg); cursor: pointer; font-size: 1rem; transition: background-color 0.2s ease; } .color-btn:hover { background: var(--button-hover); } .color-btn:active { background: var(--button-active); } /* ----------------------------------------------------------------- * Colour mode selector styling * * The colour picker popover now includes a small row of buttons that * allow the user to choose whether a colour applies to the background, * the buttons, or the text of a card. These buttons are styled * similarly to icon buttons and visually indicate the active mode. */ .color-mode-selector { display: flex; justify-content: center; gap: 0.25rem; margin-bottom: 0.5rem; } .color-mode-selector .color-mode-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--button-bg); color: var(--button-fg); cursor: pointer; transition: background-color 0.2s ease; } .color-mode-selector .color-mode-btn:hover { background: var(--button-hover); } .color-mode-selector .color-mode-btn.active { background: var(--button-active); } /* ----------------------------------------------------------------- * Modal header and actions layout for snippet manager * * Centre align the modal headings and arrange the main action buttons * horizontally with equal spacing. All buttons share the same colour * scheme by using the `.add-snippet-btn` class. */ .modal-content h2 { text-align: center; margin-top: 0; } .manager-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; } .manager-actions .add-snippet-btn { flex: 0 1 auto; } /* Snippet manager button anchored above the footer. */ /* * Snippet manager button styling * * Previously this button was positioned absolutely at the bottom of the viewport * which caused it to overlap other content. We now allow the button to * participate in normal document flow so it appears after all snippets and * controls without covering anything. The button is centred with a * margin and adopts the same colours as other primary action buttons. */ .snippet-manager-btn { position: static; display: block; margin: 2rem auto 1rem; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; background-color: var(--button-bg); color: var(--button-fg); cursor: pointer; transition: background-color 0.2s ease; } .snippet-manager-btn:hover { background-color: var(--button-hover); } .snippet-manager-btn:active { background-color: var(--button-active); } /* Modal styling for snippet manager and import/export dialogs. */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 10000; } .modal-overlay.active { display: flex; } .modal-content { background-color: var(--card-bg); color: var(--fg); padding: 20px; border-radius: 8px; max-height: 80vh; overflow-y: auto; width: 90%; max-width: 600px; } .modal-content h2 { margin-top: 0; margin-bottom: 12px; } .modal-content .modal-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; } /* Buttons within a modal actions row should not centre themselves. The primary action buttons (e.g. .add-snippet-btn) define margin: 1rem auto, which centres them horizontally. When placed inside a flexbox row this margin causes the button to ignore justify-content. Remove the auto margins so the buttons align to the end of the row. */ .modal-content .modal-actions button { margin: 0; } /* When modal actions are also labelled as manager actions, centre the buttons. */ /* When an actions row is both a modal-actions and manager-actions container, centre its children. */ .modal-content .modal-actions.manager-actions { justify-content: center; } /* * Snippet manager main menu layout * * The manager menu now displays its primary actions (import, export, delete) * stacked vertically on the left side of the modal, with the close button * aligned to the right. This structure mirrors the add buttons used * elsewhere in the interface and avoids crowding. Each button inherits * the primary action styling from `.add-snippet-btn` for visual * consistency. */ .manager-menu { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .manager-menu .manager-actions-left { display: flex; flex-direction: column; gap: 0.5rem; } .manager-menu .manager-actions-right { display: flex; flex-direction: column; gap: 0.5rem; margin-left: auto; } /* Delete all button inherits primary button styles */ .delete-all-btn { display: block; margin: 0; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; background-color: var(--button-bg); color: var(--button-fg); cursor: pointer; transition: background-color 0.2s ease; } .delete-all-btn:hover { background-color: var(--button-hover); } .delete-all-btn:active { background-color: var(--button-active); } .modal-content .export-list label, .modal-content .import-list label { display: flex; align-items: center; margin: 4px 0; } .modal-content input[type="checkbox"] { margin-right: 8px; } /* Adjusted red theme to adopt richer wine-red backgrounds and surfaces, similar to * the forest and ocean themes. Foreground colours are light and buttons stay * consistent. */ .theme-red { --bg: #2a0000; --fg: #ffe8e8; --card-bg: #3b0000; --border: #4d0000; --accent: #f44336; --header-bg: #330000; --placeholder: #d38c8c; --button-bg: #5a0000; --button-fg: #ffe8e8; --button-hover: #690000; --button-active: #7a0000; } /* Adjusted orange theme: deeper burnt orange hues for backgrounds and cards * with light text, echoing the atmosphere of the forest and ocean themes. */ .theme-orange { --bg: #2b1600; --fg: #ffefd8; --card-bg: #452900; --border: #5c3500; --accent: #ff9800; --header-bg: #3a2300; --placeholder: #d3a87a; --button-bg: #5c3500; --button-fg: #ffefd8; --button-hover: #6d3f00; --button-active: #7d4800; } /* Adjusted yellow theme: deeper golden-brown backdrop with light yellow accents * and black button text for readability. */ .theme-yellow { --bg: #2a2600; --fg: #fefad5; --card-bg: #3d3600; --border: #504800; --accent: #ffeb3b; --header-bg: #332e00; --placeholder: #c7b800; --button-bg: #594f00; --button-fg: #000000; --button-hover: #665900; --button-active: #736400; } /* Style ordering dropdown to match primary action colours in the light theme */ /* In the light theme the small position selector (order-select) should adopt the same styling as primary buttons. Because HTML select elements are notoriously difficult to style across browsers we explicitly override the default background, border and text colours and remove the native platform appearance to ensure a consistent look. Options inside the dropdown inherit the accent colour so that the opened list also feels cohesive. */ .theme-light .order-select { /* Match icon/tag buttons in light theme */ background-color: var(--button-bg) !important; color: var(--button-fg) !important; border: 1px solid var(--border) !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.25rem; border-radius: 4px; /* Add a custom drop-down arrow so the user recognises this as a select */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.6rem 0.35rem; padding-right: 1.5rem; } .theme-light .order-select option { background-color: var(--button-bg); color: var(--button-fg); } /* Always display date/time picker icons in black for visibility across all themes */ .field-value-inline .field-date-btn, .field-value-inline .field-time-btn { color: #000000 !important; } .field-value-inline .field-date-btn svg, .field-value-inline .field-time-btn svg { fill: #000000 !important; } /* Layout for top bar */ .topbar { display: flex; justify-content: center; padding: 1rem 1.5rem; background-color: var(--header-bg); border-bottom: 1px solid var(--border); } display: none; } min-width: 250px; } margin-top: 1.25rem; } /* * The topbar uses a single flex container so that the logo, title, theme * selector and action buttons sit in a single row with consistent spacing. * On narrow screens the flex container wraps items to the next line to * preserve readability. The gap matches the spacing between the action * buttons so that the logo is “pushed” right up against the title and * controls. */ .topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 auto; max-width: 1200px; width: 100%; } .brand-cluster { display: flex; align-items: center; gap: 0.75rem; /* spacing between logo and stack */ flex: 0 0 auto; /* keeps the group tight, no stretching */ } /* * The topbar-stack groups the title and controls into a vertical column. This * allows the theme selector and action buttons to sit underneath the title * rather than beside it. Controls are further grouped in a row within * .topbar-controls for consistent spacing. */ .topbar-stack { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; flex: 0 0 auto; /* don’t stretch across the screen */ } .topbar-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .topbar-stack { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; min-width: 0; /* Allow the stack to grow and fill the available horizontal space */ flex: 1; } .topbar-left { display: flex; align-items: center; justify-content: center; } .topbar-right { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .logo { /* Set the Koppy logo to a consistent 100 × 100 pixels across all viewports */ width: 100px; height: 100px; object-fit: contain; } .title { font-size: 1.25rem; font-weight: 600; color: var(--fg); text-align: center; } @media (max-width: 720px) { .topbar { padding: 0.75rem 1rem; } .topbar-inner { gap: 1rem; } /* Maintain the logo size on smaller screens */ .logo { width: 100px; height: 100px; } } @media (max-width: 540px) { .topbar-inner { gap: 0.75rem; } /* Maintain the logo size on the smallest screens */ .logo { width: 100px; height: 100px; } } /* Hide labels visually but keep them accessible to screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .theme-selector { /* Match the height and padding of the topbar buttons for visual consistency */ padding: 0.4rem 0.75rem; border: 1px solid var(--border); background-color: var(--button-bg); color: var(--button-fg); border-radius: 4px; cursor: pointer; height: 32px; line-height: 1; } .topbar-btn { padding: 0.4rem 0.75rem; border: 1px solid var(--border); background-color: var(--button-bg); color: var(--button-fg); border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s ease; text-decoration: none; /* prevent underline on anchor buttons */ } .topbar-btn:hover { background-color: var(--button-hover); text-decoration: none; } .topbar-btn:active { background-color: var(--button-active); } /* Ensure no underline on focus for anchor-style buttons */ .topbar-btn:focus { text-decoration: none; } .menu-btn { display: inline-flex; align-items: center; gap: 0.35rem; } .menu-btn svg { width: 16px; height: 16px; fill: currentColor; } .auth-btn { font-weight: 500; } /* Snippet container layout */ .layout-controls { width: 100%; max-width: 100%; margin: 1rem auto 0; padding: 0 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; } .layout-label { font-weight: 600; } .layout-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--button-bg); color: var(--button-fg); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .layout-toggle-btn:hover { background: var(--button-hover); } .layout-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .layout-toggle-btn.is-active { background: var(--accent); color: var(--card-bg); border-color: var(--accent); } .snippets-container { width: 100%; margin: 1rem auto; padding: 0 1rem; flex-grow: 1; } .snippets-container.layout-vertical { display: flex; flex-direction: column; gap: 1rem; max-width: 900px; } .snippets-container.layout-grid { display: grid; gap: 1rem; /* Max two columns */ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1400px; } @media (max-width: 480px) { .snippets-container.layout-grid { /* Stack to one column on small screens */ grid-template-columns: 1fr; } } .empty-state { max-width: 900px; margin: 1.5rem auto 0; padding: 1.25rem 1.5rem; background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--fg); } .empty-state[hidden] { display: none; } .empty-state-title { font-size: 1.25rem; margin-bottom: 0.5rem; } .empty-state-body { margin-bottom: 1rem; color: var(--fg); opacity: 0.85; } .empty-state-accordion { display: flex; flex-direction: column; gap: 0.75rem; } .empty-state-accordion details { border: 1px solid var(--border); border-radius: 6px; background-color: var(--card-bg); padding: 0.75rem 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .empty-state-accordion details[open] { border-color: var(--accent); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } .empty-state-accordion summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .empty-state-accordion summary::marker, .empty-state-accordion summary::-webkit-details-marker { display: none; } .empty-state-accordion summary { position: relative; /* makes ::after anchor here */ padding-right: 1.5rem; /* space for the +/− symbol */ list-style: none; /* removes default marker */ } .empty-state-accordion summary::marker, .empty-state-accordion summary::-webkit-details-marker { display: none; /* hide browser’s default marker */ } .empty-state-accordion summary::after { content: '+'; /* collapsed state */ position: absolute; right: 0; top: 0; font-weight: 700; } .empty-state-accordion details[open] summary::after { content: '-'; /* open state */ } .empty-state-accordion details[open] summary::after { content: '-'; } .empty-state-panel { margin-top: 0.75rem; display: grid; gap: 0.5rem; font-size: 0.95rem; line-height: 1.55; } .empty-state-panel ol { padding-left: 1.25rem; margin: 0; display: grid; gap: 0.35rem; } .empty-state-panel p { margin: 0; } /* Add snippet and template buttons */ .add-snippet-btn, .add-template-btn, .add-field-btn { display: block; margin: 1rem auto; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; background-color: var(--accent); color: #ffffff; cursor: pointer; transition: background-color 0.2s ease; } .add-snippet-btn:hover, .add-template-btn:hover, .add-field-btn:hover { /* Colour overrides for hover states are defined per-theme below */ } /* Since CSS does not allow opacity function directly on CSS variables in plain CSS, override the hover effect using a slightly darker colour. Each theme may override this if necessary. */ .theme-light .add-snippet-btn, .theme-light .add-template-btn { /* Match light theme primary buttons to icon/tag button colours */ background-color: var(--button-bg); color: var(--button-fg); } .theme-light .add-snippet-btn:hover, .theme-light .add-template-btn:hover, .theme-light .add-field-btn:hover { background-color: var(--button-hover); } .theme-dark .add-snippet-btn:hover, .theme-dark .add-template-btn:hover, .theme-dark .add-field-btn:hover { background-color: #7ab6e6; } .theme-dark .add-snippet-btn, .theme-dark .add-template-btn, .theme-dark .add-field-btn { /* In the dark theme, mirror the styling of the copy button: use the standard button background and text colours so the add button fits seamlessly with other controls. */ background-color: var(--button-bg); color: var(--button-fg); border: 1px solid var(--border); } /* Override hover and active states for the add button in dark theme to match the button palette rather than the accent colour. */ .theme-dark .add-snippet-btn:hover, .theme-dark .add-template-btn:hover, .theme-dark .add-field-btn:hover { background-color: var(--button-hover); } .theme-dark .add-snippet-btn:active, .theme-dark .add-template-btn:active, .theme-dark .add-field-btn:active { background-color: var(--button-active); } .theme-grey .add-snippet-btn:hover, .theme-grey .add-template-btn:hover, .theme-grey .add-field-btn:hover { background-color: #546e7a; } .theme-forest .add-snippet-btn:hover, .theme-forest .add-template-btn:hover, .theme-forest .add-field-btn:hover { background-color: #3c5e44; } .theme-ocean .add-snippet-btn:hover, .theme-ocean .add-template-btn:hover, .theme-ocean .add-field-btn:hover { background-color: #2b5f89; } /* * Reverse the normal and hover colours of the Add Snippet button for the * Forest Green and Ocean Blue themes. In these themes the button's * default state should use what was previously the hover colour, and * hovering should restore the accent colour. Text remains white for * adequate contrast. */ .theme-forest .add-snippet-btn, .theme-forest .add-template-btn, .theme-forest .add-field-btn { background-color: #3c5e44; color: #ffffff; } .theme-forest .add-snippet-btn:hover, .theme-forest .add-template-btn:hover, .theme-forest .add-field-btn:hover { background-color: #7fc27b; } .theme-ocean .add-snippet-btn, .theme-ocean .add-template-btn, .theme-ocean .add-field-btn { background-color: #2b5f89; color: #ffffff; } .theme-ocean .add-snippet-btn:hover, .theme-ocean .add-template-btn:hover, .theme-ocean .add-field-btn:hover { background-color: #51aef7; } /* * Ensure the "Add Field" button inside template cards follows the same * colour rules as other add buttons across themes. Without these * overrides the `.template-card .add-field-btn` selector defined above * prevented theme-specific rules from applying, causing the button to * retain the default accent colour on dark, forest and ocean themes. * These rules increase specificity by targeting both the theme class * and `.template-card` so they win over the earlier definition. Note * that for Forest Green and Ocean Blue themes we mirror the reversed * colour scheme defined for the Add Snippet button: the normal state * uses what was previously the hover colour, and hovering applies * the accent colour. For the dark theme we adopt the standard * button palette. */ /* In dark theme, mirror the styling of the copy button for template add field * buttons only when no custom button colour has been applied. When a * template card defines a custom button colour (via data-btn-color) the * generic .template-card .add-field-btn rule will handle colours via * CSS variables. */ .theme-dark .template-card:not([data-btn-color]) .add-field-btn { background-color: var(--button-bg); color: var(--button-fg); border: 1px solid var(--border); } .theme-dark .template-card:not([data-btn-color]) .add-field-btn:hover { background-color: var(--button-hover); } .theme-dark .template-card:not([data-btn-color]) .add-field-btn:active { background-color: var(--button-active); } /* In the Forest Green theme, reverse the colour palette for the Add Field * button only when a custom button colour has not been chosen. The * default state uses the darker shade and hovering applies the accent * colour. */ .theme-forest .template-card:not([data-btn-color]) .add-field-btn { background-color: #3c5e44; color: #ffffff; } .theme-forest .template-card:not([data-btn-color]) .add-field-btn:hover { background-color: #7fc27b; } /* In the Ocean Blue theme, reverse the colour palette for the Add Field * button only when a custom button colour has not been chosen. */ .theme-ocean .template-card:not([data-btn-color]) .add-field-btn { background-color: #2b5f89; color: #ffffff; } .theme-ocean .template-card:not([data-btn-color]) .add-field-btn:hover { background-color: #51aef7; } /* When a template card defines a custom button colour, ensure the Add Field * button adopts the computed shades rather than the theme’s default. The * data attribute increases specificity so these rules override the * theme-specific overrides above. */ .template-card[data-btn-color] .add-field-btn { background-color: var(--custom-btn-bg, var(--button-bg)) !important; color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border-color: var(--custom-btn-bg, var(--border)) !important; } .template-card[data-btn-color] .add-field-btn:hover { background-color: var(--custom-btn-hover, var(--button-hover)) !important; color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border-color: var(--custom-btn-hover, var(--button-hover)) !important; } .template-card[data-btn-color] .add-field-btn:active { background-color: var(--custom-btn-active, var(--button-active)) !important; color: var(--custom-fg, var(--custom-btn-fg, var(--button-fg))) !important; border-color: var(--custom-btn-active, var(--button-active)) !important; } /* Snippet card */ /* * Snippet and template headers * * By default the header background spans the full width of the card. On * cards with rounded corners this resulted in the header corners poking * through the outline creating a jarring 90° overlap. Apply a border * radius to the top corners so the header follows the curvature of the * card. The radius matches the card’s own radius (6px) to avoid any * visual discontinuity. This applies to both snippet and template * cards because they share the `.snippet-header` class. */ .snippet-header { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; padding: 0.5rem 0.75rem; background-color: var(--header-bg); cursor: pointer; user-select: none; /* Round the top corners to match the card */ border-top-left-radius: 6px; border-top-right-radius: 6px; } /* When a snippet or template card is collapsed, the header becomes the only * visible portion of the card. To ensure the header aligns with the * rounded rectangle outline of the card, also round its bottom corners. * Without this the square background of the header pokes out beyond * the card’s curved bottom corners when collapsed. */ /* When a snippet or template card is collapsed, the header becomes the only * visible portion of the card. To ensure the header aligns with the * rounded rectangle outline of the card, also round its bottom corners. * Without this the square background of the header pokes out beyond * the card’s curved bottom corners when collapsed. Apply this rule * both to snippet headers and template headers so collapsed templates * render correctly. */ .snippet.collapsed .snippet-header, .template-card.collapsed .snippet-header, .template-card.collapsed .template-header { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .snippet-title-wrapper { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; } /* * Snippet and template cards * * Previously, cards used `overflow: hidden` which clipped any absolutely * positioned children. The custom colour picker popover for snippets and * templates needs to extend beyond the card’s boundaries, so `overflow` * must be visible. All other styling remains unchanged. */ .snippet { border: 1px solid var(--border); border-radius: 6px; background-color: var(--card-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.05); overflow: visible; } gap: 0.5rem; justify-content: flex-start; padding: 0.5rem 0.75rem; background-color: var(--header-bg); cursor: pointer; user-select: none; } .snippet-title { flex: 1; min-width: 0; /* Remove the default input appearance so that the title input blends into the header. Background and border are disabled entirely to avoid showing a white box. */ background: transparent; border: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; font-size: 1rem; color: var(--custom-fg, var(--fg)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* The placeholder text for the snippet title should match the colour of other button labels (especially in read‑only mode) so that untitled snippets blend seamlessly. */ .snippet-title::placeholder { color: var(--button-fg); opacity: 1; } /* Vendor prefixed placeholder selectors for broader browser support */ .snippet-title::-webkit-input-placeholder { color: var(--button-fg); opacity: 1; } .snippet-title::-moz-placeholder { color: var(--button-fg); opacity: 1; } .snippet-title:-ms-input-placeholder { color: var(--button-fg); opacity: 1; } .snippet-title:focus { outline: none; } /* Default appearance (editing mode) */ /* When editing a snippet title, preserve the custom text colour if one has been defined. Otherwise fall back to pure black for optimal contrast. */ .snippet-title { color: var(--custom-fg, #000000); font-size: 0.85rem; font-weight: 400; background: transparent; border: none; outline: none; } .snippet-title.read-only { /* When a title is read-only, present it as plain text. Remove interactive affordances and inherit any per‑card custom text colour. Fallback to the theme’s button foreground when no custom colour is set. */ pointer-events: none; cursor: default; background-color: transparent; border: none; outline: none; color: var(--custom-fg, var(--button-fg)); } /* * Ensure the snippet title appears as a header rather than an input. Match * the typography of the Copy button’s label so that the title blends * seamlessly with the UI. We override font size, weight and colour to * mirror the copy button text. */ /* * Present the snippet title like a small header when not editing. Use the * custom text colour if defined, otherwise fall back to the theme’s * button foreground. Font size/weight mirror the copy button label for * a cohesive look. */ .snippet-title { font-size: 0.85rem; font-weight: 300; color: var(--custom-fg, var(--button-fg)); } .snippet-header-buttons { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } /* Arrow indicator for collapse/expand */ .toggle-arrow { margin-right: 0; transition: transform 0.2s ease; font-size: 0.8rem; /* Inherit per-card text colour so the toggle arrow matches custom foregrounds defined via the colour picker. */ color: var(--custom-fg, var(--fg)); } .snippet.collapsed .toggle-arrow { transform: rotate(-90deg); } /* Icon button styling */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--button-bg); color: var(--button-fg); border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; } .icon-btn:hover { background: var(--button-hover); } .icon-btn:active { background: var(--button-active); } /* * Allow individual snippet or template cards to override the button colours * on a per-card basis. When a card defines custom variables for its * buttons (e.g. --custom-btn-bg, --custom-btn-hover and --custom-btn-active), * those will be used in preference to the theme’s default colours. This * enables a custom snippet colour to propagate to its buttons with a lighter * shade, improving contrast whilst maintaining visual cohesion. */ /* * Icon and colour buttons inherit per‑card custom button colours for both * their backgrounds and foregrounds. When a user picks a custom text * colour via the colour picker (TXT mode) the script sets * --custom-btn-fg to the chosen colour. Use this value for the button * text and icon colours with a fallback to the theme’s button foreground. */ .snippet .icon-btn, .template-card .icon-btn, .snippet .color-btn, .template-card .color-btn { background: var(--custom-btn-bg, var(--button-bg)); color: var(--custom-btn-fg, var(--button-fg)); } .snippet .icon-btn:hover, .template-card .icon-btn:hover, .snippet .color-btn:hover, .template-card .color-btn:hover { background: var(--custom-btn-hover, var(--button-hover)); } .snippet .icon-btn:active, .template-card .icon-btn:active, .snippet .color-btn:active, .template-card .color-btn:active { background: var(--custom-btn-active, var(--button-active)); } /* * Apply per-card custom button colours to additional controls such as * template field buttons, padlock buttons and tag chips. The border * inherits the same colour to ensure outlines match the chosen theme. */ .snippet .field-confirm-btn, .template-card .field-confirm-btn, .snippet .field-remove-btn, .template-card .field-remove-btn, .snippet .field-up-btn, .template-card .field-up-btn, .snippet .field-down-btn, .template-card .field-down-btn, .snippet .field-edit-btn, .template-card .field-edit-btn, .snippet .padlock-btn, .template-card .padlock-btn { background-color: var(--custom-btn-bg, var(--button-bg)); color: var(--custom-btn-fg, var(--button-fg)); border-color: var(--custom-btn-bg, var(--border)); } .snippet .field-confirm-btn:hover, .template-card .field-confirm-btn:hover, .snippet .field-remove-btn:hover, .template-card .field-remove-btn:hover, .snippet .field-up-btn:hover, .template-card .field-up-btn:hover, .snippet .field-down-btn:hover, .template-card .field-down-btn:hover, .snippet .field-edit-btn:hover, .template-card .field-edit-btn:hover, .snippet .padlock-btn:hover, .template-card .padlock-btn:hover { background-color: var(--custom-btn-hover, var(--button-hover)); } .snippet .field-confirm-btn:active, .template-card .field-confirm-btn:active, .snippet .field-remove-btn:active, .template-card .field-remove-btn:active, .snippet .field-up-btn:active, .template-card .field-up-btn:active, .snippet .field-down-btn:active, .template-card .field-down-btn:active, .snippet .field-edit-btn:active, .template-card .field-edit-btn:active, .snippet .padlock-btn:active, .template-card .padlock-btn:active { background-color: var(--custom-btn-active, var(--button-active)); } /* Tag chips and tag buttons inherit per-card button colours */ .snippet .tag-chip, .template-card .tag-chip, .snippet .tag-btn, .template-card .tag-btn { background-color: var(--custom-btn-bg, var(--button-bg)); color: var(--custom-btn-fg, var(--button-fg)); border-color: var(--custom-btn-bg, var(--border)); } .snippet .tag-chip:hover, .template-card .tag-chip:hover, .snippet .tag-btn:hover, .template-card .tag-btn:hover { background-color: var(--custom-btn-hover, var(--button-hover)); } .snippet .tag-chip:active, .template-card .tag-chip:active, .snippet .tag-btn:active, .template-card .tag-btn:active { background-color: var(--custom-btn-active, var(--button-active)); } /* Outline borders and separators inherit the custom button colour. Apply this to snippet content areas, template field rows and toolbar dividers to harmonise the card’s accents. */ .snippet .snippet-content { border-color: var(--custom-btn-bg, var(--border)); } .template-card .template-field-row { border: 1px solid var(--custom-btn-bg, var(--border)); } .snippet .toolbar-divider, .template-card .toolbar-divider { background: var(--custom-btn-bg, var(--border)); } .edit-title-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 28px; height: 28px; border: none; background: transparent; /* Inherit the per-card text colour so the edit title button icon matches custom foregrounds defined via the colour picker. */ color: var(--custom-fg, var(--fg)); cursor: pointer; transition: color 0.2s ease; } .edit-title-btn.is-hidden { display: none; } .edit-title-btn:hover { color: var(--accent); } .edit-title-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; } .edit-title-btn svg { width: 18px; height: 18px; fill: currentColor; } .edit-title-btn.active { color: var(--accent); } .icon-btn svg { width: 16px; height: 16px; fill: currentColor; } .copy-btn { width: auto; min-width: 96px; padding: 0 0.75rem; height: auto; min-height: 32px; gap: 0.35rem; font-weight: 600; } .copy-btn .btn-label { font-size: 0.85rem; line-height: 1; } .copy-btn.copied { background: var(--accent); color: var(--card-bg); } .copy-btn.copied:hover, .copy-btn.copied:active { background: var(--accent); } /* * When the copy button is collapsed to its icon‑only form on small * viewports, there is no room to display the “Copied!” label. Use a * distinct green background to indicate success to the user without * relying on the label. This override applies at widths comparable * to the breakpoint where the label is hidden (640px). */ @media (max-width: 640px) { .copy-btn.copied { background: #4caf50; color: #ffffff; } .copy-btn.copied:hover, .copy-btn.copied:active { background: #4caf50; } } @media (max-width: 640px) { .copy-btn { min-width: 40px; padding: 0.35rem; } .copy-btn:not(.copied) { gap: 0; } .copy-btn:not(.copied) .btn-label { display: none; } } /* * Collapse the copy button to an icon when the header becomes too narrow, * as determined by the ResizeObserver in script.js. */ .snippet-header.is-compact .copy-btn { min-width: 40px; padding: 0.35rem; } .snippet-header.is-compact .copy-btn:not(.copied) { gap: 0; } .snippet-header.is-compact .copy-btn:not(.copied) .btn-label { display: none; } /* Snippet body */ .snippet-body { padding: 0.5rem 0.75rem; display: none; flex-direction: column; gap: 0.5rem; } /* Show body when not collapsed */ .snippet.expanded .snippet-body { display: flex; } .snippet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .toolbar-select { min-width: 120px; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--button-bg); color: var(--button-fg); font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .toolbar-select--font-size { min-width: 90px; } .toolbar-select:hover { background: var(--button-hover); } .toolbar-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .toolbar-btn { border: 1px solid var(--border); background: var(--button-bg); color: var(--button-fg); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.85rem; cursor: pointer; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .toolbar-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; pointer-events: none; } .toolbar-btn:hover { background: var(--button-hover); } .toolbar-btn:active { background: var(--button-active); } .toolbar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .toolbar-btn.is-active { background: var(--accent); color: var(--card-bg); border-color: var(--accent); } .toolbar-group--color { position: relative; } .toolbar-color-toggle { gap: 0.4rem; min-width: 2.5rem; } .toolbar-color-toggle.is-open { background: var(--button-hover); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .toolbar-color-sample { width: 1.2rem; height: 1.2rem; border-radius: 4px; border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .toolbar-color-caret { font-size: 0.65rem; line-height: 1; display: inline-flex; align-items: center; } .color-popover { position: absolute; top: calc(100% + 0.35rem); left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); padding: 0.5rem; z-index: 40; } .color-popover[hidden] { display: none; } .toolbar-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.25rem; } .toolbar-inline-label { font-size: 0.75rem; color: var(--placeholder); } @media (max-width: 520px) { .toolbar-select { min-width: 100px; } } .snippet-content { min-height: 100px; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; background-color: #ffffff; color: #222222; overflow: auto; outline: none; caret-color: #222222; } /* When a snippet is expanded for editing, ensure the content area has a white background regardless of the selected theme. This mirrors the light theme editing experience and helps users see formatting clearly. */ .snippet.expanded .snippet-content { background-color: #ffffff !important; } /* Placeholder for contenteditable */ .snippet-content:empty::before { content: attr(data-placeholder); color: var(--placeholder); pointer-events: none; } /* Images inserted into snippets should fit within the content area */ .snippet-content img { max-width: 100%; height: auto; display: block; margin: 0.25rem 0; } .snippet-content a { color: inherit; } /* -------------------------------------------------------------------------- */ /* Additional styles for extended Koppy functionality */ /* */ /* These rules support the responsive dashboard, pricing and account pages, */ /* the user menu, snippet manager search and usage indicators, and the new */ /* template card type. They are appended to the end of the existing styles */ /* to minimise interference with previously defined rules. */ /* Back/Navigation buttons */ .back-btn { display: block; /* allow centering with auto margins */ width: fit-content; /* shrink to content width */ margin: 1rem auto; /* center horizontally on the page */ padding: 0.5rem 1rem; background-color: var(--button-bg); color: var(--button-fg); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; text-decoration: none; text-align: center; } .back-btn:hover { background-color: var(--button-hover); } /* Menu dropdown */ .menu-wrapper .menu-dropdown { border-radius: 4px; overflow: hidden; } .menu-wrapper .menu-item:hover { background-color: var(--button-hover); } /* Dashboard */ .dashboard-section { padding: 1rem; } .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .dashboard-card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .dashboard-card h3 { margin-bottom: 0.5rem; font-size: 1.2rem; } .dashboard-card p { margin-bottom: 0.75rem; font-size: 0.9rem; } .dashboard-card .dashboard-link { display: inline-block; background-color: var(--accent); color: #ffffff; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-size: 0.9rem; } .dashboard-card .dashboard-link:hover { opacity: 0.9; } /* Pricing cards */ .pricing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .plan-card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 100%; } .plan-card h3 { margin-bottom: 0.5rem; font-size: 1.3rem; } .plan-card .price { font-size: 1.6rem; font-weight: bold; margin-bottom: 0.5rem; } .plan-card ul { list-style: none; padding: 0; margin: 0 0 0.5rem 0; font-size: 0.9rem; } .plan-card li { margin-bottom: 0.25rem; } .plan-card button { background-color: var(--accent); color: #ffffff; padding: 0.5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-size: 0.9rem; margin-top: auto; align-self: center; } .plan-card button:hover { opacity: 0.9; } /* Pricing comparison table */ .pricing-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; } .pricing-table th, .pricing-table td { border: 1px solid var(--border); padding: 0.5rem; text-align: center; } .pricing-table th { background-color: var(--button-bg); font-weight: 600; } /* Settings form */ .settings-form label { display: block; margin-top: 0.5rem; font-size: 0.9rem; } .settings-form input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; } .settings-form button { margin-top: 0.5rem; padding: 0.5rem 1rem; background-color: var(--accent); color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .settings-form button:hover { opacity: 0.9; } /* Snippet manager search and usage info */ .manager-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; max-width: 900px; padding: 0 1rem; margin-left: auto; margin-right: auto; } #snippetSearchInput { width: 100%; /* Provide extra right padding to accommodate both the clear button and the search icon. Without sufficient padding the search text can overlap the buttons, making them hard to click. */ padding: 0.5rem 3.5rem 0.5rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; } #usageInfo { margin-left: auto; font-size: 0.9rem; } /* Search field wrapper with icon */ .search-field { position: relative; flex: 1; min-width: 240px; } .search-icon { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); opacity: 0.6; pointer-events: none; } /* Wrapper for primary actions on the main page */ .main-actions, .manager-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } /* Keep the add buttons together as one flex item */ .add-buttons { display: inline-flex; flex-wrap: nowrap; gap: 0.5rem; } /* Ensure action buttons inside .main-actions sit side-by-side without extra margins */ .main-actions .add-snippet-btn, .main-actions .add-template-btn, .manager-actions .add-snippet-btn, .manager-actions .add-template-btn { /* Remove the default block layout and auto margins set earlier */ display: inline-flex; align-items: center; margin: 0; } /* Inline helper next to the add buttons (shown only when no items exist) */ .get-started-inline { display: inline-flex; align-items: center; margin-right: 0.75rem; font-size: 0.95rem; opacity: 0.9; } /* Ensure a small gap after the bold lead-in */ .get-started-inline strong { padding-right: 5px; } /* Force hidden attribute to fully hide regardless of author styles */ .get-started-inline[hidden] { display: none !important; } @media (max-width: 640px) { .get-started-inline { flex-basis: 100%; justify-content: center; text-align: center; margin: 0 0 0.5rem; } } /* Tag filter panel (standard page) */ .tag-filter-panel { display: block; /* visible by default; overridden by [hidden] rule below */ background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; max-width: 100%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } /* Ensure the hidden attribute actually hides the panel even with author styles */ .tag-filter-panel[hidden] { display: none !important; } .tag-filter-panel .tag-filter-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; } .tag-filter-panel label.tag-opt { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.9rem; user-select: none; } .tag-filter-panel .no-tags { opacity: 0.7; font-size: 0.9rem; } /* Ensure the Add Template button nudges over when it sits immediately after Add Snippet */ .add-snippet-btn + .add-template-btn { margin-left: 0.5rem; } .add-template-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Template cards */ .template-card { /* * Template cards need to allow absolutely positioned children (like the * custom colour palette popover) to extend outside their boundaries. * Therefore we set overflow to visible. Other flex properties remain * unchanged. */ display: flex; flex-direction: column; overflow: visible; } .template-header .template-title { width: 100%; /* Inherit per-card custom foreground colour for template titles */ color: var(--custom-fg, var(--fg)); } .template-fields { display: flex; flex-direction: column; gap: 0.5rem; } .add-field-btn { align-self: center; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0.5rem 1rem; font-size: 0.9rem; } .template-field-row { border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem; background-color: var(--card-bg); display: flex; flex-direction: column; gap: 0.75rem; } .template-field-row.locked { /* Use the per-card custom button background colour for locked rows when defined, falling back to the theme’s accent colour. This ensures the border colour remains consistent whether the field is being edited or saved. */ border-color: var(--custom-btn-bg, var(--accent)); } /* ------------------------------------------------------------------------- * Light theme readability tweaks * * When a snippet or template card is collapsed, its title becomes read-only. On * the light theme the default button foreground colour is white, causing these * read-only titles to disappear against the pale card background. Force a * black title colour for read-only titles and template titles to ensure * sufficient contrast. */ .theme-light .snippet-title.read-only, /* Always force read-only titles to a high-contrast colour on the light theme unless a custom foreground colour is defined. When a card defines --custom-fg we respect that instead of forcing black. */ .theme-light .snippet-title.read-only, .theme-light .template-title { color: var(--custom-fg, #000000) !important; } .field-controls { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; } /* Each unlocked row line behaves as a flex row */ .field-line { display: flex; align-items: center; gap: 0.5rem; width: 100%; } /* Make type, label, and value lines flex to fill */ .field-line-1 > .field-type, .field-line-2 > .field-label, .field-line-3 > .field-options, .field-line-4 > .field-value-inline { flex: 1 1 auto; min-width: 0; } /* Unlocked controls line */ .field-line.field-line-5 { display: flex; align-items: center; gap: 0.25rem; } .field-controls input, .field-controls select { padding: 0.25rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; } .field-value-select { min-width: 160px; } .field-confirm-btn, .field-remove-btn, .field-up-btn, .field-down-btn, .field-edit-btn { background-color: var(--button-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.9rem; } .field-confirm-btn:hover, .field-remove-btn:hover, .field-up-btn:hover, .field-down-btn:hover, .field-edit-btn:hover { background-color: var(--button-hover); } .field-label-display, .field-value-display { display: block; font-size: 0.9rem; } .template-field-row > .field-label-display { margin: 0; font-weight: 600; color: var(--fg); } .template-field-row > .field-value-display { margin: 0; margin-top: 0.25rem; font-size: 0.85rem; color: var(--fg); opacity: 0.75; } .template-actions { margin-top: 0.5rem; justify-content: flex-start; } .delete-template-btn { background-color: var(--button-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem; cursor: pointer; } .delete-template-btn.confirm { background-color: #f44336 !important; color: #ffffff !important; } /* Action row for delete and clear buttons */ .snippet-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } /* Tags and tag button */ .tags-container { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; /* push following buttons to the right */ } .tag-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.4rem; background-color: var(--button-bg); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; } .tag-chip .remove-tag { background: transparent; border: none; cursor: pointer; color: inherit; line-height: 1; } .tag-btn { background-color: var(--button-bg); /* Remove the border from tag buttons to match other icon buttons */ border: none; border-radius: 4px; padding: 0.35rem; cursor: pointer; } /* Ordering dropdown at the left of headers */ .order-select { width: 3.25rem; min-width: 3.25rem; /* Match the height of icon buttons (32px) */ height: 32px; padding: 0.15rem; border: 1px solid var(--border); border-radius: 4px; margin-right: 0.5rem; background-color: var(--card-bg); color: var(--fg); display: none; /* Hidden by default; shown when expanded */ } /* Show ordering control whenever the item is expanded */ .snippet.expanded .order-select, .template-card.expanded .order-select { display: inline-block; } /* Delete button turns red when awaiting confirmation */ .delete-btn.confirm, .clear-btn.confirm { background-color: #f44336 !important; color: #ffffff !important; } /* Locked field two-line layout */ .field-locked-line { display: flex; flex-direction: column; gap: 0.35rem; } .field-locked-top, .field-locked-bottom { display: flex; align-items: center; gap: 0.5rem; } .template-field-row.locked .field-locked-top .field-label-display { /* Keep label on the first row and let it flex */ flex: 1 1 auto; min-width: 0; white-space: nowrap; /* do not wrap to next line */ overflow: hidden; /* allow truncation when space is tight */ text-overflow: ellipsis; /* show ellipsis when truncated */ } .template-field-row.locked .field-locked-bottom .field-value-inline { /* Let value (and its control) fill remaining space */ flex: 1 1 auto; min-width: 0; } .field-value-inline { display: inline-flex; align-items: center; gap: 0.35rem; flex: 1 1 auto; min-width: 0; position: relative; /* enable positioning of the inline icon button */ } /* Placeholder for current date & time in locked state */ .field-value-placeholder { /* Use the custom foreground colour with reduced opacity for placeholders */ color: var(--custom-fg, var(--fg)); opacity: 0.65; } .field-value-inline input.field-value, .field-value-inline select.field-value-select, .field-value-inline textarea.field-value { flex: 1 1 auto; min-width: 0; } .field-move-group, .field-action-group { display: inline-flex; align-items: center; gap: 0.25rem; } /* Push edit/remove group to the far right on the locked line */ .field-action-group { margin-left: auto; } .template-field-row.locked .field-label-display { /* inline-block enables text-overflow on the flex item */ display: inline-block; font-weight: 600; } .template-field-row.locked .field-value-display { display: none; color: var(--fg); opacity: 0.85; } /* Remove forced wrapping on narrow rows so label remains on row 1 */ /* Field value control sizing: total height 29px (25px content + 2px borders) */ .field-value, .field-value-select { height: 29px; padding: 0 0.5rem; /* horizontal padding only to preserve 25px content height */ border-top-width: 2px; border-bottom-width: 2px; } /* Multiline textarea control for template text fields */ textarea.field-value { height: auto; min-height: 64px; padding: 0.35rem 0.5rem; line-height: 1.3; resize: vertical; } /* Custom 12-hour time picker popover */ .time12-popover { position: fixed; z-index: 9999; background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .time12-popover select { margin-right: 0.25rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 4px; } .time12-popover .time12-apply { margin-left: 0.5rem; background-color: var(--button-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer; } .time12-popover .time12-apply:hover { background-color: var(--button-hover); } /* Make all field buttons and padlock match delete template button styles */ .delete-template-btn, .clear-template-btn, .field-confirm-btn, .field-remove-btn, .field-up-btn, .field-down-btn, .field-edit-btn, .padlock-btn, .field-date-btn, .field-time-btn { background-color: var(--button-bg); /* Remove borders from these action buttons to avoid an unsightly outline */ border: none; border-radius: 4px; padding: 0.35rem; cursor: pointer; color: var(--button-fg); display: inline-flex; align-items: center; justify-content: center; } .clear-template-btn:hover, .field-confirm-btn:hover, .field-remove-btn:hover, .field-up-btn:hover, .field-down-btn:hover, .field-edit-btn:hover, .padlock-btn:hover, .field-date-btn:hover, .field-time-btn:hover, .delete-template-btn:hover { background-color: var(--button-hover); } .clear-template-btn:active, .field-confirm-btn:active, .field-remove-btn:active, .field-up-btn:active, .field-down-btn:active, .field-edit-btn:active, .padlock-btn:active, .field-date-btn:active, .field-time-btn:active, .delete-template-btn:active { background-color: var(--button-active); } /* Normalize icon sizes for these inline icon buttons */ .clear-template-btn svg, .field-confirm-btn svg, .field-remove-btn svg, .field-up-btn svg, .field-down-btn svg, .field-edit-btn svg, .padlock-btn svg, .field-date-btn svg, .field-time-btn svg, .delete-template-btn svg { width: 16px; height: 16px; fill: currentColor; } /* Render date/time picker buttons as an inline icon inside the field input */ .field-value-inline .field-date-btn, .field-value-inline .field-time-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: none; background: transparent; box-shadow: none; z-index: 2; } .field-value-inline .field-date-btn:hover, .field-value-inline .field-time-btn:hover { background: transparent; /* keep inside-input look */ } /* Add right padding when a date/time icon can appear */ .field-value[data-date-format], .field-value[data-time-format] { padding-right: 2rem; } /* When both date and time pickers are available, add extra padding */ .field-value[data-date-format][data-time-format] { padding-right: 3.5rem; } /* When both pickers are shown inline, offset the calendar icon to avoid overlap */ .field-value-inline.has-both-pickers .field-time-btn { right: 6px; } .field-value-inline.has-both-pickers .field-date-btn { right: 30px; } /* Ensure confirm button sits on the far right when editing */ .field-confirm-btn { margin-left: auto; } /* Group confirm + remove to the far right and keep them adjacent */ .field-confirm-remove-group { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; } .field-confirm-remove-group .field-confirm-btn { margin-left: 0; } /* Two-click confirm style for field removal without changing icon */ .field-remove-btn.confirm { background-color: #f44336 !important; color: #ffffff !important; } /* Colour palette styling for the rich text toolbar. The palette is displayed as a compact grid of swatches. */ .color-palette { display: grid; grid-template-columns: repeat(6, 24px); grid-auto-rows: 24px; gap: 0.35rem; padding: 0.25rem; } .color-swatch { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; box-sizing: border-box; outline: none; transition: transform 0.15s ease, border-color 0.15s ease; } .color-swatch:hover { transform: translateY(-1px); } /* Highlight the currently selected colour. */ .color-swatch.is-active { border: 2px solid var(--accent); } /* Hide the rename (edit title) button when the snippet is collapsed. */ .snippet.collapsed .edit-title-btn { display: none; } /* Footer */ .footer { padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--placeholder); margin-top: auto; border-top: 1px solid var(--border); } /* Responsive adjustments */ @media (max-width: 768px) { .topbar-left { flex: 1 0 100%; justify-content: center; text-align: center; margin-bottom: 0.5rem; } .topbar-right { flex: 1 0 100%; justify-content: center; text-align: center; } } /* Restore browser default list styles in snippet content */ .snippet-content ul, .snippet-content ol { margin-left: 1.5rem; padding-left: 1.5rem; } .snippet-content ul { list-style-type: disc; } .snippet-content ol { list-style-type: decimal; } /* Restore list indentation in content sections (FAQ, Features, etc.) */ .empty-state-panel ul, .empty-state-panel ol { margin-left: 1.5rem; padding-left: 1.5rem; } .empty-state-panel ul { list-style-type: disc; list-style-position: outside; } .empty-state-panel ol { list-style-type: decimal; list-style-position: outside; } /* ----------------------------------------------------------------- * Override snippet and template backgrounds * * The default .snippet and .template-card styles set the background * colour using the theme’s card colour. To support per-card custom * colours, override just the background-colour property here. The * value falls back to the theme variable when --custom-bg is not set. */ .snippet { background-color: var(--custom-bg, var(--card-bg)); } .template-card { background-color: var(--custom-bg, var(--card-bg)); }