Skip to content

Commit 0a1b784

Browse files
marcusolssonmarcusolsson
committed
Organize content
1 parent a24bae5 commit 0a1b784

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+978
-1143
lines changed

‎.obsidian/snippets/test.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
--link-color: red;
3+
}

‎en/Interface guidelines/Foundations/Cursor.md

-4
This file was deleted.

‎en/Interface guidelines/Foundations/Icons.md

-20
This file was deleted.

‎en/Interface guidelines/Foundations/Padding, margins, and spacing.md

-11
This file was deleted.

‎en/Interface guidelines/Interface guidelines.md

-5
This file was deleted.

‎en/Reference/App CSS variables.md

-985
This file was deleted.

‎en/Theming/About theming.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Overview
2+
3+
The Obsidian App uses [Cascading Style Sheets](https://en.wikipedia.org/wiki/CSS) (CSS) to control the design of the user interface. CSS is the same markup language used for websites and web-based apps, which means you can find many resources online to help you learn how to use and edit CSS.
4+
5+
Obsidian includes hundreds of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that allow you to customize almost every aspect of the Obsidian UI. Default values for App CSS variables are defined alphabetically at the top of the `app.css` file. You can access `app.css` by using Developer Tools.
6+
7+
CSS variables make it easy to create custom Themes and Snippets for Obsidian. CSS variables are also useful to create Plugin UIs that feel cohesive with the Obsidian App and are compatible with Community Themes.
8+
9+
### CSS structure and levels of specificity
10+
11+
Obsidian's built-in variables are grouped into several categories. The variables are defined on selectors with low specificity to make it easier for you to override them.
12+
13+
Defined on the `.theme-light` and `.theme-dark` classes:
14+
15+
- **Theme colors** store the raw color values for light and dark mode
16+
17+
Defined on the `body` element:
18+
19+
- **Semantic color mappings** apply the theme colors to named variables for backgrounds, borders, text, etc
20+
- **Structure variables** define abstracted values for font sizes, spacing, radiuses, layout
21+
- **Content variables** define styling for blockquotes, callouts, code blocks, syntax highlighting, embeds, footnotes, headings, links, lists, tables, tags, and task lists
22+
- **Component variables** define styling for user interface elements such as inputs, buttons, popovers

‎en/Theming/Components/Blockquote.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Styling for blockquotes
2+
3+
| Variable | Description |
4+
| ------------------------------- | ------------------------------------------- |
5+
| `--blockquote-background-color` | Blockquote background color |
6+
| `--blockquote-border-thickness` | Blockquote left border thickness |
7+
| `--blockquote-border-color` | Blockquote left border color |
8+
| `--blockquote-font-style` | Blockquote font style (e.g. normal, italic) |
9+
| `--blockquote-color` | Blockquote text color |
10+

‎en/Theming/Components/Button.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Styling for standard buttons
2+
3+
| Variable | Description |
4+
| ----------------- | ------------- |
5+
| `--button-radius` | Button radius |

‎en/Theming/Components/Checkbox.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Styling for checkboxes and text inside of task lists
2+
3+
| Variable | Description |
4+
| ------------------------------- | ------------------------------------------ |
5+
| `--checkbox-radius` | Checkbox radius |
6+
| `--checkbox-size` | Checkbox height and width |
7+
| `--checkbox-marker-color` | Checkbox marker color for the check itself |
8+
| `--checkbox-color` | Checkbox background color |
9+
| `--checkbox-color-hover` | Checkbox background color (hover) |
10+
| `--checkbox-border-color` | Checkbox unchecked border color |
11+
| `--checkbox-border-color-hover` | Checkbox unchecked border color (hover) |
12+
| `--checklist-done-decoration` | Checkbox checked text decoration |
13+
| `--checklist-done-color` | Checkbox checked text color |

‎en/Theming/Components/Color input.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Styling for color inputs, e.g. accent color picker
2+
3+
| Variable | Description |
4+
| ----------------- | ------------------- |
5+
| `--swatch-radius` | Color swatch radius |
6+
| `--swatch-height` | Color swatch height |
7+
| `--swatch-width` | Color swatch width |
8+
| `--swatch-shadow` | Color swatch shadow |

‎en/Theming/Components/Dialog.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Smaller modals primarily used for confirmations
2+
3+
| Variable | Description |
4+
| --------------------- | --------------------- |
5+
| `--dialog-width` | Dialog default width |
6+
| `--dialog-max-width` | Dialog maximum width |
7+
| `--dialog-max-height` | Dialog maximum height |
8+
9+

‎en/Theming/Components/Link.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Obsidian supports three different types of links:
2+
3+
- **Resolved internal links** link to an existing note in Obsidian
4+
- **Unresolved internal links** link to a non-existing note in Obsidian
5+
- **External links** link to an external URL/URI
6+
7+
| Variable | Description |
8+
| ------------------------------------ | ----------------------------------------- |
9+
| `--link-color` | Resolved link text color |
10+
| `--link-color-hover` | Resolved link text color (hover) |
11+
| `--link-decoration` | Resolved link text decoration |
12+
| `--link-decoration-hover` | Resolved link text decoration (hover) |
13+
| `--link-decoration-thickness` | Resolved link text decoration thickness |
14+
| `--link-unresolved-color` | Unresolved link text color |
15+
| `--link-unresolved-opacity` | Unresolved link opacity |
16+
| `--link-unresolved-filter` | Unresolved link filter, e.g. `hue-rotate` |
17+
| `--link-unresolved-decoration-style` | Unresolved link text decoration style |
18+
| `--link-unresolved-decoration-color` | Unresolved link text decoration color |
19+
| `--link-external-color` | External link text color |
20+
| `--link-external-color-hover` | External link text color (hover) |
21+
| `--link-external-decoration` | External link text decoration |
22+
| `--link-external-decoration-hover` | External link text decoration (hover) |

‎en/Theming/Components/List.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Styling for numbered (ordered) and bullet (unordered) lists
2+
3+
| Variable | Description |
4+
| ------------------------------- | --------------------------------------------- |
5+
| `--list-indent` | Horizontal indentation depth for nested items |
6+
| `--list-spacing` | Vertical spacing between list items |
7+
| `--list-marker-color` | List marker color |
8+
| `--list-marker-color-hover` | List marker color (hover) |
9+
| `--list-marker-color-collapsed` | List marker color for collapsed items |
10+
| `--list-bullet-border` | List bullet border |
11+
| `--list-bullet-radius` | List bullet radius |
12+
| `--list-bullet-size` | List bullet width/height |
13+
| `--list-bullet-transform` | List bullet `transform` property |
14+
| `--list-numbered-style` | `list-style-type` for numbered lists |

‎en/Theming/Components/Modal.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Modals such as Settings, Community Plugins, Community Themes, Dialog boxes.
2+
3+
| Variable | Description |
4+
| --------------------------------- | ------------------------------------ |
5+
| `--modal-background` | Modal background color |
6+
| `--modal-width` | Modal default width |
7+
| `--modal-height` | Modal default height |
8+
| `--modal-max-width` | Modal maximum width |
9+
| `--modal-max-height` | Modal maximum height |
10+
| `--modal-max-width-narrow` | Narrow modal maximum width |
11+
| `--modal-border-width` | Modal border thickness |
12+
| `--modal-border-color` | Modal border color |
13+
| `--modal-radius` | Modal radius |
14+
| `--modal-community-sidebar-width` | Community plugin/theme sidebar width |

‎en/Theming/Components/Popover.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Styling for popovers and file previews
2+
3+
| Variable | Description |
4+
| ---------------------- | ----------------------- |
5+
| `--popover-width` | Popover default width |
6+
| `--popover-height` | Popover default height |
7+
| `--popover-max-height` | Popover maximum height |
8+
| `--popover-font-size` | Popover font size |
9+
| `--popover-pdf-width` | PDF file preview width |
10+
| `--popover-pdf-height` | PDF file preview height |

‎en/Theming/Components/Prompt.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
E.g. quick switcher, command palette
2+
3+
| Variable | Description |
4+
| ----------------------- | ------------------------------------- |
5+
| `--prompt-width` | Prompt width |
6+
| `--prompt-max-width` | Prompt max width (for narrow windows) |
7+
| `--prompt-max-height` | Prompt max height |
8+
| `--prompt-border-width` | Prompt border width |
9+
| `--prompt-border-color` | Prompt border color |

‎en/Theming/Components/Slider.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Styling for slider controls, e.g. font size and zoom
2+
3+
| Variable | Description |
4+
| ----------------------------- | ------------------------------- |
5+
| `--slider-thumb-border-width` | Slider thumb border width |
6+
| `--slider-thumb-border-color` | Slider thumb border color |
7+
| `--slider-thumb-height` | Slider thumb height |
8+
| `--slider-thumb-width` | Slider thumb width |
9+
| `--slider-thumb-y` | Slider thumb Y position |
10+
| `--slider-thumb-radius` | Slider thumb radius |
11+
| `--slider-track-background` | Slider track background color |
12+
| `--slider-track-height` | Slider track height |

‎en/Theming/Components/Table.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
Styling for tables
2+
3+
| Variable | Description |
4+
| ----------------------------------- | ------------------------------------- |
5+
| `--table-background` | Table background color |
6+
| `--table-border-width` | Table border width |
7+
| `--table-border-color` | Table border color |
8+
| `--table-white-space` | Table `white-space` property |
9+
| `--table-header-background` | Table header background color |
10+
| `--table-header-background-hover` | Table header background color (hover) |
11+
| `--table-header-border-width` | Table header border width |
12+
| `--table-header-border-color` | Table header border color |
13+
| `--table-header-font` | Table header font family |
14+
| `--table-header-size` | Table header font size |
15+
| `--table-header-weight` | Table header font weight |
16+
| `--table-header-color` | Table header text color |
17+
| `--table-text-size` | Cell font size |
18+
| `--table-text-color` | Cell text color |
19+
| `--table-column-max-width` | Column maximum width |
20+
| `--table-column-alt-background` | Alternating column background color |
21+
| `--table-column-first-border-width` | First column left border width |
22+
| `--table-column-last-border-width` | Last column right border width |
23+
| `--table-row-background-hover` | Row background color (hover) |
24+
| `--table-row-alt-background` | Alternating row background color |
25+
| `--table-last-border-width` | Last row bottom border width |

‎en/Theming/Components/Tabs.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
Styling for [[Tabs]]
2+
3+
| Variable | Description |
4+
| ----------------------------------------- | -------------------------------------------- |
5+
| `--tab-background-active` | Tab background color (active tab) |
6+
| `--tab-text-color` | Tab text color |
7+
| `--tab-text-color-active` | Tab text color (non-focused window, active) |
8+
| `--tab-text-color-focused` | Tab text color (focused window) |
9+
| `--tab-text-color-focused-active` | Tab text color (focused window, active) |
10+
| `--tab-text-color-focused-highlighted` | Tab text color (focused window, highlighted) |
11+
| `--tab-text-color-focused-active-current` | Tab text color (focused window, current tab) |
12+
| `--tab-font-size` | Tab font size |
13+
| `--tab-font-weight` | Tab font weight |
14+
| `--tab-container-background` | Tab container background color |
15+
| `--tab-divider-color` | Tab divider color |
16+
| `--tab-outline-color` | Tab outline color |
17+
| `--tab-outline-width` | Tab outline width |
18+
| `--tab-curve` | Tab curve radius |
19+
| `--tab-radius` | Tab outer radius |
20+
| `--tab-radius-active` | Tab outer radius (active tab) |
21+
| `--tab-width` | Tab default width |
22+
| `--tab-max-width` | Tab maximum width |
23+
24+
25+
### Tab stacks
26+
27+
Styling for stacked tabs
28+
29+
| Variable | Description |
30+
| --------------------------------- | ----------------------------- |
31+
| `--tab-stacked-pane-width` | Stacked pane width |
32+
| `--tab-stacked-header-width` | Stacked header width |
33+
| `--tab-stacked-font-size` | Stacked tab font size |
34+
| `--tab-stacked-font-weight` | Stacked tab font weight |
35+
| `--tab-stacked-text-align` | Stacked tab text alignment |
36+
| `--tab-stacked-text-transform` | Stacked tab text transform |
37+
| `--tab-stacked-text-writing-mode` | Stacked tab text writing mode |
38+
| `--tab-stacked-shadow` | Stacked tab shadow |

‎en/Theming/Components/Tag.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Styling for tags
2+
3+
| Variable | Description |
4+
| -------------------------- | ---------------------------- |
5+
| `--tag-size` | Tag font size |
6+
| `--tag-color` | Tag text color |
7+
| `--tag-color-hover` | Tag text color (hover) |
8+
| `--tag-decoration` | Tag text decoration |
9+
| `--tag-decoration-hover` | Tag text decoration (hover) |
10+
| `--tag-background` | Tag background color |
11+
| `--tag-background-hover` | Tag background color (hover) |
12+
| `--tag-border-color` | Tag border color |
13+
| `--tag-border-color-hover` | Tag border color (hover) |
14+
| `--tag-border-width` | Tag border width |
15+
| `--tag-padding-x` | Tag left/right padding |
16+
| `--tag-padding-y` | Tag top/down padding |
17+
| `--tag-radius` | Tag radius |

‎en/Theming/Components/Text input.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Styling for text inputs
2+
3+
| Variable | Description |
4+
| ---------------------- | ------------------ |
5+
| `--input-height` | Input height |
6+
| `--input-radius` | Input radius |
7+
| `--input-font-weight` | Input font weight |
8+
| `--input-border-width` | Input border width |

‎en/Theming/Components/Toggle.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Styling for toggle inputs
2+
3+
| Variable | Description |
4+
| ------------------------- | ----------------------------- |
5+
| `--toggle-border-width` | Toggle border width |
6+
| `--toggle-width` | Toggle width |
7+
| `--toggle-radius` | Toggle radius |
8+
| `--toggle-thumb-color` | Toggle thumb background color |
9+
| `--toggle-thumb-radius` | Toggle thumb radius |
10+
| `--toggle-thumb-height` | Toggle thumb height |
11+
| `--toggle-thumb-width` | Toggle thumb width |
12+
| `--toggle-s-border-width` | Small toggle border width |
13+
| `--toggle-s-width` | Small toggle width |
14+
| `--toggle-s-thumb-height` | Small toggle thumb height |
15+
| `--toggle-s-thumb-width` | Small toggle thumb width |

‎en/Theming/Core plugins/Canvas.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Styling for Canvas plugin
2+
3+
| Variable | Description |
4+
| --------------------------- | ---------------------------- |
5+
| `--canvas-background` | Canvas background color |
6+
| `--canvas-card-label-color` | Canvas card label text color |
7+
| `--canvas-dot-pattern` | Canvas dot pattern color |
8+
| `--canvas-color-1` | Canvas card color 1 |
9+
| `--canvas-color-2` | Canvas card color 2 |
10+
| `--canvas-color-3` | Canvas card color 3 |
11+
| `--canvas-color-4` | Canvas card color 4 |
12+
| `--canvas-color-5` | Canvas card color 5 |
13+
| `--canvas-color-6` | Canvas card color 6 |

‎en/Theming/Core plugins/File explorer.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## Vault name
2+
3+
Styling for vault name in the file navigator
4+
5+
| Variable | Description |
6+
| -------------------------- | ----------- |
7+
| `--vault-name-font-size` | Font size |
8+
| `--vault-name-font-weight` | Font weight |
9+
| `--vault-name-color` | Text color |

0 commit comments

Comments
 (0)