mauricecruz / zero-base-themes Goto Github PK
View Code? Open in Web Editor NEWChrome Devtools Extension that loads themes using the Zero Base Template
License: MIT License
Chrome Devtools Extension that loads themes using the Zero Base Template
License: MIT License
e.g. animations = true / false
Using the current defaults; @theme : "zero-dark-matrix"; .show-animations( true ); .show-child-highlighter( true ); @import "../themes/@{theme}";
I'm getting:
>> ParseError: Unrecognised input in less/_mixins.less on line 49, column 13:
>> 48 .adjust(@selector, @color, @percent, @invert: false) when (@invert = false) and (@theme-type = dark), (@invert = true) and (@theme-type = light) {
>> 49 @{selector}: lighten(@color, @percent) !important; /*lighten*/
>> 50 }
Links should generally default to the same color to optimize for visual scanning. Will probably create a global-link
var.
I'm following the instructions carefully but I get this error in my grunt watch
note: it's a fresh git pull from the repo, nothing's changed except the path to custom.css in my filesystem (which is the same as in the explanation)
The error:
Running "less:stable" (less) task
NameError: variable @sources-text is undefined in less/stable/_panel-sources.less on line 8, column 9:
7 text-shadow: 0 1px 0 @global-textshadow !important;
8 color: @sources-text !important;
9 }
Warning: Error compiling less/stable/build.less Use --force to continue.
Create a front-end in devtools to load different themes.
Update paths to images such as chrome-devtools://devtools/bundled/Images/paneAddButtons.png to base64 incase these are removed from core
Including how to get up and running, how to contribute and how to make your own theme.
Which code theme is?
Hi, I am getting the following error when I try to change the theme in config.less while running grunt watch:
>> File "less\config.less" changed.
Running "less:generate" (less) task
>> NameError: variable @gradient-top is undefined in themes\s10wen-monokai.less on line 179, column 42:
>> 178 // Forms
>> 179 @form-button-background: linear-gradient(@gradient-top,@gradient-bottom);
>> 180 @form-button-border : lighten(@global-background, 10%);
Warning: Error compiling less/build-stable.less Use --force to continue.
Aborted due to warnings.
Completed in 0.530s at Wed Nov 12 2014 13:14:12 GMT+0000 (GMT Standard Time) - Waiting...
Please can you advise me on how to fix this. Many thanks
Hi,
Really love this repo, very useful. I would like to be able to change font-family (e.g. to Source Code Pro) and font-size. Could this be implemented?
Cheers, Andrew
Cannot show variable in the popup pannel when mouseover a param.
In the img below , the url is a string which evaluates "http://g8up.cn".
When everything is tidied up, create a CHANGELOG.md file and start tagging ๐ฑ
With this code:
// Animations
//************************************************************************/
// Disable if experiencing jankiness. Toggles animations for: certain
// sidebar panels | current selection on elements panel | child-highlighter
.show-animations( true );
// Child Highlighter
//************************************************************************/
// Highlights the children of the selected node.
.show-child-highlighter( true );
I'm thinking these might be better situated in the theme files. For example if someone creates a new theme and set both these to false, then someone else wants to view the theme, but leaves these as true, then the theme author may not have tested them and they may break.
Make sense?
Related #21
Canary has a new feature that highlights dom changes in the elements panel.
I can override the .dom-update-highlight
selector by prefixing it with either ::shadow
or /deep/
. But I can't figure out a way to override the animation.
It leverages these styles injected into the shadow root:
@-webkit-keyframes dom-update-highlight-animation {
from {
background-color: rgb(158, 54, 153);
color: white;
}
80% {
background-color: rgb(245, 219, 244);
color: inherit;
}
to {
background-color: inherit;
}
}
.dom-update-highlight {
-webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
border-radius: 2px;
}
It is possible to 'inject' keyframes into shadow dom without using js?
Theme stylesheets will change from time to time. It will be up to the theme author to update their stylesheets to reflect any changes that leverage new variables.
A fallback stylesheet will be used to default a variable if the author hasn't updated their stylesheet yet.
Hi, how would I modify the styles to keep original text color for
.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight)
?
Currently it is set to highlight all the text in black.
Since stable moved alot of the views into shadow dom, canary.css content should fold back into their respective stylesheets.
Probably a good opportunity for cleaning up legacy selectors as well. This is gonna be a pain in the ass.
Suggestions on how to go about it are welcome.
Include information on how to get working locally, make changes and see them in the dev tools.
Did they update the dev tools selector?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.