/* Appily Backoffice theme
Loaded from the Communication field via:
Edit this file in Plesk rather than the Backoffice textarea. */
.admin_account_login.general,
.admin_access_management_edit.general,
.admin_access_management_list.general,
.admin_account_edit.general,
.admin_application_list.general,
.application_customization_design_colors_edit.general,
.application_customization_design_style_edit.general,
.application_customization_features_list.general,
.application_customization_publication_app_index.general,
.application_customization_publication_infos_index.general,
.application_promote_index.general,
.application_settings_advanced_index.general,
.application_settings_apis_index.general,
.application_settings_domain_index.general,
.application_settings_tc_index.general,
.customer_application_edit.general,
.customer_application_list.general,
.message_application_index.general,
.subscription_application_create.general,
.placesbulkimporter_application_view.general,
.push_admin_global.general,
.whitelabel_editor_index.general,
.whitelabel_editor_activity.general,
.sales_admin_subscription_list.general,
.application_analytics_application_index.general,
.application_analytics_feature_index.general,
.cabride_dashboard_index.general,
.cabride_dashboard_payments.general,
.cabride_dashboard_rides.general,
.cabride_dashboard_users.general,
.cabride_dashboard_drivers.general,
.cabride_dashboard_vehicle-types.general,
.cabride_dashboard_form.general,
.cabride_dashboard_translations.general,
.cabride_dashboard_settings.general,
.cabride_vehicle_edit.general,
.cabride_driver_edit.general,
.linkslibs_application_view.general,
.sales_admin_invoice_list.general,
.webhook_dashboard_index.general,
.webhook_dashboard_edit.general,
.paymentcash_settings_index.general,
.paymentstripe_settings_index.general,
.eventpro_order_list.general,
.eventpro_event_list.general,
.eventpro_event_edit.general,
.eventpro_event_add.general,
.eventpro_order_details.general,
.eventpro_event_addartist.general,
.eventpro_order_attendee.general,
.eventpro_event_slider.general,
.eventpro_organizer_members.general,
.eventpro_organizer_memberadd.general,
.eventpro_organizer_memberedit.general {
background: #10131C !important;
}
#app-overview,
#list-overview,
#reload-overview {
background: #6366F1 !important;
}
.admin_account_login.general,
.admin_access_management_edit.general,
.admin_access_management_list.general,
.admin_account_edit.general,
.admin_application_list.general,
.application_customization_design_colors_edit.general,
.application_customization_design_style_edit.general,
.application_customization_publication_app_index.general,
.application_customization_publication_infos_index.general,
.application_promote_index.general,
.application_settings_advanced_index.general,
.application_settings_apis_index.general,
.application_settings_domain_index.general,
.application_settings_tc_index.general,
.customer_application_edit.general,
.customer_application_list.general,
.message_application_index.general,
.subscription_application_create.general,
.placesbulkimporter_application_view.general,
.push_admin_global.general,
.whitelabel_editor_index.general,
.whitelabel_editor_activity.general,
.sales_admin_subscription_list.general,
.application_analytics_application_index.general,
.application_analytics_feature_index.general,
.cabride_dashboard_index.general,
.cabride_dashboard_payments.general,
.cabride_dashboard_rides.general,
.cabride_dashboard_users.general,
.cabride_dashboard_drivers.general,
.cabride_dashboard_vehicle-types.general,
.cabride_dashboard_form.general,
.cabride_dashboard_translations.general,
.cabride_dashboard_settings.general,
.cabride_vehicle_edit.general,
.cabride_driver_edit.general,
.linkslibs_application_view.general,
.sales_admin_invoice_list.general,
.webhook_dashboard_index.general,
.webhook_dashboard_edit.general,
.paymentcash_settings_index.general,
.paymentstripe_settings_index.general,
.eventpro_order_list.general,
.eventpro_event_list.general,
.eventpro_event_edit.general,
.eventpro_event_add.general,
.eventpro_order_details.general,
.eventpro_event_addartist.general,
.eventpro_order_attendee.general,
.eventpro_event_slider.general,
.eventpro_organizer_members.general,
.eventpro_organizer_memberadd.general,
.eventpro_organizer_memberedit.general {
color: #fff !important;
}
.admin_account_login.general .content-color,
.admin_access_management_edit.general .content-color,
.admin_access_management_list.general .subcontent.content-color,
.admin_account_edit.general .content-color,
.admin_application_list.general .content-color,
.application_customization_design_colors_edit.general .subcontent.content-color,
.application_customization_design_style_edit.general .subcontent.content-color,
.application_customization_features_list.general #add_pages_content .subcontent.content-color,
.application_customization_features_list.general #pages_content .subcontent.content-color,
.application_customization_publication_app_index.general .subcontent.content-color,
.application_customization_publication_infos_index.general .subcontent.content-color,
.application_promote_index.general .subcontent.content-color,
.application_settings_advanced_index.general .subcontent.content-color,
.application_settings_apis_index.general .subcontent.content-color,
.application_settings_domain_index.general .subcontent.content-color,
.application_settings_tc_index.general .subcontent.content-color,
.customer_application_edit.general .content-color,
.customer_application_list.general .subcontent.content-color,
.message_application_index.general .subcontent.content-color,
.subscription_application_create.general .content-color,
.placesbulkimporter_application_view.general .content-color,
.push_admin_global.general .content-color,
.whitelabel_editor_index.general .content-color,
.whitelabel_editor_activity.general .content-color,
.sales_admin_subscription_list.general .content-color,
.application_analytics_application_index.general .content-color,
.application_analytics_feature_index.general .content-color,
.cabride_dashboard_index.general .content-color,
.cabride_dashboard_payments.general .content-color,
.cabride_dashboard_rides.general .content-color,
.cabride_dashboard_users.general .content-color,
.cabride_dashboard_drivers.general .content-color,
.cabride_dashboard_vehicle-types.general .content-color,
.cabride_dashboard_form.general .content-color,
.cabride_dashboard_translations.general .content-color,
.cabride_dashboard_settings.general .content-color,
.cabride_vehicle_edit.general .content-color,
.cabride_driver_edit.general .content-color,
.linkslibs_application_view.general .content-color,
.sales_admin_invoice_list.general .content-color,
.webhook_dashboard_index.general .content-color,
.webhook_dashboard_edit.general .content-color,
.paymentcash_settings_index.general .content-color,
.paymentstripe_settings_index.general .content-color,
.eventpro_order_list.general .content-color,
.eventpro_event_list.general .content-color,
.eventpro_event_edit.general .content-color,
.eventpro_event_add.general .content-color,
.eventpro_order_details.general .content-color,
.eventpro_event_addartist.general .content-color,
.eventpro_order_attendee.general .content-color,
.eventpro_event_slider.general .content-color,
.eventpro_organizer_members.general .content-color,
.eventpro_organizer_memberadd.general .content-color,
.eventpro_organizer_memberedit.general .content-color {
color: #fff !important;
background: rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.navbar.navbar-default.content-white-bkg {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.navbar.navbar-default.content-white-bkg div.logo-block.content-white-bkg {
background-color: transparent !important;
box-shadow: none !important;
}
.navbar.navbar-default.content-white-bkg .navbar-nav a {
background-color: transparent !important;
color: #fff !important;
}
.navbar.navbar-default.content-white-bkg li.is_current {
background-color: transparent !important;
border-bottom: 2px solid #fff !important;
}
.navbar-nav > li > .dropdown-menu {
background-color: #10131C !important;
}
#left-sidebar-wrapper {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(5px);
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.bkg-sidebar-left {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(5px);
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
#left-sidebar-wrapper .sidebar-nav a.active {
background: rgba(255, 255, 255, 0.3) !important;
}
.bkg-sidebar-left .active {
color: #fff;
}
#sidebar-left-group-editor, #sidebar-left-group-analytics, #sidebar-left-group-payment-gateways, #sidebar-left-group-settings, #sidebar-left-group-modules, #sidebar-left-group-cabride {
background: rgba(255, 255, 255, 0.1) !important;
}
.admin_application_list.general .content.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.color-blue {
background: #6366F1 !important;
}
.admin_application_list.general .badge-sub-custom,
.admin_application_list.general h4.app-name-title {
color: #fff !important;
}
.admin_application_list.general .table > thead:first-child > tr:first-child > th {
background: 0 0 !important;
color: #555 !important;
}
.admin_application_list.general input::placeholder {
color: #fff !important;
}
.admin_application_list.general input::-webkit-input-placeholder {
color: #fff !important;
}
.sb-search-content input::placeholder {
color: #fff !important;
}
.sb-search-content input::-webkit-input-placeholder {
color: #fff !important;
}
.admin_application_list.general #analytics_visits.content-white-bkg {
background: rgba(255, 255, 255, 0.7) !important;
}
.admin_application_list.general #analytics_installs.content-white-bkg {
background: rgba(255, 255, 255, 0.7) !important;
}
.admin_application_list.general #sb-tour-install-table.content-white-bkg {
background: rgba(255, 255, 255, 0.7) !important;
}
.admin_application_list.general #sb-tour-visit-table.content-white-bkg {
background: rgba(255, 255, 255, 0.7) !important;
}
.admin_application_list.general #sb-tour-install-table .table > thead > tr > th {
color: #555 !important;
}
#sb-tour-install-table.table-striped > tbody > tr > th,
.admin_application_list.general #sb-tour-install-table.table-striped > tbody > tr > td {
background: 0 0 !important;
color: #555 !important;
}
#sb-tour-visit-table.table-striped > tbody > tr > th,
.admin_application_list.general #sb-tour-visit-table.table-striped > tbody > tr > td {
background: 0 0 !important;
color: #555 !important;
}
.admin_application_list.general .border-purple {
border-color: #555 !important;
}
.step-background {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
#step_1.color-red-hover.active,
#step_1.color-red-hover:hover,
#step_2.color-yellow-hover.active,
#step_2.color-yellow-hover:hover,
#step_3.color-blue-hover.active,
#step_3.color-blue-hover:hover,
#step_4.color-purple-hover.active,
#step_4.color-purple-hover:hover,
#step_5.color-green-hover.active,
#step_5.color-green-hover:hover {
background: rgba(255, 255, 255, 0.55) !important;
color: #fff !important;
}
.title-editor {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.title-editor.border-blue,
.title-editor.border-green,
.title-editor.border-purple,
.title-editor.border-red,
.title-editor.border-yellow {
border-bottom: 2px solid #fff !important;
}
.application_customization_design_style_edit.general .content-options.content-white-bkg,
.application_customization_features_list.general .content-options.content-white-bkg,
.application_customization_publication_app_index.general .content-options.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
#modal_preview .border-red {
border-bottom: 2px solid #fff !important;
}
#modal_preview h3.template_title {
background: #6366F1 !important;
color: #fff !important;
}
#modal_preview .templates_content_preview {
border-left: transparent !important;
}
#modal_preview .content-color {
background: rgba(255, 255, 255, 0.1) !important;
}
#modal_preview ul {
backdrop-filter: blur(10px);
}
#modal_preview div.current p.template_image {
border: 2px solid #6366F1 !important;
}
.application_customization_design_style_edit.general img#layout_overview {
border: 1px dashed #fff;
}
#modal_modal_layouts .border-red {
border-color: #6366F1 !important;
}
#modal_modal_layouts .title-editor.border-red {
border-bottom: 2px solid #fff !important;
}
#modal_modal_layouts .template_title.color-red {
background: #6366F1 !important;
color: #fff !important;
}
#modal_modal_layouts .layouts_content_preview {
border-left: transparent !important;
}
#modal_modal_layouts .content-color {
background: rgba(255, 255, 255, 0.1) !important;
}
#modal_modal_layouts ul {
backdrop-filter: blur(10px);
}
#modal_modal_layouts .layout-size.current.border-red {
border: 2px solid #6366F1 !important;
}
#modal_modal_layouts div.current p.template_image {
border: 2px solid #6366F1 !important;
}
.application_customization_design_style_edit.general #font_content .custom-box {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.application_customization_design_style_edit.general .font-label {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.application_customization_design_style_edit.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.application_customization_design_style_edit.general #fonts .font-group {
border-bottom: 2px solid #fff !important;
color: #fff !important;
}
.btn-grey,
.btn.color-red,
.color-red,
input[type="radio"].color-red:after,
.color-purple,
.input-flat.color-purple {
background: #6366F1 !important;
}
.font-label.checked,
.font-label:hover,
input[type="checkbox"].color-red:after {
border-color: #6366F1 !important;
}
input[type="checkbox"].color-red:before,
input[type="radio"].color-red:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.application_customization_design_colors_edit.general .keyb {
background: rgba(255, 255, 255, 0.3) !important;
}
.application_customization_design_colors_edit.general .mini-color span.mini-text {
color: #fff !important;
filter: brightness(100%) !important;
}
.application_customization_design_colors_edit.general #app_colors .custom-padding h6 {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.application_customization_design_colors_edit.general ul.color-sections.content-color {
background: rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.application_customization_design_colors_edit.general .color-yellow,
.application_customization_design_colors_edit.general .input-flat.color-yellow,
.application_customization_design_colors_edit.general .sb-tgl-flip + .sb-tgl-btn:before,
.application_customization_design_colors_edit.general .sb-tgl-flip:checked + .sb-tgl-btn:after {
background: #6366F1 !important;
}
.application_customization_publication_app_index.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
input[type="radio"].color-purple:after {
background: #6366F1 !important;
}
input[type="checkbox"].color-purple:after {
border-color: #6366F1 !important;
}
i.active.border-purple {
border-color: #fff !important;
color: #fff !important;
}
.application_customization_publication_app_index.general #sb-tour-push-settings i.appIcon {
background: rgba(255, 255, 255, 0.1) !important;
}
input[type="radio"].color-green:before,
input[type="radio"].color-purple:before,
input[type="checkbox"].color-green:before,
input[type="checkbox"].color-purple:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.color-green,
.color-red,
.input-flat.color-green {
background: #6366F1 !important;
}
input[type="radio"].color-green:after {
background: #6366F1 !important;
}
input[type="checkbox"].color-green:before,
input[type="radio"].color-green:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
input[type="checkbox"].color-green:after {
border-color: #6366F1 !important;
}
.form-group input::placeholder {
color: #fff !important;
}
.form-group input::-webkit-input-placeholder {
color: #fff !important;
}
.application_customization_features_list.general #add_pages_content .title-editor,
.application_customization_features_list.general #pages_content .title-editor {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.application_customization_features_list.general #add_pages_content .title-editor.border-blue,
.application_customization_features_list.general #pages_content .title-editor.border-blue {
border-bottom: 2px solid #fff !important;
}
.application_customization_features_list.general #page .title-editor.border-blue {
border-bottom: 2px solid #6366F1 !important;
}
.application_customization_features_list.general #page.content-color {
background: rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.application_customization_features_list.general .content-options.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.application_customization_features_list.general .list-search .input-flat {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0 5px rgb(0 0 0 / 30%);
border-radius: 15px;
border: transparent;
margin: 2px;
}
.application_customization_features_list.general .list-search input::placeholder {
color: #fff !important;
}
.application_customization_features_list.general .list-search input::-webkit-input-placeholder {
color: #fff !important;
}
.application_customization_features_list.general #pages_content #option_values .content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
}
.application_customization_features_list.general #pages_content #option_values .option_value {
filter: brightness(0) invert(0.9) !important;
}
.application_customization_features_list.general #pages_content #option_values .option_value.selected,
.application_customization_features_list.general #pages_content #option_values .option_value:hover {
filter: brightness(0) invert(1) !important;
box-shadow: 0 0 3px #fff;
}
.application_customization_features_list.general #pages_content #carousel-container div.actions {
opacity: 0.9 !important;
}
.application_customization_features_list.general #pages_content #carousel-container .option_value.selected div.actions {
opacity: 1 !important;
}
.application_customization_features_list.general #add_pages_content .color-blue.block_add_pages_icon {
background-color: rgba(255, 255, 255, 0.15) !important;
border-radius: 15px;
}
.application_customization_features_list.general #add_pages_content #sb-tour-add-pages-filter li a.active:after {
border-left-color: rgba(255, 255, 255, 0.4) !important;
}
.application_customization_features_list.general #add_pages_content #sb-tour-add-pages-filter li a.active {
background: rgba(255, 255, 255, 0.3) !important;
}
.application_customization_features_list.general #add_pages_content #sb-tour-add-pages-filter li a:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
}
.application_customization_features_list.general #add_pages_content .carret li:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
}
.application_customization_features_list.general #add_pages_content .color-blue {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.featherlight .featherlight-content {
background: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(10px);
}
.featherlight .featherlight-content .color-blue.btn {
background: #6366F1 !important;
}
.application_customization_features_list.general input[type="radio"].color-blue:after {
background: #6366F1 !important;
}
.application_customization_features_list.general #header_editor .color-blue,
.application_customization_features_list.general #pages_content .color-blue {
background-color: #6366F1 !important;
}
.application_customization_features_list.general #header_editor #add_page_list .color-blue {
background-color: #00000090 !important;
}
.application_customization_features_list.general .content-feature {
border: none !important;
}
.application_customization_features_list.general input[type="checkbox"].color-blue:before,
.application_customization_features_list.general input[type="radio"].color-blue:before {
border: 2px solid #6366F1 !important;
}
.application_customization_features_list.general input[type="checkbox"].color-blue:after {
border-color: #6366F1 !important;
}
.application_customization_features_list.general input[type="radio"].color-blue:after {
background: #6366F1 !important;
}
.application_customization_features_list.general #catalog-tree span.category-hover:hover {
border-left: 2px solid #6366F1 !important;
}
.application_customization_features_list.general li.folder-sortable.active > span.folder-hover,
.application_customization_features_list.general span.folder-hover:hover {
background-color: #6366F1 !important;
}
.subscription_application_create.general p.or-separator span {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.subscription_application_create.general p.or-separator:after {
background: rgba(255, 255, 255, 0.2);
}
.subscription_application_create.general .list-group.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
}
.subscription_application_create.general .list-group-item {
background: rgba(255, 255, 255, 0.1) !important;
}
.subscription_application_create.general input[type="radio"].color-blue:after {
background: #6366F1 !important;
}
.subscription_application_create.general .color-blue {
background: #6366F1 !important;
}
.subscription_application_create.general input[type="radio"].color-blue:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.subscription_application_create.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.customer_application_edit.general .color-blue,
.customer_application_list.general .color-blue {
background: #6366F1 !important;
}
.customer_application_list.general .table.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.customer_application_list.general .border-grey {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.customer_application_list.general .dynatable-pagination-links li {
background: rgba(255, 255, 255, 0.1) !important;
}
.customer_application_list.general .dynatable-disabled-page,
.customer_application_list.general .dynatable-disabled-page:hover {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.customer_application_list.general .dynatable-active-page {
background: #6366F1 !important;
color: #fff;
}
.customer_application_edit.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.customer_application_edit.general input[type="checkbox"].color-blue:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.customer_application_edit.general input[type="checkbox"].color-blue:after {
border-color: #6366F1 !important;
}
.customer_application_list.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.customer_application_list.general input::placeholder {
color: #fff !important;
}
.customer_application_list.general input::-webkit-input-placeholder {
color: #fff !important;
}
.admin_access_management_edit.general .color-blue,
.admin_access_management_list.general .color-blue,
.push_admin_global.general .color-blue {
background: #6366F1 !important;
}
.admin_access_management_edit.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.admin_access_management_list.general #sb-tour-table-account.table.table-striped {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.admin_access_management_list.general #sb-tour-table-account.table.table-striped > tbody > tr > th {
background: 0 0 !important;
color: #fff !important;
}
.admin_access_management_list.general #sb-tour-table-account.table.table-striped > tbody > tr > td {
background: 0 0 !important;
color: #fff !important;
}
.admin_access_management_list.general .border-blue {
border-color: #fff !important;
}
.admin_access_management_edit.general input[type="checkbox"].color-blue:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.admin_access_management_edit.general input[type="checkbox"].color-blue:after {
border-color: #6366F1 !important;
}
.admin_access_management_edit.general .border-blue {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-color: #fff !important;
}
.admin_account_edit.general .color-blue {
background: #6366F1 !important;
}
.admin_account_edit.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.admin_account_edit.general input[type="checkbox"].color-blue:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.admin_account_edit.general input[type="checkbox"].color-blue:after {
border-color: #6366F1 !important;
}
.application_promote_index.general .color-blue {
background: #6366F1 !important;
}
.application_promote_index.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.message_application_index.general .color-blue {
background: #6366F1 !important;
}
.application_settings_tc_index.general .color-blue {
background: #6366F1 !important;
}
.application_settings_domain_index.general .color-blue {
background: #6366F1 !important;
}
.application_settings_domain_index.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.application_settings_advanced_index.general .color-blue {
background: #6366F1 !important;
}
.application_settings_advanced_index.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.application_settings_advanced_index.general input[type="checkbox"]:before,
input[type="radio"]:before {
border: 2px solid #6366F1 !important;
}
.application_settings_apis_index.general .color-blue {
background: #6366F1 !important;
}
.application_settings_apis_index.general .input-flat {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
/* Fix */
#row_filter_metrics.content-white-bkg,
.push_admin_global.general .content-white-bkg { background: transparent !important; }
#previewer { background: #6366F1 !important; }
.popover-content.content-color, .popover-title.title-editor, .popover-navigation.content-color { background: #10131C !important; }
.popover .form-control.btn.color-blue { background: #6366F1 !important; }
.popover[class*=tour-] { background: #10131C !important; }
#add_page_list .block_add_pages_icon { background-color: transparent !important; filter: brightness(0) invert(1); }
#add-pages .icons-list li span { color: #fff; }
.application_customization_features_list.general #header_editor #add_page_list .color-blue { filter: none; }
#folder #add_page_list { background-color: #778899 !important; }
#folder #add_page_list .block_add_pages_icon { background-color: transparent !important; }
.application_customization_publication_infos_index.general .table-striped > tbody > tr:nth-child(odd) > td,
.application_customization_publication_infos_index.general .table-striped > tbody > tr:nth-child(odd) > th {
background: transparent !important;
}
.placesbulkimporter_application_view.general .color-blue { background: #6366F1 !important; }
input[type=radio].color-blue:before, input[type=checkbox].color-blue:before {
background-color: white !important;
border: 2px solid #6366F1 !important;
}
.push_admin_global.general .border-blue {
background: transparent !important;
color: #fff !important;
}
.application_analytics_feature_index.general .content-white-bkg,
.application_analytics_application_index.general .content-white-bkg {
background-color: rgba(255, 255, 255, 0.15) !important;
}
.application_analytics_feature_index.general .table-striped > tbody > tr:nth-child(odd) > td,
.application_analytics_feature_index.general .table-striped > tbody > tr:nth-child(odd) > th {
background: transparent !important;
}
.application_analytics_feature_index.general .border-purple,
.application_analytics_feature_index.general .border-purple {
background: transparent !important;
border-color: #fff !important;
color: #fff !important;
}
.admin_account_login.general .content-white-bkg {
background: rgba(255, 255, 255, 0.15) !important;
}
.admin_account_login.general .optin-email,
.admin_account_login.general .show-tos { color: #c5c !important; }
input[type=checkbox]:before, input[type=radio]:before {
border: 2px solid #6366F1 !important;
}
input[type=checkbox]:before {
border: 2px solid #6366F1 !important;
}
#optin_email, #terms_of_service { color: #6366F1 !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background: rgba(255, 255, 255, 0.3) !important;
}
.tingle-modal-box { background: rgba(255, 255, 255, 0.15) !important; }
.message_application_index.general .panel { background: rgba(255, 255, 255, 0.15) !important; }
.message_application_index.general .border-blue {
background: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
border-color: #fff !important;
}
#modal_app_previewer .content-color {
background: rgba(255, 255, 255, 0.35) !important;
color: #fff !important;
}
#modal_app_previewer .title-editor { color: #fff !important; }
#page .input-flat,
#page .title-editor,
.featherlight .input-flat { color: #1A1F2E !important; }
#page .input-flat::placeholder { color: #1A1F2E !important; }
#page .input-flat::-webkit-input-placeholder { color: #1A1F2E !important; }
.application_analytics_application_index.general .table > thead > tr > th {
color: #fff !important;
background: rgba(0,0,0,0.15) !important;
}
.application_analytics_application_index.general .table-striped > tbody > tr:nth-child(odd) > td,
.application_analytics_application_index.general .table-striped > tbody > tr:nth-child(odd) > th { background: transparent !important; }
.application_analytics_application_index.general .border-purple { border-color: #1A1F2E !important; }
.step_menu_feature li, #step_1, #step_2, #step_3, #step_4, #step_5 { color: #fff !important; }
.cabride_dashboard_translations.general tr.second-tr th { background: transparent !important; }
.cabride_dashboard_translations.general .table > tbody > tr > td.info { background: transparent !important; }
.cabride_dashboard_translations.general .table > tbody > tr > td.success { background: transparent !important; }
.cabride_dashboard_settings.general #settings_content fieldset legend { background: transparent !important; }
.cabride_dashboard_vehicle-types.general .content-white-bkg,
.cabride_dashboard_drivers.general .content-white-bkg,
.cabride_dashboard_users.general .content-white-bkg,
.cabride_dashboard_rides.general .content-white-bkg,
.cabride_dashboard_payments.general .content-white-bkg,
.cabride_dashboard_index.general .content-white-bkg,
.cabride_dashboard_form.general .content-white-bkg { background: transparent !important; }
.cabride_dashboard_vehicle-types.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_vehicle-types.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_drivers.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_drivers.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_users.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_users.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_rides.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_rides.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_payments.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_payments.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_index.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_index.general .table-striped > tbody > tr:nth-child(odd) > th,
.cabride_dashboard_form.general .table-striped > tbody > tr:nth-child(odd) > td,
.cabride_dashboard_form.general .table-striped > tbody > tr:nth-child(odd) > th { background: transparent !important; }
.cabride_dashboard_vehicle-types.general .border-grey,
.cabride_dashboard_drivers.general .border-grey,
.cabride_dashboard_users.general .border-grey,
.cabride_dashboard_rides.general .border-grey,
.cabride_dashboard_payments.general .border-grey,
.cabride_dashboard_index.general .border-grey,
.cabride_dashboard_form.general .border-grey {
background: transparent !important;
color: #fff !important;
}
.subscription_application_create.general input[type="checkbox"]:after {
border-color: #6366F1 !important;
}
.subscription_application_create.general input[type="checkbox"]:before {
background-color: #fff !important;
border: 2px solid #6366F1 !important;
}
.linkslibs_application_view.general .title-editor {
border-bottom: solid 2px #ffffff !important;
}
.sales_admin_invoice_list.general .border-blue { border-color: #ffffff !important; }
/* Preview popups fix */
#previews .previews_list {
background: rgba(255,255,255,.3) !important;
backdrop-filter: blur(10px);
color: #ffffff !important;
}
/* Webhooks Fix */
.webhook_dashboard_index.general .border-grey,
.webhook_dashboard_index.general .content-white-bkg {
background: transparent !important;
color: #fff !important;
}
/* Colors Fix */
.minicolors-current-value input { color: #333 !important; }
/* Event Pro Fix */
.eventpro_order_list.general .color-blue, .input-flat.color-blue { background: #6366F1 !important; }
.eventpro_event_list.general .table.content-white-bkg,
.eventpro_order_list.general .table.content-white-bkg,
.eventpro_order_details.general .table.content-white-bkg,
.eventpro_event_edit.general .table.content-white-bkg,
.eventpro_event_addartist.general .table.content-white-bkg,
.eventpro_order_attendee.general .table.content-white-bkg,
.eventpro_organizer_members.general .table.content-white-bkg {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}
.eventpro_event_list.general .border-grey,
.eventpro_order_list.general .border-grey,
.eventpro_order_details.general .border-grey,
.eventpro_event_edit.general .border-grey,
.eventpro_event_addartist.general .border-grey,
.eventpro_order_attendee.general .border-grey,
.eventpro_organizer_members.general .border-grey {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.eventpro_event_list.general .dynatable-pagination-links li,
.eventpro_order_list.general .dynatable-pagination-links li,
.eventpro_order_details.general .dynatable-pagination-links li,
.eventpro_event_edit.general .dynatable-pagination-links li,
.eventpro_event_addartist.general .dynatable-pagination-links li,
.eventpro_order_attendee.general .dynatable-pagination-links li,
.eventpro_organizer_members.general .dynatable-pagination-links li {
background: rgba(255, 255, 255, 0.1) !important;
}
.eventpro_event_list.general .dynatable-disabled-page,
.eventpro_event_list.general .dynatable-disabled-page:hover,
.eventpro_order_list.general .dynatable-disabled-page,
.eventpro_order_list.general .dynatable-disabled-page:hover,
.eventpro_order_details.general .dynatable-disabled-page,
.eventpro_order_details.general .dynatable-disabled-page:hover,
.eventpro_event_edit.general .dynatable-disabled-page,
.eventpro_event_edit.general .dynatable-disabled-page:hover,
.eventpro_event_addartist.general .dynatable-disabled-page,
.eventpro_event_addartist.general .dynatable-disabled-page:hover,
.eventpro_order_attendee.general .dynatable-disabled-page,
.eventpro_order_attendee.general .dynatable-disabled-page:hover,
.eventpro_organizer_members.general .dynatable-disabled-page,
.eventpro_organizer_members.general .dynatable-disabled-page:hover {
background: rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.eventpro_event_list.general .dynatable-active-page,
.eventpro_order_list.general .dynatable-active-page,
.eventpro_order_details.general .dynatable-active-page,
.eventpro_event_edit.general .dynatable-active-page,
.eventpro_event_addartist.general .dynatable-active-page,
.eventpro_order_attendee.general .dynatable-active-page,
.eventpro_organizer_members.general .dynatable-active-page {
background: #6366F1 !important;
color: #fff;
}
/* Alert */
.wv-alerts {
display: block;
width: 100%;
color: #fff;
background: linear-gradient(-45deg,#f17c35,#e2336e,#e2336e,#7537e7);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
}
@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #10131C;
overflow: hidden;
position: fixed;
bottom: 30px;
left: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: #6366F1;
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
background: #3E9B67;
}
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}
/* Floating chat bubble */
#appily-chat-bubble {
position: fixed;
bottom: 20px;
right: 20px;
background: linear-gradient(135deg, #6366F1, #818CF8);
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
z-index: 10000;
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
font-family: 'Helvetica Neue', sans-serif;
}
/* Chat popup */
#appily-chat-popup {
position: fixed;
bottom: 90px;
right: 20px;
width: 360px;
height: 520px;
background: rgba(30, 34, 55, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: white;
border-radius: 22px;
display: none;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.45);
font-family: 'Helvetica Neue', sans-serif;
z-index: 9999;
}
/* Header */
#appily-chat-header {
background: linear-gradient(135deg, #6366F1, #818CF8);
padding: 12px 14px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
/* Close button */
#appily-chat-header button {
background: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
/* Messages */
#appily-chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Message styling */
.appily-message {
padding: 10px 12px;
border-radius: 12px;
max-width: 80%;
line-height: 1.4;
font-size: 14px;
}
.user-message {
background: #6366F1;
align-self: flex-end;
}
.ai-message {
background: #1B2030;
align-self: flex-start;
opacity: 0.95;
}
/* Input area */
#appily-chat-input {
display: flex;
padding: 10px;
background: rgba(20, 23, 40, 0.8);
}
#appily-chat-input input {
flex: 1;
padding: 10px;
border-radius: 12px;
border: none;
background: rgba(255,255,255,0.08);
color: white;
font-size: 14px;
outline: none;
}
#appily-chat-input input::placeholder {
color: rgba(255,255,255,0.6);
}
#appily-chat-input button {
margin-left: 8px;
padding: 10px 14px;
border-radius: 12px;
border: none;
background: #6366F1;
color: white;
cursor: pointer;
font-weight: 600;
}
/* =========================================================
FINAL UI FIX — LANGUAGE SELECTOR + AI BUBBLE
CLEAN + SAFE + MOBILE FRIENDLY
========================================================= */
/* -------------------------
LANGUAGE SELECTOR
------------------------- */
html body a#dLabel.language-selector,
html body a.language-selector {
background: #6366F1 !important;
color: #ffffff !important;
/* FIX SIZE (important) */
padding: 4px 10px !important;
font-size: 13px !important;
line-height: 1 !important;
/* KEEP IT COMPACT */
display: inline-block !important;
width: auto !important;
height: auto !important;
/* STYLE */
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.25) !important;
/* CLEAN STATE */
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
filter: none !important;
}
/* caret fix */
html body a#dLabel .caret,
html body a.language-selector .caret {
border-top-color: #ffffff !important;
opacity: 1 !important;
}
/* -------------------------
AI CHAT BUBBLE
------------------------- */
html body #appily-chat-bubble {
background: linear-gradient(135deg, #6366F1, #818CF8) !important;
color: #ffffff !important;
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-weight: bold !important;
font-size: 14px !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
border: 2px solid rgba(255,255,255,0.15) !important;
z-index: 99999 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
/* force text inside bubble */
html body #appily-chat-bubble,
html body #appily-chat-bubble * {
color: #ffffff !important;
}
/* safety: remove unwanted dark overlays affecting UI */
html body .content-white-bkg *,
html body .content-color * {
filter: none !important;
}
/* =========================
FORCE CHAT POPUP STYLE (EVEN ON LOGIN PAGE)
========================= */
html body #appily-chat-popup {
background: rgba(30, 34, 55, 0.85) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.12) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
z-index: 99999 !important;
}
/* Ensure inner messages don’t inherit login styles */
html body #appily-chat-popup * {
color: inherit !important;
filter: none !important;
text-shadow: none !important;
}
/* User message */
html body #appily-chat-popup .user-message {
background: #6366F1 !important;
color: #ffffff !important;
}
/* AI message */
html body #appily-chat-popup .ai-message {
background: #1B2030 !important;
color: #ffffff !important;
}
/* Input area */
html body #appily-chat-input {
background: rgba(20, 23, 40, 0.85) !important;
}
/* Input field */
html body #appily-chat-input input {
background: rgba(255,255,255,0.08) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* Button */
html body #appily-chat-input button {
background: #6366F1 !important;
color: #ffffff !important;
}
#appily-chat-header {
background: linear-gradient(135deg, #6366F1, #818CF8) !important;
color: #ffffff !important;
}
#appily-chat-header * {
color: #ffffff !important;
}
#appily-chat-bubble {
background: #6366F1 !important;
color: #ffffff !important;
border-radius: 50% !important;
}
/* =========================================
AI BUBBLE FLOATING ANIMATION
========================================= */
#appily-chat-bubble {
position: fixed !important;
animation: appilyFloat 4s ease-in-out infinite !important;
box-shadow:
0 10px 30px rgba(74,104,217,0.35),
0 0 20px rgba(74,104,217,0.25) !important;
transition: all 0.3s ease !important;
}
/* Hover effect */
#appily-chat-bubble:hover {
transform: scale(1.08) !important;
box-shadow:
0 14px 40px rgba(74,104,217,0.45),
0 0 30px rgba(74,104,217,0.35) !important;
}
/* Floating animation */
@keyframes appilyFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
/* =========================================
GLASSY AI SIDEBAR
========================================= */
/* Main sidebar */
.sidebar,
.left-sidebar,
.main-sidebar,
.menu-left,
.sidebar-wrapper {
background: rgba(18, 22, 38, 0.72) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border-right: 1px solid rgba(255,255,255,0.08) !important;
box-shadow:
8px 0 30px rgba(0,0,0,0.25) !important;
}
/* Sidebar items */
.sidebar a,
.left-sidebar a,
.main-sidebar a {
border-radius: 12px !important;
transition: all 0.25s ease !important;
}
/* Hover effect */
.sidebar a:hover,
.left-sidebar a:hover,
.main-sidebar a:hover {
background: rgba(255,255,255,0.08) !important;
transform: translateX(4px) !important;
}
/* Active item */
.sidebar .active a,
.left-sidebar .active a,
.main-sidebar .active a {
background: rgba(74,104,217,0.22) !important;
border: 1px solid rgba(74,104,217,0.28) !important;
box-shadow:
0 6px 18px rgba(74,104,217,0.18) !important;
}
/* =========================
APPILY AI GLASS BUBBLE
========================= */
html body #appily-chat-bubble {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: 0.5px !important;
color: #ffffff !important;
background: rgba(74, 104, 217, 0.22) !important;
backdrop-filter: blur(18px) saturate(180%) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow:
0 8px 32px rgba(31, 38, 135, 0.35),
inset 0 1px 1px rgba(255,255,255,0.18) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
z-index: 99999 !important;
}
/* Hover effect */
html body #appily-chat-bubble:hover {
transform: translateY(-4px) scale(1.05) !important;
background: rgba(74, 104, 217, 0.32) !important;
box-shadow:
0 12px 40px rgba(31, 38, 135, 0.45),
inset 0 1px 1px rgba(255,255,255,0.22) !important;
}
/* Floating pulse glow */
html body #appily-chat-bubble::before {
content: "" !important;
position: absolute !important;
inset: -6px !important;
border-radius: 50% !important;
background: radial-gradient(
circle,
rgba(74,104,217,0.35) 0%,
rgba(74,104,217,0) 70%
) !important;
z-index: -1 !important;
animation: appilyPulse 3s infinite ease-in-out !important;
}
/* Animation */
@keyframes appilyPulse {
0% {
transform: scale(0.95);
opacity: 0.7;
}
50% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(0.95);
opacity: 0.7;
}
}
#bar{
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
z-index:99999;
display:flex;
gap:8px;
padding:10px 12px;
background:rgba(18,22,38,.78);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
box-shadow:0 10px 40px rgba(0,0,0,.35);
animation:f 4s ease-in-out infinite;
}
@keyframes f{
0%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-4px)}
100%{transform:translateX(-50%) translateY(0)}
}
.b{
display:flex;
align-items:center;
gap:6px;
padding:9px 14px;
color:#fff!important;
text-decoration:none!important;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
font:500 12px Arial;
cursor:pointer;
transition:.25s;
}
.b:hover{
background:rgba(255,255,255,.12);
transform:translateY(-2px);
}
.b svg{
width:14px;
height:14px;
stroke:#fff;
fill:none;
stroke-width:2;
}
#p{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:none;
align-items:center;
justify-content:center;
z-index:999999;
}
#p.a{
display:flex;
}
#box{
width:92%;
max-width:430px;
background:rgba(18,22,38,.88);
backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:26px;
color:#fff;
box-shadow:0 20px 60px rgba(0,0,0,.45);
position:relative;
}
#box h3{
margin:0 0 10px;
font:700 24px Arial;
}
.t{
opacity:.75;
font:13px Arial;
margin-bottom:18px;
line-height:1.5;
}
.x{
width:100%;
padding:13px;
border:none;
border-radius:14px;
background:#6366F1;
color:#fff;
font:600 13px Arial;
cursor:pointer;
margin-top:10px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
}
.s{
background:rgba(255,255,255,.08);
}
.c{
position:absolute;
top:18px;
right:20px;
color:#fff;
font-size:24px;
cursor:pointer;
}
/* Catch-all for pages not named individually above — includes new modules */
body.general { background:#10131C !important; color:#fff !important; }
body.general .content-color,
body.general .content-white-bkg { background:rgba(255,255,255,.08) !important; color:#fff !important; }
body.general .table > thead > tr > th,
body.general .table > tbody > tr > td,
body.general .table > tbody > tr > th { background:transparent !important; color:#fff !important; }
body.general .input-flat { background:rgba(255,255,255,.25) !important; color:#fff !important; }
body.general .color-blue, body.general .btn.color-blue { background:#6366F1 !important; }
/* =========================================================
MODERNISATION LAYER
Appended last so it wins on ties. Deleting everything below
this line reverts the interface to its previous look.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
body.general.general {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
background:
radial-gradient(1100px 700px at 12% -10%, rgba(99,102,241,.16), transparent 60%),
radial-gradient(900px 600px at 92% 4%, rgba(56,189,248,.10), transparent 60%),
#10131C !important;
background-attachment: fixed !important;
-webkit-font-smoothing: antialiased;
}
/* one radius, everywhere */
body.general.general .content-color,
body.general.general .content-white-bkg,
body.general.general .subcontent,
body.general.general .panel,
body.general.general .table,
body.general.general .custom-box { border-radius: 14px !important; }
body.general.general .input-flat,
body.general.general input[type="text"],
body.general.general input[type="email"],
body.general.general input[type="password"],
body.general.general input[type="number"],
body.general.general select,
body.general.general textarea { border-radius: 10px !important; }
body.general.general .btn,
body.general.general .color-blue { border-radius: 10px !important; }
/* surfaces: a real hierarchy instead of one translucent white */
body.general.general .content-color.content-color,
body.general.general .content-white-bkg.content-white-bkg {
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.07) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(10px);
}
body.general.general .title-editor.title-editor {
background: rgba(255,255,255,.05) !important;
border-bottom: 1px solid rgba(255,255,255,.09) !important;
letter-spacing: .04em;
font-weight: 600;
}
/* inputs: readable, not washed out */
body.general.general .input-flat.input-flat,
body.general.general select,
body.general.general textarea {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: #EEF0F6 !important;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.general.general .input-flat.input-flat:focus,
body.general.general select:focus,
body.general.general textarea:focus {
background: rgba(255,255,255,.09) !important;
border-color: rgba(99,102,241,.85) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.22) !important;
outline: none !important;
}
/* buttons: lift on hover rather than sitting flat */
body.general.general .btn,
body.general.general .color-blue.color-blue {
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
border: 0 !important;
font-weight: 600;
}
body.general.general .btn:hover,
body.general.general .color-blue.color-blue:hover {
transform: translateY(-1px);
filter: brightness(1.07);
box-shadow: 0 8px 22px rgba(99,102,241,.30) !important;
}
/* sidebar */
body.general.general #left-sidebar-wrapper {
background: rgba(255,255,255,.035) !important;
border-right: 1px solid rgba(255,255,255,.07) !important;
box-shadow: none !important;
backdrop-filter: blur(14px);
}
body.general.general #left-sidebar-wrapper .sidebar-nav a {
border-radius: 10px !important;
transition: background .15s ease, color .15s ease;
}
body.general.general #left-sidebar-wrapper .sidebar-nav a.active {
background: rgba(99,102,241,.22) !important;
box-shadow: inset 2px 0 0 #6366F1 !important;
}
/* top bar */
body.general.general .navbar.navbar-default.content-white-bkg {
background-color: rgba(255,255,255,.04) !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
backdrop-filter: blur(14px);
}
/* tables: lines instead of stripes */
body.general.general .table > tbody > tr > td,
body.general.general .table > tbody > tr > th {
border-top: 1px solid rgba(255,255,255,.06) !important;
}
body.general.general .table > thead > tr > th {
border-bottom: 1px solid rgba(255,255,255,.12) !important;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
font-size: 11.5px;
}
body.general.general .table > tbody > tr:hover > td {
background: rgba(255,255,255,.035) !important;
}
/* the step wizard reads as pills rather than 2014 arrows */
body.general.general .step-background {
background: rgba(255,255,255,.06) !important;
border-radius: 999px !important;
letter-spacing: .04em;
}
/* scrollbars */
body.general.general ::-webkit-scrollbar { width: 10px; height: 10px; }
body.general.general ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.14); border-radius: 999px;
}
body.general.general ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
body.general.general ::-webkit-scrollbar-track { background: transparent; }
/* =========================================================
PASS 2 — lift the canvas, raise surface contrast,
calm the feature tiles.
========================================================= */
/* canvas up a notch from near-black, glows a touch warmer */
body.general.general {
background:
radial-gradient(1100px 700px at 12% -10%, rgba(99,102,241,.20), transparent 62%),
radial-gradient(900px 600px at 92% 4%, rgba(56,189,248,.12), transparent 62%),
#151823 !important;
}
/* panels sit more clearly above the canvas */
body.general.general .content-color.content-color,
body.general.general .content-white-bkg.content-white-bkg {
background: rgba(255,255,255,.065) !important;
border: 1px solid rgba(255,255,255,.09) !important;
}
/* section headers: quieter, no shouting bar */
body.general.general .title-editor.title-editor {
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
text-transform: none !important;
letter-spacing: .01em !important;
font-size: 15px !important;
font-weight: 600 !important;
padding-top: 14px !important;
padding-bottom: 12px !important;
}
/* --- feature tiles: calm grid instead of a wall of white chips --- */
body.general.general #add_pages_content .color-blue.block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 14px !important;
box-shadow: none !important;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
body.general.general #add_pages_content .color-blue.block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover {
background: rgba(99,102,241,.16) !important;
border-color: rgba(99,102,241,.55) !important;
transform: translateY(-2px);
}
/* the icons themselves: single-tone, not saturated blue-on-white */
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon img {
filter: brightness(0) invert(1) !important;
opacity: .82;
transition: opacity .15s ease;
}
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover img { opacity: 1; }
/* existing page tiles in the carousel, same treatment */
body.general.general #pages_content #option_values .content-white-bkg {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 14px !important;
}
/* category rail: flat list, no 2014 arrow tab */
body.general.general #sb-tour-add-pages-filter li a {
border-radius: 10px !important;
letter-spacing: .02em;
transition: background .15s ease, color .15s ease;
}
body.general.general #sb-tour-add-pages-filter li a.active {
background: rgba(99,102,241,.20) !important;
box-shadow: inset 2px 0 0 #6366F1 !important;
}
body.general.general #sb-tour-add-pages-filter li a.active:after {
display: none !important; /* the pointed arrow */
}
/* step wizard: pills, less shouty */
body.general.general .step-background,
body.general.general .step_menu_feature li {
text-transform: none !important;
letter-spacing: .01em !important;
font-weight: 600 !important;
}
/* the locale warning strip */
body.general.general .alert {
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.12) !important;
}
/* =========================================================
PASS 3 — feature icons: indigo-shifted artwork on glass tiles
========================================================= */
/* glass tile: gradient fill + inner top highlight */
body.general.general #add_pages_content .color-blue.block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .content-white-bkg {
background-image:
linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%),
linear-gradient(160deg, rgba(99,102,241,.16), rgba(56,189,248,.08)) !important;
background-color: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 6px 18px rgba(0,0,0,.28) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* shift Siberian's cyan-blue artwork into the indigo/violet family.
hue-rotate keeps the icon's shading instead of flattening it. */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img {
filter: hue-rotate(42deg) saturate(1.25) brightness(1.08) !important;
transition: filter .18s ease, transform .18s ease !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: hue-rotate(42deg) saturate(1.5) brightness(1.25) !important;
}
/* the little round info badge, currently a grey blob */
body.general.general #add_pages_content .carret li,
body.general.general #add_pages_content .block_add_pages_icon + .info,
body.general.general #add_pages_content i.info {
background: rgba(255,255,255,.14) !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow: none !important;
}
/* labels under each tile */
body.general.general #add-pages .icons-list li span,
body.general.general #add_pages_content .icons-list li span {
letter-spacing: .04em;
font-size: 11px;
opacity: .78;
}
/* =========================================================
PASS 4 — app-icon squircles, original artwork colour back
========================================================= */
/* undo the hue shift: the cyan line art reads far better on dark
than the lavender-on-lavender it became */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img {
filter: none !important;
}
/* squircle — the shape of an actual app icon.
For perfect circles instead, change 30% to 50% in this block. */
body.general.general #add_pages_content .color-blue.block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .content-white-bkg {
border-radius: 30% !important;
background-image:
linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 60%) !important;
background-color: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 6px 18px rgba(0,0,0,.30) !important;
}
body.general.general #add_pages_content .color-blue.block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover {
background-color: rgba(99,102,241,.18) !important;
border-color: rgba(99,102,241,.55) !important;
transform: translateY(-2px) scale(1.03);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
0 10px 26px rgba(99,102,241,.28) !important;
}
/* icons brighten slightly on hover instead of changing colour */
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: brightness(1.15) !important;
}
/* existing page tiles in the carousel: same shape language */
body.general.general #pages_content #option_values .option_value {
border-radius: 30% !important;
}
/* =========================================================
PASS 5 — icon colour
Three options below. MONOCHROME is active; to switch, wrap it
in comment markers and unwrap the one you want instead.
========================================================= */
/* --- OPTION A: VIOLET (off) -------------------------------
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value {
filter: hue-rotate(58deg) saturate(1.05) brightness(1.12) !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: hue-rotate(58deg) saturate(1.2) brightness(1.35) !important;
}
---------------------------------------------------------- */
/* --- OPTION B: MINT / EMERALD ----------------------------
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value {
filter: hue-rotate(-42deg) saturate(1.15) brightness(1.15) !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: hue-rotate(-42deg) saturate(1.3) brightness(1.35) !important;
}
---------------------------------------------------------- */
/* --- OPTION C: MONOCHROME (active) --------------------- */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value {
filter: brightness(0) invert(1) !important;
opacity: .80 !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* =========================================================
PASS 6 — dropdown fix, typography and breathing room
========================================================= */
/* --- dropdowns must be opaque; they float over content --- */
body.general.general .dropdown-menu,
body.general.general .navbar-nav > li > .dropdown-menu,
body.general.general .nav .dropdown-menu,
body.general.general ul.dropdown-menu {
background: #1C2130 !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 12px !important;
box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
padding: 6px !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.general.general .dropdown-menu > li > a {
color: #E7E9F2 !important;
border-radius: 8px !important;
padding: 8px 12px !important;
transition: background .14s ease;
}
body.general.general .dropdown-menu > li > a:hover,
body.general.general .dropdown-menu > li > a:focus {
background: rgba(99,102,241,.22) !important;
color: #fff !important;
}
body.general.general .dropdown-menu .divider {
background: rgba(255,255,255,.10) !important;
}
/* same for any other floating layer */
body.general.general .popover,
body.general.general .tooltip-inner,
body.general.general .tingle-modal-box,
body.general.general .featherlight .featherlight-content {
background: #1C2130 !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 14px !important;
box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* --- typography --- */
body.general.general {
font-size: 14px;
line-height: 1.55;
letter-spacing: 0;
}
body.general.general h1, body.general.general h2, body.general.general h3 {
letter-spacing: -.015em;
font-weight: 700;
}
body.general.general .title-editor.title-editor {
font-size: 16px !important;
letter-spacing: -.01em !important;
}
/* uppercase micro-labels are the strongest dated signal left */
body.general.general label,
body.general.general .font-label,
body.general.general fieldset legend {
text-transform: none !important;
letter-spacing: .005em !important;
font-weight: 500 !important;
color: rgba(255,255,255,.72) !important;
font-size: 13px !important;
}
/* --- breathing room ---
NOTE: do not add padding to .content-color / .content-white-bkg.
Those classes sit on Bootstrap grid containers, and padding there
breaks the column layout. Only spacing on form elements is safe. */
body.general.general .form-group { margin-bottom: 16px !important; }
/* .btn padding left alone: widening buttons wraps the preview
controls onto two lines and pushes the phone preview down. */
/* the step wizard: lighter weight, less shouty */
body.general.general .step-background {
padding: 7px 18px !important;
font-size: 13px !important;
}
/* =========================================================
PASS 7 — dropdown stacking
========================================================= */
/* the menu was opaque but still underneath the wizard pills */
body.general.general .navbar-nav > li > .dropdown-menu,
body.general.general .dropdown-menu,
body.general.general ul.dropdown-menu {
z-index: 100000 !important;
}
/* Only the open menu item needs lifting. Raising the whole .navbar
put the entire bar above the page content. */
body.general.general .navbar-nav > li.open,
body.general.general .navbar-nav > li.open > a {
position: relative !important;
z-index: 100001 !important;
}
/* the step wizard sat above the menu */
body.general.general .step_menu_feature,
body.general.general .step-background,
body.general.general #step_1, body.general.general #step_2,
body.general.general #step_3, body.general.general #step_4,
body.general.general #step_5 {
z-index: 1 !important;
}
/* =========================================================
PASS 8 — dropdowns were translucent, not underneath
The menus carry class="dropdown-menu content-white-bkg", so the
panel rule in PASS 2 (higher specificity) was overriding the
dropdown rule in PASS 6 and giving them a see-through background.
These selectors are specific enough to win.
========================================================= */
body.general.general ul.dropdown-menu.dropdown-menu.content-white-bkg,
body.general.general ul.dropdown-menu.dropdown-menu,
body.general.general .dropdown-menu.dropdown-menu.content-white-bkg,
body.general.general .dropdown-menu.dropdown-menu.content-color {
background: #1C2130 !important;
background-image: none !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 12px !important;
box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
padding: 6px !important;
}
body.general.general ul.dropdown-menu.dropdown-menu > li > a {
color: #E7E9F2 !important;
border-radius: 8px !important;
padding: 8px 12px !important;
}
body.general.general ul.dropdown-menu.dropdown-menu > li > a:hover {
background: rgba(99,102,241,.22) !important;
color: #fff !important;
}
/* =========================================================
PASS 9 — free the dropdown from the navbar's stacking context
backdrop-filter on .navbar (PASS 1) created a stacking context,
trapping the menu inside the bar's layer. The wizard pills then
painted over it and intercepted the clicks. Solid background
instead of blur, so the menu can rise above the page.
========================================================= */
body.general.general .navbar.navbar-default.content-white-bkg {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background-color: #191E2B !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* no stacking context on the bar itself, and none on its children */
body.general.general .navbar,
body.general.general .navbar-default,
body.general.general .navbar-nav {
z-index: auto !important;
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* the menu now competes at page level and wins */
body.general.general ul.dropdown-menu.dropdown-menu {
z-index: 100000 !important;
}
/* keep the wizard out of the way */
body.general.general .step_menu_feature,
body.general.general .step-background {
z-index: 0 !important;
}
/* =========================================================
PASS 10 — icon filter on ONE layer only
The monochrome filter was landing on both the tile container
and the ![]()
inside it. Chrome and Safari compound nested
filters differently, so Safari rendered the icons black.
Filter the container; clear it on the image.
========================================================= */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .option_value {
filter: brightness(0) invert(1) !important;
opacity: .80 !important;
}
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value img {
filter: none !important;
opacity: 1 !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #pages_content #option_values .option_value:hover {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: none !important;
}
/* =========================================================
PASS 11 — stop filtering the icons
Chrome and Safari disagree on how filters apply here,
whichever layer they are placed on: Chrome rendered them
white, Safari black. The original artwork is consistent
in both, so it stays as-is on the dark tiles.
========================================================= */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value,
body.general.general #pages_content #option_values .option_value img,
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover img,
body.general.general #pages_content #option_values .option_value:hover {
filter: none !important;
opacity: 1 !important;
}
/* =========================================================
PASS 12 — likely cause of the Safari/Chrome split:
the tiles carried backdrop-filter (PASS 3) as well as filter.
Safari mishandles that combination. Drop the backdrop blur,
then the monochrome filter can behave the same in both.
========================================================= */
body.general.general #add_pages_content .color-blue.block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .content-white-bkg,
body.general.general #pages_content #option_values .option_value {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* single layer, no nesting */
body.general.general #add_pages_content .block_add_pages_icon img,
body.general.general #add_page_list .block_add_pages_icon img,
body.general.general #add-pages .icons-list li img,
body.general.general #pages_content #option_values .option_value img {
filter: brightness(0) invert(1) !important;
opacity: .82 !important;
}
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .option_value {
filter: none !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover img,
body.general.general #add_page_list .block_add_pages_icon:hover img {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* =========================================================
PASS 13 — the icons are background-images on the tile div,
not ![]()
elements. So the filter has to go on the container.
Container filtering previously turned black in Safari, but the
tiles also had backdrop-filter then; that is now removed, which
was the likely cause of the conflict.
========================================================= */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add-pages .icons-list li .block_add_pages_icon,
body.general.general #pages_content #option_values .option_value {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: brightness(0) invert(1) !important;
opacity: .82 !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #pages_content #option_values .option_value:hover {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* =========================================================
PASS 14 — let the icon grid recede slightly so the page
you are working on leads and the picker supports.
To revert, delete this block only.
========================================================= */
body.general.general #add_pages_content .block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #add-pages .icons-list li .block_add_pages_icon,
body.general.general #pages_content #option_values .option_value {
opacity: .70 !important;
}
body.general.general #add_pages_content .block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover,
body.general.general #pages_content #option_values .option_value:hover {
opacity: 1 !important;
}
/* softer tiles */
body.general.general #add_pages_content .color-blue.block_add_pages_icon,
body.general.general #add_page_list .block_add_pages_icon,
body.general.general #pages_content #option_values .content-white-bkg {
background-color: rgba(255,255,255,.035) !important;
background-image:
linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 60%) !important;
border: 1px solid rgba(255,255,255,.07) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 4px 14px rgba(0,0,0,.22) !important;
}
body.general.general #add_pages_content .color-blue.block_add_pages_icon:hover,
body.general.general #add_page_list .block_add_pages_icon:hover {
background-color: rgba(99,102,241,.16) !important;
border-color: rgba(99,102,241,.45) !important;
}
/* labels a touch quieter too */
body.general.general #add-pages .icons-list li span,
body.general.general #add_pages_content .icons-list li span {
opacity: .62;
}
/* =========================================================
PASS 15 — white table bars on module list pages
Bootstrap and some modules set a white background on tables
and their wrappers, which beat the generic catch-all.
Colour only, no box-model changes.
========================================================= */
body.general.general table,
body.general.general table.table,
body.general.general .table.table,
body.general.general .table > thead,
body.general.general .table > tbody,
body.general.general .table > tfoot,
body.general.general .table > thead > tr,
body.general.general .table > tbody > tr,
body.general.general .table > thead > tr > th,
body.general.general .table > tbody > tr > td,
body.general.general .table > tbody > tr > th,
body.general.general .table-striped > tbody > tr:nth-child(odd) > td,
body.general.general .table-striped > tbody > tr:nth-child(odd) > th,
body.general.general .table-striped > tbody > tr:nth-child(even) > td,
body.general.general .table-striped > tbody > tr:nth-child(even) > th,
body.general.general .table-responsive,
body.general.general .dataTables_wrapper,
body.general.general .dataTables_wrapper .dataTables_scrollHead,
body.general.general .dataTables_wrapper .dataTables_scrollBody,
body.general.general .dynatable-record-count,
body.general.general .panel-body,
body.general.general .well {
background: transparent !important;
background-color: transparent !important;
color: #E7E9F2 !important;
}
/* keep the row rules visible on the dark surface */
body.general.general .table > thead > tr > th {
border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
body.general.general .table > tbody > tr > td,
body.general.general .table > tbody > tr > th {
border-top: 1px solid rgba(255,255,255,.07) !important;
}
body.general.general .table > tbody > tr:hover > td {
background: rgba(255,255,255,.04) !important;
}
/* empty-state and count text */
body.general.general .dataTables_info,
body.general.general .dataTables_empty,
body.general.general .dynatable-record-count {
color: rgba(255,255,255,.6) !important;
}
/* =========================================================
PASS 16 — colour picker: solid panel, own stacking layer
Same issue as the dropdowns: floating widgets need an opaque
background and a high z-index, and must not sit inside an
element carrying backdrop-filter.
========================================================= */
body.general.general .minicolors-panel,
body.general.general .minicolors .minicolors-panel {
background: #1C2130 !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 12px !important;
box-shadow: 0 16px 42px rgba(0,0,0,.60) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
z-index: 100002 !important;
}
body.general.general .minicolors {
position: relative !important;
z-index: 100002 !important;
}
/* the hex field under the swatch */
body.general.general .minicolors-panel input,
body.general.general .minicolors-current-value input {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: #EEF0F6 !important;
border-radius: 8px !important;
}
/* swatch buttons keep a visible edge on dark */
body.general.general .minicolors-swatch {
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 6px !important;
}
/* the colour panels themselves must not be tinted by the theme */
body.general.general .minicolors-grid,
body.general.general .minicolors-slider,
body.general.general .minicolors-opacity-slider {
filter: none !important;
opacity: 1 !important;
}
/* =========================================================
PASS 17 — panels must not create stacking contexts
backdrop-filter on .content-color / .content-white-bkg (PASS 2)
made every section its own layer, trapping the colour picker
inside its section so the next section painted over it.
Same cause as the navbar/dropdown problem in PASS 9.
========================================================= */
body.general.general .content-color.content-color,
body.general.general .content-white-bkg.content-white-bkg,
body.general.general .subcontent,
body.general.general .panel {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* slightly more opaque to compensate for losing the blur */
body.general.general .content-color.content-color,
body.general.general .content-white-bkg.content-white-bkg {
background-color: rgba(255,255,255,.075) !important;
}
/* now the picker can rise above the sections */
body.general.general .minicolors,
body.general.general .minicolors-panel,
body.general.general .minicolors-current-value {
position: relative !important;
z-index: 100002 !important;
}
body.general.general .minicolors-panel {
position: absolute !important;
}
/* =========================================================
PASS 18 — analytics chart panels
Chart.js draws on a transparent canvas, so the light grey
comes from the container. Colour only.
========================================================= */
/* NOTE: do not blank canvas backgrounds globally -- the analytics
charts carry .content-white-bkg on the