Mercurial

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