whoknowswhatidid

README.md

@@ -1,3 +1,21 @@
+
+#### Install Sunburst DevTools Theme
+
+##### Grab the Chrome Extension at the chrome web store - [https://chrome.google.com/webstore/detail/devtools-theme-sunburst/fkigcimlehjhpnejpiohmibcidmobcpo](https://chrome.google.com/webstore/detail/devtools-theme-sunburst/fkigcimlehjhpnejpiohmibcidmobcpo)
+
+- goto `chrome://flags/#enable-devtools-experiments`, toggle **Developer Tools Experiments** to **Enabled**.
+- DevTools menu: **Settings** -> **Experiments** -> **Allow UI Themes**.
+- DevTools menu: **Settings** -> **Preferences** -> **Appearance** -> **Theme** -> select **Dark**.
+- Reload Chrome.
+
+
+#### Changelog  
+
+##### 1.0.3
+  - (March 2020)
+  - changed a couple colors
+  - removed css animations
+
 ##### 1.0.2
   - (October 2018)
   - moved custom css to sunburst.css
@@ -5,23 +23,24 @@
   - fixed error in devtools.js
   - changed line highlighting colors
   - [see changes in git repo](https://code.davidawindham.com/david/sunburst-devtools/)
-	
+
 ##### 1.0.1
+  - (November 2015)
   - spaced .toolbar-counter better
   - removed text shadow    
 
 
 ##### About
-My old Chrome devtools theme got borked in an update, so I hacked it a bit and decided to finally match it up to nice mellow dark blue, orange, and green one I like to use in vi and Textmate: **Sunburst** by [Soryu](https://github.com/Soryu)
+(January 2015) My old Chrome devtools theme got borked in an update, so I hacked it a bit and decided to finally match it up to nice mellow dark blue, orange, and green one I like to use in vi and Textmate: **Sunburst** by [Soryu](https://github.com/Soryu)
 
 
 **Note:** The Chrome devtools Elements panel is not supporting the theme generated css the way it used to, so the hackety-hack is in the pseudo ::shadow elements in the canary.css
 
-you can also grab it @ the [chrome web store](https://chrome.google.com/webstore/detail/devtools-theme-sunburst/fkigcimlehjhpnejpiohmibcidmobcpo)
+
 
 ![alt tag](https://raw.githubusercontent.com/windhamdavid/sunburst-devtools/master/images/sunburst-screen-devtools.png)
 
 
 
 
-*****
+*****

sunburst.css

@@ -1,151 +1,4 @@
-#toolbar > .toolbar-item.toggleable.toggled-on {
-  -webkit-transition: border-top 0.25s ease-out 0;
-}
-.tabbed-pane:not(.help-window-main) .tabbed-pane-header-tab.selected,
-.small .tabbed-pane:not(.help-window-main) .tabbed-pane-header-tab.selected {
-  -webkit-transition: border-top 0.25s ease-out 0;
-}
-/*-- NETWORK PANES --*/
-#network-views {
-  -webkit-animation: bounceInRight 0.5s ease-in-out;
-}
-/*-- INACTIVE SELECTORS --*/
-.styles-section .properties .overloaded,
-.styles-section .properties .inactive,
-.styles-section .properties .disabled,
-.styles-section .properties .not-parsed-ok {
-  -webkit-transition: opacity 0.5s ease-in-out 0;
-}
-.styles-section .properties .enabled-button {
-  -webkit-transition: visibility 0.5s ease-in-out;
-}
-/*-- HIGHLIGHT CHILDREN --*/
-.panel.elements .parent + .children {
-  -webkit-transition: 0.5s ease-in 0.25s;
-}
-.panel.elements .parent.selected.expanded + .children > :last-child *,
-.panel.elements .parent.hovered.expanded + .children > :last-child * {
-  -webkit-transition: opacity 0.5s ease-in-out 0.25s;
-}
-/*-- POPOVERS --*/
-.popover {
-  -webkit-animation: growFadeIn 0.2s ease-in-out;
-}
-.popover.top-left-arrow {
-  -webkit-transform-origin: 25% 0%;
-}
-.popover.top-right-arrow {
-  -webkit-transform-origin: 75% 0%;
-}
-.popover.right-top-arrow {
-  -webkit-transform-origin: 100% 10%;
-}
-.popover.right-bottom-arrow {
-  -webkit-transform-origin: 100% 90%;
-}
-.popover.bottom-left-arrow {
-  -webkit-transform-origin: 25% 100%;
-}
-.popover.bottom-right-arrow {
-  -webkit-transform-origin: 75% 100%;
-}
-.popover.left-top-arrow {
-  -webkit-transform-origin: 0% 10%;
-}
-.popover.left-bottom-arrow {
-  -webkit-transform-origin: 0% 90%;
-}
-/* -- KEYFRAME DECLARATIONS -- */
-@-webkit-keyframes match-animation {
-  0% {
-    box-shadow: 0 0 0 #263238;
-    background-color: #263238;
-    color: #263238;
-  }
-  50% {
-    box-shadow: 0 0 25px #80cbc4;
-  }
-  100% {
-    box-shadow: 0 0 0 #80cbc4;
-    background-color: #80cbc4;
-  }
-}
-@-webkit-keyframes bounceInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-550px);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(30px);
-  }
-  80% {
-    -webkit-transform: translateX(-10px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-webkit-keyframes bounceInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(550px);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(-30px);
-  }
-  80% {
-    -webkit-transform: translateX(10px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-webkit-keyframes bounceInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(500px);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translateY(-30px);
-  }
-  80% {
-    -webkit-transform: translateY(10px);
-  }
-  100% {
-    -webkit-transform: translateY(0);
-  }
-}
-@-webkit-keyframes slideInLeftBig {
-  0% {
-    -webkit-transform: translateX(-500px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-webkit-keyframes slideInRightBig {
-  0% {
-    -webkit-transform: translateX(500px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-webkit-keyframes growFadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.3);
-  }
-  100% {
-    -webkit-transform: scale(1);
-  }
-}
-.panel.visible {
-  -webkit-transform: translatez(0);
-}
+
 /*-- HIGHLIGHT CHILDREN --*/
 .panel.elements /deep/ .parent + .children {
   -webkit-transition: 0.5s ease-in 0.25s;