You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+43-43Lines changed: 43 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,61 +32,61 @@ Custom CSS for websites to make the internet beautiful. Transparency being the m
32
32
33
33
## Contributing styles
34
34
35
-
> ### Please make sure you go through all the provided instructions before submitting a new theme with a PR.
35
+
> Please make sure you go through all the provided instructions before submitting a new theme with a PR
36
36
37
-
1. You can use the [example.com.css](https://github.com/sameerasw/my-internet/raw/refs/heads/main/websites/example.com.css) as a starter for most websites to grab the stylesheet format.
38
-
2. Make sure the file is named in the correct format [website domain].css (google.com.css and docs.google.com.css are 2 styles which are not merged unless you do 9.)
39
-
3. Please respect auto theming for day and night themes. If the website does not have a dark theme, account for dark reader.
37
+
1. You can use the [`example.com.css`](https://github.com/sameerasw/my-internet/raw/refs/heads/main/websites/example.com.css) as a starter for most websites to grab the stylesheet format.
38
+
2. Make sure the file is named in the correct format `[website domain].css` (`google.com.css` and `docs.google.com.css` are 2 styles which are not merged unless you do \#9.)
39
+
3. Please respect auto theming for day and night themes. If the website does not have a dark theme, account for Dark Reader.
40
40
4. Do not use wildcards such as applying transparency for all div elements since that is handled with force theming in the addon.
41
41
5. Every property should include `!important` to make sure it gets applied.
42
-
6.~Do NOT leave commented out code.~ Now you can, but still DO NOT! But you can add descriptive comments... Check rule 15
42
+
6.~~Do NOT leave commented out code.~~ Now you can, but still DO NOT! But you can add descriptive comments... see \#15.
43
43
7. Don't include `www` in the stylesheet file name.
44
44
8. Add proper comments for each section of a feature at the beginning with a clear but compact description.
45
-
9. For theming similar domains like app.arduino.cc , login.arduino.cc..... similar urls with `prefixes`, you can add a general style with a leading `+` symbol when creating the stylesheet. ( `+arduino.cc.css` ) [example](https://github.com/sameerasw/my-internet/blob/main/websites/%2Bnixos.org.css)
46
-
10. Similarly, for theming websites with a shared domain but with different `suffixes` (like google.com, google.lk...), you can add the `-` symbol to the start of the stylesheet file name so it will replace the provided domain of the file name's domain. (`-google.com.css`). [example](https://github.com/sameerasw/my-internet/blob/main/websites/-ebay.com.css)
47
-
11.[optional] Each comment of the same file should have a unique domain specific identified prefix (yt-ytm-gh- ...) which will help the browser to separately apply themes.
48
-
49
-
```
50
-
/* yt-transparency */
51
-
:root{
52
-
--colorBgApp: transparent !important;
53
-
}
54
-
55
-
/* yt-no footer */
56
-
footer.app-footer {
57
-
display: none !important;
58
-
}
45
+
9. For theming similar domains like `app.arduino.cc`, `login.arduino.cc`... i.e., similar urls with prefixes, you can add a "general style" with a leading `+` symbol when creating the stylesheet. ( `+arduino.cc.css` ) [example](https://github.com/sameerasw/my-internet/blob/main/websites/%2Bnixos.org.css)
46
+
10. Similarly, for theming websites with a shared domain but with different suffixes (like `google.com`, `google.lk`...), you can add the `-` symbol to the start of the stylesheet file name so it will replace the provided domain of the file name's domain. (e..g, `-google.com.css`). [example](https://github.com/sameerasw/my-internet/blob/main/websites/-ebay.com.css)
47
+
11.\[optional\] Each comment of the same file should have a unique domain specific identified prefix (`yt-`, `ytm-`, `gh-`, etc) which will help the extension separately apply themes.
48
+
49
+
```css
50
+
/* yt-transparency */
51
+
:root{
52
+
--colorBgApp: transparent!important;
53
+
}
54
+
55
+
/* yt-no footer */
56
+
footer.app-footer {
57
+
display: none!important;
58
+
}
59
59
```
60
60
61
61
12. Always make sure the first feature is `transparency` and also use the exact feature name without a difference allowing the global transparency toggle to work. Prefixes with `-` are acceptable.
62
-
13. Don't keep the firefox selectors if you are coying over from the userContent.css (remove `@-moz-document domain(" ")` )
63
-
14. Once comitted to the repository, github actions will parse the css file and update/ generate the [styles.json](https://github.com/sameerasw/my-internet/blob/main/styles.json) and then will be deployed to the github pages allowing the add-on to fetch from it.
64
-
15. _**[NEW!]**_ Now you can add descriptive comments to the css file which will be skipped during parsing and generating the styles.json file. BUT, make sure to start those css comment text with the `@` symbol as below examples. BUT, Any comment inside a feature in the css selectors or in properties will be skipped anyways.
65
-
66
-
```
67
-
/* yt-transparency */
68
-
/* @this comment will be skipped */
69
-
:root{
70
-
--colorBgApp: transparent !important;
71
-
/* @ this comment will be skipped, but leaving it will cause no harm */
72
-
/* This will be skipped */
73
-
}
74
-
75
-
/* @ this comment will be skipped */
76
-
/* yt-no footer */
77
-
footer.app-footer, /* This will be skipped */
62
+
13. Don't keep the Firefox selectors if you are copying from the `userContent.css` (i.e., remove `@-moz-document domain(" ")`).
63
+
14. Once committed to the repository, GitHub Actions will parse the CSS file and regenerate the [`styles.json`](https://github.com/sameerasw/my-internet/blob/main/styles.json) file; then it will be deployed to GitHub pages, allowing the addon to fetch it.
64
+
15. _**\[NEW!\]**_ Now you can add descriptive comments to the CSS file which will be skipped during parsing and generating the `styles.json` file. BUT, make sure to start those CSS comment text with the `@` symbol as below examples. BUT, any comment inside a feature in the CSS selectors or in properties will be skipped anyway.
65
+
66
+
```css
67
+
/* yt-transparency */
68
+
/* @this comment will be skipped */
69
+
:root{
70
+
--colorBgApp: transparent !important;
71
+
/* @ this comment will be skipped, but leaving it will cause no harm */
72
+
/* This will be skipped */
73
+
}
74
+
75
+
/* @ this comment will be skipped */
76
+
/* yt-no footer */
77
+
footer.app-footer, /* This will be skipped */
78
78
footer {
79
-
display: none !important;
80
-
}
79
+
display: none!important;
80
+
}
81
81
```
82
82
83
-
16. Website mapping. Use the `css-mapping.json` to map existing css styles to other websites. Also can be used for websites that works well with forcing.
83
+
16. Website mapping. Use the `css-mapping.json` to map existing CSS styles to other websites. Also can be used for websites that works well with forcing.
84
84
17. You can add feature descriptions by separating the title and the rest of the text inside a feature comment by separating it with `$`. Check example.com.css for the samples.
0 commit comments