tubearchivist/docs
1
0
Fork 0
mirror of https://github.com/tubearchivist/docs.git synced 2025-05-25 15:31:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update custom.css mount section (#57)

Browse Source 
* update custom.css section

* remove rebuild notice

* refac rewrite stylesheet section

* fix dark.css file location

* refac use custom.css as custom base
This commit is contained in:
Merlin 2025-05-15 01:35:42 +02:00 committed by GitHub
parent 0ea850f48e
commit 442f6c7964
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
mkdocs/docs/configuration/stylesheets.md
View File

@ -1,26 +1,24 @@
You can change the appearance of **Tube Archivist** by selecting a stylesheet in Settings under User Configurations. You can change the appearance of **Tube Archivist** by selecting a stylesheet in Settings under User Configurations.
## Adding Stylesheets ## Adding a Stylesheet
Assuming a default configuration, stylesheets are stored in `/app/static/css` in the `tubearchivist` container. This is where additional stylesheets should be added. Assuming a default configuration, stylesheets are stored in `/app/static/css` in the `tubearchivist` container. This is where the `custom.css` stylesheet can be added and selected as `Custom` in the user settings.
The recommended method for adding new stylesheets is to mount them in the `docker-compose.yml` file. New mounts need to be added to the `tubearchivist` volume section. For example, `test.css` is added. If `test.css` is located in the same directory as the `docker-compose.yml` file. The recommended method for adding this stylesheet is to mount it in the `docker-compose.yml`, to the `tubearchivist` volume section. If `custom.css` is located in the same directory as the `docker-compose.yml` file you can use:
???+ example ???+ example
```yaml ```yaml
volumes: volumes:
- media:/youtube - media:/youtube
- cache:/cache - cache:/cache
- ./test.css:/app/static/css/test.css - ./custom.css:/app/static/css/custom.css
``` ```
The container will need to be rebuilt for changes to take effect, which can be accomplished by running the command `docker compose up -d`.
## Creating Stylesheets ## Creating Stylesheets
**Tube Archivist** applies the `style.css` stylesheet before applying the user's selected stylesheet. **Tube Archivist** applies the `style.css` stylesheet before applying the user's selected stylesheet.
You can use the default `dark.css` theme as a template to create your own. You can get it from the repo [here](https://github.com/tubearchivist/tubearchivist/blob/master/tubearchivist/static/css/dark.css). You can use the default `custom.css` theme as a template to create your own. You can get it from the repo [here](https://github.com/tubearchivist/tubearchivist/blob/master/frontend/public/css/custom.css).
The `:root` pseudo-class contains variables that are frequently used in `style.css` for consistent theming. However, not all changes need to be made in `:root`. Classes, IDs, and HTML tags can have their properties overridden by simply declaring new properties. The `:root` pseudo-class contains variables that are frequently used in `style.css` for consistent theming. However, not all changes need to be made in `:root`. Classes, IDs, and HTML tags can have their properties overridden by simply declaring new properties.