forked from solidjs/solid-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
127 lines (110 loc) · 2.54 KB
/
styles.css
File metadata and controls
127 lines (110 loc) · 2.54 KB
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
124
125
126
127
@import "tailwindcss/base";
@import "./styles/prism.css";
@import "./styles/expressive-code.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./styles/fonts.css";
@layer base {
html {
color-scheme: light;
}
html.dark {
color-scheme: dark;
}
/** Scroll bar */
html,
.custom-scrollbar {
scroll-behavior: smooth;
scroll-padding-top: 6rem;
scrollbar-color: #778292 #e7ecf2;
scrollbar-width: thin;
}
html.dark,
html.dark .custom-scrollbar {
scrollbar-color: #8a99ae #313c50;
scrollbar-width: thin;
}
/**
* Note: Whenever chrome stops supporting custom scrollbars (the `::-webkit-scrollbar-*` selectors)
* remove the following rule and all `::-webkit-scrollbar-*` selectors
* */
html.windows:not(.firefox),
html.windows.dark:not(.firefox) {
scrollbar-width: initial;
}
html.windows:not(.firefox) .custom-scrollbar,
html.windows.dark:not(.firefox) .custom-scrollbar {
scrollbar-color: initial;
scrollbar-width: initial;
}
html.windows .custom-scrollbar::-webkit-scrollbar-track {
@apply bg-transparent;
}
html.windows .custom-scrollbar::-webkit-scrollbar {
@apply w-5 h-5 bg-slate-200/80 rounded-xl border-[6px] border-solid border-transparent;
background-clip: content-box;
}
html.windows.dark .custom-scrollbar::-webkit-scrollbar {
@apply bg-slate-600/60;
}
html.windows .custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-slate-600/70 rounded-xl border-[6px] border-solid border-transparent;
background-clip: content-box;
}
html.windows.dark .custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-slate-400/90;
}
html.windows .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-slate-600;
}
html.windows.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-slate-200/70;
}
html.windows [inert] ::-webkit-scrollbar {
display: none;
}
.prose h1,
.prose h2 {
@apply mt-0;
}
img {
@apply rounded-xl;
}
}
@layer components {
.shiki.material-theme-ocean {
background-color: transparent !important;
}
}
@layer utilities {
.heading {
@apply shadow-none text-slate-900 dark:text-white !important;
}
.heading:hover::after {
@apply opacity-80;
content: " #";
}
}
.navigation_collapsible {
overflow: hidden;
animation: slideUp 300ms ease-out;
}
.navigation_collapsible[data-expanded] {
animation: slideDown 300ms ease-out;
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--kb-collapsible-content-height);
}
}
@keyframes slideUp {
from {
height: var(--kb-collapsible-content-height);
}
to {
height: 0;
}
}