Mode
Production
Development
English
Spanish
French
Arabic
Home
Manage
Members
Member Levels
Networks
Announcements
Email All Members
Abuse Reports
Manage Invites
Manage Tags
Manage Comments
Manage Verifications
Support Inbox
Settings
General Settings
Locale Settings
Profile Questions
Signup Process
Activity Feed Settings
Emoticons
Social Menus
Spam & Banning Tools
Mail Templates
Friendship Settings
Mail Settings
Performance & Caching
Admin Password
Task Scheduler
Iframely Integration
Default Notification Alerts
Default Email Alerts
Storage System
Redirection Settings
TinyMCE Editor Settings
Plugins
Appearance
Layout Editor
Theme Editor
File & Media Manager
Language Manager
Menu Editor
Banner Manager
Monetization
Ads
Member Subscription Settings
Billing Settings
Orders
Stats
Site-wide Statistics
Referring URLs
Server Information
Log Browser
Harmony Theme
Network Information
Created
January 11, 2020
Version
6.5.1
Home
Appearance
Theme Editor
Theme Editor
More info:
See KB article
Active Theme
Revert
Clone
Save Changes
Harmony
v6.5.1
by SocialEngine Core
Editing File:
theme.css
constants.css
harmony-custom.css
@include "constants.css"; @include "~/application/modules/Core/externals/styles/main.css"; @scan "application/modules" "externals/styles/main.css" "Core"; /* GLOBAL STYLES, FONTS & RESETS */ @font-face { font-family:'Default Font'; src:url('fonts/Inter-Regular.woff2') format('woff2'), url('fonts/Inter-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Default Font'; src:url('fonts/Inter-Medium.woff2') format('woff2'), url('fonts/Inter-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Default Font'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'), url('fonts/Inter-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Default Font'; src:url('fonts/Inter-Bold.woff2') format('woff2'), url('fonts/Inter-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } html{ min-height:100%; margin-bottom:1px; } body{ background-color:$theme_body_background_color; overflow-x:hidden; font-size:$theme_body_font_size; } *{ padding:0; margin:0; border:none; border-style:solid; border-width:0; border-color:$theme_border_color; box-sizing:border-box; } *::before, *::after{ box-sizing:border-box; } table{ border-collapse:collapse; } br{ clear:both; } ul{ list-style-type:none; } a{ color:$theme_link_color; text-decoration:none; } a:hover{ color:$theme_link_color_hover; text-decoration:underline; } *{ font-family:$theme_font_family; } b, strong{ font-weight:600 !important; } *[dir="rtl"]{ direction:rtl; unicode-bidi:embed; } div, td{ color:$theme_font_color; line-height:150%; text-align:$theme_text_align; letter-spacing:0.5px; font-weight:400 !important; } *[dir="rtl"] div, *[dir="rtl"] td{ direction:rtl; unicode-bidi:embed; text-align:right; } h2, h3, h4{ color:$theme_headline_color; font-weight:normal; } h2{ font-size:$theme_headline_size_large; margin-bottom:10px; line-height:130%; font-weight:700; } h3{ font-size:$theme_headline_size_medium; padding:.4em 0; } h4{ font-weight:400; border-bottom:1px solid $theme_border_color; padding:.5em 0px .5em 0px; margin-bottom:10px; font-size:110%; } h3.sep{ display:block; overflow:hidden; margin-bottom:1em; height:1em; } h3.sep > span{ display:block; overflow:hidden; position:absolute; padding:5px 10px 5px 0px; font-weight:600 !important; } [dir="rtl"] h3.sep > span{ padding:5px 0px 5px 10px; } /*GENERAL LAYOUT*/ .generic_layout_container > h3{ text-transform:capitalize; margin:-15px -15px 0; padding:15px; position:relative; font-weight:600 !important; font-family:$theme_box_header_font_family; font-size:$theme_box_header_font_size; background-color:$theme_list_background_color; border-radius:$theme_widget_radius $theme_widget_radius 0 0; } .layout_left > .generic_layout_container, .layout_middle > .generic_layout_container, .layout_right > .generic_layout_container, .layout_core_container_tabs > div.generic_layout_container{ padding:15px; background-color:$theme_list_background_color; margin-bottom:$theme_box_space; border-radius:$theme_widget_radius; +boxborder; } #global_wrapper .layout_middle > .layout_core_container_tabs{ border-width:0 !important; background:none !important; padding:0 !important; box-shadow:inherit !important; } .layout_core_container_tabs .activity-post-container{ border-radius:$theme_widget_radius; } .layout_left{ float:left; width:$theme_content_columns_left_width; padding:0px 20px 0px 0; vertical-align:top; } [dir="rtl"] .layout_left{ float:right; padding:0px 0 0px 20px; } .layout_middle{ overflow:hidden; padding:0; vertical-align:top; } .layout_right{ float:right; width:$theme_content_columns_right_width; padding:0px 0 10px 20px; vertical-align:top; } [dir="rtl"] .layout_right{ float:left; padding:0px 20px 10px 0; margin-left:0px; } #global_wrapper{ text-align:center; padding-top:20px; } #global_content{ overflow:hidden; min-height:500px; box-sizing:border-box; margin:0 auto; width:$theme_content_width; } #global_content_simple{ display:inline-block; overflow:hidden; } /* Header */ .layout_page_header{ background-color:$theme_topbar_background_color; position:fixed; top:0; right:0; left:0; z-index:9; box-shadow:0 1px 3px rgba(17, 24, 39, .1); } .layout_page_header .container{ max-width:$theme_topbar_width; padding:0; } .harmony_header_inner{ display:flex; align-items:center; justify-content:flex-start; } .header_right{ flex:1; text-align:right; display:flex; align-items:center; justify-content:flex-end; margin-left:15px; } [dir="rtl"] .header_right{ margin-left:0; margin-right:15px; } .header_left{ display:flex; align-items:center; justify-content:flex-start; } /*Header Logo*/ .header_logo_contrast, .dark_mode .header_logo, .light_mode .header_logo{ display:none; } .dark_mode .header_logo_contrast, .light_mode .header_logo_contrast{ display:block; } .header_logo a, .header_logo_contrast{ font-size:1.4rem; font-weight:600 !important; } .header_logo a:hover, .header_logo_contrast:hover{ text-decoration:none; } .header_logo img{ max-width:100%; max-height:46px; } .header_logo_contrast img{ width:100%; max-height:46px; } /*Header Search*/ .header_search{ margin-left:15px; } [dir="rtl"] .header_search{ margin-left:0; margin-right:15px; } .layout_core_search_mini #global_search_form{ padding:0; position:relative; margin:auto; background:none !important; } .layout_core_search_mini #global_search_field{ outline:none; border-width:0; padding:10px 15px; border-radius:10px; padding-right:38px; min-height:40px; background-color:$theme_header_search_background_color; color:$theme_header_search_font_color; width:220px; border:1px solid $theme_header_search_background_color !important; transition:0.5s; } .layout_core_search_mini #global_search_field:focus-visible, .layout_core_search_mini .focused #global_search_field{ width:250px; } [dir="rtl"] .layout_core_search_mini #global_search_field{ padding-right:15px; padding-left:38px; } .layout_core_search_mini #global_search_form button{ background-color:transparent; border-width:0; color:$theme_header_search_font_color; height:38px; width:38px; font-size:15px; border-width:0 !important; top:50%; transform:translateY(-50%); } .layout_core_search_mini #global_search_form button *{ color:$theme_font_color_light !important; } /*Main Menu*/ .harmony_main_menu{ padding-right:12px; border-right-width:1px; } [dir="rtl"] .harmony_main_menu{ padding-right:0px; padding-left:12px; border-right-width:0px; border-left-width:1px; } .harmony_main_menu .layout_core_menu_main .navbar{ padding:0; } .harmony_main_menu .navigation{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; } .harmony_main_menu .navigation > li{ position:relative; } .harmony_main_menu .navigation > li + li{ margin-left:2px; } [dir="rtl"] .harmony_main_menu .navigation > li + li{ margin-left:0px; margin-right:2px; } .harmony_main_menu .navigation > li > .menu_core_main{ +noselect; padding:10px 8px 5px; margin:0; outline:none; font-weight:400; display:block; position:relative; color:$theme_topbar_menu_link_color; } .layout_core_menu_main .navigation > li .main_menu_focused{ pointer-events:none; } .layout_core_menu_main .navigation > li a:focus-visible{ color:$theme_topbar_menu_link_color; } .layout_core_menu_main .navigation > li > a:link, .layout_core_menu_main .navigation > li > a:visited{ color:$theme_topbar_menu_link_color; } .harmony_main_menu .navigation > li > .menu_core_main::before{ content:''; width:0; height:2px; position:absolute; left:0; right:0; bottom:0; margin:auto; transition:0.5s; background-color:transparent; } .harmony_main_menu .navigation > li.active .menu_core_main::before, .harmony_main_menu .navigation > li:hover .menu_core_main::before{ background-color:$theme_topbar_menu_link_hover_color; width:100%; } .harmony_main_menu .navigation > li > .menu_core_main > i{ display:block; margin-bottom:1px; text-align:center; font-family:"Font Awesome 5 Free"; font-style:normal; font-size:1.2rem; height:25px; opacity:0.8; } .harmony_main_menu .navigation > li > .menu_core_main > span{ text-align:center; display:block; font-size:$theme_topbar_menu_link_size; font-family:$theme_topbar_menu_font_family; } .harmony_main_menu .navigation > li:hover > .menu_core_main, .harmony_main_menu .navigation > li.active > a, .harmony_main_menu .navigation > li.active > a *{ color:$theme_topbar_menu_link_hover_color !important; text-decoration:none; } .harmony_main_menu .mobile_navigation{ display:none; } /*Main Menu Sub Menu*/ ul.main_menu_submenu{ background-color:$theme_list_background_color; -webkit-filter:drop-shadow(0 2px 4px rgba(44, 101, 144, 0.5)); filter:drop-shadow(0 2px 4px rgba(44, 101, 144, 0.5)); position:absolute; min-width:150px; z-index:98; max-height:80vh; overflow:auto; right:0; top:66px; border-radius:5px; display:none; padding:10px 0; } [dir="rtl"] ul.main_menu_submenu{ right:auto; left:0; } ul.main_menu_submenu.showmenu{ display:block; } ul.main_menu_submenu > li > a{ position:relative; display:block; outline:none; overflow:hidden; white-space:nowrap; text-decoration:none; text-transform:capitalize; padding:8px 15px; } ul.main_menu_submenu > li > a:hover{ background-color:$theme_list_background_color_hover; } ul.main_menu_submenu > li > a > i{ color:$theme_font_color_light; opacity:.8; margin-right:3px; } [dir="rtl"] ul.main_menu_submenu > li > a > i{ margin-left:3px; margin-right:0; } ul.main_menu_submenu > li > a span{ font-family:$theme_topbar_menu_font_family; } /*Mini Menu*/ .layout_core_menu_mini{ display:flex; justify-content:space-between; align-items:center; } #core_menu_mini_menu > ul{ display:flex; align-items:center; justify-content:flex-end; } .guest-user #core_menu_mini_menu > ul{ min-width:165px; } #core_menu_mini_menu > ul > li{ margin-left:10px; position:relative; text-align:center !important; min-width:50px; } [dir="rtl"] #core_menu_mini_menu > ul > li{ margin-left:0; margin-right:10px; text-align:center !important; } #core_menu_mini_menu > ul > li a.show_icons{ display:flex; align-items:center; justify-content:center; flex-direction:column; color:$theme_topbar_menu_link_color; padding:10px 0px 5px; width:auto; height:auto; } #core_menu_mini_menu > ul > li a.show_icons:hover{ color:$theme_topbar_menu_link_hover_color; text-decoration:none; } #core_menu_mini_menu > ul > li.core_mini_menu_profile > a > .bg_thumb_icon{ border-width:0; border-radius:50%; margin:0; height:25px; width:25px; } #core_menu_mini_menu > ul > li.core_mini_menu_profile > a > .bg_thumb_icon:before{ font-size:12px; } #core_menu_mini_menu > ul > li.core_mini_menu_profile > a .icon_down{ display:none !important; } #core_menu_mini_menu > ul > li.core_mini_menu_profile > a ._linktxt:after{ content:"\\f0dd"; font-family:'Font Awesome 5 Free'; font-weight:700; margin-left:3px; line-height:0; position:relative; top:-1px; } [dir="rtl"] #core_menu_mini_menu > ul > li.core_mini_menu_profile > a ._linktxt:after{ margin-left:0; margin-right:3px; } #core_menu_mini_menu > ul > li a:focus-visible{ outline:0; } #core_menu_mini_menu > ul > li a.show_icons i{ font-weight:400; padding:0 !important; display:flex; align-items:center; justify-content:center; height:25px !important; margin:0; opacity:0.8; width:100%; } #core_menu_mini_menu > ul > li .show_icons i.minimenu_icon:before{ font-size:1.2rem; padding:0; border-radius:0; } #core_menu_mini_menu>ul>li a.show_icons span._linktxt{ font-size:$theme_topbar_menu_link_size; font-family:$theme_topbar_menu_font_family; display:flex !important; white-space:nowrap; align-items:center; } .layout_core_menu_mini #core_menu_mini_menu > ul > li.mini_menu_currency_chooser > a.show_icons{ padding:10px 0px 5px; } .layout_core_menu_mini #core_menu_mini_menu > ul > li.mini_menu_currency_chooser > a:after{ display:none !important; } .layout_core_menu_mini #core_menu_mini_menu > ul > li.mini_menu_currency_chooser > a.show_icons > i img{ margin:0 !important; height:19px; width:19px; } .layout_core_menu_mini #core_menu_mini_menu > ul > li.mini_menu_currency_chooser > a.show_icons > i.icon_currency:before{ content:"\\f984"; font-family:uicons-regular-rounded !important; font-style:normal; font-weight:normal !important; } .layout_core_menu_mini #core_menu_mini_menu > ul > li.mini_menu_currency_chooser > a.show_icons > i.icon_currency img{ display:none; } #core_menu_mini_menu > ul > li.core_mini_menu_accessibility a.show_icons i:before{ content:"\\f97d"; font-family: uicons-regular-rounded !important; font-style: normal; font-weight: normal !important; } .core_mini_menu_accessibility .core_settings_dropdown { margin-left:-125px; } [dir="rtl"] .core_mini_menu_accessibility .core_settings_dropdown { margin-left:auto; margin-right:-125px; } /*Count Bubble*/ .minimenu_update_count_bubble, .minimenu_message_count_bubble{ width:16px; height:16px; min-width:16px; font-size:12px; text-align:center !important; line-height:15px; padding:0; margin-left:0; left:50%; margin-top:2px !important; z-index:1; } [dir="rtl"] .minimenu_update_count_bubble, [dir="rtl"] .minimenu_message_count_bubble{ margin-left:auto; margin-right:0; right:50%; left:auto; } .minimenu_update_count_bubble_active, .minimenu_message_count_bubble{ display:block; } /*Mini Menu Pulldown*/ .header_menu_mini .pulldown_contents_wrapper{ right:0; margin-right:0 !important; margin-left:0 !important; } [dir="rtl"] .header_menu_mini .pulldown_contents_wrapper{ right:auto; left:0; } .core_pulldown_header{ font-weight:600 !important; } .pulldown_contents > ul > li:hover, .pulldown_contents > ul > .notifications_unread, ul.notifications > li.notifications_unread, .pulldown_contents > ul > .pulldown_content_list_highlighted{ background-color:$theme_list_background_color_alt !important; transition:0.5s; } .header_menu_mini .pulldown_contents_wrapper, .core_settings_dropdown{ margin-top:65px; } /* Footer */ .layout_page_footer{ margin:20px auto 0; } .harmony_footer{ background-color:$theme_footer_background_color; background-position:center; background-repeat:no-repeat; background-size:cover; padding:30px 0 0; } .harmony_footer_logo, .harmony_footer_logo_contrast{ margin-bottom:18px; } .harmony_footer_logo_contrast, .dark_mode .harmony_footer_logo, .light_mode .harmony_footer_logo{ display:none; } .dark_mode .harmony_footer_logo_contrast, .light_mode .harmony_footer_logo_contrast{ display:block; } .harmony_footer_logo img, .harmony_footer_logo_contrast img{ max-width:100%; max-height:50px; } .harmony_footer_left .layout_core_menu_logo a{ font-size:1.6em; font-weight:600 !important; } .harmony_footer_left .layout_core_menu_logo a:hover{ text-decoration:none; } .harmony_footer_left p{ margin-bottom:0; } .footer_social_links{ margin-top:10px; } .footer_social_links h6{ font-weight:600 !important; color:$theme_footer_font_color; } .footer_social_links .navigation{ display:flex; align-items:center; justify-content:flex-start; margin:5px -5px 0; } .footer_social_links .navigation li{ padding:0 5px; } .footer_social_links .navigation li a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50px; background-color:$theme_list_background_color; color:$theme_base_color; font-size:16px; box-shadow:0 0 6px rgba(0, 0, 0, .15); transition:0.5s; margin-top:5px; } .footer_social_links .navigation li a:hover{ text-decoration:none; opacity:0.8; } .footer_social_links .navigation li a *{ color:$theme_base_color !important; } .footer_social_links .navigation li a i{ font-style:normal; font-family:"Font Awesome 5 Brands"; line-height:normal; } .footer_social_links .navigation li .core_social_site_twitter svg{ width:16px; height:16px; fill:$theme_base_color; } .footer_social_links .navigation li .core_social_site_twitter i::before{ display:none; } .harmony_footer .custom_footer_heading{ font-size:1.4em; font-weight:600 !important; color:$theme_footer_font_color; padding:0 0 10px; position:relative; } .harmony_footer .custom_footer_heading::after{ content:''; position:absolute; left:0; bottom:0; width:60px; height:4px; transform:skew(15deg, 0deg); background-color:$theme_base_color; } [dir="rtl"] .harmony_footer .custom_footer_heading::after{ right:0; left:auto; transform:skew(-15deg, 0deg); } .footer_link_bottom{ margin-top:15px; } .footer_link_bottom li a{ margin-top:20px; display:block; padding-left:22px; position:relative; transition:0.5s; } [dir="rtl"] .footer_link_bottom li a{ padding-left:0; padding-inline-start:22px; } .footer_link_bottom li a::after{ content:''; position:absolute; width:14px; height:14px; border-radius:50px; background-color:$theme_base_color; top:4px; left:0; opacity:0.15; } [dir="rtl"] .footer_link_bottom li a::after{ left:auto; right:0; } .footer_link_bottom li a::before{ content:'\\f101'; position:absolute; color:$theme_base_color; top:6px; left:3.5px; font-family:"Font Awesome 5 Free"; font-weight:900 !important; font-size:9px; line-height:normal !important; } [dir="rtl"] .footer_link_bottom li a::before{ content:'\\f100'; left:auto; right:3px; } .footer_link_bottom li a:hover{ color:$theme_base_color; text-decoration:none; } .layout_core_menu_footer a{ color:$theme_footer_link_color; } .layout_page_footer *{ color:$theme_footer_link_color; } .harmony_footer_contact_inner{ margin-top:15px; } .harmony_footer_contact_inner li{ margin-top:20px; display:block; position:relative; transition:0.5s; display:flex; align-items:center; } .harmony_footer_contact_inner li i{ width:24px; height:24px; border-radius:50px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; margin-right:8px; color:$theme_button_font_color !important; background-color:$theme_button_background_color !important; } [dir="rtl"] .harmony_footer_contact_inner li i{ margin-left:8px; margin-right:0; } .harmony_footer_contact_inner li span{ flex:1; } .harmony_footer_bottom{ padding:18px 0; margin-top:30px; } .harmony_footer_bottom_inner{ display:flex; align-items:center; } .harmony_footer_bottom_left{ display:flex; align-items:center; justify-content:flex-start; font-size:$theme_font_size_small; } .harmony_footer_bottom_left .menu_core_footer{ margin-left:30px; position:relative; text-decoration:none; } [dir="rtl"] .harmony_footer_bottom_left .menu_core_footer{ margin-left:0; margin-right:30px; } .harmony_footer_bottom_left .menu_core_footer::after{ content:''; position:absolute; width:6px; height:6px; border-radius:50px; left:-20px; top:6px; background-color:$theme_footer_link_color; transition:0.5s; } [dir="rtl"] .harmony_footer_bottom_left .menu_core_footer::after{ left:auto; right:-20px; } .harmony_footer_bottom_left .menu_core_footer:hover{ color:$theme_base_color; } .harmony_footer_bottom_left .menu_core_footer:hover::after{ background-color:$theme_base_color; } .harmony_footer_bottom .language_chooser .language_chooser_btn{ border-color:$theme_footer_link_color; margin-top:20px; color:$theme_footer_link_color; font-size:$theme_font_size_small; padding:5px 10px; } .footer_donotsell{ margin-top:10px; font-weight:400; font-size:0.9rem; display:flex; align-items:center; font-size:$theme_font_size_small; } .footer_donotsell input{ margin-top:0 !important; } .harmony_footer_bottom_right{ flex: 1; justify-content: flex-end; margin-left: 15px; display: flex; } [dir="rtl"] .harmony_footer_bottom_right{ margin-left:0; margin-right:15px; } /* GLOBAL NOTICES (OUTSIDE FORMS) Used to show a message or notice with an icon on a page, usually above content, not within a form. */ .tip{ overflow:hidden; clear:both; } .tip > span{ border-radius:5px; background-color:$theme_list_background_color_alt; border-width:1px; display:inline-block; padding:.5em .9em; float:left; margin-bottom:15px; } .tip > span:before{ content:"\\f0eb"; font-family:'Font Awesome 5 Free'; margin-right:5px; color:$theme_base_color; } [dir="rtl"] .tip > span{ float:right; } [dir="rtl"] .tip > span:before{ margin-right:0px; margin-left:5px; } .tip > span > a{ color:$theme_button_background_color; } /* GLOBAL FORM RESPONSES Used to show feedback from form submissions, i.e. error/result messages. */ ul.form-errors, ul.form-notices{ margin:0px 0px 20px 0px; overflow:hidden; } * + ul.form-errors, * + ul.form-notices{ margin-top:20px; } ul.form-errors > li, ul.form-notices > li{ + rounded; margin:7px 5px 7px 5px; padding:10px 15px 10px 15px; max-width:600px; overflow:hidden; border:1px solid #ccc; color:#464646 !important; box-sizing:border-box; } [dir="rtl"] ul.form-errors > li, [dir="rtl"] ul.form-notices > li{ float:right; clear:right; } ul.form-errors > li > b, ul.form-notices > li > b{ text-transform:uppercase; font-size:90%; } ul.form-errors > li > ul > li, ul.form-notices > li > ul > li{ font-size:90%; font-weight:600 !important; } ul.form-errors > li{ background-color:#f5f0db; border:none; } ul.form-errors > li:before{ content:"\\f071"; font-family:'Font Awesome 5 Free'; margin-right:5px; color:#FF9800; font-weight:900 !important; float:left; } [dir="rtl"] ul.form-errors > li:before{ margin-right:0px; margin-left:5px; } ul.form-notices > li{ background-color:#e9faeb; border:none; } ul.form-notices > li:before{ content:"\\f00c"; font-family:'Font Awesome 5 Free'; margin-right:5px; color:#4CAF50; font-weight:900 !important; } [dir="rtl"] ul.form-notices > li:before{ margin-right:0px; margin-left:5px; } /* GLOBAL FORM ELEMENTS Used for most forms throughout the site. */ button{ border-radius:$theme_widget_radius; background-color:$theme_button_background_color; color:$theme_button_font_color; padding:.5em .8em; font-size:100%; border:none; transition:all .2s ease-in-out; outline:none !important; } button:hover, button:focus-visible{ background-color:$theme_button_background_color_hover; cursor:pointer; opacity:.8; transition:all .2s ease-in-out; } button:active{ background-color:$theme_button_background_color_active; background-image:none; } .btn-primary{ font-size:0.85em; padding:10px; } .btn-primary i{ font-size:0.90em; } input[type=text], input[type=email], input[type=password], input.text, textarea, .global_form .selectize-input{ background-color:$theme_input_background_color; color:$theme_input_font_color; border-width:1px; border-color:$theme_input_border_colors; padding:10px 15px; resize:none; box-sizing:border-box; outline-width:0; border-radius:10px; min-height:48px; box-shadow:inherit !important; font-size:$theme_body_font_size; } input[type=password]{ font-family:Arial, Helvetica, sans-serif; } .global_form .selectize-input input{ color:$theme_input_font_color; min-height:auto; } .global_form .selectize-input.items.has-options{ display:flex; align-items:center; flex-wrap:wrap; } input:focus-visible, select:focus-visible, textarea:focus-visible, select:focus-visible{ outline:none; } /* ::placeholder{ color:$theme_input_font_color; opacity:1; } */ input[type=checkbox], input[type=radio]{ border:none; padding:0px; margin:4px 5px 0 0; width:auto; display:block; float:left; } [dir="rtl"] input[type=checkbox], [dir="rtl"] input[type=radio]{ margin:4px 0 0 5px; float:right; } input[type=checkbox] + label, input[type=radio] + label{ display:block; cursor:pointer; } textarea{ width:100%; resize:none; } textarea.codebox{ width:95%; min-height:200px; font-family:courier new, courier, serif; } select{ + rounded(2px); background-color:$theme_input_background_color; color:$theme_input_font_color; border-width:1px; border-color:$theme_input_border_colors; padding:10px 15px; padding-right:20px; box-sizing:border-box; outline-width:0; border-radius:$theme_widget_radius; min-height:48px; font-size:$theme_body_font_size; font-family:Arial, Helvetica, sans-serif; } [dir="rtl"] select{ padding:10px 15px; padding-right:20px; } select option{ padding:0px 10px 0px 3px; font-family:Arial, Helvetica, sans-serif; } [dir="rtl"] select option{ padding:0px 3px 0px 10px; } a.buttonlink{ display:inline-block; font-size: $theme_font_size; } a.buttonlink_right{ font-weight:600 !important; display:inline-block; } a.buttonlink:hover a.buttonlink_right:hover{ text-decoration:none; } br.multi-text-separator{ margin-bottom:8px; } .selectize-control .selectize-dropdown{ border-width:0; } /*IM text area */ textarea.im_menu_convo_input{ padding:0px !important; } /* LARGE BOX FORM These styles are for large forms that are given an exclusive page. They are not intended for smaller forms that are embedded elsewhere. Examples:Signup form, member settings form, etc. */ /* form container */ .global_form{ clear:both; } /* external form border */ .global_form > div{ margin:0px auto 0px auto; } /* internal form border */ .global_form > div > div{ border:0px solid $theme_form_border_color; padding:0px; background-color:$theme_form_background_color; box-sizing:border-box; } .global_form > div > div h3{ font-family:$theme_box_header_font_family; margin:-20px -20px 20px; padding:20px 20px 0; border-radius:$theme_widget_radius; font-size:$theme_headline_size_medium; font-weight:600; } .global_form > div .form-elements{ overflow:hidden; } /* form headline */ .global_form div.form-wrapper-heading{ font-weight:600 !important; border-bottom:1px solid $theme_foreground_border_color_light; height:1em; margin-bottom:15px; } .global_form div.form-wrapper-heading > span{ display:block; position:absolute; overflow:hidden; padding:4px 6px 4px 0px; font-size:110%; background:$theme_list_background_color; } [dir="rtl"] .global_form div.form-wrapper-heading > span{ padding:4px 0px 4px 6px; } #messages_compose .overTxtLabel{ margin-top:8px; } .layout_user_browse_search .browse-range-wrapper select{ width:46%; margin-right:5px; } .global_form div.form-wrapper + div.form-wrapper-heading{ margin-top:10px; } .activity-post-container .compose-body select{ min-width:100%; } #compose-video-body button#compose-video-form-submit{ padding:12px 30px; } /* form instructions (after title) */ .global_form > div > div > h3 + p{ font-size:0.90em; margin-top:2px; max-width:100%; line-height:140%; box-sizing:border-box; } /* container row for a label (left) and element (right) */ .global_form div.form-wrapper{ clear:both; overflow:hidden; } /* left-side element label container */ .global_form div.form-label{ padding:4px 15px 0px 0; margin-bottom:5px; overflow:hidden; font-weight:600 !important; color:$theme_form_label_font_color; letter-spacing:0.5px; } [dir="rtl"] .global_form div.form-label{ padding-right:4px 0 0px 15px; } /* right-side form element container */ .global_form div.form-element{ min-width:600px; max-width:600px; text-align:left; margin-bottom:10px; overflow:hidden; float:left; clear:none; } [dir="rtl"] .global_form div.form-element{ text-align:right; float:right; } /* all paragraphs of text in the form */ .global_form div > p{ padding-bottom:10px; } /* paragraphs of text that come after an input element */ .global_form div > input + p, .global_form div > select + p{ margin-top:5px; font-size:$theme_font_size_small; } /* all text inputs in form */ .global_form input[type=text], .global_form input[type=email], .global_form input[type=password], .global_form .selectize-input, .global_form select{ width:100%; } /* only for text inputs that come after other text inputs */ /* i.e. for when there is a vertical list of text inputs */ .global_form input[type=text] + input[type=text]{ display:block; margin-top:5px; } /* all checkboxes and radios in form */ .global_form div.form-element .form-options-wrapper{ width:100%; } .global_form input[type=checkbox], .global_form input[type=radio]{ clear:left; } [dir="rtl"] .global_form input[type=checkbox], [dir="rtl"] .global_form input[type=radio]{ clear:right; } /* for clickable labels that appear to the right of elements */ /* such as checkboxes or radios */ .global_form input + label{ float:left; display:block; margin-top:0px; margin-left:2px; } [dir="rtl"] .global_form input + label{ float:right; margin-left:0px; margin-right:2px; } /* all textareas in form */ .global_form textarea{ padding:8px; max-width:100%; min-height:120px; } .global_form p.description{ margin:5px 0px; padding:0; font-size:$theme_font_size_small; } .global_form #submit-element{ margin-bottom:0px; } .global_form button[type=submit]{ margin-right:3px; } [dir="rtl"] .global_form button[type=submit]{ margin-right:0px; margin-left:3px; } /* Required field asterisk */ .form-label .required::after, label.required::after{ content:' *'; color:#f00; } #global_page_user-signup-index .form-label .required::after, #global_page_user-signup-index label.required::after{ position:absolute } /* SMALL BOX FORM These styles are for small box forms, such as the login box found by default on the main index page. Form names and inputs are stacked vertically (not floated) to fit into small-width content areas. */ .global_form_box{ + foreground; + rounded; width:auto; } .global_form_box > div > ul > li + li, .global_form_box .form-wrapper + .form-wrapper{ margin-top:10px; } .global_form_box .form-label{ padding:0px; width:auto; float:none; clear:both; margin:0px; } .global_form_box label{ text-align:left; display:block; margin-bottom:2px; } [dir="rtl"] .global_form_box label{ text-align:right; } .global_form_box .form-element{ overflow:hidden; } /* FILTER FORM These styles are for small, transparent forms that contain search boxes or filter fields. They are usually found on browse pages. */ form.filters{ + foreground; + rounded; } form.filters div.form-label{ margin-bottom:3px; font-size:90%; } form.filters div.form-element{ margin-top:2px; margin-bottom:10px; } form.filters button{ margin-top:4px; } form.filters dt{ font-size:90%; padding-bottom:2px; } form.filters dd{ margin-bottom:8px; } /* POPUP FORM These are used to style popup (i.e. smoothbox) forms. Also used to style popup response messages, etc. */ #smoothbox_window body{ background-color:$theme_list_background_color; } .global_form_popup{ padding:10px 10px 10px 13px; overflow:hidden; } [dir="rtl"] .global_form_popup{ padding:10px 13px 10px 10px; float:right; } .global_form_popup #submit-wrapper, .global_form_popup #cancel-wrapper{ float:left; overflow:hidden; } [dir="rtl"] .global_form_popup #submit-wrapper, [dir="rtl"] .global_form_popup #cancel-wrapper{ float:right; } .global_form_popup #buttons-wrapper{ margin-top:10px; } .global_form_popup #buttons-wrapper button{ margin-right:4px; } [dir="rtl"] .global_form_popup #buttons-wrapper button{ margin-right:0px; margin-left:4px; } .global_form_popup_message{ display:block; padding:1em; text-align:center; font-weight:600 !important; } /* UPLOAD FORM Styles the file upload form. */ #form-upload #submit-wrapper{ display:none; } #form-upload #demo-status a.buttonlink{ margin-right:15px; } /* SEARCH PAGE Used to style the main search page. */ #searchform{ padding:5px; } #searchform input[type=text]{ width:300px; } #searchform #query-label{ display:none; } #searchform #query-wrapper{ float:left; overflow:hidden; padding:3px; } [dir="rtl"] #searchform #query-wrapper{ float:right; } #searchform #submit-label{ display:none; } #searchform #submit-wrapper{ float:left; overflow:hidden; margin-left:1px; } [dir="rtl"] #searchform #submit-wrapper{ float:right; margin-right:1px; margin-left:0px; } .search_result{ overflow:hidden; width:500px; border-top-width:1px; padding:10px; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; } .search_result .search_photo{ display:block; float:left; overflow:hidden; margin-right:10px; } [dir="rtl"] .search_result .search_photo{ float:right; margin-right:0; margin-left:10px; } .search_result .search_info{ display:block; overflow:hidden; } .search_result .search_info p{ margin-bottom:0px; font-size:90%; } .search_result .search_title{ font-size:100%; } .search_result .highlighted-text{ font-weight:600 !important; } #searchform button#submit{ padding:12px 22px; } #searchform + br{ display:none; } /* COMMENTS These styles are used everywhere comments appear. */ .comments{ margin:5px -15px 0; } .comments .comments_options{ margin:0 10px 10px; } .comments .comments_options > span, .comments .comments_options > a{ margin:0 5px; } .comments > ul{ border-radius:0 0 $theme_widget_radius $theme_widget_radius; background-color:$theme_comments_background_color; overflow:hidden; } .comments > ul > li{ background-image:none; padding:10px 15px; overflow:hidden; } .comments > ul > li + li{ border-top-width:1px; border-color:$theme_border_color; } .comments ul ul > li{ display:inline-block; vertical-align:middle; } .comments .comments_author a{ font-weight:600 !important; margin-right:2px; } [dir="rtl"] .comments .comments_author a{ margin-right:0px; margin-left:2px; } [dir="rtl"] .comments_author{ float:right; } .comments .comments_author_photo{ float:left; overflow:hidden; line-height:0px; font-size:0px; } [dir="rtl"] .comments .comments_author_photo{ float:right; } .comments .comments_options{ font-weight:600 !important; font-size:$theme_font_size_small; color:$theme_font_color_light; } .comments .comments_comment_options > a{ font-size:$theme_font_size_small; font-weight:600 !important; margin-top:5px; overflow:hidden; } .comments .comments_info{ font-size:$theme_font_size_small; padding-left:10px; overflow:hidden; } [dir="rtl"] .comments .comments_info{ padding-left:0px; padding-right:5px; } .comments .comments_date{ font-size:$theme_font_size_small; color:$theme_font_color_light; overflow:hidden; padding-top:5px; } .comments .comments_date li.sep{ margin:0 2px; } .comments .comments_date li > a:before{ display:none; } .comments > form{ background-image:none; border-width:1px 0 0; padding:10px 15px; } .comments > form .compose-content{ border-width:1px; padding:10px; border-radius:$theme_widget_radius; } .comments > form > textarea{ width:100%; min-height:50px !important; } .comments > form > button{ display:block; margin-top:7px; padding:8px 14px; } div.comments_comment_likes_tips{ border:1px solid $theme_foreground_border_color; padding:4px 7px; background-color:$theme_foreground_background_color; color:$theme_font_color_light; font-size:0.9em; } /* HEADLINE Used at the top of most browse pages. Often contains button-style tabs. */ .headline h2{ margin:0px 20px 0px 0; display:inline-block; vertical-align:middle; font-size:1.4rem; font-weight:600; } [dir="rtl"] .headline h2{ margin:0px 0 12px 0px; } /* TABS (BUTTON STYLE, DEFAULT) */ .tabs{ overflow:hidden; display:inline-block; vertical-align:middle; margin-left:20px; } [dir="rtl"] .tabs{ margin-left:0px; margin-right:20px; } .tabs > ul{ display:inline-block; vertical-align:middle; } .tabs > ul > li{ margin-right:5px; display:inline-block; vertical-align:middle; } [dir="rtl"] .tabs > ul > li{ margin-right:0px; margin-left:5px; } .tabs > ul > li > a{ display:inline-block; color:$theme_buttontabs_font_color; background-color:$theme_buttontabs_background_color; padding:8px 15px; font-size:$theme_tabs_font_size; font-family:$theme_buttontabs_font_family; transition:0.5s; border-radius:5px; } .tabs > ul > li.active > a, .tabs > ul > li > a:hover{ color:$theme_buttontabs_font_color_active !important; background-color:$theme_buttontabs_background_color_active !important; text-decoration:none; } .tabs > ul > li > a:focus-visible{ color:$theme_buttontabs_font_color_active !important; background-color:$theme_buttontabs_background_color_active !important; outline-offset:unset !important; outline:inherit !important; } .tabs > ul > li.active > a:hover{ text-decoration:none; } /* TABS (TAB STYLE, NON-DEFAULT) */ .tabs_alt{ background-color:transparent; background-image:none; padding:0px; -moz-user-select:none; -webkit-user-select:none; } .tabs_alt > ul{ border-width:1px; display:flex; align-items:center; justify-content:flex-start; margin:0 0 15px; padding:8px 5px; background:$theme_list_background_color; border-radius:+rounded($theme_widget_radius); overflow:hidden; } .tabs_alt > ul > li + li{ margin-left:4px; } [dir="rtl"] .tabs_alt > ul > li + li{ margin-left:0; margin-right:4px; } .tabs_alt > ul > li > a:focus-visible{ color:$theme_tabs_font_color_active; background-color:$theme_tabs_background_active_color; } .tabs_alt > ul > li > a{ text-decoration:none; color:$theme_tabs_font_color; outline:none; padding:10px 14px !important; display:inline-block; font-weight:normal; margin-bottom:-1px; border-radius:$theme_widget_radius; transition:0.5s; font-family:$theme_tabs_font_family; font-size:$theme_tabs_font_size; } .tabs_alt > ul > li.tab_active > a, .tabs_alt > ul > li.active > a, .tabs_alt > ul > li > a:hover{ border-bottom:0px solid $theme_tabs_border_color_active !important; color:$theme_tabs_font_color_active !important; position:relative; background-color:$theme_tabs_background_active_color; } .tabs_alt > ul > li > a span{ font-size:90%; font-weight:normal; margin-left:4px; border:none; } [dir="rtl"] .tabs_alt > ul > li > a span{ margin-left:0px; margin-right:4px; } .tab_container_inactive{ display:none; } .tabs_alt > ul > li.tab_open > a{ border-bottom:none; background-color:$theme_pulldown_background_color_active !important; color:$theme_pulldown_font_color_active; position:relative; padding:7px 9px 7px 9px; } .tabs_alt > ul > li.tab_open > a:focus-visible{ background-color:$theme_pulldown_background_color_active !important; } .tab_pulldown_contents_wrapper{ +rounded(3px, true, false, false, false); overflow:hidden; margin-top:0 !important; display:none; margin-top:10px; } .tab_pulldown_contents{ +boxborder; border-radius:10px; overflow:hidden; background:$theme_pulldown_contents_background_color; position:absolute; z-index:1; } .tab_pulldown_contents > ul{ min-width:150px; } .tab_pulldown_contents > ul > li{ font-family:$theme_buttontabs_font_family; } .tab_pulldown_contents > ul > li a{ display:block; padding:10px; font-size:0.8rem; } .tab_pulldown_contents > ul > li.active a{ background-color:$theme_pulldown_contents_list_background_color_active; color:$theme_pulldown_contents_list_font_color_active; } .tab_pulldown_contents > ul > li + li a{ border-top:1px solid $theme_border_color; } .tab_pulldown_contents > ul > li:hover a{ background-color:$theme_pulldown_contents_list_background_color_hover; color:$theme_pulldown_contents_list_font_color_active; text-decoration:none; } .tab_pulldown_contents > ul > li a:focus-visible{ background-color:$theme_pulldown_contents_list_background_color_hover; color:$theme_pulldown_contents_list_font_color_active; outline:none; } .tabs_alt > ul > li.tab_open .tab_pulldown_contents_wrapper{ display:block; } [dir="rtl"] .tabs_alt > ul > li.tab_open .tab_pulldown_contents_wrapper{ left:0; } /* TAGS Styles lists of tags that are used for message recipients, lists of friend lists, etc. Each tag has its own remove link. */ .tag{ + rounded(3px); display:inline-block; background-color:$theme_tag_background_color; font-weight:600 !important; display:inline-block; float:left; padding:.4em .6em .4em .6em; margin:0px 10px 5px 0px; font-size:90%; } [dir="rtl"] .tag{ float:right; margin:0px 0px 5px 10px; } .tag > a{ text-decoration:none; padding-left:6px; text-transform:uppercase; } [dir="rtl"] .tag > a{ float:left; padding-left:0px; padding-right:6px; } /*Activity Feed Css*/ .layout_middle .layout_activity_feed > h3{ border-width:1px 1px 0 1px; margin:0 0 0px; box-shadow:none !important; } .activity-post-container{ border-radius:0 0 $theme_widget_radius $theme_widget_radius; margin-bottom:$theme_box_space; border:1px solid $theme_border_color; } .compose-content{ +rounded($theme_widget_radius); border-width:0; padding:1em; background:$theme_list_background_color; box-sizing:border-box; } .compose-container .overTxtLabel{ padding:14px 0px 0px 14px; } [dir="rtl"] .compose-container .overTxtLabel{ right:0; left:4px; } .compose-content-counter{ text-align:center !important; font-size:$theme_font_size_small; } .activity-post-container .compose-menu{ border-top-width:1px; padding:10px 0 0; } div.compose-menu a.compose-activator{ border-radius:5px; padding:5px 10px; margin-top:3px; margin-right:3px; } div.compose-menu a.compose-activator:hover{ background:$theme_list_background_color_hover; } .compose-menu .privacy_list, .compose-menu #compose-submit{ border-radius:5px; } .layout_activity_feed{ border-width:0 !important; } ul.feed .feed_item_username{ font-weight:600 !important; } html ul.feed .feed_item_photo{ margin-right:10px; } .feed .item_icon_group .timestamp{ left:95px !important; } [dir="rtl"] .feed .item_icon_group .timestamp{ left:auto !important; right:95px !important; } ul.feed .feed_item_attachments{ padding:0 !important; } ul.feed .activity-item{ +boxborder; background:$theme_list_background_color; padding:15px 15px 0; margin-bottom:$theme_box_space; border-radius:$theme_widget_radius; position:relative; overflow:visible; } html ul.feed .feed_item_date::before{ vertical-align:baseline; } .feed_attachment_album_photo img{ border:0; max-width:100%; max-height:inherit; } .feed_item_posted, .feed_item_generated{ display:block; min-height:50px; margin-bottom:10px; } ul.feed > li > #activity-feed{ padding:0; } ul.feed .feed_item_icon{ margin:15px -15px 0; padding:10px 10px 2px; border-top-width:1px; border-color:$theme_border_color; } ul.feed .feed_item_icon > ul > li + li{ margin-left:8px; } [dir="rtl"] ul.feed .feed_item_icon > ul > li + li{ margin-left:0px; margin-right:8px; } ul.feed .feed_item_icon > ul > li > span{ display:none; } .guest-user ul.feed .feed_item_icon{ margin-top:0; padding:0; border-top-width:0; } ul.feed .feed_item_icon > ul > li > a{ border-radius:5px; position:relative; display:flex; align-items:center; justify-content:center; height:35px; padding:0 10px; font-size:1em; } ul.feed .feed_item_icon > ul > li > a::before{ font-family:'Font Awesome 5 Free'; display:inline-block; margin-right:6px; display:inline-flex; align-items:center; justify-content:center; border-radius:50px; font-size:0.8rem; transition:0.5s; } [dir="rtl"] ul.feed .feed_item_icon > ul > li > a::before{ margin-right:0; margin-left:6px; } ul.feed .feed_item_icon > ul > .feed_item_option_unlike a{ color:$theme_base_color; } ul.feed .feed_item_icon > ul > .feed_item_option_comment a::before{ content:'\\f075'; } .feed_item_icon > ul > .feed_item_option_like a::before, ul.feed .feed_item_icon > ul > .feed_item_option_unlike a::before{ content:'\\f164'; } ul.feed .feed_item_icon > ul > .feed_item_option_unlike a::before{ color:$theme_base_color; font-weight:bold; } ul.feed .feed_item_icon > ul > .feed_item_option_edit a::before{ content:'\\f044'; } ul.feed .feed_item_icon > ul > .feed_item_option_share a::before{ content:'\\f14d'; } ul.feed .feed_item_icon > ul > .feed_item_option_delete a::before{ content:'\\f2ed'; } ul.feed .feed_item_icon > ul > .feed_item_option_report a::before{ content:'\\f024'; } ul.feed .feed_item_icon > ul a:hover{ background-color:$theme_list_background_color_hover; text-decoration:none; } .comment-likes-activity-feed{ border-top-width:1px; margin-top:20px; padding-top:10px; } .comment-likes-activity-feed > div{ font-size:100% !important; } .comment-likes-activity-feed > div ul > li{ margin-right:15px; } .comment-compose-container .overTxtLabel{ padding:10px; } .comment-compose-container #compose-link-body{ border-width:1px; border-radius:10px; padding:10px; } #compose-link-body #compose-link-form-input{ width:100%; } .activity-post-container .compose-music-link, .activity-post-container .compose-music-link-playing{ border-width:1px; border-radius:10px; padding:15px 10px; display:block; } .activity-post-container .compose-music-link:before{ background-color:#3f4e61; padding:8px; border-radius:5px; color:#fff; font-size:1.2em; } .activity-post-container .compose-music-link-playing:before{ font-family:'Font Awesome 5 Free'; font-weight:600; margin-right:5px; } [dir="rtl"] .activity-post-container .compose-music-link-playing:before{ margin-left:5px; margin-right:0; } .activity-post-container #compose-link-body button{ padding:12px 30px; } ul.feed .feed_item_attachments .feed_attachment_core_link{ padding:10px; display:block; border-width:1px; border-radius:$theme_widget_radius; } ul.feed .feed_attachment_photo a > span{ width:160px; } ul.feed .feed_item_bodytext{ font-size:0.9rem; } ul.feed .feed_item_bodytext a{ color:$theme_base_color; } ul.feed .feed_attachment_classified, ul.feed .feed_attachment_travel, ul.feed .feed_attachment_group, ul.feed .feed_attachment_blog, ul.feed .feed_attachment_bizlist, ul.feed .feed_attachment_event, ul.feed .feed_attachment_employment, ul.feed .feed_poll_rich_content{ border-radius:$theme_widget_radius; border-width:1px; } ul.feed .feed_attachment_event{ display:block; overflow:hidden; } ul.feed .feed_attachment_classified > div > a, ul.feed .feed_attachment_travel > div > a, ul.feed .feed_attachment_group > div > a, ul.feed .feed_attachment_blog > div > a, ul.feed .feed_attachment_bizlist > div > a, ul.feed .feed_attachment_event > div > a, ul.feed .feed_attachment_employment > div > a, ul.feed .feed_poll_rich_content > div > a{ background-color: $theme_list_background_color_alt; text-align:center; } ul.feed .feed_attachment_classified > div > a img, ul.feed .feed_attachment_travel > div > a img, ul.feed .feed_attachment_group > div > a img, ul.feed .feed_attachment_blog > div > a img, ul.feed .feed_attachment_bizlist > div > a img, ul.feed .feed_attachment_event > div > a img, ul.feed .feed_attachment_employment > div > a img, ul.feed .feed_poll_rich_content > div > a img{ border-width:0; max-width:100%; max-height:200px; object-fit:contain; } ul.feed .feed_attachment_employment, ul.feed .feed_poll_rich_content{ padding:10px; } ul.feed .feed_attachment_classified > div > div, ul.feed .feed_attachment_travel > div > div, ul.feed .feed_attachment_group > div > div, ul.feed .feed_attachment_blog > div > div, ul.feed .feed_attachment_bizlist > div > div, ul.feed .feed_attachment_event > div > div{ padding:10px; } .feed_item_attachments .video_thumb_wrapper, ul.feed .feed_item_attachments .video_object{ border-width:1px; border-bottom-width:0; border-radius:$theme_widget_radius $theme_widget_radius 0 0; overflow:hidden; } ul.feed .feed_item_attachments .video_info{ border-width:1px; border-top-width:0; border-radius:0 0 $theme_widget_radius $theme_widget_radius; padding:15px 10px 12px; margin-top:-10px; } ul.feed .music_player_wrapper{ padding:0px 10px; border-radius:$theme_widget_radius; border-width:1px; margin-top:12px; } ul.feed .music_player_wrapper .playlist_short_player, ul.feed .music_player_wrapper .music_player{ border-radius:$theme_widget_radius; padding:10px; } .playlist_short_player .music_player_button_play{ margin-right:10px; } [dir="rtl"] .playlist_short_player .music_player_button_play{ margin-left:10px; margin-right:auto; } div.feed_viewmore{ border-width:0; background-color:$theme_list_background_color; border-radius:$theme_widget_radius; margin-bottom:20px; padding:8px 10px; } ul.feed .feed_item_link_desc{ font-size:0.82rem; } body#global_page_activity-index-view ul.feed .activity-item{ border-radius:0 0 $theme_widget_radius $theme_widget_radius; } /*Member Home Page*/ .layout_user_home_links .home-links-user{ display:none; } .layout_user_home_links .quicklinks, .blogs_gutter_options{ overflow:visible; margin:0 -15px; } .layout_user_home_links .quicklinks ul{ margin-bottom:0; } .layout_user_home_links .quicklinks ul li, ul.blogs_gutter_options li{ position:relative; padding:0; margin:0; } .layout_user_home_links .quicklinks ul li .buttonlink, ul.blogs_gutter_options .buttonlink{ font-size: $theme_font_size; color: $theme_font_color; padding:5px 0 5px 45px; display:block; } [dir="rtl"] .layout_user_home_links .quicklinks ul li .buttonlink, [dir="rtl"] ul.blogs_gutter_options .buttonlink{ padding:5px 45px 5px 0px; } .layout_user_home_links .quicklinks ul li .buttonlink:hover, ul.blogs_gutter_options .buttonlink:hover{ color: $theme_font_color; background-color:$theme_list_background_color_hover; } .layout_user_home_links .quicklinks ul li a:before, ul.blogs_gutter_options .buttonlink:before{ position:absolute; left:15px; text-align:center !important; width:24px; } [dir="rtl"] .layout_user_home_links .quicklinks ul li a:before, [dir="rtl"] ul.blogs_gutter_options .buttonlink:before{ left:auto; right:15px; } .layout_user_list_online div{ padding:0; } .layout_user_list_online .whosonline_thumb{ margin:0px 2px 4px; } .layout_user_list_online .whosonline_thumb .bg_thumb_icon{ height:52px; width:52px; position:relative; } .layout_user_list_online .whosonline_thumb .bg_thumb_icon::after{ content:''; position:absolute; background-color:#00ba00; width:10px; height:10px; border-radius:50px; bottom:5px; right:1px; } [dir="rtl"] .layout_user_list_online .whosonline_thumb .bg_thumb_icon::after{ right:auto; left:1px; } .layout_core_statistics ul{ padding:0; margin:0 -15px; } .layout_core_statistics ul > li{ padding:6px 15px; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; } .layout_core_statistics ul > li:nth-child(odd){ background-color:$theme_list_background_color_alt; } .layout_core_statistics ul > li div{ text-transform:capitalize; white-space:nowrap; overflow:hidden; display:inline-block; vertical-align:middle; float:none; text-overflow:ellipsis; flex:1; font-size:1em; } .layout_core_statistics ul > li span{ float:right; margin:0 0 0 5px; font-size:1em; float:none; order:1; } [dir="rtl"] .layout_core_statistics ul > li span{ float:none; margin-left:0; margin-right:5px; } [dir="rtl"] .layout_core_statistics ul > li div{ float:none; } /*Member Cover Photo Page*/ #global_content .layout_user_cover_photo, #global_content .layout_event_cover_photo, #global_content .layout_group_cover_photo{ border-radius:$theme_widget_radius !important; border-width:1px !important; } /*Browse Members*/ .browsemembers_results h3{ font-size:1.2em; } .browsemembers_criteria{ padding:0; } .browsemembers_criteria > ul > li{ font-size:100%; } .browsemembers_criteria > ul > li + li{ margin-top:8px; } .browsemembers_criteria > ul > li.browse-separator-wrapper, .browseclassifieds_criteria > ul > li.browse-separator-wrapper, .browsetravels_criteria > ul > li.browse-separator-wrapper{ border:0; margin:0; } .browsemembers_criteria ul li input[type=checkbox]{ margin-top:5px; } .browsemembers_results h3{ padding:0; margin-bottom:5px; } .layout_core_banner > div{ border-radius:$theme_widget_radius; overflow:hidden; } .layout_core_banner a{ border-radius:10px !important; } .browsemembers_results .member_grid > a{ border-radius:$theme_widget_radius; overflow:hidden; } .browsemembers_results div.browsemembers_results_info{ text-transform:capitalize; text-align:center !important; } .browsemembers_results div.browsemembers_results_info > a{ font-weight:600 !important; font-size:1.2em; } .browsemembers_results_links a.buttonlink{ width:100%; padding:12px 10px; transition:0.5s; border-radius:$theme_widget_radius; border-width:1px; } .browsemembers_results_links a.buttonlink:hover{ background-color:$theme_list_background_color_hover; } .browsemembers_criteria button{ width:100%; } .layout_left #find-wrapper, .layout_right #find-wrapper{ margin-top:10px; } .layout_left button, .layout_right button{ width:100%; margin-top:5px; } .browsemembers_criteria select{ width:100%; } .browseclassifieds_criteria > ul > li.browse-range-wrapper input[type="text"], .browsetravels_criteria > ul > li.browse-range-wrapper input[type="text"]{ width:48% !important; } /*Forgot Page*/ .layout_page_user_auth_forgot{ width:550px; margin:auto; } .layout_page_user_auth_forgot .global_form > div{ float:none !important; } .layout_page_user_auth_forgot .global_form > div > div h3{ background-color:$theme_list_background_color_alt; text-align:center; border-radius:$theme_widget_radius; padding:10px; font-weight:600 !important; font-size:1.2em; margin-bottom:15px; margin:0 0 15px; border-width:0; } .layout_page_user_auth_forgot .global_form > div > div > h3 + p{ text-align:center !important; } .layout_page_user_auth_forgot .global_form div.form-element{ min-width:100%; max-width:100%; } .layout_page_user_auth_forgot .global_form #buttons-wrapper, .layout_page_user_auth_forgot .global_form #buttons-wrapper *{ text-align:center !important; } .layout_page_user_auth_forgot div#buttons-wrapper div#buttons-label{ display:none; } .layout_page_user_auth_forgot div#buttons-wrapper button{ width:100%; padding:12px 15px; } .layout_page_user_auth_forgot div#buttons-wrapper a{ margin-top:5px; } body#global_page_user-auth-forgot .layout_page_user_auth_forgot .tip > span{ margin-bottom:0; } /*Login Page*/ #global_page_user-auth-forgot #global_content{ min-height:auto !important; padding:40px 0; } .layout_page_user_auth_login{ margin:auto; border-radius:$theme_widget_radius; overflow:hidden; } .layout_page_user_auth_login .layout_core_content{ overflow: hidden; margin: 20px } .user_login_page .user_login_form{ padding:30px 20px; } .user_login_page .user_login_form form{ padding:25px 0 0; } .user_login_page .user_login_form > h3{ text-transform:capitalize; font-size:1.6em; font-weight:600 !important; } .user_login_page #user_form_login #forgot-element{ margin-top:0; float:none !important; text-align:center !important; } .user_login_page .user_login_form div.form-wrapper{ margin-bottom:12px; } .user_login_form .user_showhidepassword > i{ margin-top:-46px; } .user_login_page #submit-element button{ display:block; width:100%; border-color:$theme_button_background_color !important; } /*Sign Up Page*/ .layout_page_user_signup_index .layout_core_content{ width:632px; margin:0 auto 50px; padding:5px 15px 15px !important; } .layout_page_user_signup_index .layout_core_content .global_form > div > div h3{ background-color:$theme_list_background_color_alt; text-align:center; border-radius:$theme_widget_radius; padding:10px; font-weight:600 !important; font-size:1.2em; margin:0 0 15px; border-width:0; } .layout_page_user_signup_index #terms-wrapper #terms-label{ display:none; } .layout_page_user_signup_index #terms-wrapper #terms-element{ margin:6px 0 12px; } .layout_page_user_signup_index #submit-wrapper #submit-label{ display:none; } .layout_page_user_signup_index #submit-wrapper button{ width:100%; padding:12px 20px; } .user_signup_details .birthday_wrapper .form-element{ flex-wrap:inherit !important; } .user_signup_details .birthday_wrapper .form-element select{ max-width:32.80% !important; min-width:32.80% !important; } .layout_page_user_signup_index .twostep_verify_message{ max-width:100%; } .layout_page_user_signup_index div#code-element input{ min-width:100%; } .layout_page_user_signup_index #SignupForm #current-element .user_edit_photo_main{ width:220px; height:220px; } .layout_page_user_signup_index #SignupForm #current-element .user_edit_photo_main img{ width:100%; height:100%; } .layout_page_user_signup_index #SignupForm div.preview-thumbnail{ margin: 20px 0 0; } .layout_page_user_signup_index #SignupForm div.thumbnail-controller{ margin: 20px 0 0 10px; } [dir="rtl"] .layout_page_user_signup_index #SignupForm div.thumbnail-controller{ margin: 20px 10px 0 0; } [dir="rtl"] .user_login_page .user_login_form input[type="password"], [dir="rtl"] #global_page_core-error-requireuser input[type="password"], [dir="rtl"] #global_page_user-signup-index input[type="password"], [dir="rtl"] #global_page_user-settings-password input[type="password"]{ padding-right:8px; } .layout_page_user_signup_index .user_showhidepassword{ top:48px !important; } .layout_page_user_signup_index .user_showhidepassword > i{ font-size:14px; } #passwordroutine_specialcharacters .special_char_overlay{ margin-top:-150px; } .layout_page_user_signup_index #SignupForm div#current-element br{ display:none; } .layout_page_user_signup_index #skiplink{ margin-top:16px; } .layout_page_user_signup_index #SignupForm .form-elements div#Filedata-wrapper{ margin-bottom:18px; } .layout_page_user_signup_index .form-elements button{ padding:12px 20px; } /*Authentication page*/ .twostep_auth_form h3{ background-color:$theme_list_background_color_alt; text-align:center; border-radius:$theme_widget_radius; padding:10px; font-weight:600 !important; font-size:1.2em; margin:0 0 15px; border-width:0; } .layout_page_user_signup_index .twostep_verify_message *{ color:#3c763d !important; } #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements, #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements *{ text-align:left !important; } [dir="rtl"] #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements, [dir="rtl"] #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements *{ text-align:right !important; } #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements button, [dir="rtl"] #global_content .layout_page_user_signup_index .twostep_auth_form .form-elements button{ text-align:center !important; } /*Fillter Form*/ form.filters dt, form.filters div.form-label{ font-size:100%; margin-bottom:0; } .layout_left .global_form_box label, .layout_right .global_form_box label, .browsemembers_criteria ul li label, .browsemembers_criteria > ul > li > span, .browsetravels_criteria > ul > li.browse-range-wrapper > span, form.filters .form-label label, form.filters dt label, .employments_browse_filters .browse-range-wrapper span.hint, .browseclassifieds_criteria .browse-range-wrapper span.hint{ margin-bottom:5px; } #filter_form input[type=text], #filter_form input[type=email], #filter_form input[type=password], #filter_form input.text, #filter_form select, .field_search_criteria input[type="text"], .field_search_criteria select, #filter_form input[type="text"], #filter_form input.text, #filter_form select, form.filters input[type="text"], form.filters input.text, form.filters select{ height:40px !important; min-height:auto; padding-top:5px; padding-bottom:5px; } .layout_left #filter_form #find-label, .layout_right #filter_form #find-label, .layout_left form.filters #find-label, .layout_right form.filters #find-label{ display:none; } #filter_form button, .field_search_criteria button, form.filters button{ padding:10px; } .browsetravels_criteria > ul > li.browse-range-wrapper, .browsetravels_criteria #category_id-wrapper, .employments_browse_filters #category_id-wrapper, .browseclassifieds_criteria .browse-range-wrapper, .browseclassifieds_criteria #category_id-wrapper{ margin-top:8px; } .bizlists_browse_filters ul div#category_id-wrapper{ margin-bottom:8px; } .layout_page_forum_index_index #global_search_form button{ padding:12px 20px; } /*Common Plugin Page*/ .blogs_browse span h3, .blogs_browse_info_title h3, .bizlists_browse_item .bizlists_browse_info_title h3, .bizlists_manage .bizlists_browse_info_title h3, .polls_browse_info h3, .events_browse .events_title > h3, .grid_wrapper > div .groups_title > h3, body#global_page_album-album-view .layout_core_content p, ul.albums_manage .albums_manage_info h3, .classifieds_browse_info_title h3, .classified_top > .classified_right h2, .travels_browse_item .travels_browse_info_title h3, .travels_manage .travels_browse_info_title h3, .employments_browse_info_title h3, ul.list_wrapper .groups_title h3, .videos_browse .video_title, ul.videos_manage .video_info h3, .music_browse_info_title h3{ font-size:1.3em; line-height:24px; padding:0; font-weight:600 !important; } .classified_top > .classified_right h2, .bizlist_top > .bizlist_right h2, .layout_page_blog_index_view .layout_core_content h2, .travel_right h2, .employment_top h2, .cover_photo_profile_information h2, #global_page_forum-forum-view .layout_middle > .generic_layout_container > h2, .layout_page_video_index_view .layout_core_content h2, .layout_page_music_playlist_view .layout_core_content h2{ font-size:1.6em; line-height:24px; font-weight:600 !important; } .polls_browse_info_date{ margin-top:0 !important; } .blogs_browse_info_blurbm, .bizlists_browse_info_des, .polls_browse_info_desc{ font-size:$theme_font_size_small; } .bizlist_right > h2{ font-size:1.5em } .bizlists_browse_filters > ul > li button{ margin-top:0; } .events_browse .events_browse_inner .events_info{ padding-top:10px; } .grid_wrapper > div .groups_title{ margin-top:0; } #chat_content_layout .chat_input_wrapper{ box-shadow:none !important; padding:5px 10px; } .global_form div#starttime-element, .global_form div#endtime-element{ display:flex; } .global_form div#starttime-element select, .global_form div#endtime-element select, .global_form div#starttime-element .event_calendar_container, .global_form div#endtime-element .event_calendar_container{ width:25% !important; } #global_page_blog-index-view .blogs_owner_icon + .blogs_gutter_name{ bottom:40px; } .blogs_browse > .blogs_browse_inner .blogs_browse_info_title a, .blogs_browse > .blogs_browse_inner .blogs_browse_info_title h3, .polls_browse_item > .polls_browse_item_inner .polls_browse_info_title a, .polls_browse_item > .polls_browse_item_inner .polls_browse_info_title h3{ font-weight:600 !important; } .layout_group_browse_search #find-label{ display:none; } .layout_group_browse_search div#find-element{ min-width:100%; max-width:100%; } .generic_list_wrapper, ul.generic_list_widget{ margin-bottom:0; } .layout_user_list_popular .popularmembers_name, ul.generic_list_widget .title, .layout_user_list_signups .newestmembers_name{ font-weight:600 !important; } /*Create Form*/ [class*='_index_create'] .global_form #buttons-label, [Id*='_create_form'] #buttons-label, [Id*='index-create'] #submit-wrapper #submit-label, [Id*='playlist-edit'] #submit-wrapper #submit-label, [Id*='index-create'] #upload-wrapper #upload-label, [Id*='index-edit'] #submit-label, [Id*='index-edit'] #buttons-label, [Id*='group-edit'] #buttons-label, [Id*='poll-edit'] #buttons-label, [Id*='index-upload'] #submit-label{ display:none; } [class*='_index_create'] .global_form button[type=submit], [Id*='_create_form'] button[type=submit], [Id*='index-create'] #submit-wrapper button[type=submit], [Id*='playlist-edit'] #submit-wrapper button, [Id*='index-edit'] button[type=submit], [Id*='group-edit'] button[type=submit], [Id*='poll-edit'] button[type=submit], [Id*='index-upload'] button[type=submit], [Id*='album-editphotos'] button[type=submit], [Id*='album-edit'] button[type=submit], [Id*='global_page_forum'] button[type=submit]{ padding:12px 20px; margin-top:5px; } [Id*='-edit'] .selectize-input > *{ vertical-align:top; } /*Music*/ .music_player_button_play{ font-size:18px; display:flex; align-items:center; justify-content:center; } #uploaded-file-list .file-name, #uploaded-file-list .file-remove b{ font-weight:500 !important; } /*Group*/ #global_page_group-group-edit form{ padding:0; margin:0; background-color:transparent !important; } /*Fourm*/ ul.forum_categories > li > div > h3{ font-size:1.3em; } ul.forum_categories .forum_title{ padding-top:12px; } ul.forum_categories .forum_title h3{ font-size:1.2em; } /*Travel*/ body#global_page_travel-photo-upload h2, body#global_page_bizlist-photo-upload h2, body#global_page_classified-photo-upload h2{ display:none; } /*Employment*/ .employments_browse_filters .browse-separator-wrapper{ border:0; margin:0; } /*Hastag Page*/ .layout_core_show_search_hashtags h3{ padding:0 !important; border:0; } /*User Setting Page*/ .user_setting_main_page_main .layout_middle > .user_invite_tabs{ padding:10px !important; margin-bottom:12px !important; } .user_setting_global_form .global_form > div > div h3, .dark_mode .user_setting_global_form .global_form > div > div h3, .light_mode .user_setting_global_form .global_form > div > div h3{ background-color:transparent !important; } .notifications_layout_head .btn i { font-style:normal; } .rich_content_body a{ color:$theme_base_color; } .light_mode .user_setting_global_form .btn-primary *{ color:#fff !important; } @-moz-document url-prefix() { body { display:none !important; } } /*Pages*/ .paginationControl > li > a { text-decoration:none !important; font-weight:400 !important; } /*Videos Plugin*/ #global_page_video-index-view h2{ line-height:1.6; } /*Responsive CSS*/ @include "responsive.css"; @include "harmony-custom.css";
Save Changes
Available Themes
Harmony
v6.5.1
by SocialEngine Core
(this is your current theme)