-
Notifications
You must be signed in to change notification settings - Fork 1
/
Highlights.css
123 lines (108 loc) · 3.1 KB
/
Highlights.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*
===
HighLights
===
inspited by Nona (LonlyNine)'s Skin for Tag highlighting. The comments in this code will vanish once you click 'use on this skin.
So bookmark this page if you need them as reference! To use copy and paste everything you find here into a new Ao3 site skin's 'write custom css' text box.
*/
/*
This styles the tags so they are rounded, wider and have no commas between as it shows the colours up better.
If you want the default ao3 tag styling delete this.
*/
a.tag,
a.tag:visited,
a.tag:link {
display: inline-block;
padding: 3px 6px;
margin: 4px 0px;
border-radius: 5px;
}
.commas li:after {
content: "";
}
/*
Makes fandom tags transparent. Again delete if you don't like.
*/
h5.fandoms.heading {
color: transparent;
}
/*
makes favorite tags have no border. ditto as above.
*/
.favorite a.tag {
border: none;
}
/*
all tags that aren't fandom tags have a grey background to make tag colour variations easier to see.
*/
a.tag{
background: #eee;
}
/*
Scrolling tags for long tag fields
*/
li.blurb .tags {
max-height: 8.5em;
overflow-y: auto;
}
li.blurb .fandoms {
max-height: 3.75em;
overflow-y: auto;
}
/*
The actual highlighting code!
If there is a space in a character name then put %20 where the space would be. Put the tag name between the two speech marks.
Tags are case sensitive so if you put "First%20aid" in the tag section it will not pick up the tag "First Aid".
You can change the colours of the tags by changing the number and letter code with a hashtag in front. This is called a Hex code.
I like this website for getting Hex codes: https://www.w3schools.com/colors/colors_picker.asp
However, you can also use these recognised colour names instead!
Simply put them where the hex colour is. https://www.w3schools.com/colors/colors_names.asp
When adding a new tag, put a comma after the *previous* tag. The last tag before background-color should be comma free.
Code for symbols and characters
Rounded brackets, colons, dashes and exclamation marks work without change.
Write spaces as %20 i.e. Mixmaster%20(Transformers)
Write | as 7C. i.e. Drift%207C%20Deadlock
Write " as %22 i.e. Rafael%20%22Raf%22%20Esquivel
Write / as *s* i.e. Breakdown*s*Motormaster%20(Transformers)
Write & as *a* i.e. Breakdown%20*a*%20Wildrider%20(Transformers)
To make tags case insenstive add a letter i to the end i.e. [href*="first%20aid" i]
===
Fandom tags
===
*/
}
h5.fandoms.heading a.tag[href*="Transformers%20-%20All%20Media%20Types"]
{
background-color: #ff9966;
}
/*
==
Character tags.
==
*/
li.characters a.tag[href*="Motormaster%20(Transformers"],
li.characters a.tag[href*="Vortex%20(Transformers)"],
li.characters a.tag[href*="First%20Aid%20(Transformers)"]
{
background-color: #ff9966;
}
/*
==
Relationship tags.
==
*/
li.relationships a.tag[href*="Breakdown*s*Motormaster%20(Transformers)"],
li.relationships a.tag[href*="Drift%20%7C%20Deadlock*s*Ratchet"],
li.relationships a.tag[href*="Breakdown%20*a*%20Wildrider%20(Transformers)"]
{
background-color: #ff9966;
}
/*
==
Additional tags
==
*/
li.blurb a.tag[href*="Gore"],
li.blurb a.tag[href*="Vore"]{
background-color: #ff9966;
}