Instructure Patches

README.md

@@ -32,61 +32,61 @@ Custom CSS for websites to make the internet beautiful. Transparency being the m
 
 ## Contributing styles
 
-> ### Please make sure you go through all the provided instructions before submitting a new theme with a PR.
+> Please make sure you go through all the provided instructions before submitting a new theme with a PR
 
-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.
-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.)
-3. Please respect auto theming for day and night themes. If the website does not have a dark theme, account for dark reader.
+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.
+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.)
+3. Please respect auto theming for day and night themes. If the website does not have a dark theme, account for Dark Reader.
 4. Do not use wildcards such as applying transparency for all div elements since that is handled with force theming in the addon.
 5. Every property should include `!important` to make sure it gets applied.
-6. ~Do NOT leave commented out code.~ Now you can, but still DO NOT! But you can add descriptive comments... Check rule 15
+6. ~~Do NOT leave commented out code.~~ Now you can, but still DO NOT! But you can add descriptive comments... see \#15.
 7. Don't include `www` in the stylesheet file name.
 8. Add proper comments for each section of a feature at the beginning with a clear but compact description.
-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)
-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)
-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.
-
-    ```
-      /* yt-transparency */
-      :root{
-        --colorBgApp: transparent !important;
-      }
-
-      /*  yt-no footer */
-      footer.app-footer {
-        display: none !important;
-      }
+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)
+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)
+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.
+
+    ```css
+    /* yt-transparency */
+    :root {
+      --colorBgApp: transparent !important;
+    }
+
+    /* yt-no footer */
+    footer.app-footer {
+      display: none !important;
+    }
     ```
 
 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.
-13. Don't keep the firefox selectors if you are coying over from the userContent.css (remove `@-moz-document domain(" ")` )
-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.
-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.
-
-    ```
-      /* yt-transparency */
-      /* @this comment will be skipped */
-      :root{
-        --colorBgApp: transparent !important;
-        /* @ this comment will be skipped, but leaving it will cause no harm */
-        /* This will be skipped */
-      }
-
-      /* @ this comment will be skipped */
-      /*  yt-no footer */
-      footer.app-footer, /* This will be skipped */
+13. Don't keep the Firefox selectors if you are copying from the `userContent.css` (i.e., remove `@-moz-document domain(" ")`).
+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.
+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.
+
+    ```css
+    /* yt-transparency */
+    /* @this comment will be skipped */
+    :root {
+      --colorBgApp: transparent !important;
+      /* @ this comment will be skipped, but leaving it will cause no harm */
+      /* This will be skipped */
+    }
+
+    /* @ this comment will be skipped */
+    /* yt-no footer */
+    footer.app-footer, /* This will be skipped */
       footer {
-        display: none !important;
-      }
+      display: none !important;
+    }
     ```
 
-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.
+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.
 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.
