diff --git a/styling.html b/styling.html index 75f09e6..93e2b8b 100644 --- a/styling.html +++ b/styling.html @@ -1,260 +1,211 @@ - - - - Styling - Degoog docs - - - - - - - - - -
-
- - Degoog Docs -
-
- +
+
+

Degoog Styling

+

+ CSS variables and key classes for your themes and plugin outputs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableUse
--primaryPrimary accent for links and buttons
--primary-hoverHover state for primary elements
--primary-rgbPrimary color as an RGB tuple
--dangerDanger or error color
--warningWarning color
--successSuccess color
--bgPage background
--bg-lightLighter background for cards and inputs
--bg-hoverHover background
--borderBorder color
--border-lightLighter border
--text-primaryMain text color
--text-secondarySecondary or muted text
--text-linkLink color
--text-link-visitedVisited link color
--text-citeCitation or URL text
--text-snippetSnippet or description text
--search-bar-bgSearch bar background
--search-bar-bg-hoverSearch bar hover state
--btn-bgButton background
--btn-textButton text color
--overlay-bgOverlay background for modals
--whitePure white
+
-

Example theme or plugin CSS

- 
.my-panel {
+        
CSS variables

+        

+          The application exposes several CSS custom properties on the
+          :root element. You can use these in your themes and
+          plugin styles to ensure your colors automatically adapt to light or
+          dark modes (using data-theme="light" or
+          data-theme="dark" on the
+          <html> tag).
+        

+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
VariableUse
--primaryPrimary accent for links and buttons
--primary-hoverHover state for primary elements
--primary-rgbPrimary color as an RGB tuple
--dangerDanger or error color
--warningWarning color
--successSuccess color
--bgPage background
--bg-lightLighter background for cards and inputs
--bg-hoverHover background
--borderBorder color
--border-lightLighter border
--text-primaryMain text color
--text-secondarySecondary or muted text
--text-linkLink color
--text-link-visitedVisited link color
--text-citeCitation or URL text
--text-snippetSnippet or description text
--search-bar-bgSearch bar background
--search-bar-bg-hoverSearch bar hover state
--btn-bgButton background
--btn-textButton text color
--overlay-bgOverlay background for modals
--whitePure white

+
+        
Example theme or plugin CSS

+        
.my-panel {
   background: var(--bg-light);
   color: var(--text-primary);
   border: 1px solid var(--border);
@@ -263,193 +214,456 @@ 
Example theme or plugin CSS

   color: var(--text-link);
 }

 
-          
Reusable classes

-          

-            Try to reuse these built in classes in your plugin or theme HTML and
-            CSS. This makes sure your output matches the main UI and benefits
-            from the exact same layout structure. It is always better to use
-            these instead of inventing new classes when the meaning fits
-            perfectly.
-          

+        
Reusable classes

+        

+          Try to reuse these built in classes in your plugin or theme HTML and
+          CSS. This makes sure your output matches the main UI and benefits
+          from the exact same layout structure. It is always better to use
+          these instead of inventing new classes when the meaning fits
+          perfectly.
+        

 
-          
Generic UI classes (degoog-*)

-          

-            The main UI is moving toward a small set of generic degoog-*
-            classes. Templates often keep the older specific classes for
-            backwards compatibility, but the styling should be driven by these
-            generic classes and their modifiers.
-          

-          

-            Modifiers follow a BEM-like pattern:
-            .degoog-thing + .degoog-thing--variant.
-          

+        
Generic UI classes (degoog-*)

+        

+          The main UI is moving toward a small set of generic degoog-*
+          classes. Templates often keep the older specific classes for
+          backwards compatibility, but the styling should be driven by these
+          generic classes and their modifiers.
+        

+        

+          Modifiers follow a BEM-like pattern:
+          .degoog-thing + .degoog-thing--variant.
+        

 
-          
-            
-              
-                
-                
-              
-            
-            
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-            
-          
ClassUse
.degoog-panelCard/panel wrapper (background, border, shadow)
.degoog-panel--accordionAccordion wrapper panel (no default padding)
.degoog-panel--slotSlot panel wrapper (grid sizing, no default padding)
.degoog-panel--slot-titleSlot panel title block
.degoog-panel--slot-bodySlot panel body typography (no padding by default)
.degoog-panel--slot-body-paddedSlot body padding when the content needs it
.degoog-search-barSearch bar shell (icon + input)
.degoog-search-bar--squareLess-rounded search bar variant
.degoog-dropdownFloating dropdown container
.degoog-dropdown--menuMenu sizing for dropdowns
.degoog-dropdown--submenuSubmenu sizing for dropdowns
.degoog-accordionAccordion wrapper - adds .open toggle behaviour and chevron rotation
.degoog-accordion-bodyHidden accordion body, shown when parent has .open
.degoog-accordion-body--flexFlex variant of the accordion body (for when display: flex is needed on open)
.degoog-accordion-toggleAccordion trigger button
.degoog-tabTab button (active state, hover)
.degoog-menu-itemButton-like list item (hover/focus)
.degoog-menu-item--optionOption rows (active checkmark)
.degoog-inputText input styling
.degoog-input--toolsTools dropdown input variant
.degoog-badgeSmall badge/pill
.degoog-icon-btnIcon-only button

+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
ClassUse
.degoog-panelCard/panel wrapper (background, border, shadow)
.degoog-panel--accordionAccordion wrapper panel (no default padding)
.degoog-panel--slotSlot panel wrapper (grid sizing, no default padding)
.degoog-panel--slot-titleSlot panel title block
.degoog-panel--slot-bodySlot panel body typography (no padding by default)
.degoog-panel--slot-body-paddedSlot body padding when the content needs it
.degoog-search-barSearch bar shell (icon + input)
.degoog-search-bar--squareLess-rounded search bar variant
.degoog-dropdownFloating dropdown container
.degoog-dropdown--menuMenu sizing for dropdowns
.degoog-dropdown--submenuSubmenu sizing for dropdowns
.degoog-accordionAccordion wrapper - adds .open toggle behaviour and chevron rotation
.degoog-accordion-bodyHidden accordion body, shown when parent has .open
.degoog-accordion-body--flexFlex variant of the accordion body (for when display: flex is needed on open)
.degoog-accordion-toggleAccordion trigger button
.degoog-tabTab button (active state, hover)
.degoog-menu-itemButton-like list item (hover/focus)
.degoog-menu-item--optionOption rows (active checkmark)
.degoog-inputText input styling
.degoog-input--toolsTools dropdown input variant
.degoog-badgeSmall badge/pill
.degoog-icon-btnIcon-only button

 
-          

-            Note: the app still contains older, more specific classnames (for example
-            .result-*, .glance-*, .btn*) and they may
-            still have styling while the transition is ongoing. They are not considered
-            a stable styling API for themes/plugins. Prefer the degoog-* classes
-            and modifiers above.
-          

+        

+          Note: the app still contains older, more specific classnames (for example
+          .result-*, .glance-*, .btn*) and they may
+          still have styling while the transition is ongoing. They are not considered
+          a stable styling API for themes/plugins. Prefer the degoog-* classes
+          and modifiers above.
+        

 
-          
Theme template migration (append-only)

-          

-            Theme templates can keep their legacy classes and append the generic
-            degoog-* classes (and modifiers) so they pick up the built-in UI
-            styling without breaking older selectors.
-          

-          
DRY_RUN=1 bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme
+        
Theme template migration (append-only)

+        

+          Theme templates can keep their legacy classes and append the generic
+          degoog-* classes (and modifiers) so they pick up the built-in UI
+          styling without breaking older selectors.
+        

+        
DRY_RUN=1 bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme
 bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme

 
-          
Forms and extension settings

-          

-            If you are rendering settings forms in your plugin UI, these classes
-            will align them perfectly with the standard Settings modals.
-          

-          
-            
-              
-                
-                
-              
-            
-            
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-              
-                
-                
-              
-            
-          
ClassUse
.degoog-inputText inputs and textareas
.degoog-select-wrapSelect wrappers (adds chevron)
.degoog-toggle-wrapToggle rows
.degoog-toggleToggle slider (pill)
.degoog-panelPanels/cards used across settings and modals

+        
Forms and extension settings

+        

+          If you are rendering settings forms in your plugin UI, these classes
+          will align them perfectly with the standard Settings modals.
+        

+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
ClassUse
.degoog-inputText inputs and textareas
.degoog-select-wrapSelect wrappers (adds chevron)
.degoog-toggle-wrapToggle rows
.degoog-toggleToggle slider (pill)
.degoog-panelPanels/cards used across settings and modals

 
-          
Layout and chrome

-          

-            Use the degoog-* classes above for UI elements you want
-            to look consistent with the built-in theme.
-          

-
-
-
+

Layout and chrome

+

+ Use the degoog-* classes above for UI elements you want + to look consistent with the built-in theme. +

+ +

Grid-System

+

A lightweight, CSS-Grid-based 12-column layout system used to build for example widgets (translate boxes, + knowledge + panels, "at a glance" cards, etc.) in the degoog.

+

1. Core Concept

+

The container gets degoog-grid; its direct children are placed across the 12 + columns + via col-* classes.

+ 
<section class="degoog-grid">
+  <div class="col-8">Search results</div>
+  <div class="col-4">Knowledge panel</div>
+</section>
+
+

Rules:

+
    +
  • col-* classes work only on direct children of .degoog-grid. +
    • +
  • Columns per row should add up to 12; exceeding it wraps to the next row.
    • +
  • Default gaps: .75rem horizontal and vertical.
    • +
+

2. Column Widths (col-1–col-12)

+

Each column spans N of the 12 tracks (grid-column: span N).

+ 
<!-- Result list beside a side panel -->
+<section class="degoog-grid">
+  <div class="col-8">Result list</div>
+  <div class="col-4">Wikipedia summary</div>
+</section>
+
+<!-- Full-width widget (e.g. translate box on top) -->
+<section class="degoog-grid">
+  <div class="col-12">Translate widget</div>
+</section>
+
+

Auto-wrapping when totals exceed 12:

+ 
<section class="degoog-grid">
+  <div class="col-8">Map widget</div>
+  <div class="col-8">Wraps to next row (8 + 8 > 12)</div>
+</section>
+
+

3. Responsive Behavior

+

Mobile-first breakpoints; a larger breakpoint overrides smaller ones.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrefixFromTarget
col-*0pxMobile
col-sm-*≥ 480pxLarge phones
col-md-*≥ 780pxTablets
col-lg-*≥ 1024pxDesktop
+

Stack classes to change width per breakpoint:

+ 
<!-- Side panel sits below results on mobile, beside them on desktop -->
+<section class="degoog-grid">
+  <main class="col-12 col-lg-8">Search results</main>
+  <aside class="col-12 col-lg-4">Knowledge panel</aside>
+</section>
+
+

Widget grid that reflows from 1 → 2 → 4 per row:

+ 
<section class="degoog-grid">
+  <div class="col-12 col-sm-6 col-lg-3">Weather</div>
+  <div class="col-12 col-sm-6 col-lg-3">Currency</div>
+  <div class="col-12 col-sm-6 col-lg-3">Time zone</div>
+  <div class="col-12 col-sm-6 col-lg-3">Calculator</div>
+</section>
+
+

4. Visibility (hidden / show)

+

Toggle rendering per breakpoint via display.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassEffect
col-hiddendisplay: none
col-showdisplay: block
col-md-hiddenHidden from ≥ 780px
col-lg-showShown from ≥ 1024px
+ 
<section class="degoog-grid">
+  <!-- Knowledge panel: hidden on mobile, shown from desktop -->
+  <main class="col-12 col-lg-8">Results</main>
+  <aside class="col-hidden col-lg-show col-lg-4">Knowledge panel</aside>
+</section>
+
+
+

col-show resets to display: block — use it to re-enable an element hidden at a + smaller + breakpoint.

+
+

5. Horizontal Alignment (left / center / right)

+

Aligns content inside its cell (justify-self) when it's narrower than the column. Responsive + variants + exist (col-md-right, etc.).

+ + + + + + + + + + + + + + + + + + + + + +
ClassAlignment
col-leftstart
col-centercenter
col-rightend
+ 
<!-- Translate widget: "swap languages" button centered, action right -->
+<section class="degoog-grid">
+  <div class="col-6 col-center">↔ Swap languages</div>
+  <div class="col-6 col-right">Listen 🔊</div>
+</section>
+
+

6. Container Modifiers

+

degoog-grid--no-gap — removes all gaps

+ 
<!-- Seamless image-result strip -->
+<section class="degoog-grid degoog-grid--no-gap">
+  <div class="col-3"><img src="1.jpg" alt=""></div>
+  <div class="col-3"><img src="2.jpg" alt=""></div>
+  <div class="col-3"><img src="3.jpg" alt=""></div>
+  <div class="col-3"><img src="4.jpg" alt=""></div>
+</section>
+
+

degoog-grid--vertical-align-center — vertically centers columns

+ 
<!-- Knowledge panel: thumbnail centered against its text -->
+<section class="degoog-grid degoog-grid--vertical-align-center">
+  <div class="col-4"><img src="thumb.jpg" alt=""></div>
+  <div class="col-8">Wikipedia summary text</div>
+</section>
+
+

7. Complete Example: Search Results Page

+ 
<section class="degoog-grid degoog-grid--vertical-align-center">
+
+  <!-- Translate widget on top, full width -->
+  <div class="col-12">Translate: "hola" → "hello"</div>
+
+  <!-- Results column + knowledge panel -->
+  <main class="col-12 col-lg-8">Search result list</main>
+  <aside class="col-hidden col-lg-show col-lg-4">Knowledge panel</aside>
+
+  <!-- "At a glance" mini-widgets: 1 → 2 → 4 per row -->
+  <div class="col-12 col-sm-6 col-lg-3">Weather</div>
+  <div class="col-12 col-sm-6 col-lg-3">Currency</div>
+  <div class="col-12 col-sm-6 col-lg-3">Sports score</div>
+  <div class="col-12 col-sm-6 col-lg-3">Stock price</div>
+
+</section>
+
+

8. Best Practices & Gotchas

+
    +
  • Always set a base col-* (e.g. col-12) so mobile behavior is + explicit. +
    • +
  • Keep rows summing to 12 for predictable layouts; intentional overflow wraps.
    • +
  • Direct children only — nest a new .degoog-grid for sub-grids inside a + widget.
    • +
  • col-show needs a prior hidden to act as a reveal toggle.
    • +
  • Alignment helpers only matter when content is narrower than its column.
    • +
+

9. Quick Reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryBasesm (≥480)md (≥780)lg (≥1024)
Widthcol-1…12col-sm-1…12col-md-1…12col-lg-1…12
Hidecol-hiddencol-sm-hiddencol-md-hiddencol-lg-hidden
Showcol-showcol-sm-showcol-md-showcol-lg-show
Align leftcol-leftcol-sm-leftcol-md-leftcol-lg-left
Align centercol-centercol-sm-centercol-md-centercol-lg-center
Align rightcol-rightcol-sm-rightcol-md-rightcol-lg-right
+

Container modifiers: degoog-grid--no-gap, + degoog-grid--vertical-align-center +

+ +
- - - - - +
+ + + + + + + \ No newline at end of file