Темная стеклянная тема для Bitrix24 с эффектом glassmorphism
Size
10.9 KB
Version
1.1.1
Created
Dec 18, 2025
Updated
about 2 months ago
1// ==UserScript==
2// @name Bitrix24 Dark Glass Theme
3// @description Темная стеклянная тема для Bitrix24 с эффектом glassmorphism
4// @version 1.1.1
5// @match https://*.brevis.bitrix24.ru/*
6// @icon https://brevis.bitrix24.ru/bitrix/templates/bitrix24/src/images/favicons/favicon.svg
7// @grant GM_addStyle
8// @run-at document-end
9// ==/UserScript==
10(function() {
11 'use strict';
12
13 console.log('Bitrix24 Dark Glass Theme: Initializing...');
14
15 // Функция для применения темы из темного стекла
16 function applyDarkGlassTheme() {
17 const styles = `
18 /* Основной фон страницы */
19 body {
20 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
21 background-attachment: fixed !important;
22 }
23
24 /* Эффект темного стекла для основных контейнеров */
25 .app__header,
26 .air-header,
27 #header,
28 .menu-items-block,
29 #menu-items-block,
30 .bx-im-messenger__container,
31 .bx-im-list-container-recent__container,
32 main,
33 #air-workarea-content {
34 background: rgba(20, 20, 40, 0.7) !important;
35 backdrop-filter: blur(20px) !important;
36 -webkit-backdrop-filter: blur(20px) !important;
37 border: 1px solid rgba(255, 255, 255, 0.1) !important;
38 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
39 }
40
41 /* Хедер */
42 .air-header {
43 background: rgba(15, 15, 30, 0.8) !important;
44 backdrop-filter: blur(25px) !important;
45 -webkit-backdrop-filter: blur(25px) !important;
46 border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
47 }
48
49 /* Боковое меню */
50 .menu-items-block {
51 background: rgba(20, 20, 40, 0.75) !important;
52 backdrop-filter: blur(20px) !important;
53 -webkit-backdrop-filter: blur(20px) !important;
54 border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
55 }
56
57 /* Элементы меню */
58 .menu-item-link,
59 .menu-item-block {
60 background: rgba(30, 30, 60, 0.5) !important;
61 backdrop-filter: blur(10px) !important;
62 -webkit-backdrop-filter: blur(10px) !important;
63 border: 1px solid rgba(255, 255, 255, 0.05) !important;
64 border-radius: 12px !important;
65 margin: 5px !important;
66 transition: all 0.3s ease !important;
67 }
68
69 .menu-item-link:hover,
70 .menu-item-block:hover {
71 background: rgba(50, 50, 90, 0.7) !important;
72 border: 1px solid rgba(255, 255, 255, 0.2) !important;
73 transform: translateX(5px) !important;
74 }
75
76 /* Активный элемент меню */
77 .menu-item-block.menu-item-active .menu-item-link {
78 background: rgba(70, 70, 120, 0.8) !important;
79 border: 1px solid rgba(100, 150, 255, 0.5) !important;
80 box-shadow: 0 0 20px rgba(100, 150, 255, 0.3) !important;
81 }
82
83 /* Чаты и сообщения */
84 .bx-im-list-recent-item__container,
85 .bx-im-list-recent-item__wrap {
86 background: rgba(30, 30, 60, 0.6) !important;
87 backdrop-filter: blur(15px) !important;
88 -webkit-backdrop-filter: blur(15px) !important;
89 border: 1px solid rgba(255, 255, 255, 0.08) !important;
90 border-radius: 15px !important;
91 margin: 8px 0 !important;
92 transition: all 0.3s ease !important;
93 }
94
95 .bx-im-list-recent-item__wrap:hover {
96 background: rgba(50, 50, 90, 0.8) !important;
97 border: 1px solid rgba(255, 255, 255, 0.2) !important;
98 transform: scale(1.02) !important;
99 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
100 }
101
102 /* Поиск */
103 .bx-im-search-input__container,
104 .air-header__search-container {
105 background: rgba(40, 40, 70, 0.6) !important;
106 backdrop-filter: blur(15px) !important;
107 -webkit-backdrop-filter: blur(15px) !important;
108 border: 1px solid rgba(255, 255, 255, 0.1) !important;
109 border-radius: 25px !important;
110 }
111
112 .bx-im-search-input__element,
113 input[type="text"],
114 input[type="search"] {
115 background: rgba(50, 50, 80, 0.5) !important;
116 backdrop-filter: blur(10px) !important;
117 -webkit-backdrop-filter: blur(10px) !important;
118 border: 1px solid rgba(255, 255, 255, 0.1) !important;
119 border-radius: 20px !important;
120 color: #e0e0e0 !important;
121 padding: 10px 15px !important;
122 }
123
124 input::placeholder {
125 color: rgba(200, 200, 220, 0.6) !important;
126 }
127
128 /* Кнопки */
129 .air-header-button,
130 button,
131 .main-buttons-item {
132 background: rgba(60, 60, 100, 0.6) !important;
133 backdrop-filter: blur(12px) !important;
134 -webkit-backdrop-filter: blur(12px) !important;
135 border: 1px solid rgba(255, 255, 255, 0.15) !important;
136 border-radius: 12px !important;
137 color: #e0e0e0 !important;
138 transition: all 0.3s ease !important;
139 }
140
141 .air-header-button:hover,
142 button:hover,
143 .main-buttons-item:hover {
144 background: rgba(80, 80, 130, 0.8) !important;
145 border: 1px solid rgba(255, 255, 255, 0.3) !important;
146 box-shadow: 0 5px 20px rgba(100, 150, 255, 0.3) !important;
147 transform: translateY(-2px) !important;
148 }
149
150 /* Активная кнопка */
151 .main-buttons-item-active {
152 background: rgba(70, 100, 180, 0.7) !important;
153 border: 1px solid rgba(100, 150, 255, 0.5) !important;
154 box-shadow: 0 0 25px rgba(100, 150, 255, 0.4) !important;
155 }
156
157 /* Счетчики */
158 .ui-counter,
159 .bx-im-list-recent-item__counters > div,
160 .main-buttons-item-counter {
161 background: rgba(220, 50, 80, 0.8) !important;
162 backdrop-filter: blur(10px) !important;
163 -webkit-backdrop-filter: blur(10px) !important;
164 border: 1px solid rgba(255, 100, 130, 0.5) !important;
165 border-radius: 20px !important;
166 color: #fff !important;
167 box-shadow: 0 0 15px rgba(220, 50, 80, 0.5) !important;
168 }
169
170 /* Аватары */
171 .bx-im-avatar__container,
172 .air-user-profile__avatar {
173 background: rgba(50, 50, 90, 0.6) !important;
174 backdrop-filter: blur(10px) !important;
175 -webkit-backdrop-filter: blur(10px) !important;
176 border: 2px solid rgba(255, 255, 255, 0.2) !important;
177 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
178 }
179
180 /* Текст */
181 .menu-item-link-text,
182 .bx-im-chat-title__text,
183 .air-header-button__text,
184 .main-buttons-item-text,
185 span,
186 div {
187 color: #e0e0e0 !important;
188 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
189 }
190
191 /* Логотип */
192 .logo,
193 .menu-items-header__logo {
194 background: rgba(40, 40, 70, 0.7) !important;
195 backdrop-filter: blur(15px) !important;
196 -webkit-backdrop-filter: blur(15px) !important;
197 border: 1px solid rgba(255, 255, 255, 0.15) !important;
198 border-radius: 15px !important;
199 padding: 10px !important;
200 }
201
202 /* Скроллбар */
203 ::-webkit-scrollbar {
204 width: 12px !important;
205 background: rgba(20, 20, 40, 0.5) !important;
206 }
207
208 ::-webkit-scrollbar-track {
209 background: rgba(20, 20, 40, 0.3) !important;
210 border-radius: 10px !important;
211 }
212
213 ::-webkit-scrollbar-thumb {
214 background: rgba(80, 80, 130, 0.7) !important;
215 backdrop-filter: blur(10px) !important;
216 -webkit-backdrop-filter: blur(10px) !important;
217 border-radius: 10px !important;
218 border: 2px solid rgba(255, 255, 255, 0.1) !important;
219 }
220
221 ::-webkit-scrollbar-thumb:hover {
222 background: rgba(100, 100, 160, 0.9) !important;
223 box-shadow: 0 0 10px rgba(100, 150, 255, 0.5) !important;
224 }
225
226 /* Дополнительные элементы с эффектом стекла */
227 .bx-im-list-container-base-header-menu__icon,
228 .menu-switcher,
229 .air-header__search-icon {
230 background: rgba(60, 60, 100, 0.5) !important;
231 backdrop-filter: blur(10px) !important;
232 -webkit-backdrop-filter: blur(10px) !important;
233 border: 1px solid rgba(255, 255, 255, 0.1) !important;
234 border-radius: 10px !important;
235 }
236
237 /* Анимация появления */
238 @keyframes glassAppear {
239 from {
240 opacity: 0;
241 transform: scale(0.95);
242 }
243 to {
244 opacity: 1;
245 transform: scale(1);
246 }
247 }
248
249 .menu-item-block,
250 .bx-im-list-recent-item__wrap,
251 .air-header-button {
252 animation: glassAppear 0.4s ease-out !important;
253 }
254
255 /* Эффект свечения для интерактивных элементов */
256 .menu-item-link:hover,
257 .air-header-button:hover,
258 .main-buttons-item:hover {
259 box-shadow:
260 0 0 20px rgba(100, 150, 255, 0.3),
261 0 8px 25px rgba(0, 0, 0, 0.4),
262 inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
263 }
264 `;
265
266 // Добавляем стили на страницу
267 TM_addStyle(styles);
268 console.log('Bitrix24 Dark Glass Theme: Styles applied successfully!');
269 }
270
271 // Применяем тему при загрузке
272 TM_runBody(() => {
273 applyDarkGlassTheme();
274 console.log('Bitrix24 Dark Glass Theme: Theme activated!');
275 });
276
277})();