/* * 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 { --bg: #2b0015; --fg: #ffeef2; --card-bg: #400021; --border: #520030; --accent: #e91e63; --header-bg: #36001c; --placeholder: #d394a9; --button-bg: #510022; --button-fg: #ffeef2; --button-hover: #610026; --button-active: #71002a; } /* 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 { background-color: var(--accent) !important; color: #ffffff !important; border: 1px solid var(--accent) !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(--accent); color: #ffffff; } /* 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:hover, .theme-light .add-template-btn:hover, .theme-light .add-field-btn:hover { background-color: #43a047; } .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; } /* Snippet card */ .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; } .snippet-title-wrapper { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; } .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: hidden; } 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(--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) */ .snippet-title { color: #000000; /* pure black when typing */ 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 use the same colour as other buttons for better contrast across themes. */ pointer-events: none; cursor: default; background-color: transparent; border: none; outline: none; color: 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. */ .snippet-title { font-size: 0.85rem; font-weight: 300; color: 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; color: 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); } .edit-title-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 28px; height: 28px; border: none; background: transparent; color: 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%; padding: 0.5rem 2rem 0.5rem 0.5rem; /* room for icon */ 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 { display: flex; flex-direction: column; overflow: hidden; } .template-header .template-title { width: 100%; } .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 { border-color: 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, .theme-light .template-title { color: #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); border: 1px solid var(--border); 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 { color: 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); border: 1px solid var(--border); 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; }