Created
April 7, 2018 11:31
-
-
Save chylex/44ac3a670817ce633db8297496cb9018 to your computer and use it in GitHub Desktop.
TweetDuck - CSS - Column Colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* The number inside nth-child(...) is the column, counting from 1. | |
* Increase or decrease -3px to change the thickness. | |
* | |
* The first number inside hsl(..., 50%, 50%) is the color hue, goes from 0 to 360. | |
* The percentages control saturation and level/brightness. | |
* | |
* Increase or decrease -3px to change the thickness. | |
* | |
* The example below is for 3 columns, add more with custom colors as you wish. | |
* | |
* Write these into the 'Browser' section. Whenever you change something in it, | |
* wait half a second and it'll update so you can see what the change did. | |
*/ | |
.js-column:nth-child(1) .js-column-header { | |
box-shadow: 0px -3px 0 hsl(0, 50%, 50%) inset; | |
} | |
.js-column:nth-child(2) .js-column-header { | |
box-shadow: 0px -3px 0 hsl(80, 50%, 50%) inset; | |
} | |
.js-column:nth-child(3) .js-column-header { | |
box-shadow: 0px -3px 0 hsl(200, 50%, 50%) inset; | |
} | |
/* and so on... you can also use the same color for multiple columns like this: */ | |
.js-column:nth-child(4) .js-column-header, | |
.js-column:nth-child(5) .js-column-header, | |
.js-column:nth-child(6) .js-column-header { | |
box-shadow: 0px -3px 0 hsl(300, 50%, 50%) inset; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment