Skip to content

Commit 68b8d90

Browse files
qqrachaqqracha
committed
style: changed scroll bar color
1 parent 546ae79 commit 68b8d90

2 files changed

Lines changed: 85 additions & 113 deletions

File tree

‎docs/stylesheets/extra.css‎

Lines changed: 82 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,114 @@
1-
/* ===== Общие замечания =====
2-
* Material переключает темы через data-md-color-scheme
3-
* - светлая: [data-md-color-scheme="default"]
4-
* - тёмная: [data-md-color-scheme="slate"]
5-
* Здесь настраиваем в основном тёмную схему.
6-
*/
7-
8-
/* Фон и базовый цвет текста в тёмной теме */
9-
[data-md-color-scheme="slate"] {
10-
--md-default-bg-color: #191A1A;
11-
--md-default-fg-color: #E8E8E8;
12-
}
131

14-
/* Основной контент */
15-
[data-md-color-scheme="slate"] .md-main {
16-
background-color: #191A1A;
2+
/* -----------------------------
3+
VitePress-like (dark, purple)
4+
----------------------------- */
5+
6+
/* Тёмная схема */
7+
[data-md-color-scheme="slate"] {
8+
/* Общие цвета */
9+
--md-default-bg-color: #1E2129;
10+
--md-default-fg-color: rgba(255,255,255,.88);
11+
--md-default-fg-color--light: rgba(255,255,255,.68);
12+
13+
/* Primary/Accent (для ссылок, активных состояний, мелких акцентов) */
14+
--md-primary-fg-color: #bd799e;
15+
--md-accent-fg-color: #d990b9;
16+
17+
/* Код */
18+
--md-code-bg-color: #20232b;
19+
--md-code-fg-color: rgba(255,255,255,.90);
20+
}
21+
22+
/* Чуть “плотнее”, как у VitePress */
23+
[data-md-color-scheme="slate"] {
24+
font-size: 15px;
1725
}
1826

19-
/* Хедер / топбар */
27+
/* Хедер без яркого “материаловского” эффекта */
2028
[data-md-color-scheme="slate"] .md-header {
21-
background-color: #191A1A;
29+
background: rgba(22,24,29,.85);
30+
backdrop-filter: blur(12px);
2231
box-shadow: none;
2332
}
2433

25-
/* Поисковая строка и диалог поиска */
26-
[data-md-color-scheme="slate"] .md-search__form {
27-
background-color: #242526;
34+
/* Контентная область */
35+
[data-md-color-scheme="slate"] .md-main {
36+
background: #1E2129;
2837
}
2938

30-
[data-md-color-scheme="slate"] .md-search__input {
31-
color: #E8E8E8;
39+
/* Сайдбар: убираем “заливки” на hover, оставляем только цвет */
40+
[data-md-color-scheme="slate"] .md-nav__link:hover {
41+
background: transparent !important;
3242
}
3343

34-
[data-md-color-scheme="slate"] .md-search__input::placeholder {
35-
color: #B8B8B8;
44+
/* Активный пункт (похоже на VitePress: спокойная подсветка + акцентный текст) */
45+
[data-md-color-scheme="slate"] .md-nav__link--active,
46+
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
47+
color: #d990b9 !important;
3648
}
3749

38-
/* Результаты поиска */
39-
[data-md-color-scheme="slate"] .md-search-result__item {
40-
background-color: #242526;
50+
/* Ссылки в тексте */
51+
[data-md-color-scheme="slate"] .md-typeset a {
52+
color: #d990b9;
4153
}
42-
43-
[data-md-color-scheme="slate"] .md-search-result__item:hover {
44-
background-color: #2F3031;
54+
[data-md-color-scheme="slate"] .md-typeset a:hover {
55+
color: #e6a6c9;
56+
text-decoration-color: #e6a6c9;
4557
}
4658

47-
[data-md-color-scheme="slate"] .md-search-result__item a {
48-
color: #FFFFFF;
59+
/* Блоки кода: скругление и “карточка” */
60+
[data-md-color-scheme="slate"] .md-typeset pre > code,
61+
[data-md-color-scheme="slate"] .md-typeset .highlight {
62+
background: #20232b;
63+
border-radius: 12px;
4964
}
5065

51-
[data-md-color-scheme="slate"] .md-search-result__item p {
52-
color: #B8B8B8;
66+
/* Общая форма (пусть останется “карточкой”) */
67+
[data-md-color-scheme="slate"] .md-typeset .admonition,
68+
[data-md-color-scheme="slate"] .md-typeset details.admonition {
69+
border-radius: 12px;
70+
border: 1px solid rgba(255,255,255,.08);
5371
}
5472

55-
/* Футер (если не нужен вовсе) */
56-
.md-footer {
57-
display: none;
73+
/* INFO / NOTE (синяя) */
74+
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
75+
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
76+
[data-md-color-scheme="slate"] .md-typeset details.info,
77+
[data-md-color-scheme="slate"] .md-typeset details.note {
78+
background-color: rgba(56, 139, 253, 0.12);
79+
border-color: rgba(56, 139, 253, 0.30);
5880
}
5981

60-
/* ---------- Admonitions (!!! info / warning / danger) ---------- */
61-
62-
[data-md-color-scheme="slate"] .md-typeset .admonition--info,
63-
[data-md-color-scheme="slate"] .md-typeset details.admonition--info {
64-
background-color: rgba(70, 124, 199, 0.14);
65-
border: 0;
82+
/* WARNING (жёлтая) */
83+
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
84+
[data-md-color-scheme="slate"] .md-typeset details.warning {
85+
background-color: rgba(210, 153, 34, 0.12);
86+
border-color: rgba(210, 153, 34, 0.35);
6687
}
6788

68-
[data-md-color-scheme="slate"] .md-typeset .admonition--info code {
69-
background-color: rgba(56, 139, 253, 0.2);
70-
color: #79c0ff;
89+
/* DANGER / ERROR (красная) */
90+
[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
91+
[data-md-color-scheme="slate"] .md-typeset .admonition.error,
92+
[data-md-color-scheme="slate"] .md-typeset details.danger,
93+
[data-md-color-scheme="slate"] .md-typeset details.error {
94+
background-color: rgba(248, 81, 73, 0.12);
95+
border-color: rgba(248, 81, 73, 0.35);
7196
}
7297

73-
[data-md-color-scheme="slate"] .md-typeset .admonition--warning,
74-
[data-md-color-scheme="slate"] .md-typeset details.admonition--warning {
75-
background-color: rgba(210, 153, 34, 0.10);
76-
border: 1px solid rgba(210, 153, 34, 0.45);
77-
}
7898

79-
[data-md-color-scheme="slate"] .md-typeset .admonition--warning code {
80-
background: rgba(210, 154, 34, 0.26);
81-
color: #f5c85e;
99+
/* Scrollbar в сайдбаре */
100+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
101+
scrollbar-color: #bd799e transparent; /* Firefox */
82102
}
83-
84-
[data-md-color-scheme="slate"] .md-typeset .admonition--danger,
85-
[data-md-color-scheme="slate"] .md-typeset .admonition--error,
86-
[data-md-color-scheme="slate"] .md-typeset details.admonition--danger,
87-
[data-md-color-scheme="slate"] .md-typeset details.admonition--error {
88-
background-color: rgba(248, 81, 73, 0.10);
89-
border: 1px solid rgba(248, 81, 73, 0.45);
103+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; }
104+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-track { background: transparent; }
105+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
106+
background-color: #bd799e;
107+
border-radius: 3px;
90108
}
91-
92-
[data-md-color-scheme="slate"] .md-typeset .admonition--danger code,
93-
[data-md-color-scheme="slate"] .md-typeset .admonition--error code {
94-
color: #ff7b72;
109+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:active,
110+
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover:active {
111+
background-color: #8f5f7a;
95112
}
96113

97114
/* ---------- Badge (span.badge) ---------- */
@@ -104,51 +121,3 @@
104121
font-size: 0.9em;
105122
line-height: 1.2;
106123
}
107-
108-
/* ---------- Цвет ссылок-акцентов ---------- */
109-
110-
.md-typeset a.link-accent {
111-
color: #D990B9;
112-
text-decoration: none;
113-
}
114-
115-
.md-typeset a.link-accent:hover {
116-
color: #E6A6C9;
117-
text-decoration-line: underline;
118-
text-decoration-color: #E6A6C9;
119-
}
120-
121-
/* ---------- Ссылки в результатах поиска ---------- */
122-
123-
[data-md-color-scheme="slate"] #mkdocs-search-results a,
124-
[data-md-color-scheme="slate"] #mkdocs-search-results a:visited {
125-
color: #D990B9;
126-
}
127-
128-
/* ---------- Боковое меню: активный пункт и hover ---------- */
129-
130-
[data-md-color-scheme="slate"] .md-nav__link--active {
131-
color: #bd799e;
132-
}
133-
134-
[data-md-color-scheme="slate"] .md-nav__link:hover {
135-
color: #b9769c;
136-
}
137-
138-
/* Можно добавить лёгкий фон при hover */
139-
[data-md-color-scheme="slate"] .md-nav__link:hover {
140-
background-color: rgba(217, 144, 185, 0.12);
141-
}
142-
143-
/* ---------- KBD (сочетания клавиш) ---------- */
144-
145-
[data-md-color-scheme="slate"] .md-typeset kbd {
146-
background-color: #2F3031;
147-
color: #E8E8E8;
148-
border: 1px solid #3A3B3C;
149-
border-radius: 4px;
150-
padding: 2px 6px;
151-
box-shadow:
152-
0 2px 4px rgba(0, 0, 0, 0.3),
153-
inset 0 1px 0 rgba(255, 255, 255, 0.05);
154-
}

‎mkdocs.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ edit_uri: edit/main/docs/
77

88
theme:
99
name: material
10+
font:
11+
text: Inter
12+
code: JetBrains Mono
1013
palette:
1114
- media: "(prefers-color-scheme: light)"
1215
scheme: default

0 commit comments

Comments
 (0)