Skip to content

Document .sa-editor and .sa-fullscreen #554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Document .sa-editor and .sa-fullscreen #554

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions content/docs/develop/userstyles/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,17 +97,28 @@ These CSS variables are always available for all enabled addons and no manifest
If a userstyle needs to choose between one of two values based on a background color (text contrast) or an addon setting, JavaScript isn't necessary. These conditions, among others, can be declared in the addon manifest through [customCssVariables](/docs/reference/addon-manifest/#customcssvariables), and the userstyle can simply reference that CSS variable.


## Applying styles only inside the editor
## Applying styles based on the editor mode

The extension automatically toggles a class name on the `<body>` element when the user enters or exits the project editor.
The extension automatically toggles a class name on the `<html>` element when the user enters or exits the project editor.

For example, styling `<input>` elements inside and outside the editor differently:
```css
.sa-body-editor input {
.sa-editor input {
/* Only applies if `addon.tab.editorMode` is `editor` or `fullscreen` */
}

body:not(.sa-body-editor) input {
:root:not(.sa-editor) input {
/* Only applies if `addon.tab.editorMode` is NOT `editor` nor `fullscreen` */
}
```

Similarly, the `.sa-fullscreen` class is added to the `<html>` element when the project is in full screen mode:
```css
.sa-fullscreen [class*="green-flag_green-flag_"] {
/* Only applies if `addon.tab.editorMode` is `fullscreen` */
}

:root:not(.sa-fullscreen) [class*="green-flag_green-flag_"] {
/* Only applies if `addon.tab.editorMode` is NOT `fullscreen` */
}
```