-    ```
-      /* darkreader $ This is a example description */
-      :root {
-        --darkreader-background-ffffff: transparent !important;
-      }
+    ```css
+    /* darkreader $ This is a example description */
+    :root {
+      --darkreader-background-ffffff: transparent !important;
+    }
     ```
     This will show up like below while hovering the feature title.
     <img width="934" height="646" alt="CleanShot 2025-07-20 at 4  54 37@2x" src="https://github.com/user-attachments/assets/7bac8e98-c0d0-4c42-9c8b-b672fae65df8" />

nordChrome.css

@@ -6,7 +6,7 @@
   display: none;
 }
 
-/* reduce the separaters width */
+/* reduce the separators width */
 #vertical-pinned-tabs-container-separator,
 #tabbrowser-arrowscrollbox-periphery:before,
 #TabsToolbar-customization-target:after,
@@ -102,7 +102,7 @@ tab[busy] {
   opacity: 0 !important;
 }
 
-/* #main-window:has(#zen-main-app-wrapper[zen-compact-mode="true"] hbox#browser:has([zen-empty-tab="true"][selected="true"])) #mainPopupSet > 
+/* #main-window:has(#zen-main-app-wrapper[zen-compact-mode="true"] hbox#browser:has([zen-empty-tab="true"][selected="true"])) #mainPopupSet >
     #tab-preview-panel{
       display: none !important;
     } */
@@ -330,14 +330,8 @@ tab-group .tabbrowser-tab::before {
   margin-bottom: 2em !important;
   padding: 1.5em !important;
 
-  box-shadow:
-    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
-    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
-    rgba(0, 0, 0, 0.06) 0px 2px 1px,
-    rgba(0, 0, 0, 0.09) 0px 4px 2px,
-    rgba(0, 0, 0, 0.09) 0px 8px 4px,
-    rgba(0, 0, 0, 0.09) 0px 16px 8px,
-    rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
+    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
   background-color: light-dark(#fff8, #0005) !important;
 }
 
@@ -396,11 +390,7 @@ body:has(#ctrlTab-panel[hasbeenopened="true"] .ctrlTab-preview:not([hidden="true
     transform: translateY(0) !important;
     padding-right: 6px;
     pointer-events: none;
-    transition:
-      max-height 0.2s ease,
-      opacity 0.2s ease,
-      transform 0.2s ease,
-      padding 0.2s ease;
+    transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
   }
 }
 
@@ -504,16 +494,16 @@ body:has(#ctrlTab-panel[hasbeenopened="true"] .ctrlTab-preview:not([hidden="true
 
 /* compact mode player */
 /* #zen-main-app-wrapper[zen-compact-mode="true"]:not(:has(toolbox[zen-user-show=""], toolbox[zen-has-hover])) #zen-media-controls-toolbar{
-  
+
   &.playing #zen-media-focus-button{
     position: fixed !important;
     left: 180px !important;
     bottom:0 !important;
     opacity: 1 !important;
     z-index: 100000000 !important;
-    
+
   }
-  
+
   position: fixed !important;
   transform: translateX(-120%) !important;
   left: 0 !important;
@@ -522,10 +512,10 @@ body:has(#ctrlTab-panel[hasbeenopened="true"] .ctrlTab-preview:not([hidden="true
   z-index: 1000 !important;
     width: 150px !important;
     height: 50px !important;
-  
+
   &:hover{
   transform: translateX(0) !important;
-    
+
   #zen-media-focus-button{
     position: initial !important;
     left: initial !important;

websites/+instructure.com.css

@@ -0,0 +1,52 @@
+/* canvas-transparency */
+.ic-Dashboard-header,
+.ic-Dashboard-header__layout,
+#dashboard-planner-header,
+#nav-tray-portal > span > span,
+.PlannerHeader-styles__root,
+.PlannerHeader,
+.CanvasPlanner__HeaderContainer,
+.profile-tray,
+.ic-app-header__main-navigation,
+.ic-notification__content,
+.tox .tox-toolbar-overlord,
+.Grouping-styles__title,
+.Grouping-styles__title::after,
+.header-bar,
+#context_modules_sortable_container,
+div:has(> div[data-testid="text-editor"]),
+label > span[data-position-target] > span,
+div[data-testid="attempt-tab"] > div,
+html,
+body,
+nav,
+header {
+  background: none !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  transition: background-color 0.5s ease-in-out, background 0.5s ease-in-out, border 0.5s ease-in-out, box-shadow 0.5s ease-in-out !important;
+}
+
+/* canvas-sidebar */
+.navigation-tray-container,
+.tox-menu {
+  background: color-mix(in srgb, var(--natsumi-colors-secondary, color-mix(in srgb, #101010 30%, #202020 70%)) 60%, transparent) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+  backdrop-filter: blur(var(--glass-blur-radius, 10px));
+  border: 1px solid rgba(200, 200, 200, 0.1) !important; /* Optional subtle border */
+}
+
+/* canvas-bettercanvas */
+:root {
+  --bcbackground-0: transparent !important;
+  --bcbackground-1: transparent !important;
+  --bcbackground-2: transparent !important;
+  --bcsidebar: transparent !important;
+}
+
+/* canvas-darkreader */
+:root {
+  --darkreader-background-ffffff: transparent !important;
+}

websites/instructables.com.css

@@ -23,7 +23,7 @@ body,
   background: none !important;
 }
 
-/* instructables-No Recomendations */
+/* instructables-No Recommendations */
 ._recommendations_fjzu6_4 {
   display: none !important;
 }