· 6 years ago · Jul 29, 2019, 04:52 AM
1/*
2 Text strings
3
4 Resets
5 Font-size and line-height
6
7 Send screen width to javascript
8
9 Width
10 Flexbox
11 Responsive classes
12
13 Header
14 Logo
15 User Links
16 Navigation
17 Dropdown Navigation Menus
18 Mobile navigation header
19 Search
20
21 Precontent blocks and padding
22 Breadcrumb Navigation
23 Social Icons
24
25 Footer
26 Mega Footer
27 Countdown
28 Guest Message
29 Global Message
30 Background Picker
31
32 Headers
33 ipsBox
34 Buttons
35 Data Lists
36 Minimal and Responsive Layouts
37
38 Forum Index
39 Forum Index: Grid
40 Forum Index: Fluid
41 Forum Icons
42 Sidebar and Widgets
43
44 Topic List
45 Topic View
46 Comments
47 Editor
48
49 Inputs
50 Select Menus
51 Checkboxes
52 Wizard
53
54 Minor Elements
55 Tabs
56 Popup Menus
57 Advanced Search
58 Profiles
59 Settings and ModCP Tables
60 Blogs
61 Calendar
62 Leaderboard
63 Gallery
64 Downloads
65 Pages
66 Calendar
67 Nexus
68 Clubs
69 Streams
70 Inbox
71 Promoted Content
72 Announcements
73
74 Pagination
75 Bar Pagination
76 Mini Pagination
77
78 Message bar
79 Block Manager
80 2fa.css
81
82 Wrapped styles for framework
83 Wallpaper styles
84
85 Bug Fixes
86*/
87
88/*
89 ----------------
90 Modifier classes:
91 .focus-transparent: correctly spaces elements for transparent ipsBox layouts
92 .focus-wallpaper: adds backgrounds to certain elements for contrast against wallpaper backgrounds
93 .focus-social-gradient: adds gradients to social icons
94 .focus-guest-alert: enhances the visibility of the guest message widget
95 .focus-topic-compact: merges individual posts into one box
96 .focus-rep-inherit: force reputation to inherit mobile post header colour
97 .focus-post-bar: wraps comment buttons within a bar
98 .focus-post-buttons: converts comment controls into buttons
99 .focus-post-row focus-post-bar: converts comment controls into a link row within a bar
100 .focus-sticky-author: makes the author pane sticky on supported desktop browsers
101 .focus-attached-dropdowns: arrow dropdown menus
102 .focus-nav-right: align last dropdown menus to the right
103 .user-links-sep: show separator instead of borders
104 .user-links-b: add borders between userlinks
105 .focus-fixed-header
106 .focus-fixed-user
107 .focus-fixed-nav
108 ----------------
109*/
110
111
112
113/*
114 ----------------
115 - Text strings
116 ----------------
117*/
118
119.cForumList .ipsDataItem_unread .ipsDataItem_title:before, .cForumGrid_unread .ipsPhotoPanel h3 a:before {
120 content: "NEW";
121}
122
123.focus-guestMessage h4:before{
124 content: "Welcome to ";
125}
126
127.focus-picker{
128 content: "Change background image";
129}
130
131.focus-timer-title:before{
132 content: '{theme="countdown_title"}';
133}
134
135.focus-timer-done .focus-timer-title:before{
136 content: '{theme="countdown_done"}';
137}
138
139.ipsCommentUnreadSeperator:before{
140 content:"New content begins here";
141}
142
143.cTopic .cRatingColumn > .ipsList_reset:before{
144 content: 'Vote below answer:';
145}
146
147
148
149/*
150 ----------------
151 - CSS Variables
152 ----------------
153*/
154
155:root{
156 --search-button-width: 36px;
157
158 --topic-avatar: 110px;
159 --author-pane--width: calc(var(--topic-avatar) + 90px);
160 --item-controls-offset: calc(var(--author-pane--width) + var(--author-pane--border-width, 0px) + var(--post-content--padding, 0px));
161
162 --subforum-display: grid;
163 --subforum-min-width: 200px;
164 --subforum-gap: 6px;
165
166 --grid-gap: 15px;
167 --grid-min: 250px;
168
169 --footer-col-width: 190px;
170}
171
172
173/*
174 ----------------
175 - Resets
176 ----------------
177*/
178
179.ipsDataList.ipsAreaBackground_reset,
180.ipsAreaBackground .ipsAreaBackground,
181.cForumList .ipsAreaBackground[data-role="forums"]{
182 background-color: rgba(18,18,18,0.5);
183}
184
185.ipsAttachment_dropZone{
186 background: {hextorgb="area_background_light" opacity="0.7"};
187}
188
189#elTwoFactorAuthentication > div{
190 background-color: {theme="area_background_reset"};
191}
192
193
194
195
196/* Text colours */
197.ipsType_pageTitle,
198.ipsType_richText,
199.ipsStreamItem_title,
200a.ipsType_blendLinks:not( .ipsType_noUnderline ):hover,
201.ipsType_blendLinks:not( .ipsType_noUnderline ) a:not( .ipsType_noUnderline ):hover,
202.ipsType_sectionTitle a,
203.ipsType_sectionTitle .ipsType_light{
204 color: inherit;
205}
206
207.ipsWidget_title a{
208 color: inherit !important;
209}
210
211.ipsType_sectionHead,
212#cAnnouncementSidebar h3,
213.ipsPager_type,
214.ipsPager .ipsPager_next a:after,
215.ipsPager .ipsPager_prev a:after,
216.ipsStreamItem_snippet .ipsType_richText{
217 color: {theme="text_color"};
218}
219
220.ipsType_neutral {
221 color: {hextorgb="text_color" opacity="0.7"};
222}
223
224#elTwoFactorAuthentication .ipsTabs .ipsTabs_item:not( .ipsTabs_activeItem ) {
225 color: {hextorgb="text_color" opacity="0.6"};
226}
227
228.ipsType_noLinkStyling{ color: {theme="link"}; }
229.ipsType_noLinkStyling:hover { color: {theme="link_hover"}; }
230
231mark{
232 background: {theme="mentions"};
233 color: #fff !important;
234}
235
236
237/* Border colours */
238.ipsDataItem,
239.ipsDataList:not(.ipsGrid) .ipsDataItem:last-child,
240.ipsDataList.ipsDataList_zebra > .ipsDataItem,
241#elProfileActivityOverview .ipsStreamItem,
242#elUserContent .ipsStreamItem,
243#elSingleStatusUpdate .ipsStreamItem,
244.ipsStream_snippetInfo,
245html[dir="ltr"] .ipsWidget_horizontal .cNewestMember,
246html[dir="rtl"] .ipsWidget_horizontal .cNewestMember{
247 border-color: {hextorgb="text_color" opacity="0.15"};
248}
249
250html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem:after{
251 border-right-color: {theme="area_background_reset"};
252}
253html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem:after{
254 border-left-color: {theme="area_background_reset"};
255}
256
257
258/*
259 ----------------
260 - Typography
261 ----------------
262*/
263
264/* Define global font size */
265html {
266 font-size: 62.5%;
267}
268
269body{
270 font-size: 1.2rem;
271 line-height: 1.8rem;
272 font-family: {{if theme.body_font != 'default'}}"{theme='body_font'}", sans-serif{{else}} BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif {{endif}};
273 -moz-osx-font-smoothing: grayscale;
274}
275
276.fa{
277 {prefix="transform" value="translate(0,0)"}
278}
279
280.fa.fa-flip-horizontal{
281 {prefix="transform" value="scale(-1,1)"}
282}
283
284.ipsType_huge {
285 font-size: 7.2rem;
286}
287
288.ipsType_veryLarge{
289 font-size: 4.4rem;
290}
291
292.cCalendarNav .ipsType_pageTitle,
293.ipsType_pageTitle.ipsType_largeTitle{
294 font-size: 2.7rem;
295}
296
297.ipsDialog_title,
298.ipsType_pageTitle{
299 font-size: 2.2rem;
300}
301
302.ipsType_sectionHead,
303.ipsStreamItem_title,
304.cProfileRepScore_points,
305.cPopularItem_stats{
306 font-size: 2rem;
307}
308
309.ipsDataItem_statsLarge .ipsDataItem_stats_number,
310.ipsApp .ipsField_primary,
311.ipsApp .ipsField_primary.ipsField_autocomplete input,
312.ipsApp .ipsFieldRow_primary input{
313 font-size: 1.8rem;
314}
315
316.ipsStreamItem_titleSmall,
317.cForumGrid_title{
318 font-size: 1.7rem;
319}
320
321.ipsType_large,
322#elMyClubsActivity .ipsStreamItem_title,
323.cCmsDatabase_index h4.ipsDataItem_title,
324.ipsAttachment_dropZone,
325.ipsTable.ipsMatrix .ipsMatrix_subHeader,
326.ipsForm_horizontal .ipsFieldRow_required:before,
327.ipsForm_group > .ipsForm_groupTitle{
328 font-size: 1.6rem;
329}
330
331.ipsStreamItem_snippet,
332.ipsComposeArea_dummy{
333 font-size: 1.5rem;
334}
335
336.ipsType_sectionHead.ipsType_large,
337.ipsType_sectionHead.ipsType_normal,
338.cCalendar_dayNumber,
339.ipsAttachment_dropZoneSmall .ipsAttachment_supportDrag,
340.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_label,
341.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_title,
342.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_label,
343.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_title{
344 font-size: 1.4rem;
345}
346
347.ipsType_normal,
348div[data-role="imageDescription"] .ipsType_medium,
349.cForumList .ipsDataItem_title,
350.ipsDataItem_title,
351.ipsApp label:not( .ipsField_unlimited ), .ipsApp input, .ipsApp button, .ipsApp select, .ipsApp textarea{
352 font-size: 1.3rem;
353}
354/* Originally 1.3rem */
355.ipsType_medium,
356.ipsTabs_item,
357.ipsStreamItem_actionBlock,
358.cToken,
359.ipsTable th,
360.ipsFieldRow_desc,
361#elMyClubsActivity .ipsStreamItem_status,
362.ipsStreamItem_status,
363.ipsMenu .ipsDataItem_title,
364.ipsTabs.ipsTabs_small .ipsTabs_item,
365.ipsProgressBar_progress,
366.cPopularItem_stats span{
367 font-size: 1.2rem;
368}
369
370.ipsType_small,
371.ipsType_minorHeading,
372.ipsPager_type,
373#elGalleryNav{
374 font-size: 1.1rem;
375}
376
377.ipsFieldRow_required{
378 font-size: 1rem;
379}
380
381.ipsStreamItem_snippet .ipsType_medium,
382.ipsWidget .ipsDataItem_title{
383 font-size: inherit;
384}
385
386
387
388
389/* Line-heights */
390
391.ipsType_small:not( .ipsType_richText ){
392 line-height: 1.6rem;
393}
394.ipsType_medium:not( .ipsType_richText ){
395 line-height: 2rem;
396}
397.ipsType_normal:not( .ipsType_richText ){
398 line-height: 2.1rem;
399}
400.ipsType_large:not( .ipsType_richText ){
401 line-height: 2rem;
402}
403.ipsType_veryLarge {
404 line-height: 5.2rem;
405}
406.ipsType_huge {
407 line-height: 8rem;
408}
409
410
411
412
413/* buttons.css */
414.ipsApp .ipsButton {
415 font-size: 1.3rem;
416}
417.ipsApp .ipsButton_medium {
418 font-size: 1.3rem;
419 line-height: 3.8rem;
420}
421
422.ipsApp .ipsButton_large {
423 font-size: 1.5rem;
424 line-height: 4.2rem;
425}
426
427.ipsApp .ipsButton_veryLarge {
428 font-size: 1.6rem;
429 line-height: 4.6rem;
430}
431
432.ipsApp .ipsButton_small {
433 font-size: 1.2rem;
434 line-height: 3.4rem;
435}
436
437.ipsApp .ipsButton_verySmall {
438 font-size: 1.2rem;
439 line-height: 28px;
440}
441
442.ipsApp .ipsButton_veryVerySmall {
443 font-size: 1rem;
444 line-height: 2rem;
445}
446
447.ipsButtonRow li > a,
448.ipsButtonRow li > button,
449.ipsButtonRow li > span {
450 line-height: 2.6rem;
451 font-size: 1rem;
452}
453
454
455
456/* badges.css */
457.ipsRepBadge{
458 font-size: 1.1rem;
459}
460
461.ipsBadge, .ipsBadge.ipsBadge_normal {
462 height: 1.7rem;
463 line-height: 1.7rem;
464 font-size: 1rem;
465}
466
467.ipsBadge.ipsBadge_medium {
468 height: 1.8rem;
469 line-height: 1.8rem;
470 font-size: 1.1rem;
471}
472
473.ipsBadge.ipsBadge_large {
474 height: 2.3rem;
475 line-height: 2.3rem;
476 font-size: 1.3rem;
477}
478
479
480/* Text colours */
481.ipsType_warning, .ipsType_negative, a.ipsType_negative, a.ipsType_negative:hover,
482.cAnswerRate.ipsType_negative:hover {
483 color: #c75050;
484}
485
486.ipsType_spammer {
487 color: #990000;
488}
489
490.ipsType_issue {
491 color: #d69625;
492}
493
494.ipsType_success, .ipsType_positive, a.ipsType_positive, a.ipsType_positive:hover,
495.cAnswerRate.ipsType_positive:hover {
496 color: #598f5b;
497}
498
499/* Text colours outside of .ipsBox */
500.cGuestTeaser > .ipsType_pageTitle,
501.cGuestTeaser > .ipsType_light,
502#ipsLayout_mainArea > .ipsType_pageTitle,
503#ipsLayout_mainArea > p,
504#ipsLayout_mainArea > header[class='ipsSpacer_bottom'],
505#elStreamUpdateMsg,
506#ipsLayout_mainArea > .ipsType_richText:not(.ipsBox),
507#ipsLayout_mainArea > .ipsType_normal:not(.ipsBox){
508
509}
510
511/*
512 ----------------
513 - Send screen width to javascript
514 ----------------
515*/
516
517/* Desktop */
518@media screen and (min-width:980px){
519 body{
520 min-width: 30px;
521 }
522}
523/* Tablets and mobile */
524@media screen and (max-width:979px){
525 body{
526 min-width: 20px;
527 }
528}
529/* Mobiles */
530@media screen and (max-width: 767px){
531 body{
532 min-width: 10px;
533 }
534}
535
536
537
538/*
539 ----------------
540 - Width
541 ----------------
542*/
543
544.ipsLayout_container{
545 position: static;
546 padding: 0;
547}
548
549/* Fixed width */
550.ipsLayout_container,
551.ipsLayout_minimal .ipsLayout_container{
552
553 {{if theme.enable_fluid_width}}
554 max-width: {theme="fluid_width_size"}%;
555 {{else}}
556 width: calc(100% - 50px);
557 max-width: {theme="fixedWidth"}px;
558 {{endif}}
559
560}
561
562 .ipsLayout_container .ipsLayout_container{
563 width: auto;
564 max-width: none;
565 margin: 0;
566 }
567
568/* Overwrite custom.css width on tablets */
569@media screen and (max-width:979px){
570 .ipsApp .ipsLayout_container{
571 width: auto;
572 max-width: none;
573 }
574}
575
576
577
578/*
579 ----------------
580 - Flexbox
581 ----------------
582*/
583
584.flex,
585.flex-inline {
586 display: -webkit-flex;
587 display: flex;
588 -webkit-align-items: center;
589 align-items: center;
590}
591
592.flex-inline {
593 display: -webkit-inline-flex;
594 display: inline-flex;
595}
596
597.flex-height {
598 min-height: 100%;
599}
600
601/* Set defaults: elements only occupy necessary space */
602.flex > *,
603.flex-inline > * {
604 -webkit-flex: 0 0 auto;
605 flex: 0 0 auto;
606}
607
608.flex-aS {
609 -webkit-align-items: flex-start;
610 align-items: flex-start;
611}
612
613.flex-aC {
614 -webkit-align-items: center;
615 align-items: center;
616}
617
618.flex-aE {
619 -webkit-align-items: flex-end;
620 align-items: flex-end;
621}
622
623.flex-aF {
624 -webkit-align-items: stretch;
625 align-items: stretch;
626}
627
628.flex-jS {
629 -webkit-justify-content: flex-start;
630 justify-content: flex-start;
631}
632
633.flex-jC {
634 -webkit-justify-content: center;
635 justify-content: center;
636}
637
638.flex-jE {
639 -webkit-justify-content: flex-end;
640 justify-content: flex-end;
641}
642
643.flex-jA {
644 -webkit-justify-content: space-around;
645 justify-content: space-around;
646}
647
648.flex-jB {
649 -webkit-justify-content: space-between;
650 justify-content: space-between;
651}
652
653.flex-wrap {
654 -webkit-flex-wrap: wrap;
655 flex-wrap: wrap;
656}
657
658.flex-column{
659 -webkit-flex-direction: column;
660 flex-direction: column;
661}
662
663.flex00 {
664 -webkit-flex: 0 0 auto;
665 flex: 0 0 auto;
666}
667
668.flex10 {
669 -webkit-flex: 1 0 auto;
670 flex: 1 0 auto;
671}
672
673.flex11 {
674 -webkit-flex: 1 1 auto;
675 flex: 1 1 auto;
676}
677
678.flex01 {
679 -webkit-flex: 0 1 auto;
680 flex: 0 1 auto;
681}
682
683@media screen and (max-width:979px){
684
685 .flex-block-t{ display: block; }
686
687 .flex-column-t{
688 -webkit-flex-direction: column;
689 flex-direction: column;
690 }
691
692 .flex-aS-t {
693 -webkit-align-items: flex-start;
694 align-items: flex-start;
695 }
696
697 .flex-aC-t {
698 -webkit-align-items: center;
699 align-items: center;
700 }
701
702 .flex-aE-t {
703 -webkit-align-items: flex-end;
704 align-items: flex-end;
705 }
706
707 .flex-aF-t {
708 -webkit-align-items: stretch;
709 align-items: stretch;
710 }
711
712 .flex-jS-t {
713 -webkit-justify-content: flex-start;
714 justify-content: flex-start;
715 }
716
717 .flex-jC-t {
718 -webkit-justify-content: center;
719 justify-content: center;
720 }
721
722 .flex-jE-t {
723 -webkit-justify-content: flex-end;
724 justify-content: flex-end;
725 }
726
727 .flex-jA-t {
728 -webkit-justify-content: space-around;
729 justify-content: space-around;
730 }
731
732 .flex-jB-t {
733 -webkit-justify-content: space-between;
734 justify-content: space-between;
735 }
736
737 .flex00-t {
738 -webkit-flex: 0 0 auto;
739 flex: 0 0 auto;
740 }
741
742 .flex10-t {
743 -webkit-flex: 1 0 auto;
744 flex: 1 0 auto;
745 }
746
747 .flex11-t {
748 -webkit-flex: 1 1 auto;
749 flex: 1 1 auto;
750 }
751
752 .flex01-t {
753 -webkit-flex: 0 1 auto;
754 flex: 0 1 auto;
755 }
756
757}
758
759@media screen and (max-width:767px){
760
761 .flex-block-m{ display: block; }
762
763 .flex-column-m{
764 -webkit-flex-direction: column;
765 flex-direction: column;
766 }
767
768 .flex-aS-m {
769 -webkit-align-items: flex-start;
770 align-items: flex-start;
771 }
772
773 .flex-aC-m {
774 -webkit-align-items: center;
775 align-items: center;
776 }
777
778 .flex-aE-m {
779 -webkit-align-items: flex-end;
780 align-items: flex-end;
781 }
782
783 .flex-aF-m {
784 -webkit-align-items: stretch;
785 align-items: stretch;
786 }
787
788 .flex-jS-m {
789 -webkit-justify-content: flex-start;
790 justify-content: flex-start;
791 }
792
793 .flex-jC-m {
794 -webkit-justify-content: center;
795 justify-content: center;
796 }
797
798 .flex-jE-m {
799 -webkit-justify-content: flex-end;
800 justify-content: flex-end;
801 }
802
803 .flex-jA-m {
804 -webkit-justify-content: space-around;
805 justify-content: space-around;
806 }
807
808 .flex-jB-m {
809 -webkit-justify-content: space-between;
810 justify-content: space-between;
811 }
812
813 .flex00-m {
814 -webkit-flex: 0 0 auto;
815 flex: 0 0 auto;
816 }
817
818 .flex10-m {
819 -webkit-flex: 1 0 auto;
820 flex: 1 0 auto;
821 }
822
823 .flex11-m {
824 -webkit-flex: 1 1 auto;
825 flex: 1 1 auto;
826 }
827
828 .flex01-m {
829 -webkit-flex: 0 1 auto;
830 flex: 0 1 auto;
831 }
832
833}
834
835
836/*
837 ----------------
838 - css Grid and flexbox layouts
839 ----------------
840*/
841
842/* Flexbox layout */
843@supports (display: flex){
844
845 @media (min-width: 980px){
846
847 #ipsLayout_contentArea,
848 #ipsLayout_mainArea,
849 #ipsLayout_sidebar{
850 display: block;
851 width: auto;
852 }
853
854 #ipsLayout_contentWrapper{
855 display: flex;
856 width: auto;
857 }
858
859 #ipsLayout_mainArea{
860 flex: 1 1 100px;
861 }
862
863 #ipsLayout_sidebar{
864 flex: 0 0 315px;
865 min-width: 0;
866 max-width: none;
867 }
868
869 #ipsLayout_sidebar.ipsLayout_sidebarUnused{
870 flex-basis: 0px;
871 }
872
873 body.ipsLayout_sidebarUnused:not(.cWidgetsManaging) #ipsLayout_sidebar{
874 display: none;
875 }
876
877 /* Flex layout: Convert data rows into flex */
878 .ipsDataList{
879 display: block;
880 width: auto;
881 }
882
883 .ipsDataItem{
884 display: flex;
885 align-items: center;
886 width: auto;
887 }
888
889 .ipsDataItem > *{
890 flex: 0 0 auto;
891 }
892
893 .ipsDataItem_main, .ipsDataItem_stats, .ipsDataItem_lastPoster, .ipsDataItem_generic, .ipsDataItem_modCheck, .ipsDataItem_icon,
894 .ipsApp .cForumTopicTable .ipsDataItem_title > span:not(.ipsHide),
895 .ipsApp .cForumTopicTable .ipsDataItem_title > span:not(.ipsHide){
896 display: block;
897 }
898
899 .ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_main,
900 .ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_stats,
901 .ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_lastPoster,
902 .ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_generic{
903 display: block;
904 align-self: flex-start;
905 }
906
907 /* Remove clearfix */
908 .ipsDataItem::after{
909 display: none;
910 }
911
912 .ipsDataItem_icon{
913 width: auto;
914 min-width: 0;
915 max-width: none;
916 }
917
918 .ipsDataItem > *:only-child,
919 .ipsDataItem_main,
920 .ipsDataItem_generic{
921 flex: 1 1 100%;
922 }
923
924 .ipsDataItem_size1,
925 .ipsDataItem_size2,
926 .ipsDataItem_size3,
927 .ipsDataItem_size4,
928 .ipsDataItem_size5,
929 .ipsDataItem_size6,
930 .ipsDataItem_size7,
931 .ipsDataItem_size8,
932 .ipsDataItem_size9,
933 .ipsDataItem_size10{
934 flex: 0 0 auto;
935 /* width: auto; */
936 /* The below code is to prevent profile fields from breaking */
937 min-width: 0px;
938 overflow: hidden;
939 text-overflow: ellipsis;
940 }
941
942 .ipsDataItem > .ipsPos_top{
943 align-self: flex-start;
944 }
945
946
947 /* Cater for padding in widgets */
948 .ipsPad_half > .ipsDataList{
949 margin: 0 -7px;
950 }
951
952 .ipsWidget_inner .ipsDataList .ipsDataItem{
953 padding: 0px 6px;
954 }
955
956 #ipsfocus .ipsWidget .ipsDataItem_icon{
957 padding: 12px 6px;
958 align-self: flex-start;
959 }
960
961 /* Topic list icons */
962 #ipsfocus .cTopicList .ipsDataItem_icon{
963 min-width: 30px;
964 text-align: center;
965 }
966
967 .ipsColumns{
968 display: flex;
969 width: auto;
970 max-width: 100%;
971 }
972
973 .ipsColumn{
974 display: block;
975 flex: 0 0 auto;
976 }
977
978 .ipsColumn_fluid{
979 flex: 1 1 auto;
980 }
981
982 #elNexusActions > li > a{
983 display: flex;
984 align-items: center;
985 flex: 1 1 auto;
986 }
987
988 .ipsStreamItem_title{
989 display: flex !important;
990 align-items: center;
991 }
992
993 .ipsStreamItem_title > *{
994 flex: 0 1 auto;
995 }
996
997 .ipsStreamItem_title .ipsContained{
998 width: auto;
999 }
1000
1001 /* Fix alignment on member search results */
1002 .cStream_members .ipsStreamItem_title{
1003 display: block !important;
1004 }
1005
1006 /* Neatly align last poster */
1007 /* Placed in the flex area due to IE11 issues */
1008 .ipsDataItem_lastPoster{
1009 line-height: 2rem;
1010 position: relative;
1011 }
1012
1013 .ipsDataItem_lastPoster .ipsUserPhoto{
1014 top: 50%;
1015 position: absolute;
1016 margin: 0;
1017 transform: translateY(-50%);
1018 }
1019
1020 html[dir='ltr'] .ipsDataItem_lastPoster .ipsUserPhoto{
1021 left: 0;
1022 }
1023
1024 html[dir='rtl'] .ipsDataItem_lastPoster .ipsUserPhoto{
1025 right: 0;
1026 margin: 0;
1027 }
1028
1029 /* Fix issues where Download thumbnails in table view are larger than the allocated width */
1030 /* Fix width of "Revoke this warning" cell */
1031 .cDownloadsCategoryTable .ipsDataItem_size3,
1032 form[data-role="moderationTools"] .ipsDataItem_generic.ipsDataItem_size3{
1033 width: auto;
1034 }
1035
1036 }
1037
1038}
1039
1040@supports (display: grid){
1041
1042 [data-ipsgrid-minitemsize="500"]{
1043 --grid-min: 400px;
1044 }
1045
1046 [data-ipsgrid-minitemsize="400"]{
1047 --grid-min: 400px;
1048 }
1049
1050 [data-ipsgrid-minitemsize="350"]{
1051 --grid-min: 350px;
1052 }
1053
1054 [data-ipsgrid-minitemsize="300"]{
1055 --grid-min: 300px;
1056 }
1057
1058 [data-ipsgrid-minitemsize="250"]{
1059 --grid-min: 250px;
1060 }
1061
1062 [data-ipsgrid-minitemsize="230"]{
1063 --grid-min: 230px;
1064 }
1065
1066 [data-ipsgrid-minitemsize="200"]{
1067 --grid-min: 200px;
1068 }
1069
1070 [data-ipsgrid-minitemsize="170"]{
1071 --grid-min: 170px;
1072 }
1073
1074 [data-ipsgrid-minitemsize="150"]{
1075 --grid-min: 150px;
1076 }
1077
1078 [data-ipsgrid-minitemsize="100"]{
1079 --grid-min: 100px;
1080 }
1081
1082 [data-ipsgrid-minitemsize="60"]{
1083 --grid-min: 60px;
1084 }
1085
1086 [data-ipsgrid-minitemsize="40"]{
1087 --grid-min: 40px;
1088 }
1089
1090 .ipsGrid{
1091 display: grid;
1092 grid-gap: var(--grid-gap);
1093 grid-template-columns: repeat(12, 1fr);
1094 }
1095
1096 /* Forces truncated text to work */
1097 .ipsGrid > *{
1098 min-width: 0;
1099 }
1100
1101 [data-ipsgrid-minitemsize]{
1102 --grid-fill: auto-fill;
1103 grid-template-columns: repeat(var(--grid-fill), minmax(calc(var(--grid-min) + var(--grid-gap)), 1fr));
1104 }
1105
1106 .ipsGrid + .ipsGrid{
1107 margin-top: var(--grid-gap) !important;
1108 }
1109
1110 .ipsGrid > [class*="ipsGrid_span"]{
1111 width: auto !important;
1112 margin: 0 !important;
1113 float: none !important;
1114 height: auto !important;
1115 }
1116
1117 .ipsGrid::before,
1118 .ipsGrid::after{
1119 display: none;
1120 }
1121
1122 .cPromotedImages{
1123 --grid-gap: 0px;
1124 }
1125
1126 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span1{
1127 grid-column: span 1;
1128 }
1129
1130 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span2{
1131 grid-column: span 2;
1132 }
1133
1134 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span3{
1135 grid-column: span 3;
1136 }
1137
1138 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span4{
1139 grid-column: span 4;
1140 }
1141
1142 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span5{
1143 grid-column: span 5;
1144 }
1145
1146 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span6{
1147 grid-column: span 6;
1148 }
1149
1150 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span7{
1151 grid-column: span 7;
1152 }
1153
1154 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span8{
1155 grid-column: span 8;
1156 }
1157
1158 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span9{
1159 grid-column: span 9;
1160 }
1161
1162 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span10{
1163 grid-column: span 10;
1164 }
1165
1166 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span11{
1167 grid-column: span 11;
1168 }
1169
1170 .ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span12,
1171 .ipsGrid:not([data-ipsgrid-minitemsize]) > :not([class*="ipsGrid_span"]){
1172 grid-column: span 12;
1173 }
1174
1175 @media (max-width: 979px){
1176 .ipsGrid.ipsGrid_collapseTablet:not([data-ipsgrid-minitemsize]) > [class*="ipsGrid_span"]{
1177 grid-column: span 12;
1178 }
1179 }
1180
1181 @media (max-width: 767px){
1182 .ipsGrid.ipsGrid_collapsePhone:not([data-ipsgrid-minitemsize]) > [class*="ipsGrid_span"]{
1183 grid-column: span 12;
1184 }
1185 }
1186
1187 /* Ensure that grids don't span wider than the viewport on mobiles */
1188 @media (max-width: 550px){
1189 [data-ipsgrid-minitemsize="500"]{
1190 grid-template-columns: 1fr;
1191 }
1192 }
1193
1194 @media (max-width: 450px){
1195 [data-ipsgrid-minitemsize="400"]{
1196 grid-template-columns: 1fr;
1197 }
1198 }
1199
1200 @media (max-width: 400px){
1201 [data-ipsgrid-minitemsize="350"]{
1202 grid-template-columns: 1fr;
1203 }
1204 }
1205
1206 @media (max-width: 350px){
1207 [data-ipsgrid-minitemsize="300"]{
1208 grid-template-columns: 1fr;
1209 }
1210 }
1211
1212 /* Allow profile photos to wrap on clubs */
1213 .cClubCard .cClubCard_memberList{
1214 white-space: normal;
1215 }
1216
1217 /* Profile actions on mobiles */
1218 @media (max-width: 767px){
1219 header[data-role='profileHeader'] .ipsGrid{
1220 display: grid !important;
1221 }
1222 }
1223
1224 /* Profile followers */
1225 #elFollowers .ipsGrid{
1226 grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
1227 --grid-gap: 5px;
1228 padding: 5px;
1229 margin: 0px;
1230 }
1231
1232 #elFollowers .ipsGrid > li{
1233 grid-column: initial;
1234 }
1235
1236 /* Fix gallery albums in Calendar events */
1237 .cGalleryMiniAlbum{
1238 --grid-min: 210px;
1239 }
1240 .cGalleryMiniAlbum > li::before{
1241 content: '';
1242 display: block;
1243 padding-bottom: 100%;
1244 }
1245
1246}
1247
1248/* Fix any issues caused by flexbox and grid */
1249.cGalleryPatchwork_list,
1250.cPromotedWidgetItem,
1251#elMyClubsActivity .ipsStreamItem_snippet .ipsColumns,
1252#chatcontent .ipsDataItem,
1253.ipsWidget_horizontal[data-blockid^="app_forums_postFeed_"] .ipsDataItem{
1254 display: block;
1255}
1256
1257@media (min-width: 980px){
1258 .videoboxGridview .ipsDataItem{
1259 display: block;
1260 }
1261}
1262
1263
1264
1265/*
1266 ----------------
1267 - Responsive classes
1268 ----------------
1269*/
1270
1271@media screen and (min-width:980px){
1272 .hide-d{ display: none !important; }
1273}
1274@media screen and (max-width:979px){
1275 .hide-t{ display: none !important; }
1276}
1277@media screen and (max-width:767px){
1278 .hide-m{ display: none !important; }
1279}
1280
1281
1282
1283/*
1284 ----------------
1285 - Header
1286 ----------------
1287*/
1288
1289#ipsLayout_header{
1290 position: static;
1291 border: 0;
1292}
1293
1294#ipsLayout_header header > .ipsLayout_container{
1295 min-height: 0;
1296}
1297
1298#ipsLayout_header header{
1299 /* Reset header height */
1300 margin: 0;
1301 padding: 0;
1302 background: none;
1303}
1304
1305.header-align,
1306.secondary-header-align{
1307 display: -webkit-flex;
1308 display: flex;
1309 -webkit-align-items: center;
1310 align-items: center;
1311 -webkit-justify-content: space-between;
1312 justify-content: space-between;
1313}
1314
1315
1316
1317
1318/*
1319 ----------------
1320 - Fixed header positioning
1321 ----------------
1322*/
1323
1324@media screen and (min-width: 980px) {
1325
1326 .focus-fixed-header #ipsLayout_header{
1327 position: relative;
1328 z-index: 100;
1329 }
1330 .focus-fixed-header .ipsSticky_top{
1331 transform: translateY({theme="logoheight"}px);
1332 }
1333 .focus-fixed-header a[id^="comment-"]{
1334 top: -{expression="theme.logoheight + 1"}px;
1335 }
1336 .focus-fixed-header .cPostRating_controls{
1337 top: {expression="theme.logoheight + 10"}px;
1338 }
1339 .focus-fixed-header.focus-sticky-author .cAuthorPane_info{
1340 top: {theme="logoheight"}px;
1341 }
1342
1343
1344 .focus-fixed-nav #ipsLayout_header{
1345 position: relative;
1346 z-index: 100;
1347 }
1348 .focus-fixed-nav .ipsSticky_top{
1349 transform: translateY({theme="navigationheight"}px);
1350 }
1351 .focus-fixed-nav a[id^="comment-"]{
1352 top: -{expression="theme.navigationheight + 1"}px;
1353 }
1354 .focus-fixed-nav .cPostRating_controls{
1355 top: {expression="theme.navigationheight + 10"}px;
1356 }
1357 .focus-fixed-nav.focus-sticky-author .cAuthorPane_info{
1358 top: {theme="navigationheight"}px;
1359 }
1360
1361
1362 .focus-fixed-user #ipsLayout_header{
1363 position: relative;
1364 z-index: 100;
1365 }
1366 .focus-fixed-user .ipsSticky_top{
1367 transform: translateY({theme="userheight"}px);
1368 }
1369 .focus-fixed-user a[id^="comment-"]{
1370 top: -{expression="theme.userheight + 1"}px;
1371 }
1372 .focus-fixed-user .cPostRating_controls{
1373 top: {expression="theme.userheight + 10"}px;
1374 }
1375 .focus-fixed-user.focus-sticky-author .cAuthorPane_info{
1376 top: {theme="userheight"}px;
1377 }
1378
1379}
1380
1381
1382
1383/*
1384 ----------------
1385 - Logo
1386 ----------------
1387*/
1388
1389.logo-wrap{
1390 -webkit-flex: 0 1 auto;
1391 display: -webkit-flex;
1392 -webkit-justify-content: center;
1393
1394 flex: 0 1 auto;
1395 display: flex;
1396 justify-content: center;
1397}
1398
1399@media (max-width: 979px){
1400 .logo-wrap{
1401 -webkit-flex: 1 1 auto;
1402 flex: 1 1 auto;
1403 }
1404}
1405
1406a.logo{
1407 color: {theme="logo_color"};
1408}
1409
1410.logo{
1411 height: {theme="logoheight"}px;
1412 max-height: {theme="logoheight"}px;
1413 font-size: {theme="logosize"}px;
1414 line-height: 1;
1415 display: -webkit-flex;
1416 display: flex;
1417 -webkit-align-items: center;
1418 align-items: center;
1419 white-space: nowrap;
1420}
1421
1422 .logo img{
1423 max-height: inherit;
1424 max-width: 100%;
1425 }
1426
1427 .logo-name{
1428 display: block;
1429 line-height: 1;
1430 }
1431
1432 .logo-slogan{
1433 font-size: 0.5em;
1434 line-height: 1;
1435 display: block;
1436 padding-top: 0.8em;
1437 color: {hextorgb="logo_color" opacity="0.7"};
1438 }
1439
1440
1441
1442@media screen and (max-width: 979px){
1443
1444 .logo{
1445 height: {theme="logoheightr"}px;
1446 max-height: {theme="logoheightr"}px;
1447 font-size: {theme="logosizer"}px;
1448 padding: 0 10px;
1449 -webkit-justify-content: center;
1450 justify-content: center;
1451 text-align: center;
1452 }
1453
1454}
1455
1456/* Bug fix for safari: Make sure wide logos don't extend beyond browser width */
1457#header .flex00,
1458#header .logo-wrap{ max-width: 100%; }
1459
1460
1461/*
1462 ----------------
1463 - User links
1464 ----------------
1465*/
1466
1467.user-links{
1468 -webkit-flex: 0 0 auto;
1469 flex: 0 0 auto;
1470}
1471
1472.ipsApp #elUserNav{
1473 line-height: {theme="userheight"}px;
1474 font-weight: bold;
1475}
1476
1477#elUserNav{
1478 position: static;
1479 display: -webkit-flex;
1480 display: flex;
1481 -webkit-align-items: center;
1482 align-items: center;
1483}
1484
1485#elUserNav strong{
1486 font-weight: inherit;
1487}
1488
1489#elUserNav > li > a#elRegisterButton{
1490 color: inherit;
1491}
1492
1493@media screen and (max-width:979px){
1494 .ipsApp .user-links{
1495 display: none;
1496 }
1497}
1498
1499 #elUserNav > li{
1500 -webkit-flex: 0 0 auto;
1501 flex: 0 0 auto;
1502 margin: 0;
1503 background-clip: padding-box !important;
1504 }
1505
1506 /* Force hidden class since it doesn't always apply */
1507 #elUserNav .ipsHide{ display: none !important; }
1508
1509
1510 /* Borders on list items */
1511 #elUserNav > li.elUserNav_sep{
1512 display: none;
1513 }
1514
1515 #elUserNav > li{
1516 border: 1px solid transparent;
1517 border-width: 0px;
1518 }
1519
1520 .user-links:not(.user-links-sep) #elUserNav > li{
1521 border-radius: 0px;
1522 }
1523
1524 .user-links:not(.user-links-sep) #elUserNav > li:first-child{
1525 border-top-left-radius: inherit;
1526 border-bottom-left-radius: inherit;
1527 }
1528
1529 .user-links:not(.user-links-sep) #elUserNav > li:last-child{
1530 border-top-right-radius: inherit;
1531 border-bottom-right-radius: inherit;
1532 }
1533
1534 .user-links-b #elUserNav > li{
1535 border-width: 0 1px 0 0;
1536 }
1537
1538 html[dir='rtl'] .user-links-b #elUserNav > li{
1539 border-width: 0 0 0 1px;
1540 }
1541
1542 html[dir] .user-links-b #elUserNav > li:last-child{
1543 border-width: 0;
1544 }
1545
1546 /* Display sep items and remove borders */
1547 .user-links-sep #elUserNav > li.elUserNav_sep{
1548 display: block;
1549 width: 2px;
1550 background: currentColor;
1551 opacity: 0.2;
1552 border-radius: 3px;
1553 height: {theme="userheight"}px;
1554 }
1555 .user-links-sep #elUserNav > li{
1556 border-width: 0;
1557 }
1558
1559
1560 /* Push cart to the end */
1561 #elCart_sep{ order: 10; }
1562 #elCart_container{ order: 11; }
1563
1564 #elUserNav > li > a{
1565 font-size: inherit;
1566 color: inherit;
1567 line-height: inherit;
1568 display: inline-block;
1569 padding: 0 12px;
1570 vertical-align: top;
1571 }
1572
1573 #elUserNav > li > a.ipsUserPhoto{
1574 background: none;
1575 display: block;
1576 line-height: 1px;
1577
1578 margin: 0;
1579 padding: 4px;
1580
1581 {{if theme.rounded_photos}}
1582 border-radius: 50%;
1583 {{else}}
1584 border-radius: 0;
1585 {{endif}}
1586 }
1587
1588 #elUserNav .ipsUserPhoto img{
1589 width: auto;
1590 height: {expression="theme.userheight - 8"}px;
1591 max-width: 100%;
1592 border-radius: inherit;
1593 vertical-align: top;
1594 }
1595
1596 #elUserNav .ipsUserPhoto:before,
1597 #elUserNav .ipsUserPhoto:after{
1598 top: 4px; left: 4px; right: 4px; bottom: 4px;
1599 }
1600
1601 .cUserNav_icon .fa{
1602 line-height: inherit;
1603 vertical-align: top;
1604 }
1605
1606 #cUserLink .fa,
1607 #cCreate .fa{
1608 vertical-align: middle;
1609 }
1610
1611 body.ipsApp #elUserNav .ipsNotificationCount{
1612 left: auto;
1613 right: -3px;
1614 top: -3px;
1615 border-radius: 3px;
1616 }
1617
1618 html[dir='rtl'] #elUserNav .ipsNotificationCount{
1619 right: auto;
1620 left: -3px;
1621 }
1622
1623/* Social sign in */
1624#elUserNav .cShareLink{
1625 line-height: 28px;
1626 vertical-align: middle;
1627 padding: 0;
1628 margin: 0 8px;
1629}
1630
1631/* Modified icons */
1632.cNotifications .fa-bell:before{ content: "\f0ac"; }
1633.cInbox .fa-envelope:before{ content: "\f086"; }
1634.cReports .fa-warning:before{ content: "\f071"; }
1635
1636/* Bug fix: Restore size of Sign in arrow if popups are disabled */
1637#elUserNav #elSignInLink .fa{ font-size: 14px; }
1638
1639
1640/* User link dropdown menu icons */
1641#elUserLink_menu a{ line-height: 16px; }
1642#elCreateNew_menu a{ line-height: 20px; }
1643
1644#elUserLink_menu a:before,
1645#elCreateNew_menu a:before{
1646 content: '\f0c9';
1647 width: 22px;
1648 font-size: 14px;
1649 display: inline-block;
1650 font-family: 'FontAwesome';
1651 font-style: normal;
1652 font-weight: normal;
1653 vertical-align: top;
1654 -webkit-font-smoothing: antialiased;
1655 -moz-osx-font-smoothing: grayscale;
1656 transform: translate(0,1px);
1657}
1658
1659html[dir='rtl'] #elUserLink_menu a:before,
1660html[dir='rtl'] #elCreateNew_menu a:before{
1661 margin-right: 0;
1662 margin-left: 6px;
1663}
1664
1665#elUserLink_menu li[data-menuItem='profile'] a:before {
1666 content:"\f007"
1667}
1668#elUserLink_menu li[data-menuItem='messages'] a:before {
1669 content:"\f01c"
1670}
1671#elUserLink_menu li[data-menuItem='promote'] a:before {
1672 content:"\f005"
1673}
1674#elUserLink_menu li[data-menuItem='manageFollowed'] a:before {
1675 content:"\f1d8"
1676}
1677#elUserLink_menu li[data-menuItem='attachments'] a:before {
1678 content:"\f0c6"
1679}
1680#elUserLink_menu li[data-menuItem='settings'] a:before {
1681 content:"\f013"
1682}
1683#elUserLink_menu li[data-menuItem='ignoredUsers'] a:before {
1684 content:"\f05e"
1685}
1686#elUserLink_menu li[data-menuItem='modcp'] a:before {
1687 content:"\f046"
1688}
1689#elUserLink_menu li[data-menuItem='admincp'] a:before {
1690 content:"\f023";
1691}
1692#elUserLink_menu li[data-menuItem='signout'] a:before {
1693 content:"\f08b";
1694 width: 18px;
1695}
1696#elCreateNew_menu a:before {
1697 content:"\f0fe"
1698}
1699#elCreateNew_menu a[href*="/forum/"]:before {
1700 content:"\f086"
1701}
1702#elCreateNew_menu a[href*="announcements"]:before {
1703 content:"\f0a1"
1704}
1705#elCreateNew_menu a[data-role="updateStatus"]:before {
1706 content:"\f086"
1707}
1708#elCreateNew_menu a[href*="/files/"]:before {
1709 content:"\f019"
1710}
1711#elCreateNew_menu a[href*="/gallery/"]:before {
1712 content:"\f03e"
1713}
1714#elCreateNew_menu a[href*="/blogs/"]:before {
1715 content:"\f02d"
1716}
1717#elCreateNew_menu a[href*="/calendar/"]:before {
1718 content:"\f073"
1719}
1720#elCreateNew_menu a[href*="/articles"]:before {
1721 content:"\f0f6"
1722}
1723
1724#elUserLink_menu li[data-menuItem='admincp'] i {
1725 display:none;
1726}
1727
1728
1729
1730/*
1731 ----------------
1732 - Navigation
1733 ----------------
1734*/
1735
1736/* Loading and More classes */
1737.focus-nav-hidden{
1738 position: absolute !important;
1739 pointer-events: none;
1740 z-index: -1;
1741 right: 0;
1742 visibility: hidden;
1743}
1744 .focus-nav-hidden .ipsNavBar_secondary{
1745 display: none !important;
1746 }
1747
1748.focus-nav-loading{ overflow: hidden; }
1749
1750.focus-nav{
1751 -webkit-flex: 1 1 auto;
1752 flex: 1 1 auto;
1753}
1754
1755/* Hide nav-bar on tablets */
1756@media screen and (max-width:979px){
1757 .ipsApp .nav-bar,
1758 .ipsApp .focus-nav{
1759 display: none;
1760 }
1761}
1762
1763/* Reset defaults */
1764#ipsLayout_header nav{
1765 background: transparent;
1766 height: auto;
1767}
1768
1769.ipsNavBar_primary{
1770 padding: 0;
1771 border-radius: 0;
1772 font-size: 0;
1773 top: auto;
1774}
1775
1776 /* Align links */
1777 .ipsNavBar_primary{
1778 text-align: left;
1779 }
1780
1781 html[dir='rtl'] .ipsNavBar_primary{
1782 text-align: right;
1783 }
1784
1785 /* Align navigation links to the right */
1786 .focus-nav-right .ipsNavBar_primary{
1787 text-align: right;
1788 }
1789
1790 html[dir='rtl'] .focus-nav-right .ipsNavBar_primary{
1791 text-align: left;
1792 }
1793
1794 /* Revert text alignment for submenus */
1795 html[dir='ltr'] .ipsApp .ipsNavBar_primary .ipsNavBar_secondary,
1796 html[dir='ltr'] .ipsApp .ipsNavBar_primary .ipsMenu{
1797 text-align: left;
1798 }
1799
1800 html[dir='rtl'] .ipsApp .ipsNavBar_primary .ipsNavBar_secondary,
1801 html[dir='rtl'] .ipsApp .ipsNavBar_primary .ipsMenu{
1802 text-align: right;
1803 }
1804
1805.ipsNavBar_primary > ul{
1806 max-height: {theme="navigationheight"}px;
1807}
1808
1809.ipsNavBar_primary > ul,
1810.ipsNavBar_secondary{
1811 list-style: none;
1812}
1813
1814 html[dir="ltr"] .ipsNavBar_primary > ul > li,
1815 html[dir="ltr"] .ipsNavBar_secondary > li,
1816 html[dir="rtl"] .ipsNavBar_primary > ul > li,
1817 html[dir="rtl"] .ipsNavBar_secondary > li{
1818 float: none;
1819 }
1820
1821 .ipsNavBar_primary > ul > li{
1822 vertical-align: top;
1823 background-clip: padding-box;
1824 }
1825
1826 body.ipsApp .ipsNavBar_primary > ul > li > a{
1827 margin: 0;
1828 }
1829
1830 .ipsNavBar_primary > ul > li > a{
1831 border-radius: 0;
1832 padding: 0px 20px;
1833 font-size: inherit;
1834 line-height: {theme="navigationheight"}px;
1835 }
1836
1837 /* Reset link text and background */
1838 .ipsNavBar_primary > ul > li > a,
1839 .ipsNavBar_primary > ul > li.ipsNavBar_active > a,
1840 .ipsNavBar_primary > ul > li > a:hover{
1841 background: none;
1842 color: inherit;
1843 }
1844
1845 /* Hover link */
1846 .ipsNavBar_primary > ul > li:hover > a{
1847 color: {theme="main_nav_font"};
1848 }
1849
1850 /* Active link */
1851 .ipsNavBar_primary > ul > li[data-active] > a{
1852 color: {theme="main_nav_font"};
1853 }
1854
1855
1856/*
1857 ----------------
1858 - Navigation icons
1859 ----------------
1860*/
1861
1862.ipsNavBar_primary a::before{
1863 content: "\f0f6";
1864 font-family: "FontAwesome";
1865 font-size: 14px;
1866 font-weight: normal;
1867 display: inline-block;
1868 text-rendering: auto;
1869 -webkit-font-smoothing: antialiased;
1870 -moz-osx-font-smoothing: grayscale;
1871 {prefix="transform" value="translate(0,0)"}
1872 margin-right: 4px;
1873 opacity: 0.6;
1874 line-height: 1;
1875 vertical-align: middle;
1876}
1877
1878 html[dir='rtl'] .ipsNavBar_primary a::before{
1879 margin-right: 0;
1880 margin-left: 4px;
1881 }
1882
1883/* Remove from indented list */
1884.ipsNavBar_secondary .ipsNavBar_secondary > li > a::before{
1885 display: none;
1886}
1887
1888.ipsNavBar_secondary > li > a::before{
1889 width: 16px;
1890}
1891
1892.ipsNavBar_primary li > a.ipsNavBar_community_home::before{ content: "\f015" }
1893.ipsNavBar_primary li[data-navapp="nexus"] > a::before{ content: "\f07a" }
1894.ipsNavBar_primary li[data-navext="Support"] > a::before{ content: "\f1cd" }
1895.ipsNavBar_primary li[data-navapp="forums"] > a::before{ content: "\f086" }
1896.ipsNavBar_primary li[data-navapp="gallery"] > a::before{ content: "\f030" }
1897.ipsNavBar_primary li[data-navapp="downloads"] > a::before{ content: "\f019" }
1898.ipsNavBar_primary li[data-navapp="cms"] > a::before{ content: "\f15c" }
1899.ipsNavBar_primary li[data-navapp="blog"] > a::before{ content: "\f02d" }
1900.ipsNavBar_primary li[data-navapp="calendar"] > a::before{ content: "\f073" }
1901.ipsNavBar_primary li[data-navapp="chat"] > a::before{ content: "\f27a" }
1902.ipsNavBar_primary li[data-navext="StaffDirectory"] > a::before{ content: "\f007" }
1903.ipsNavBar_primary li[data-navext="OnlineUsers"] > a::before{ content: "\f0c0" }
1904.ipsNavBar_primary li[data-navext="Search"] > a::before{ content: "\f002" }
1905.ipsNavBar_primary li[data-navext="Guidelines"] > a::before{ content: "\f071" }
1906.ipsNavBar_primary li[data-navext="Leaderboard"] > a::before{ content: "\f091" }
1907.ipsNavBar_primary li[data-navext="Clubs"] > a::before{ content: "\f0c0" }
1908.ipsNavBar_primary li[data-navext="Promoted"] > a::before{ content: "\f14a" }
1909.ipsNavBar_primary li > a[href*="/discover/"]::before{ content: "\f0f6" }
1910.ipsNavBar_primary li[data-navext="AllActivity"] > a::before{ content: "\f0ac" }
1911.ipsNavBar_primary li[data-navext="YourActivityStreams"] > a::before{ content: "\f03a" }
1912.ipsNavBar_primary li[data-navext="YourActivityStreamsItem"] > a[href*='discover/unread']:before{ content: "\f0c5" }
1913.ipsNavBar_primary li[data-navext="YourActivityStreamsItem"] > a[href*='discover/content-started']:before{ content: "\f234" }
1914.ipsNavBar_primary #elBackHome:before{ content: "\f0a8" }
1915.ipsNavBar_primary #elNavigationMore > a::before,
1916.ipsNavBar_primary .focus-nav-more > a::before{ content: "\f0c9" }
1917/* Setting icons for default links may not work correctly if certain addons aren't installed */
1918#elNavSecondary_1 > a::before{ content: "\f03a" }
1919#elNavSecondary_2 > a::before{ content: "\f0a1" }
1920
1921html[dir='ltr'] .nav-arrow > .fa-caret-down{ margin-left: 4px; }
1922html[dir='rtl'] .nav-arrow > .fa-caret-down{ margin-right: 4px; }
1923
1924/* Hide arrow from dropdown child links since one already exists */
1925.ipsNavBar_secondary .nav-arrow > .fa-caret-down{
1926 display: none;
1927}
1928
1929
1930/*
1931 ----------------
1932 - Dropdown Navigation Menus
1933 ----------------
1934*/
1935
1936 /* Hide secondary nav bar */
1937 .ipsNavBar_primary:not(.ipsNavBar_noSubBars) > ul:before,
1938 #ipsLayout_header nav.ipsNavBar_noSubBars:after{
1939 display: none;
1940 }
1941
1942 .ipsNavBar_primary > ul > li{
1943 position: relative;
1944 }
1945
1946 .ipsNavBar_primary > ul > li:hover{
1947 z-index: 1;
1948 }
1949
1950 .ipsNavBar_secondary{
1951 background: currentColor;
1952 border-color: currentColor; /* Arrow */
1953
1954 min-width: 175px;
1955 border-radius: 0px 0px 3px 3px;
1956 display: block !important;
1957 top: 100%; left: 0; right: auto; bottom: auto;
1958 z-index: auto;
1959 height: auto;
1960 white-space: nowrap;
1961 pointer-events: none;
1962
1963 transform-origin: 50% 0;
1964 opacity: 0;
1965 visibility: hidden;
1966 transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s;
1967
1968 top: calc(100% + 8px);
1969 border-radius: 3px;
1970 transform: translateY(6px);
1971 padding-top: 5px;
1972 }
1973
1974 /* Hover */
1975 .ipsNavBar_primary > ul > li:hover .ipsNavBar_secondary{
1976 pointer-events: auto;
1977
1978 visibility: visible;
1979 opacity: 1;
1980 transition-delay: 0s, 0s;
1981
1982 transform: translateY(0);
1983 }
1984
1985 /* Align last menu to the right if they exist, and for RTL */
1986 html[dir='rtl'] .ipsNavBar_secondary,
1987 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary,
1988 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary,
1989 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary,
1990 .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary{
1991 right: 0;
1992 left: auto;
1993 }
1994
1995 /* Above, but for RTL */
1996 html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary,
1997 html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary,
1998 html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary,
1999 html[dir='rtl'] .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary{
2000 right: auto;
2001 left: 0;
2002 }
2003
2004 /* Dropdown menu arrow */
2005 .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before{
2006 content: "";
2007 position: absolute;
2008 top: -6px; left: 20px;
2009 border: 6px solid transparent;
2010 border-top: 0;
2011 border-bottom-color: currentColor;
2012 }
2013
2014 html[dir='rtl'] .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before,
2015 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary:before,
2016 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary:before,
2017 .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary:before,
2018 .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary:before{
2019 left: auto;
2020 right: 20px;
2021 }
2022
2023 /* Above, but for RTL */
2024 html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary:before,
2025 html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary:before,
2026 html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary:before,
2027 html[dir='rtl'] .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary:before{
2028 right: auto;
2029 left: 20px;
2030 }
2031
2032 /* Cover gap with pseudo element */
2033 .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:after{
2034 content: "";
2035 position: absolute;
2036 top: -8px;
2037 left: 0; right: 0;
2038 height: 8px;
2039 }
2040
2041
2042 html .ipsApp .ipsNavBar_secondary > li{
2043 display: block;
2044 float: none;
2045 }
2046
2047 /* Force hide More menu in dropdowns */
2048 html .ipsApp .ipsNavBar_secondary > li.ipsHide{
2049 display: none;
2050 }
2051
2052 .ipsNavBar_secondary,
2053 .ipsNavBar_primary > ul > li .ipsMenu{
2054 font-size: 1.2rem;
2055 }
2056
2057 .ipsNavBar_secondary > li > a{
2058 font-size: inherit;
2059 float: none;
2060 text-align: left;
2061 white-space: nowrap;
2062 line-height: 1.3;
2063 }
2064
2065 html[dir='rtl'] .ipsNavBar_secondary > li > a{
2066 text-align: right;
2067 }
2068
2069 html[dir='ltr'] .ipsNavBar_secondary > li > a{
2070 padding: 12px 24px 12px 12px;
2071 }
2072
2073 html[dir='rtl'] .ipsNavBar_secondary > li > a{
2074 padding: 12px 12px 12px 24px;
2075 }
2076
2077 .ipsNavBar_secondary > li > a:hover{
2078 color: {theme="main_nav_tab_font"};
2079 }
2080
2081 .ipsNavBar_secondary li:last-of-type,
2082 .ipsNavBar_secondary li:last-of-type a:not(.ipsButton){
2083 border-bottom-left-radius: inherit;
2084 border-bottom-right-radius: inherit;
2085 }
2086
2087
2088
2089
2090
2091/* Attached dropdown menus */
2092.focus-attached-dropdowns .ipsNavBar_secondary{
2093 transform: scaleY(0.7);
2094 top: auto;
2095 border-top-left-radius: 0px;
2096 border-top-right-radius: 0px;
2097 padding: 0;
2098}
2099
2100 .focus-attached-dropdowns .ipsNavBar_primary > ul > li:hover .ipsNavBar_secondary{
2101 transform: scaleY(1);
2102 }
2103
2104 /* Hide dropdown arrow */
2105 .focus-attached-dropdowns .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before,
2106 .focus-attached-dropdowns .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:after{
2107 display: none;
2108 }
2109
2110
2111
2112
2113/* Navigation on minimal pages */
2114.ipsNavBar_primary.ipsNavBar_noSubBars{
2115 padding: 0;
2116 margin: 0;
2117}
2118#ipsLayout_header nav.ipsNavBar_noSubBars,
2119.ipsLayout_minimal #ipsLayout_header nav{
2120 margin: 0;
2121}
2122
2123
2124/* Secondary menus in dropdowns */
2125.ipsNavBar_secondary .ipsNavBar_secondary{
2126 position: static !important;
2127 z-index: auto !important;
2128 color: {hextorgb="main_nav_tab_font" opacity="0.6"};
2129 transform: none;
2130 transition: none;
2131 opacity: 1;
2132 padding: 0;
2133 min-width: 0;
2134 max-width: none;
2135 width: inherit;
2136 border: 0;
2137 border-radius: 0;
2138 box-shadow: inset {hextorgb="main_nav_tab_font" opacity="0.08"} 0px 1px 0px, inset {hextorgb="main_nav_tab_font" opacity="0.08"} 0px -1px 0px;
2139 background: {hextorgb="main_nav_tab_font" opacity="0.04"};
2140}
2141
2142 /* Push in links */
2143 html[dir='ltr'] .ipsNavBar_secondary .ipsNavBar_secondary > li > a{
2144 padding-left: 36px;
2145 }
2146
2147 html[dir='rtl'] .ipsNavBar_secondary .ipsNavBar_secondary > li > a{
2148 padding-right: 36px;
2149 }
2150
2151 /* Remove inherited font-weight from active, but apply to actual active link */
2152 .ipsNavBar_secondary .ipsNavBar_secondary > li a,
2153 .ipsNavBar_secondary .ipsMenu > li a{
2154 font-weight: normal;
2155 }
2156
2157 .ipsNavBar_secondary .ipsNavBar_secondary > li[data-active] a{
2158 font-weight: bold;
2159 }
2160
2161 .ipsNavBar_secondary [data-musheddropdown] > .ipsMenu_item > a{
2162 color: {hextorgb="main_nav_tab_font" opacity="0.6"};
2163 }
2164
2165 .ipsNavBar_secondary [data-musheddropdown] > .ipsMenu_item > a:hover{
2166 color: {theme="main_nav_tab_font"};
2167 background-color: {hextorgb="main_nav_tab_font" opacity="0.05"} !important;
2168 }
2169
2170 .ipsNavBar_primary .ipsMenu > li > a{
2171 color: inherit;
2172 }
2173
2174 .ipsNavBar_primary .ipsMenu > li > a:before{
2175 display: none;
2176 }
2177
2178 /* Align arrow icons inside .ipsNavBar_secondary parent links */
2179 .ipsNavBar_secondary > li > a .fa-caret-down{
2180 position: absolute;
2181 right: 10px;
2182 margin-top: 2px;
2183 }
2184
2185 html[dir='rtl'] .ipsNavBar_secondary > li > a .fa-caret-down{
2186 right: auto;
2187 left: 10px;
2188 }
2189
2190 /* Bug fix: Remove duplicate FA arrow on IPS dropdown links when their parent is inside the More menu */
2191 .ipsNavBar_secondary .ipsMenu_subItems .fa-caret-down{ display: none; }
2192
2193 /* Bug fix: Assign correct colour to ipsButton in navigation dropdown menus */
2194 .ipsNavBar_secondary a.ipsButton_primary{
2195 background-color: {theme="primary_button"} !important;
2196 }
2197 .ipsNavBar_primary .ipsMenu > li > a.ipsButton_primary{
2198 color: {theme="primary_button_font"};
2199 }
2200
2201
2202/*
2203 ----------------
2204 - Mobile navigation header
2205 ----------------
2206*/
2207
2208.mobile-nav-wrap{
2209 position: relative;
2210 z-index: 510;
2211}
2212
2213@media (min-width: 980px){
2214 .mobile-nav-wrap{
2215 display: none;
2216 }
2217}
2218
2219@media (max-width: 979px){
2220 #elMobileNav{
2221 display: flex !important;
2222 }
2223}
2224
2225#elMobileNav{
2226 background: {theme="mobile_back"};
2227 position: relative;
2228 z-index: 10;
2229 justify-content: flex-end;
2230 align-items: center;
2231}
2232
2233 #elMobileNav li{
2234 flex: 0 0 auto;
2235 }
2236
2237 #elMobileNav #elMobileBreadcrumb{
2238 flex: 0 1 auto;
2239 position: relative;
2240 top: auto;
2241 left: auto;
2242 right: auto;
2243 margin-right: auto;
2244 margin-left: 20px;
2245 color: {hextorgb="mobile_back_font" opacity="0.25"};
2246 background-color: currentColor;
2247 }
2248 html[dir='rtl'] #elMobileNav #elMobileBreadcrumb{
2249 margin-left: auto;
2250 margin-right: 20px;
2251 }
2252
2253 html[dir="ltr"] #elMobileBreadcrumb{ border-radius: 0px 3px 3px 0px; }
2254 html[dir="rtl"] #elMobileBreadcrumb{ border-radius: 3px 0px 0px 3px; }
2255
2256 #elMobileBreadcrumb a{
2257 max-width: none;
2258 display: block;
2259 }
2260
2261 #elMobileBreadcrumb:before{ color: inherit; }
2262
2263 html[dir="ltr"] #elMobileBreadcrumb:before{
2264 border-color: transparent transparent currentColor currentColor;
2265 }
2266
2267 html[dir="rtl"] #elMobileBreadcrumb:before{
2268 border-color: currentColor currentColor transparent transparent;
2269 }
2270
2271
2272 html[dir='ltr'] #elMobileBreadcrumb + li{
2273 margin-left: 10px;
2274 }
2275
2276 html[dir='rtl'] #elMobileBreadcrumb + li{
2277 margin-right: 10px;
2278 }
2279
2280 #elMobileNav li:not( #elMobileBreadcrumb ) a {
2281 color: {theme="mobile_back_font"};
2282 width: 40px;
2283 font-size: 20px;
2284 }
2285
2286
2287#elMobileNav .icon-newspaper{
2288 font-size: inherit;
2289 vertical-align: baseline;
2290}
2291
2292 #elMobileNav .icon-newspaper:before{
2293 content: "\f15c";
2294 }
2295
2296
2297
2298
2299
2300/* Modify button borders */
2301#elMobileDrawer .ipsButton:after{
2302 border-color: transparent;
2303 border-top-color: rgba(255,255,255,0.1);
2304}
2305
2306.ipsDrawer_menu{
2307 background: #212121;
2308}
2309 .ipsDrawer_menu .ipsButton_light{
2310 background: rgba(255,255,255,0.1);
2311 color: #fff;
2312 border: 0;
2313 }
2314
2315 .ipsDrawer_menu .cUserNav_icon a{ color: #eee; }
2316
2317
2318
2319/*
2320 ----------------
2321 - Search
2322 ----------------
2323*/
2324
2325.ipsfocus-search{
2326 width: 300px;
2327 height: {theme="searchheight"}px;
2328 line-height: {theme="searchheight"}px;
2329 -webkit-flex: 0 0 auto;
2330 flex: 0 0 auto;
2331 position: relative;
2332 z-index: 5;
2333}
2334
2335 html[dir='ltr'] .ipsfocus-search{
2336 padding-left: 10px;
2337 }
2338
2339 html[dir='rtl'] .ipsfocus-search{
2340 padding-right: 10px;
2341 }
2342
2343/* Hide search from navigation bar due to custom location */
2344.ipsNavBar_primary #elSearchWrapper{
2345 display: none;
2346}
2347
2348#elSearch{
2349 padding: 0;
2350}
2351
2352 /* Border radius */
2353 #elSearch form{ border-radius: inherit; }
2354
2355 /* Dimensions */
2356 #elSearch,
2357 #elSearch form,
2358 #elSearch input[type="search"],
2359 #elSearch button {
2360 height: inherit;
2361 line-height: inherit;
2362 }
2363
2364 #elSearch form{
2365 position: relative;
2366 }
2367
2368 /* Text colour */
2369 #elSearch input,
2370 #elSearch button{
2371 color: inherit;
2372 }
2373
2374 /* Placeholder */
2375 #elSearch ::-webkit-input-placeholder { opacity: 0.8; color: inherit; }
2376 #elSearch :-ms-input-placeholder { opacity: 0.8; color: inherit; }
2377 #elSearch ::placeholder { opacity: 0.8; color: inherit; }
2378
2379 /* Button */
2380 #elSearch button{
2381 cursor: pointer;
2382 line-height: inherit !important;
2383 padding: 0 10px;
2384 border: 0;
2385 background: none;
2386 border-radius: inherit;
2387 position: relative;
2388 min-width: 36px;
2389 min-width: var(--search-button-width);
2390 }
2391
2392 html[dir='ltr'] #elSearch button{
2393 border-top-left-radius: 0;
2394 border-bottom-left-radius: 0;
2395 }
2396
2397 html[dir='rtl'] #elSearch button{
2398 border-top-right-radius: 0;
2399 border-bottom-right-radius: 0;
2400 }
2401
2402 #elSearch button::before{
2403 content: '';
2404 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
2405 border-radius: inherit;
2406 background: currentColor;
2407 opacity: 0.05;
2408 }
2409
2410 #elSearch button:hover::before{
2411 opacity: 0.1;
2412 }
2413
2414 #elSearch button .fa{
2415 line-height: inherit;
2416 display: block;
2417 }
2418
2419 /* Advanced search dropdown */
2420 #elSearchExpanded{
2421 padding: 0;
2422 line-height: 1.6;
2423 border: 0;
2424 top: 100%;
2425 left: 0;
2426 right: auto;
2427 margin-top: 8px;
2428 border-radius: 4px;
2429 width: 100%;
2430 width: calc(100% - var(--search-button-width));
2431 box-shadow: {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px, 0px 1px 4px rgba(0,0,0,0.1), rgba(0,0,0,0.4) 0px 40px 50px;
2432 color: {theme="text_light"};
2433 background: {theme="area_background_reset"};
2434 border-color: {theme="area_background_reset"};
2435 }
2436
2437 html[dir="rtl"] #elSearchExpanded{
2438 right: 0;
2439 left: auto;
2440 }
2441
2442 /* Menu arrow */
2443 #elSearchExpanded:before,
2444 #elSearchExpanded:after{
2445 content: '';
2446 box-sizing: border-box;
2447 border: 6px solid transparent;
2448 position: absolute;
2449 top: -12px;
2450 left: 12px;
2451 border-bottom-color: inherit;
2452 }
2453
2454 #elSearchExpanded:before{
2455 border-bottom-color: {hextorgb="text_color" opacity="0.25"};
2456 margin-top: -1px;
2457 }
2458
2459 /* Title */
2460 #elSearchExpanded .ipsMenu_title{
2461 border: 0;
2462 border-radius: 0;
2463 background: none;
2464 color: {theme="text_dark"};
2465 }
2466
2467 #elSearchExpanded .ipsMenu_title:not(:first-child){
2468 margin-top: 20px;
2469 }
2470
2471 /* List wrapper */
2472 #elSearchExpanded .ipsSideMenu_list{
2473 margin: 0 !important;
2474 background: none;
2475 border: 0;
2476 padding: 0 8px;
2477 }
2478
2479 #elSearchExpanded .ipsSideMenu_list:last-child{
2480 padding-bottom: 6px;
2481 }
2482
2483 /* Inherit border radius */
2484 #elSearchExpanded .ipsSideMenu_list,
2485 #elSearchExpanded .ipsSideMenu_list > li,
2486 #elSearchExpanded .ipsSideMenu_item{
2487 border-radius: inherit;
2488 }
2489
2490 /* Item */
2491
2492 /* Hover */
2493 #elSearchExpanded .ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover{
2494 background: {hextorgb="text_light" opacity="0.1"};
2495 }
2496
2497 /* Active item */
2498 #elSearchExpanded .ipsSideMenu_itemActive{
2499 color: {theme="text_color"};
2500 background: {hextorgb="text_light" opacity="0.15"};
2501 font-weight: bold;
2502 }
2503
2504 /* Item icon */
2505 #elSearchExpanded .ipsSideMenu_item::after{
2506 color: inherit;
2507 }
2508
2509 #elSearchExpanded .ipsSideMenu_item:not(.ipsSideMenu_itemActive)::after{
2510 opacity: 0.3;
2511 }
2512
2513
2514/* Desktop search */
2515@media screen and (min-width:980px){
2516
2517 #elSearch,
2518 #elSearch.cSearchExpanded{
2519 width: auto;
2520 }
2521
2522 html[dir="ltr"] #elSearch,
2523 html[dir="rtl"] #elSearch{
2524 margin: 0;
2525 }
2526
2527 #elSearch form{
2528 display: -webkit-flex;
2529 display: flex;
2530 -webkit-align-items: center;
2531 align-items: center;
2532 vertical-align: top;
2533 }
2534
2535 #elSearch input[type="search"]{
2536 padding: 0;
2537 padding-left: 10px;
2538 position: relative;
2539 -webkit-flex: 1 1 auto;
2540 flex: 1 1 auto;
2541 width: 100%;
2542 z-index: auto;
2543 max-width: none;
2544 }
2545
2546 html[dir="rtl"] #elSearch input[type="search"] {
2547 padding: 0px 10px 0px 0px;
2548 }
2549
2550 #elSearch button{
2551 position: relative;
2552 -webkit-flex: 0 0 auto;
2553 flex: 0 0 auto;
2554 }
2555
2556}
2557
2558
2559
2560/* Mobile search */
2561.mobile-search-wrap{
2562 display: none;
2563 padding: 8px;
2564 position: absolute;
2565 top: 100%;
2566 left: 0; right: 0;
2567 z-index: 5;
2568 transform: translateY(-105%);
2569 opacity: 0;
2570 pointer-events: none;
2571 transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
2572
2573 background-color: {theme="mobile_back"};
2574 background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
2575}
2576
2577 .mobile-search #elSearch{
2578 height: 40px;
2579 line-height: 40px;
2580 }
2581
2582@media screen and (max-width:979px){
2583
2584 /* Show search only on mobiles, when activated */
2585 .mobile-search-wrap{
2586 display: block;
2587 }
2588 .show-mobile-search-wrap .mobile-search-wrap{
2589 opacity: 1;
2590 transform: translateY(0%);
2591 pointer-events: auto;
2592 }
2593
2594 #elSearch{
2595 background: rgba(255,255,255,0.85);
2596 background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
2597 box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
2598 color: #222;
2599 border-radius: 3px;
2600 float: none !important;
2601 display: block;
2602 width: 100%;
2603 }
2604
2605 #elSearch form{
2606 display: flex;
2607 }
2608
2609 #elSearch input[type="search"]{
2610 font-size: 1.6rem;
2611 width: auto;
2612 max-width: none;
2613 flex: 1 1 100%;
2614 position: static;
2615 padding: 0 12px;
2616 }
2617
2618 /* Hide desktop search */
2619 .ipsfocus-search{
2620 display: none;
2621 }
2622
2623}
2624
2625
2626
2627/*
2628 ----------------
2629 - Precontent blocks and padding
2630 ----------------
2631*/
2632
2633/* Remove default value */
2634#ipsLayout_mainArea{
2635 min-height: 0;
2636 max-width: 100%;
2637}
2638
2639/* Add margins to break up pre-content divs */
2640.precontent-blocks > div,
2641#elLicenseKey{
2642 margin-bottom: 10px;
2643}
2644
2645
2646/* Configure content padding */
2647.content-padding{ padding: 10px; }
2648
2649@media screen and (min-width:768px) and (max-width:979px){
2650 .ipsApp .content-padding{ padding: 10px; }
2651}
2652
2653@media screen and (max-width:767px){
2654 .ipsApp .content-padding{ padding: 7px; }
2655}
2656
2657
2658
2659/* Content padding */
2660@media screen and (min-width:980px){
2661
2662 #ipsLayout_sidebar,
2663 html[dir="rtl"] #ipsLayout_sidebar{ padding: 12px; }
2664 html[dir="ltr"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarright,
2665 html[dir="rtl"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarleft{ padding-right: 0; }
2666 html[dir="ltr"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarleft,
2667 html[dir="rtl"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarright{ padding-left: 0; }
2668 #ipsLayout_mainArea{ padding-left: 0; padding-right: 0; }
2669
2670 /* Remove top padding from content columns */
2671 #ipsLayout_mainArea,
2672 #ipsLayout_sidebar,
2673 html[dir="rtl"] #ipsLayout_sidebar,
2674 #ipsLayout_contentWrapper #ipsLayout_sidebar:first-child{
2675 padding-top: 0;
2676 }
2677
2678 /* Configure column gutter */
2679 html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarright,
2680 html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarleft{
2681 padding-left: 15px;
2682 }
2683
2684 html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarright,
2685 html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarleft{
2686 padding-right: 15px;
2687 }
2688
2689}
2690
2691@media screen and (max-width:979px){
2692
2693 /* Remove background from sidebar */
2694 #ipsLayout_sidebar{
2695 background: none;
2696 margin: 0;
2697 }
2698
2699 /* Let .content-padding control the left and right padding */
2700 #ipsLayout_mainArea,
2701 body.ipsApp #ipsLayout_sidebar.ipsLayout_sidebarright,
2702 body.ipsApp #ipsLayout_sidebar.ipsLayout_sidebarleft{
2703 padding-left: 0;
2704 padding-right: 0;
2705 }
2706
2707 /* Remove top padding from sidebar in vertical layouts, otherwise it's doubled up due to the bottom padding on #ipsLayout_mainArea */
2708 #ipsLayout_mainArea + #ipsLayout_sidebar{
2709 padding-top: 0;
2710 }
2711
2712 #ipsLayout_contentWrapper #ipsLayout_sidebar:first-child{
2713 padding: 0;
2714 }
2715
2716 #ipsLayout_contentWrapper #ipsLayout_mainArea:first-child{
2717 padding-top: 0;
2718 }
2719}
2720
2721
2722
2723/*
2724 ----------------
2725 - Breadcrumb Navigation
2726 ----------------
2727*/
2728
2729/* Link angles */
2730.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2731.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2732 /* Highlight */
2733 color: rgba(255,255,255,1);
2734 /* Shadow */
2735 border-color: rgba(0,0,0,0.2);
2736}
2737
2738/* Hover */
2739.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:before,
2740.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:after,
2741.ipsBreadcrumb .ipsList_inline li a:hover{
2742 background: rgba(255,255,255,0.4);
2743}
2744
2745/* Active */
2746.ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before,
2747.ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after,
2748.ipsApp .ipsBreadcrumb .ipsList_inline li a:active{
2749 background: rgba(0,0,0,0.07);
2750}
2751
2752/* Side links */
2753.ipsBreadcrumb .ipsList_inline li{
2754 border-color: rgba(0,0,0,0.06);
2755}
2756
2757
2758.ipsfocus-breadcrumb{
2759 display: -webkit-flex;
2760 display: flex;
2761 -webkit-align-items: center;
2762 align-items: center;
2763}
2764
2765.ipsApp .ipsBreadcrumb{
2766 line-height: {expression="theme.social_height"}px; /* Reduced for border */
2767 font-size: 11.5px;
2768
2769 -webkit-flex: 1 1 auto;
2770 flex: 1 1 auto;
2771 font-weight: bold;
2772 border: 0;
2773 transition: none;
2774 overflow: hidden;
2775 margin: 0;
2776 padding: 0;
2777 opacity: 1;
2778
2779 position: relative;
2780}
2781
2782 .ipsBreadcrumb:before{
2783 content: '';
2784 position: absolute;
2785 top: 0; left: 0; right: 0; bottom: 0;
2786 z-index: 2;
2787 pointer-events: none;
2788
2789 border-radius: inherit;
2790 border-color: inherit;
2791 border-style: solid;
2792 border-width: 0;
2793 }
2794
2795 .ipsBreadcrumb ul,
2796 .ipsBreadcrumb #elRSS{
2797 position: relative;
2798 }
2799
2800 .ipsApp .ipsBreadcrumb a {
2801 color: inherit;
2802 display: block;
2803 font-size: inherit;
2804 font-weight: inherit;
2805 }
2806 .ipsApp .ipsBreadcrumb a:hover{
2807 color: inherit;
2808 }
2809
2810 /* Reset all list items */
2811 .ipsBreadcrumb > ul > li{
2812 line-height: inherit;
2813 height: auto;
2814 max-width: none;
2815 overflow: visible;
2816 color: inherit;
2817 font-weight: inherit;
2818 font-size: inherit;
2819 }
2820
2821 .ipsBreadcrumb > ul[data-role="breadcrumbList"] > li:last-child{ opacity: 1; }
2822
2823 .ipsBreadcrumb > ul[data-role="breadcrumbList"],
2824 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2825 margin: 0;
2826 padding: 0;
2827 list-style: none;
2828 color: inherit;
2829 }
2830
2831 /* Breadcrumbs */
2832 .ipsBreadcrumb > ul[data-role="breadcrumbList"]{
2833 display: block;
2834 border-radius: inherit;
2835 overflow: hidden;
2836 }
2837
2838 html[dir='ltr'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2839 float: left;
2840 padding-left: 15px;
2841 }
2842
2843 html[dir="rtl"] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2844 float: right;
2845 padding-right: 15px;
2846 }
2847
2848 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2849 padding: 0 15px;
2850
2851 position: relative;
2852 z-index: 1;
2853 }
2854
2855 html[dir='ltr'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2856 margin-left: -15px;
2857 }
2858
2859 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2860 margin-right: -15px;
2861 }
2862
2863 /* Link angles */
2864 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2865 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2866 border-style: solid;
2867 border-width: 0px 1px 0px 0px;
2868 box-shadow: inset currentColor -1px 0px 0px 0px;
2869 content: '';
2870 position: absolute;
2871 height: 50%;
2872 width: 100%;
2873 right: 0;
2874 z-index: -1;
2875 box-sizing: border-box;
2876 transform-origin: 100% 50%;
2877 }
2878
2879 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before{
2880 top: 0;
2881 transform: skewX(30deg);
2882 }
2883
2884 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2885 top: 50%;
2886 transform: skewX(-30deg);
2887 }
2888
2889 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2890 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2891 right: auto;
2892 left: 0;
2893 border-width: 0px 0px 0px 1px;
2894 box-shadow: inset currentColor 1px 0px 0px 0px;
2895 }
2896
2897 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before{
2898 transform: skewX(-30deg);
2899 }
2900
2901 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2902 transform: skewX(30deg);
2903 }
2904
2905 /* Active inset shadow */
2906 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before,
2907 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2908 color: rgba(0,0,0,0.05);
2909 }
2910
2911 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before{
2912 box-shadow: inset currentColor -2px 1px 1px;
2913 }
2914
2915 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2916 box-shadow: inset currentColor -2px -1px 1px;
2917 }
2918
2919 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before{
2920 box-shadow: inset currentColor 2px 1px 1px;
2921 }
2922
2923 html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2924 box-shadow: inset currentColor 2px -1px 1px;
2925 }
2926
2927 /* First link */
2928 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:first-of-type > a:before,
2929 .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:first-of-type > a:after{
2930 width: calc(100% + 20px);
2931 }
2932
2933 /* Hide arrow icons */
2934 .ipsBreadcrumb > ul[data-role="breadcrumbList"] .fa{ display: none; }
2935
2936
2937 /* Side links */
2938 .ipsBreadcrumb .ipsList_inline li{
2939 margin: 0 !important;
2940 float: left;
2941 border-style: solid;
2942 border-width: 0px 0px 0px 1px;
2943 }
2944
2945 html[dir="rtl"] .ipsBreadcrumb .ipsList_inline li{
2946 float: right;
2947 border-width: 0px 1px 0px 0px;
2948 }
2949
2950 .ipsBreadcrumb .ipsList_inline li a{
2951 display: block;
2952 padding: 0 15px;
2953 }
2954
2955 html[dir="ltr"] .ipsBreadcrumb_bottom .ipsBreadcrumb .ipsList_inline:not(:first-child) li:last-of-type{
2956 border-right-width: 1px;
2957 }
2958
2959 html[dir="rtl"] .ipsBreadcrumb_bottom .ipsBreadcrumb .ipsList_inline:not(:first-child) li:last-of-type{
2960 border-left-width: 1px;
2961 }
2962
2963/* Remove 'Mark site read' from top breadcrumb */
2964.ipsBreadcrumb_top .ipsList_inline li:nth-of-type(2):last-of-type{
2965 display: none;
2966}
2967
2968 /* Tick icon */
2969 .ipsBreadcrumb > ul > li .fa:not(.fa-home){
2970 margin: 0;
2971 }
2972
2973 html[dir='ltr'] .ipsBreadcrumb > ul > li .fa{
2974 margin-right: 3px;
2975 }
2976
2977 html[dir='rtl'] .ipsBreadcrumb > ul > li .fa{
2978 margin-left: 3px;
2979 }
2980
2981
2982
2983/* Unread content icon */
2984.icon-newspaper{
2985 display: inline-block;
2986 font-family: 'FontAwesome';
2987 vertical-align: middle;
2988 transform: translate(0,0);
2989 font-size: 14px;
2990}
2991
2992 html[dir='ltr'] .ipsBreadcrumb .icon-newspaper{
2993 margin-right: 2px;
2994 }
2995
2996 html[dir='rtl'] .ipsBreadcrumb .icon-newspaper{
2997 margin-left: 2px;
2998 }
2999
3000 .icon-newspaper:before{
3001 content: '\f07c';
3002 }
3003
3004
3005
3006/* RSS icon */
3007#elRSS{
3008 margin: 0 !important;
3009 padding: 0 10px;
3010 height: {theme="social_height"}px;
3011 display: flex;
3012 align-items: center;
3013}
3014
3015 #elRSS .fa{
3016 background: #F28826;
3017 background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
3018 color: #fff;
3019 box-shadow: inset rgba(0,0,0,0.1) 0px 0px 0px 1px;
3020 text-shadow: rgba(0,0,0,0.1) 0px -1px 0px;
3021 border-radius: 3px;
3022 width: 18px; height: 18px; line-height: 18px;
3023 text-align: center;
3024 font-size: 12px;
3025 vertical-align: top;
3026 }
3027
3028 #elRSS .fa:before{
3029 content: '\f09e';
3030 }
3031
3032 /* Add border for RSS icon */
3033 .ipsBreadcrumb #elRSS ~ .ipsPos_right li:last-of-type{
3034 border-width: 0px 1px;
3035 }
3036
3037
3038
3039/*
3040 ----------------
3041 - Social Icons
3042 ----------------
3043*/
3044{{if theme.focus_social}}
3045
3046.ipsfocus_social{
3047 color: #fff;
3048 display: -webkit-flex;
3049 display: flex;
3050 -webkit-align-items: center;
3051 align-items: center;
3052
3053 -webkit-flex: 0 0 auto;
3054 flex: 0 0 auto;
3055 margin: 0;
3056 padding: 0;
3057 list-style: none;
3058}
3059
3060 .ipsfocus_social.iconButtons a{
3061 width: {theme="social_height"}px;
3062 height: {theme="social_height"}px;
3063 }
3064
3065 .ipsfocus_social li{
3066 line-height: {theme="social_height"}px;
3067 flex: 0 0 auto;
3068 margin: 0;
3069 padding: 0;
3070 list-style: none;
3071 padding-left: 4px;
3072 text-align: center;
3073 text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
3074 }
3075
3076 html[dir="rtl"] .ipsfocus_social li{
3077 padding-left: 0;
3078 padding-right: 4px;
3079 }
3080
3081 .ipsfocus_social a{
3082 color: inherit;
3083 background: #444444;
3084 box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
3085 border-radius: 3px;
3086 padding: 0 12px 0 44px;
3087 display: block;
3088 text-decoration: none;
3089 outline: none;
3090 position: relative;
3091 }
3092
3093 .ipsfocus_social a:active{
3094 box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px;
3095 top: 1px;
3096 }
3097
3098 .ipsfocus_social a:before{
3099 content: "\f1e0";
3100 background: rgba(255,255,255,0.18);
3101 box-shadow: inset rgba(255,255,255,0.15) -1px 0px 0px 0px, rgba(0,0,0,0.1) 1px 0px 0px 0px;
3102 border-radius: inherit;
3103 position: absolute;
3104 top: 1px; left: 1px; bottom: 1px;
3105 width: 32px;
3106 text-align: center;
3107 font-family: "FontAwesome";
3108 font-size: 16px;
3109 font-weight: normal;
3110 -webkit-font-smoothing: antialiased;
3111 -moz-osx-font-smoothing: grayscale;
3112 {prefix="transform" value="translate(0,0)"}
3113 pointer-events: none;
3114 }
3115
3116 html[dir='ltr'] .ipsfocus_social a:before{
3117 border-top-right-radius: 0;
3118 border-bottom-right-radius: 0;
3119 }
3120
3121 html[dir='rtl'] .ipsfocus_social a:before{
3122 border-top-left-radius: 0;
3123 border-bottom-left-radius: 0;
3124 }
3125
3126 .ipsfocus_social a:after{
3127 border: 1px solid rgba(0,0,0,0.2);
3128 box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
3129 content: '';
3130 position: absolute;
3131 top: 0; left: 0; right: 0; bottom: 0;
3132 pointer-events: none;
3133 border-radius: inherit;
3134 }
3135
3136 .ipsfocus_social a:hover:after{
3137 background: rgba(255,255,255,0.2);
3138 }
3139
3140 .ipsfocus_social a:active:after{
3141 background: rgba(0,0,0,0.1);
3142 }
3143
3144 .ipsfocus_social.iconButtons a{
3145 padding: 0;
3146 overflow: hidden;
3147 text-indent: 120%;
3148 }
3149
3150 .ipsfocus_social.iconButtons a:before{
3151 background: none;
3152 text-indent: 0;
3153 left: 0;
3154 width: 100%;
3155 box-shadow: none;
3156 }
3157
3158 .ipsfocus_social.textButtons a{ padding: 0 12px; }
3159 .ipsfocus_social.textButtons a:before{ display: none; }
3160
3161 /* Footer icons for mobile */
3162 #ipsLayout_footer .ipsfocus_social{
3163 -webkit-justify-content: center;
3164 justify-content: center;
3165 }
3166
3167 #ipsLayout_footer .ipsfocus_social li{
3168 margin: 0 3px;
3169 padding: 0;
3170 }
3171
3172 #ipsLayout_footer .ipsfocus_social a{
3173 color: inherit;
3174 }
3175
3176 {{if theme.footer_text == "#ffffff"}}
3177
3178 #ipsLayout_footer .ipsfocus_social a:after{
3179 border-width: 0;
3180 }
3181
3182 {{endif}}
3183
3184 @media screen and (max-width:979px){
3185 #ipsLayout_footer .ipsfocus_social{
3186 margin: 10px 0;
3187 }
3188 }
3189
3190.ipsfocus_social a[href*='discordapp.com']:before,
3191.ipsfocus_social a[href*='discord.gg']:before{
3192 content: '';
3193 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA5CAYAAACh6qw/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5RTI0Qjc5MDk0QjExRTg5N0M0QjMxNUU3NzU3MTQ4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5RTI0QjdBMDk0QjExRTg5N0M0QjMxNUU3NzU3MTQ4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTlFMjRCNzcwOTRCMTFFODk3QzRCMzE1RTc3NTcxNDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTlFMjRCNzgwOTRCMTFFODk3QzRCMzE1RTc3NTcxNDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dniwbAAAGOUlEQVR42uycf2wURRTH5862KoVSMNBeEQjWUgq2Iv2BfyBVoifGRPxB8AeIIVYTf0RjlISoIP4AjSbERLERDDEqaEz4oSlItUaQGBUkqa0opAVBpAVRamypgNXz+9x3sJ3u3u3Oznot3W/yCUtvd97su9mdmfdmLhSLxYRPCoMKcAkoAUVgKsgA1eB+zfZWgiqwm2kBjeA7sBP86cdNpmkubyCIgmuZ0dLne8Fm8IkP9/IHaAbjGLOOgFq2+zH4RZfRkKYWOAncCWaDYdJn34D1YC3Y46DVZoFz+NhcuRD4G5wExxOUUQhmgZnc8mV1gjXgHbA11Q6cBuaD6dLfqdDV4CXQIH2WCyIgj1toATMKZIMh7MCQyYEh/pcceIJb0EHQxF9KMx83S7aKwQJwG38hsr4ES8BGZQ+QAxUoBjWxnuoAz0jnjgRzwBugEZyK+aefwXrwMLhUqsci0G5z3edgioov3F5ALfZ5iwqQUx41nVcEXgANsdSqBawCFaa6PQY6bc6nc7P9cuBksMfC6HNgOBgMHgf7Yr1Tv4JlYDQYxU+KlY6CG3Q7MN/C0GcgCirB6ljf0iYwnev/qc05USe+cdqJbAGVfNwFtoGvuJe7XvRd1XInR/dxBRhg+qyVOzrPvXCx1JN2cS+YJ84e7QM5IFP6++3gPa8OXAduEv1T9eAyLw68iGcP/VlX8SvMduSfSA+IQE+otkCa9B/mmUF/Fz2JP7ptgXMD553WgyotcDsoD3x3OpqT66YF5gXO66YcDtM5dmDQefTUQ24e4Z/AyMBn3UShtEFyZNuqBU4InGcpilHe4uQRvjvwVcKRSdJH+ABHhwP1VBcP7TrsWmBB4LyEoiTc1ESP8NWBj5Lq5kQOnBn4J6lmmP1mfgdSOvF3cSYDplMUuNwBjnEPT4P0KRrL/wd8CL4VRn44H0wGpT45kRYL7PrvyBSejvoQOt8MSmzC4Vdqyp+8D8bY2LgRHPbhvqqsciKLNBtZ4SCnMATs9WDjVQc2KOG1X/O9bbDKiWyVexgPojUpJQ7PpWEBJcSHurSxSTjPx1ACf78fwYX4yzAdlGk04GYw3gaeVrBR5eJcGtu+rDm4MNbswPGie0bKi5q4w3Cjt8FfLs6nrGCrSxvLNXck5WYHTtRY8AaFa6gVbndx/loFG/SaaNF4n+PNDizUWLDqu6bNxbkdijZOaLzPfPkR1jkm8/s6VRs6V5OWmR1YpLHgEsXr3DwFFyrayNbcAiM0jKG1eoc0zkDaFIYkY4SxOsCpaE3gOJc2LhfGekCdqgxzBEbn9I3GdXNcXrNQobW6HbMu8WFKNzbMYxrdel04T4leA+Yp2FjD83cnuksYq2l1K5ccGPGh4AH8uCRbgEQBhRpFGyPYRrIv6g7wpk9BhQg58AKfCqfH7AdhJKVlG5Tpf5EHxBkex2LfCyPUnmXx2QphrNX2S4OoE3kNB/f5HEPr4IEszTbOE8aSOd1q4zFoFzuzUPivujSfHmFZAzXPduw6r/97KcqwsMs5aKDuGhpWHJSeAr+dZc5QmSeHvQxjPhA2yx36mBp4mNOqcG0aOTBd4ULqOW8VRmCReti3+qDjOrkBTGJKlfyAXni3x/D2vRzeLgDv9oEtDi28tyUe8v/IQ1ntgjeVeNU6U4Ui4Cne1tWbVAfuMdWzPMHWL6daGC9sqYYKHuM9ceaEDm1mWQ6aUuS0evAsmGiqUxp4RUPZtXJWrlpTpXeAGRbZsTLeXkUt4YhPDqMU5kbet1co2c8ET2podaRtdjuVloFHNL2kaad4NffWh6TP4rMRCkpO4NAUZbmGg8FJpnc0bm0XZ7a80lSOEur1fHxSOr+Co0NzuWyvog3j18X/Y7U6iwytEsZ6OF2a53BCfz5PwyJs3xx5DpnGa+TA4w7m4l9onusvFfK2B5tkNPWoWzQ9Vs1ghOK+ZC9k8ntKh2gFxTSV3Zq0hOGgB8NtICsFzjOz00P9aQP5YpDuZbtrBo/1VCpSmmLnCd5A7bbTOsAdTo6u7a5x0b4x2ngYdRAums1R494gWk3VmOQcmsrVCeMHMmqcBlm8/OhEGVeMetGLRfdf66CKLO5lU7dZ3AmcK4wtbEc5kbWL+dqiB0+qfwUYAA41z4ekJFz3AAAAAElFTkSuQmCC);
3194 background-size: 50% auto;
3195 background-repeat: no-repeat;
3196 background-position: 50% 50%;
3197}
3198.ipsfocus_social a[href*='discordapp.com'],
3199.ipsfocus_social a[href*='discord.gg']{ background: #7289da; }
3200.ipsfocus_social a[href*='dropbox.com']:before{ content: "\f16b"; }
3201.ipsfocus_social a[href*='dropbox.com']{ background: #007fe5; }
3202.focus-social-gradient .ipsfocus_social a[href*='dropbox.com']{ background-image: linear-gradient(to bottom, #0097ea 0%, #007fe5 100%); }
3203.ipsfocus_social a[href*='mailto:']:before{ content: "\f01c"; }
3204.ipsfocus_social a[href*='mailto:']{ background: #444444; }
3205.focus-social-gradient .ipsfocus_social a[href*='mailto:']{ background-image: linear-gradient(to bottom, #515151 0%, #444444 100%); }
3206.ipsfocus_social a[href*='facebook.com']:before{ content: "\f09a"; }
3207.ipsfocus_social a[href*='facebook.com']{ background: #304c87; }
3208.focus-social-gradient .ipsfocus_social a[href*='facebook.com']{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); }
3209.ipsfocus_social a[href*='flickr.com']:before{ content: "\f16e"; }
3210.ipsfocus_social a[href*='flickr.com']{ background: #fe2997; }
3211.focus-social-gradient .ipsfocus_social a[href*='flickr.com']{ background-image: linear-gradient(to bottom, #fd30aa 0%, #e41c84 100%); }
3212.ipsfocus_social a[href*='google.com']:before{ content: "\f0d5"; }
3213.ipsfocus_social a[href*='google.com']{ background: #df6b39; }
3214.focus-social-gradient .ipsfocus_social a[href*='google.com']{ background-image: linear-gradient(to bottom, #e47d43 0%, #d95332 100%); }
3215.ipsfocus_social a[href*='instagram.com']:before{ content: "\f16d"; }
3216.ipsfocus_social a[href*='instagram.com']{ background: #de416a; }
3217.focus-social-gradient .ipsfocus_social a[href*='instagram.com']{ background-image: linear-gradient(to bottom left, #9035c0 0%, #d62f87 35%, #e85a42 65%, #feda7c 100%); }
3218.ipsfocus_social a[href*='linkedin.com']:before{ content: "\f0e1"; }
3219.ipsfocus_social a[href*='linkedin.com']{ background: #0073b2; }
3220.focus-social-gradient .ipsfocus_social a[href*='linkedin.com']{ background-image: linear-gradient(to bottom, #008bc0 0%, #0073b2 100%); }
3221.ipsfocus_social a[href*='paypal.com']:before, .ipsfocus_social a[href*='paypal.me']:before{ content: "\f1ed"; }
3222.ipsfocus_social a[href*='paypal.com'], .ipsfocus_social a[href*='paypal.me']{ background: #253b80; }
3223.focus-social-gradient .ipsfocus_social a[href*='paypal.com']{ background-image: linear-gradient(to bottom, #253b80 0%, #203370 100%); }
3224.ipsfocus_social a[href*='pinterest.com']:before{ content: "\f0d2"; }
3225.ipsfocus_social a[href*='pinterest.com']{ background: #cd1d1f; }
3226.focus-social-gradient .ipsfocus_social a[href*='pinterest.com']{ background-image: linear-gradient(to bottom, #d62124 0%, #c0181a 100%); }
3227.ipsfocus_social a[href*='reddit.com']:before{ content: "\f1a1"; }
3228.ipsfocus_social a[href*='reddit.com']{ background: #609acf; }
3229.focus-social-gradient .ipsfocus_social a[href*='reddit.com']{ background-image: linear-gradient(to bottom, #72add8 0%, #609acf 100%); }
3230.ipsfocus_social a[href$='.rss']:before{ content: "\f09e"; }
3231.ipsfocus_social a[href$='.rss']{ background: #ff9641; }
3232.focus-social-gradient .ipsfocus_social a[href$='.rss']{ background-image: linear-gradient(to bottom, #ff9641 0%, #ff8543 100%); }
3233.ipsfocus_social a[href*='skype.com']:before{ content: "\f17e"; }
3234.ipsfocus_social a[href*='skype.com']{ background: #00b0f0; }
3235.focus-social-gradient .ipsfocus_social a[href*='skype.com']{ background-image: linear-gradient(to bottom, #00bff3 0%, #00b0f0 100%); }
3236.ipsfocus_social a[href*='soundcloud.com']:before{ content: "\f1be"; }
3237.ipsfocus_social a[href*='soundcloud.com']{ background: #ff6900; }
3238.focus-social-gradient .ipsfocus_social a[href*='soundcloud.com']{ background-image: linear-gradient(to bottom, #ff6900 0%, #ff4400 100%); }
3239.ipsfocus_social a[href*='spotify.com']:before{ content: "\f1bc"; }
3240.ipsfocus_social a[href*='spotify.com']{ background: #84b301; }
3241.focus-social-gradient .ipsfocus_social a[href*='spotify.com']{ background-image: linear-gradient(to bottom, #add411 0%, #84b301 100%); }
3242.ipsfocus_social a[href*='steampowered.com']:before,
3243.ipsfocus_social a[href*='steamcommunity.com']:before{ content: "\f1b6"; }
3244.ipsfocus_social a[href*='steampowered.com'],
3245.ipsfocus_social a[href*='steamcommunity.com']{ background: #457498; }
3246.focus-social-gradient .ipsfocus_social a[href*='steampowered.com']{ background-image: linear-gradient(to bottom, #457498 0%, #3b688a 100%); }
3247.ipsfocus_social a[href*='stripe.com']:before{ content: "\f1f5"; }
3248.ipsfocus_social a[href*='stripe.com']{ background: #58aada; }
3249.focus-social-gradient .ipsfocus_social a[href*='stripe.com']{ background-image: linear-gradient(to bottom, #58aada 0%, #519dca 100%); }
3250.ipsfocus_social a[href*='teamspeak.com']:before{ content: "\f130"; }
3251.ipsfocus_social a[href*='teamspeak.com']{ background: #8190b1; }
3252.focus-social-gradient .ipsfocus_social a[href*='teamspeak.com']{ background-image: linear-gradient(to bottom, #8190b1 0%, #7686a8 100%); }
3253.ipsfocus_social a[href*='tumblr.com']:before{ content: "\f173"; }
3254.ipsfocus_social a[href*='tumblr.com']{ background: #539fcc; }
3255.focus-social-gradient .ipsfocus_social a[href*='tumblr.com']{ background-image: linear-gradient(to bottom, #62b1d6 0%, #539fcc 100%); }
3256.ipsfocus_social a[href*='twitch.tv']:before{ content: "\f1e8"; }
3257.ipsfocus_social a[href*='twitch.tv']{ background: #6441a5; }
3258.focus-social-gradient .ipsfocus_social a[href*='twitch.tv']{ background-image: linear-gradient(to bottom, #6441a5 0%, #593993 100%); }
3259.ipsfocus_social a[href*='twitter.com']:before{ content: "\f099"; }
3260.ipsfocus_social a[href*='twitter.com']{ background: #0097d3; }
3261.focus-social-gradient .ipsfocus_social a[href*='twitter.com']{ background-image: linear-gradient(to bottom, #00b9f0 0%, #0097d3 100%); }
3262.ipsfocus_social a[href*='vimeo.com']:before{ content: "\f194"; }
3263.ipsfocus_social a[href*='vimeo.com']{ background: #1bb5ea; }
3264.focus-social-gradient .ipsfocus_social a[href*='vimeo.com']{ background-image: linear-gradient(to bottom, #20c1eb 0%, #1a8fb8 100%); }
3265.ipsfocus_social a[href*='youtube.com']:before{ content: "\f16a"; }
3266.ipsfocus_social a[href*='youtube.com']{ background: #cc332d; }
3267.focus-social-gradient .ipsfocus_social a[href*='youtube.com']{ background-image: linear-gradient(to bottom, #d43c34 0%, #a92621 100%); }
3268
3269{{endif}}
3270
3271
3272
3273/*
3274 ----------------
3275 - Footer
3276 ----------------
3277*/
3278
3279#ipsLayout_footer{
3280 color: {theme="footer_text"};
3281 margin: 0;
3282 padding: 20px 0;
3283 font-size: 1.2rem;
3284}
3285
3286#elFooterLinks{
3287 margin: 0;
3288}
3289
3290@media screen and (min-width:980px){
3291 #ipsLayout_footer .ipsLayout_container{
3292 display: -webkit-flex;
3293 -webkit-justify-content: space-between;
3294 -webkit-align-items: center;
3295
3296 display: flex;
3297 justify-content: space-between;
3298 align-items: center;
3299 }
3300
3301 #ipsLayout_footer #elCopyright{
3302 text-align: right;
3303 margin: 0;
3304 }
3305 .ipsfocusCopyright{
3306 text-align: left;
3307 }
3308 html[dir='rtl'] .ipsfocusCopyright{
3309 text-align: right;
3310 }
3311
3312 html[dir='ltr'] #elFooterLinks{ text-align: left; }
3313 html[dir='rtl'] #elFooterLinks{ text-align: right; }
3314}
3315
3316 #elFooterLinks,
3317 #ipsLayout_footer a,
3318 #ipsLayout_footer p,
3319 #ipsLayout_footer #elCopyright{
3320 font-size: inherit;
3321 }
3322
3323
3324
3325/* ipsfocus Copyright */
3326#elFooterLinks .ipsfocusCopyright{
3327 display: block;
3328 margin: 0;
3329}
3330
3331 .ipsfocusCopyright a{
3332 border-bottom: 1px solid {hextorgb="footer_text" opacity="0.4"};
3333 }
3334
3335 .ipsfocusCopyright a:hover{
3336 border-bottom-color: {hextorgb="footer_text" opacity="0.7"};
3337 }
3338
3339 #elFooterLinks .ipsfocusCopyright,
3340 #elCopyright_userLine{
3341 margin-bottom: 4px;
3342 }
3343
3344/* Remove site copyright if left empty */
3345#elCopyright_userLine:empty{
3346 display: none;
3347}
3348
3349
3350
3351/*
3352 ----------------
3353 - Mega Footer
3354 ----------------
3355*/
3356{{if theme.footer_enable}}
3357
3358.ipsfocus_megaFooter{
3359 background: {theme="area_background_reset"};
3360 border: 1px solid {hextorgb="text_color" opacity="0.15"};
3361 border-width: 1px 0 0 0;
3362}
3363
3364 .footerCols{
3365 display: flex;
3366 padding: 24px 12px;
3367 }
3368
3369 .footerCol{
3370 flex: 1 1 10px;
3371 padding: 0 12px;
3372 }
3373
3374@supports (display: grid){
3375 .footerCols{
3376 display: grid;
3377 grid-template-columns: repeat(auto-fit, minmax(var(--footer-col-width), 1fr));
3378 grid-gap: 40px;
3379 gap: 40px;
3380 padding: 24px;
3381 }
3382
3383 .footerCol{
3384 padding: 0px;
3385 }
3386}
3387
3388{{if !theme.footer_mobile}}
3389 @media screen and (max-width:979px){
3390 /* Hide on mobiles */
3391 .ipsfocus_megaFooter{ display: none; }
3392 }
3393{{endif}}
3394
3395 .ipsfocus_megaFooter h4{
3396 display: block;
3397 margin: 0;
3398 padding-bottom: 1.15em;
3399 font-size: 1.3rem;
3400 font-weight: bold;
3401 }
3402
3403 .ipsfocus_megaFooter p{
3404 margin: 0;
3405 margin-bottom: 0.8em;
3406 }
3407
3408 .ipsfocus_megaFooter .footerLinks,
3409 .ipsfocus_megaFooter .footerLinks li{
3410 margin: 0;
3411 padding: 0;
3412 display: block;
3413 list-style: none;
3414 }
3415
3416 .ipsfocus_megaFooter .footerLinks a{
3417 line-height: 25px;
3418 display: inline-block;
3419 }
3420{{endif}}
3421
3422
3423
3424{{if theme.countdown_enable}}
3425/*
3426 ----------------
3427 - Countdown
3428 ----------------
3429*/
3430
3431@keyframes countdown-fade {
3432 from {
3433 opacity: 0;
3434 transform: translateY(-5px);
3435 }
3436 to {
3437 opacity: 1;
3438 transform: translateY(0);
3439 }
3440}
3441
3442.focus-timer-wrap{
3443 animation: countdown-fade 0.3s;
3444 animation-delay: 0.1s;
3445 animation-fill-mode: both;
3446
3447 font-size: 18px;
3448 min-height: calc(1.25em + 1.7em + 30px);
3449 padding: 15px 10px;
3450
3451 text-align: center;
3452 display: -webkit-flex;
3453 -webkit-flex-direction: column;
3454 -webkit-align-items: center;
3455 -webkit-justify-content: center;
3456
3457 display: flex;
3458 flex-direction: column;
3459 align-items: center;
3460 justify-content: center;
3461}
3462
3463 .focus-timer-title{
3464 font-size: 1.25em;
3465 line-height: 1;
3466 }
3467
3468 .focus-timer{
3469 line-height: 1em;
3470 min-height: 1em;
3471 margin-top: 0.7em;
3472 opacity: 0.8;
3473 }
3474
3475 .focus-timer-done .focus-timer{
3476 display: none;
3477 }
3478
3479 .focus-timer-faint{
3480 opacity: 0.6;
3481 }
3482
3483[data-timer-text='day and']::before{
3484 content: 'day and';
3485}
3486
3487[data-timer-text='days and']::before{
3488 content: 'days and';
3489}
3490
3491[data-timer-text='week,']::before{
3492 content: 'week,';
3493}
3494
3495[data-timer-text='weeks,']::before{
3496 content: 'weeks,';
3497}
3498
3499{{endif}}
3500
3501
3502/*
3503 ----------------
3504 - Guest message
3505 ----------------
3506*/
3507
3508/* Force hide the message for members since it sometimes shows (cache problem maybe?) */
3509.focus-member .ipsWidget[data-blockid*="guestSignUp"]:not(.ui-sortable-handle){
3510 display: none;
3511}
3512
3513/* Reset defaults */
3514.ipsWidget[data-blockid*="guestSignUp"] .ipsWidget_inner,
3515.ipsWidget[data-blockid*="guestSignUp"] .ipsAreaBackground_light{
3516 padding: 0;
3517}
3518.ipsWidget[data-blockid*="guestSignUp"] .ipsAreaBackground_light{
3519 background: none;
3520}
3521
3522
3523/* border */
3524.ipsWidget[data-blockid*="guestSignUp"],
3525.guest-widget-footer{
3526 border: 1px solid {hextorgb="text_color" opacity="0.3"};
3527}
3528
3529 /* internal header and buttons */
3530 .guest-widget-header,
3531 .guest-widget-footer,
3532 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3533 background-color: {theme="area_background"};
3534 }
3535
3536/* Guest message wrap */
3537.ipsWidget[data-blockid*="guestSignUp"]{
3538 border-radius: 4px;
3539 box-shadow: none;
3540 padding: 6px;
3541 overflow: hidden; /* Clip corners to create border-radius on children */
3542}
3543
3544 /* Header */
3545 .guest-widget-header{
3546 box-shadow: inset rgba(0,0,0,0.25) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px;
3547 border-radius: 4px;
3548 color: inherit;
3549 padding: 14px;
3550 font-size: 1.3rem;
3551 line-height: 1.4;
3552 font-weight: bold;
3553 margin: 0;
3554 display: block;
3555 }
3556
3557 /* Text */
3558 .ipsWidget[data-blockid*="guestSignUp"] .ipsType_richText{
3559 margin: 0;
3560 padding: 14px;
3561 }
3562
3563 /* Footer */
3564 .guest-widget-footer{
3565 background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%);
3566 border-width: 1px 0 0 0;
3567 line-height: 32px;
3568
3569 padding: 4px;
3570 margin: 0 -6px -6px -6px;
3571 }
3572
3573 .guest-widget-footer ul{
3574 list-style: none;
3575 margin: 0;
3576 padding: 0;
3577 display: flex;
3578 align-items: center;
3579 flex-wrap: wrap;
3580 }
3581
3582 .guest-widget-footer li{
3583 margin: 5px;
3584 flex: 0 0 auto;
3585 }
3586
3587 .ipsWidget_vertical .guest-widget-footer li{
3588 flex: 1 0 auto;
3589 }
3590
3591 .guest-widget-footer .ipsButton{
3592 float: none;
3593 display: block;
3594 }
3595
3596 /* Social buttons in guest message */
3597 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3598 border: 0 solid currentcolor;
3599
3600 border-radius: 3px;
3601 color: inherit;
3602 padding: 0 14px 0 46px;
3603 line-height: inherit;
3604 font-weight: bold;
3605 position: relative;
3606 }
3607
3608 /* Hover */
3609 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial):hover{
3610 background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%);
3611 }
3612
3613 /* Active */
3614 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial):active{
3615 background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
3616 transform: translateY(1px);
3617 }
3618
3619 /* Register / sign in icons */
3620 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial)::before{
3621 background: rgba(255,255,255,0.2);
3622 border-radius: 3px 0px 0px 3px;
3623 content: "\f084";
3624 position: absolute;
3625 top: 0; left: 0; bottom: 0;
3626 width: 32px;
3627 text-align: center;
3628 font-family: "FontAwesome";
3629 font-size: 14px;
3630 font-weight: normal;
3631 -webkit-font-smoothing: antialiased;
3632 -moz-osx-font-smoothing: grayscale;
3633 {prefix="transform" value="translate(0,0)"}
3634 pointer-events: none;
3635 }
3636
3637 /* Register icon */
3638 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton[href*='/register/']:not(.ipsSocial)::before{
3639 content: "\f067";
3640 }
3641
3642 /* Button border */
3643 .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial)::after{
3644 border-width: 1px;
3645 top: 0; right: 0; bottom: 0; left: 0;
3646 opacity: 0.7;
3647 }
3648
3649 /* Social buttons */
3650 .ipsWidget[data-blockid*="guestSignUp"] .ipsSocial{
3651 min-width: 0;
3652 max-width: none;
3653 width: auto;
3654 line-height: 32px;
3655 vertical-align: top;
3656 display: inline-flex;
3657 align-items: center;
3658 }
3659
3660 /* Border */
3661 .ipsWidget[data-blockid*="guestSignUp"] .ipsSocial:after{
3662 border-width: 1px;
3663 border-style: solid;
3664 top: 0; left: 0; right: 0; bottom: 0;
3665 }
3666
3667 .ipsWidget[data-blockid*="guestSignUp"] .ipsSocial_text{
3668 padding: 0 10px;
3669 }
3670
3671
3672/* Alert colours */
3673.focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"],
3674.focus-guest-alert .guest-widget-footer{
3675 border-color: #f0cea1;
3676}
3677
3678/* background and color */
3679.focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"]{
3680 background-color: #fcefe0 !important;
3681 color: #9A6200;
3682}
3683
3684 /* internal header and buttons */
3685 .focus-guest-alert .guest-widget-header,
3686 .focus-guest-alert .guest-widget-footer,
3687 .focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3688 background-color: #EFAF5B;
3689 }
3690
3691/*
3692 ----------------
3693 - Global Message
3694 ----------------
3695*/
3696{{if theme.global_enable}}
3697
3698.ipsfocus-globalMessage:not(.displayGlobalMessage){
3699 display: none;
3700}
3701
3702 html[dir='ltr'] .ipsfocus-globalMessage{
3703 padding-right: 50px;
3704 }
3705
3706 html[dir='rtl'] .ipsfocus-globalMessage{
3707 padding-left: 50px;
3708 }
3709
3710 .ipsfocus-globalMessage p{
3711 margin: 0 0 0.7em 0;
3712 }
3713
3714 .ipsfocus-globalMessage .ipsMessage,
3715 .ipsfocus-globalMessage p:last-of-type{
3716 margin: 0;
3717 }
3718
3719 .ipsfocus-globalDismiss{
3720 background: rgba(0,0,0,0.4);
3721 color: #fff;
3722 width: 30px;
3723 height: 30px;
3724 border-radius: 30px;
3725 border: 0;
3726 font-size: 14px;
3727 display: flex;
3728 align-items: center;
3729 justify-content: center;
3730 position: absolute;
3731 right: 9px;
3732 top: 9px;
3733 cursor: pointer;
3734 }
3735
3736 html[dir='rtl'] .ipsfocus-globalDismiss{
3737 right: auto;
3738 left: 9px;
3739 }
3740
3741 .ipsfocus-globalDismiss:before{
3742 content: "\f00d";
3743 font-family: "FontAwesome";
3744 -webkit-font-smoothing: antialiased;
3745 -moz-osx-font-smoothing: grayscale;
3746 {prefix="transform" value="translate(0,0)"}
3747 }
3748{{endif}}
3749
3750
3751
3752/*
3753 ----------------
3754 - Background Picker
3755 ----------------
3756*/
3757{{if theme.focus_picker}}
3758
3759.focus-pickerWrap{ display: none; }
3760
3761 .focus-picker{
3762 display: -webkit-flex;
3763 -webkit-align-items: center;
3764 -webkit-justify-content: space-between;
3765
3766 display: flex;
3767 align-items: center;
3768 justify-content: space-between;
3769
3770 margin: 0 -5px;
3771 }
3772
3773 .focus-picker span{
3774 -webkit-flex: 1 1 10px;
3775 flex: 1 1 10px;
3776
3777 display: block;
3778 position: relative;
3779
3780 background-size: cover;
3781 background-position: 50% 0% ;
3782
3783 border-radius: 3px;
3784 box-shadow: inset rgba(0,0,0,0.1) 0px 5px 10px, inset rgba(0,0,0,0.25) 0px 1px 2px;
3785 color: #fff;
3786 font-size: 1.45rem;
3787 text-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
3788
3789 -moz-user-select: none;
3790 -webkit-user-select: none;
3791 -ms-user-select: none;
3792 user-select: none;
3793 margin-bottom: 5px;
3794 height: 160px;
3795 margin: 0 5px;
3796 text-align: center;
3797 cursor: pointer;
3798 }
3799
3800 .focus-picker .ipsfocus_bg1{
3801 background-color: {theme="picker_c1"};
3802 {{if theme.picker_i1}}background-image: url('{theme="picker_i1"}');{{endif}}
3803 }
3804
3805 .focus-picker .ipsfocus_bg2{
3806 background-color: {theme="picker_c2"};
3807 {{if theme.picker_i2}}background-image: url('{theme="picker_i2"}');{{endif}}
3808 }
3809
3810 .focus-picker .ipsfocus_bg3{
3811 background-color: {theme="picker_c3"};
3812 {{if theme.picker_i3}}background-image: url('{theme="picker_i3"}');{{endif}}
3813 }
3814
3815 .focus-picker .ipsfocus_bg4{
3816 background-color: {theme="picker_c4"};
3817 {{if theme.picker_i4}}background-image: url('{theme="picker_i4"}');{{endif}}
3818 }
3819
3820 .focus-picker .ipsfocus_bg5{
3821 background-color: {theme="picker_c5"};
3822 {{if theme.picker_i5}}background-image: url('{theme="picker_i5"}');{{endif}}
3823 }
3824
3825 .focus-picker .ipsfocus_bg6{
3826 background-color: {theme="picker_c6"};
3827 {{if theme.picker_i6}}background-image: url('{theme="picker_i6"}');{{endif}}
3828 }
3829/*
3830 .focus-picker span:nth-of-type({expression="theme.focus_picker_number + 1"}),
3831 .focus-picker span:nth-of-type({expression="theme.focus_picker_number + 2"}),
3832 .focus-picker span:nth-of-type({expression="theme.focus_picker_number + 3"}),
3833 .focus-picker span:nth-of-type({expression="theme.focus_picker_number + 4"}){
3834 display: none;
3835 }
3836*/
3837
3838 .focus-picker span:nth-of-type(n + {expression="theme.focus_picker_number + 1"}){
3839 display: none;
3840 }
3841
3842 .focus-picker span:before{
3843 content: '';
3844 background: rgba(255,255,255,0.2);
3845 position: absolute;
3846 top: 0; left: 0; right: 0; bottom: 0;
3847 border-radius: inherit;
3848
3849 transition: all 0.2s ease-in-out;
3850 opacity: 0;
3851 }
3852
3853 .focus-picker span:after{
3854 display: -webkit-flex;
3855 -webkit-align-items: center;
3856 -webkit-justify-content: center;
3857
3858 display: flex;
3859 align-items: center;
3860 justify-content: center;
3861
3862 content: "\f0fe";
3863 font-family: "FontAwesome";
3864 font-size: 72px;
3865 line-height: 1;
3866 -webkit-font-smoothing: antialiased;
3867 -moz-osx-font-smoothing: grayscale;
3868
3869 position: absolute;
3870 top: 0; left: 0; right: 0; bottom: 0;
3871
3872 transform: translateY(20px);
3873 transition: all 0.2s ease-in-out;
3874 opacity: 0;
3875 }
3876
3877 @media screen and (min-width: 980px){
3878 .focus-picker span:hover:before{
3879 opacity: 1;
3880 }
3881 .focus-picker span:hover:after{
3882 transform: translateY(0);
3883 opacity: 0.8;
3884 }
3885 }
3886
3887 @media screen and (max-width:979px){
3888
3889 {{if theme.picker_mobile}}
3890 .ipsfocus-toggleBgPicker{ display: none !important; }
3891 {{endif}}
3892
3893 .focus-picker span{
3894 height: 100px;
3895 }
3896 .focus-picker span:before,
3897 .focus-picker span:after{
3898 display: none;
3899 }
3900 }
3901
3902.ipsfocus-toggleBgPicker{
3903 cursor: pointer;
3904}
3905
3906{{endif}}
3907
3908
3909
3910
3911/*
3912 ----------------
3913 - Headers: typography.css
3914 ----------------
3915*/
3916
3917.ipsPageHeader{
3918 margin-top: 0;
3919 padding: 15px;
3920 background: {theme="area_background_reset"};
3921}
3922
3923/* Maintitle */
3924.ipsType_sectionTitle{
3925 border: 0;
3926 border-radius: 0;
3927 text-transform: none;
3928 line-height: 2rem;
3929}
3930
3931 .ipsType_sectionTitle .ipsType_light{
3932 opacity: 0.7;
3933 }
3934
3935.ipsType_pageTitle,
3936.ipsType_sectionTitle,
3937.ipsType_secondaryTitle,
3938.ipsType_sectionHead,
3939.ipsType_minorHeading {
3940 {{if theme.headline_font != 'default'}}
3941 font-family: "{theme='headline_font'}";
3942 {{else}}
3943 font-family: inherit;
3944 {{endif}}
3945}
3946
3947
3948/*
3949 ----------------
3950 - .ipsBox
3951 ----------------
3952*/
3953
3954.ipsBox{
3955 border: 0;
3956 border-radius: 0;
3957 box-shadow: none;
3958}
3959
3960/* Internal boxes */
3961html .ipsApp .ipsBox:not(.ipsWidget) .ipsBox,
3962html .ipsApp .ipsTabs_panels .ipsBox,
3963html .ipsApp .ipsDialog > div .ipsBox {
3964 border: 1px solid {hextorgb="text_color" opacity="0.2"};
3965 background-color: rgba(18,18,18,0.8); }
3966 box-shadow: rgba(0,0,0,0.07) 0px 1px 5px;
3967 border-radius: 3px;
3968 background-clip: padding-box !important;
3969}
3970
3971html .ipsApp .ipsBox .ipsAreaBackground .ipsBox{
3972 background-color: {theme="area_background_reset"};
3973}
3974
3975 /* Internal headers */
3976 html .ipsApp .ipsBox .ipsBox .ipsWidget_title,
3977 html .ipsApp .ipsTabs_panels .ipsBox .ipsWidget_title,
3978 html .ipsApp .ipsBox .ipsBox .ipsType_sectionTitle,
3979 html .ipsApp .ipsTabs_panels .ipsBox .ipsType_sectionTitle{
3980 background-color: rgba(40,40,40,0.6); }
3981 color: #F9F9F9;
3982 border: 1px solid {hextorgb="text_color" opacity="0.8"};
3983 text-shadow: none;
3984 font-family: inherit;
3985 text-transform: none;
3986 box-shadow: none;
3987 text-shadow: none;
3988 margin: 5px 5px 0 5px;
3989 border-radius: 3px;
3990 font-size: 1.3rem;
3991 font-weight: bold;
3992 padding: 9px 12px;
3993 }
3994
3995 /* Push in pagination, eg. Club Members */
3996 html .ipsApp .ipsBox .ipsBox .ipsButtonBar,
3997 html .ipsApp .ipsTabs_panels .ipsBox .ipsButtonBar{
3998 margin: 5px;
3999 border-radius: 3px;
4000 }
4001
4002 /* Force internal background colour on grid backgrounds, eg. Club Members */
4003 html .ipsApp .ipsBox .ipsBox > .ipsAreaBackground,
4004 html .ipsApp .ipsTabs_panels .ipsBox > .ipsAreaBackground{
4005 background: transparent;
4006 }
4007
4008
4009/* Without padding, content hits the side borders */
4010.ipsBox_alt{
4011 padding: 15px;
4012}
4013
4014/* Remove styles from child ipsBox_alt's */
4015.ipsBox_alt .ipsBox_alt{
4016 background: none;
4017 border: 0;
4018 box-shadow: none;
4019 padding: 0;
4020}
4021
4022
4023/*
4024 ----------------
4025 - Buttons
4026 ----------------
4027*/
4028
4029 /* Remove defaults since the pseudo element handles borders and hover */
4030
4031 /* Remove hover */
4032 .ipsApp .ipsButton:not( .ipsButton_noHover ):hover {
4033 background-image: none;
4034 }
4035
4036 /* Remove active */
4037 .ipsApp .ipsButton:active,
4038 .ipsApp .ipsButton_active {
4039 box-shadow: none;
4040 background-image: none;
4041 }
4042
4043
4044/* Overwrite defaults: Make sure all buttons have a transparent border */
4045.ipsApp .ipsButton,
4046.ipsApp .ipsToolList .ipsButton_link,
4047.ipsApp .ipsButton_link.ipsButton_link_secondary,
4048.ipsApp .ipsButton_link,
4049.ipsApp .ipsButton:active,
4050.ipsApp .ipsButton_active{
4051 border: 1px solid transparent;
4052}
4053
4054
4055
4056/* Create pseudo element for border and hover */
4057.ipsButton{
4058 position: relative;
4059}
4060
4061.ipsApp .ipsButton{
4062 transition: none;
4063}
4064
4065.ipsApp .ipsCoverPhoto_button{
4066 position: absolute;
4067}
4068
4069/* The overflow: hidden; needs to be unfortunately removed otherwise the pseudo element isn't shown */
4070.ipsApp .ipsButton_fullWidth{
4071 overflow: visible;
4072}
4073
4074 .ipsButton:after{
4075 content: '';
4076 position: absolute;
4077 top: -1px; left: -1px; right: -1px; bottom: -1px;
4078 border-width: inherit;
4079 border-style: inherit;
4080 border-color: rgba(0,0,0,0.2);
4081 border-radius: inherit;
4082 pointer-events: none;
4083 }
4084
4085 /* Hover */
4086 .ipsButton:hover:after{
4087 background: rgba(255,255,255,0.1);
4088 }
4089
4090 /* Active */
4091 .ipsApp .ipsButton:active:after,
4092 .ipsApp .ipsButton_active:after {
4093 background: rgba(0,0,0,0.1);
4094 }
4095
4096
4097/* Active nudge */
4098.ipsButton:active {
4099 transform: translateY(1px);
4100}
4101
4102 /* Remove active nudge */
4103 .ipsComment_controls .ipsButton:active,
4104 .ipsButton_split .ipsButton:active,
4105 .ipsMenu .ipsButton_link:active{
4106 transform: none;
4107 }
4108
4109
4110/* Light button */
4111.ipsApp .ipsButton_light:after {
4112 border-color: {hextorgb="light_button_font" opacity="0.25"};
4113}
4114
4115 .ipsApp .ipsButton_light:hover:after {
4116 border-color: {hextorgb="light_button_font" opacity="0.4"};
4117 }
4118
4119 .ipsApp .ipsButton_light:active:after {
4120 background: rgba(0,0,0,0.05);
4121 }
4122
4123
4124
4125/* Very light */
4126.ipsApp .ipsButton_veryLight:after {
4127 border-color: {hextorgb="very_light_button_font" opacity="0.25"};
4128}
4129
4130 .ipsApp .ipsButton_veryLight:hover:after {
4131 border-color: {hextorgb="very_light_button_font" opacity="0.4"};
4132 }
4133
4134 .ipsApp .ipsButton_veryLight:active:after {
4135 background: rgba(0,0,0,0.05);
4136 }
4137
4138
4139
4140/* Link buttons */
4141.ipsApp .ipsButton_link:after{
4142 border-color: currentColor;
4143 opacity: 0.5;
4144}
4145
4146 .ipsApp .ipsButton_link:hover:after{
4147 background: none;
4148 opacity: 0.8;
4149 }
4150
4151 .ipsApp .ipsButton_link:active:after {
4152 background: none;
4153 opacity: 1;
4154 }
4155
4156 /* Link buttons next to Topic button */
4157 .ipsApp .ipsToolList .ipsButton_link:after{
4158 display: none;
4159 }
4160
4161
4162
4163/* Icons on reply and new topic buttons */
4164.ipsButton_important[href='#replyForm']::before,
4165.ipsButton_important[href$='do=add']::before,
4166.ipsButton_important[href$='startTopic/']::before{
4167 content: '\f086';
4168 font-family: 'FontAwesome';
4169 font-weight: normal;
4170 display: inline-block;
4171 text-rendering: auto;
4172 -webkit-font-smoothing: antialiased;
4173 -moz-osx-font-smoothing: grayscale;
4174 transform: translate(0,0);
4175 margin-right: 8px;
4176 line-height: 1px;
4177}
4178
4179html[dir='rtl'] .ipsButton_important[href='#replyForm']::before,
4180html[dir='rtl'] .ipsButton_important[href$='do=add']::before,
4181html[dir='rtl'] .ipsButton_important[href$='startTopic/']::before{
4182 margin-right: 0;
4183 margin-left: 8px;
4184}
4185
4186
4187
4188/* Follow and promote button */
4189.ipsApp .ipsButton_link.ipsFollow,
4190.ipsApp .ipsButton_link.ipsPromote {
4191 background: {theme="very_light_button"};
4192 color: {theme="very_light_button_font"};
4193}
4194
4195 .ipsApp .ipsButton_link.ipsFollow:after,
4196 .ipsApp .ipsButton_link.ipsPromote:after{
4197 border-color: currentColor;
4198 opacity: 0.3;
4199 }
4200
4201 .ipsApp .ipsButton_link.ipsFollow:hover:after,
4202 .ipsApp .ipsButton_link.ipsPromote:hover:after{
4203 border-color: currentColor;
4204 opacity: 0.6;
4205 }
4206
4207
4208/* Remove border for certain buttons */
4209#elProfileHeader .ipsButton:after,
4210#ipsMultiQuoter .ipsButton:after,
4211#elProfileStats .ipsButton:after{
4212 border: 0;
4213}
4214
4215
4216
4217
4218
4219
4220/* Bolder font on certain buttons */
4221.ipsToolList .ipsButton,
4222.ipsButton_primary{
4223 font-weight: bold;
4224}
4225
4226
4227/* New topic button */
4228.ipsToolList.ipsToolList_horizontal > li.ipsToolList_primaryAction .ipsButton:not(.ipsButton_link){
4229 min-width: 0;
4230 font-weight: bold;
4231}
4232
4233
4234
4235/* Split */
4236.ipsButton_split{
4237 border-radius: 3px;
4238 position: relative;
4239 z-index: 1;
4240}
4241
4242 html[dir="ltr"] ul.ipsButton_split > li:first-child,
4243 html[dir="ltr"] .ipsButton_split > .ipsButton:first-child,
4244 html[dir="ltr"] .ipsButton_split > li:first-child > .ipsButton,
4245 html[dir="rtl"] ul.ipsButton_split > li:last-child,
4246 html[dir="rtl"] .ipsButton_split > .ipsButton:last-child,
4247 html[dir="rtl"] .ipsButton_split > li:last-child > .ipsButton{
4248 border-top-left-radius: inherit;
4249 border-bottom-left-radius: inherit;
4250 }
4251
4252 html[dir="ltr"] ul.ipsButton_split > li:last-child,
4253 html[dir="ltr"] .ipsButton_split > .ipsButton:last-child,
4254 html[dir="ltr"] .ipsButton_split > li:last-child > .ipsButton,
4255 html[dir="rtl"] ul.ipsButton_split > li:first-child,
4256 html[dir="rtl"] .ipsButton_split > .ipsButton:first-child,
4257 html[dir="rtl"] .ipsButton_split > li:first-child > .ipsButton{
4258 border-top-right-radius: inherit;
4259 border-bottom-right-radius: inherit;
4260 }
4261
4262html[dir='ltr'] .ipsButton_split .ipsButton{
4263 margin-left: -1px;
4264}
4265
4266html[dir='rtl'] .ipsButton_split .ipsButton{
4267 margin-right: -1px;
4268}
4269
4270/* Fluid buttons */
4271.ipsButton_split .ipsButton.ipsButton_link{
4272 background: {theme="area_background_reset"};
4273 border: 1px solid transparent !important;
4274 position: relative;
4275 z-index: 0;
4276}
4277
4278 .ipsButton_split .ipsButton.ipsButton_link:hover{
4279 z-index: 1;
4280 }
4281
4282 .ipsButton_split .ipsButton.ipsButton_link:after{
4283 display: block;
4284 }
4285
4286 .ipsButton_split .ipsButton.ipsButton_primary{
4287 border-color: transparent !important;
4288 position: relative;
4289 z-index: 2;
4290 }
4291
4292
4293
4294
4295
4296/* Bug fix: Remove hover effect from certain buttons */
4297.ipsButton_link:hover,
4298.ipsApp .ipsButton_overlaid:hover{
4299 background-image: none !important;
4300}
4301
4302
4303/* Change URL button on new article page */
4304.ipsForm button.ipsButton:not(.ipsButton_link)[data-ipschange]{
4305 background: {theme="normal_button"};
4306 border-color: transparent;
4307 color: {theme="normal_button_font"};
4308}
4309
4310
4311/* Add tag button in topic view */
4312.ipsTags_edit .ipsButton_veryVerySmall{
4313 height: auto;
4314 margin-top: 0;
4315 vertical-align: top;
4316 font-size: 10px;
4317 line-height: 16px;
4318}
4319
4320
4321
4322
4323/* Follow button */
4324.ipsApp .ipsFollow{
4325 padding: 0;
4326}
4327
4328.ipsApp .ipsFollow,
4329.ipsApp .ipsFollow > a:only-child{
4330 display: inline-flex;
4331 align-items: center;
4332 justify-content: space-between;
4333}
4334
4335
4336html .ipsApp .ipsFollow > a:not(.ipsCommentCount),
4337html .ipsApp .ipsFollow > span:not(.ipsCommentCount),
4338html .ipsApp .ipsFollow > a > span:not(.ipsCommentCount){
4339 left: auto;
4340 right: auto;
4341 padding: 0 15px;
4342}
4343
4344
4345/* Required for guest follow buttons */
4346.ipsApp .ipsFollow > a:only-child{
4347 display: flex;
4348}
4349
4350 .ipsFollow > *:first-child{
4351 flex: 1 1 auto;
4352 }
4353
4354 .ipsFollow > *:last-child{
4355 flex: 0 0 auto;
4356 }
4357
4358
4359
4360
4361.ipsFollow .ipsCommentCount{
4362 color: inherit;
4363 background: transparent;
4364 line-height: 12px;
4365}
4366
4367.ipsFollow > .ipsCommentCount{
4368 border-radius: inherit;
4369}
4370
4371html[dir='ltr'] .ipsFollow .ipsCommentCount{
4372 margin: 0 3px 0 0;
4373}
4374
4375html[dir='rtl'] .ipsFollow .ipsCommentCount{
4376 margin: 0 0 0 3px;
4377}
4378
4379 .ipsButton_primary .ipsCommentCount{
4380 background: transparent;
4381 }
4382
4383 /* Pseudo background for comment count */
4384 .ipsFollow .ipsCommentCount:before{
4385 content: '';
4386 position: absolute;
4387 top: 0; left: 0; right: 0; bottom: 0;
4388 border-radius: inherit;
4389 background: currentcolor;
4390 opacity: 0.15;
4391 pointer-events: none;
4392 }
4393
4394@media screen and (max-width:767px){
4395 .ipsApp .ipsFollow{
4396 display: flex !important;
4397 }
4398}
4399
4400/* Bug fix: Remove cursor effect since not all areas of the button can be clicked */
4401.ipsApp .ipsButton.ipsFollow:hover{
4402 cursor: auto;
4403}
4404
4405.ipsFollow .ipsCommentCount::after{
4406 display: none;
4407}
4408
4409
4410
4411
4412
4413
4414
4415/*
4416 ----------------
4417 - Data Lists
4418 ----------------
4419*/
4420
4421.ipsApp .ipsDataItem_new, .ipsApp .ipsDataItem_success {
4422 background-color: #e9f2e8;
4423}
4424
4425.ipsApp .ipsDataItem_warning {
4426 background-color: {theme="moderated_light"};
4427}
4428
4429.ipsApp .ipsDataItem_error {
4430 background-color: {theme="moderated"};
4431}
4432
4433.ipsApp .ipsDataItem_info {
4434 background-color: {theme="selected"};
4435}
4436
4437.ipsApp .ipsDataItem_status,
4438.ipsDataList_readStatus .ipsDataItem:not( .ipsDataItem_unread ):not( .ipsDataItem_selected ):not( .ipsModerated ) {
4439 background: {theme="area_background_light"};
4440}
4441
4442/* Remove zebra stripes */
4443.ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected ):not( .ipsModerated ):not( .ipsDataItem_new ):not( .ipsDataItem_success ):not( .ipsDataItem_warning ):not( .ipsDataItem_error ):not( .ipsDataItem_info ):not( .ipsDataItem_status ):nth-child(even) {
4444 background-color: transparent;
4445}
4446/* If zebra stripes are removed, borders should be added */
4447.ipsDataList.ipsDataList_zebra > .ipsDataItem{ border-bottom-width: 1px; border-bottom-style: solid; }
4448
4449.ipsDataList_large .ipsDataItem{
4450 border-bottom-width: 1px;
4451}
4452
4453
4454
4455/*
4456 ----------------
4457 - Minimal and Responsive Layouts
4458 ----------------
4459*/
4460
4461/* Show search, user panel, mobile navigation, etc on minimal pages for a more consistent layout */
4462#ipsfocus #elMobileNav,
4463#ipsfocus .ipsApp #elUserNav{
4464 display: flex !important;
4465}
4466
4467#ipsfocus #elSearch{
4468 display: block !important;
4469}
4470
4471/* Ensure breadcrumbs are shown on minimal pages, on desktops only */
4472@media (min-width: 980px){
4473 #ipsfocus .ipsBreadcrumb{
4474 display: block !important;
4475 }
4476}
4477
4478/* Responsive */
4479@media screen and (max-width:979px){
4480 .ipsApp .user-links,
4481 .ipsApp .nav-bar,
4482 .ipsApp .ipsfocus-breadcrumb{
4483 display: none;
4484 }
4485}
4486
4487/* Minimal */
4488/*
4489.ipsApp.ipsLayout_minimal .user-links,
4490.ipsApp.ipsLayout_minimal .ipsfocus-search,
4491.ipsApp.ipsLayout_minimal .ipsfocus-breadcrumb, */
4492.ipsLayout_minimal .hide-minimal{
4493 display: none;
4494}
4495
4496.ipsLayout_minimal #ipsLayout_mainArea{
4497 padding: 0;
4498}
4499/*
4500 .ipsLayout_minimal .ipsNavBar_primary > a,
4501 .ipsApp .ipsNavBar_primary #elBackHome{
4502 padding: 0 20px;
4503 color: inherit;
4504 font-size: 1.2rem;
4505 line-height: {theme="navigationheight"}px;
4506 font-weight: bold;
4507 display: inline-block;
4508 }
4509*/
4510 .ipsLayout_minimal .ipsNavBar_primary:after{ display: none; }
4511
4512
4513/* .ipsLayout_minimal .content-padding, */
4514.ipsLayout_minimal #ipsLayout_contentArea{
4515 max-width: 1000px;
4516 margin: 0 auto;
4517}
4518
4519/*
4520 ----------------
4521 - Forum Index
4522 ----------------
4523*/
4524
4525/* Pageheader alignment */
4526body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader{
4527 display: flex;
4528 align-items: center;
4529 justify-content: space-between;
4530}
4531
4532 body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader > *{
4533 flex: 0 1 auto;
4534 }
4535
4536 body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader .ipsToolList{
4537 order: 2;
4538 margin: 0;
4539 }
4540
4541 body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader:after{
4542 display: none;
4543 }
4544
4545 /* Make sure icons in buttons are clear */
4546 body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader .ipsButton_split .fa{
4547 font-size: 14px;
4548 }
4549
4550 /* Bug fix */
4551 .ipsPageHeader ul.ipsButton_split{
4552 vertical-align: top;
4553 }
4554 /* Align header correctly if only one category exists, like a fresh installation */
4555 body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader > *:only-child{ width: 100%; }
4556
4557
4558
4559/* Collapse icon */
4560.cForumToggle{
4561 line-height: 20px;
4562 text-align: center;
4563}
4564
4565.cForumToggle:after{
4566 content: '\f146';
4567 font-size: 14px;
4568 display: inline-block;
4569 vertical-align: top;
4570}
4571
4572 .cForumRow_hidden .cForumToggle:after{
4573 content: '\f0fe';
4574 }
4575
4576
4577
4578/* Remove border from last forum */
4579.cForumList .cForumRow .ipsDataList li:last-of-type{
4580 border-bottom: 0;
4581}
4582
4583
4584
4585/* Bold forum names */
4586.cForumRow .ipsDataItem_title{
4587 margin-bottom: 0;
4588}
4589 .cForumRow .ipsDataItem_title a{
4590 font-weight: bold;
4591 }
4592
4593/* NEW badge */
4594.cForumList .ipsDataItem_unread .ipsDataItem_title:before,
4595.cForumGrid_unread .ipsPhotoPanel h3 a:before {
4596 color: #fff;
4597 background: #ed7a16;
4598 display: inline-block;
4599 font-size: 0.9rem;
4600 line-height: 2;
4601 border-radius: 3px;
4602 padding: 0 4px;
4603 margin-right: 4px;
4604 vertical-align: middle;
4605}
4606
4607 html[dir='rtl'] .cForumList .ipsDataItem_unread .ipsDataItem_title:before,
4608 html[dir='rtl'] .cForumGrid_unread .ipsPhotoPanel h3 a:before{
4609 margin-left: 4px;
4610 margin-right: 0;
4611 }
4612
4613
4614
4615/* Space apart elements in main column */
4616.cForumList .ipsDataItem_main > *:not(:first-child){
4617 margin-top: 5px;
4618}
4619
4620
4621
4622/* Remove empty descriptions */
4623.cForumRow .ipsDataItem_meta:empty{
4624 display: none;
4625}
4626
4627
4628/*
4629 ----------------
4630 - Subforums
4631 ----------------
4632*/
4633
4634/* Remove subforum stem image */
4635html .ipsApp .ipsDataItem_subList {
4636 padding: 0px !important;
4637 background: none !important;
4638}
4639
4640 .ipsDataItem_subList > li{
4641 margin: 0 !important;
4642 }
4643
4644 .ipsDataItem_subList a{
4645 display: inline-block;
4646 white-space: nowrap;
4647 max-width: 100%;
4648 overflow: hidden;
4649 text-overflow: ellipsis;
4650 vertical-align: top;
4651 }
4652
4653 /* Space out subforums if grid isn't supported */
4654 html[dir='ltr'] .ipsDataItem_subList a{
4655 margin-right: 20px;
4656 }
4657
4658 html[dir='rtl'] .ipsDataItem_subList a{
4659 margin-left: 20px;
4660 }
4661
4662 /* Remove gap created by icon on unread forum */
4663 .ipsDataItem_subList .ipsItemStatus_tiny{
4664 margin-right: -0.3em;
4665 }
4666
4667 /* Add plus icon */
4668 .ipsDataItem_subList a:before{
4669 content: "\f18e";
4670 font-family: "FontAwesome";
4671 font-size: 14px;
4672 font-weight: normal;
4673 display: inline-block;
4674 margin-right: 4px;
4675 text-rendering: auto;
4676 -webkit-font-smoothing: antialiased;
4677 -moz-osx-font-smoothing: grayscale;
4678 transform: translate(0,0);
4679 vertical-align: top;
4680 }
4681
4682 html[dir='rtl'] .ipsDataItem_subList a::before{
4683 margin-left: 4px;
4684 margin-right: 0;
4685 }
4686
4687 /* Remove comma's */
4688 .ipsDataItem_subList li a::after{
4689 display: none;
4690 }
4691
4692 /* Place subforums into grid for browsers which support it */
4693 @supports (display: grid){
4694 .ipsDataItem_subList{
4695 display: var(--subforum-display);
4696 grid-gap: var(--subforum-gap);
4697 grid-template-columns: repeat(auto-fill, minmax(var(--subforum-min-width), 1fr));
4698 }
4699 }
4700
4701 /* Remove subforum dot for new content */
4702 .ipsDataItem_subList .fa-circle{ display: none; }
4703
4704
4705/* Bug fix - Forum stats */
4706.ipsDataItem_stats dl{ margin: 0; }
4707
4708
4709
4710/* Bold unread topic titles */
4711.cForumRow.ipsDataItem_unread .ipsDataItem_lastPoster li:nth-of-type(2) {
4712 font-weight: bold;
4713}
4714
4715
4716
4717@media screen and (min-width:980px){
4718
4719 /* Neaten up padding if forum icons dont have a background */
4720 html[dir='ltr'] .cForumList .ipsDataItem_main{
4721 {{if theme.ficon_trans}}
4722 padding-left: 0;
4723 {{else}}
4724 padding-left: 5px;
4725 {{endif}}
4726 padding-right: 0;
4727 }
4728
4729 html[dir='rtl'] .cForumList .ipsDataItem_main{
4730 {{if theme.ficon_trans}}
4731 padding-right: 0;
4732 {{else}}
4733 padding-right: 5px;
4734 {{endif}}
4735 padding-left: 0;
4736 }
4737
4738 /* Align forum stats to the side on desktop */
4739 html[dir='ltr'] .cForumList .ipsDataItem_statsLarge{
4740 text-align: right;
4741 padding-left: 0;
4742 padding-right: 20px;
4743 }
4744 html[dir='rtl'] .cForumList .ipsDataItem_statsLarge{
4745 text-align: left;
4746 padding-right: 0;
4747 padding-left: 20px;
4748 }
4749
4750}
4751
4752
4753
4754/* Show latest topic title on tablets and mobiles */
4755@media screen and (max-width:979px){
4756
4757 /* Flex for mobiles */
4758 .cForumRow.ipsDataItem{
4759 display: -webkit-flex;
4760 -webkit-align-items: flex-start;
4761 -webkit-flex-wrap: wrap;
4762
4763 display: flex;
4764 align-items: flex-start;
4765 flex-wrap: wrap;
4766 }
4767
4768
4769
4770 /* Forum icons and stats */
4771 .cForumRow .ipsDataItem_icon{
4772 -webkit-flex: 0 0 auto;
4773 flex: 0 0 auto;
4774 transform: translateY(5px);
4775 }
4776
4777 /* Add space after icon */
4778 html[dir='ltr'] .cForumRow.ipsDataItem .ipsDataItem_icon{
4779 margin-right: 10px;
4780 }
4781
4782 html[dir='rtl'] .cForumRow.ipsDataItem .ipsDataItem_icon{
4783 margin-left: 10px;
4784 }
4785
4786
4787
4788 /* Main */
4789 .cForumRow .ipsDataItem_main{
4790 -webkit-flex: 0 0 auto;
4791 flex: 0 0 auto;
4792 width: calc(100% - {theme="ficon_widthr"}px - 10px);
4793 padding: 0 !important;
4794 margin: 0 !important;
4795 }
4796
4797 .cForumRow .ipsDataItem_title{
4798 display: block;
4799 max-width: calc(100% - 80px);
4800 }
4801
4802
4803
4804 /* Stats */
4805 .ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats{
4806 position: absolute;
4807 top: 15px;
4808 right: 12px;
4809
4810 margin: 0;
4811
4812 display: -webkit-flex;
4813 -webkit-align-items: center;
4814 -webkit-justify-content: flex-end;
4815
4816 display: flex;
4817 align-items: center;
4818 justify-content: flex-end;
4819 }
4820
4821 .cForumRow .ipsDataItem_statsLarge .ipsDataItem_stats_number{
4822 font-size: inherit;
4823 }
4824
4825 html[dir='rtl'] .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats{
4826 right: auto;
4827 left: 12px;
4828 }
4829
4830 html[dir='ltr'] .ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats > *{
4831 margin: 0;
4832 }
4833
4834 html[dir='rtl'] .ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats > *{
4835 margin: 0;
4836 }
4837
4838
4839
4840 /* Convert latest post to a row */
4841 .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4842 position: static;
4843 height: auto;
4844 width: 100%;
4845 line-height: 22px;
4846 }
4847
4848 .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4849 margin-top: 10px;
4850 }
4851
4852 html[dir='ltr'] .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4853 padding-left: calc({theme="ficon_widthr"}px + 10px);
4854 }
4855
4856 html[dir='rtl'] .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4857 padding-right: calc({theme="ficon_widthr"}px + 10px);
4858 }
4859
4860
4861
4862 /* Fix float issue with rtl */
4863 html[dir="rtl"] .ipsDataItem_lastPoster .ipsUserPhoto{
4864 float: none;
4865 }
4866
4867 /* Resize avatar and align text vertically in row */
4868 .cForumList .ipsUserPhoto_tiny img{
4869 width: 22px;
4870 height: 22px;
4871 }
4872
4873 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4874 display: inline-block;
4875 line-height: inherit;
4876 }
4877
4878 html[dir='ltr'] .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(1){
4879 padding-right: 6px;
4880 }
4881
4882 html[dir='rtl'] .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(1){
4883 padding-left: 6px;
4884 }
4885
4886 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(3){
4887 display: none;
4888 }
4889
4890 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto .ipsContained{
4891 display: inline;
4892 width: auto;
4893 table-layout: auto;
4894 }
4895
4896 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time {
4897 display: inline-block;
4898 width: auto;
4899 overflow: visible;
4900 font-size: 0;
4901 }
4902
4903 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time:before{
4904 font-size: 1.1rem;
4905 content: "- ";
4906 }
4907
4908 .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time:after{
4909 position: relative;
4910 top: auto; left: auto; right: auto;
4911 text-align: inherit;
4912 font-size: 1.1rem;
4913 content: attr(data-short);
4914 }
4915
4916}
4917
4918/* Large screens: Move last poster info onto two lines */
4919@media screen and (min-width:1201px){
4920
4921 html[dir="ltr"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4922 padding-left: 46px;
4923 }
4924 html[dir="rtl"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4925 padding-right: 46px;
4926 }
4927
4928 html[dir="ltr"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto li,
4929 html[dir="rtl"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4930 margin: 0;
4931 }
4932
4933 .ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_blendLinks,
4934 .ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_light{
4935 display: inline-block;
4936 }
4937
4938 .ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_blendLinks:after{
4939 content: ',';
4940 }
4941
4942}
4943
4944
4945
4946/*
4947 ----------------
4948 - Forum Index: Grid
4949 ----------------
4950*/
4951
4952.cForumGrid{
4953 border-color: {hextorgb="text_color" opacity="0.15"};
4954 background-clip: padding-box !important;
4955 background: {theme="area_background_light"};
4956}
4957
4958.cForumGrid .cForumGrid_forumInfo{
4959 border-color: {hextorgb="text_color" opacity="0.1"};
4960}
4961
4962/* Align icon and forum name */
4963.cForumGrid_forumInfo{
4964 display: -webkit-flex !important;
4965 -webkit-align-items: center;
4966 display: flex !important;
4967 align-items: center;
4968}
4969
4970 .cForumGrid_forumInfo > span{
4971 -webkit-flex: 0 0 auto;
4972 flex: 0 0 auto;
4973 float: none;
4974 }
4975
4976 .cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4977 -webkit-flex: 1 1 auto;
4978 flex: 1 1 auto;
4979 overflow: hidden;
4980 }
4981
4982 html[dir="ltr"] .cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4983 margin-left: 15px;
4984 }
4985 html[dir="rtl"] .cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4986 margin-right: 15px;
4987 }
4988
4989
4990/*
4991 ----------------
4992 - Forum Index: Fluid
4993 ----------------
4994*/
4995
4996#elContextualTools{
4997 padding: 0;
4998 margin: 0;
4999 margin-bottom: 15px;
5000}
5001
5002 #elContextualTools.ipsSticky {
5003 padding: 0;
5004 }
5005
5006.cForumMiniList_wrapper{
5007 padding: 15px 15px 5px 15px;
5008}
5009
5010 .cForumMiniList_multiRoot{
5011 margin: 0;
5012 }
5013
5014 .cForumMiniList.cForumMiniList_multiRoot > li > a{
5015 color: {theme="text_dark"};
5016 margin: 0;
5017 }
5018
5019 .ipsApp .cForumMiniList .cForumMiniList .cForumMiniList{
5020 margin-bottom: 0;
5021 }
5022
5023 html[dir="ltr"] .ipsSideMenu_item + .cForumMiniList,
5024 html[dir="rtl"] .ipsSideMenu_item + .cForumMiniList{
5025 border: 0;
5026 }
5027
5028 html[dir='ltr'] .cForumMiniList .ipsSideMenu_item + .ipsSideMenu_list .ipsSideMenu_item{
5029 padding: 6px 10px 6px 6px;
5030 }
5031
5032 html[dir='rtl'] .cForumMiniList .ipsSideMenu_item + .ipsSideMenu_list .ipsSideMenu_item{
5033 padding: 6px 6px 6px 10px;
5034 }
5035
5036 .cForumMiniList .cForumMiniList_blob{
5037 background: {theme="text_color"};
5038 color: #fff;
5039 top: auto;
5040 }
5041
5042 html[dir="ltr"] .cForumMiniList .cForumMiniList_blob{
5043 margin-right: 8px;
5044 }
5045
5046 html[dir="rtl"] .cForumMiniList .cForumMiniList_blob{
5047 margin-left: 8px;
5048 }
5049
5050 .cForumMiniList .cForumMiniList_blob > span{
5051 background: {theme="area_background_reset"};
5052 }
5053
5054 .cForumMiniList.cForumMiniList_multiRoot > li > a.cForumMiniList_selected {
5055 background: {hextorgb="area_background" opacity="0.5"};
5056 border-top-left-radius: inherit;
5057 border-top-right-radius: inherit;
5058 }
5059 .cForumMiniList_categorySelected {
5060 background: {theme="area_background_light"};
5061 border-radius: 3px;
5062 }
5063
5064 .ipsType_small.cForumMiniList_count{
5065 line-height: 18px;
5066 }
5067
5068/* Remove border radius on pseudo avatar if round corners are disabled */
5069{{if !theme.rounded_photos}}
5070 .cForumFluidTable .ipsDataItem_loading > div > span:last-child:after {
5071 border-radius: 0;
5072 }
5073{{endif}}
5074
5075/* Loading colours */
5076@-webkit-keyframes dummy_anim {
5077 0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5078 50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5079 99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5080}
5081@-moz-keyframes dummy_anim {
5082 0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5083 50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5084 99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5085}
5086@-ms-keyframes dummy_anim {
5087 0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5088 50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5089 99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5090}
5091@-o-keyframes dummy_anim {
5092 0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5093 50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5094 99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5095}
5096@keyframes dummy_anim {
5097 0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5098 50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5099 99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5100}
5101
5102
5103/*
5104 ----------------
5105 - Forum Icons
5106 ----------------
5107*/
5108
5109/* Icon structure */
5110.ipsItemStatus.ipsItemStatus_large{
5111 border-radius: {theme="ficon_radius"}px;
5112 font-size: {theme="ficon_size"}px;
5113 color: {theme="ficon_color"};
5114
5115 width: {theme="ficon_width"}px;
5116 height: {theme="ficon_height"}px;
5117
5118 display: -webkit-flex;
5119 -webkit-justify-content: center;
5120 -webkit-align-items: center;
5121
5122 display: flex;
5123 justify-content: center;
5124 align-items: center;
5125}
5126
5127
5128
5129/* Background */
5130.ipsItemStatus.ipsItemStatus_large,
5131.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5132{{if theme.ficon_trans}}
5133 background-color: transparent;
5134{{else}}
5135 background: {theme="item_status"};
5136{{endif}}
5137}
5138
5139
5140/* Feature colour icons */
5141{{if theme.ficon_trans}}
5142
5143 /* Remove feature colour if transparent setting is enabled */
5144 .ipsItemStatus_large[style]{
5145 background-color: transparent !important;
5146 }
5147
5148{{else}}
5149
5150 /* If the icon has a feature colour background, force the icon colour setting for the .fa icon */
5151 .ipsItemStatus_large[style] .fa{
5152 color: {theme="ficon_color"};
5153 }
5154
5155{{endif}}
5156
5157
5158
5159/* Faint 'read' icons, if a 'read' icon isn't uploaded */
5160{{if !theme.ficon_image}}
5161.focus-member .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read,
5162{{endif}}
5163.focus-member .ipsItemStatus_custom.ipsItemStatus_read{
5164 opacity: 0.3;
5165 filter: grayscale(1);
5166}
5167
5168/* Make icons full visibility for guests */
5169.focus-guest .ipsItemStatus.ipsItemStatus_read{
5170 opacity: 1;
5171}
5172
5173
5174
5175
5176@media screen and (max-width:979px){
5177 .ipsDataItem_icon .ipsItemStatus.ipsItemStatus_large{
5178 font-size: {theme="ficon_sizer"}px;
5179 border-radius: calc({theme="ficon_radius"}px * 0.65); /* Smaller border radius */
5180 width: inherit;
5181 line-height: 1;
5182 }
5183}
5184
5185
5186
5187/* Unread icon */
5188.ipsItemStatus_large .fa-comments:before{
5189 content: '\{theme="ficon_unread"}';
5190}
5191/* Read icon */
5192.ipsItemStatus_large.ipsItemStatus_read .fa-comments:before{
5193 content: '\{theme="ficon_read"}';
5194}
5195
5196
5197
5198/* Let icon determine column width */
5199.ipsDataList_large .ipsDataItem_icon{
5200 /*
5201 min-width: {theme="ficon_width"}px;
5202 width: {theme="ficon_width"}px;
5203 max-width: {theme="ficon_width"}px;
5204 */
5205 min-width: {theme="ficon_width"}px;
5206
5207 padding: 10px;
5208 text-align: center;
5209 box-sizing: content-box;
5210}
5211
5212/* Dimensions of forum icons */
5213.ipsItemStatus_custom,
5214.cForumRow .ipsItemStatus_custom{
5215 max-width: {theme="ficon_width"}px;
5216}
5217
5218/* Responsive dimensions */
5219@media (max-width: 979px){
5220 .ipsDataList_large .ipsDataItem_icon{
5221 min-width: {theme="ficon_widthr"}px;
5222 width: {theme="ficon_widthr"}px;
5223 max-width: {theme="ficon_widthr"}px;
5224
5225 padding: 0 !important;
5226 }
5227 .ipsItemStatus_custom,
5228 .cForumRow .ipsItemStatus_custom{
5229 max-width: {theme="ficon_widthr"}px;
5230 }
5231 .ipsDataItem_icon .ipsItemStatus.ipsItemStatus_large{
5232 height: {theme="ficon_heightr"}px;
5233 }
5234}
5235
5236
5237
5238{{if theme.ficon_imagenew}}
5239
5240 /* To use images as forum icons */
5241 .ipsItemStatus.ipsItemStatus_large .fa{
5242 display: none;
5243 }
5244
5245 .ipsApp .ipsItemStatus.ipsItemStatus_large,
5246 .ipsApp .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5247 /* Overwrite inline style background */
5248 background-color: transparent !important;
5249
5250 background: url('{theme="ficon_imagenew"}') no-repeat 50% 50%;
5251 background-size: contain;
5252
5253 border-radius: 0;
5254 box-shadow: none;
5255 border: 0;
5256 }
5257
5258 {{if theme.ficon_image}}
5259 .ipsApp .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5260 background-image: url('{theme="ficon_image"}');
5261 }
5262 {{endif}}
5263
5264{{endif}}
5265
5266
5267/* Fix alignment of tooltip */
5268.ipsDataItem_icon a[data-action="markAsRead"]{
5269 display: block;
5270}
5271
5272
5273
5274/*
5275 ----------------
5276 - Sidebar and Widgets
5277 ----------------
5278*/
5279
5280#ipsLayout_sidebar{
5281 overflow: visible;
5282}
5283
5284/* Comment count in widgets */
5285.ipsCommentCount,
5286.ipsCommentCount.ipsFaded {
5287 background: {theme="comment_count"};
5288 border-color: {theme="comment_count"};
5289 color: {theme="comment_count_font"};
5290}
5291
5292 .ipsCommentCount_hot {
5293 background: {theme="featured"};
5294 border-color: {theme="featured"};
5295 }
5296
5297 html[dir="ltr"] .ipsCommentCount:after,
5298 html[dir="ltr"] .ipsCommentCount.ipsFaded:after,
5299 html[dir="ltr"] .ipsCommentCount_hot:after { border-right-color: inherit; }
5300 html[dir="rtl"] .ipsCommentCount:after,
5301 html[dir="rtl"] .ipsCommentCount.ipsFaded:after,
5302 html[dir="rtl"].ipsCommentCount_hot:after { border-left-color: inherit; }
5303
5304 .cWidgetComments{
5305 position: relative;
5306 }
5307
5308 html[dir="ltr"] .ipsWidget .ipsDataItem_main.cWidgetComments{
5309 padding-right: 30px;
5310 }
5311
5312 html[dir="rtl"] .ipsWidget .ipsDataItem_main.cWidgetComments{
5313 padding-left: 30px;
5314 }
5315
5316 .cWidgetComments .ipsCommentCount{
5317 position: absolute;
5318 top: 50%;
5319 transform: translateY(-50%);
5320 margin: 0 !important;
5321 }
5322
5323 html[dir='ltr'] .cWidgetComments .ipsCommentCount{ right: 5px; }
5324 html[dir='rtl'] .cWidgetComments .ipsCommentCount{ left: 5px; }
5325
5326
5327
5328/* Widgets */
5329
5330.ipsWidget.ipsWidget_vertical .ipsWidget_title,
5331.ipsWidget.ipsWidget_horizontal .ipsWidget_title{
5332 border-radius: 0;
5333 background-color: rgba(18,18,18,0.6); }
5334 border-top-left-radius: inherit;
5335 border-top-right-radius: inherit;
5336 text-transform: none;
5337 {{if theme.headline_font != 'default'}}
5338 font-family: "{theme='headline_font'}";
5339 {{else}}
5340 font-family: inherit;
5341 {{endif}}
5342}
5343
5344 /* Widget content */
5345 .ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
5346 background: {theme="area_background_reset"};
5347 }
5348
5349 html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
5350 border-right-color: {hextorgb="text_color" opacity="0.12"};
5351 }
5352 html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
5353 border-left-color: {hextorgb="text_color" opacity="0.12"};
5354 }
5355
5356 .ipsWidget.ipsWidget_primary {
5357 background: {theme="secondary_title"};
5358 }
5359
5360 .ipsWidget.ipsWidget_primary h3 {
5361 color: {theme="secondary_title_font"};
5362 }
5363
5364/* Member stats */
5365@media screen and (max-width:979px){
5366 .ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsGrid_span4{
5367 padding-top: 8px;
5368 padding-bottom: 8px;
5369 border-bottom: 1px solid {hextorgb="text_color" opacity="0.15"};
5370 }
5371
5372 .ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsGrid_span4:last-of-type{
5373 border: 0;
5374 }
5375}
5376
5377/* Widget icons */
5378.ipsWidget_title::before{
5379 font-family: 'FontAwesome';
5380 font-style: normal;
5381 font-weight: normal;
5382 -webkit-font-smoothing: antialiased;
5383 -moz-osx-font-smoothing: grayscale;
5384 transform: translate(0,0);
5385 margin-right: 7px;
5386 margin-left: -3px;
5387 opacity: 0.7;
5388 display: inline-block;
5389 line-height: 1px;
5390}
5391
5392 html[dir='rtl'] .ipsWidget_title::before{
5393 margin-left: 7px;
5394 margin-right: -3px;
5395 }
5396
5397 .ipsWidget[data-blockid^="app_blog_blogs_"] .ipsWidget_title::before{ content: '\f02d'; }
5398 .ipsWidget[data-blockid^="app_blog_blogCommentFeed"] .ipsWidget_title::before{ content: '\f02e'; }
5399 .ipsWidget[data-blockid^="app_blog_entryFeed"] .ipsWidget_title::before{ content: '\f02d'; }
5400 .ipsWidget[data-blockid^="app_blog_blogStatistics"] .ipsWidget_title::before{ content: '\f200'; }
5401 .ipsWidget[data-blockid^="app_calendar_todaysBirthdays"] .ipsWidget_title::before{ content: '\f1fd'; }
5402 .ipsWidget[data-blockid^="app_calendar_upcomingEvents"] .ipsWidget_title::before{ content: '\f073'; }
5403 .ipsWidget[data-blockid^="app_calendar_recentReviews"] .ipsWidget_title::before{ content: '\f274'; }
5404 .ipsWidget[data-blockid^="app_core_stats"] .ipsWidget_title::before{ content: '\f080'; }
5405 .ipsWidget[data-blockid^="app_core_whosOnline"] .ipsWidget_title::before{ content: '\f007'; }
5406 .ipsWidget[data-blockid^="app_core_recentStatusUpdates"] .ipsWidget_title::before{ content: '\f086'; }
5407 .ipsWidget[data-blockid^="app_core_topContributors"] .ipsWidget_title::before{ content: '\f234'; }
5408 .ipsWidget[data-blockid^="app_core_activeUsers"] .ipsWidget_title::before{ content: '\f0c0'; }
5409 .ipsWidget[data-blockid^="app_core_clubs"] .ipsWidget_title::before{ content: '\f2bb'; }
5410 .ipsWidget[data-blockid^="app_core_promoted"] .ipsWidget_title::before{ content: '\f005'; }
5411 .ipsWidget[data-blockid^="app_core_members"] .ipsWidget_title::before{ content: '\f007'; }
5412 .ipsWidget[data-blockid^="app_core_newsletter"] .ipsWidget_title::before{ content: '\f003'; }
5413 .ipsWidget[data-blockid^="app_downloads_downloadsReviewFeed"] .ipsWidget_title::before{ content: '\f040'; }
5414 .ipsWidget[data-blockid^="app_downloads_downloadsCommentFeed"] .ipsWidget_title::before{ content: '\f0e6'; }
5415 .ipsWidget[data-blockid^="app_downloads_fileFeed"] .ipsWidget_title::before{ content: '\f019'; }
5416 .ipsWidget[data-blockid^="app_downloads_topDownloads"] .ipsWidget_title::before{ content: '\f091'; }
5417 .ipsWidget[data-blockid^="app_downloads_downloadStats"] .ipsWidget_title::before{ content: '\f200'; }
5418 .ipsWidget[data-blockid^="app_downloads_topSubmitters"] .ipsWidget_title::before{ content: '\f091'; }
5419 .ipsWidget[data-blockid^="app_forums_topicFeed"] .ipsWidget_title::before{ content: '\f03a'; }
5420 .ipsWidget[data-blockid^="app_forums_forumStatistics"] .ipsWidget_title::before{ content: '\f201'; }
5421 .ipsWidget[data-blockid^="app_forums_poll"] .ipsWidget_title::before{ content: '\f200'; }
5422 .ipsWidget[data-blockid^="app_forums_postFeed"] .ipsWidget_title::before{ content: '\f086'; }
5423 .ipsWidget[data-blockid^="app_forums_hotTopics"] .ipsWidget_title::before{ content: '\f005'; }
5424 .ipsWidget[data-blockid^="app_gallery_galleryStats"] .ipsWidget_title::before{ content: '\f200'; }
5425 .ipsWidget[data-blockid^="app_gallery_albums"] .ipsWidget_title::before{ content: '\f02d'; }
5426 .ipsWidget[data-blockid^="app_gallery_imageFeed"] .ipsWidget_title::before{ content: '\f03e'; }
5427 .ipsWidget[data-blockid^="app_gallery_recentComments"] .ipsWidget_title::before{ content: '\f0e6'; }
5428 .ipsWidget[data-blockid^="app_gallery_recentImageReviews"] .ipsWidget_title::before{ content: '\f040'; }
5429 .ipsWidget[data-blockid^="app_nexus_donations"] .ipsWidget_title::before{ content: '\f155'; }
5430 .ipsWidget[data-blockid^="app_nexus_subscriptions"] .ipsWidget_title::before{ content: '\f0d6'; }
5431
5432/* Fixes */
5433.ipsWidget_title .ipsType_light{
5434 color: inherit;
5435 opacity: 0.6;
5436 line-height: inherit;
5437}
5438
5439html[dir='ltr'] .cWidgetComments .ipsBadge{ margin-right: 5px; }
5440html[dir='rtl'] .cWidgetComments .ipsBadge{ margin-left: 5px; }
5441
5442
5443
5444/*
5445 ----------------
5446 - Topic List
5447 ----------------
5448*/
5449
5450/* Rules */
5451a[data-ipsdialog-content="#elForumRules"],
5452a[data-ipsdialog-content="#elCategoryRules"]{
5453 display: block;
5454 padding: 15px;
5455 margin-bottom: 10px;
5456
5457 color: {theme="link"};
5458 background: {theme="area_background_light"};
5459 border: 2px solid {hextorgb="text_color" opacity="0.3"};
5460 border-width: 2px 0px;
5461}
5462
5463 /* Force primary background in pop-up */
5464 .ipsDialog #elForumRules{
5465 background-color: transparent;
5466 }
5467
5468/* Add extra space between topic stats and avatar */
5469@media screen and (min-width:980px){
5470 html[dir='ltr'] .cTopicList .ipsDataItem_stats{
5471 padding-right: 25px;
5472 }
5473 html[dir='rtl'] .cTopicList .ipsDataItem_stats{
5474 padding-left: 25px;
5475 }
5476}
5477
5478/* Better alignment of forum title, topic title, prefix, tags and pagination */
5479@media screen and (min-width:768px){
5480 .cForumTopicTable .ipsDataItem_title{
5481 display: flex !important;
5482 align-items: center;
5483 }
5484
5485 .cForumTopicTable .ipsDataItem_title .ipsContained{
5486 flex: 1 1 auto;
5487 display: block !important;
5488 }
5489
5490 .cForumTopicTable .ipsDataItem_title .ipsBadge.ipsBadge_small,
5491 .cForumTopicTable .ipsTag_prefix,
5492 .cForumTopicTable .ipsPagination.ipsPagination_mini{
5493 vertical-align: top;
5494 position: relative;
5495 top: 2px;
5496 }
5497
5498 .cForumTopicTable .ipsTag_prefix{
5499 top: 1px;
5500 }
5501
5502 .cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5503 .cForumTopicTable .ipsDataItem_meta .ipsTags_inline{
5504 display: inline-block;
5505 }
5506
5507 /* Neaten alignment of status icons and prefixes */
5508 html[dir='ltr'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > span,
5509 html[dir='ltr'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5510 html[dir='ltr'] .cForumTopicTable .ipsDataItem .ipsDataItem_main .ipsContained > i{
5511 padding-right: 0;
5512 margin-right: 5px;
5513 display: inline-block;
5514 }
5515
5516 html[dir='rtl'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > span,
5517 html[dir='rtl'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5518 html[dir='rtl'] .cForumTopicTable .ipsDataItem .ipsDataItem_main .ipsContained > i{
5519 padding-right: 0;
5520 margin-left: 5px;
5521 display: inline-block;
5522 }
5523
5524}
5525
5526/* Topic icons */
5527.ipsItemStatus:not( .ipsItemStatus_large ),
5528.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large){
5529 color: {theme="link"};
5530}
5531
5532/*
5533.cTopicList .ipsDataItem_icon{
5534 vertical-align: middle !important;
5535}
5536.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large){
5537 color: inherit;
5538}
5539*/
5540 .cTopicList .ipsItemStatus.ipsItemStatus_read{
5541 opacity: 0.25;
5542 }
5543 .cTopicList .ipsItemStatus .fa-star:before{
5544 content: '\f086';
5545 }
5546 .cTopicList .ipsItemStatus .fa-circle:before{
5547 content: '\f0e6';
5548 }
5549
5550
5551
5552
5553
5554/*
5555 ----------------
5556 - Topic View
5557 ----------------
5558*/
5559
5560/* Font size and line height in posts and editor */
5561.ipsComment_content .ipsType_richText,
5562.ipsApp .cke_contents{
5563 font-size: 1.4rem;
5564 line-height: 1.6;
5565}
5566
5567
5568/* Hold to edit title */
5569.ipsType_pageTitle [data-role="editableTitle"]:hover,
5570.ipsType_pageTitle[data-role="editableTitle"]:hover{
5571 background: {hextorgb="text_color" opacity="0.2"};
5572}
5573
5574
5575/* Button and rating alignment */
5576.focus-button-alignment{
5577 margin: 15px 0;
5578}
5579
5580/* The clearfix class is required for a 3rd party hook */
5581.focus-button-alignment.ipsClearfix:after{
5582 display: none;
5583}
5584
5585@media screen and (min-width:768px){
5586 .focus-button-alignment{
5587 display: flex;
5588 align-items: center;
5589 }
5590
5591 .focus-button-alignment > *{
5592 flex: 0 0 auto;
5593 }
5594
5595 html[dir='ltr'] .focus-button-alignment .ipsToolList{
5596 margin: 0 0 0 auto;
5597 }
5598
5599 html[dir='rtl'] .focus-button-alignment .ipsToolList{
5600 margin: 0 auto 0 0;
5601 }
5602}
5603
5604
5605
5606/* Rating */
5607.focus-rating{
5608 color: {theme="link_button"};
5609}
5610 .focus-rating .ipsType_light{
5611 color: inherit;
5612 }
5613
5614 .ipsRating .ipsRating_half .fa-star-half.fa-flip-horizontal,
5615 .ipsRating .ipsRating_off .fa-star-o,
5616 .ipsRating .ipsRating_off .fa-star {
5617 color: {hextorgb="link_button" opacity="0.7"};
5618 }
5619
5620
5621
5622/* Reply area */
5623.focus-transparent .cTopicPostArea.ipsBox{
5624 background: none !important;
5625 padding-left: 0;
5626 padding-right: 0;
5627 border: 0;
5628 box-shadow: none;
5629}
5630
5631.ipsAreaBackground:not(.ipsBox)[data-role="replyArea"]{
5632 background: none;
5633}
5634
5635
5636
5637/* Compact view */
5638.focus-topic-compact .focus-topic .cPost.ipsBox{
5639 margin-bottom: 0;
5640 box-shadow: none;
5641 background: none;
5642 border: 0;
5643 border-radius: 0;
5644}
5645
5646 /* Remove background, border and box-shadow from highlighted and popular posts */
5647 .focus-topic-compact .focus-topic .ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular),
5648 .focus-topic-compact .ipsComment.ipsBox.ipsComment_popular:not(.ipsModerated):not(.ipsComment_selected){
5649 box-shadow: none;
5650 border: 0;
5651 background-color: transparent;
5652 }
5653
5654/* Reduce space between posts if transparent class is used, since 15px looks too large */
5655.focus-transparent:not(.focus-topic-compact) .cTopic .ipsComment{
5656 margin-bottom: 8px;
5657}
5658
5659
5660/* Inherit border-radius for post headers and button bar */
5661.cPost:before,
5662.cAuthorPane_mobile,
5663.focus-topic-compact .focus-topic .cPost:first-of-type{
5664 border-top-left-radius: inherit;
5665 border-top-right-radius: inherit;
5666}
5667
5668.focus-topic-compact .focus-topic form,
5669.cPost .ipsColumn,
5670.cPost .ipsComment_content,
5671.cPost .cPost_contentWrap{
5672 border-radius: inherit;
5673}
5674
5675.focus-topic-compact .focus-topic .cPost:last-of-type,
5676.cPost .ipsItemControls{
5677 border-bottom-left-radius: inherit;
5678 border-bottom-right-radius: inherit;
5679}
5680
5681
5682/* Post layout */
5683
5684@media screen and (min-width:768px){
5685
5686 .cPost:before{
5687 background: {theme="secondary_title"};
5688 height: {theme="post_header_height"}px;
5689 content: '';
5690 display: block;
5691 position: absolute;
5692 z-index: 1;
5693 top: 0; left: 0; right: 0;
5694 box-sizing: border-box;
5695 }
5696
5697 .cPost .cAuthorPane .cAuthorPane_author,
5698 .cPost .ipsComment_meta{
5699 line-height: {theme="post_header_height"}px;
5700 color: {theme="secondary_title_font"};
5701 }
5702
5703 /* Place text on top of .cPost::before */
5704 .cAuthorPane_author,
5705 .cPost .ipsComment_meta{
5706 position: relative;
5707 z-index: 2;
5708 }
5709
5710 /* Place column beneath post header */
5711 .cPost .cRatingColumn{
5712 position: static;
5713 }
5714
5715 /* Push solve content below header and make sure corners dont poke out from rounded post headers */
5716 .cRatingColumn{
5717 padding-top: {expression="theme.post_header_height + 15"}px !important;
5718 border: 1px solid {hextorgb="text_color" opacity="0.08"};
5719 border-width: 0 1px 0 0;
5720 }
5721
5722 html[dir='rtl'] .cRatingColumn{
5723 border-width: 0 0 0 1px;
5724 }
5725
5726 /* Align username */
5727 .cPost .cAuthorPane{
5728 padding-top: 0 !important;
5729 }
5730
5731 .cPost .cAuthorPane .cAuthorPane_author{
5732 font-size: 1.4rem;
5733 margin-bottom: 0;
5734 white-space: nowrap;
5735 }
5736
5737 .cAuthorPane_author strong{
5738 font-weight: bold;
5739 }
5740
5741 /* User info */
5742 .cAuthorPane_info{ padding-top: 18px; }
5743
5744 /* Sticky author pane */
5745 .focus-sticky-author .cAuthorPane_info{
5746 position: -webkit-sticky;
5747 position: sticky;
5748 top: 0;
5749 }
5750
5751 /* Align date */
5752 body.ipsApp .cPost .ipsComment_meta{
5753 padding-top: 0;
5754 padding-bottom: 0;
5755 font-size: 1.2rem;
5756 }
5757
5758 .cPost .cAuthorPane .cAuthorPane_author a,
5759 .cPost .ipsComment_meta a,
5760 .cPost .ipsComment_meta .ipsType_light{
5761 color: inherit !important;
5762 }
5763
5764 body.ipsApp .cPost .cPost_contentWrap{
5765 padding-top: 18px;
5766 padding-bottom: 10px;
5767 }
5768
5769 .ipsComment_tools > li{
5770 vertical-align: top;
5771 }
5772
5773 /* Flex layout */
5774
5775 .ipsApp .cPost:not(.ipsHide){
5776 display: -webkit-flex;
5777 display: flex;
5778 }
5779
5780 .cPost .cAuthorPane{
5781 -webkit-flex: 0 0 auto;
5782 flex: 0 0 auto;
5783 }
5784
5785
5786 .cPost > .ipsColumn_fluid{
5787 -webkit-flex: 1 1 auto;
5788 display: -webkit-flex;
5789 flex: 1 1 auto;
5790 display: flex;
5791 /* IE 11 fix */
5792 width: 300px;
5793 }
5794
5795 /* Push bar to the bottom if enabled */
5796 .focus-post-bar .cPost{
5797 -webkit-align-items: stretch;
5798 align-items: stretch;
5799 }
5800
5801 .focus-post-bar .cPost .ipsComment_content{
5802 display: -webkit-flex;
5803 -webkit-flex-direction: column;
5804 display: flex;
5805 flex-direction: column;
5806 /* IE 11 fix */
5807 width: 100%;
5808 }
5809
5810 .focus-post-bar .cPost .ipsComment_meta{
5811 -webkit-flex: 0 0 auto;
5812 flex: 0 0 auto;
5813 }
5814
5815 .focus-post-bar .cPost .cPost_contentWrap{
5816 display: -webkit-flex;
5817 -webkit-flex-direction: column;
5818 -webkit-justify-content: space-between;
5819 -webkit-flex: 1 1 auto;
5820 display: flex;
5821 flex-direction: column;
5822 justify-content: space-between;
5823 flex: 1 1 auto;
5824 }
5825
5826 .focus-post-bar .cPost [data-role="commentContent"]{
5827 margin-bottom: auto;
5828 padding-bottom: 10px;
5829 }
5830
5831 /* Larger avatars */
5832 .cTopic .ipsUserPhoto_large img,
5833 .cTopic img.ipsUserPhoto_large,
5834 .cTopic .ipsUserPhoto_large:after{
5835 width: 110px;
5836 height: 110px;
5837 width: var(--topic-avatar);
5838 height: var(--topic-avatar);
5839 {{if theme.rounded_photos}}
5840 border-radius: 50%;
5841 {{endif}}
5842 }
5843
5844
5845
5846 @supports (--css: variables){
5847
5848 .cPost .cAuthorPane{
5849 width: var(--author-pane--width);
5850 background: var(--author-pane--background, transparent);
5851 }
5852
5853 /* Add padding to content area if a border or background is added to the author pane */
5854 html[dir='ltr'] .cPost .ipsComment_content{
5855 padding-left: var(--post-content--padding, 0px);
5856 border: 0px solid var(--author-pane--border-color, rgba(0,0,0,0.1));
5857 border-width: 0px 0px 0px var(--author-pane--border-width, 0px);
5858 }
5859
5860 html[dir='rtl'] .cPost .ipsComment_content{
5861 padding-right: var(--post-content--padding, 0px);
5862 border-width: 0px var(--author-pane--border-width, 0px) 0px 0px;
5863 }
5864
5865 }
5866
5867}
5868
5869@media screen and (max-width: 767px){
5870
5871 /* Post header */
5872 #ipsLayout_body .cAuthorPane_mobile{
5873 background-color: {theme="secondary_title"};
5874 }
5875
5876 .cPost .cAuthorPane_mobile{
5877 color: {theme="secondary_title_font"};
5878 padding: 10px !important;
5879 }
5880
5881 /* Force the reputation to inhert header colour for better contrast */
5882 .focus-rep-inherit .cAuthorPane_mobile .ipsRepBadge{
5883 color: inherit !important;
5884 }
5885
5886 .cPost.ipsComment .cAuthorPane{
5887 height: 60px;
5888 }
5889
5890 /* Avatar */
5891 html[dir="ltr"] .cPost.ipsComment .cAuthorPane_photo{ left: 9px; }
5892 html[dir="rtl"] .cPost.ipsComment .cAuthorPane_photo{ right: 9px; }
5893
5894 .cPost.ipsComment .cAuthorPane_photo{
5895 top: 50%;
5896 margin-top: -20px;
5897 }
5898
5899 .cAuthorPane_photo .ipsUserPhoto{
5900 margin: 0;
5901 }
5902
5903 /* Username */
5904 html[dir="ltr"] .cPost.ipsComment .cAuthorPane_author{ margin-left: 50px; }
5905 html[dir="rtl"] .cPost.ipsComment .cAuthorPane_author{ margin-right: 50px; }
5906
5907 .cPost .cAuthorPane_mobile .cAuthorPane_author {
5908 margin-top: 0;
5909 margin-bottom: 0;
5910 line-height: 20px;
5911 max-height: 20px;
5912 display: block !important;
5913 }
5914
5915 .cPost .cAuthorPane_mobile .cAuthorPane_author > a{
5916 font-size: 14px;
5917 line-height: inherit;
5918 }
5919
5920 .cPost .cAuthorPane_mobile .cAuthorPane_author > a,
5921 .cPost .cAuthorPane_mobile .cAuthorPane_author > span{
5922 display: inline-block !important;
5923 vertical-align: top;
5924 }
5925
5926 .cAuthorPane_mobile .ipsRepBadge{
5927 vertical-align: top;
5928 }
5929
5930 #ipsLayout_body .cAuthorPane_mobile *,
5931 #ipsLayout_body .cPost .ipsComment_meta .ipsType_light{
5932 color: inherit;
5933 }
5934
5935 html[dir] .cPost .ipsComment_meta{
5936 line-height: 20px;
5937 color: {theme="secondary_title_font"};
5938 top: -30px;
5939 padding: 0 1px;
5940 }
5941
5942 .cPost .ipsComment_meta .ipsComment_tools > li{
5943 vertical-align: top;
5944 }
5945
5946 /* Prevent wrapping to multiple lines */
5947 .cPost .ipsComment_meta > .ipsType_reset:not(.ipsPos_right){
5948 overflow: hidden;
5949 white-space: nowrap;
5950 text-overflow: ellipsis;
5951 }
5952
5953
5954
5955 /* Fix padding */
5956 body.ipsApp .cPost .cPost_contentWrap{
5957 padding-left: 0;
5958 padding-right: 0;
5959 }
5960
5961 /* Fix margin */
5962 .cPost .ipsColumn{
5963 margin-bottom: 0 !important;
5964 }
5965
5966}
5967
5968/* Hide comment controls in posts if there are no buttons or react options */
5969.ipsItemControls.iIC-no-buttons.iIC-no-react{
5970 display: none;
5971}
5972
5973/* Neatly pad comment controls when there are no reactions */
5974.cPost .ipsComment_controls{
5975 padding: 7px 0;
5976}
5977
5978/* Ignored post options bar */
5979.ipsComment.ipsComment_ignored{
5980 padding-bottom: 15px;
5981}
5982.focus-topic-compact .ipsComment.ipsComment_ignored{
5983 padding-top: 15px;
5984 border-top: 1px solid {hextorgb="text_color" opacity="0.15"};
5985}
5986
5987
5988/* Force moderated colours */
5989.cPost.ipsModerated{
5990 background-color: {theme="moderated"} !important;
5991}
5992
5993.cPost.ipsModerated:before,
5994.cPost.ipsModerated .cAuthorPane_mobile{
5995 background-color: {theme="moderated_text"} !important;
5996}
5997
5998.focus-post-bar .cPost.ipsModerated .ipsItemControls{
5999 background: {theme="moderated"} !important;
6000}
6001
6002 .cPost.ipsModerated .cAuthorPane .cAuthorPane_author,
6003 .ipsApp .cPost.ipsModerated .ipsComment_meta,
6004 .cPost.ipsModerated .cAuthorPane_mobile{
6005 color: {theme="moderated"};
6006 }
6007 .focus-post-row .cPost.ipsModerated .ipsComment_controls{
6008 color: {theme="moderated_text"};
6009 }
6010
6011/* Selected colours */
6012.ipsComment.cPost.ipsComment_selected{
6013 background: {theme="selected"} !important;
6014}
6015
6016
6017
6018
6019
6020/*
6021 ----------------
6022 Comment controls: bar
6023 ----------------
6024*/
6025
6026.ipsItemControls,
6027html[dir="ltr"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types,
6028html[dir="rtl"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{
6029 border-color: {hextorgb="text_color" opacity="0.1"};
6030}
6031
6032html[dir="rtl"] .ipsReact_blurb,
6033html[dir="ltr"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{ margin-left: 5px; }
6034html[dir="ltr"] .ipsReact_blurb,
6035html[dir="rtl"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{ margin-right: 5px; }
6036
6037.focus-post-bar .cTopic .ipsItemControls{
6038 background: {theme="area_background_light"};
6039 border-color: {hextorgb="text_color" opacity="0.13"};
6040 border-style: solid;
6041 border-width: 1px 0 0 0;
6042 color: {theme="text_color"};
6043}
6044
6045@media screen and (min-width:768px){
6046
6047 .cTopic .ipsItemControls{
6048 padding: 1px;
6049 }
6050
6051 .focus-post-bar .cTopic .ipsItemControls{
6052 width: auto;
6053 margin-bottom: -10px;
6054 order: 1;
6055 }
6056
6057 html[dir='ltr'].focus-post-bar .cTopic .ipsItemControls{
6058 margin-left: -200px;
6059 margin-right: -15px;
6060 padding-left: 200px;
6061 margin-left: calc(var(--item-controls-offset) * -1);
6062 padding-left: var(--item-controls-offset);
6063 }
6064
6065 html[dir='rtl'].focus-post-bar .cTopic .ipsItemControls{
6066 margin-right: -200px;
6067 margin-left: -15px;
6068 padding-right: 200px;
6069 margin-right: calc(var(--item-controls-offset) * -1);
6070 padding-right: var(--item-controls-offset);
6071 }
6072
6073 .focus-post-bar .cTopic .cAuthorPane_info:after{
6074 content: '';
6075 display: block;
6076 height: 44px;
6077 }
6078
6079}
6080
6081@media screen and (max-width:767px){
6082
6083 .cPost .ipsItemControls{
6084 margin-bottom: 0;
6085 padding: 5px 0;
6086 }
6087
6088 .focus-post-bar .cPost .ipsItemControls{
6089 margin-left: -10px;
6090 margin-right: -10px;
6091 width: auto;
6092 padding: 5px;
6093 }
6094
6095}
6096
6097
6098/*
6099 ----------------
6100 Comment controls: buttons
6101 ----------------
6102*/
6103
6104.focus-post-buttons .cTopic .ipsComment_controls{
6105 color: {theme="normal_button_font"};
6106
6107 padding: 5px 0;
6108 line-height: 2.8rem;
6109 font-weight: bold;
6110 font-size: 0;
6111}
6112
6113 .focus-post-buttons .cTopic .ipsComment_controls > li{
6114 font-size: 1.2rem;
6115 vertical-align: top;
6116 }
6117
6118 html[dir="ltr"].focus-post-buttons .cTopic .ipsComment_controls > li{
6119 margin-right: 5px;
6120 }
6121
6122 html[dir="rtl"].focus-post-buttons .cTopic .ipsComment_controls > li{
6123 margin-left: 5px;
6124 }
6125
6126 .focus-post-buttons .cTopic .ipsComment_controls a,
6127 .focus-post-buttons .cTopic .ipsComment_controls .ipsButton{
6128 border-radius: 3px;
6129 text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
6130 background-color: {theme="normal_button"};
6131 border-color: rgba(0,0,0,0.2);
6132
6133 font-size: inherit;
6134 font-weight: inherit;
6135 color: inherit;
6136 margin: 0;
6137 padding: 0 0.8em;
6138 line-height: inherit;
6139 display: block;
6140 border-width: 0px;
6141 border-style: solid;
6142 text-shadow: inherit;
6143 vertical-align: top;
6144 position: relative;
6145 }
6146
6147 .focus-post-buttons .cTopic .ipsComment_controls a:after,
6148 .focus-post-buttons .cTopic .ipsComment_controls .ipsButton:after{
6149 content: '';
6150 position: absolute;
6151 top: 0; left: 0; right: 0; bottom: 0;
6152 border-width: 1px;
6153 border-style: inherit;
6154 border-color: inherit;
6155 border-radius: inherit;
6156 pointer-events: none;
6157 }
6158
6159 /* Hover */
6160 .focus-post-buttons .cTopic .ipsComment_controls a:hover:after,
6161 .focus-post-buttons .cTopic .ipsComment_controls .ipsButton:hover:after{
6162 background: rgba(255,255,255,0.2);
6163 }
6164
6165 /* Active */
6166 .focus-post-buttons .cTopic .ipsComment_controls a:active,
6167 .focus-post-buttons .cTopic .ipsComment_controls .ipsButton:active {
6168 transform: translateY(1px);
6169 }
6170
6171 .focus-post-buttons .cTopic .ipsComment_controls a:active:after,
6172 .focus-post-buttons .cTopic .ipsComment_controls .ipsButton:active:after {
6173 background: rgba(0,0,0,0.1);
6174 }
6175
6176
6177
6178/*
6179 ----------------
6180 Comment controls: button row
6181 ----------------
6182*/
6183
6184.focus-post-row .cTopic .ipsItemControls{
6185 padding: 0;
6186}
6187
6188.focus-post-row .cTopic .ipsComment_controls{
6189 color: {theme="link"};
6190 border-width: 0 0 0 1px;
6191 border-style: solid;
6192 border-color: {hextorgb="text_color" opacity="0.13"};
6193
6194 padding: 0;
6195 line-height: 44px;
6196 font-weight: bold;
6197 font-size: 0;
6198}
6199
6200html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls{
6201 border-width: 0 1px 0 0;
6202}
6203
6204@media screen and (max-width:767px){
6205 .focus-post-row .cTopic .ipsComment_controls,
6206 html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls{
6207 border-width: 0;
6208 }
6209}
6210
6211 .focus-post-row .cTopic .ipsComment_controls > li{
6212 font-size: 1.2rem;
6213 vertical-align: top;
6214 margin: 0;
6215 border-width: 0 1px 0 0;
6216 border-style: solid;
6217 border-color: inherit;
6218 }
6219
6220 html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls > li{
6221 border-width: 0 0 0 1px;
6222 }
6223
6224 .focus-post-row .cTopic .ipsComment_controls a,
6225 .focus-post-row .cTopic .ipsComment_controls .ipsButton{
6226 background: none;
6227
6228 font-size: inherit;
6229 font-weight: inherit;
6230 color: inherit;
6231 margin: 0;
6232 padding: 0 1em;
6233 line-height: inherit;
6234 display: block;
6235 border: 0;
6236 text-shadow: inherit;
6237 vertical-align: top;
6238 box-shadow: none;
6239 }
6240
6241 .focus-post-row .cTopic .ipsComment_controls a:hover,
6242 .focus-post-row .cTopic .ipsComment_controls .ipsButton:hover{
6243 color: inherit;
6244 background: {hextorgb="text_color" opacity="0.06"};
6245 }
6246
6247 /* Remove pseudo border */
6248 .focus-post-row .cTopic .ipsComment_controls .ipsButton:after{
6249 display: none;
6250 }
6251
6252
6253
6254/*
6255 ----------------
6256 - Reactions bar
6257 ----------------
6258*/
6259
6260.ipsReact{
6261 font-size: 1.2rem;
6262}
6263
6264/* Initial icon */
6265.ipsReact_button {
6266 filter: grayscale(100%);
6267 background-clip: padding-box !important;
6268}
6269
6270 .ipsReact_button img{
6271 max-width: 30px;
6272 max-height: 30px;
6273 }
6274
6275 /* Hover */
6276 body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button,
6277 body:not( .ipsApp_noTouch ) .ipsReact_types.ipsReact_types_active .ipsReact_button {
6278 border-color: {hextorgb="text_color" opacity="0.2"};
6279 background: {theme="area_background_light"};
6280 box-shadow: none;
6281
6282 transform: none;
6283 }
6284
6285 /* List of icons */
6286 .ipsReact_types ul{
6287 background: {theme="area_background_dark"};
6288 border: 0;
6289 }
6290
6291 /* When a reaction option is hovered */
6292 .ipsReact_types ul a{
6293 transform-origin: 50% 50%;
6294 }
6295
6296 .ipsReact_types ul a:hover {
6297 transform: scale(1);
6298 }
6299
6300/* Wrap excess reactions */
6301.ipsReact_reactions{ flex-wrap: wrap; }
6302
6303/* You reacted to this.. */
6304.ipsReact_blurb{
6305 display: flex;
6306 align-items: center;
6307
6308 padding: 5px 0;
6309}
6310
6311 .ipsReact_reactions + .ipsReact_overview{
6312 margin: 0 10px;
6313 order: -1;
6314 }
6315
6316 .ipsReact_reactCount {
6317 border-color: {hextorgb="text_color" opacity="0.2"};
6318 background: {theme="area_background_reset"};
6319 background-clip: padding-box;
6320 }
6321
6322 .ipsReact_reactCount > a,
6323 .ipsReact_reactCount > span{
6324 display: flex;
6325 align-items: center;
6326 }
6327
6328 .ipsReact_reactCount > span{
6329 padding: 0 !important;
6330 margin: 0 !important;
6331 background: none !important;
6332 }
6333
6334 .ipsReact_reactCount span:first-child{
6335 padding: 0 3px;
6336 line-height: 18px;
6337 }
6338
6339 .ipsReact_reactCount img{
6340 vertical-align: top;
6341 }
6342
6343 html[dir] .ipsReact_reactCount span:last-child {
6344 background: {hextorgb="text_color" opacity="0.1"};
6345 color: {theme="text_color"};
6346 margin: 0;
6347 line-height: 24px;
6348 }
6349
6350.ipsReact_unreact{
6351 background: {theme="area_background_dark"};
6352}
6353
6354/* Reaction ring when clicked */
6355a.ipsReact_reaction:after {
6356 box-shadow: inset 0 0 0 35px {hextorgb="text_color" opacity="0"};
6357}
6358@-webkit-keyframes reaction-click-ring {
6359 0% {
6360 opacity: 1;
6361 -webkit-transform: scale3d(0.4, 0.4, 1);
6362 transform: scale3d(0.4, 0.4, 1);
6363 }
6364 40% {
6365 box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6366 -webkit-transform: scale3d(1, 1, 1);
6367 transform: scale3d(1, 1, 1);
6368 opacity: 0.8;
6369 }
6370 100% {
6371 box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6372 opacity: 0;
6373 -webkit-transform: scale3d(1.2, 1.2, 1);
6374 transform: scale3d(1.2, 1.2, 1);
6375 }
6376}
6377
6378@keyframes reaction-click-ring {
6379 0% {
6380 opacity: 1;
6381 transform: scale3d(0.4, 0.4, 1);
6382 }
6383 40% {
6384 box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6385 transform: scale3d(1, 1, 1);
6386 opacity: 0.8;
6387 }
6388 100% {
6389 box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6390 opacity: 0;
6391 transform: scale3d(1.2, 1.2, 1);
6392 }
6393}
6394
6395
6396@media screen and (max-width:979px){
6397
6398 /* Bug fix: remove horizontal scrollbar */
6399 html[dir="ltr"] .ipsReact_unreact{
6400 right: -6px;
6401 }
6402 html[dir="rtl"] .ipsReact_unreact{
6403 left: -6px;
6404 }
6405 a.ipsReact_reaction::after{
6406 width: 40px;
6407 height: 40px;
6408 }
6409 html[dir="ltr"] a.ipsReact_reaction::after{
6410 margin: -20px 0 0 -20px;
6411 }
6412 html[dir="rtl"] a.ipsReact_reaction::after{
6413 margin: -20px -20px 0 0;
6414 }
6415
6416}
6417
6418
6419
6420/* Popular flag */
6421@media screen and (max-width:767px){
6422 .cPost.ipsComment.ipsComment_popular .ipsComment_popularFlag{
6423 top: -66px;
6424 }
6425}
6426
6427/* Share links and pinned badges */
6428.cShareLink, .ipsBadge.ipsBadge_icon, .ipsBadge.ipsBadge_icon.ipsBadge_small{ border-radius: 3px; }
6429
6430/* Pips */
6431.ipsPip{
6432 color: {theme="text_color"};
6433}
6434
6435/* Signatures */
6436div[data-role="memberSignature"] .ipsType_richText{
6437 font-size: 1.2rem;
6438 padding-bottom: 5px;
6439}
6440
6441 /* Remove signature padding if the comment controls bar exists */
6442 .focus-ccbar div[data-role="memberSignature"] .ipsType_richText,
6443 .focus-ccrow div[data-role="memberSignature"] .ipsType_richText{
6444 padding-bottom: 0;
6445 }
6446
6447 /* Remove extra spacing if comment controls bar doesn't exist */
6448 html:not(.focus-ccbar):not(.focus-ccrow) div[data-role="memberSignature"] .ipsHr{
6449 margin-top: 0;
6450 }
6451
6452 div[data-role="memberSignature"] a{
6453 color: inherit;
6454 }
6455
6456/* Moderated */
6457.ipsBox.ipsModerated {
6458 border-color: {theme="moderated_text"};
6459}
6460.cPost.ipsModerated .cAuthorPane,
6461.cPost.ipsModerated .ipsComment_content{
6462 background-color: transparent;
6463}
6464
6465
6466
6467/* Quote, code and embed */
6468.ipsQuote,
6469.ipsCode,
6470.ipsSpoiler, .ipsStyle_spoiler{
6471 background: {theme="area_background_light"};
6472 background-clip: padding-box !important;
6473 border-color: {hextorgb="area_background_dark" opacity="0.3"} !important;
6474 color: {theme="text_color"};
6475 border-radius: 3px;
6476}
6477/* .ipsQuote, .ipsSpoiler, .ipsStyle_spoiler{
6478 box-shadow: inset rgba(0,0,0,0.05) 0px 0px 5px;
6479}*/
6480
6481body.ipsApp .ipsQuote{
6482 border-width: 1px;
6483}
6484
6485 .ipsQuote .ipsQuote{
6486 background: none;
6487 margin-bottom: 8px;
6488 }
6489
6490{{if intval( settings.editor_paragraph_padding ) === 0}}
6491.ipsQuote{
6492 margin: 10px 0;
6493 padding-bottom: 10px;
6494}
6495.ipsQuote_closed{
6496 margin-bottom: -10px;
6497}
6498.ipsQuote_open{
6499 margin-bottom: 10px;
6500}
6501.ipsSpoiler_contents{
6502 padding: 10px 0;
6503}
6504{{endif}}
6505
6506.ipsQuote_citation,
6507.ipsSpoiler_header,
6508.ipsEmbedded_headerArea{
6509 background: {theme="area_background_dark"};
6510 color: #fff;
6511
6512 font-size: inherit;
6513 border-radius: inherit;
6514 margin: 5px -10px;
6515}
6516
6517 .ipsSpoiler .ipsSpoiler_header a,
6518 .ipsStyle_spoiler .ipsSpoiler_header a,
6519 .ipsSpoiler_header.ipsSpoiler_open [data-action="toggleSpoiler"]::before,
6520 .ipsQuote .ipsQuote_citation a,
6521 .ipsQuote_citation.ipsQuote_open [data-action="toggleQuote"]::before{
6522 color: inherit;
6523 }
6524
6525 .ipsSpoiler_header.ipsSpoiler_open [data-action="toggleSpoiler"]::before{
6526 opacity: 0.5;
6527 }
6528
6529 .ipsQuote_citation a[data-action="toggleQuote"]{
6530 font-weight: normal;
6531 }
6532
6533/* Embedded content */
6534iframe[data-embedContent]{
6535 background: {hextorgb="text_color" opacity="0.1"};
6536 border-color: {hextorgb="text_color" opacity="0.3"};
6537 min-height: 0;
6538 border-radius: 3px;
6539}
6540
6541iframe.ipsEmbed_finishedLoading[data-embedContent]{
6542 background-color: {hextorgb="text_color" opacity="0.1"};
6543 border-color: {hextorgb="text_color" opacity="0.3"};
6544}
6545
6546 .ipsRichEmbed{
6547 padding: 5px;
6548 }
6549
6550 .ipsRichEmbed_header,
6551 .ipsRichEmbed_moreInfo,
6552 .ipsApp .ipsRichEmbed_stats.ipsSpacer_top,
6553 .ipsRichEmbed_originalItem{
6554 border-color: {hextorgb="text_color" opacity="0.15"};
6555 }
6556
6557 .ipsRichEmbed_header{
6558 background: {theme="area_background_dark"};
6559 color: #fff;
6560 border-radius: 3px;
6561 border: 0;
6562 }
6563
6564 .ipsRichEmbed_originalItem{
6565 background-clip: padding-box;
6566 }
6567
6568 .ipsRichEmbed_author{
6569 color: inherit;
6570 opacity: 0.6;
6571 }
6572
6573 .ipsRichEmbed_openItem{
6574 color: inherit;
6575 opacity: 0.3;
6576 }
6577
6578 .ipsEmbedded_headerArea{
6579 border: 0;
6580 }
6581
6582 .ipsLayout_noBackground .ipsEmbedded_content{
6583 background: transparent;
6584 }
6585
6586 .ipsEmbedded_stats{ border-color: {hextorgb="text_color" opacity="0.08"}; }
6587
6588.ipsEmbedded_withImage .ipsEmbedded_image{
6589 border: 0;
6590 box-shadow: inset {hextorgb="text_color" opacity="0.3"} 0px 0px 0px 2px;
6591}
6592
6593
6594
6595body[data-role="internalEmbed"] {
6596 background: {theme="area_background_light"};
6597}
6598body.unloaded #ipsEmbedLoading {
6599 border-color: {hextorgb="text_color" opacity="0.15"};
6600 background: {theme="area_background_light"};
6601}
6602
6603@-webkit-keyframes dummy_anim {
6604 0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6605 50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6606 99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6607}
6608@-moz-keyframes dummy_anim {
6609 0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6610 50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6611 99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6612}
6613@-ms-keyframes dummy_anim {
6614 0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6615 50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6616 99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6617}
6618@-o-keyframes dummy_anim {
6619 0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6620 50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6621 99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6622}
6623@keyframes dummy_anim {
6624 0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6625 50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6626 99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6627}
6628
6629
6630
6631/* Polls */
6632.cPollVoteBar{
6633 background: {hextorgb="poll_bar" opacity="0.15"};
6634 box-shadow: inset {hextorgb="poll_bar" opacity="0.25"} 0px 0px 0px 1px;
6635}
6636
6637 /* Text on 0 percentage */
6638 .cPollVoteBar > span::after{
6639 color: {theme="poll_bar"};
6640 }
6641
6642/* Fix alignment of poll widget icon */
6643.ipsWidget[data-blockid^="app_forums_poll_"] .ipsWidget_title .ipsType_break{
6644 display: inline;
6645}
6646
6647/* Vertically align buttons in poll widget so they don't wrap poorly */
6648.ipsWidget_vertical[data-blockid^="app_forums_poll_"] .ipsToolList{
6649 display: block;
6650 float: none;
6651}
6652
6653 .ipsWidget_vertical[data-blockid^="app_forums_poll_"] .ipsToolList > li{
6654 float: none !important;
6655 margin: 0 0 5px 0 !important;
6656 text-align: center;
6657 }
6658
6659
6660/*
6661 ----------------
6662 - Questions
6663 ----------------
6664*/
6665
6666/* Force .ipsBox background */
6667.focus-answers > .ipsAreaBackground{
6668 background: transparent;
6669 padding: 0;
6670}
6671
6672/* Question title alignment */
6673html[dir='ltr'] .cRatingColumn_question{
6674 padding-left: 0 !important;
6675}
6676html[dir='rtl'] .cRatingColumn_question{
6677 padding-right: 0 !important;
6678}
6679.cRatingColumn_question + .ipsColumn_fluid{
6680 align-self: center;
6681}
6682
6683/* Mark as answer */
6684.cRatingColumn{
6685 color: {theme="text_color"};
6686}
6687
6688.cRatingColumn.ipsAreaBackground{
6689 background: none;
6690}
6691
6692 .cAnswerRate:not(.ipsType_positive):not(.ipsType_negative),
6693 .cAnswerRate:hover:not(.ipsType_positive):not(.ipsType_negative),
6694 span.cAnswerRate:not(.ipsType_positive):not(.ipsType_negative),
6695 span.cAnswerRate:hover:not(.ipsType_positive):not(.ipsType_negative){
6696 color: inherit;
6697 }
6698
6699 /* Green column */
6700 .cRatingColumn_on{
6701 background: #b2d599;
6702 color: #51873f;
6703 }
6704
6705
6706
6707 /* Mark as best answer */
6708 .cBestAnswerIndicator {
6709 background: #51873f;
6710 border-radius: 3px;
6711 margin: 0;
6712 }
6713 .cBestAnswerIndicator .fa-check:before{
6714 content: '\f091';
6715 }
6716 .cBestAnswerIndicator_off{
6717 background: {hextorgb="text_color" opacity="0.5"};
6718 }
6719 .cBestAnswerIndicator_off:hover {
6720 background: {hextorgb="text_color" opacity="0.65"};
6721 }
6722
6723
6724
6725 /* Vote arrows and number */
6726 .cAnswerRate,
6727 .cAnswerRating{
6728 width: 36px;
6729 line-height: 36px;
6730 font-size: 18px;
6731 }
6732
6733 /* Arrow size */
6734 .cAnswerRate{
6735 font-size: 30px;
6736 }
6737
6738
6739 /* Align icon in center */
6740 .cAnswerRate > .fa{
6741 line-height: inherit;
6742 vertical-align: top;
6743 }
6744
6745 .cAnswerRate > .fa:before{
6746 display: block;
6747 }
6748
6749 /* Reset defaults */
6750 html[dir="ltr"] .cAnswerRate,
6751 html[dir="rtl"] .cAnswerRate{
6752 left: 0;
6753 right: 0;
6754 }
6755
6756 .cAnswerRating,
6757 .cAnswerRate.cAnswerRate_up{
6758 margin: 0;
6759 }
6760
6761 .cAnswerRating{
6762 position: relative;
6763 }
6764
6765 .cAnswerRating:before,
6766 .cAnswerRate:before{
6767 content: '';
6768 position: absolute;
6769 top: 0; left: 0; right: 0; bottom: 0;
6770 border-radius: 3px;
6771 background: currentcolor;
6772 opacity: 0.15;
6773 }
6774
6775 .cAnswerRating:before{
6776 opacity: 0.06;
6777 }
6778
6779@media screen and (min-width: 768px){
6780
6781 /* Sticky icons */
6782 .cPostRating_controls{
6783 position: -webkit-sticky;
6784 position: sticky;
6785 top: 10px;
6786 padding-bottom: 10px;
6787 }
6788
6789 .cRatingColumn{
6790 box-sizing: content-box;
6791 width: 36px;
6792 }
6793
6794 .cRatingColumn li:not(:last-of-type){
6795 margin-bottom: 6px;
6796 }
6797
6798 /* Hide vote text on desktop */
6799 .cTopic .cRatingColumn > .ipsList_reset:before{
6800 display: none;
6801 }
6802
6803}
6804
6805@media screen and (max-width: 767px){
6806
6807 /* .ipsPageHeader rating */
6808 .cRatingColumn_question{
6809 box-sizing: content-box;
6810 width: 36px;
6811 padding: 0 !important;
6812 }
6813
6814 .cRatingColumn_question li:not(:last-of-type){
6815 margin-bottom: 6px;
6816 }
6817
6818 /* Place vote strip inside post */
6819 .ipsApp .focus-answers .cPostQuestion{
6820 display: flex;
6821 flex-direction: column;
6822 }
6823
6824 .focus-answers .cPostQuestion .cRatingColumn ~ .cAuthorPane_mobile{
6825 order: -2;
6826 }
6827
6828 .focus-answers .cPostQuestion .cRatingColumn{
6829 order: -1;
6830 border-bottom: 1px dashed {hextorgb="text_color" opacity="0.3"};
6831 }
6832
6833 .focus-answers .cPostQuestion .cRatingColumn ~ .ipsColumn .ipsComment_meta{
6834 margin-top: -41px;
6835 }
6836
6837 /* Vote as answer */
6838 .cPost .cRatingColumn{
6839 padding: 5px !important;
6840 margin-bottom: 0 !important;
6841 }
6842
6843 /* Icon alignment */
6844 .cTopic .cRatingColumn > .ipsList_reset{
6845 display: flex;
6846 align-items: center;
6847 }
6848
6849 /* Vote pseudo text */
6850 .cTopic .cRatingColumn > .ipsList_reset:before{
6851 font-weight: bold;
6852 text-transform: uppercase;
6853 font-size: 1rem;
6854 }
6855
6856 /* Mobile icon size: important is required to overwrite :hover on the trophy icon */
6857 .cPost .cRatingColumn .cAnswerRate,
6858 .cPost .cRatingColumn .cAnswerRating,
6859 .cPost .cRatingColumn .cBestAnswerIndicator{
6860 width: 30px;
6861 line-height: 30px !important;
6862 height: auto;
6863 }
6864
6865 /* Arrow size */
6866 .cPost .cRatingColumn .cAnswerRate{
6867 font-size: 30px;
6868 }
6869
6870 /* Count size */
6871 .cPost .cRatingColumn .cAnswerRating{
6872 font-size: 14px;
6873
6874 margin: 0;
6875 width: auto;
6876 padding: 0 10px;
6877 }
6878
6879 /* Bug fix */
6880 .cPost .cRatingColumn .cAnswerRate.cAnswerRate_up{
6881 top: auto;
6882 }
6883
6884 html[dir='ltr'] .cTopic .cRatingColumn > .ipsList_reset li:not(:nth-last-of-type(4)){
6885 padding-left: 5px;
6886 }
6887
6888 html[dir='rtl'] .cTopic .cRatingColumn > .ipsList_reset li:not(:nth-last-of-type(4)){
6889 padding-right: 5px;
6890 }
6891
6892 html[dir='ltr'] .cTopic .cRatingColumn > .ipsList_reset li:nth-last-of-type(4){
6893 margin-left: auto;
6894 order: 1;
6895 }
6896
6897 html[dir='rtl'] .cTopic .cRatingColumn > .ipsList_reset li:nth-last-of-type(4){
6898 margin-right: auto;
6899 }
6900
6901}
6902
6903
6904/*
6905 ----------------
6906 - Comments: comments.css
6907 - Comments should have no border, box-shadow or background (unless moderated or selected)
6908 ----------------
6909*/
6910
6911
6912/* This wraps comments and adds the .ipsBox styling */
6913#comments{
6914 padding: 15px;
6915}
6916
6917 #comments > .ipsPad:not(.ipsBox),
6918 #comments > .ipsPad:not(.ipsAreaBackground){
6919 padding: 0;
6920 }
6921
6922 /* Correctly align multi-mod without floats */
6923 #comments > .ipsButtonRow{
6924 display: flex;
6925 justify-content: flex-end;
6926 float: none;
6927 }
6928
6929 /* Remove .ipsBox styles from #comments if they're already wrapped in tabs */
6930 .ipsTabs_panels #comments.ipsBox{
6931 border-width: 0;
6932 box-shadow: none;
6933 background: none;
6934 }
6935
6936.ipsComment{
6937 background-color: {theme="area_background_reset"};
6938}
6939
6940 /* Remove background from comments if they're wrapped in a box already */
6941 .ipsBox .ipsComment{
6942 background-color: transparent;
6943 }
6944
6945/* Selected */
6946.ipsComment:not(.cPost).ipsComment_selected{
6947 box-shadow: none;
6948 background: {theme="selected"} !important;
6949 border: 0;
6950}
6951
6952.ipsComment.ipsComment_ignored{
6953 color: {hextorgb="text_color" opacity="0.4"};
6954}
6955
6956
6957 /* Reduce space between comments */
6958 .ipsComment:not(.cPost){
6959 margin: 0;
6960 }
6961
6962 .ipsComment:not(.cPost) .ipsComment_header + .ipsPad{
6963 padding-bottom: 0;
6964 }
6965
6966
6967/* Comment headers */
6968.ipsApp .ipsComment .ipsComment_header{
6969 background: {theme="secondary_title"};
6970 color: {theme="secondary_title_font"};
6971 border: 0;
6972 box-shadow: inset {hextorgb="text_color" opacity="0.1"} 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 1px 4px;
6973 border-radius: 3px;
6974 /* Clear floated avatar */
6975 overflow: hidden;
6976}
6977
6978 /* Make selected comment headers use normal text colour */
6979 .ipsApp .ipsComment.ipsComment_selected .ipsComment_header{
6980 background-color: {theme="selected"} !important;
6981 color: {theme="text_dark"};
6982 }
6983
6984 .ipsComment_header a{
6985 color: inherit;
6986 }
6987
6988 .ipsComment_header .ipsComment_author{
6989 margin: 0;
6990 }
6991
6992 .ipsComment_header .ipsType_light{
6993 color: inherit;
6994 opacity: 0.7;
6995 }
6996
6997/* Highlighted comments: Remove background and shadow since the header is styled */
6998.ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost),
6999.ipsComment_highlighted.ipsBox:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost),
7000.ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost) .ipsAreaBackground_reset{
7001 background-color: transparent;
7002 border: 0;
7003 box-shadow: none;
7004}
7005
7006/* Moderated comments */
7007.ipsComment.ipsModerated:not(.cPost){
7008 background: transparent;
7009}
7010
7011 .ipsApp .ipsComment.ipsModerated .ipsComment_header{
7012 background-color: {theme="moderated_text"};
7013 color: {theme="moderated"};
7014 }
7015
7016 .ipsModerated .ipsComment_header * {
7017 color: {theme="moderated"};
7018 }
7019
7020
7021/* Popular post ribbon */
7022.ipsComment.ipsComment_popular .ipsComment_popularFlag{
7023 color: {theme="featured"};
7024 background: currentColor;
7025}
7026
7027 .ipsComment.ipsComment_popular .ipsComment_popularFlag:after{
7028 border-top-color: currentColor;
7029 }
7030
7031 .ipsComment.ipsComment_popular .ipsComment_popularFlag .fa{
7032 color: #fff;
7033 }
7034
7035
7036/* New posts bar */
7037.ipsCommentUnreadSeperator{
7038 color: {theme="normal_button_font"};
7039 background: {theme="normal_button"};
7040
7041 height: 0.6em;
7042 margin: 1.4em 0;
7043 border: 0;
7044 border-radius: 2px;
7045 text-align: center;
7046 font-weight: bold;
7047 font-size: 10px;
7048 position: relative;
7049}
7050
7051 .ipsCommentUnreadSeperator:before{
7052 padding: 0 1.6em;
7053 line-height: 2.4em;
7054 border-radius: inherit;
7055 background: inherit;
7056 white-space: nowrap;
7057 position: absolute;
7058 left: 50%;
7059 top: 50%;
7060 {prefix="transform" value="translate(-50%,-50%)"}
7061 }
7062
7063
7064/* Popular comment headers */
7065.ipsComment:not( .ipsModerated ):not( .ipsComment_selected ).ipsComment_popular .ipsComment_header {
7066 border: 0;
7067}
7068
7069.ipsModerated .ipsAreaBackground_light,
7070.ipsModerated .ipsAreaBackground_reset{
7071 background: transparent;
7072}
7073
7074
7075/* Highlighted content */
7076#ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated):before,
7077#ipsfocus .cPost.ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane_mobile,
7078#ipsfocus .ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_header{
7079 background-color: {theme="post_highlight_border"};
7080}
7081
7082 #ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane .cAuthorPane_author,
7083 #ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_meta,
7084 #ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane_mobile,
7085 #ipsfocus .ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_header{
7086 color: {theme="post_highlight"};
7087 }
7088
7089
7090/* Post controls */
7091.ipsComment:not(.cPost) .ipsItemControls {
7092 padding: 10px 0;
7093}
7094
7095@media screen and (min-width:768px){
7096
7097 .ipsComment:not(.cPost) .ipsItemControls {
7098 margin-left: -15px;
7099 margin-right: -15px;
7100 width: auto;
7101 }
7102
7103}
7104
7105/*
7106 ----------------
7107 - Editor
7108 ----------------
7109*/
7110
7111.ipsApp textarea.cke_source,
7112html .cke_wysiwyg_frame, html .cke_wysiwyg_div{
7113 background-color: {theme="area_background_reset"};
7114}
7115
7116/* Bar background */
7117.cke .cke_top,
7118.ipsComposeArea div[data-ipseditor-toollist] .ipsAreaBackground_light{
7119 background: rgba(255,255,255,0.4);
7120}
7121
7122.cke .cke_top{
7123 border-bottom: 1px solid {hextorgb="focus_editor_color" opacity="0.25"};
7124}
7125
7126div[data-ipseditor]{
7127 border: 1px solid {hextorgb="focus_editor_color" opacity="0.25"};
7128}
7129
7130
7131
7132/* Editor border color. Border is required for inherited arrow */
7133.ipsComposeArea_editor,
7134.ipsComposeArea_unavailable .ipsComposeArea_editor{
7135 background: {theme="focus_editor"};
7136 border-color: {theme="focus_editor"};
7137 color: {theme="focus_editor_color"};
7138}
7139.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-width: 12px; top: 18px; }
7140html[dir="ltr"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:before,
7141html[dir="ltr"] .ipsComposeArea_unavailable.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-right-color: inherit; }
7142html[dir="rtl"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:before,
7143html[dir="rtl"] .ipsComposeArea_unavailable.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-left-color: inherit; }
7144
7145
7146
7147/* Minor fixes */
7148.ipsApp .ipsComposeArea_editor{
7149 padding: 0;
7150}
7151
7152.ipsApp .ipsComposeArea_withPhoto .ipsComposeArea_editor{
7153 padding: 4px;
7154}
7155
7156.ipsApp .ipsComposeArea_formControl label:not(.ipsField_unlimited){
7157 font-size: 1.3rem;
7158}
7159
7160.ipsComposeArea_editor label[for="check_auto_follow_toggle"]{
7161 line-height: 22px;
7162 display: inline-block;
7163}
7164
7165/* Remove defaults */
7166.ipsApp .cke_inner{
7167 background: transparent;
7168}
7169.ipsApp .cke_chrome{
7170 box-shadow: none;
7171}
7172
7173
7174
7175/* Editor text color */
7176.ipsApp .cke_contents,
7177.ipsComposeArea_dummy{
7178 color: {theme="text_color"};
7179}
7180
7181.ipsComposeArea_dummy{
7182 background-color: {theme="area_background_reset"};
7183}
7184
7185
7186
7187.ipsApp .cke_reset_all, .ipsApp .cke_reset_all *, .ipsApp .cke_reset_all a, .ipsApp .cke_reset_all textarea, .ipsComposeArea_attachments a{
7188 color: inherit;
7189}
7190
7191.ipsApp a.cke_button_off:hover,
7192.ipsApp a.cke_button_off:focus,
7193.ipsApp a.cke_button_off:active,
7194.ipsApp a.cke_button_disabled:hover,
7195.ipsApp a.cke_button_disabled:focus,
7196.ipsApp a.cke_button_disabled:active{
7197 background: {hextorgb="focus_editor_color" opacity="0.1"};
7198}
7199
7200.ipsApp .cke_toolbar_separator,
7201.ipsApp a.cke_button_on{
7202 background: {hextorgb="focus_editor_color" opacity="0.18"};
7203}
7204
7205.ipsApp a.cke_combo_button{
7206 border-color: {hextorgb="focus_editor_color" opacity="0.25"};
7207 background: {hextorgb="focus_editor_color" opacity="0.08"};
7208 box-shadow: none;
7209}
7210
7211 .ipsApp .cke_combo_off a.cke_combo_button:hover,
7212 .ipsApp .cke_combo_off a.cke_combo_button:focus{
7213 background: {hextorgb="focus_editor_color" opacity="0.1"};
7214 }
7215
7216 .ipsApp .cke_combo_off a.cke_combo_button:active,
7217 .ipsApp .cke_combo_on a.cke_combo_button {
7218 border-color: {hextorgb="focus_editor_color" opacity="0.4"};
7219 box-shadow: 0 1px 5px rgba(0,0,0,0.1) inset;
7220 background: {hextorgb="focus_editor_color" opacity="0.1"};
7221 }
7222
7223 .ipsApp .cke_combo_on a.cke_combo_button:hover,
7224 .ipsApp .cke_combo_on a.cke_combo_button:focus,
7225 .ipsApp .cke_combo_on a.cke_combo_button:active{
7226 box-shadow: 0 1px 5px rgba(0,0,0,0.1) inset;
7227 }
7228
7229.ipsApp .cke_button_arrow{ margin-top: 18px; }
7230
7231.ipsApp .cke_button_label,
7232.ipsApp .cke_combo_text{
7233 text-shadow: none;
7234}
7235
7236/* Dropdown arrow */
7237.ipsApp .cke_combo_arrow,
7238.ipsApp .cke_button_arrow{
7239 border-top-color: currentColor;
7240}
7241
7242
7243
7244/* Editor icons */
7245.cke_button_icon:before{
7246 width: 16px; height: 16px; line-height: 16px;
7247 font-size: 14px;
7248 text-align: center;
7249 display: inline-block;
7250 font-family: 'FontAwesome';
7251 font-style: normal;
7252 font-weight: normal;
7253 vertical-align: top;
7254 -webkit-font-smoothing: antialiased;
7255 -moz-osx-font-smoothing: grayscale;
7256 transform: translate(0,0);
7257}
7258
7259.ipsApp .cke_toolbox .cke_toolbar .cke_button__bgcolor_icon,
7260.ipsApp .cke_toolbox .cke_toolbar .cke_button__bold_icon,
7261.ipsApp .cke_toolbox .cke_toolbar .cke_button__bulletedlist_icon,
7262.ipsApp .cke_toolbox .cke_toolbar .cke_button__copy_icon,
7263.ipsApp .cke_toolbox .cke_toolbar .cke_button__cut_icon,
7264.ipsApp .cke_toolbox .cke_toolbar .cke_button__indent_icon,
7265.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipscode_icon,
7266.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsemoticon_icon,
7267.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipslink_icon,
7268.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspage_icon,
7269.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspreview_icon,
7270.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsquote_icon,
7271.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsspoiler_icon,
7272.ipsApp .cke_toolbox .cke_toolbar .cke_button__italic_icon,
7273.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyblock_icon,
7274.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifycenter_icon,
7275.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyleft_icon,
7276.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyright_icon,
7277.ipsApp .cke_toolbox .cke_toolbar .cke_button__numberedlist_icon,
7278.ipsApp .cke_toolbox .cke_toolbar .cke_button__outdent_icon,
7279.ipsApp .cke_toolbox .cke_toolbar .cke_button__paste_icon,
7280.ipsApp .cke_toolbox .cke_toolbar .cke_button__redo_icon,
7281.ipsApp .cke_toolbox .cke_toolbar .cke_button__removeformat_icon,
7282.ipsApp .cke_toolbox .cke_toolbar .cke_button__source_icon,
7283.ipsApp .cke_toolbox .cke_toolbar .cke_button__strike_icon,
7284.ipsApp .cke_toolbox .cke_toolbar .cke_button__subscript_icon,
7285.ipsApp .cke_toolbox .cke_toolbar .cke_button__superscript_icon,
7286.ipsApp .cke_toolbox .cke_toolbar .cke_button__textcolor_icon,
7287.ipsApp .cke_toolbox .cke_toolbar .cke_button__underline_icon,
7288.ipsApp .cke_toolbox .cke_toolbar .cke_button__undo_icon{
7289 background: none !important;
7290}
7291
7292.ipsApp .cke_toolbox .cke_toolbar .cke_button__bgcolor_icon:before{ content: '\f15c'; }
7293.ipsApp .cke_toolbox .cke_toolbar .cke_button__bold_icon:before{ content: '\f032'; }
7294.ipsApp .cke_toolbox .cke_toolbar .cke_button__bulletedlist_icon:before{ content: '\f0ca'; }
7295.ipsApp .cke_toolbox .cke_toolbar .cke_button__copy_icon:before{ content: '\f0c5'; }
7296.ipsApp .cke_toolbox .cke_toolbar .cke_button__cut_icon:before{ content: '\f0c4'; }
7297.ipsApp .cke_toolbox .cke_toolbar .cke_button__indent_icon:before{ content: '\f03c'; }
7298.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipscode_icon:before{ content: '\f121'; }
7299.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsemoticon_icon:before{ content: '\f118'; }
7300.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipslink_icon:before{ content: '\f0c1'; }
7301.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspage_icon:before{ content: '\f0f6'; }
7302.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspreview_icon:before{ content: '\f0f6'; }
7303.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsquote_icon:before{ content: '\f10e'; }
7304.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsspoiler_icon:before{ content: '\f06e'; }
7305.ipsApp .cke_toolbox .cke_toolbar .cke_button__italic_icon:before{ content: '\f033'; }
7306.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyblock_icon:before{ content: '\f039'; }
7307.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifycenter_icon:before{ content: '\f037'; }
7308.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyleft_icon:before{ content: '\f036'; }
7309.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyright_icon:before{ content: '\f038'; }
7310.ipsApp .cke_toolbox .cke_toolbar .cke_button__numberedlist_icon:before{ content: '\f0cb'; }
7311.ipsApp .cke_toolbox .cke_toolbar .cke_button__outdent_icon:before{ content: '\f03b'; }
7312.ipsApp .cke_toolbox .cke_toolbar .cke_button__paste_icon:before{ content: '\f0ea'; }
7313.ipsApp .cke_toolbox .cke_toolbar .cke_button__redo_icon:before{ content: '\f01e'; }
7314.ipsApp .cke_toolbox .cke_toolbar .cke_button__removeformat_icon:before{ content: '\f12d'; }
7315.ipsApp .cke_toolbox .cke_toolbar .cke_button__source_icon:before{ content: '\f1c9'; }
7316.ipsApp .cke_toolbox .cke_toolbar .cke_button__strike_icon:before{ content: '\f0cc'; }
7317.ipsApp .cke_toolbox .cke_toolbar .cke_button__subscript_icon:before{ content: '\f12c'; }
7318.ipsApp .cke_toolbox .cke_toolbar .cke_button__superscript_icon:before{ content: '\f12b'; }
7319.ipsApp .cke_toolbox .cke_toolbar .cke_button__textcolor_icon:before{ content: '\f1fc'; }
7320.ipsApp .cke_toolbox .cke_toolbar .cke_button__underline_icon:before{ content: '\f0cd'; }
7321.ipsApp .cke_toolbox .cke_toolbar .cke_button__undo_icon:before{ content: '\f0e2'; }
7322
7323
7324/* Insert other media button */
7325.ipsApp .ipsComposeArea_dropZone .ipsButton_light{
7326 background: #000;
7327 color: #fff;
7328 opacity: 0.6;
7329}
7330
7331.ipsApp .ipsComposeArea_dropZone .ipsButton_light:hover,
7332.ipsAttach_selection:hover{ opacity: 1; }
7333
7334 .ipsApp .ipsComposeArea_dropZone .ipsButton_light:after{
7335 display: none;
7336 }
7337
7338
7339
7340/* Drag drop attachments */
7341.ipsAttachment_dropZone.ipsDragging{
7342 background: transparent;
7343 border-color: {theme="text_color"};
7344}
7345
7346.ipsComposeArea_dropZone.ipsDragging{
7347 background: transparent;
7348 border-color: {theme="focus_editor_color"};
7349}
7350
7351/* Inset into post */
7352.ipsAttach_selection{
7353 color: #fff !important;
7354}
7355
7356
7357
7358/* Submit row */
7359.ipsComposeArea [data-ipsEditor] + [data-ipsEditor-toolList]{
7360 padding-bottom: 7px;
7361}
7362
7363/* Pasted content link */
7364.ipsComposeArea_editorPaste a{
7365 color: inherit;
7366}
7367
7368
7369/*
7370 ----------------
7371 - Inputs
7372 ----------------
7373*/
7374
7375/* Bug fix: Force colour instead of browser default */
7376input,
7377textarea{
7378 color: {theme="text_color"};
7379}
7380
7381.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"],
7382.ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"],
7383.ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"],
7384.ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"],
7385.ipsApp input[type="search"], .ipsApp input[type="tel"],
7386.ipsApp .ipsToolbox input, .ipsApp .ipsToolbox select, .ipsApp .ipsToolbox textarea {
7387 background-color: {theme="area_background_reset"};
7388 background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.05"} 100%);
7389 border-color: {hextorgb="text_color" opacity="0.35"};
7390 box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7391}
7392.CodeMirror,
7393html[dir="rtl"] .ipsApp .ipsField_autocomplete,
7394html[dir="rtl"] .ipsApp textarea,
7395html[dir="rtl"] .ipsApp input[type="text"],
7396html[dir="rtl"] .ipsApp input[type="password"],
7397html[dir="rtl"] .ipsApp input[type="datetime"],
7398html[dir="rtl"] .ipsApp input[type="datetime-local"],
7399html[dir="rtl"] .ipsApp input[type="date"],
7400html[dir="rtl"] .ipsApp input[type="month"],
7401html[dir="rtl"] .ipsApp input[type="time"],
7402html[dir="rtl"] .ipsApp input[type="week"],
7403html[dir="rtl"] .ipsApp input[type="number"],
7404html[dir="rtl"] .ipsApp input[type="email"],
7405html[dir="rtl"] .ipsApp input[type="url"],
7406html[dir="rtl"] .ipsApp input[type="search"],
7407html[dir="rtl"] .ipsApp input[type="tel"] {
7408 border-color: {hextorgb="text_color" opacity="0.35"};
7409}
7410
7411.ipsApp textarea:focus, .ipsApp input[type="text"]:focus, .ipsApp input[type="password"]:focus,
7412.ipsApp input[type="datetime"]:focus, .ipsApp input[type="datetime-local"]:focus,
7413.ipsApp input[type="date"]:focus, .ipsApp input[type="month"]:focus, .ipsApp input[type="time"]:focus,
7414.ipsApp input[type="week"]:focus, .ipsApp input[type="number"]:focus, .ipsApp input[type="email"]:focus,
7415.ipsApp input[type="url"]:focus, .ipsApp input[type="search"]:focus, .ipsApp input[type="tel"]:focus,
7416.ipsApp input[type="color"]:focus {
7417 border-color: {hextorgb="text_color" opacity="0.45"};
7418 box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7419}
7420
7421.ipsApp textarea[disabled], .ipsApp input[type="text"][disabled], .ipsApp input[type="password"][disabled],
7422.ipsApp input[type="datetime"][disabled], .ipsApp input[type="datetime-local"][disabled],
7423.ipsApp input[type="date"][disabled], .ipsApp input[type="month"][disabled], .ipsApp input[type="time"][disabled],
7424.ipsApp input[type="week"][disabled], .ipsApp input[type="number"][disabled], .ipsApp input[type="email"][disabled],
7425.ipsApp input[type="url"][disabled], .ipsApp input[type="search"][disabled], .ipsApp input[type="tel"][disabled],
7426.ipsApp input[type="color"][disabled] {
7427 background-color: {theme="area_background_reset"};
7428}
7429
7430
7431
7432/*
7433 ----------------
7434 - Select menus
7435 ----------------
7436*/
7437
7438.ipsSelectTree{
7439 background-color: {theme="area_background_reset"};
7440 background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.05"} 100%);
7441 border-color: {hextorgb="text_color" opacity="0.35"};
7442 box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7443 color: {theme="text_color"};
7444}
7445
7446 .ipsSelectTree_placeholder{
7447 color: {hextorgb="text_color" opacity="0.5"};
7448 }
7449
7450 .ipsSelectTree_expand{
7451 color: inherit;
7452 }
7453
7454 .ipsSelectTree_active,
7455 .ipsSelectTree_nodes{
7456 border-color: {hextorgb="text_color" opacity="0.4"};
7457 }
7458
7459 .ipsSelectTree_nodes{
7460 background-color: {theme="area_background_reset"};
7461 background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7462 }
7463
7464 .ipsSelectTree_nodes [data-role="nodeList"]{
7465 background: {theme="area_background_reset"};
7466 border-color: {hextorgb="text_color" opacity="0.2"};
7467 }
7468
7469 .ipsSelectTree_nodes [data-role="nodeList"] li,
7470 html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"],
7471 html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"],
7472 .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"]{
7473 border-color: {hextorgb="text_color" opacity="0.1"};
7474 }
7475
7476 /* Hover */
7477 .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:hover:not(.ipsSelectTree_itemDisabled):not(.ipsSelectTree_selected){
7478 background: {theme="area_background_reset"};
7479 background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.08"} 0%, {hextorgb="text_color" opacity="0.08"} 100%);
7480 }
7481
7482 /* Active */
7483 .ipsSelectTree_selected{
7484 background: {theme="area_background_dark"};
7485 color: #fff;
7486 }
7487 /* Active tick */
7488 .ipsSelectTree_selected::after {
7489 color: inherit;
7490 }
7491
7492.ipsApp select{
7493 background-color: {theme="area_background_reset"};
7494 border-color: {hextorgb="text_color" opacity="0.35"};
7495 color: {theme="text_color"};
7496}
7497
7498 .ipsApp select:not([multiple]){
7499 background-image: url( "{resource="select_dropdown.png" app="core" location="global"}" ), linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7500 }
7501
7502 html[dir="rtl"] .ipsApp select:not( [multiple] ) {
7503 background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7504 }
7505
7506 .ui-datepicker-title select, .ui-datepicker-title option{
7507 color: {theme="text_color"};
7508 }
7509
7510
7511
7512/*
7513 ----------------
7514 - Checkboxes
7515 ----------------
7516*/
7517
7518 .ipsCustomInput > span {
7519 border-color: {theme="text_color"};
7520 background: {theme="area_background_reset"};
7521 }
7522
7523 /* Hover */
7524 .ipsCustomInput input:hover:not( :disabled ) + span {
7525 border-color: {theme="link"};
7526 }
7527
7528 .ipsCustomInput input:not( :checked ):disabled + span {
7529 background: {theme="area_background_reset"};
7530 }
7531
7532 .ipsCustomInput input:checked:disabled + span {
7533 background: {theme="area_background_reset"};
7534 border-color: {theme="text_color"};
7535 }
7536
7537 .ipsCustomInput input[type="checkbox"]:checked:disabled + span:after {
7538 color: {theme="text_color"};
7539 }
7540
7541 .ipsCustomInput input[type="radio"]:checked:disabled + span:after {
7542 background-color: {theme="text_color"};
7543 }
7544
7545 /* Active styles */
7546 .ipsCustomInput input:active:not( :checked ):not( :disabled ) + span,
7547 .ipsCustomInput input:active:checked:not( :disabled ) + span {
7548 background: {theme="area_background_reset"};
7549 background-image: linear-gradient(to bottom, {hextorgb="link" opacity="0.2"} 0%, {hextorgb="link" opacity="0.2"} 100%);
7550 }
7551
7552 /* Checked styles */
7553 .ipsCustomInput input:checked + span {
7554 border-color: {theme="link"};
7555 }
7556
7557 .ipsCustomInput input[type="checkbox"]:checked + span:after {
7558 color: {theme="link"};
7559 }
7560
7561 .ipsCustomInput input[type="radio"]:checked + span:after {
7562 background: {theme="link"};
7563 }
7564
7565 .ipsApp .ipsToggle:focus,
7566 .ipsApp .ipsCustomInput input:focus + span {
7567 border-color: {theme="link"};
7568 box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
7569 }
7570
7571 .ipsToggle,
7572 .ipsApp .ipsToggle:focus{
7573 border-color: {hextorgb="text_color" opacity="0.25"};
7574 }
7575
7576
7577
7578/*
7579 ----------------
7580 - Wizard
7581 ----------------
7582*/
7583
7584.ipsWizard:before{
7585 content: '';
7586 display: table;
7587}
7588
7589 .ipsWizard .ipsStepBar{
7590 margin: 10px 10px 0 10px;
7591 }
7592
7593 .ipsWizard .ipsAreaBackground{
7594 background: {theme="area_background_light"};
7595 }
7596
7597 .ipsWizard .ipsAreaBackground:not(.ipsToolList){
7598 background: transparent;
7599 }
7600
7601.ipsStepBar{
7602 background: {theme="area_background"};
7603 border-radius: 3px;
7604 position: relative;
7605 width: auto;
7606 display: block;
7607}
7608
7609 .ipsStepBar:before{
7610 content: '';
7611 position: absolute;
7612 top: 0; left: 0; right: 0; bottom: 0;
7613 border: 1px solid {hextorgb="text_color" opacity="0.2"};
7614 border-radius: inherit;
7615 pointer-events: none;
7616 z-index: 2;
7617 }
7618
7619/* Remove wizard image */
7620.ipsStepBar > .ipsStep > a,
7621.ipsStepBar > .ipsStep > span,
7622.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active:after {
7623 background-image: none !important;
7624}
7625
7626/* css Steps */
7627.ipsStepBar > .ipsStep:before,
7628.ipsStepBar > .ipsStep:after,
7629.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7630 content: '';
7631 display: block;
7632 height: 28px;
7633 width: auto;
7634 position: absolute;
7635 top: 0;
7636 left: 0 !important;
7637 right: 0 !important;
7638 border: 1px solid {hextorgb="text_color" opacity="0.4"};
7639 border-width: 0 1px 0 0;
7640 transform-origin: 0% 50%;
7641 transform: skewX(30deg);
7642 pointer-events: none;
7643}
7644
7645 /* Bottom half */
7646 .ipsStepBar > .ipsStep:after,
7647 .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7648 transform: skewX(-30deg);
7649 top: auto;
7650 bottom: 0;
7651 }
7652
7653 /* If first item is active, extend its width */
7654 .ipsStepBar > .ipsStep:first-child:before,
7655 .ipsStepBar > .ipsStep:first-child:after{
7656 width: calc(100% + 40px);
7657 }
7658
7659 html[dir='ltr'] .ipsStepBar > .ipsStep:first-child:before,
7660 html[dir='ltr'] .ipsStepBar > .ipsStep:first-child:after{
7661 left: auto !important;
7662 }
7663
7664 html[dir='rtl'] .ipsStepBar > .ipsStep:first-child:before,
7665 html[dir='rtl'] .ipsStepBar > .ipsStep:first-child:after{
7666 right: auto !important;
7667 }
7668
7669 /* RTL */
7670 html[dir='rtl'] .ipsStepBar > .ipsStep:before,
7671 html[dir='rtl'] .ipsStepBar > .ipsStep:after,
7672 html[dir='rtl'] .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7673 border-width: 0 0 0 1px;
7674 transform: skewX(-30deg);
7675 }
7676
7677 html[dir='rtl'] .ipsStepBar > .ipsStep:after,
7678 html[dir='rtl'] .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7679 transform: skewX(30deg);
7680 }
7681
7682 /* Active step */
7683 html[dir='ltr'] .ipsStepBar > .ipsStep.ipsStep_active{
7684 margin-left: -1px;
7685 }
7686 html[dir='rtl'] .ipsStepBar > .ipsStep.ipsStep_active{
7687 margin-right: -1px;
7688 }
7689
7690 .ipsStepBar > .ipsStep.ipsStep_active::before,
7691 .ipsStepBar > .ipsStep.ipsStep_active::after,
7692 .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7693 background: {theme="area_background_dark"};
7694 border-width: 0 1px;
7695 }
7696
7697
7698
7699.ipsStepBar > .ipsStep > a,
7700.ipsStepBar > .ipsStep > span{
7701 background-color: transparent;
7702 height: 56px;
7703 min-width: 0;
7704 padding: 11px 24px !important;
7705 z-index: 1;
7706}
7707
7708.ipsStepBar > .ipsStep.ipsStep_active > a,
7709.ipsStepBar > .ipsStep.ipsStep_active > span {
7710 color: #fff;
7711}
7712
7713
7714
7715/*
7716 ----------------
7717 - Minor Elements
7718 ----------------
7719*/
7720
7721/* Social sign-in buttons */
7722.ipsSocial{
7723 padding: 0 !important;
7724}
7725
7726/* Add blur behind modals */
7727.ipsModal{
7728 -webkit-backdrop-filter: blur(8px);
7729 backdrop-filter: blur(8px);
7730}
7731
7732/* Guest block at the bottom of topics */
7733.cGuestTeaser{ padding-left: 0; padding-right: 0; }
7734
7735@media screen and (max-width: 979px) {
7736 .cGuestTeaser .ipsGrid_span6{
7737 align-items: center;
7738 }
7739}
7740
7741/* Member cards: Viewing members of a club */
7742.ipsMemberCard {
7743 background: {theme="area_background_light"};
7744 border-color: {hextorgb="text_color" opacity="0.3"};
7745}
7746
7747/* Avatars */
7748.ipsUserPhoto {
7749 background-color: transparent;
7750 {{if !theme.rounded_photos}}
7751 border-radius: 0;
7752 {{endif}}
7753}
7754
7755a.ipsUserPhoto{
7756 color: inherit;
7757}
7758
7759 .ipsUserPhoto img{
7760 border-radius: inherit;
7761 }
7762
7763 .ipsUserPhoto:before,
7764 .ipsUserPhoto:after {
7765 content: "";
7766 display: block;
7767 box-sizing: border-box;
7768 pointer-events: none;
7769 position: absolute;
7770 left: 0px;
7771 top: 0px;
7772 right: 0px;
7773 bottom: 0px;
7774 width: auto; height: auto;
7775 border-radius: inherit;
7776 }
7777
7778 .ipsUserPhoto:before{
7779 box-shadow: rgba(0,0,0,0.1) 0px 3px 8px;
7780 }
7781
7782 .ipsUserPhoto:after{
7783 border: 1px solid currentColor;
7784 opacity: 0.3;
7785 }
7786
7787img[src*="default_photo"]{
7788 background: {theme="button_bar"};
7789 background-image: linear-gradient(to bottom, {hextorgb="pagination_active" opacity="0.12"} 0%, {hextorgb="pagination_active" opacity="0.12"} 100%);
7790}
7791
7792/* Thumbnail background */
7793.ipsNoThumb,
7794.ipsImageAttach_thumb{
7795 background-color: {theme="area_background_dark"};
7796}
7797
7798.ipsImageAttach_thumb{
7799 border-color: {hextorgb="text_color" opacity="0.12"};
7800}
7801
7802/* Photo thumbs */
7803.ipsThumb{
7804 border: 0;
7805 box-shadow: inset {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px;
7806}
7807
7808/* Attached images in posts */
7809.ipsImage_thumbnailed{
7810 border-color: {hextorgb="text_color" opacity="0.3"};
7811}
7812
7813 /* Default bug fix: Prevent large images on mobiles from creating horizontal scrollbar on mobiles */
7814 .cPost div[data-role="commentContent"] img.ipsImage_thumbnailed{
7815 max-width: 100%;
7816 }
7817
7818
7819
7820/* Sticky */
7821.ipsSticky{
7822 background: {theme="area_background_light"};
7823}
7824
7825 .ipsSticky.ipsSticky_top,
7826 .ipsSticky.ipsSticky_bottom{
7827 border-color: {hextorgb="text_color" opacity="0.1"};
7828 }
7829
7830
7831
7832hr.ipsHr{
7833 border-color: {hextorgb="text_color" opacity="0.08"};
7834}
7835
7836
7837
7838
7839/* Scrollbars */
7840.ipsScrollbar::-webkit-scrollbar-thumb {
7841 background-color: {hextorgb="text_color" opacity="0.4"};
7842}
7843 .ipsScrollbar.ipsScrollbar_light::-webkit-scrollbar-thumb {
7844 background-color: {hextorgb="area_background_reset" opacity="0.4"};
7845 }
7846
7847.ipsScrollbar::-webkit-scrollbar-track-piece {
7848 background-color: {hextorgb="text_color" opacity="0.08"};
7849}
7850
7851 .ipsScrollbar.ipsScrollbar_light::-webkit-scrollbar-track-piece {
7852 background-color: {hextorgb="area_background_reset" opacity="0.08"};
7853 }
7854
7855
7856/* Tooltips */
7857.ipsTooltip {
7858 background: rgba(10,10,10,0.8);
7859 border-color: rgba(10,10,10,0.8);
7860}
7861 .ipsTooltip.ipsTooltip_top:after { border-top-color: inherit; }
7862 .ipsTooltip.ipsTooltip_bottom:after { border-bottom-color: inherit; }
7863
7864
7865
7866/* Create new topic lock time */
7867.cCreateTopic_date i{
7868 top: 7px;
7869}
7870
7871/* "Cancel" text on new topic page */
7872.ipsTabs_content_form + .ipsAreaBackground{ color: {theme="primary_button"}; }
7873
7874
7875
7876
7877/* Tags */
7878.cToken,
7879.cToken.cToken_selected,
7880.ipsTags .ipsTag,
7881.ipsTags .ipsTag:hover {
7882 background: {theme="tag"};
7883 border-color: {theme="tag"};
7884}
7885
7886.ipsTags .ipsTag:hover{
7887 opacity: 0.8;
7888}
7889
7890 html[dir="ltr"] .ipsTags .ipsTag::before,
7891 html[dir="ltr"] .ipsTags .ipsTag:hover::before {
7892 border-bottom-color: inherit;
7893 border-left-color: inherit;
7894 }
7895
7896 html[dir="rtl"] .ipsTags .ipsTag::before,
7897 html[dir="rtl"] .ipsTags .ipsTag:hover::before {
7898 border-top-color: inherit;
7899 border-right-color: inherit;
7900 }
7901
7902 .ipsTags .ipsTag:after, .ipsTag_prefix:after{ background: {theme="area_background_reset"}; }
7903
7904 /* Remove tag */
7905 html[dir="ltr"] .ipsTag_remove{ right: 3px; }
7906 html[dir="rtl"] .ipsTag_remove{ left: 3px; }
7907 .ipsTag_remove{ background: rgba(0,0,0,0.1); }
7908 .ipsTag_remove:hover{ background: rgba(0,0,0,0.2); }
7909
7910/* Autocomplete tokens */
7911.cToken.cToken_selected{
7912 box-shadow: inset rgba(0,0,0,0.3) 0px 100px 0px;
7913}
7914
7915
7916
7917/*
7918 ----------------
7919 - Tabs
7920 ----------------
7921*/
7922
7923/* Large tabs */
7924.ipsTabs{
7925 color: #fff;
7926}
7927
7928 /* Tab colours */
7929 .ipsTabs_item,
7930 .ipsTabs_item .ipsType_light,
7931 .ipsTabs_item.ipsTabs_itemDisabled,
7932 .ipsTabs_item:hover:not(.ipsTabs_activeItem){
7933 color: inherit;
7934 }
7935
7936 .ipsTabs_item .ipsType_light{
7937 opacity: 0.6;
7938 }
7939
7940
7941 .ipsTabs_item{
7942 border-radius: 2px 2px 0 0;
7943 font-weight: bold;
7944 /* background: rgba(255,255,255,0.1); */
7945 }
7946
7947 .ipsTabs_item:hover:not(.ipsTabs_activeItem){
7948 /* background: rgba(255,255,255,0.2); */
7949 }
7950
7951
7952 /* Active */
7953 .ipsTabs_activeItem{
7954 background-color: {theme="area_background_reset"};
7955 }
7956
7957 .ipsTabs_activeItem,
7958 .ipsTabs_activeItem:hover{
7959 color: {theme="text_color"};
7960 }
7961
7962
7963 .ipsTabs.ipsTabs_contained{
7964 border-color: {hextorgb="text_color" opacity="0.2"};
7965 padding: 3px;
7966 padding-bottom: 0;
7967 }
7968
7969 .ipsTabs_panels.ipsTabs_contained {
7970 border-color: {hextorgb="text_color" opacity="0.2"};
7971 }
7972
7973 .ipsTabs_panels{
7974 background-color: rgba(18,18,18,0.8); }
7975 }
7976
7977 /* Make background transparent since there's already one on .ipsTabs_panels */
7978 .ipsTabs_panel{
7979 background-color: transparent;
7980 }
7981
7982
7983
7984/* Mini tabs */
7985.ipsWidget .ipsTabs_small{
7986 color: {hextorgb="text_color" opacity="0.7"};
7987}
7988
7989.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
7990 color: inherit;
7991 border-bottom: 2px solid {hextorgb="text_color" opacity="0.1"};
7992 background: none;
7993}
7994
7995 /* Hover */
7996 .ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ):hover{
7997 color: {theme="text_color"};
7998 border-color: {hextorgb="text_color" opacity="0.2"};
7999 }
8000
8001 /* Active */
8002 .ipsWidget .ipsTabs_small .ipsTabs_activeItem{
8003 color: {theme="link"};
8004 border-bottom: 2px solid {theme="link"};
8005 background: none;
8006 }
8007
8008
8009
8010@media screen and (max-width:767px){
8011
8012 .ipsTabs{
8013 color: {theme="text_color"};
8014 }
8015
8016 a.ipsTabs_activeItem{
8017 font-size: 1.3rem;
8018 text-decoration: underline;
8019 }
8020 .ipsTabs_item:not(.ipsTabs_activeItem){
8021 color: inherit !important;
8022 }
8023
8024 .ipsTabs {
8025 border-top: 0;
8026 }
8027
8028 .ipsTabs [data-action="expandTabs"],
8029 .ipsTabs.ipsTabs_small [data-action="expandTabs"] {
8030 color: inherit;
8031 /* Place arrow beneath mobile nav menu */
8032 z-index: 1;
8033 /* Fix alignment */
8034 margin: 0;
8035 top: 0;
8036 line-height: 38px;
8037 padding-top: 10px;
8038 }
8039
8040 .ipsTabs.ipsTabs_small [data-action="expandTabs"]{
8041 padding-top: 0;
8042 line-height: 32px;
8043 }
8044
8045 .ipsTabs.ipsTabs_small [data-action="expandTabs"] .fa{
8046 line-height: inherit;
8047 vertical-align: top;
8048 }
8049
8050 .ipsTabs:target,
8051 .ipsTabs.ipsTabs_showMenu{
8052 height: 48px;
8053 /* Other elements with a z-index of 1000 were showing on top */
8054 z-index: 1010;
8055 }
8056
8057 .ipsTabs.ipsTabs_small:target,
8058 .ipsTabs.ipsTabs_small.ipsTabs_showMenu{
8059 height: 32px;
8060 }
8061
8062 .ipsTabs:target [role="tablist"],
8063 .ipsTabs.ipsTabs_showMenu [role="tablist"] {
8064 background: {theme="area_background_reset"};
8065
8066 /* Fix alignment */
8067 left: 10px;
8068 right: 10px;
8069 top: 10px;
8070 }
8071
8072}
8073
8074
8075
8076/*
8077 ----------------
8078 - Popup Menus
8079 ----------------
8080*/
8081
8082.ipsAlert{
8083 background: {theme="area_background_reset"};
8084}
8085
8086.ipsMenu,
8087.ipsHovercard,
8088.ipsHovercard_loading {
8089 background: {theme="area_background_reset"};
8090 border-color: {theme="area_background_reset"};
8091 border-width: 0;
8092}
8093
8094.ipsMenu,
8095.ipsHovercard{
8096 box-shadow: {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px, 0px 7px 10px rgba(0,0,0,0.1), 0px 5px 20px rgba(0,0,0,0.1);
8097}
8098
8099 .ipsMenu,
8100 .ipsSideMenu_title,
8101 .ipsMenu_title,
8102 .ipsMenu_item > a,
8103 .ipsMenu_item > span,
8104 .ipsMenu_item > a:not(.ipsMenu_itemInline), .ipsMenu_item > span:not(.ipsMenu_itemInline){
8105 color: {theme="text_color"};
8106 }
8107 .ipsMenu_itemDisabled > a,
8108 .ipsMenu_itemDisabled > span{
8109 color: {hextorgb="text_color" opacity="0.6"};
8110 }
8111 .ipsMenu_title{
8112 background: {hextorgb="text_color" opacity="0.08"};
8113 font-weight: bold;
8114 }
8115 /* Hover */
8116 ul:not(.ipsMenu_keyNav) .ipsMenu_item:not(.ipsMenu_itemClicked):not(.ipsMenu_itemDisabled) a:not(.ipsMenu_itemInline):hover, .ipsMenu_item[data-selected] a, .ipsMenu_item[data-selected] span, .ipsMenu_item.ipsMenu_hover{
8117 background-color: {hextorgb="text_color" opacity="0.05"};
8118 }
8119
8120 .ipsMenu_sep{
8121 border-color: {hextorgb="text_color" opacity="0.1"};
8122 }
8123
8124 .ipsMenu.ipsMenu_topLeft:before,
8125 .ipsMenu.ipsMenu_topRight:before,
8126 .ipsMenu.ipsMenu_topCenter:before,
8127 .ipsHovercard_stemTop .ipsHovercard_stem:before,
8128 .ipsHovercard_loading:after{
8129 border-top-color: {hextorgb="text_color" opacity="0.25"};
8130 }
8131 .ipsMenu.ipsMenu_bottomRight:before,
8132 .ipsMenu.ipsMenu_bottomLeft:before,
8133 .ipsMenu.ipsMenu_bottomCenter:before,
8134 .ipsHovercard_stemBottom .ipsHovercard_stem:before{
8135 border-bottom-color: {hextorgb="text_color" opacity="0.25"};
8136 }
8137
8138 /* Register password hint */
8139 .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem {
8140 border-right-color: inherit;
8141 }
8142 .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:before {
8143 border-right-color: {hextorgb="text_color" opacity="0.25"};
8144 }
8145
8146 .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem {
8147 border-left-color: inherit;
8148 }
8149 .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:before {
8150 border-left-color: {hextorgb="text_color" opacity="0.25"};
8151 }
8152
8153 .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem {
8154 border-top-color: inherit;
8155 }
8156 .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:before {
8157 border-top-color: {hextorgb="text_color" opacity="0.25"};
8158 }
8159
8160 .ipsMenu.ipsMenu_topLeft:after,
8161 .ipsMenu.ipsMenu_topRight:after,
8162 .ipsMenu.ipsMenu_topCenter:after,
8163 .ipsHovercard_stemTop .ipsHovercard_stem { border-top-color: inherit; }
8164 .ipsMenu.ipsMenu_bottomRight:after,
8165 .ipsMenu.ipsMenu_bottomLeft:after,
8166 .ipsMenu.ipsMenu_bottomCenter:after,
8167 .ipsHovercard_stemBottom .ipsHovercard_stem { border-bottom-color: inherit; }
8168
8169 .ipsMenu:not( .ipsMenu_noStem ):after { border-width: 9px; }
8170 .ipsMenu:not( .ipsMenu_noStem ):before { border-width: 10px; }
8171 .ipsMenu.ipsMenu_topCenter:after { margin-left: -9px; }
8172 .ipsMenu.ipsMenu_topCenter:before { margin-left: -10px; }
8173 .ipsMenu.ipsMenu_bottomCenter:after { margin-left: -9px; }
8174 .ipsMenu.ipsMenu_bottomCenter:before { margin-left: -10px; }
8175
8176 .ipsMenu_headerBar, .ipsMenu_footerBar {
8177 background: linear-gradient(to bottom, {theme="area_background_reset"} 0%, {theme="area_background_light"} 100%);
8178 }
8179
8180 .ipsMenu_headerBar,
8181 .ipsMenu_footerBar {
8182 border-color: {hextorgb="text_color" opacity="0.15"};
8183 }
8184
8185 .ipsMenu_itemCount, .ipsSideMenu_itemCount {
8186 background: {theme="area_background_light"};
8187 color: {theme="text_color"};
8188 }
8189
8190 .ipsMenu_item:not( .ipsMenu_itemClicked ) a:hover .ipsMenu_itemCount,
8191 .ipsMenu_item:not( .ipsMenu_itemClicked ) button:hover .ipsMenu_itemCount {
8192 background: {theme="area_background_light"};
8193 }
8194
8195 .ipsSideMenu_itemActive .ipsSideMenu_itemCount {
8196 background: {hextorgb="text_color" opacity="0.2"};
8197 color: {theme="text_color"};
8198 }
8199
8200 .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a:before,
8201 .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span:before,
8202 .ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button:before {
8203 color: {hextorgb="text_color" opacity="0.1"};
8204 }
8205
8206.ipsAutocompleteMenu {
8207 background: {theme="area_background_reset"};
8208}
8209
8210 .ipsAutocompleteMenu_item[data-selected] {
8211 background: {theme="selected"};
8212 }
8213
8214 .ipsSideMenu_item{
8215 border-radius: 3px;
8216 }
8217
8218 .ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover, a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover, span.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover {
8219 background: {theme="area_background_light"};
8220 }
8221
8222 .ipsSideMenu_withChecks .ipsSideMenu_item a:after,
8223 .ipsSideMenu_withChecks a.ipsSideMenu_item:after,
8224 .ipsSideMenu_withChecks span.ipsSideMenu_item:after,
8225 .ipsSideMenu_withRadios .ipsSideMenu_item a:after,
8226 .ipsSideMenu_withRadios a.ipsSideMenu_item:after,
8227 .ipsSideMenu_withRadios span.ipsSideMenu_item:after{
8228 color: {hextorgb="text_color" opacity="0.2"};
8229 line-height: 20px;
8230 }
8231
8232.ipsSideMenu_itemActive a, a.ipsSideMenu_itemActive,
8233.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a,
8234.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a {
8235 background: {theme="area_background_dark"};
8236 /* color: #fff; */
8237}
8238
8239 .ipsSideMenu_withChecks .ipsSideMenu_itemActive a:after,
8240 .ipsSideMenu_withChecks a.ipsSideMenu_itemActive:after,
8241 .ipsSideMenu_withChecks span.ipsSideMenu_itemActive:after,
8242 .ipsSideMenu_withRadios .ipsSideMenu_itemActive a:after,
8243 .ipsSideMenu_withRadios a.ipsSideMenu_itemActive:after,
8244 .ipsSideMenu_withRadios span.ipsSideMenu_itemActive:after,
8245 .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a:after,
8246 .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span:not(.ipsSideMenu_noCheck):after,
8247 .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a:after,
8248 .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span:not(.ipsSideMenu_noCheck):after {
8249 color: inherit;
8250 }
8251
8252.ipsSideMenu_itemDisabled a, a.ipsSideMenu_itemDisabled {
8253 color: {hextorgb="text_color" opacity="0.6"};
8254}
8255
8256html[dir="ltr"] .ipsSideMenu_item + .ipsSideMenu_list,
8257html[dir="rtl"] .ipsSideMenu_item + .ipsSideMenu_list {
8258 border-color: {hextorgb="text_color" opacity="0.3"};
8259}
8260
8261.ipsSideMenu_subTitle{
8262 background: {hextorgb="text_color" opacity="0.08"};
8263 border-radius: 3px;
8264}
8265
8266/* Side menus such as Settings */
8267.ipsSideMenu_item a, a.ipsSideMenu_item{
8268 border-radius: 3px;
8269}
8270
8271 /* Fix blurry icons */
8272 .ipsSideMenu_item .fa:first-child {
8273 font-size: 14px;
8274 width: 20px;
8275 text-align: inherit;
8276 transform: translate(0,0);
8277 }
8278
8279
8280/* responsive - menus.css */
8281@media screen and (max-width: 767px) {
8282
8283 .ipsSideMenu {
8284 border-color: {hextorgb="text_color" opacity="0.1"};
8285 }
8286
8287 .ipsSideMenu .ipsSideMenu_mainTitle a {
8288 color: {theme="text_color"};
8289 }
8290
8291 .ipsSideMenu.ipsSideMenu_open .ipsSideMenu_mainTitle a,
8292 .ipsSideMenu:target .ipsSideMenu_mainTitle a {
8293 background: {theme="area_background_dark"};
8294 }
8295
8296 .ipsSideMenu.ipsSideMenu_open,
8297 .ipsSideMenu:target {
8298 background: {theme="area_background_reset"};
8299 }
8300
8301 .ipsSideMenu.ipsSideMenu_open .ipsSideMenu_title,
8302 .ipsSideMenu:target .ipsSideMenu_title {
8303 background: {theme="area_background_light"};
8304 }
8305
8306}
8307
8308
8309
8310/* Popup boxes (submit content) */
8311.ipsDialog > div{
8312 background: {theme="area_background_reset"};
8313}
8314
8315 .ipsDialog_title,
8316 a.ipsDialog_close{
8317 color: {theme="text_color"};
8318 }
8319
8320 .ipsDialog .ipsDialog_loading{
8321 background-color: {theme="area_background_reset"};
8322 color: {theme="text_color"};
8323 }
8324
8325 .ipsLoading::before{
8326 color: inherit;
8327 }
8328
8329
8330
8331/* Date picker */
8332.ui-datepicker{
8333 background: {theme="area_background_reset"};
8334}
8335
8336 .ui-datepicker-header{
8337 background: {theme="area_background_dark"};
8338 border-bottom-color: {theme="area_background_dark"};
8339 }
8340
8341 .ui-datepicker th{
8342 background: {hextorgb="text_color" opacity="0.15"};
8343 }
8344
8345 .ui-datepicker-today{
8346 background: {hextorgb="text_color" opacity="0.15"};
8347 }
8348
8349 .ui-datepicker td a:hover,
8350 .ui-datepicker-current-day{
8351 background: {hextorgb="text_color" opacity="0.1"};
8352 }
8353
8354
8355
8356/*
8357 ----------------
8358 - Advanced Search
8359 ----------------
8360*/
8361
8362#elSearchFilters{
8363 background: none;
8364 padding: 0;
8365}
8366
8367.cSearchMainBar{
8368 padding: 25px;
8369 background: {theme="area_background_dark"};
8370 color: rgba(255,255,255,0.5);
8371 border-radius: 3px;
8372 position: relative;
8373}
8374
8375 .cSearchMainBar a{
8376 color: #fff;
8377 }
8378
8379 .cSearchPretendButton{
8380 position: absolute;
8381 top: 50%;
8382 transform: translateY(-50%);
8383 }
8384
8385 .cSearchMainBar .ipsType_huge.fa{
8386 color: rgba(255,255,255,0.8);
8387 margin: 0;
8388 }
8389
8390 #elMainSearchInput{
8391 border: 0;
8392 box-shadow: none;
8393 }
8394
8395 @media screen and (min-width: 768px){
8396 #elMainSearchInput{
8397 padding: 18px !important;
8398 }
8399 }
8400
8401 .cSearchMainBar hr.ipsHr{
8402 display: none;
8403 }
8404
8405 #elSearchSubmit{
8406 margin-top: -44px;
8407 }
8408
8409/*
8410 ----------------
8411 - Profiles
8412 ----------------
8413*/
8414
8415header[data-role="profileHeader"]{
8416 position: relative;
8417}
8418
8419header[data-role="profileHeader"],
8420#elProfileHeader,
8421#elProfileHeader .ipsCoverPhoto_container{
8422 border-top-left-radius: inherit;
8423 border-top-right-radius: inherit;
8424}
8425
8426@media screen and (max-width:979px){
8427
8428 /* Cover Photos */
8429 .ipsCoverPhoto_photo {
8430 object-fit: cover;
8431 height: 100%;
8432 top: 0 !important;
8433 }
8434
8435 /* Fix header alignment with rtl */
8436 html[dir='rtl'] .cProfileHeader_name{
8437 float: none;
8438 }
8439
8440}
8441
8442
8443/* Cover photo: Follow and message buttons */
8444#elProfileHeader .ipsButton_primary{
8445 background: rgba(255,255,255,0.8);
8446 color: #222;
8447 box-shadow: rgba(0,0,0,0.3) 0px 0px 0px 1px;
8448}
8449
8450
8451/* Profile stats */
8452#elProfileStats{
8453 background: #111;
8454 font-size: 1.5rem;
8455 /* Stops main content from squashing up if these links overflow */
8456 overflow: hidden;
8457}
8458
8459 body.ipsApp #elProfileStats > ul:last-child > li{
8460 border-color: rgba(255,255,255,0.2);
8461 }
8462
8463 #elProfileStats .ipsType_minorHeading{
8464 color: inherit;
8465 opacity: 0.6;
8466 }
8467
8468 /* Unblur icon */
8469 #elProfileStats .ipsButton .fa{
8470 font-size: 14px;
8471 }
8472
8473
8474
8475/* Profile Columns */
8476#elProfileInfoColumn{
8477 background-color: rgba(18,18,18,0.6); }
8478 border-right: 1px solid {hextorgb="text_color" opacity="0.15"};
8479}
8480
8481 html[dir="rtl"] #elProfileInfoColumn{
8482 border-left: 1px solid {hextorgb="text_color" opacity="0.15"};
8483 border-right: 0;
8484 }
8485
8486 /* Make elProfileInfoColumn handle background colour */
8487 #elProfileInfoColumn > .ipsAreaBackground_light{
8488 background: transparent;
8489 }
8490
8491
8492@media screen and (max-width:979px){
8493
8494 #elProfileInfoColumn{
8495 margin: 0;
8496 border: 0;
8497 }
8498
8499 #elProfileInfoColumn + .ipsColumn{
8500 margin: 0;
8501 }
8502
8503}
8504
8505
8506@media screen and (min-width:768px){
8507
8508/* Profile name and group */
8509#elProfileHeader {
8510 text-shadow: none;
8511 font-size: 14px;
8512}
8513
8514 .cProfileHeader_name{
8515 padding-top: 0;
8516 padding-bottom: 0;
8517 }
8518
8519}
8520
8521@media screen and (max-width:767px){
8522
8523 /* Profile Columns - remove margin on tablets */
8524 html[dir="ltr"] .cProfileHeader_name,
8525 html[dir="rtl"] .cProfileHeader_name{
8526 margin: 0;
8527 }
8528
8529 /* Realign profile stats */
8530 #elProfileStats{
8531 text-align: center;
8532 padding: 0 !important;
8533 }
8534
8535 #elProfileStats ul {
8536 text-align: center;
8537 float: none;
8538 display: flex;
8539 align-items: center;
8540 flex-wrap: wrap;
8541 }
8542
8543 #elProfileStats > ul > li {
8544 padding: 12px 0 !important;
8545 margin: 0 !important;
8546 width: 50%;
8547
8548 flex: 1 1 auto;
8549 }
8550
8551 html[dir="ltr"] #elProfileStats > ul:last-child > li:last-child,
8552 html[dir="ltr"] #elProfileStats > ul:last-child > li:last-child,
8553 html[dir="ltr"] #elProfileStats > ul:last-child > li:nth-of-type(even),
8554 html[dir="rtl"] #elProfileStats > ul:last-child > li:nth-of-type(even){
8555 border-right: 0;
8556 border-left: 0;
8557 }
8558
8559 #elProfileStats > ul:last-child > li:not(:nth-child(1)):not(:nth-child(2)){
8560 border-top-width: 1px;
8561 border-top-style: solid;
8562 }
8563
8564}
8565
8566/* Make sure username stays white on-hover on popup cards */
8567.cUserHovercard .ipsPageHead_special a{
8568 color: inherit !important;
8569}
8570
8571/* Form row section (Edit profile) */
8572.ipsFieldRow_section {
8573 background: {theme="area_background_light"};
8574 color: {theme="text_color"};
8575}
8576
8577/* Neater reputation */
8578.cProfileSidebarBlock .cProfileRepScore{
8579 margin: -1px;
8580 border: 1px solid {hextorgb="text_color" opacity="0.3"};
8581}
8582
8583.cProfileRepScore .ipsType_minorHeading{
8584 color: inherit;
8585}
8586
8587/* Complete profile */
8588.ipsBox[data-controller="core.front.core.profileCompletion"]{
8589 margin-bottom: 15px;
8590}
8591
8592/* Remove background from Activity area */
8593#elUserContent .ipsBox .ipsAreaBackground_reset:not(.ipsModerated){
8594 background-color: transparent;
8595}
8596
8597
8598/*
8599 ----------------
8600 - Settings and ModCP Tables
8601 ----------------
8602*/
8603
8604.ipsTable th {
8605 background: {theme="area_background_dark"};
8606 color: #fff;
8607}
8608
8609.ipsTable td {
8610 border-color: {hextorgb="text_color" opacity="0.03"};
8611}
8612
8613.ipsTable_zebra tbody tr:nth-child( even ):not(.ipsTable_highlight),
8614.ipsTable_zebra tbody tr:nth-child(2n):not(.ipsTable_highlight):not(.ipsModerated){
8615 background: {theme="area_background_light"};
8616}
8617
8618 .ipsTable_zebra tbody tr:nth-child( even ):not(.ipsTable_highlight) td {
8619 border-color: {hextorgb="text_color" opacity="0.03"};
8620 }
8621
8622.ipsTable tr[data-tableClickTarget]:hover {
8623 background: {theme="area_background"} !important;
8624}
8625
8626.ipsTable_highlight {
8627 background: {theme="selected"};
8628}
8629
8630 .ipsTable_highlight .ipsCommentCount {
8631 background-color: {theme="area_background_dark"};
8632 color: #fff;
8633 }
8634
8635 html[dir="ltr"] .ipsTable_highlight .ipsCommentCount:after {
8636 border-color: transparent {theme="area_background_dark"} transparent transparent;
8637 }
8638 html[dir="rtl"] .ipsTable_highlight .ipsCommentCount:after {
8639 border-color: transparent transparent transparent {theme="area_background_dark"};
8640 }
8641
8642.ipsTable_sortable:hover {
8643 background: rgba(0,0,0,0.06);
8644}
8645
8646.ipsTable_sortable .ipsTable_sortIcon:after {
8647 color: inherit;
8648}
8649
8650.ipsTable_sortable.ipsTable_sortableActive {
8651 background: {theme="area_background_dark"};
8652 background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
8653}
8654
8655 .ipsTable_sortable.ipsTable_sortableActive .ipsTable_sortIcon:after {
8656 color: inherit;
8657 }
8658
8659.ipsTable.ipsMatrix thead th {
8660 background: {theme="area_background_dark"};
8661}
8662
8663.ipsTable.ipsMatrix .ipsMatrix_subHeader {
8664 background: {theme="area_background_light"};
8665 color: {theme="text_color"};
8666}
8667
8668.ipsTable.ipsMatrix .ipsMatrix_error {
8669 background: {theme="moderated"};
8670}
8671
8672.ipsTable.ipsMatrix .ipsMatrix_highlighted {
8673 background: {theme="selected"};
8674}
8675
8676
8677/*
8678 ----------------
8679 - Blogs
8680 ----------------
8681*/
8682
8683/* Fix columns on tablets */
8684@media (max-width: 979px){
8685 .cBlog_grid .cBlog_grid_item{
8686 flex: 1 0 100%;
8687 }
8688}
8689
8690/* Index page summary */
8691.cBlog_grid .cBlog_grid_item__snippet{
8692 font-family: inherit;
8693}
8694
8695@media (min-width: 980px){
8696 .cBlog_grid .cBlog_grid_row--primary .cBlog_grid_item__title{
8697 font-size: 26px;
8698 }
8699}
8700
8701/* Force ipsBox background */
8702.cBlogList{
8703 background: none;
8704}
8705
8706 .cBlogList .ipsDataItem{
8707 margin: 0;
8708 }
8709
8710 html[dir="ltr"] .cBlogInfo,
8711 html[dir="rtl"] .cBlogInfo{
8712 border-color: {hextorgb="text_color" opacity="0.1"};
8713 }
8714
8715@media screen and (min-width:768px){
8716 .cBlogInfo_content{
8717 min-height: 80px;
8718 }
8719}
8720
8721/* More gradient */
8722.cBlogInfo_content::after{
8723 pointer-events: none;
8724 background-image: linear-gradient(to bottom, {hextorgb="area_background_reset" opacity="0"} 0%, {hextorgb="area_background_reset" opacity="1"} 100%);
8725}
8726
8727.cBlogView_entry{
8728 border-bottom-color: {hextorgb="text_color" opacity="0.25"};
8729}
8730
8731/* Remove the maintitle from the Blog index page on the Wrapped framework since it's not possible to add the box variables */
8732[data-pageapp="blog"][data-pagecontroller="browse"] .ipsHeaderButtons ~ .ipsBox .ipsType_sectionTitle{
8733 display: none;
8734}
8735
8736
8737
8738/*
8739 ----------------
8740 - Leaderboard
8741 ----------------
8742*/
8743
8744.cPastLeaders_cell:after{
8745 color: inherit;
8746 opacity: 0.2;
8747}
8748
8749.cPopularItem_stats{
8750 color: {theme="text_light"};
8751}
8752
8753 .cPopularItem_stats a{
8754 color: inherit;
8755 }
8756
8757html[dir="ltr"] .cPopularItem > div:first-child,
8758html[dir="rtl"] .cPopularItem > div:first-child,
8759html[dir="ltr"] .cPopularItem > div:last-child,
8760html[dir="rtl"] .cPopularItem > div:last-child,
8761.cPastLeaders_title::before {
8762 border-color: {hextorgb="text_color" opacity="0.1"};
8763}
8764
8765
8766.cPastLeaders_title span{
8767 background: {theme="area_background_reset"};
8768}
8769
8770/* Revert flex layout */
8771.cTopMembers_member .ipsStreamItem_title{
8772 display: block !important;
8773}
8774
8775/* Add margin below Top Members title */
8776#ipsTabs_elTabBar_elTabmembers_panel .ipsType_sectionHead{
8777 margin-bottom: 1em;
8778}
8779
8780
8781
8782/*
8783 ----------------
8784 - Gallery
8785 ----------------
8786*/
8787
8788/* Upload images: Choose album */
8789.cGalleryChooseAlbum_listItem {
8790 background: {theme="area_background"};
8791 border-color: {hextorgb="text_color" opacity="0.15"};
8792}
8793
8794 a.cGalleryChooseAlbum_listItem{
8795 color: inherit;
8796 }
8797
8798 .cGalleryChooseAlbum_listItem:not([data-disabled]):after {
8799 color: inherit;
8800 }
8801
8802 .cGalleryChooseAlbum_listItem:not([data-disabled]):hover {
8803 border-color: {hextorgb="text_color" opacity="0.3"};
8804 }
8805
8806/* Slideshow wrap */
8807#elGalleryHeader{
8808 margin: 0 0 15px 0;
8809}
8810
8811.cGalleryCats .cGalleryTrimmedImage{
8812 background-color: {theme="area_background_dark"};
8813}
8814
8815
8816/* Redesigned album thumbnails */
8817
8818 /* Remove default */
8819 .cGalleryCats > .ipsGrid{
8820 margin: 0;
8821 }
8822
8823.cGalleryCats .cGalleryTrimmedImage{
8824 box-shadow: inset {hextorgb="text_color" opacity="0.15"} 0px 0px 0px 1px, rgba(0,0,0,0.15) 0px 3px 8px;
8825 min-height: 220px;
8826 border-radius: 3px;
8827 text-align: center;
8828}
8829
8830 .cGalleryCat > a::before{
8831 background: linear-gradient(to top,
8832 rgba(0,0,0,1) 0%,
8833 rgba(0,0,0,0.738) 19%,
8834 rgba(0,0,0,0.541) 34%,
8835 rgba(0,0,0,0.382) 47%,
8836 rgba(0,0,0,0.278) 56.5%,
8837 rgba(0,0,0,0.194) 65%,
8838 rgba(0,0,0,0.126) 73%,
8839 rgba(0,0,0,0.075) 80.2%,
8840 rgba(0,0,0,0.042) 86.1%,
8841 rgba(0,0,0,0.021) 91%,
8842 rgba(0,0,0,0.008) 95.2%,
8843 rgba(0,0,0,0.002) 98.2%,
8844 rgba(0,0,0,0) 100%);
8845 height: 140px;
8846 opacity: 0.75;
8847
8848 }
8849
8850 .cGalleryCat .ipsType_sectionHead,
8851 .cGalleryCat .cGalleryCat_info{
8852 text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
8853 }
8854
8855 .cGalleryCat .ipsType_sectionHead{
8856 width: calc(100% - 14px);
8857 bottom: 30px;
8858 }
8859
8860 .cGalleryCat .cGalleryCat_info{
8861 display: flex;
8862 align-items: center;
8863 justify-content: center;
8864 bottom: 10px;
8865 }
8866
8867 .cGalleryCat .cGalleryCat_info > li{
8868 margin: 0 8px !important;
8869 white-space: nowrap;
8870 flex: 0 0 auto;
8871 }
8872
8873 .cGalleryCat .cGalleryCat_info > li:first-child{
8874 position: static;
8875 overflow: hidden;
8876 text-overflow: ellipsis;
8877 flex: 1 1 auto;
8878 }
8879
8880 .cGalleryCat .cGalleryCat_info > li:empty{
8881 display: none;
8882 }
8883
8884/* Masonry */
8885.cGalleryPatchwork_item{
8886 border-radius: 3px;
8887 text-shadow: rgba(0,0,0,0.7) 0px 1px 3px;
8888}
8889
8890 /* Remove hover effect */
8891 .cGalleryPatchwork_item:hover {
8892 transform: none;
8893 z-index: auto;
8894 }
8895
8896 /* Border */
8897 .cGalleryPatchwork_item:after{
8898 content: '';
8899 position: absolute;
8900 top: 0; left: 0; right: 0; bottom: 0;
8901 border: 1px solid {hextorgb="text_color" opacity="0.1"};
8902 pointer-events: none;
8903 border-radius: inherit;
8904 }
8905
8906 .cGalleryPatchwork_item > a:before{
8907 content: '';
8908 position: absolute;
8909 top: 0; left: 0; right: 0;
8910 height: 120px;
8911 max-height: 100%;
8912 pointer-events: none;
8913 z-index: 1;
8914 background: linear-gradient(to bottom,
8915 rgba(0,0,0,1) 0%,
8916 rgba(0,0,0,0.738) 19%,
8917 rgba(0,0,0,0.541) 34%,
8918 rgba(0,0,0,0.382) 47%,
8919 rgba(0,0,0,0.278) 56.5%,
8920 rgba(0,0,0,0.194) 65%,
8921 rgba(0,0,0,0.126) 73%,
8922 rgba(0,0,0,0.075) 80.2%,
8923 rgba(0,0,0,0.042) 86.1%,
8924 rgba(0,0,0,0.021) 91%,
8925 rgba(0,0,0,0.008) 95.2%,
8926 rgba(0,0,0,0.002) 98.2%,
8927 rgba(0,0,0,0) 100%);
8928 transition: all ease-in-out 0.2s;
8929 opacity: 0.7;
8930 }
8931
8932 .cGalleryPatchwork_item > a:hover:before{
8933 opacity: 0.1;
8934 }
8935
8936 /* Neatly align avatar and image name */
8937 .cGalleryPatchwork_item .ipsPhotoPanel{
8938 background: none;
8939 display: flex;
8940 align-items: center;
8941
8942 line-height: 17px;
8943 height: auto;
8944 padding: 7px !important;
8945 }
8946
8947 .cGalleryPatchwork_item .ipsUserPhoto_mini{
8948 width: 30px;
8949 height: 30px;
8950 }
8951
8952 html[dir="ltr"] .cGalleryPatchwork_item .ipsPhotoPanel.ipsPhotoPanel_mini > div{
8953 margin-left: 7px;
8954 }
8955
8956 html[dir="rtl"] .cGalleryPatchwork_item .ipsPhotoPanel.ipsPhotoPanel_mini > div{
8957 margin-right: 7px;
8958 }
8959
8960 .cGalleryPatchwork_item .ipsPhotoPanel,
8961 .cGalleryPatchwork_comments{
8962 z-index: 2;
8963 /* transition: all ease-in-out 0.2s; */
8964 }
8965 /*
8966 .cGalleryPatchwork_item > a:hover .ipsPhotoPanel,
8967 .cGalleryPatchwork_item > a:hover .cGalleryPatchwork_comments{
8968 opacity: 0.3;
8969 } */
8970
8971 .cGalleryPatchwork_item [data-role="moderation"]{
8972 z-index: 3;
8973 }
8974
8975
8976
8977/* Lightbox */
8978
8979.elGalleryImage .ipsButton.ipsButton_link{
8980 color: #fff;
8981}
8982
8983 .elGalleryImage .ipsPromote .ipsPromote_icon{
8984 background: rgba(255,255,255,0.2);
8985 }
8986
8987 [data-role="toggleFullscreen"]::before{
8988 font-family: FontAwesome;
8989 content: "\f065";
8990 }
8991
8992.cGalleryLightbox_info{
8993 background: {theme="area_background_reset"};
8994}
8995
8996 .cGalleryLightbox_info .ipsComposeArea [data-ipsEditor] + [data-ipsEditor-toolList]{
8997 padding-bottom: 7px;
8998 }
8999
9000 .cGalleryLightbox_info .cGalleryExif{
9001 margin-bottom: 5px;
9002 }
9003
9004 .cGalleryLightbox_info #comments{
9005 background: none;
9006 box-shadow: none;
9007 border: 0;
9008 border-radius: 0;
9009 }
9010
9011 /* Pagination spacing */
9012 .cGalleryLightbox_info .ipsPagination ~ .ipsPagination{
9013 margin: 0 0 10px 0 ;
9014 }
9015
9016
9017/* Large image slider */
9018#elGalleryImage{
9019 background: transparent;
9020}
9021
9022 .cGalleryViewImage img{
9023 box-shadow: 0px 5px 20px rgba(0,0,0,0.2);
9024 }
9025
9026 .cGalleryViewImage:after{
9027 content: '';
9028 position: absolute;
9029 top: 0; left: 0; right: 0; bottom: 0;
9030 pointer-events: none;
9031 border: 1px solid {hextorgb="text_color" opacity="0.15"};
9032 }
9033
9034 /* To remove the image shadow.. */
9035 /*
9036 .cGalleryViewImage img{ box-shadow: none; }
9037 .cGalleryViewImage:after{ display: none; }
9038 */
9039
9040
9041
9042 #elGalleryImageNav a{
9043 background: {hextorgb="text_color" opacity="0.18"};
9044 border-radius: 3px;
9045 padding: 0;
9046 line-height: 60px;
9047 width: 60px;
9048 font-size: 40px;
9049 text-align: center;
9050 }
9051
9052 #elGalleryImageNav a:hover{
9053 background: {hextorgb="text_color" opacity="0.4"};
9054 }
9055
9056 html[dir="ltr"] #elGalleryImageNav_prev,
9057 html[dir="rtl"] #elGalleryImageNav_next {
9058 left: 5px;
9059 }
9060 html[dir="rtl"] #elGalleryImageNav_prev,
9061 html[dir="ltr"] #elGalleryImageNav_next {
9062 right: 5px;
9063 }
9064
9065 #elGalleryImageNav .fa,
9066 #elGalleryImageNav .fa:before{
9067 display: block;
9068 line-height: inherit;
9069 }
9070
9071
9072 /* Thumbnail navigation */
9073 #elGalleryNav{
9074 background: {theme="area_background_light"};
9075 color: {theme="text_light"};
9076 border: 1px solid {hextorgb="text_color" opacity="0.1"};
9077 border-width: 1px 0 0 0;
9078 border-bottom-left-radius: inherit;
9079 border-bottom-right-radius: inherit;
9080 padding-top: 20px;
9081 padding-bottom: 20px;
9082 }
9083
9084 #elGalleryNav a[data-action]{
9085 color: {theme="text_color"};
9086 width: 26px;
9087 display: block;
9088 }
9089
9090 #elGalleryNav .fa{
9091 display: block;
9092 line-height: inherit;
9093 }
9094
9095 /* Bug fix due to poor HTML. A div is within a paragraph */
9096 #elGalleryNav p{
9097 margin: 0;
9098 }
9099 #elGalleryNav .ipsType_reset{
9100 margin-top: 10px;
9101 }
9102
9103 /* Bug fix for alignment */
9104 #elGalleryNav li{
9105 vertical-align: top;
9106 }
9107
9108 .cGalleryAlbumSlider li{
9109 width: 46px;
9110 height: 46px;
9111 margin: 2px;
9112 border: 0;
9113 border-radius: 3px;
9114 position: relative;
9115 }
9116
9117 .cGalleryAlbumSlider li a{
9118 border: 1px solid {hextorgb="text_color" opacity="0.3"};
9119 border-radius: inherit;
9120 }
9121
9122 .cGalleryAlbumSlider li a:hover{
9123 background: rgba(255,255,255,0.12);
9124 }
9125
9126 /* Active thumb in slider */
9127 .cGalleryAlbumSlider li.cGalleryAlbumSlider_active a{
9128 border: 2px solid {hextorgb="text_color" opacity="0.9"};
9129 }
9130
9131 /* Placeholder thumbs */
9132 .cGalleryAlbumSlider .ipsAreaBackground{
9133 background: {hextorgb="text_color" opacity="0.15"};
9134 }
9135
9136/* Bug fix: The br which spaces info and comments is removed during ajax navigation between images */
9137#elGalleryHeader + section[data-role="imageInfo"]{
9138 margin-bottom: 15px;
9139}
9140
9141
9142
9143/* Submit images */
9144.cGallerySteps > li:before {
9145 color: #fff;
9146 background: {theme="text_color"};
9147}
9148
9149 .cGallerySteps > li span,
9150 .cGallerySteps > li a {
9151 color: {theme="text_color"};
9152 }
9153
9154 .cGallerySteps > li span:before,
9155 .cGallerySteps > li span:after,
9156 .cGallerySteps > li a:before,
9157 .cGallerySteps > li a:after {
9158 background: {theme="text_color"};
9159 }
9160
9161 /* Done steps */
9162 .cGallerySteps > li.cGallerySteps_done:before,
9163 .cGallerySteps > li.cGallerySteps_done span:after,
9164 .cGallerySteps > li.cGallerySteps_done + li span:before,
9165 .cGallerySteps > li.cGallerySteps_done a:after,
9166 .cGallerySteps > li.cGallerySteps_done + li a:before,
9167 .cGallerySteps > li.cGallerySteps_active:before {
9168 background: #5a895c;
9169 }
9170
9171 .cGallerySteps > li.cGallerySteps_done span,
9172 .cGallerySteps > li.cGallerySteps_active span,
9173 .cGallerySteps > li.cGallerySteps_done a,
9174 .cGallerySteps > li.cGallerySteps_active a {
9175 color: #5a895c;
9176 }
9177
9178
9179
9180/* Step 1: Choose album */
9181 #elGallerySubmit_albumChooser > li > div {
9182 border-color: {hextorgb="text_color" opacity="0.1"};
9183 }
9184
9185 #elGallerySubmit_albumChooser > li > div:hover {
9186 background: {theme="area_background_light"};
9187 }
9188
9189 #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div {
9190 background: {theme="step_background"};
9191 }
9192
9193 #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before,
9194 #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div .ipsType_light {
9195 color: inherit;
9196 }
9197
9198.cGallerySubmit_albumImage {
9199 background-color: rgba(0,0,0,0.3);
9200}
9201
9202/* Step 2: Upload files */
9203.cGallerySubmit_uploadImages .ipsAttachment_dropZone:not( .ipsDragging ) {
9204 border-color: {theme="area_background_light"};
9205}
9206
9207/* Step 3: Image info */
9208.cGallerySubmit_strip {
9209 background: {theme="area_background_dark"};
9210}
9211
9212.cGallerySubmit_bottomBar {
9213 border-color: {hextorgb="text_color" opacity="0.1"};
9214}
9215
9216 .cGallerySubmit_strip li:not( .cGallerySubmit_current ) :hover {
9217 border-color: {hextorgb="selected" opacity="0.75"};
9218 }
9219
9220 .cGallerySubmit_strip .cGalleryTrimmedImage {
9221 background-clip: padding-box;
9222 }
9223
9224 .cGallerySubmit_strip .cGallerySubmit_current .cGalleryTrimmedImage {
9225 border-color: {theme="selected"};
9226 }
9227
9228 html[dir="ltr"] .cGallerySubmit_strip .cGallerySubmit_current:after {
9229 border-color: transparent transparent transparent {theme="selected"};
9230 }
9231 html[dir="rtl"] .cGallerySubmit_strip .cGallerySubmit_current:after {
9232 border-color: transparent {theme="selected"} transparent transparent;
9233 }
9234
9235.ipsApp button.cGallerySubmit_button {
9236 color: {theme="text_color"};
9237}
9238
9239/* Bug fix: prevents images from wrapping too early */
9240.cGalleryPatchwork_row{ width: calc(100% + 1px) !important; }
9241
9242/* Bug fix: Remove margin from gallery reviews in Clubs */
9243[data-role="imageComments"] .ipsTabs_panels.ipsTabs_contained .ipsTabs_panel{
9244 margin: 0;
9245}
9246
9247/* Bug fix: Neatly align the layout when the "Show as large previews" option is selected */
9248.cGalleryLargeList .ipsContained_container{
9249 margin-top: 10px;
9250}
9251
9252.cGalleryLargeList .ipsContained_container,
9253.cGalleryLargeList .ipsContained_container > span:not(.ipsHide){
9254 display: inline-block !important;
9255}
9256
9257.ipsApp .cGalleryLargeList{
9258 padding: 15px;
9259 padding-bottom: 0.1px;
9260}
9261
9262.cGalleryLargeList .ipsBox{
9263 margin-bottom: 15px;
9264}
9265
9266.cGalleryRowsList .ipsDataItem > .ipsPos_top{
9267 align-self: center;
9268}
9269
9270/*
9271 ----------------
9272 - Downloads
9273 ----------------
9274*/
9275
9276/* Make spacing consistent */
9277html[dir="ltr"] .cDownloadsCarouselItem,
9278html[dir="rtl"] .cDownloadsCarouselItem{
9279 margin: 0px !important;
9280}
9281
9282#elDownloadsSubmit_progress.ipsSticky{
9283 background-color: {theme="area_background"};
9284}
9285
9286/* Upload file */
9287.ipsProgressBar{
9288 background-color: {hextorgb="poll_bar" opacity="0.3"};
9289 background-image: linear-gradient(to bottom, {hextorgb="poll_bar" opacity="0.4"} 0%, {hextorgb="poll_bar" opacity="0.3"} 100%);
9290}
9291
9292.ipsProgressBar_progress,
9293.ipsProgressBar.ipsProgressBar_animated .ipsProgressBar_progress{
9294 background-color: {theme="poll_bar"};
9295}
9296
9297#elDownloadsSubmit .ipsAttachment_dropZone{
9298 background-color: {theme="area_background_reset"};
9299 border-color: {hextorgb="text_color" opacity="0.3"};
9300}
9301
9302
9303
9304/*
9305 ----------------
9306 - Pages
9307 ----------------
9308*/
9309
9310.cCmsCategoryFeaturedEntry,
9311.cCmsCategoryFeaturedEntry .cCmsRecord_image,
9312.cmsCategory2col .ipsGrid_span6:nth-of-type(1),
9313.cmsCategory3col .ipsGrid_span4:nth-of-type(1),
9314.cmsCategory3col .ipsGrid_span4:nth-of-type(2) {
9315 border-color: {hextorgb="text_color" opacity="0.15"};
9316}
9317
9318
9319
9320/*
9321 ----------------
9322 - Calendar
9323 ----------------
9324*/
9325
9326/* Calendar widget */
9327.ipsWidget .ipsCalendarDate{ background: {theme="area_background_light"}; }
9328
9329/* Make text easier to read */
9330.cCalendar_birthdays{
9331 color: inherit;
9332}
9333
9334/* Remove ipsBox styles from .cCalendar and .ipsPager since they're already applied by .ipsBox_alt */
9335.cCalendar.ipsBox,
9336.cCalendarNav.ipsPager{
9337 box-shadow: none;
9338 border: 0;
9339 border-radius: 0;
9340}
9341
9342.cCalendar.ipsBox,
9343.cCalendarNav.ipsPager:not(.ipsSticky){
9344 background: none !important;
9345}
9346
9347/* Navigation bar */
9348.cCalendarNav{
9349 display: flex;
9350 align-items: center;
9351 justify-content: space-between;
9352}
9353
9354.cCalendarNav:before,
9355.cCalendarNav:after{
9356 display: none;
9357}
9358
9359 html[dir="ltr"] .cCalendarNav > [class*="ipsGrid_span"],
9360 html[dir="rtl"] .cCalendarNav > [class*="ipsGrid_span"]{
9361 margin: 0;
9362 }
9363
9364 .cCalendarNav .ipsType_pageTitle{
9365 margin-top: 0;
9366 }
9367
9368@media screen and (max-width:767px){
9369
9370 .cCalendarNav{
9371 flex-wrap: wrap;
9372 }
9373
9374 .cCalendarNav .ipsType_center{
9375 order: 1;
9376 width: 100%;
9377 }
9378
9379 .cCalendarNav .ipsType_left{
9380 order: 2;
9381 width: 45% !important;
9382 }
9383
9384 .cCalendarNav .ipsType_right{
9385 order: 3;
9386 width: 45% !important;
9387 }
9388
9389}
9390
9391.cCalendar{
9392 background-color: {theme="area_background_reset"};
9393}
9394
9395.cCalendar td {
9396 border-color: {hextorgb="text_color" opacity="0.1"};
9397}
9398
9399.cCalendar td.cCalendar_nonDate {
9400 background: {hextorgb="text_color" opacity="0.06"};
9401}
9402
9403.cCalendar td.cCalendar_today, .cCalendarWeek div.cCalendar_today {
9404 background: {theme="area_background_dark"};
9405}
9406 .cCalendarWeek div.cCalendar_today h2.ipsType_sectionHead {
9407 color: inherit;
9408 }
9409
9410 a.cEvents_style_blank, .cEvents_style_blank a, .cCalendarIcon.cEvents_style_blank {
9411 border-color: {hextorgb="text_color" opacity="0.15"};
9412 }
9413
9414#elEventHeader_details {
9415 background: {theme="area_background_dark"};
9416}
9417
9418.cCalendarDay > .ipsDataItem {
9419 border-bottom-color: {hextorgb="text_color" opacity="0.2"};
9420}
9421
9422.ipsDataItem.cCalendarDay_allDay {
9423 border-bottom-color: {theme="text_color"};
9424}
9425
9426.ipsButton.cCalendar_miniAddEvent{
9427 line-height: 1.4rem;
9428 height: auto;
9429}
9430
9431.ipsCalendarDate{
9432 background: {hextorgb="text_color" opacity="0.05"};
9433 border-color: {hextorgb="text_color" opacity="0.2"};
9434}
9435
9436 .ipsCalendarDate_month{
9437 color: {hextorgb="text_color" opacity="0.8"};
9438 }
9439
9440@media screen and (max-width: 767px) {
9441 .cCalendar .cCalendar_hasEvents .cCalendar_dayNumber {
9442 border-color: {hextorgb="text_color" opacity="0.12"};
9443 background: {hextorgb="text_color" opacity="0.04"};
9444 }
9445
9446 .cCalendar .cCalendar_hasEvents.cCalendar_today .cCalendar_dayNumber {
9447 background: rgba(255,255,255,0.4);
9448 border-color: rgba(255,255,255,0.3);
9449 }
9450
9451 .cCalendar td.cCalendar_today .cCalendar_dayNumber {
9452 background: transparent;
9453 border-color: transparent;
9454 color: inherit;
9455 }
9456}
9457
9458
9459
9460/*
9461 ----------------
9462 - Nexus
9463 ----------------
9464*/
9465
9466.cNexusCategoryBlock{
9467 min-height: 220px;
9468}
9469
9470.cNexusCategoryBlock a{
9471 box-shadow: inset {hextorgb="text_color" opacity="0.15"} 0px 0px 0px 1px, rgba(0,0,0,0.15) 0px 3px 8px;
9472 min-height: 220px;
9473 border-radius: 3px;
9474 text-align: center;
9475}
9476
9477 .cNexusCategoryBlock > a::before{
9478 background: linear-gradient(to top,
9479 rgba(0,0,0,1) 0%,
9480 rgba(0,0,0,0.738) 19%,
9481 rgba(0,0,0,0.541) 34%,
9482 rgba(0,0,0,0.382) 47%,
9483 rgba(0,0,0,0.278) 56.5%,
9484 rgba(0,0,0,0.194) 65%,
9485 rgba(0,0,0,0.126) 73%,
9486 rgba(0,0,0,0.075) 80.2%,
9487 rgba(0,0,0,0.042) 86.1%,
9488 rgba(0,0,0,0.021) 91%,
9489 rgba(0,0,0,0.008) 95.2%,
9490 rgba(0,0,0,0.002) 98.2%,
9491 rgba(0,0,0,0) 100%);
9492 height: 140px;
9493 opacity: 0.75;
9494 border-bottom-left-radius: inherit;
9495 border-bottom-right-radius: inherit;
9496 }
9497
9498 .cNexusCategoryBlock .ipsType_sectionHead{
9499 text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
9500 width: calc(100% - 14px);
9501 bottom: 20px;
9502 }
9503
9504@media screen and (max-width:767px){
9505 .cNexusCategoryBlock,
9506 .cNexusCategoryBlock a,
9507 .cNexusCategoryBlock > a::before{
9508 min-height: 130px;
9509 height: 130px;
9510 }
9511}
9512
9513@supports ( object-fit: cover ) {
9514
9515 .cNexusCarousel.cNexusCategory_grid .cNexusProduct_image img,
9516 .cNexusProduct_images .ipsImage{
9517 object-fit: cover;
9518 width: 100%;
9519 height: 100%;
9520 }
9521
9522}
9523
9524a.cNexusProduct_image{
9525 color: inherit;
9526 position: relative;
9527 /* Required for the pseudo element to work correctly */
9528 display: inline-block;
9529}
9530
9531.cNexusProduct_image:after{
9532 content: '';
9533 position: absolute;
9534 top: 0; left: 0; right: 0; bottom: 0;
9535 border: 1px solid currentColor;
9536 opacity: 0.3;
9537}
9538
9539
9540/* Manage Purchases thumb */
9541.cNexusPurchaseList .cNexusPurchaseList_image,
9542.cNexusPurchase .cNexusPurchase_image {
9543 background-color: {theme="area_background_dark"};
9544 border-color: {theme="area_background"};
9545}
9546
9547
9548html[dir="ltr"] .cNexusCheckout_returning,
9549html[dir="ltr"] .cNexusCheckout_review > .ipsColumn:first-child,
9550html[dir="rtl"] .cNexusCheckout_returning,
9551html[dir="rtl"] .cNexusCheckout_review > .ipsColumn:first-child {
9552 border-color: {hextorgb="text_color" opacity="0.1"};
9553}
9554
9555.cNexusMenuCart_totalRow,
9556.cNexusCheckout_subtotal {
9557 border-color: {hextorgb="text_color" opacity="0.5"};
9558}
9559
9560.cDonateProgressBar {
9561 background: {hextorgb="poll_bar" opacity="0.15"};
9562 box-shadow: inset {hextorgb="poll_bar" opacity="0.25"} 0px 0px 0px 1px;
9563}
9564
9565.cDonateProgressBar_progress {
9566 background: {theme="poll_bar"};
9567}
9568
9569.cNexusPrice s {
9570 color: {theme="text_light"};
9571}
9572
9573.cPayment {
9574 border-color: {hextorgb="text_color" opacity="0.1"};
9575 background-color: {theme="area_background_light"};
9576}
9577
9578/* Overwrite the internal box background-color */
9579.cNexusSupportMessage{
9580 background-color: {theme="area_background_reset"} !important;
9581}
9582
9583.cNexusSupportMessage_purchase .cNexusPurchase_image {
9584 background-color: {theme="area_background_reset"};
9585 border-color: {theme="area_background_light"};
9586}
9587/*
9588 .cNexusSupportMessage_m .cNexusSupportMessage_author,
9589 .cNexusSupportMessage_a .cNexusSupportMessage_author,
9590 .cNexusSupportMessage_s .cNexusSupportMessage_author,
9591 .cNexusSupportMessage_e .cNexusSupportMessage_author,
9592 .cNexusSupportMessage_h .cNexusSupportMessage_author {
9593 background: {theme="area_background_reset"};
9594 }
9595*/
9596.cNexusOrderBadge {
9597 background: #666;
9598}
9599
9600.cNexusSupportMessage_replyArea{
9601 background: {theme="area_background_reset"};
9602}
9603
9604#elNexusActions > li > a:hover{
9605 background: {hextorgb="link_hover" opacity="0.1"};
9606}
9607
9608/* Remove border from sub categories in side navigation */
9609#elCategories_menu .ipsSideMenu_list{
9610 border: 0;
9611}
9612
9613/* Make thumbnails fill containers */
9614.cNexusProduct_image img, .cNexusProduct_image .ipsNoThumb{
9615 width: 100%;
9616 height: 100%;
9617 object-fit: cover;
9618}
9619
9620/* 0 support tickets */
9621.cNexusActionBadge_off{
9622 background: {theme="area_background_dark"};
9623}
9624
9625/*
9626 ----------------
9627 - Clubs
9628 ----------------
9629*/
9630
9631#elClubHeader{
9632 margin: 0 0 10px 0;
9633 position: relative;
9634 border-radius: 3px;
9635}
9636
9637 #elClubHeader .ipsCoverPhoto,
9638 #elClubHeader .ipsCoverPhoto_container{
9639 border-top-left-radius: inherit;
9640 border-top-right-radius: inherit;
9641 }
9642
9643 #elClubControls{
9644 background: {theme="tab_background"};
9645 border-bottom-left-radius: inherit;
9646 border-bottom-right-radius: inherit;
9647 }
9648
9649 #elClubControls .ipsButton::after{
9650 border: 0;
9651 }
9652
9653 @media (min-width: 768px){
9654 #elClubControls{
9655 display: flex;
9656 flex-wrap: wrap;
9657 align-items: center;
9658 }
9659
9660 #elClubControls .ipsButton_split{
9661 order: 2;
9662 flex: 0 0 auto;
9663 margin: 0px;
9664 margin-right: 14px;
9665 }
9666
9667 html[dir='rtl'] #elClubControls .ipsButton_split{
9668 margin: 0;
9669 margin-left: 14px;
9670 }
9671
9672 #elClubControls #tabs_club{
9673 flex: 1 0 auto;
9674 }
9675
9676 #elClubControls .ipsTabs_item{
9677 margin: 1px 2px 1px 0px;
9678 }
9679 }
9680
9681 #elClubHeader .ipsCoverPhoto_button{
9682 z-index: 1;
9683 }
9684
9685 #elClubHeader:after{
9686 content: '';
9687 pointer-events: none;
9688 position: absolute;
9689 top: 0; left: 0; right: 0; bottom: 0;
9690 border-radius: inherit;
9691 border: 1px solid {hextorgb="text_color" opacity="0.3"};
9692 }
9693
9694/* Bug fix to place icon on top of border and align correctly */
9695@media screen and (max-width:767px){
9696 #elClubHeader .cClubIcon{
9697 z-index: 1;
9698 top: 10px;
9699 }
9700 #elClubHeader .ipsCoverPhoto{
9701 padding-top: 60px;
9702 }
9703}
9704
9705/* Newsletter */
9706.ipsWidget[data-blockid^="app_core_newsletter"] .ipsWidget_inner{
9707 display: flex;
9708 flex-wrap: wrap;
9709 align-items: center;
9710}
9711
9712 .ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9713 flex: 0 0 auto;
9714 padding-top: 0;
9715 padding-bottom: 0;
9716 }
9717
9718 html[dir='ltr'] .ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9719 padding-left: 0;
9720 }
9721
9722 html[dir='rtl'] .ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9723 padding-right: 0;
9724 }
9725
9726 .ipsWidget[data-blockid^="app_core_newsletter"] p{
9727 flex: 1 1 auto;
9728 width: 1%;
9729 }
9730
9731 .ipsWidget[data-blockid^="app_core_newsletter"] p:empty{ display: none; }
9732
9733 .ipsWidget[data-blockid^="app_core_newsletter"] .ipsButton{
9734 margin-top: 15px;
9735 }
9736
9737/* Correctly align side widgets */
9738.ipsWidget.ipsWidget_vertical:first-child{
9739 margin-top: 0;
9740}
9741
9742/* Bug fix: Correctly align responsive tabs */
9743#elClubControls .ipsTabs{
9744 padding: 10px;
9745}
9746
9747 #elClubControls .ipsTabs_item{
9748 line-height: 38px;
9749 margin-top: 0;
9750 border-radius: 2px;
9751 }
9752
9753 @media screen and (min-width:980px){
9754
9755 #elClubControls .ipsTabs_activeItem{
9756 position: relative;
9757 }
9758
9759 #elClubControls .ipsTabs_activeItem:after{
9760 content: '';
9761 position: absolute;
9762 bottom: 0; left: 50%; margin-left: -4px;
9763 width: 8px; height: 8px;
9764 border: 4px solid transparent;
9765 border-bottom-color: {theme="tab_background"};
9766 pointer-events: none;
9767 box-sizing: border-box;
9768 }
9769
9770 }
9771
9772@media screen and (max-width:767px){
9773 #elClubHeader .ipsCoverPhoto{
9774 height: auto;
9775 }
9776}
9777
9778
9779/*
9780 ----------------
9781 - Streams
9782 ----------------
9783*/
9784
9785/* Make description lighter */
9786.ipsStreamItem_status{ color: {theme="text_light"}; }
9787
9788/* Stream "Content type" cog icon */
9789.cStreamForm_list li a.ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu,
9790.cStreamForm_list li a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover + .cStreamForm_menu {
9791 background: {hextorgb="text_color" opacity="0.2"};
9792}
9793
9794/* Fix Stream filters when a backdrop filter is applied to .ipsBox */
9795div[data-controller="core.front.streams.form"]{
9796 position: relative;
9797}
9798
9799/* Stream background */
9800div[data-role="streamBody"] .ipsBox_alt{
9801 background: {theme="area_background_light"} !important;
9802}
9803
9804/* Filter */
9805.cStreamFilter{
9806 background: {theme="area_background_reset"};
9807 border-color: {hextorgb="text_color" opacity="0.2"};
9808}
9809
9810.ipsBox .cStreamFilter{
9811 background: transparent;
9812 border-color: transparent;
9813}
9814
9815 .cStreamFilter > li > a{
9816 border-color: {hextorgb="text_color" opacity="0.2"};
9817 }
9818
9819 .cStreamFilter a{
9820 color: {hextorgb="text_color" opacity="0.7"};
9821 }
9822
9823 .cStreamFilter h3{
9824 color: {theme="text_color"};
9825 }
9826
9827 .cStreamFilter > li > a.cStreamFilter_active{
9828 background: {theme="area_background_dark"};
9829 }
9830
9831 .cStreamFilter p em{
9832 opacity: 0.8;
9833 }
9834
9835html[dir="ltr"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats,
9836html[dir="rtl"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats{
9837 border-color: {hextorgb="text_color" opacity="0.2"};
9838}
9839
9840.ipsStream .ipsStreamItem_contentType{
9841 background: {theme="area_background_reset"};
9842}
9843
9844.ipsStreamItem.ipsStreamItem_contentBlock{
9845 border-color: {hextorgb="text_color" opacity="0.15"};
9846}
9847
9848 /* Add background to certain results such as reactions */
9849 .ipsStreamItem.ipsStreamItem_actionBlock{
9850 background: {theme="area_background_reset"};
9851 border: 1px solid {hextorgb="text_color" opacity="0.15"};
9852 border-radius: 3px;
9853 padding: 10px !important;
9854 }
9855
9856html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
9857 border-right-color: {hextorgb="text_color" opacity="0.15"};
9858}
9859
9860html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
9861 border-left-color: {hextorgb="text_color" opacity="0.15"};
9862}
9863
9864html[dir="ltr"] .ipsStream_snippetInfo,
9865html[dir="rtl"] .ipsStream_snippetInfo{
9866 border-width: 0;
9867}
9868
9869/*
9870 ----------------
9871 - Inbox
9872 ----------------
9873*/
9874
9875/* Space out Options bar and Message title when viewing a message */
9876#elMessageViewer .ipsBox_alt:first-child{
9877 margin-bottom: 10px;
9878}
9879
9880/* Remove side border from inbox list items. Not sure what its purpose is, but it causes a visible border on the last item */
9881html[dir="ltr"] .cMessage,
9882html[dir="rtl"] .cMessage{
9883 border-right-width: 0;
9884 border-left-width: 0;
9885}
9886
9887html[dir="ltr"] .cMessage_members > ol > li,
9888html[dir="rtl"] .cMessage_members > ol > li{
9889 border-color: {hextorgb="text_color" opacity="0.4"};
9890}
9891
9892/* Add a background to titles since they aren't in a box */
9893.focus-transparent #elMessageViewer .ipsType_pageTitle{
9894 padding: 10px 20px;
9895 border-radius: 3px;
9896 background: {theme="area_background_reset"};
9897}
9898
9899@media screen and (min-width:980px){
9900 .focus-transparent #elMessageViewer .ipsType_pageTitle{
9901 display: inline-block;
9902 }
9903}
9904
9905@media screen and (max-width: 979px){
9906 .focus-transparent #elMessageViewer .ipsType_pageTitle{
9907 clear: both;
9908 margin-top: 20px;
9909 display: block;
9910 }
9911}
9912
9913
9914
9915
9916
9917/*
9918 ----------------
9919 - Promoted Content
9920 ----------------
9921*/
9922
9923/* Stop long titles from overflowing */
9924.cPromotedTitle{
9925 overflow-wrap: break-word;
9926}
9927
9928.cPromotedImages {
9929 border-color: transparent;
9930}
9931
9932.cPromoteDialog_icon {
9933 box-shadow: inset {hextorgb="text_color" opacity="0.1"} 0px 0px 0px 1px;
9934}
9935
9936 .cPromoteCount:not( .ipsType_issue ):not( .ipsType_negative ) {
9937 color: {theme="text_color"};
9938 }
9939
9940 .cPromote_attachImage [data-role="preview"]{
9941 background-clip: padding-box;
9942 }
9943
9944 .cPromote_attachImageSelected [data-role="preview"] {
9945 border-color: {theme="text_color"};
9946 }
9947
9948#form_promote_media .ipsAttachment_dropZone.ipsAttachment_dropZoneSmall {
9949 border-color: {hextorgb="text_color" opacity="0.3"};
9950}
9951
9952 html[dir="ltr"] #form_promote_social_content_facebook .ipsFieldRow_content,
9953 html[dir="ltr"] #form_promote_social_content_twitter .ipsFieldRow_content,
9954 html[dir="ltr"] #form_promote_social_content_internal .ipsFieldRow_content,
9955 html[dir="rtl"] #form_promote_social_content_facebook .ipsFieldRow_content,
9956 html[dir="rtl"] #form_promote_social_content_twitter .ipsFieldRow_content,
9957 html[dir="rtl"] #form_promote_social_content_internal .ipsFieldRow_content {
9958 background: transparent;
9959 }
9960
9961 #form_promote_social_content_facebook .ipsFieldRow_desc,
9962 #form_promote_social_content_twitter .ipsFieldRow_desc,
9963 #form_promote_social_content_internal .ipsFieldRow_desc {
9964 border-color: {hextorgb="text_color" opacity="0.1"};
9965 }
9966
9967/* Neater carousel */
9968.cPromotedWidgetItem > .ipsPad_half{
9969 padding: 15px;
9970}
9971
9972 .cPromotedWidgetItem .ipsPhotoPanel{
9973 margin-top: 20px;
9974 }
9975
9976 .cPromotedWidgetItem h2{
9977 margin-bottom: 10px;
9978 }
9979
9980
9981/* Promote button alignment */
9982.ipsApp .ipsPromote{
9983 padding: 0 !important;
9984 display: inline-flex;
9985}
9986
9987 .ipsPromote .ipsPromoteText{
9988 padding: 0 15px;
9989 flex: 1 0 auto;
9990 }
9991
9992 html[dir] .ipsApp .ipsPromote.ipsButton a{
9993 margin: 0;
9994 padding: 0;
9995 }
9996
9997 html[dir='rtl'] .ipsPageHeader .ipsPromote {
9998 margin-right: 0;
9999 margin-left: 10px;
10000 }
10001
10002 .ipsPromote .ipsPromote_icon{
10003 flex: 0 0 auto;
10004 color: inherit;
10005 margin: 0;
10006 background: {hextorgb="very_light_button_font" opacity="0.15"};
10007 }
10008
10009 .ipsPromote .ipsPromote_icon:first-child{
10010 border-top-left-radius: inherit;
10011 border-bottom-left-radius: inherit;
10012 }
10013
10014 html[dir='rtl'] .ipsPromote .ipsPromote_icon:first-child{
10015 border-top-right-radius: inherit;
10016 border-bottom-right-radius: inherit;
10017 }
10018
10019@media screen and (max-width:767px){
10020 /* Not sure if there are side-effects, but this makes the pseudo border align correctly */
10021 .ipsPromote{
10022 display: flex !important;
10023 }
10024}
10025
10026/*
10027 ----------------
10028 - Announcements
10029 ----------------
10030*/
10031
10032.cAnnouncementsFloat{
10033 left: 0;
10034}
10035
10036html[dir='rtl'] .cAnnouncementContentTop.ipsMessage{
10037 padding: 0;
10038}
10039
10040.focus-fixed-nav .cAnnouncementsFloat,
10041.focus-fixed-header .cAnnouncementsFloat,
10042.focus-static-announcements .cAnnouncementsFloat{
10043 position: static;
10044}
10045
10046 .focus-fixed-nav body[style*='margin-top'],
10047 .focus-fixed-header body[style*='margin-top'],
10048 .focus-static-announcements body[style*='margin-top']{
10049 margin-top: 0 !important;
10050 }
10051
10052#cAnnouncementSidebar{
10053 padding-bottom: 1px;
10054 min-width: 0;
10055}
10056
10057.cAnnouncementIcon{
10058 background: {theme="area_background_dark"};
10059}
10060
10061/*
10062 ----------------
10063 - Pagination
10064 ----------------
10065*/
10066
10067/* Remove transition */
10068.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a,
10069.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a,
10070.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a,
10071.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a {
10072 {prefix="transition" value="none"}
10073}
10074
10075.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_page a,
10076.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a,
10077.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a,
10078.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a,
10079.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a {
10080 background: {hextorgb="link" opacity="0.1"};
10081 color: {theme="link"};
10082 vertical-align: top;
10083}
10084
10085 .ipsPagination:not( .ipsPagination_mini ) .ipsPagination_page a:hover,
10086 .ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a:hover,
10087 .ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a:hover,
10088 .ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a:hover,
10089 .ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a:hover{
10090 background: {hextorgb="link" opacity="0.2"};
10091 }
10092
10093 .ipsApp .ipsPagination .ipsPagination_page.ipsPagination_active a {
10094 background: {theme="link"};
10095 color: {theme="area_background_reset"};
10096 border-color: {theme="link"};
10097 }
10098
10099 .ipsPagination .ipsPagination_page a {
10100 text-shadow: none;
10101 }
10102
10103.ipsButtonRow li > a,
10104.ipsButtonRow li > button,
10105.ipsButtonRow li > span {
10106 background: transparent;
10107 color: inherit;
10108}
10109
10110 /* Active */
10111 .ipsButtonRow li > a.ipsButtonRow_active,
10112 .ipsButtonRow li > button.ipsButtonRow_active {
10113 background-color: {theme="button_bar"};
10114 border-color: {theme="button_bar"};
10115 color: {theme="pagination_active"};
10116 }
10117
10118 .ipsAreaBackground_light .ipsButtonRow li > a:not( .ipsButtonRow_active ),
10119 .ipsAreaBackground_light .ipsButtonRow li > button:not( .ipsButtonRow_active ),
10120 .ipsAreaBackground_light .ipsButtonRow li > span:not( .ipsButtonRow_active ) {
10121 background: {hextorgb="text_color" opacity="0.1"};
10122 }
10123
10124
10125
10126/*
10127 ----------------
10128 - Bar Pagination
10129 ----------------
10130*/
10131
10132/* Pagination bar */
10133.ipsButtonBar{
10134 color: {theme="pagination_active"};
10135 border: 0;
10136 border-radius: 3px;
10137 box-shadow: none;
10138}
10139
10140 /* Inherit border radius when possible */
10141 .ipsBox .ipsButtonBar{
10142 border-radius: 0;
10143 }
10144
10145 .ipsBox > .ipsButtonBar:first-child,
10146 .ipsBox > .ipsType_sectionTitle.ipsHide + .ipsButtonBar{
10147 border-top-left-radius: inherit;
10148 border-top-right-radius: inherit;
10149 }
10150
10151 .ipsBox .ipsButtonBar:last-child{
10152 border-bottom-left-radius: inherit;
10153 border-bottom-right-radius: inherit;
10154 }
10155
10156 .ipsBox .ipsType_sectionTitle:not(.ipsHide) + .ipsButtonBar{
10157 border-radius: 0;
10158 }
10159
10160.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a,
10161.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a,
10162.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a,
10163.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a,
10164.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a,
10165.ipsButtonBar .ipsButtonRow li > a,
10166.ipsButtonBar .ipsButtonRow li > button,
10167.ipsButtonBar .ipsButtonRow li > span {
10168 background: {hextorgb="pagination_active" opacity="0.2"};
10169 color: inherit;
10170}
10171
10172.ipsButtonBar .ipsPagination .ipsPagination_pageJump a {
10173 color: inherit;
10174}
10175
10176 .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page:not(.ipsPagination_active) a:hover,
10177 .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a:hover,
10178 .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a:hover,
10179 .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a:hover,
10180 .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a:hover,
10181 .ipsButtonBar .ipsButtonRow li > a:hover,
10182 .ipsButtonBar .ipsButtonRow li > button:hover,
10183 .ipsButtonBar .ipsButtonRow li > span:hover {
10184 background: {hextorgb="pagination_active" opacity="0.4"};
10185 }
10186
10187/* Active page */
10188.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a,
10189.ipsButtonBar .ipsButtonRow li > a.ipsButtonRow_active,
10190.ipsButtonBar .ipsButtonRow li > button.ipsButtonRow_active{
10191 background: {theme="pagination_active"};
10192 border-color: {theme="pagination_active"};
10193 color: {theme="button_bar"};
10194}
10195
10196
10197/* Add spacer between pagination and sort button on mobiles */
10198@media (max-width: 767px){
10199 .ipsPagination + .ipsButtonRow{
10200 margin-top: 3px;
10201 }
10202}
10203
10204
10205/*
10206 ----------------
10207 - Mini Pagination
10208 ----------------
10209*/
10210
10211.ipsPagination.ipsPagination_mini{
10212 transition: all 0.12s linear;
10213 display: inline-block;
10214}
10215
10216.ipsPagination.ipsPagination_mini a{
10217 color: {theme="pagination_active"};
10218 background: {theme="button_bar"};
10219}
10220
10221 .ipsPagination.ipsPagination_mini a:hover{
10222 background-image: linear-gradient(to bottom, {hextorgb="pagination_active" opacity="0.15"} 0%, {hextorgb="pagination_active" opacity="0.15"} 100%);
10223 }
10224
10225.ipsPagination .ipsPagination_page a{
10226 text-shadow: none;
10227}
10228
10229 .ipsPagination li:not(.ipsPagination_pageJump):not(.ipsPagination_mini) .fa{
10230 font-size: inherit;
10231 top: 0;
10232 }
10233
10234
10235
10236/*
10237 ----------------
10238 - Message bar
10239 ----------------
10240*/
10241
10242.ipsMessage{
10243 color: #fff;
10244 box-shadow: inset rgba(0,0,0,0.2) 0px 2px 0px 0px, inset rgba(0,0,0,0.2) 0px -2px 0px 0px;
10245 text-shadow: none;
10246 border-radius: 0;
10247}
10248
10249.ipsMessage_error {
10250 background: #b52b38;
10251}
10252
10253.ipsMessage_success {
10254 background: #63aa4e;
10255}
10256
10257.ipsMessage_warning {
10258 background: #ca9751;
10259}
10260
10261.ipsMessage_info,
10262.ipsMessage_information {
10263 background: {theme="area_background_dark"};
10264}
10265
10266.ipsMessage_general {
10267 background: {theme="area_background_dark"};
10268}
10269
10270 .ipsMessage_general a.ipsButton{
10271 background: rgba(255,255,255,0.25);
10272 }
10273
10274.ipsMessage a.ipsUserPhoto{
10275 border: 0;
10276}
10277
10278.ipsApp .ipsMessage a:not(.ipsButton) {
10279 color: currentColor;
10280 border-color: currentColor;
10281}
10282
10283.ipsMessage a.ipsButton:not(.ipsButton_link){
10284 background: none;
10285 color: currentColor;
10286}
10287
10288 .ipsMessage a.ipsButton:not(.ipsButton_link):after{
10289 background: currentColor;
10290 opacity: 0.25;
10291 border-color: transparent;
10292 }
10293
10294 .ipsMessage a.ipsButton:not(.ipsButton_link):hover:after{
10295 opacity: 0.35;
10296 }
10297
10298 html[dir] .ipsMessage .ipsButton_link{
10299 color: currentColor;
10300 }
10301
10302
10303
10304/*
10305 ----------------
10306 - Block Manager
10307 ----------------
10308*/
10309
10310/* Manage widgets button */
10311#elWidgetControls{
10312 background: rgba(20,20,20,0.8);
10313 border-color: rgba(0,0,0,0.3);
10314 color: #fff;
10315}
10316
10317 html[dir='ltr'] #elWidgetControls:after{
10318 border-left-width: 0;
10319 }
10320
10321 html[dir='rtl'] #elWidgetControls:after{
10322 border-right-width: 0;
10323 }
10324
10325#elSidebarManager{
10326 background: rgba(20,20,20,0.85);
10327}
10328
10329 .ipsApp .ipsToolbox .ipsToolbox_sectionTitle{
10330 background: rgba(255,255,255,0.2);
10331 border-radius: 3px;
10332 color: #fff;
10333 }
10334
10335 .cSidebarManager_block{
10336 background: rgba(255,255,255,0.15);
10337 border-radius: 3px;
10338 }
10339
10340#elSidebarManager .ipsType_light{ color: #eee; }
10341
10342/* Placeholder */
10343.cWidgetContainer.cWidgetContainer_managing{
10344 background-color: {hextorgb="text_color" opacity="0.15"};
10345}
10346
10347 .cWidgetContainer.cWidgetContainer_managing::before{
10348 border-color: {theme="text_color"};
10349 }
10350
10351 .cSidebarBlock_managing{
10352 background: {hextorgb="area_background_reset" opacity="0.6"};
10353 border-color: {theme="text_color"};
10354 }
10355
10356 .cSidebarBlock_managing h4,
10357 .cSidebarBlock_managing [data-action="removeBlock"]{
10358 background: rgba(0,0,0,0.8);
10359 }
10360
10361 /* On drag */
10362 .cSidebarManager_placeholder{
10363 background: {theme="area_background_dark"};
10364 }
10365
10366
10367
10368/*
10369 ----------------
10370 - Focus transparent
10371 ----------------
10372*/
10373
10374.focus-transparent .cForumMiniList_wrapper,
10375.focus-transparent .cGalleryCats{
10376 padding: 0;
10377}
10378
10379.focus-transparent .ipsPageHeader,
10380.focus-transparent .cGalleryPatchwork_index,
10381.focus-transparent .cForumRow .ipsPad[data-role="forums"]{
10382 padding-left: 0;
10383 padding-right: 0;
10384}
10385
10386.focus-transparent #elGalleryNav,
10387.focus-transparent.focus-post-bar .cTopic .ipsItemControls{
10388 border-width: 1px;
10389 border-radius: 3px;
10390}
10391
10392@media screen and (min-width: 768px){
10393
10394 .focus-transparent .focus-answers .cRatingColumn{
10395 border-width: 0px 1px 1px 1px;
10396 }
10397
10398 html[dir='ltr'].focus-transparent.focus-post-bar .focus-answers .cPostQuestion .ipsItemControls{
10399 border-top-left-radius: 0;
10400 border-bottom-left-radius: 0;
10401 border-left-width: 0;
10402 }
10403
10404 html[dir='rtl'].focus-transparent.focus-post-bar .focus-answers .cPostQuestion .ipsItemControls{
10405 border-top-right-radius: 0;
10406 border-bottom-right-radius: 0;
10407 border-right-width: 0;
10408 }
10409}
10410
10411.focus-transparent .ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular),
10412.focus-transparent .ipsComment_highlighted.ipsBox:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular){
10413 background: transparent;
10414 border: 0;
10415 box-shadow: none;
10416}
10417
10418.focus-transparent .ipsComment.cPost.ipsComment_selected{
10419 box-shadow: none;
10420 border: 0;
10421}
10422
10423
10424
10425/*
10426 ----------------
10427 - Wrapped styles
10428 ----------------
10429*/
10430
10431/* Force removal of .ipsBox styles if .ipsfocusBox is added */
10432.ipsfocusReset{
10433 box-shadow: none !important;
10434 background: none !important;
10435 border: 0 !important;
10436 border-radius: 0 !important;
10437 padding: 0 !important;
10438}
10439
10440/* If ipsfocusBox exists inside ipsBox, remove all styles */
10441.ipsBox:not(.ipsfocusReset) .ipsfocusBox,
10442.ipsBox:not(.ipsfocusReset) .ipsfocusBox-inner,
10443.ipsBox:not(.ipsfocusReset) .ipsSideMenu{
10444 background: none;
10445 box-shadow: none;
10446 border-radius: 0;
10447 padding: 0;
10448 border: 0;
10449 margin: 0;
10450}
10451
10452
10453
10454/*
10455 ----------------
10456 - Wallpaper styles
10457 ----------------
10458*/
10459
10460.focus-wallpaper .ipsStreamItem.ipsStreamItem_contentBlock,
10461.focus-wallpaper .ipsStreamItem.ipsStreamItem_actionBlock{
10462 background-clip: padding-box;
10463}
10464
10465.focus-wallpaper .ipsApp #elStreamUpdateMsg{
10466 padding: 0 4px 0 20px;
10467 border-radius: 3px;
10468 margin-right: 10px;
10469 background: {hextorgb="area_background_reset" opacity="0.9"};
10470}
10471
10472 html[dir='rtl'].focus-wallpaper .ipsApp #elStreamUpdateMsg{
10473 padding: 0 20px 0 4px;
10474 margin: 0 0 0 10px;
10475 }
10476
10477.focus-wallpaper .ipsToolList > li > .ipsButton_link,
10478.focus-wallpaper .focus-rating{
10479 background: {hextorgb="area_background_reset" opacity="0.75"};
10480 -webkit-backdrop-filter: blur(8px);
10481 backdrop-filter: blur(8px);
10482}
10483
10484.focus-wallpaper .focus-rating,
10485.focus-wallpaper .ipsToolList > li > .ipsButton_link{
10486 color: {theme="text_color"};
10487}
10488
10489.focus-wallpaper .focus-rating{
10490 border-radius: 3px;
10491 padding: 5px 10px;
10492}
10493
10494
10495/*
10496 ----------------
10497 - Meta editor
10498 ----------------
10499*/
10500
10501.ipsApp .ipsToolbox input, .ipsApp .ipsToolbox select, .ipsApp .ipsToolbox textarea{
10502 background-color: rgba(0,0,0,0.6);
10503 border-color: rgba(0,0,0,0.6);
10504 box-shadow: none;
10505 color: #fff;
10506}
10507
10508 .ipsApp .ipsToolbox select{
10509 background-position: right center;
10510 background-size: 18px 9px, 100% 100%;
10511 background-repeat: no-repeat, repeat;
10512 }
10513
10514
10515/*
10516 ----------------
10517 - ipsBox_alt bug fixes
10518 ----------------
10519*/
10520
10521.cLogin_single .ipsBox{
10522 background: none !important;
10523 box-shadow: none;
10524 border: 0;
10525 border-radius: 0;
10526}
10527
10528
10529
10530/*
10531 ----------------
10532 - Reduce z-index
10533 - Everything should be less than 10
10534 ----------------
10535*/
10536
10537.ipsNavBar_primary{
10538 z-index: 10;
10539}
10540
10541.ipsComment.ipsComment_popular .ipsComment_popularFlag,
10542.ipsReact{
10543 z-index: 5;
10544}
10545
10546div[data-controller="core.front.streams.form"] {
10547 z-index: 3;
10548}
10549
10550.ipsPagination .ipsPagination_pageJump,
10551header[data-role="profileHeader"],
10552.cClubCard_status,
10553#elEditProfile,
10554#elProfileHeader .ipsUserPhoto,
10555.ipsStream .ipsStreamItem_contentType,
10556.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
10557 z-index: 1;
10558}
10559
10560.ipsStream_withTimeline .ipsStreamItem::after{
10561 z-index: 2;
10562}
10563
10564
10565/*
10566 ----------------
10567 - Bug Fixes
10568 ----------------
10569*/
10570
10571/* Fix subscription widget */
10572/* Fix Application Forms form */
10573/* Fix VideoBox rating alignment */
10574/* Fix Random Products widget */
10575.ipsWidget[data-blockid^="app_nexus_subscriptions_"] .ipsDataItem,
10576body[data-pageapp="applicationform"] .ipsType_sectionHead + .ipsDataItem,
10577.videoboxGridview .ipsDataItem,
10578.ipsWidget_vertical[data-blockid*="_randomProducts_"] .ipsDataItem{
10579 display: block;
10580}
10581
10582/* Stop post buttons and reactions from wrapping on tablets or above. Happens when numerous people react to a post. */
10583@media (min-width: 768px){
10584 .ipsItemControls{
10585 flex-wrap: nowrap;
10586 }
10587 .ipsItemControls_left,
10588 .ipsReact_reactions{
10589 flex: 0 0 auto;
10590 }
10591}
10592
10593/* Fix 3rd party addon: Grouped profile fields */
10594.ipsMenu[id^="elPFDrop_"]{
10595 width: 300px;
10596}
10597
10598 .ipsMenu[id^="elPFDrop_"] .ipsDataItem{
10599 width: 100%;
10600 display: block;
10601 }
10602
10603/* Prevent text from touching the sides of browser windows in the Guest terms */
10604#elGuestTerms{
10605 padding: 15px;
10606}
10607
10608/* Make Pages Supergrid compatible with css grid */
10609@supports (display:grid){
10610
10611 .ipsApp .SG_wrapper,
10612 .ipsApp .SG_category_container{
10613 padding-bottom: 15px;
10614 }
10615
10616 @media (min-width: 768px){
10617 .ipsGrid .SG_record_left {
10618 margin-top: 15px !important;
10619 }
10620 .ipsGrid .SG_record_right_with_image{
10621 margin-top: -50px !important;
10622 }
10623 }
10624
10625}
10626
10627/* Add padding to settings page */
10628#elSettingsTabs{
10629 padding: 10px;
10630}
10631
10632/* Forum stats box - fix collapsed margin */
10633.ipsWidget[data-blockid*="app_forums_forumStatistics"] .ipsWidget_inner{
10634 padding-bottom: 1px;
10635}
10636
10637/* Restrict size of group icon */
10638.cProfileSidebarBlock img{ max-width: 100%; }
10639/* .. but don't apply to profile photos */
10640.cProfileSidebarBlock .ipsUserPhoto img{ max-width: none; }
10641
10642
10643/* Make sure Calendar dropdown menu appears over backdrop-filter content */
10644@supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) {
10645 #elCalendarsHeader{ z-index: 1; }
10646}
10647
10648/* RTL alignment for license key close button */
10649html[dir='rtl'] #elLicenseKey [data-role="closeMessage"]{
10650 right: auto; left: 15px;
10651}
10652
10653/* Make line-height consistent with buttons */
10654.ipsApp #elStreamUpdateMsg{
10655 line-height: 22px;
10656}
10657
10658/* Align activity stream dots */
10659html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after{ left: -37px; }
10660html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after{ right: -37px; }
10661
10662/* Make .ipsType_light inherit button color */
10663.ipsButton .ipsType_light{
10664 color: inherit;
10665 opacity: 0.7;
10666}
10667
10668/* Increase padding on Members widget so it matches ipsPad */
10669.ipsWidget_horizontal[data-blockid^="app_core_members_"] .ipsPad_half{
10670 padding: 15px;
10671}
10672
10673 @media screen and (max-width: 767px){
10674 .ipsWidget_horizontal[data-blockid^="app_core_members_"] .ipsPad_half{
10675 padding: 7px;
10676 }
10677 }
10678
10679/* Recaptcha input */
10680.ipsApp .recaptchatable *{
10681 color: {theme="text_color"};
10682}
10683
10684/* Remove box-shadow from page widget */
10685/*
10686.ipsWidget.ipsWidget_horizontal[data-blockid^="app_cms"]{
10687 box-shadow: none;
10688} */
10689
10690/* Nexus index: Space apart consecutive .ipsBox's */
10691section.ipsSpacer_top .ipsBox + .ipsBox{
10692 margin-top: 15px;
10693}
10694
10695/* Re-colour close button for mobile navigation */
10696.ipsDrawer_close{
10697 background: {theme="area_background_dark"};
10698}
10699 .ipsDrawer_close:hover{
10700 color: #fff;
10701 }
10702
10703/* Fix alignment of scroll-to-post */
10704a[id^="comment-"] {
10705 position: relative;
10706 display: block;
10707 height: 0;
10708}
10709
10710/* Fix collapsed opacity */
10711.cForumRow_hidden{
10712 opacity: 0.5;
10713}
10714 .cForumRow_hidden .cForumTitle{
10715 opacity: 1;
10716 }
10717
10718/* Neatly space header and footer widget boxes */
10719.cWidgetContainer[data-widgetArea="header"]{
10720 margin: 0;
10721}
10722
10723 .cWidgetContainer[data-widgetArea="header"] .ipsWidget{
10724 margin-bottom: 15px;
10725 }
10726
10727 /* Increase spacing between widgets to match column spacing */
10728 .cWidgetContainer[data-widgetArea="footer"],
10729 .ipsWidget.ipsWidget_horizontal:not(.ipsWidgetHide) + .ipsWidget{
10730 margin-top: 15px;
10731 }
10732
10733/* Fix Android scroll bar on notifications list */
10734@media screen and (max-width: 767px){
10735 #elFullNotifications_menu{ box-shadow: none; }
10736}
10737
10738/* Remove border from theme selection */
10739#elNavTheme_menu .ipsButton_link,
10740#elNavLang_menu .ipsButton_link{
10741 border: 0;
10742 border-radius: 0;
10743}
10744
10745 #elNavTheme_menu .ipsMenu_item:hover,
10746 #elNavLang_menu .ipsMenu_item:hover{
10747 background: {hextorgb="link_button" opacity="0.1"};
10748 }
10749
10750/* Correctly align ipsPager */
10751.ipsPager .ipsPager_noDesc .ipsPager_type{
10752 margin-top: 0;
10753}
10754.ipsPager .ipsPager_next a::after,
10755.ipsPager .ipsPager_prev a::after{
10756 line-height: 1;
10757 top: 0;
10758 bottom: 0;
10759 display: flex;
10760 align-items: center;
10761 transform: translateY(-6%);
10762}
10763
10764/* Force mentions to have white text in all areas like widgets or signatures */
10765a[data-mentionid]{ color: #fff !important; }
10766
10767/* Remove transitions */
10768.ipsComment_controls .ipsButton,
10769.cForumTitle,
10770.ipsBreadcrumb,
10771.ipsItemStatus.ipsItemStatus_large{
10772 transition: none;
10773}
10774
10775/* Align the latest user on mobiles */
10776@media screen and (max-width:767px){
10777 .ipsWidget_horizontal[data-blockid*="app_core_stats"] .cNewestMember{
10778 border: 0 !important;
10779 }
10780 .ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsType_center{
10781 text-align: left;
10782 padding-left: 15px;
10783 padding-right: 15px;
10784 }
10785}
10786
10787/* Remove margins on ipsPageHeader children, due to padding on parent element */
10788.ipsPageHeader .ipsSpacer_bottom:last-child{
10789 margin: 0;
10790}
10791
10792/* Align labels on Advanced search page */
10793.ipsApp label:not(.ipsField_unlimited){
10794 vertical-align: top;
10795}
10796
10797/* Make inputs inherit font */
10798.ipsApp label:not(.ipsField_unlimited), .ipsApp input, .ipsApp button, .ipsApp select, .ipsApp textarea{
10799 font-family: inherit;
10800}
10801
10802/* Profile leaderboard win */
10803.cProfileSidebarBlock[class*='ipsLeaderboard_trophy'] a{
10804 color: inherit !important;
10805}
10806
10807/* Space apart consecutive select boxes, eg. in the date picker */
10808.ipsApp select + select{
10809 margin-left: 3px;
10810}
10811
10812/* css checkboxes */
10813.ipsCustomInput{
10814 vertical-align: middle;
10815}
10816 .ipsCustomInput input{
10817 position: absolute;
10818 top: 0; left: 0;
10819 width: 100%; height: 100%;
10820 }
10821
10822 .ipsField_fieldList .ipsCustomInput input[type="radio"],
10823 .ipsField_fieldList .ipsCustomInput input[type="checkbox"]{
10824 float: none;
10825 margin: 0;
10826 }
10827
10828/* Fix no thumbs in Inset Existing Attachment list */
10829.ipsImageAttach_thumb .ipsNoThumb{
10830 height: 150px;
10831 width: auto;
10832}
10833
10834.ipsAttachment_fileList .ipsNoThumb:after{
10835 line-height: 150px;
10836 top: 0;
10837 margin-top: 0;
10838}
10839
10840/* Make sure backgrounds are removed from embedded items */
10841body[data-role="externalEmbed"],
10842body[data-role="internalEmbed"]{
10843 background: none !important;
10844 padding: 0 !important;
10845}
10846
10847/* Support the recent topics hook */
10848#recentTopicsWrapper .ipsDataItem:not(.ipsDataItem_unread) .ipsDataItem_title a{ font-weight: normal; }
10849
10850/* Fix hard-coded color of empty class */
10851.ipsEmpty{ color: {theme="text_light"}; }
10852
10853/* Long titles break in calendar widget */
10854.ipsWidget[data-blockid*="app_calendar_recentReviews"] .ipsTruncate.ipsTruncate_line{ white-space: normal; }
10855
10856/* Revert mood widget to block */
10857.mood-profile .ipsDataItem{
10858 display: block;
10859}
10860
10861 /* .. and reassign its padding */
10862 .mood-profile .ipsDataList .ipsDataItem{
10863 padding: 10px 0px;
10864 }
10865
10866/* Remove margin from Update warning since it shows even if it contains no content */
10867.precontent-blocks .cNotificationList{ margin: 0; }
10868.cNotificationList > *{ margin-bottom: 10px; }
10869
10870/* 4.4 theme by ipsfocus.com */
10871:root{
10872 --ipsfocus-version: '4.4.1';
10873 --ipsfocus-date: 'March 7, 2019';
10874}