Comments (26)
Hmm, yeah the 16x16 icon really looks horrible... I actually inverted them in photoshop, so you are seeing the result hang head
from github-dark.
In case you're working on these: We could provide a 32x32 instead of a 16x16, and then scale them down 50% in CSS so that they'll look nice on 200% zoom (Retina etc.) too. Or even better yet, provide SVG icons.
from github-dark.
http://stylishthemes.github.io/Github-Dark/images/octocat-spinner-64-dark.gif
http://stylishthemes.github.io/Github-Dark/images/octocat-spinner-32-dark.gif
Hmm, yeah inverting the image in photoshop didn't work out so good...
from github-dark.
I'd say we provide one clean spinner image, preferably SVG (SMIL) or at least 128x128 and let the browser do the scaling.
I'll have a look at doing it in SMIL. Gives me a reason to finally learn it :P
from github-dark.
Actually, let's not do it in SMIL, that language is just atrocious. I'll most likely do it in plain SVG with CSS animation.
from github-dark.
I'm working on a cleaner gif version.
from github-dark.
I've added a 128x128 version (not currently used)
and a new 16x16 version
from github-dark.
can this issue be closed? this looks great
from github-dark.
Not yet! I'm looking to do them through SVG+CSS animation. But go ahead and commit these right now, its certainly an improvement.
from github-dark.
Almost done! Just have to figure out why it isn't looping correctly.
http://codepen.io/silverwind/details/ocxpD
Hope you like my almost-symmetrical octocat :D
from github-dark.
LOL nice... you know, it's just a loading icon, it doesn't have to be exactly the same ;)
from github-dark.
Yeah, it was a nice exercise nonetheless. Also, I suck at coming up with something creative for a loading icon :)
from github-dark.
nice! haha. how the heck did you find the paths for doing octocat?!?
from github-dark.
@ddavison: By hard work in the svg editor :)
Also, It's done, animation-delay made the keyframes a lot simpler: http://codepen.io/silverwind/details/ocxpD
I'll look to integrate it into the style later.
from github-dark.
doesn't seem to be working from chrome.. you might need to add -moz-animation
and -webkit-animation
from github-dark.
Indeed, but it's not about prefixes. Probably Chrome doesn't like my animation
syntax.
from github-dark.
Alright, fixed in Chrome too: http://codepen.io/silverwind/details/ocxpD
It choked on my animation
shorthand as expected :P
from github-dark.
curious, will this CSS be included in the github-dark stylesheet? If so, we can have the fade-to color be their theme color!
from github-dark.
same with the fill:
on #cat
! 👍 that'd look niiiice.
from github-dark.
That should be trivial. The hard part now is get it scaled correctly.
from github-dark.
it's extremely trivial, just popping out suggestions :)
from github-dark.
I know :) I'll be sure to include colored spinners!
from github-dark.
Been trying to get these svg spinners in, but I guess I've hit the limits of CSS here. If I load the svg as an background-image I can't seem to select the svg elements for animation purposes.
I see two possible solutions to this:
- Try it with SMIL (Uncertain if it will animate when set as background-image).
- Convert the Userstyle into a Userscript and replace the spinner images with the svg through JS. This would give us svg directly in the markup which certainly can be animated.
from github-dark.
This might be a silly question, but would it be possible to load the SVG in an :after
's content?
from github-dark.
I'm sure that's possible but it seems that SVGs loaded as an image (either through , or as CSS background) are treated as static images and can't be animated. The only way to animate it through CSS is to load it inline in HTML.
I'm still pondering if it's worth switching the style to a script for this, or alternatively, provide a small addon-script that complements the style.
from github-dark.
Continued in StylishThemes/GitHub-Dark-Script#2
from github-dark.
Related Issues (20)
- Revert link accent styling in file table
- Codepages page a little TOO dark
- Gitako support doesn't work
- Network Graph not showing properly HOT 4
- YML text diffs are unreadable
- Colored border on the "Following" or "For you" button HOT 1
- All focused anchor elements all have a solid outline
- Please include this dark github theme for the new Projects Beta HOT 5
- %-encoded character in URLs do not match regexp HOT 1
- Unable to download
- Nord Theme
- GitHub Custom Fonts do not working in New Code Search and Code View (Beta)
- Contribution graph not using base color
- So many buttons in GitHub Discussions are wrongly darkened
- [Custom Fonts (5.2.37)] New Editor - background/read-only content used for cursor/text selection not using custom font settings HOT 1
- Markdown images get inverted if filename contains the string "404"
- Transparent Background on Navbar Redesign is Opaque
- GH Custom Fonts: PRs and issues with `code` in titles have small font size relative to rest of the title HOT 4
- Updating is broken - stuck at version 5.3.143 HOT 3
- Custom Fonts (5.4.7) - Family & Size settings do not affect hidden view used for text cursor/selection HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from github-dark.