Mercurial

comparison .cms/mini/styles.css @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
1 body {
2 min-height: 100vh;
3 margin: 0;
4 font-size: 1rem;
5 font-family: var(--sans-serif);
6 font-weight: 400;
7 color: #111111;
8 text-align: left;
9 background-color: #f7f7f7;
10 }
11
12 :root {
13 --sans-serif: system-ui, sans-serif;
14 --monospace: "consolas", monospace;
15 }
16 :root {
17 scroll-behavior: smooth
18 }
19
20 *,
21 *::before,
22 *::after {
23 box-sizing: border-box;
24 }
25
26 img, video {
27 max-width: 100%;
28 display: block;
29 height: auto;
30 }
31
32 /* Template Mini */
33 body {
34 display: grid;
35 grid-template-areas:
36 "header"
37 "nav"
38 "main"
39 "footer";
40 grid-template-rows: 3.7rem auto 1fr auto;
41 }
42
43 header {
44 grid-area: header;
45 display: grid;
46 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
47 min-width: 100%;
48 background-color: #ffffff;
49 position: fixed;
50 left: 0;
51 right: 0;
52 z-index: 999;
53 box-shadow: 0 2px 6px 0 #0000001f, inset 0 -1px 0 0 #dadce0;
54 }
55 @media (max-width: 767px) {
56 header {
57 column-gap: 0;
58 }
59 }
60 @media (min-width: 768px) {
61 header {
62 column-gap: 0.5rem;
63 }
64 }
65
66 .header-content {
67 grid-column: 2/3;
68 display: grid;
69 grid-auto-flow: column;
70 justify-content: space-between;
71 position: relative;
72 }
73 .lrtop {
74 display: grid;
75 align-items: center;
76 }
77 .logo {
78 position: absolute;
79 left: 50%;
80 top: 50%;
81 transform: translate(-50%, -50%);
82 }
83 .logo a {
84 text-decoration: none;
85 color: #222222;
86 font-size: 1.2rem;
87 line-height: 1;
88 font-family: var(--monospace);
89 }
90
91
92
93 /* Icon */
94 .icons-container {
95 display: grid;
96 grid-auto-flow: column;
97 justify-content: left;
98 align-items: center;
99 position: relative;
100 color: #111111;
101 }
102 @media (max-width: 767px) {
103 .icons-container {
104 margin-right: 0.3rem;
105 }
106 }
107
108 .icon-box {
109 position: relative;
110 }
111 @media (max-width: 374px) {
112 .icon-box {
113 width: 37px;
114 height: 37px;
115 }
116 }
117 @media (min-width: 375px) {
118 .icon-box {
119 width: 44px;
120 height: 44px;
121 }
122 }
123
124 .icon-box a {
125 position: absolute;
126 left: 0;
127 right: 0;
128 top: 0;
129 bottom: 0;
130 padding: 0.3125rem;
131 z-index: 7;
132 }
133 .icon-box a:hover {
134 background-color: #eaeaea;
135 border-radius: 50%;
136 color: green;
137 }
138
139
140 /*Icon Phone*/
141 .phone-number-container {
142 position: relative;
143 color: #111111;
144 height: 2.75rem;
145 }
146
147 .phone-number-container a {
148 padding: 0 3.5625rem 0 1rem;
149 height: 2.75rem;
150 margin-right: -2.75rem;
151 position: relative;
152 z-index: 10;
153 font-size: 1rem;
154 text-decoration: none;
155 color: #111111;
156 display: flex;
157 align-items: center;
158 }
159 .phone-number-container a:hover {
160 color: #1a73e8;
161 }
162 .phone-number-container:hover ~ .icon-box {
163 background-color: #f1f1f1;
164 border-radius: 50%;
165 }
166
167 @media (max-width: 768px) {
168 .phone-number-container {
169 display: none;
170 }
171 }
172
173
174 .icon-tg-box {
175 position: relative;
176 }
177 @media (max-width: 374px) {
178 .icon-tg-box {
179 width: 37px;
180 height: 37px;
181 }
182 }
183 @media (min-width: 375px) {
184 .icon-tg-box {
185 width: 44px;
186 height: 44px;
187 }
188 }
189
190 .icon-tg-box a {
191 position: absolute;
192 left: 0;
193 right: 0;
194 top: 0;
195 bottom: 0;
196 padding: 0.3125rem;
197 z-index: 7;
198 }
199 .icon-tg-box a:hover {
200 background-color: #dff1ff;
201 border-radius: 50%;
202 }
203
204
205
206
207 .icon-whatsapp-box {
208 position: relative;
209 }
210 @media (max-width: 374px) {
211 .icon-whatsapp-box {
212 width: 37px;
213 height: 37px;
214 }
215 }
216 @media (min-width: 375px) {
217 .icon-whatsapp-box {
218 width: 44px;
219 height: 44px;
220 }
221 }
222
223 .icon-whatsapp-box a {
224 position: absolute;
225 left: 0;
226 right: 0;
227 top: 0;
228 bottom: 0;
229 padding: 0.3125rem;
230 z-index: 7;
231 }
232 .icon-whatsapp-box a:hover {
233 background-color: #e0feff;
234 border-radius: 50%;
235 }
236
237
238 nav {
239 grid-area: nav;
240 display: grid;
241 background-color: #f7f7f7;
242 grid-template-areas: ". gnc .";
243 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
244 }
245 /*Header Container*/
246 nav ul {
247 grid-column: gnc;
248 margin: 0;
249 padding: 0;
250 display: grid;
251 grid-auto-flow: column;
252 justify-content: space-evenly;
253 }
254 nav li {
255 list-style-type: none;
256 }
257 nav li a {
258 display: inline-block;
259 line-height: 0;
260 padding: 24px 10px 24px 10px;
261 font-size: 17px;
262 color: #000000;
263 text-decoration: none;
264 }
265 nav li a:hover {
266 color: #333333;
267 }
268 nav li.active a {
269 color: #1a73e8;
270 }
271 /* Active Mobile Display */
272 @media (max-width: 768px) {
273 nav ul {
274 display: none;
275 }
276 }
277
278
279
280 main {
281 grid-area: main;
282 display: grid;
283 grid-template-columns: 1fr minmax(auto,40rem) 1fr;
284 row-gap: 1.4rem;
285 column-gap: 0.5rem;
286 padding-bottom: 3rem;
287 align-content: start;
288 }
289 main > * {
290 grid-column: 2/3;
291 }
292 main .ignorgap {
293 grid-column: 1/-1;
294 justify-self: center;
295 max-width: 40rem;
296 margin: 0 auto;
297 }
298
299 main .gap {
300 grid-column: 1/-1;
301 justify-self: center;
302 max-width: 40rem;
303 }
304
305 main .banner {
306 max-height: 380px;
307 object-fit: cover;
308 grid-column: 1/-1;
309 justify-self: center;
310 }
311 main h1 {
312 margin: 0;
313 padding: 0;
314 font-weight: 500;
315 line-height: 1;
316 font-size: calc(1.7rem + 0.7vw);
317 position: relative;
318 display: block;
319 }
320 main > h1:first-child {
321 margin-top: 2rem;
322 }
323
324 main h2, main h3, main h4, main h5, main h6 {
325 margin: 0;
326 padding: 0;
327 font-weight: 400;
328 line-height: 1;
329 position: relative;
330 }
331 main p {
332 margin: 0;
333 padding: 0;
334 display: block;
335 line-height: 1.4;
336 }
337 main a {
338 margin: 0;
339 padding: 0;
340 display: inline;
341 line-height: 1.4;
342 color: #007ce7;
343 }
344 main pre {
345 margin: 0;
346 width: 100%;
347 word-break: break-all;
348 line-height: 1.4em;
349 display: block;
350 padding: 0.7rem;
351 background-color: #eaeaea;
352 }
353 main code {
354 background-color: #eaeaea;
355 font-family: var(--monospace);
356 white-space: pre-wrap;
357 }
358 main p code {
359 word-break: break-all;
360 }
361 main code p {
362 padding: 0.3rem 0.7rem 0.3rem 0.7rem;
363 margin: -0.7rem -0.7rem 0.3rem -0.7rem;
364 background-color: lightgrey;
365 }
366
367 main img, main svg, main video, main audio, main source, main blockquote, main figure, main div, main iframe {
368 margin: 0;
369 padding: 0;
370 position: relative;
371 }
372 figcaption {
373 text-align: center;
374 background-color: #0000003d;
375 padding: 0.1rem 0.7rem;
376 }
377 main .wide {
378 grid-column: 1/-1;
379 justify-self: center;
380 }
381
382 main ul {
383 margin: 0;
384 padding: 0 0 0 1.2rem;
385 display: block;
386 line-height: 1.4;
387 }
388 main ol {
389 margin: 0;
390 padding: 0 0 0 1.2rem;
391 display: block;
392 line-height: 1.4;
393 }
394
395 main blockquote {
396 margin: 0;
397 padding: 0.5rem 0.7rem 0.5rem 0.7rem;
398 background-color: #eaeaea;
399 border-left: 2px solid #acacac;
400 }
401 main blockquote p {
402 margin-bottom: 0.7rem;
403 }
404 main blockquote p.author {
405 text-align: right;
406 padding-right: 1rem;
407 }
408 main blockquote p:last-child {
409 margin-bottom: 0;
410 }
411
412 main > video {
413 grid-column: 1/-1;
414 margin: 0 auto;
415 max-width: 100%;
416 height: auto;
417 }
418
419 footer {
420 grid-area: footer;
421 background-color: #111111;
422 display: grid;
423 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
424 column-gap: 0.5rem;
425 }
426
427
428 .footer-content {
429 grid-column: 2/3;
430 padding: 1rem 0rem;
431 min-height: 3rem;
432 display: grid;
433 gap: 1rem;
434 }
435 @media (max-width: 374px) {
436 .footer-content {
437 grid-template-columns: 1fr;
438 grid-template-areas:
439 "left-footer"
440 "right-footer";
441 }
442 }
443 @media (min-width: 375px) {
444 .footer-content {
445 grid-template-columns: 1fr 0.4fr;
446 grid-template-areas:"left-footer right-footer";
447 }
448 }
449 .left-footer {
450 grid-area: left-footer;
451 display: grid;
452 row-gap: 0.7rem;
453 }
454 .right-footer {
455 grid-area: right-footer;
456 display: flex;
457 width: 100%;
458 padding: 0.3rem 0;
459 justify-content: center;
460 color: #eeeeee;
461 }
462 .right-footer div {
463 color: #eeeeee;
464 }
465 @media (min-width: 375px) {
466 .right-footer {
467 justify-content: flex-end;
468 padding: 0;
469 }
470 }
471
472
473
474 /*Footer Container*/
475 footer ul {
476 display: grid;
477 margin: 0;
478 padding: 0;
479 row-gap: 0.4375rem;
480 }
481 footer li {
482 list-style-type: none;
483 margin: 0;
484 display: block;
485 }
486 footer li a {
487 line-height: 1.3;
488 color: #ffffff;
489 text-decoration: none;
490 }
491 footer li a:hover {
492 color: #ddeeff;
493 }
494 footer li.active a {
495 color: #ddeeff;
496 }
497
498 @media (min-width: 768px) {
499 footer ul {
500 display: flex;
501 flex-wrap: wrap;
502 justify-content: left;
503 column-gap: 0.9375rem;
504 }
505 }
506
507 .copyright {
508 margin: 0;
509 font-size: 0.93rem;
510 color: #cccccc;
511 }
512 .copyright a {
513 color: #00b8ff;
514 text-decoration: none;
515 }
516 .copyright a:hover {
517 color: #39c7ff;
518 text-decoration: none;
519 }
520
521
522 /* Mobile Menu */
523 /* Icon Line */
524 .button-mobimenu-container {
525 display: grid;
526 justify-content: center;
527 align-content: center;
528 position: relative;
529 width: 3.7rem;
530 height: 3.7rem;
531 cursor: pointer;
532 }
533 /* Active Mobile Display */
534
535 .menu-icon {
536 width: 30px;
537 height: 14px;
538 position: relative;
539 z-index:7;
540 }
541
542 .menu-icon span {
543 display: block;
544 position: absolute;
545 left: 0;
546 width: 100%;
547 height: 3px;
548 transform: rotate(0);
549 transition: transform 0.1s ease;
550 }
551 .menu-icon span {
552 background-color: #0d93ff;
553 }
554 .menu-icon span.line-1 {
555 top: 0;
556 }
557 .menu-icon span.line-2 {
558 bottom: 0;
559 }
560
561 .mobile-menu-open .menu-icon span.line-1 {
562 top: 5px;
563 transform: rotate(45deg);
564
565 }
566 .mobile-menu-open .menu-icon span.line-2 {
567 top: 5px;
568 transform: rotate(-45deg);
569 }
570
571 /*Mobile Menu Container*/
572
573 aside {
574 position: fixed;
575 top: 0;
576 bottom: 0;
577 left: 0;
578 width: calc(100% - 4rem);
579 min-width: 16.875rem;
580 background-color: #ffffff;
581 z-index: 777;
582 transform: translate3d(-100%, 0, 0);
583 transition: opacity 0.25s ease, transform 0.25s ease;
584 padding: 3.7rem 0 0 0;
585 overflow-y: auto;
586 scrollbar-width: none; /*FireFox*/
587 }
588 .mobile-menu-open aside {
589 transform: translate3d(0, 0, 0);
590 transition: opacity 0.25s ease, transform 0.25s ease;
591 }
592
593 @media (min-width: 1024px) {
594 aside {
595 width: fit-content;
596 max-width: calc(100% - 4rem);
597 }
598 }
599
600 aside ul {
601 margin: 0;
602 padding: 0;
603 }
604 aside > ul {
605 padding-bottom: 1rem;
606 }
607 aside > ul:not(:first-child) {
608 padding-top: 1rem;
609 }
610 aside > ul:not(:last-child) {
611 border-bottom: 1px solid #ccc;
612 }
613 aside li {
614 list-style-type: none;
615 position: relative;
616 }
617 aside li a {
618 width: 100%;
619 display: block;
620 padding: 13px 17px;
621 color: #111111;
622 text-decoration: none;
623 }
624 aside li a:hover {
625 color: #1a73e8;
626 background-color: #f7f7f7;
627 }
628 aside li.active > a {
629 color: #1a73e8;
630 background-color: #f7f7f7;
631 }
632
633 ul.sub-menu {
634 margin: 0;
635 padding: 0;
636 }
637
638 aside ul > li > ul > li > a {
639 padding-left: 34px;
640 }
641 aside ul > li > ul > li > ul > li > a {
642 padding-left: 51px;
643 }
644
645
646 /*Mobile Menu Reset*/
647 .bg-reset {
648 display: none;
649 width: 100%;
650 height: 100%;
651 visibility: visible;
652 position: fixed;
653 left: 0;
654 right: 0;
655 top: 0;
656 bottom: 0;
657 z-index: 700;
658 opacity: 0.7;
659 background-color: #eeeeee;
660 }
661 .mobile-menu-open .bg-reset {
662 display: block;
663 }
664
665
666 /*Hot Info*/
667 main .hot-scroll {
668 overflow: hidden;
669 grid-column: 1/-1;
670 background-color: #f1f1f1;
671 padding: 2rem 0;
672 }
673
674 main .hot-scroll ul {
675 display: flex;
676 gap: 1rem;
677 overflow-x: auto;
678 margin: 0;
679 padding: 1rem 0;
680 scroll-behavior: smooth;
681 }
682 main .hot-scroll ul li {
683 display: block;
684 flex: 0 0 240px;
685 background-color: #ffffff;
686 min-height: 12rem;
687 transition: all .5s ease;
688 border-radius: 0.3rem;
689 overflow: hidden;
690 border: 1px solid #dadada;
691 user-select: none;
692 }
693
694 main .hot-scroll ul li:hover {
695 box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
696 }
697
698 main .hot-scroll ul li:first-child {
699 margin-left: calc(50% - 140px);
700 }
701 @media (min-width: 375px) {
702 main .hot-scroll ul li {
703 flex: 0 0 280px;
704 }
705 }
706 @media (min-width: 600px) {
707 main .hot-scroll ul li:first-child {
708 margin-left: calc(50% - 290px);
709 }
710 }
711 @media (min-width: 1024px) {
712 main .hot-scroll ul li {
713 flex: 0 0 440px;
714 }
715 main .hot-scroll ul li:first-child {
716 margin-left: calc(50% - 470px);
717 }
718 }
719
720
721 main .hot-scroll img {
722 overflow: hidden;
723 max-height: 10rem;
724 object-fit: cover;
725 margin: 0;
726 }
727 main .hot-scroll .hot-news {
728 padding: 0.6rem 1rem 1.6rem 1rem;
729 }
730 main .hot-scroll .hot-news h2 {
731 padding: 0;
732 margin: 0 0 0.7rem 0;
733 font-weight: 400;
734 font-size: 1.4rem;
735 color: #111111;
736 display: block;
737 text-decoration: none;
738 }
739 main .hot-scroll .hot-news p {
740 font-weight: 400;
741 color: #111111;
742 display: block;
743 text-decoration: none;
744 }
745 main .hot-scroll ul li a {
746 text-decoration: none;
747 }
748
749 @media (min-width: 1024px) {
750 main .hot-scroll img {
751 max-height: 14rem;
752 }
753 main .hot-scroll .hot-news {
754 padding: 1rem 1.4rem 2rem 1.4rem;
755 }
756 main .hot-scroll .hot-news h2 {
757 font-size: 1.6rem;
758 }
759 }
760
761 /*ЮMoney*/
762 .yoomoney-pay {
763 padding: 0.7rem 1.7rem;
764 border-radius: 0.3rem;
765 border: 0;
766 cursor: pointer;
767 background-color: #8b3ffd;
768 font-size: 0.9rem;
769 transition: 0.3s;
770 color: #ffffff;
771 }
772 .yoomoney-pay:hover {
773 background: #8b3ffd;
774 box-shadow: 0 0 0 0.2em #c3a4ff;
775 }
776 .yoomoney-form {
777 display: grid;
778 padding: 0.7rem 0.7rem;
779 border-radius: 0.3rem;
780 background-color: white;
781 box-shadow: 0px 3px 7px 0px #00000033;
782 column-gap: 0.7rem;
783 }
784 .yoomoney-form input[type='email'] {
785 width: 100%;
786 border: 1px solid #777777;
787 border-radius: 0.3rem;
788 padding: 0 0 0 0.5rem;
789 font-size: 1rem;
790 font-weight: 600;
791 }
792 @media (max-width: 375px) {
793 .yoomoney-form {
794 width: 100%;
795 grid-template-columns: auto;
796 row-gap: 1rem;
797 }
798 .yoomoney-form input[type='email'] {
799 height: 2.4rem;
800 }
801 }
802 @media (min-width: 376px) {
803 .yoomoney-form {
804 width: fit-content;
805 grid-template-columns: auto auto;
806 }
807 }
808 /*
809 ul a:not([href]) {
810 display: none;
811 }
812 ul a:not([href]) + ul {
813 display: none;
814 }
815 */
816
817 #lbox-window {
818 position: fixed;
819 z-index: 999;
820 cursor: pointer;
821 background-color: #000000dd;
822 display: grid;
823 height: 100vh;
824 width: 100vw;
825 grid-template-areas: "lightbox";
826 }
827
828 #lbox-window img, #lbox-window video, #lbox-window audio {
829 max-width: 100%;
830 max-height: 100%;
831 box-shadow: 0 3px 7px 0 #0000004d;
832 grid-area: lightbox;
833 align-self: center;
834 justify-self: center;
835 overflow: hidden;
836 }