1
- /**
2
- * Darcula theme
3
- *
4
- * Adapted from a theme based on:
5
- * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
6
- *
7
- * @author Alexandre Paradis <[email protected] >
8
- * @version 1.0
9
- */
10
-
11
- code [class *= "language-" ],
12
- pre [class *= "language-" ] {
1
+ code [data-language ],
2
+ pre [data-language ] {
13
3
color : # a9b7c6 ;
14
4
font-family : var (--font-family-code );
15
5
direction : ltr;
@@ -30,142 +20,75 @@ pre[class*="language-"] {
30
20
}
31
21
32
22
code ,
33
- code [class *= "language-" ] * ,
34
- pre [class *= "language-" ] * {
23
+ code [data-language ] * ,
24
+ pre [data-language ] * {
35
25
font-family : var (--font-family-code ) !important ;
36
26
font-size : 16px ;
37
27
}
38
28
39
- pre [class *= "language-" ]::-moz-selection ,
40
- pre [class *= "language-" ] ::-moz-selection ,
41
- code [class *= "language-" ]::-moz-selection ,
42
- code [class *= "language-" ] ::-moz-selection {
29
+ pre [data-language ]::-moz-selection ,
30
+ pre [data-language ] ::-moz-selection ,
31
+ code [data-language ]::-moz-selection ,
32
+ code [data-language ] ::-moz-selection {
43
33
color : inherit;
44
34
background : rgba (33 , 66 , 131 , 0.85 );
45
35
}
46
36
47
37
/* Code blocks */
48
- pre [class *= "language-" ] {
38
+ pre [data-language ] {
49
39
padding : 1em ;
50
40
margin : 0.5em 0 ;
51
41
overflow : auto;
52
42
margin-top : 1.4em ;
53
43
margin-bottom : 2.2em ;
54
44
}
55
45
56
- : not (pre ) > code [class *= "language-" ],
57
- pre [class *= "language-" ] {
46
+ : not (pre ) > code [data-language ],
47
+ pre [data-language ] {
58
48
background : # 2b2b2b ;
59
49
border-radius : 27px ;
60
50
padding : 17px ;
61
51
padding-right : 70px ;
62
52
}
63
53
64
54
/* Inline code */
65
- : not (pre ) > code [class *= "language-" ] {
55
+ : not (pre ) > code [data-language ] {
66
56
padding : 0.1em ;
67
57
border-radius : 0.3em ;
68
58
}
69
59
70
- .token .class-name {
71
- color : # afafaf ;
72
- }
73
-
74
- .token .comment ,
75
- .token .prolog ,
76
- .token .cdata {
77
- color : # 808080 ;
78
- }
79
-
80
- .token .delimiter ,
81
- .token .boolean ,
82
- .token .keyword ,
83
- .token .selector ,
84
- .token .important ,
85
- .token .atrule {
86
- color : # cc7832 ;
87
- }
88
-
89
- .token .operator ,
90
- .token .punctuation ,
91
- .token .attr-name {
92
- color : # a9b7c6 ;
93
- }
94
-
95
- .token .tag ,
96
- .token .tag .punctuation ,
97
- .token .doctype ,
98
- .token .builtin {
99
- color : # e8bf6a ;
100
- }
101
-
102
- .token .entity ,
103
- .token .number ,
104
- .token .symbol {
105
- color : # 6897bb ;
106
- }
107
-
108
- .token .property ,
109
- .token .constant ,
110
- .token .variable {
111
- color : # 9876aa ;
60
+ .frame {
61
+ overflow : hidden;
112
62
}
113
63
114
- .token . string ,
115
- .token . char {
116
- color : # 6a8759 ;
64
+ .expressive-code pre ,
65
+ .expressive-code code {
66
+ font-size : 16 px !important ;
117
67
}
118
68
119
- .token .attr-value ,
120
- .token .attr-value .punctuation {
121
- color : # a5c261 ;
69
+ .expressive-code .has-focused-lines .ec-line : not (.highlight ) .code {
70
+ opacity : 0.7 ;
71
+ transition : filter 0.35s , opacity 0.35s ;
72
+ filter : blur (0.095rem );
122
73
}
123
74
124
- .token .attr-value .punctuation : first-child {
125
- color : # a9b7c6 ;
126
- }
127
-
128
- .token .url {
129
- color : # 287bde ;
130
- text-decoration : underline;
131
- }
132
-
133
- .token .function {
134
- color : # ffc66d ;
135
- }
136
-
137
- .token .regex {
138
- background : # 364135 ;
75
+ .expressive-code .has-focused-lines : hover .ec-line .code {
76
+ opacity : 1 ;
77
+ filter : none;
139
78
}
140
79
141
- .token . bold {
142
- font-weight : bold ;
80
+ .expressive-code . has-focused-lines . ec-line . mark . highlight {
81
+ background : transparent ;
143
82
}
144
83
145
- .token .italic {
146
- font-style : italic;
147
- }
148
-
149
- .token .inserted {
150
- background : # 294436 ;
151
- }
152
-
153
- .token .deleted {
154
- background : # 484a4a ;
155
- }
156
-
157
- code .language-css .token .property ,
158
- code .language-css .token .property + .token .punctuation {
159
- color : # a9b7c6 ;
84
+ .expressive-code div .copy button {
85
+ border-radius : 50% ;
160
86
}
161
87
162
- code . language-css . token . id {
163
- color : # ffc66d ;
88
+ div . expressive-code pre :: -webkit-scrollbar {
89
+ height : 0 ;
164
90
}
165
91
166
- code .language-css .token .selector > .token .class ,
167
- code .language-css .token .selector > .token .attribute ,
168
- code .language-css .token .selector > .token .pseudo-class ,
169
- code .language-css .token .selector > .token .pseudo-element {
170
- color : # ffc66d ;
92
+ .expressive-code .ec-line div .code {
93
+ border-inline-start : unset;
171
94
}
0 commit comments