links.scss 4.1 KB
Newer Older
1
2
3
4
5
6
$linkcolour: #4169E1;       // A striking blue
$hovercolour: DeepSkyBlue;  // A deep blue
$activecolour: #DD4B39;     // A cooked red
$visitedcolour: #6941e1;    // A run-of-the-mill purple
$visitedhovercolour: #E3E;  // A fierce magenta

7
tw-link, .link, tw-icon, .enchantment-clickblock {
Leon Arnott's avatar
Leon Arnott committed
8
9
10
	cursor: pointer;
}

11
@mixin enchantable-color {
12
13
14
15
16
17
18
19
	/*
		Links only inherit colours from styled elements that are inside the passage,
		so enchanting ?passage or ?story with (color:) won't affect them.
	*/
	tw-passage [style^="color"] &:not(:hover),
	tw-passage [style*=" color"] &:not(:hover),
	tw-passage [style^="color"][hover="true"] &:hover,
	tw-passage [style*=" color"][hover="true"] &:hover, {
20
21
22
23
		color: inherit;
	}
}

Leon Arnott's avatar
Leon Arnott committed
24
tw-link, .enchantment-link {
25
	color: $linkcolour;
26
	@include enchantable-color;
Leon Arnott's avatar
Leon Arnott committed
27
28
29
30
31
	font-weight: bold;
	text-decoration: none;
	
	transition: color 0.2s ease-in-out;
	&:hover {
32
		color: $hovercolour;
Leon Arnott's avatar
Leon Arnott committed
33
34
35
	}
	
	&:active {
36
		color: $activecolour;
Leon Arnott's avatar
Leon Arnott committed
37
38
39
40
	}
}

.visited {
41
	color: $visitedcolour;
42
	@include enchantable-color;
Leon Arnott's avatar
Leon Arnott committed
43
	&:hover {
44
		color: $visitedhovercolour;
Leon Arnott's avatar
Leon Arnott committed
45
46
47
48
49
	}
}

tw-broken-link {
	color: #993333; // A clotted blood colour
50
	@include enchantable-color;
Leon Arnott's avatar
Leon Arnott committed
51
52
53
54
	border-bottom: 2px solid #993333;
	cursor: not-allowed;
}

55
.enchantment-mouseover {
56
	border-bottom: 2px dashed #999;
57
}
58
.enchantment-mouseout {
59
	border: hsla(200,50%,50%,0.6) 1px solid;
Leon Arnott's avatar
Leon Arnott committed
60
	&:hover {
61
		background-color: hsla(200,25%,75%,0.75);
Leon Arnott's avatar
Leon Arnott committed
62
63
64
		border: transparent 1px solid;
		border-radius: 0.2em;
	}
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
}

// We need the clickblock frame to always be above the contents. So, a large pseudo-element is necessary.
// Also, to account for the contents' padding, it needs to be attached to the contents itself.
@mixin enchantment-block {
	content:"";
	width:100%;
	height:100%;
	top:0;
	left:0;
	display: block;
	box-sizing:border-box;
	// Because * has "position:relative" in main.css, this line is enough.
	position:absolute;
	// May not be necessary, but just in case...
	pointer-events:none;
Leon Arnott's avatar
Leon Arnott committed
81
}
82

83
.enchantment-clickblock {
84
85
	width:100%;
	height:100%;
86
	// This should always house a block element.
87
	display: block;
88
89
	& > :not(tw-enchantment)::after {
		@include enchantment-block;
90
		// The actual box-shadow is defined below.
91
92
93
94
95
		// 'box-shadow-color' doesn't exist (can't be animated), so we must overload 'color'.
		color: hsla(225, 73%, 57%,0.5); // $linkcolour at 0.5 opacity
		transition: color 0.2s ease-in-out;
	}
	// SCSS needs these to be separate for some reason?
96
	& > :not(tw-enchantment):hover::after {
97
98
		color: hsla(195, 100%, 50%, 0.5); // $hovercolour at 0.5 opacity
	}
99
	& > :not(tw-enchantment):active::after {
100
101
		color: hsla(7, 71%, 55%, 0.5); // $activecolour at 0.5 opacity
	}
102
103
	// Most targets, and importantly <tw-story>, have an inset box.
	& > :not(tw-enchantment)::after {
104
105
		box-shadow: inset 0 0 0 0.5vmax;
	}
106
107
	// <tw-passage> and <tw-sidebar>, which don't have padding, have normal box-shadows.
	& > tw-passage::after, & > tw-sidebar::after {
108
109
110
111
		// If no colour is specified, box-shadow uses 'color'.
		// Might as well use vmax because % doesn't work for box-shadow.
		box-shadow: 0 0 0 0.5vmax;
	}
112
}
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

.enchantment-mouseoverblock > :not(tw-enchantment)::after {
	@include enchantment-block;
	border: 2px dashed #999;
}
.enchantment-mouseoutblock > :not(tw-enchantment)::after {
	@include enchantment-block;
	border: hsla(200,50%,50%,0.6) 2px solid;
}
.enchantment-mouseoutblock:hover > :not(tw-enchantment)::after {
	@include enchantment-block;
	background-color: hsla(200,25%,75%,0.75);
	border: transparent 2px solid;
	border-radius: 0.2em;
}
128
129
130
131
132
133
134
135
136
137
138
139
140
141

/*
	Button styling is applied in three ways: by (button:) changing normal links and (click:) links as their second argument...
*/
tw-link.enchantment-button,
.enchantment-link.enchantment-button,
/*
	...by link changers and (click:) links being enchanted by (enchant:), or link expressions changed by attached (button:) changers...
*/
.enchantment-button:not(.enchantment-link) > tw-link,
.enchantment-button:not(.enchantment-link) > .enchantment-link,
/*
	...and links inside (dialog:) dialogs.
*/
142
143
144
145
146
147
148
149
150
151
152
tw-dialog-links {
	padding-top:1.5em;
	tw-link {
		border-radius: 16px;
		border-style: solid;
		border-width: 2px;
		text-align:center;
		display:inline-block;
		padding:0px 8px;
	}
}