diff --git a/Dealerfinder b/Dealerfinder new file mode 160000 index 0000000..07832b8 --- /dev/null +++ b/Dealerfinder @@ -0,0 +1 @@ +Subproject commit 07832b82d6070732e0cc81aeef23619c37bffe9f diff --git a/api/v1/post/users.php b/api/v1/post/users.php index 69d4d4c..1d35037 100644 --- a/api/v1/post/users.php +++ b/api/v1/post/users.php @@ -122,6 +122,7 @@ $location_new = (($post_content['location'] != '' && $post_content['location'] ! //STEP 3 - Send to user $mail_location = (file_exists($_SERVER['DOCUMENT_ROOT'].'/custom/'.$domain.'/mail/email_template_reset.php') ? $_SERVER['DOCUMENT_ROOT'].'/custom/'.$domain.'/mail/email_template_reset.php' : './assets/mail/email_template_reset.php'); include_once $mail_location; + send_mail($user_data['email'],$subject,$message,'',''); } diff --git a/api/v2/get/dealers.php b/api/v2/get/dealers.php index fbba26d..bbc5328 100644 --- a/api/v2/get/dealers.php +++ b/api/v2/get/dealers.php @@ -55,7 +55,7 @@ if(isset($get_content) && $get_content!=''){ //Define Query if(isset($criterias['totals']) && $criterias['totals'] ==''){ //Request for total rows - $sql = 'SELECT count(*) as count FROM dealers '.$whereclause.''; + $sql = 'SELECT count(*) as count FROM dealers d '.$whereclause.''; } elseif (isset($criterias['list']) && $criterias['list'] ==''){ $sql = 'SELECT d.* FROM dealers d '.$whereclause; @@ -115,6 +115,7 @@ else { $messages = $stmt->fetchAll(PDO::FETCH_ASSOC); } + //------------------------------------------ //JSON_ENCODE //------------------------------------------ diff --git a/api/v2/get/media.php b/api/v2/get/media.php index e1fb7f5..4206cff 100644 --- a/api/v2/get/media.php +++ b/api/v2/get/media.php @@ -14,7 +14,7 @@ if (empty($partner->soldto) || $partner->soldto == ''){$soldto_search = '%';} el //default whereclause $whereclause = ''; -list($whereclause,$condition) = getWhereclause('',$permission,$partner,'get'); +list($whereclause,$condition) = getWhereclauselvl2('',$permission,$partner,'get'); //NEW ARRAY $criterias = []; diff --git a/api/v2/post/dealers.php b/api/v2/post/dealers.php index 3d85926..4f562ce 100644 --- a/api/v2/post/dealers.php +++ b/api/v2/post/dealers.php @@ -369,7 +369,7 @@ else if (empty($partner->soldto) || $partner->soldto == ''){$soldto_search = '%';} else {$soldto_search = '-%';} //default whereclause - list($whereclause,$condition) = getWhereclause('',$permission,$partner,''); + list($whereclause,$condition) = getWhereclauselvl2('',$permission,$partner,''); //BUILD UP PARTNERHIERARCHY FROM USER diff --git a/api/v2/post/mailer.php b/api/v2/post/mailer.php new file mode 100644 index 0000000..6347e64 --- /dev/null +++ b/api/v2/post/mailer.php @@ -0,0 +1,57 @@ + 'send')); + break; + + case 'reset': + + //GET TEMPLATE + $mail_location = (file_exists($_SERVER['DOCUMENT_ROOT'].'/custom/'.$domain.'/mail/email_template_reset.php') ? $_SERVER['DOCUMENT_ROOT'].'/custom/'.$domain.'/mail/email_template_reset.php' : './assets/mail/email_template_reset.php'); + include_once $mail_location; + + //SEND MAIL + send_mail($mail_to,$subject,$message,'',''); + break; + } + + } + else + { + //do nothing + } +} else { + exit; +} + +?> \ No newline at end of file diff --git a/assets/functions.php b/assets/functions.php index 560ce1a..7eda507 100644 --- a/assets/functions.php +++ b/assets/functions.php @@ -50,19 +50,31 @@ function send_mail($to, $subject, $message, $attachment, $attachment_name){ $mail = new PHPMailer(); $mail->CharSet = 'UTF-8'; - //$mail->isSMTP(); // Use SMTP protocol + $mail->isSMTP(); // Use SMTP protocol $mail->Host = email_host_name; // Specify SMTP server $mail->SMTPAuth = true; // Auth. SMTP $mail->Username = email; // Mail who send by PHPMailer $mail->Password = email_outgoing_pw; // your pass mail box $mail->SMTPSecure = email_outgoing_security; // Accept SSL $mail->Port = email_outgoing_port; // port of your out server + $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; $mail->setFrom(email, mail_from); // Mail to send at $mail->addAddress($to); // Add sender $mail->addReplyTo(email_reply_to); // Adress to reply $mail->isHTML(true); // use HTML message $mail->Subject = $subject; $mail->Body = $message; + + /* +++++++++++ // + // DEBUG MODE // + // +++++++++++ // + $mail->SMTPDebug = 4; // Or higher if needed + $mail->Debugoutput = function($str, $level) { + debuglog($str); // Your custom logger + }; + // +++++++++++ // + // +++++++++++ */ + if (!empty($attachment) || $attachment != ''){ $mail->AddStringAttachment($attachment, $attachment_name, 'base64', 'application/pdf'); } @@ -71,7 +83,7 @@ function send_mail($to, $subject, $message, $attachment, $attachment_name){ if( !$mail->send() ){ // render error if it is $tab = array('error' => 'Mailer Error: '.$mail->ErrorInfo ); - echo json_encode($tab); + debuglog(json_encode($tab)); exit; } else{ diff --git a/assets/images/media/67fbd985069a0_hotspringworld-42.webp b/assets/images/media/67fbd985069a0_hotspringworld-42.webp new file mode 100644 index 0000000..ba91a01 Binary files /dev/null and b/assets/images/media/67fbd985069a0_hotspringworld-42.webp differ diff --git a/assets/images/media/67fe659b602b1_Screenshot2024-04-16123119_b99f93ec-ea75-48c8-9571-e1e408f36642.png b/assets/images/media/67fe659b602b1_Screenshot2024-04-16123119_b99f93ec-ea75-48c8-9571-e1e408f36642.png new file mode 100644 index 0000000..342ad9a Binary files /dev/null and b/assets/images/media/67fe659b602b1_Screenshot2024-04-16123119_b99f93ec-ea75-48c8-9571-e1e408f36642.png differ diff --git a/assets/images/media/680744f05b2a3_hotspringworld-42.webp b/assets/images/media/680744f05b2a3_hotspringworld-42.webp new file mode 100644 index 0000000..ba91a01 Binary files /dev/null and b/assets/images/media/680744f05b2a3_hotspringworld-42.webp differ diff --git a/assets/images/media/680745332942c_Recent-Projects-Image-1.png b/assets/images/media/680745332942c_Recent-Projects-Image-1.png new file mode 100644 index 0000000..2623af7 Binary files /dev/null and b/assets/images/media/680745332942c_Recent-Projects-Image-1.png differ diff --git a/assets/mail/email_template_contactform.php b/assets/mail/email_template_contactform.php new file mode 100644 index 0000000..7ec1490 --- /dev/null +++ b/assets/mail/email_template_contactform.php @@ -0,0 +1,58 @@ + + + + + + ' . $mail_subject . ' + + + + + + + +
+ + + + + + + + + + + + + + + +
+ '.site_name.' +
+ ' . $mail_subject . ', +
+
+ '.$mail_content.' +
+
+
+
+ + +'; \ No newline at end of file diff --git a/custom/bewellwell/.DS_Store b/custom/bewellwell/.DS_Store new file mode 100644 index 0000000..b787189 Binary files /dev/null and b/custom/bewellwell/.DS_Store differ diff --git a/custom/bewellwell/mail/email_template_contactform.php b/custom/bewellwell/mail/email_template_contactform.php new file mode 100644 index 0000000..7ec1490 --- /dev/null +++ b/custom/bewellwell/mail/email_template_contactform.php @@ -0,0 +1,58 @@ + + + + + + ' . $mail_subject . ' + + + + + + + +
+ + + + + + + + + + + + + + + +
+ '.site_name.' +
+ ' . $mail_subject . ', +
+
+ '.$mail_content.' +
+
+
+
+ + +'; \ No newline at end of file diff --git a/custom/bewellwell/mail/email_template_new.php b/custom/bewellwell/mail/email_template_new.php new file mode 100644 index 0000000..e293f11 --- /dev/null +++ b/custom/bewellwell/mail/email_template_new.php @@ -0,0 +1,102 @@ + + + + + + ' . $subject . ' + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ '.site_name.' +
+ ' . $newuser_header . ', +
+
+ '.$newuser_text.' '.$newuser_credential_text_1.''.$post_content['username'].' +
+
+ '.$newuser_credential_text_2.' +
+ + + + + +
+ Reset Password +
+
+ ' . $newuser_closure . ' +
+
+ Kind regards, +
+
+ Service team +
+
+
+
+
+ + +'; \ No newline at end of file diff --git a/custom/bewellwell/mail/email_template_reset.php b/custom/bewellwell/mail/email_template_reset.php new file mode 100644 index 0000000..b2ffd33 --- /dev/null +++ b/custom/bewellwell/mail/email_template_reset.php @@ -0,0 +1,99 @@ + + + + + + ' . $subject . ' + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ '.site_title.' +
+ ' . $changeuser_header . ', +
+
+ '.$changeuser_text.' +
+
+ '.$changeuser_credential_text_1 .' +
+ + + + + +
+ Reset Password +
+
+ ' . $changeuser_closure . ' +
+
+ Kind regards, +
+
+ Service team +
+
+
+
+
+ + +'; \ No newline at end of file diff --git a/custom/bewellwell/settings/bewellwell_config.php b/custom/bewellwell/settings/bewellwell_config.php new file mode 100644 index 0000000..3afac78 --- /dev/null +++ b/custom/bewellwell/settings/bewellwell_config.php @@ -0,0 +1,55 @@ +format('F'); + +//------------------------------------------ +//History Type +//------------------------------------------ +$type1 = 'General'; +$type2 = 'Customer'; +$type3 = 'Service'; +$type4 = 'Testing'; +$type5 = 'Data'; +$type6 = 'Other'; +$type7 = 'Internal'; +$type8 = 'Ignore'; +$type9 = 'Warranty'; +$type10 = 'Contract'; +$type11 = 'Warranty-Expired'; +$type12 = 'Contract-Expired'; +$type13 = "Order"; +$type14 = "ServiceReport"; +$type15 = "SRIncluded"; +$type16 = "Notes"; +$type17 = "Visual"; + +$HistoryType_1 = 'Bootloader'; +$HistoryType_2 = 'Firmware'; +$HistoryType_3 = 'SerialNumber'; +$HistoryType_4 = 'Visual_Test'; +$HistoryType_5 = 'Maintenance_Test'; +$HistoryType_6 = 'Assembly_Test'; +$HistoryType_7 = 'ProductNumber'; +$HistoryType_8 = 'Visual'; +$HistoryType_9 = 'ServiceReport'; +//------------------------------------------ +//Permissions CRUD +//------------------------------------------ +$permission_4 = 'CRUD'; //Admin+ +$permission_3 = 'CRUD'; //Admin +$permission_2 = 'CRU'; //SuperUser +$permission_1 = 'CRU'; //CreateUpdate +$permission_0 = 'R'; //Readonly + +$permissionlabel1 = 'Permission'; +$permission1 = 'Superuser'; #1 +$permission2 = 'Create & Update'; #2 +$permission3 = 'read-only'; // #3 +$permission4 = 'Admin'; //#4 +$permission5 = 'Admin+'; // #5 + +$settingslabel1 = 'profile'; +$setting1 = 'firmware'; //Fix +$setting2 = 'service'; +$setting3 = 'build'; //Fix +$setting4 = 'distribution'; +$setting5 = ''; +$setting6 = ''; +$setting7 = ''; //Fix +$setting8 = 'interface'; + +//------------------------------------------ +//Partners +//------------------------------------------ +$partnertype1 = 'SalesID'; +$partnertype2 = 'SoldTo'; +$partnertype3 = 'ShipTo'; +$partnertype4 = 'Location'; +$partnertype5 = 'Section'; \ No newline at end of file diff --git a/custom/bewellwell/settings/settingsmenu.php b/custom/bewellwell/settings/settingsmenu.php new file mode 100644 index 0000000..a8c2e0d --- /dev/null +++ b/custom/bewellwell/settings/settingsmenu.php @@ -0,0 +1,353 @@ + [ + "main_menu" => [ + "url" => "dashboard", + "selected" => "dashboard", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_dashboard" + ] + ], + "sales" => [ + "main_menu" => [ + "url" => "contracts", + "selected" => "contracts", + "icon" => "fa-solid fa-bars", + "name" => "menu_sales" + ], + "accounts" => [ + "url" => "accounts", + "selected" => "accounts", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_sales_accounts" + ], + "catalog" => [ + "url" => "catalog", + "selected" => "catalog", + "icon" => "fa-solid fa-photo-film", + "name" => "menu_catalog" + ], + "contracts" => [ + "url" => "contracts", + "selected" => "contracts", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_sales_contracts" + ], + "orders" => [ + "url" => "orders", + "selected" => "orders", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_sales_orders" + ], + "identity" => [ + "url" => "identity", + "selected" => "identity", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_identity" + ] + ], + "dealers" => [ + "main_menu" => [ + "url" => "dealers", + "selected" => "dealers", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_dealers" + ] + ], + "buildtool" => [ + "main_menu" => [ + "url" => "buildtool", + "selected" => "buildtool", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_build" + ] + ], + "cartests" => [ + "main_menu" => [ + "url" => "cartests", + "selected" => "cartests", + "icon" => "fa-solid fa-car", + "name" => "menu_cartest" + ] + ], + "marketing" => [ + "main_menu" => [ + "url" => "marketing&product_group=Emergency_Plug&product_content=Images", + "selected" => "marketing", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_marketing" + ] + ], + "equipments" => [ + "main_menu" => [ + "url" => "equipments", + "selected" => "assets", + "icon" => "fa-solid fa-database", + "name" => "menu_assets" + ], + "equipments" =>[ + "url" => "equipments", + "selected" => "assets", + "icon" => "fa-solid fa-database", + "name" => "menu_assets" + ], + "servicereports" => [ + "url" => "servicereports", + "selected" => "servicereports", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_service_reports" + ], + "rmas" => [ + "url" => "rmas", + "selected" => "rmas", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_rmas" + ], + "histories" => [ + "url" => "histories", + "selected" => "histories", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_history" + ], + "firmwaretool" => [ + "url" => "firmwaretool", + "selected" => "firmwaretool", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_firmwaretool" + ] , + "equipments_mass_update" => [ + "url" => "equipments_mass_update", + "selected" => "equipments_mass_update", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_equipments_mass_update" + ] + ], + "products" => [ + "main_menu" => [ + "url" => "products&status=1", + "selected" => "products", + "icon" => "fas fa-box-open", + "name" => "menu_products" + ], + "products" => [ + "url" => "products&status=1", + "selected" => "products", + "icon" => "fas fa-box-open", + "name" => "menu_products" + ], + "products_attributes" => [ + "url" => "products_attributes", + "selected" => "products_attributes", + "icon" => "fas fa-box-open", + "name" => "menu_products_attributes" + ], + "pricelists" => [ + "url" => "pricelists", + "selected" => "pricelists", + "icon" => "fa-solid fa-coins", + "name" => "menu_pricelists" + ] + ], + "reporting" => [ + "main_menu" => [ + "url" => "report_build", + "selected" => "report_build", + "icon" => "fa-solid fa-magnifying-glass-chart", + "name" => "menu_report_main" + ], + "report_build" => [ + "url" => "report_build", + "selected" => "report_build", + "icon" => "fa-solid fa-magnifying-glass-chart", + "name" => "menu_report_build" + ], + "report_contracts_billing" => [ + "url" => "report_contracts_billing", + "selected" => "report_contracts_billing", + "icon" => "fa-solid fa-magnifying-glass-chart", + "name" => "menu_report_contracts_billing" + ], + "report_healthindex" => [ + "url" => "report_healthindex", + "selected" => "report_healthindex", + "icon" => "fa-solid fa-magnifying-glass-chart", + "name" => "menu_report_healthindex" + ], + "report_usage" => [ + "url" => "report_usage", + "selected" => "report_usage", + "icon" => "fa-solid fa-magnifying-glass-chart", + "name" => "menu_report_usage" + ] + ], + "admin" =>[ + "main_menu" => [ + "url" => "partners", + "selected" => "partners", + "icon" => "fa-solid fa-bars", + "name" => "menu_admin" + ], + "partners" => [ + "url" => "partners", + "selected" => "partners", + "icon" => "fa-solid fa-bars", + "name" => "menu_admin_partners" + ], + "users" => [ + "url" => "users", + "selected" => "users", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_admin_users" + ], + "communications" => [ + "url" => "communications", + "selected" => "communications", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_admin_communications" + ], + "media" => [ + "url" => "media", + "selected" => "media", + "icon" => "fa-solid fa-photo-film", + "name" => "menu_media" + ], + "categories" => [ + "url" => "categories", + "selected" => "categories", + "icon" => "fa-solid fa-photo-film", + "name" => "menu_categories" + ], + "discounts" => [ + "url" => "discounts", + "selected" => "discounts", + "icon" => "fa-solid fa-photo-film", + "name" => "menu_discounts" + ], + "shipping" => [ + "url" => "shipping", + "selected" => "shipping", + "icon" => "fa-solid fa-truck-fast", + "name" => "menu_shipping" + ] + ], + "settings" => [ + "main_menu" => [ + "url" => "settings", + "selected" => "settings", + "icon" => "fas fa-tools", + "name" => "menu_settings" + ], + "config" => [ + "url" => "settings", + "selected" => "settings", + "icon" => "fas fa-tools", + "name" => "menu_config" + ], + "translations" => [ + "url" => "translations", + "selected" => "translations", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_translations" + ], + "uploader" => [ + "url" => "uploader", + "selected" => "uploader", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_uploader" + ], + "logfile" => [ + "url" => "logfile", + "selected" => "logfile", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_logfile" + ], + "maintenance" => [ + "url" => "maintenance", + "selected" => "maintenance", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_maintenance" + ], + "profiles" => [ + "url" => "profiles", + "selected" => "profiles", + "icon" => "fas fa-tachometer-alt", + "name" => "menu_profiles" + ] + ] +]; + +$routes = array( + '/' => 'equipments.php', + 'equipments' => 'equipments.php', + 'products' => 'products.php', + 'logout' => 'logout.php' +); + +//------------------------------------------ +// Paging +//------------------------------------------ +$page_rows_equipment = 25; //list Equipment +$page_rows_history = 15; //list History +$page_rows_products = 25;//list producst +$page_rows_users = 15;//list users +$page_rows_partners = 15;//list partners +$page_rows_communication = 25; //list communications +$page_rows_accounts = 25 ;// list accounts +$page_rows_contracts = 25 ;// list contracts +$page_rows_cartest = 25 ;// list contracts +$page_rows_equipment_servicereporst = 5 ;// Number of service reports on equipment +$page_rows_changelog = 50 ;// Number of changelogs returned +$page_rows_rma = 25; // list RMA +$page_rows_translations = 50; //list translation variables +$page_rows_products_attributes = 50; //list product attributes +$page_rows_media = 25; // list media +$page_rows_pricelists = 50;//pricelists +$page_rows_categories = 25;//categories +$page_rows_discounts = 25;//discounts +$page_rows_shipping = 25;//discounts +$page_rows_transactions = 25; //transactions +$page_rows_invoice = 25; //invoices +$page_rows_dealers = 25; //dealers + +//------------------------------------------ +// Languages supported +//------------------------------------------ +$supportedLanguages = ['US', 'NL', 'DE', 'ES','PT']; + +//------------------------------------------ +// Pricing +//------------------------------------------ +$supportedCurrencies = ["0" =>"euro", "1"=>"dollar"]; + +$supportedModifiers = ["0" =>"subtract", "1"=>"add"]; + +// +++++++++++++++++++++++++++++++++++++++++++++++++++++++ +// All individual views and APIs - Profile ++++++++++++++ +// +++++++++++++++++++++++++++++++++++++++++++++++++++++++ +$all_profiles = [ + "dealer", + "commerce", + "interface" +]; + +// +++++++++++++++++++++++++++++++++++++++++++++++++++++++ +// Marketing +++++++++++++++++++++++++++++++++++++ +// +++++++++++++++++++++++++++++++++++++++++++++++++++++++ + +$main_marketing_dir = './marketing/'; + +$marketing_structure = array( +"bewellwell" => array( + "Documents", + "Images", + "Video" + ) +); \ No newline at end of file diff --git a/custom/bewellwell/settings/settingsprofiles.php b/custom/bewellwell/settings/settingsprofiles.php new file mode 100644 index 0000000..e38240a --- /dev/null +++ b/custom/bewellwell/settings/settingsprofiles.php @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/custom/bewellwell/style/.DS_Store b/custom/bewellwell/style/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/custom/bewellwell/style/.DS_Store differ diff --git a/custom/bewellwell/style/BWWLogo.svg b/custom/bewellwell/style/BWWLogo.svg new file mode 100644 index 0000000..93580e6 --- /dev/null +++ b/custom/bewellwell/style/BWWLogo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/custom/bewellwell/style/background_section.jpg b/custom/bewellwell/style/background_section.jpg new file mode 100644 index 0000000..30e07df Binary files /dev/null and b/custom/bewellwell/style/background_section.jpg differ diff --git a/custom/bewellwell/style/bewellwell.css b/custom/bewellwell/style/bewellwell.css new file mode 100644 index 0000000..23d0932 --- /dev/null +++ b/custom/bewellwell/style/bewellwell.css @@ -0,0 +1,2922 @@ +:root { + --color-text-default: #333333; + --color-text-heading: #333333; + --color-bg-body: #fff; + --color-bg-header: #F8f9fa; + --color-border-light: #eee; + --color-hover-dark: #606c7e; + --color-hover-light: #fbfbfb; + --color-note-bg: #383c46; + --color-note-text: #afb1b5; + --color-selected-bg: #2D64BC; + --color-sub-hover: #2a374a; + --color-title-muted: #959faf; + --color-title-muted-light: #99999a; + --color-title-bg: #dbdddf; + --color-icon-bg: #7c8394; + --color-msg-success-bg: #C3F3D7; + --color-msg-success: #51a775; + --color-msg-error-bg: #f3c3c3; + --color-msg-error: #a75151; + --color-border-input: #d0d3d5; + --color-border-input-hover: #b5b9bd; + --color-filter-text-hover: #343a44; + --color-btn-bg: #2D64BC; + --color-btn-hover-bg: #2D64BC; + --color-tab-bg: #dedfe1; + --color-tab-hover: #d8dadc; + --color-muted: #8d9398; + --color-status-neutral: #81848a; + --color-status-enabled: #13b368; + --color-status-warning: #eb8a0d; + --color-status-disabled: #bd4141; + --color-danger: #e26060; + --color-btn-secondary: #bed4ea; + --color-btn-neutral: #f1f3f4; + --color-pagination-hover: #6d7c90; + --color-pagination-bg: #758497; + --color-accent-blue: #0060ba; + --color-accent-blue-hover: #003260; + --color-accent-red: #ba0000; + --color-accent-red-hover: #600000; + --color-disabled: #b1b3b4; + --color-disabled-hover: #a9abad; +} + +* { + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; + font-size: 16px; +} + +html { + height: 100%; +} + +body { + position: relative; + min-height: 100%; + color: var(--color-text-default); + background-color: var(--color-bg-body); + margin: 0; +} + +h1, h2, h3, h4, h5 { + color: var(--color-text-heading); + margin: 0; + padding: 0; +} + +header { + display: flex; + position: fixed; + top: 0; + left: 0; + padding-left: 260px; + z-index: 999; + width: 100%; + height: 55px; + background-color: var(--color-bg-header); + box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); +} + +header a { + display: inline-flex; + color: var(--color-text-heading); + height: 100%; + text-decoration: none; + justify-content: center; + align-items: center; + padding: 0 20px; +} + +header a i { + font-size: 16px; +} + +header a:hover, header a:active { + color: var(--color-hover-dark); +} + +header .space-between { + flex: 1; +} + +header .dropdown { + display: inline-flex; + color: var(--color-text-heading); + height: 100%; + cursor: pointer; + justify-content: center; + align-items: center; + padding: 0 30px; +} + +header .dropdown i { + font-size: 18px; +} + +header .dropdown:hover, header .dropdown:active { + color: var(--color-hover-dark); +} + +header .dropdown .list { + display: none; + position: absolute; + top: 100%; + right: 0; + width: 150px; + background-color: var(--color-bg-body); + border-top: 1px solid var(--color-border-light); + box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05); +} + +header .dropdown .list a { + padding: 10px 15px; + font-size: 14px; +} + +header .dropdown .list a:hover { + background-color: var(--color-hover-light); +} + +header .dropdown:hover .list, header .dropdown:active .list { + display: flex; + flex-flow: column; +} + +header.full { + padding-left: 0; +} + +aside { + position: fixed; + z-index: 999999; + height: 100%; + width: 260px; + display: flex; + flex-flow: column; + background-color: var(--color-bg-header); + overflow-y: auto; +} + +aside h1 { + background: url("BWWLogo.svg"); + background-position: center center; + background-repeat: no-repeat; + background-size: 50%; + padding: 70px; +} + +aside > a { + font-size: 14px; + font-weight: 600; + text-decoration: none; + color: var(--color-note-text); + padding: 15px 20px; +} + +aside > a i { + color: inherit; + width: 40px; +} + +aside > a:hover, aside > a.selected { + background-color: var(--color-selected-bg); + color: var(--color-bg-body); + padding: 15px 17px; + border-radius: 5px; +} + +aside > a.selected + .sub { + display: flex; +} + +aside > a .note { + background-color: var(--color-note-bg); + padding: 1px 5px; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; +} + +aside .sub { + display: none; + flex-flow: column; + background-color: var(--color-bg-header); + padding: 13px 0; +} + +aside .sub a { + font-size: 14px; + color: var(--color-note-text); + text-decoration: none; + padding: 4px 20px; +} + +aside .sub a span { + display: inline-block; + width: 40px; + font-size: 12px; +} + +aside .sub a:hover, aside .sub a.selected { + color: var(--color-sub-hover); +} + +aside .footer { + display: flex; + flex-flow: column; + margin-top: auto; + padding: 15px; + font-size: 14px; + color: var(--color-note-text); +} + +aside .footer a { + text-decoration: none; + font-size: 14px; + color: var(--color-note-text); + padding-bottom: 2px; +} + +aside .footer a:hover { + color: #7c7f83; +} + +aside.closed { + display: none; +} + +main { + padding: 30px; + padding-left: 290px; + padding-top: 85px; +} + +main.full { + padding-left: 30px; + padding-right: 30px; +} + +main h2 { + font-size: 20px; + padding-bottom: 20px; + font-weight: 600; +} + +main h2 span { + font-size: 16px; + margin-left: 5px; + font-weight: 600; + color: var(--color-title-muted); +} + +main .content-title { + border-bottom: 1px solid var(--color-title-bg); + display: flex; +} + +main .content-title h2 { + flex: 1; +} + +main .content-title .btn { + height: 36px; +} + +main .content-title .title { + flex: 1; + display: flex; + align-items: center; + padding-bottom: 15px; +} + +main .content-title .title i { + display: inline-flex; + justify-content: center; + align-items: center; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); + width: 52px; + height: 42px; + border-radius: 4px; + margin-right: 12px; +} + +main .content-title .title i.alt { + background-color: var(--color-icon-bg); +} + +main .content-title .title h2 { + padding: 0 0 3px 0; +} + +main .content-title .title p { + margin: 0; + font-size: 14px; + color: var(--color-title-muted-light); + font-weight: 500; +} + +main .msg { + display: flex; + align-items: center; + margin: 15px 0 0 0; + padding: 15px; + font-weight: 500; + box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); +} + +main .msg p { + margin: 0; + padding: 0 15px; + font-size: 14px; + flex: 1; +} + +main .msg i.fa-times { + align-self: flex-end; + justify-content: flex-end; + cursor: pointer; +} + +main .msg i.fa-times:hover { + opacity: .9; +} + +main .msg.success { + background-color: #c3f3d7; + border-left: 4px solid var(--color-msg-success); + color: var(--color-msg-success); +} + +main .msg.success i { + color: var(--color-msg-success); +} + +main .msg.error { + background-color: var(--color-msg-error-bg); + border-left: 4px solid var(--color-msg-error); + color: var(--color-msg-error); +} + +main .msg.error i { + color: var(--color-msg-error); +} + +main .content-header { + display: flex; + justify-content: space-between; +} + +main .content-header form { + display: flex; + justify-content: space-between; +} + +main .content-header form .search input, main .content-header form > select { + background-color: transparent; + outline: none; + border: none; + height: 40px; + width: 220px; + border-bottom: 1px solid var(--color-border-input); + padding-right: 25px; + margin-left: 10px; +} + +main .content-header form .search input:hover, main .content-header form .search input:active, main .content-header form > select:hover, main .content-header form > select:active { + border-bottom: 1px solid var(--color-border-input-hover); +} + +main .content-header form > select { + width: 150px; +} + +main .content-header form > a { + text-decoration: none; + display: inline-flex; + color: #676d72; + justify-self: center; + align-items: center; + padding: 0 5px; +} + +main .content-header form > a:hover { + color: #4f5357; +} + +main .content-header .search label { + position: relative; +} + +main .content-header .search i { + position: absolute; + right: 4px; + top: 4px; + bottom: 0; + font-size: 14px; + margin-top: auto; + margin-bottom: auto; + color: var(--color-border-input-hover); +} + +main .content-header .filters { + display: flex; + position: relative; + margin-right: 10px; + margin-bottom: 3px; + align-items: center; +} + +main .content-header .filters a { + text-decoration: none; + font-weight: 600; + color: var(--color-text-heading); + white-space: nowrap; +} + +main .content-header .filters a:hover { + color: var(--color-filter-text-hover); +} + +main .content-header .filters .list { + display: none; + top: calc(100% + 5px); + width: 180px; + flex-flow: column; + position: absolute; + background-color: var(--color-bg-body); + padding: 10px; + box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); +} + +main .content-header .filters .list label { + padding-bottom: 5px; + font-size: 14px; +} + +main .content-header .filters .list input { + margin-right: 10px; +} + +main .content-header .filters .list select { + width: 100%; + margin-bottom: 10px; + font-size: 14px; + padding: 3px; + border: 1px solid var(--color-tab-bg); +} + +main .content-header .filters .list button { + background: var(--color-btn-bg); + border: 0; + color: var(--color-bg-body); + padding: 5px 0; + font-size: 12px; + font-weight: 600; + margin-top: 5px; + cursor: pointer; + border-radius: 4px; +} + +main .content-header .filters .list button:hover { + background: var(--color-btn-hover-bg); +} + + +main .content-header .sort { + display: flex; + position: relative; + margin-right: 10px; + margin-bottom: 3px; + align-items: center; +} + +main .content-header .sort a { + text-decoration: none; + font-weight: 600; + color: var(--color-text-heading); + white-space: nowrap; +} + +main .content-header .sort a:hover { + color: var(--color-filter-text-hover); +} + +main .content-header .sort .list { + display: none; + top: calc(100% + 5px); + width: 180px; + flex-flow: column; + position: absolute; + background-color: var(--color-bg-body); + padding: 10px; + box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); +} + +main .content-header .sort .list label { + padding-bottom: 5px; + font-size: 14px; +} + +main .content-header .sort .list input { + margin-right: 10px; +} + +main .content-header .sort .list select { + width: 100%; + margin-bottom: 10px; + font-size: 14px; + padding: 3px; + border: 1px solid var(--color-tab-bg); +} + +main .content-header .sort .list button { + background: var(--color-btn-bg); + border: 0; + color: var(--color-bg-body); + padding: 5px 0; + font-size: 12px; + font-weight: 600; + margin-top: 5px; + cursor: pointer; + border-radius: 4px; +} + +main .content-header .sort .list button:hover { + background: var(--color-btn-hover-bg); +} + +main .content-block { + background-color: var(--color-bg-body); + margin-top: 25px; + padding: 15px; + box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.03); + overflow: hidden; + border-radius: 3px; +} + +main .content-block .block-header { + position: relative; + border-bottom: 1px solid #f0f1f2; + margin-bottom: 20px; + padding: 0 15px 15px 15px; + margin-left: -15px; + margin-right: -15px; + font-size: 14px; + font-weight: 500; +} + +main .content-block .block-header i { + display: inline-flex; + height: 25px; + width: 25px; + padding-top: 2px; + justify-content: center; + align-items: center; + border-radius: 50%; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); + margin-right: 10px; +} + +main .content-block-wrapper { + display: flex; + width: 100%; + padding-top: 25px; +} + +main .content-block-wrapper .content-block { + width: 100%; + margin: 0 10px; + border-radius: 3px; +} + +main .content-block-wrapper .content-block:first-child { + margin-left: 0; +} + +main .content-block-wrapper .content-block:last-child { + margin-right: 0; +} + +main .tabs { + display: flex; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + background-color: var(--color-tab-bg); + margin-top: 25px; + box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.03); + z-index: 100; +} + +main .tabs a { + display: flex; + text-decoration: none; + padding: 12px 15px; + border: 0; + color: #6b788c; + font-weight: 500; + font-size: 14px; +} + +main .tabs a:hover { + background-color: var(--color-tab-hover); +} + +main .tabs a.active { + color: var(--color-text-heading); + background-color: var(--color-bg-body); +} + +main .tabs ~ .content-block { + margin-top: 0; + box-shadow: 0px 6px 5px 1px rgba(0, 0, 0, 0.03); +} + +main .tab-content { + display: none; +} + +main .tab-content.active { + display: block; +} + +main .dashboard { + display: flex; + justify-content: space-between; + padding-bottom: 40px; +} + +main .dashboard .stat { + width: 24%; + padding: 0; + display: flex; + flex-flow: wrap; + border-radius: 3px; +} + +main .dashboard .stat > i { + display: inline-flex; + justify-content: center; + padding: 15px; + margin: 30px 25px 0 0; + align-items: center; + font-size: 18px; + height: 40px; + width: 40px; + border-radius: 5px; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); +} + +main .dashboard .stat .data { + padding: 7px; + flex: 1; +} + +main .dashboard .stat .data h3 { + font-size: 16px; + font-weight: 400; + padding: 15px 15px 0 15px; +} + +main .dashboard .stat .data p { + margin: 0; + padding: 10px 15px 15px 15px; + font-size: 24px; + font-weight: 700; +} + +main .dashboard .stat .footer { + width: 100%; + border-top: 1px solid #ebeced; + background-color: var(--color-hover-light); + color: #9aa0a5; + font-size: 14px; + padding: 10px; +} + +main .dashboard .stat .footer i { + padding-right: 5px; +} + +main .form { + display: flex; + flex-flow: column; + padding: 20px; +} + +main .form input[type="text"], main .form input[type="password"], main .form input[type="datetime-local"], main .form input[type="email"], main .form input[type="number"], main .form textarea, main .form select { + width: 100%; + padding: 15px 5px; + margin-bottom: 25px; + border: 0; + border-bottom: 1px solid var(--color-tab-bg); +} + +main .form input[type="text"]:hover, main .form input[type="text"]:active, main .form input[type="password"]:hover, main .form input[type="password"]:active, main .form input[type="datetime-local"]:hover, main .form input[type="datetime-local"]:active, main .form input[type="email"]:hover, main .form input[type="email"]:active, main .form input[type="number"]:hover, main .form input[type="number"]:active, main .form textarea:hover, main .form textarea:active, main .form select:hover, main .form select:active { + border-bottom: 1px solid var(--color-border-input-hover); +} + +main .form textarea { + height: 200px; +} + +main .form input[type="checkbox"] { + width: auto; + margin: 15px 0 25px 2px; + transform: scale(1.2); +} + +main .form label { + display: block; + font-weight: 600; +} + +main .form label .required { + font-style: normal; + color: var(--color-danger); +} + +main .form button { + background-color: var(--color-tab-bg); + color: #676d72; + border: 0; + padding: 5px; + width: 100%; + font-weight: 600; + font-size: 14px; + cursor: pointer; +} + +main .form button:hover { + background-color: #d6d8da; +} + +main .form .multiselect { + position: relative; + display: flex; + flex-flow: wrap; + border-bottom: 1px solid var(--color-tab-bg); + padding-bottom: 10px; + margin: 15px 0 25px 0; + margin-bottom: 25px; +} + +main .form .multiselect > .item { + display: inline-flex; + border: 1px solid var(--color-tab-bg); + padding: 0 10px; + height: 40px; + margin: 0 5px 5px 0; + font-size: 14px; + justify-content: center; + align-items: center; +} +main .multiselect > .item { + display: inline-flex; + border: 1px solid var(--color-tab-bg); + padding: 0 10px; + height: 40px; + margin: 0 5px 5px 0; + font-size: 14px; + justify-content: center; + align-items: center; +} + +main .form .multiselect > .item .remove { + font-style: normal; + cursor: pointer; + font-size: 19px; + margin-right: 3px; + margin-top: -2px; + color: var(--color-border-input-hover); +} + +main .form .multiselect > .item .remove:hover { + color: #9aa0a5; +} + +main .form .multiselect input { + height: 40px; + width: 80px; + flex-grow: 1; + padding: 0; + margin: 0; + outline: 0; + border: 0; +} + +main .form .multiselect input:hover { + border: 0; +} + +main .form .multiselect .list { + display: none; + position: absolute; + top: 100%; + width: 100%; + flex-flow: column; + background-color: var(--color-bg-body); + box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); + max-height: 100px; + overflow-y: auto; + z-index: 1000000000; +} + +main .form .multiselect .list span { + display: flex; + padding: 5px 7px; + cursor: pointer; +} + +main .form .multiselect .list span:hover { + background-color: #f3f4f4; +} + +main .form .multiselect:hover, main .form .multiselect:active { + border-bottom: 1px solid var(--color-border-input-hover); +} + +main .top-nav { + display: flex; + flex-flow: wrap; + padding-top: 20px; +} + +main .error { + padding: 15px; + margin: 0; +} + +main .pagination { + display: flex; + align-items: center; + padding: 25px 0; +} + +main .pagination a { + display: inline-flex; + text-decoration: none; + background-color: var(--color-pagination-bg); + font-size: 14px; + font-weight: 600; + color: var(--color-bg-body); + border-radius: 4px; + padding: 7px 10px; +} + +main .pagination a:hover { + background-color: var(--color-pagination-hover); +} + +main .pagination a:first-child { + margin-right: 10px; +} + +main .pagination a:last-child { + margin-left: 10px; +} + +main .pagination span { + font-weight: 600; + margin: 10px; +} + +main .media-page .media { + display: flex; + flex-flow: wrap; + padding: 15px; +} + +main .media-page .media .image { + position: relative; + text-decoration: none; + border: 1px solid #e3e4e6; + padding: 10px; + width: 150px; + height: 135px; + margin: 0 15px 50px 0; +} + +main .media-page .media .image img { + width: 100%; + height: 100%; + object-fit: contain; + transition: all ease .3s; +} + +main .media-page .media .image::after { + content: attr(data-title); + display: block; + position: absolute; + color: #6e7581; + font-size: 14px; + font-weight: 500; + top: calc(100% + 5px); + left: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} + +main .media-page .media .image:hover { + border: 1px solid var(--color-border-input); +} + +main .media-page .media .image:hover img { + transform: scale(1.05); +} + +main .media-page .media .image:hover .title { + color: #5c6471; +} + +main .order-details .order-detail { + display: flex; + justify-content: space-between; + padding-bottom: 15px; + word-break: break-all; +} + +main .order-details .order-detail h3 { + padding: 0; + margin: 0; + font-size: 14px; + font-weight: 500; +} + +main .order-details .order-detail p { + padding: 0; + margin: 0; +} + +main .order-table { + margin: 0; +} + +main .order-table .item-list-end { + border-bottom: 1px solid #f0f1f2; +} + +main .order-table .subtotal { + padding-top: 20px; +} + +main .order-table .subtotal, main .order-table .shipping, main .order-table .total { + text-align: right; + font-weight: 500; + font-size: 14px; +} + +main .order-table .num { + text-align: right; +} + +main .manage-order-table input, main .manage-order-table select { + border: 0; + padding: 5px 0; + height: 40px; + background: transparent; + width: 90%; + border-bottom: 1px solid var(--color-tab-bg); +} + +main .manage-order-table .add-item { + display: inline-block; + text-decoration: none; + color: #676d72; + padding: 25px 0; +} + +main .manage-order-table .add-item i { + padding-right: 5px; +} + +main .manage-order-table .add-item:hover { + color: #4f5357; +} + +main .manage-order-table .delete-item { + cursor: pointer; + color: #676d72; +} + +main .manage-order-table .delete-item:hover { + color: #b44a4a; +} + +.table { + overflow-x: auto; + padding: 0 10px; +} + +.table table { + width: 100%; + border-collapse: collapse; +} + +.table table thead td { + font-weight: 600; + font-size: 14px; + padding: 15px 0; +} + +.table table thead td a { + font-weight: inherit; + font-size: inherit; + color: inherit; + text-decoration: none; +} + +.table table thead td i { + padding-left: 5px; +} + +.table table thead tr { + border-bottom: 1px solid #f0f1f2; +} + +.table table tbody tr:first-child td { + padding-top: 10px; +} + +.table table tbody td { + padding: 5px; +} + +.table table tbody .img { + padding: 1px 0; +} + +.table table tbody .rrp { + color: var(--color-danger); +} + +.table table tbody .status { + padding: 4px 7px; + border-radius: 4px; + background-color: var(--color-status-neutral); + font-weight: 500; + font-size: 12px; + color: var(--color-bg-body); +} + +.table table tbody .status.enabled { + padding: 4px 7px; + border-radius: 4px; + background-color: var(--color-status-enabled); + font-weight: 500; + font-size: 12px; + color: var(--color-bg-body); +} + +.table table tbody .status.disabled { + padding: 4px 7px; + border-radius: 4px; + background-color: var(--color-status-disabled); + font-weight: 500; + font-size: 12px; + color: var(--color-bg-body); +} + + +.status { + padding: 4px 7px; + border-radius: 4px; + background-color: var(--color-status-neutral); + font-weight: 500; + font-size: 12px; + color: var(--color-bg-body); +} + +.status.enabled { + background-color: var(--color-status-enabled); +} + +.status.disabled { + background-color: var(--color-status-disabled); +} + +.status.id4 { + background-color: var(--color-status-enabled); +} + +.status.id3 { +background-color: var(--color-status-enabled); +} + +.status.id2 { + background-color: var(--color-status-warning); +} +.table table tbody .status.service_renewal{ + background-color: var(--color-status-warning); +} + +.table table tbody .status.firmware_update{ + background-color: var(--color-status-warning); +} + +.table table tbody .status.warranty_outdated{ + background-color: var(--color-status-warning); +} +.table table tbody .status.warranty { + background-color: var(--color-status-enabled); +} + +.table table tbody .status.service{ + background-color: var(--color-status-enabled); +} + +.table table tbody .status.firmware_recent{ + background-color: var(--color-status-enabled); +} + +.status.id5 { + background-color: var(--color-status-disabled); +} + +.table table tbody .status.id4, .table table tbody .status.id3, .table table tbody .status.warranty { + background-color: var(--color-status-enabled); +} + +.table table tbody .status.id2 { + background-color: var(--color-status-warning); +} + +.table table tbody .status.id5{ + background-color: var(--color-status-disabled); +} + +.product-media-tab, .product-options-tab, .product-downloads-tab { + max-width: 800px; +} + +.product-media-tab .product-media, .product-media-tab .product-option, .product-media-tab .product-download, .product-options-tab .product-media, .product-options-tab .product-option, .product-options-tab .product-download, .product-downloads-tab .product-media, .product-downloads-tab .product-option, .product-downloads-tab .product-download { + display: flex; + border-right: 4px solid #e8ebee; + margin-bottom: 15px; +} + +.product-media-tab .product-media:first-child, .product-media-tab .product-option:first-child, .product-media-tab .product-download:first-child, .product-options-tab .product-media:first-child, .product-options-tab .product-option:first-child, .product-options-tab .product-download:first-child, .product-downloads-tab .product-media:first-child, .product-downloads-tab .product-option:first-child, .product-downloads-tab .product-download:first-child { + border-right: 4px solid #72a0d4; +} + +.product-media-tab .product-media:first-child .move-up, .product-media-tab .product-option:first-child .move-up, .product-media-tab .product-download:first-child .move-up, .product-options-tab .product-media:first-child .move-up, .product-options-tab .product-option:first-child .move-up, .product-options-tab .product-download:first-child .move-up, .product-downloads-tab .product-media:first-child .move-up, .product-downloads-tab .product-option:first-child .move-up, .product-downloads-tab .product-download:first-child .move-up { + display: none; +} + +.product-media-tab .product-media:last-child .move-down, .product-media-tab .product-option:last-child .move-down, .product-media-tab .product-download:last-child .move-down, .product-options-tab .product-media:last-child .move-down, .product-options-tab .product-option:last-child .move-down, .product-options-tab .product-download:last-child .move-down, .product-downloads-tab .product-media:last-child .move-down, .product-downloads-tab .product-option:last-child .move-down, .product-downloads-tab .product-download:last-child .move-down { + display: none; +} + +.product-media-tab .product-media .media-index, .product-media-tab .product-media .option-index, .product-media-tab .product-media .download-index, .product-media-tab .product-option .media-index, .product-media-tab .product-option .option-index, .product-media-tab .product-option .download-index, .product-media-tab .product-download .media-index, .product-media-tab .product-download .option-index, .product-media-tab .product-download .download-index, .product-options-tab .product-media .media-index, .product-options-tab .product-media .option-index, .product-options-tab .product-media .download-index, .product-options-tab .product-option .media-index, .product-options-tab .product-option .option-index, .product-options-tab .product-option .download-index, .product-options-tab .product-download .media-index, .product-options-tab .product-download .option-index, .product-options-tab .product-download .download-index, .product-downloads-tab .product-media .media-index, .product-downloads-tab .product-media .option-index, .product-downloads-tab .product-media .download-index, .product-downloads-tab .product-option .media-index, .product-downloads-tab .product-option .option-index, .product-downloads-tab .product-option .download-index, .product-downloads-tab .product-download .media-index, .product-downloads-tab .product-download .option-index, .product-downloads-tab .product-download .download-index { + display: flex; + color: #bcc0c4; + font-weight: 500; + align-items: center; + padding-right: 15px; + font-weight: 14px; + width: 30px; +} + +.product-media-tab .product-media .media-img, .product-media-tab .product-option .media-img, .product-media-tab .product-download .media-img, .product-options-tab .product-media .media-img, .product-options-tab .product-option .media-img, .product-options-tab .product-download .media-img, .product-downloads-tab .product-media .media-img, .product-downloads-tab .product-option .media-img, .product-downloads-tab .product-download .media-img { + text-decoration: none; + display: flex; + height: 70px; + width: 100px; + border: 1px solid #ddd; + padding: 5px; +} + +.product-media-tab .product-media .media-img img, .product-media-tab .product-option .media-img img, .product-media-tab .product-download .media-img img, .product-options-tab .product-media .media-img img, .product-options-tab .product-option .media-img img, .product-options-tab .product-download .media-img img, .product-downloads-tab .product-media .media-img img, .product-downloads-tab .product-option .media-img img, .product-downloads-tab .product-download .media-img img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.product-media-tab .product-media .media-text, .product-media-tab .product-media .option-text, .product-media-tab .product-media .download-text, .product-media-tab .product-option .media-text, .product-media-tab .product-option .option-text, .product-media-tab .product-option .download-text, .product-media-tab .product-download .media-text, .product-media-tab .product-download .option-text, .product-media-tab .product-download .download-text, .product-options-tab .product-media .media-text, .product-options-tab .product-media .option-text, .product-options-tab .product-media .download-text, .product-options-tab .product-option .media-text, .product-options-tab .product-option .option-text, .product-options-tab .product-option .download-text, .product-options-tab .product-download .media-text, .product-options-tab .product-download .option-text, .product-options-tab .product-download .download-text, .product-downloads-tab .product-media .media-text, .product-downloads-tab .product-media .option-text, .product-downloads-tab .product-media .download-text, .product-downloads-tab .product-option .media-text, .product-downloads-tab .product-option .option-text, .product-downloads-tab .product-option .download-text, .product-downloads-tab .product-download .media-text, .product-downloads-tab .product-download .option-text, .product-downloads-tab .product-download .download-text { + display: flex; + flex-flow: column; + justify-content: center; + flex: 1; + padding-left: 15px; +} + +.product-media-tab .product-media .media-text h3, .product-media-tab .product-media .option-text h3, .product-media-tab .product-media .download-text h3, .product-media-tab .product-option .media-text h3, .product-media-tab .product-option .option-text h3, .product-media-tab .product-option .download-text h3, .product-media-tab .product-download .media-text h3, .product-media-tab .product-download .option-text h3, .product-media-tab .product-download .download-text h3, .product-options-tab .product-media .media-text h3, .product-options-tab .product-media .option-text h3, .product-options-tab .product-media .download-text h3, .product-options-tab .product-option .media-text h3, .product-options-tab .product-option .option-text h3, .product-options-tab .product-option .download-text h3, .product-options-tab .product-download .media-text h3, .product-options-tab .product-download .option-text h3, .product-options-tab .product-download .download-text h3, .product-downloads-tab .product-media .media-text h3, .product-downloads-tab .product-media .option-text h3, .product-downloads-tab .product-media .download-text h3, .product-downloads-tab .product-option .media-text h3, .product-downloads-tab .product-option .option-text h3, .product-downloads-tab .product-option .download-text h3, .product-downloads-tab .product-download .media-text h3, .product-downloads-tab .product-download .option-text h3, .product-downloads-tab .product-download .download-text h3 { + font-weight: 500; +} + +.product-media-tab .product-media .media-text p, .product-media-tab .product-media .option-text p, .product-media-tab .product-media .download-text p, .product-media-tab .product-option .media-text p, .product-media-tab .product-option .option-text p, .product-media-tab .product-option .download-text p, .product-media-tab .product-download .media-text p, .product-media-tab .product-download .option-text p, .product-media-tab .product-download .download-text p, .product-options-tab .product-media .media-text p, .product-options-tab .product-media .option-text p, .product-options-tab .product-media .download-text p, .product-options-tab .product-option .media-text p, .product-options-tab .product-option .option-text p, .product-options-tab .product-option .download-text p, .product-options-tab .product-download .media-text p, .product-options-tab .product-download .option-text p, .product-options-tab .product-download .download-text p, .product-downloads-tab .product-media .media-text p, .product-downloads-tab .product-media .option-text p, .product-downloads-tab .product-media .download-text p, .product-downloads-tab .product-option .media-text p, .product-downloads-tab .product-option .option-text p, .product-downloads-tab .product-option .download-text p, .product-downloads-tab .product-download .media-text p, .product-downloads-tab .product-download .option-text p, .product-downloads-tab .product-download .download-text p { + margin: 0; + color: var(--color-muted); + font-size: 14px; +} + +.product-media-tab .product-media .media-position, .product-media-tab .product-media .option-position, .product-media-tab .product-media .download-position, .product-media-tab .product-option .media-position, .product-media-tab .product-option .option-position, .product-media-tab .product-option .download-position, .product-media-tab .product-download .media-position, .product-media-tab .product-download .option-position, .product-media-tab .product-download .download-position, .product-options-tab .product-media .media-position, .product-options-tab .product-media .option-position, .product-options-tab .product-media .download-position, .product-options-tab .product-option .media-position, .product-options-tab .product-option .option-position, .product-options-tab .product-option .download-position, .product-options-tab .product-download .media-position, .product-options-tab .product-download .option-position, .product-options-tab .product-download .download-position, .product-downloads-tab .product-media .media-position, .product-downloads-tab .product-media .option-position, .product-downloads-tab .product-media .download-position, .product-downloads-tab .product-option .media-position, .product-downloads-tab .product-option .option-position, .product-downloads-tab .product-option .download-position, .product-downloads-tab .product-download .media-position, .product-downloads-tab .product-download .option-position, .product-downloads-tab .product-download .download-position { + display: flex; + width: 100px; + justify-content: flex-end; + align-items: center; + padding-right: 20px; +} + +.product-media-tab .product-media .media-position i, .product-media-tab .product-media .option-position i, .product-media-tab .product-media .download-position i, .product-media-tab .product-option .media-position i, .product-media-tab .product-option .option-position i, .product-media-tab .product-option .download-position i, .product-media-tab .product-download .media-position i, .product-media-tab .product-download .option-position i, .product-media-tab .product-download .download-position i, .product-options-tab .product-media .media-position i, .product-options-tab .product-media .option-position i, .product-options-tab .product-media .download-position i, .product-options-tab .product-option .media-position i, .product-options-tab .product-option .option-position i, .product-options-tab .product-option .download-position i, .product-options-tab .product-download .media-position i, .product-options-tab .product-download .option-position i, .product-options-tab .product-download .download-position i, .product-downloads-tab .product-media .media-position i, .product-downloads-tab .product-media .option-position i, .product-downloads-tab .product-media .download-position i, .product-downloads-tab .product-option .media-position i, .product-downloads-tab .product-option .option-position i, .product-downloads-tab .product-option .download-position i, .product-downloads-tab .product-download .media-position i, .product-downloads-tab .product-download .option-position i, .product-downloads-tab .product-download .download-position i { + cursor: pointer; + font-size: 20px; + padding-left: 15px; + color: #cbcfd4; +} + +.product-media-tab .product-media .media-position i:hover, .product-media-tab .product-media .option-position i:hover, .product-media-tab .product-media .download-position i:hover, .product-media-tab .product-option .media-position i:hover, .product-media-tab .product-option .option-position i:hover, .product-media-tab .product-option .download-position i:hover, .product-media-tab .product-download .media-position i:hover, .product-media-tab .product-download .option-position i:hover, .product-media-tab .product-download .download-position i:hover, .product-options-tab .product-media .media-position i:hover, .product-options-tab .product-media .option-position i:hover, .product-options-tab .product-media .download-position i:hover, .product-options-tab .product-option .media-position i:hover, .product-options-tab .product-option .option-position i:hover, .product-options-tab .product-option .download-position i:hover, .product-options-tab .product-download .media-position i:hover, .product-options-tab .product-download .option-position i:hover, .product-options-tab .product-download .download-position i:hover, .product-downloads-tab .product-media .media-position i:hover, .product-downloads-tab .product-media .option-position i:hover, .product-downloads-tab .product-media .download-position i:hover, .product-downloads-tab .product-option .media-position i:hover, .product-downloads-tab .product-option .option-position i:hover, .product-downloads-tab .product-option .download-position i:hover, .product-downloads-tab .product-download .media-position i:hover, .product-downloads-tab .product-download .option-position i:hover, .product-downloads-tab .product-download .download-position i:hover { + color: #afb5bd; +} + +.product-media-tab .product-media .media-position i.media-delete, .product-media-tab .product-media .media-position i.option-delete, .product-media-tab .product-media .media-position i.download-delete, .product-media-tab .product-media .option-position i.media-delete, .product-media-tab .product-media .option-position i.option-delete, .product-media-tab .product-media .option-position i.download-delete, .product-media-tab .product-media .download-position i.media-delete, .product-media-tab .product-media .download-position i.option-delete, .product-media-tab .product-media .download-position i.download-delete, .product-media-tab .product-option .media-position i.media-delete, .product-media-tab .product-option .media-position i.option-delete, .product-media-tab .product-option .media-position i.download-delete, .product-media-tab .product-option .option-position i.media-delete, .product-media-tab .product-option .option-position i.option-delete, .product-media-tab .product-option .option-position i.download-delete, .product-media-tab .product-option .download-position i.media-delete, .product-media-tab .product-option .download-position i.option-delete, .product-media-tab .product-option .download-position i.download-delete, .product-media-tab .product-download .media-position i.media-delete, .product-media-tab .product-download .media-position i.option-delete, .product-media-tab .product-download .media-position i.download-delete, .product-media-tab .product-download .option-position i.media-delete, .product-media-tab .product-download .option-position i.option-delete, .product-media-tab .product-download .option-position i.download-delete, .product-media-tab .product-download .download-position i.media-delete, .product-media-tab .product-download .download-position i.option-delete, .product-media-tab .product-download .download-position i.download-delete, .product-options-tab .product-media .media-position i.media-delete, .product-options-tab .product-media .media-position i.option-delete, .product-options-tab .product-media .media-position i.download-delete, .product-options-tab .product-media .option-position i.media-delete, .product-options-tab .product-media .option-position i.option-delete, .product-options-tab .product-media .option-position i.download-delete, .product-options-tab .product-media .download-position i.media-delete, .product-options-tab .product-media .download-position i.option-delete, .product-options-tab .product-media .download-position i.download-delete, .product-options-tab .product-option .media-position i.media-delete, .product-options-tab .product-option .media-position i.option-delete, .product-options-tab .product-option .media-position i.download-delete, .product-options-tab .product-option .option-position i.media-delete, .product-options-tab .product-option .option-position i.option-delete, .product-options-tab .product-option .option-position i.download-delete, .product-options-tab .product-option .download-position i.media-delete, .product-options-tab .product-option .download-position i.option-delete, .product-options-tab .product-option .download-position i.download-delete, .product-options-tab .product-download .media-position i.media-delete, .product-options-tab .product-download .media-position i.option-delete, .product-options-tab .product-download .media-position i.download-delete, .product-options-tab .product-download .option-position i.media-delete, .product-options-tab .product-download .option-position i.option-delete, .product-options-tab .product-download .option-position i.download-delete, .product-options-tab .product-download .download-position i.media-delete, .product-options-tab .product-download .download-position i.option-delete, .product-options-tab .product-download .download-position i.download-delete, .product-downloads-tab .product-media .media-position i.media-delete, .product-downloads-tab .product-media .media-position i.option-delete, .product-downloads-tab .product-media .media-position i.download-delete, .product-downloads-tab .product-media .option-position i.media-delete, .product-downloads-tab .product-media .option-position i.option-delete, .product-downloads-tab .product-media .option-position i.download-delete, .product-downloads-tab .product-media .download-position i.media-delete, .product-downloads-tab .product-media .download-position i.option-delete, .product-downloads-tab .product-media .download-position i.download-delete, .product-downloads-tab .product-option .media-position i.media-delete, .product-downloads-tab .product-option .media-position i.option-delete, .product-downloads-tab .product-option .media-position i.download-delete, .product-downloads-tab .product-option .option-position i.media-delete, .product-downloads-tab .product-option .option-position i.option-delete, .product-downloads-tab .product-option .option-position i.download-delete, .product-downloads-tab .product-option .download-position i.media-delete, .product-downloads-tab .product-option .download-position i.option-delete, .product-downloads-tab .product-option .download-position i.download-delete, .product-downloads-tab .product-download .media-position i.media-delete, .product-downloads-tab .product-download .media-position i.option-delete, .product-downloads-tab .product-download .media-position i.download-delete, .product-downloads-tab .product-download .option-position i.media-delete, .product-downloads-tab .product-download .option-position i.option-delete, .product-downloads-tab .product-download .option-position i.download-delete, .product-downloads-tab .product-download .download-position i.media-delete, .product-downloads-tab .product-download .download-position i.option-delete, .product-downloads-tab .product-download .download-position i.download-delete { + padding-right: 5px; + color: #e1e4e6; +} + +.product-media-tab .product-media .media-position i.media-delete:hover, .product-media-tab .product-media .media-position i.option-delete:hover, .product-media-tab .product-media .media-position i.download-delete:hover, .product-media-tab .product-media .option-position i.media-delete:hover, .product-media-tab .product-media .option-position i.option-delete:hover, .product-media-tab .product-media .option-position i.download-delete:hover, .product-media-tab .product-media .download-position i.media-delete:hover, .product-media-tab .product-media .download-position i.option-delete:hover, .product-media-tab .product-media .download-position i.download-delete:hover, .product-media-tab .product-option .media-position i.media-delete:hover, .product-media-tab .product-option .media-position i.option-delete:hover, .product-media-tab .product-option .media-position i.download-delete:hover, .product-media-tab .product-option .option-position i.media-delete:hover, .product-media-tab .product-option .option-position i.option-delete:hover, .product-media-tab .product-option .option-position i.download-delete:hover, .product-media-tab .product-option .download-position i.media-delete:hover, .product-media-tab .product-option .download-position i.option-delete:hover, .product-media-tab .product-option .download-position i.download-delete:hover, .product-media-tab .product-download .media-position i.media-delete:hover, .product-media-tab .product-download .media-position i.option-delete:hover, .product-media-tab .product-download .media-position i.download-delete:hover, .product-media-tab .product-download .option-position i.media-delete:hover, .product-media-tab .product-download .option-position i.option-delete:hover, .product-media-tab .product-download .option-position i.download-delete:hover, .product-media-tab .product-download .download-position i.media-delete:hover, .product-media-tab .product-download .download-position i.option-delete:hover, .product-media-tab .product-download .download-position i.download-delete:hover, .product-options-tab .product-media .media-position i.media-delete:hover, .product-options-tab .product-media .media-position i.option-delete:hover, .product-options-tab .product-media .media-position i.download-delete:hover, .product-options-tab .product-media .option-position i.media-delete:hover, .product-options-tab .product-media .option-position i.option-delete:hover, .product-options-tab .product-media .option-position i.download-delete:hover, .product-options-tab .product-media .download-position i.media-delete:hover, .product-options-tab .product-media .download-position i.option-delete:hover, .product-options-tab .product-media .download-position i.download-delete:hover, .product-options-tab .product-option .media-position i.media-delete:hover, .product-options-tab .product-option .media-position i.option-delete:hover, .product-options-tab .product-option .media-position i.download-delete:hover, .product-options-tab .product-option .option-position i.media-delete:hover, .product-options-tab .product-option .option-position i.option-delete:hover, .product-options-tab .product-option .option-position i.download-delete:hover, .product-options-tab .product-option .download-position i.media-delete:hover, .product-options-tab .product-option .download-position i.option-delete:hover, .product-options-tab .product-option .download-position i.download-delete:hover, .product-options-tab .product-download .media-position i.media-delete:hover, .product-options-tab .product-download .media-position i.option-delete:hover, .product-options-tab .product-download .media-position i.download-delete:hover, .product-options-tab .product-download .option-position i.media-delete:hover, .product-options-tab .product-download .option-position i.option-delete:hover, .product-options-tab .product-download .option-position i.download-delete:hover, .product-options-tab .product-download .download-position i.media-delete:hover, .product-options-tab .product-download .download-position i.option-delete:hover, .product-options-tab .product-download .download-position i.download-delete:hover, .product-downloads-tab .product-media .media-position i.media-delete:hover, .product-downloads-tab .product-media .media-position i.option-delete:hover, .product-downloads-tab .product-media .media-position i.download-delete:hover, .product-downloads-tab .product-media .option-position i.media-delete:hover, .product-downloads-tab .product-media .option-position i.option-delete:hover, .product-downloads-tab .product-media .option-position i.download-delete:hover, .product-downloads-tab .product-media .download-position i.media-delete:hover, .product-downloads-tab .product-media .download-position i.option-delete:hover, .product-downloads-tab .product-media .download-position i.download-delete:hover, .product-downloads-tab .product-option .media-position i.media-delete:hover, .product-downloads-tab .product-option .media-position i.option-delete:hover, .product-downloads-tab .product-option .media-position i.download-delete:hover, .product-downloads-tab .product-option .option-position i.media-delete:hover, .product-downloads-tab .product-option .option-position i.option-delete:hover, .product-downloads-tab .product-option .option-position i.download-delete:hover, .product-downloads-tab .product-option .download-position i.media-delete:hover, .product-downloads-tab .product-option .download-position i.option-delete:hover, .product-downloads-tab .product-option .download-position i.download-delete:hover, .product-downloads-tab .product-download .media-position i.media-delete:hover, .product-downloads-tab .product-download .media-position i.option-delete:hover, .product-downloads-tab .product-download .media-position i.download-delete:hover, .product-downloads-tab .product-download .option-position i.media-delete:hover, .product-downloads-tab .product-download .option-position i.option-delete:hover, .product-downloads-tab .product-download .option-position i.download-delete:hover, .product-downloads-tab .product-download .download-position i.media-delete:hover, .product-downloads-tab .product-download .download-position i.option-delete:hover, .product-downloads-tab .product-download .download-position i.download-delete:hover { + color: #b44a4a; +} + +.product-media-tab .product-media .media-position i.option-edit, .product-media-tab .product-media .option-position i.option-edit, .product-media-tab .product-media .download-position i.option-edit, .product-media-tab .product-option .media-position i.option-edit, .product-media-tab .product-option .option-position i.option-edit, .product-media-tab .product-option .download-position i.option-edit, .product-media-tab .product-download .media-position i.option-edit, .product-media-tab .product-download .option-position i.option-edit, .product-media-tab .product-download .download-position i.option-edit, .product-options-tab .product-media .media-position i.option-edit, .product-options-tab .product-media .option-position i.option-edit, .product-options-tab .product-media .download-position i.option-edit, .product-options-tab .product-option .media-position i.option-edit, .product-options-tab .product-option .option-position i.option-edit, .product-options-tab .product-option .download-position i.option-edit, .product-options-tab .product-download .media-position i.option-edit, .product-options-tab .product-download .option-position i.option-edit, .product-options-tab .product-download .download-position i.option-edit, .product-downloads-tab .product-media .media-position i.option-edit, .product-downloads-tab .product-media .option-position i.option-edit, .product-downloads-tab .product-media .download-position i.option-edit, .product-downloads-tab .product-option .media-position i.option-edit, .product-downloads-tab .product-option .option-position i.option-edit, .product-downloads-tab .product-option .download-position i.option-edit, .product-downloads-tab .product-download .media-position i.option-edit, .product-downloads-tab .product-download .option-position i.option-edit, .product-downloads-tab .product-download .download-position i.option-edit { + font-size: 14px; + padding-right: 5px; + color: #e1e4e6; +} + +.product-media-tab .product-media .media-position i.option-edit:hover, .product-media-tab .product-media .option-position i.option-edit:hover, .product-media-tab .product-media .download-position i.option-edit:hover, .product-media-tab .product-option .media-position i.option-edit:hover, .product-media-tab .product-option .option-position i.option-edit:hover, .product-media-tab .product-option .download-position i.option-edit:hover, .product-media-tab .product-download .media-position i.option-edit:hover, .product-media-tab .product-download .option-position i.option-edit:hover, .product-media-tab .product-download .download-position i.option-edit:hover, .product-options-tab .product-media .media-position i.option-edit:hover, .product-options-tab .product-media .option-position i.option-edit:hover, .product-options-tab .product-media .download-position i.option-edit:hover, .product-options-tab .product-option .media-position i.option-edit:hover, .product-options-tab .product-option .option-position i.option-edit:hover, .product-options-tab .product-option .download-position i.option-edit:hover, .product-options-tab .product-download .media-position i.option-edit:hover, .product-options-tab .product-download .option-position i.option-edit:hover, .product-options-tab .product-download .download-position i.option-edit:hover, .product-downloads-tab .product-media .media-position i.option-edit:hover, .product-downloads-tab .product-media .option-position i.option-edit:hover, .product-downloads-tab .product-media .download-position i.option-edit:hover, .product-downloads-tab .product-option .media-position i.option-edit:hover, .product-downloads-tab .product-option .option-position i.option-edit:hover, .product-downloads-tab .product-option .download-position i.option-edit:hover, .product-downloads-tab .product-download .media-position i.option-edit:hover, .product-downloads-tab .product-download .option-position i.option-edit:hover, .product-downloads-tab .product-download .download-position i.option-edit:hover { + color: #4ab46d; +} + +.link1, .link2 { + text-decoration: none; + color: var(--color-accent-blue); + border-bottom: 1px dotted; + margin: 0 5px 0 0; +} + +.link1:hover, .link2:hover { + color: var(--color-accent-blue-hover); +} + +.link2 { + color: var(--color-accent-red); +} + +.link2:hover { + color: var(--color-accent-red-hover); +} + +.title1 { + color: #6a6e75; + border-bottom: 1px solid #f0f1f2; + margin-bottom: 15px; + padding-bottom: 15px; + font-weight: 500; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + appearance: none; + cursor: pointer; + border: 0; + background: var(--color-selected-bg); + color: var(--color-bg-body); + padding: 0 14px; + font-size: 14px; + font-weight: 600; + border-radius: 4px; + height: 38px; + margin: 2px; + font-style: italic; +} + +.btn2 { + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + appearance: none; + cursor: pointer; + border: 0; + background: var(--color-btn-secondary); + color: var(--color-bg-body); + padding: 0px 10px; + font-size: 14px; + font-weight: 600; + border-radius: 4px; + height: 20px; + margin: 2px; + font-style: italic; +} + +a.btn:after{ + content: ' '; + display: inline-block; + border-bottom: 1px solid var(--color-bg-body); + border-right: 1px solid var(--color-bg-body); + height: 8px; + width: 8px; + transform: rotate(-45deg); + margin-left: 1rem; +} + +.btn_link { + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + appearance: none; + cursor: pointer; + border: 0; + background: var(--color-btn-neutral); + color: #75797e; + padding: 0 14px; + font-size: 12px; + font-weight: 600; + border-radius: 4px; + height: 30px; + margin: 2px; + font-style: italic; +} + +a.btn_link:after{ + content: ' '; + display: inline-block; + border-bottom: 1px solid #75797e; + border-right: 1px solid #75797e; + height: 8px; + width: 8px; + transform: rotate(-45deg); + margin-left: 1rem; +} + +.btn:hover { + background: var(--color-btn-hover-bg); +} + +.btn.green { + background: #4ab46d; +} + +.btn.green:hover { + background: #46a966; +} + +.btn.red { + background: #b44a4a; +} + +.btn.red:hover { + background: #a94646; +} + +.btn.alt { + color: #75797e; + border: 1px solid #d4dbde; + box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.03); + background: var(--color-btn-neutral); +} + +.btn.alt:hover { + background: #eef1f2; +} + +.btn.disabled { + background: var(--color-disabled); +} + +.btn.disabled:hover { + background: var(--color-disabled-hover); +} + +.btn.small { + padding: 8px 12px; + font-size: 12px; +} + +.btn .loader, +.btn .loader::after { + width: 15px; + height: 15px; +} + +.btn .loader { + margin: 0; + border-top: 2px solid rgba(255, 255, 255, 0.4); + border-right: 2px solid rgba(255, 255, 255, 0.4); + border-bottom: 2px solid rgba(255, 255, 255, 0.4); + border-left: 2px solid rgba(255, 255, 255, 0.9); +} + +.dialog { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + display: none; + z-index: 999999; + align-items: center; + justify-content: center; +} + +.dialog .content { + transform: scale(0.5); + background-color: var(--color-bg-body); + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.03); + width: 400px; +} + +.dialog .content .heading { + display: flex; + padding: 20px; + font-weight: 600; + justify-content: space-between; + border-bottom: 1px solid #ebeced; + align-items: center; +} + +.dialog .content .heading span { + font-size: 24px; + line-height: 24px; + padding-bottom: 4px; + cursor: pointer; + color: var(--color-title-muted); +} + +.dialog .content .heading span:hover { + color: var(--color-hover-dark); +} + +.dialog .content .footer { + border-top: 1px solid #ebeced; + background-color: var(--color-hover-light); +} + +.dialog.large .content { + width: 900px; +} + +.dialog.medium .content { + width: 600px; +} + +.dialog.open { + display: flex; +} + +.dialog.open .content { + transform: scale(1); + transition: all 0.2s ease; +} + +.media-library-modal .media { + display: flex; +} + +.media-library-modal .media .list { + display: flex; + flex-flow: wrap; + align-items: flex-start; + align-content: flex-start; + width: 75%; + height: 460px; + overflow-y: auto; + scrollbar-width: thin; + padding: 10px; +} + +.media-library-modal .media .list > a { + position: relative; + display: flex; + height: 100px; + width: 23.4%; + border: 1px solid #ddd; + padding: 5px; + margin: 5px; +} + +.media-library-modal .media .list > a img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.media-library-modal .media .list > a.selected { + border: 2px solid #237fe8; +} + +.media-library-modal .media .list > a.selected::before { + position: absolute; + font-family: 'Font Awesome 5 Free'; + content: '\f00c'; + display: inline-block; + vertical-align: middle; + font-weight: 900; + bottom: 0; + right: 0; + color: var(--color-bg-body); + background-color: #237fe8; + font-size: 12px; + padding: 4px 4px 1px 4px; +} + +.media-library-modal .media .list .list-header { + display: flex; + width: 100%; + justify-content: space-between; + padding: 5px 5px 10px 5px; +} + +.media-library-modal .media .list .list-header input { + border: 0; + padding: 5px 0; + border-bottom: 1px solid var(--color-tab-bg); +} + +.media-library-modal .media .details { + width: 25%; + padding: 15px; + background-color: #f9f9fa; + border-left: 1px solid #ebeced; + height: 460px; + overflow-y: auto; + scrollbar-width: thin; +} + +.media-library-modal .media .details h3 { + margin: 0; + padding: 0; + font-size: 14px; + word-break: break-all; +} + +.media-library-modal .media .details label { + display: block; + margin: 0; + padding: 15px 0 0 0; + font-size: 14px; + font-weight: 500; +} + +.media-library-modal .media .details img { + max-width: 100%; + max-height: 100px; + padding-top: 10px; +} + +.media-library-modal .media .details input { + border: 0; + padding: 5px 0; + background: transparent; + width: 100%; + font-size: 14px; + border-bottom: 1px solid var(--color-tab-bg); +} + +.media-library-modal .media .details .media-links { + padding-top: 15px; +} + +.media-library-modal .media .details .media-links .save-media { + display: none; +} + +.media-library-modal .media .details .media-links a { + font-size: 14px; +} + +.media-library-modal .media .list::-webkit-scrollbar, .media-library-modal .media .details::-webkit-scrollbar { + width: 6px; + background: var(--color-bg-body); +} + +.media-library-modal .media .list::-webkit-scrollbar-thumb, .media-library-modal .media .details::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + border-radius: 50px; +} + +.options-modal .body { + max-height: 400px; + overflow-y: auto; + padding: 20px; +} + +.options-modal .body input[type="text"], .options-modal .body input[type="number"], .options-modal .body input[type="datetime-local"], .options-modal .body select { + border: 0; + padding: 10px 0; + height: 40px; + background: transparent; + width: 100%; + border-bottom: 1px solid var(--color-tab-bg); +} + +.options-modal .body select { + padding: 0; +} + +.options-modal .body .option-header { + display: flex; + width: 70%; +} + +.options-modal .body .option-header input { + margin-right: 10px; +} + +.options-modal .body .option-header label { + display: flex; + justify-content: center; + align-items: center; + padding-left: 10px; +} + +.options-modal .body .option-content { + display: none; + flex-flow: column; +} + +.options-modal .body .table { + width: 100%; + padding: 0; +} + +.options-modal .body .table .input-group { + display: flex; +} + +.options-modal .body .table tbody td input { + font-size: 14px; +} + +.options-modal .body .table tbody td { + padding-right: 10px; +} + +.options-modal .body .table tbody td .modifier { + width: 45px; +} + +.options-modal .body .table tbody td .modifier ~ input { + padding-left: 5px; +} + +.options-modal .body .add-option-value-btn { + text-decoration: none; + font-weight: 400; + color: #676d72; + font-size: 14px; + padding: 15px 0; +} + +.options-modal .body .add-option-value-btn i { + padding-right: 5px; +} + +.options-modal .body .add-option-value-btn:hover { + color: #4f5357; +} + +.options-modal .body .remove-option-value { + cursor: pointer; + color: #676d72; +} + +.options-modal .body .remove-option-value:hover { + color: #b44a4a; +} + +.downloads-modal .body { + padding: 20px; +} + +.downloads-modal .body input { + border: 0; + padding: 10px 0; + height: 40px; + font-size: 14px; + background: transparent; + width: 100%; + border-bottom: 1px solid var(--color-tab-bg); +} + +.downloads-modal .body label { + font-weight: 500; +} + +.edit-media-modal .body { + padding: 20px; +} + +.edit-media-modal .body label { + display: block; + margin: 0; + padding: 15px 0 0 0; + font-size: 14px; + font-weight: 500; +} + +.edit-media-modal .body img { + max-width: 100%; + max-height: 100px; + padding-top: 10px; +} + +.edit-media-modal .body input { + border: 0; + padding: 5px 0; + background: transparent; + width: 100%; + font-size: 14px; + border-bottom: 1px solid var(--color-tab-bg); +} + +.loader, +.loader::after { + border-radius: 50%; + width: 50px; + height: 50px; +} + +.loader { + position: relative; + margin: 60px auto; + border-top: 2px solid rgba(154, 158, 162, 0.2); + border-right: 2px solid rgba(154, 158, 162, 0.2); + border-bottom: 2px solid rgba(154, 158, 162, 0.2); + border-left: 2px solid #9a9ea2; + transform: translateZ(0); + animation: loader 1.1s infinite linear; +} + +@keyframes loader { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.pad-1 { + padding: 5px; +} + +.mar-1 { + margin: 5px; +} + +.pad-2 { + padding: 10px; +} + +.mar-2 { + margin: 10px; +} + +.pad-3 { + padding: 15px; +} + +.mar-3 { + margin: 15px; +} + +.pad-4 { + padding: 20px; +} + +.mar-4 { + margin: 20px; +} + +.pad-5 { + padding: 25px; +} + +.mar-5 { + margin: 25px; +} + +.pad-bot-1 { + padding-bottom: 5px; +} + +.pad-top-1 { + padding-top: 5px; +} + +.pad-left-1 { + padding-left: 5px; +} + +.pad-right-1 { + padding-right: 5px; +} + +.pad-x-1 { + padding-left: 5px; + padding-right: 5px; +} + +.pad-y-1 { + padding-top: 5px; + padding-bottom: 5px; +} + +.mar-bot-1 { + margin-bottom: 5px; +} + +.mar-top-1 { + margin-top: 5px; +} + +.mar-left-1 { + margin-left: 5px; +} + +.mar-right-1 { + margin-right: 5px; +} + +.mar-x-1 { + margin-top: 5px; + margin-bottom: 5px; +} + +.mar-y-1 { + margin-left: 5px; + margin-right: 5px; +} + +.pad-bot-2 { + padding-bottom: 10px; +} + +.pad-top-2 { + padding-top: 10px; +} + +.pad-left-2 { + padding-left: 10px; +} + +.pad-right-2 { + padding-right: 10px; +} + +.pad-x-2 { + padding-left: 10px; + padding-right: 10px; +} + +.pad-y-2 { + padding-top: 10px; + padding-bottom: 10px; +} + +.mar-bot-2 { + margin-bottom: 10px; +} + +.mar-top-2 { + margin-top: 10px; +} + +.mar-left-2 { + margin-left: 10px; +} + +.mar-right-2 { + margin-right: 10px; +} + +.mar-x-2 { + margin-top: 10px; + margin-bottom: 10px; +} + +.mar-y-2 { + margin-left: 10px; + margin-right: 10px; +} + +.pad-bot-3 { + padding-bottom: 15px; +} + +.pad-top-3 { + padding-top: 15px; +} + +.pad-left-3 { + padding-left: 15px; +} + +.pad-right-3 { + padding-right: 15px; +} + +.pad-x-3 { + padding-left: 15px; + padding-right: 15px; +} + +.pad-y-3 { + padding-top: 15px; + padding-bottom: 15px; +} + +.mar-bot-3 { + margin-bottom: 15px; +} + +.mar-top-3 { + margin-top: 15px; +} + +.mar-left-3 { + margin-left: 15px; +} + +.mar-right-3 { + margin-right: 15px; +} + +.mar-x-3 { + margin-top: 15px; + margin-bottom: 15px; +} + +.mar-y-3 { + margin-left: 15px; + margin-right: 15px; +} + +.pad-bot-4 { + padding-bottom: 20px; +} + +.pad-top-4 { + padding-top: 20px; +} + +.pad-left-4 { + padding-left: 20px; +} + +.pad-right-4 { + padding-right: 20px; +} + +.pad-x-4 { + padding-left: 20px; + padding-right: 20px; +} + +.pad-y-4 { + padding-top: 20px; + padding-bottom: 20px; +} + +.mar-bot-4 { + margin-bottom: 20px; +} + +.mar-top-4 { + margin-top: 20px; +} + +.mar-left-4 { + margin-left: 20px; +} + +.mar-right-4 { + margin-right: 20px; +} + +.mar-x-4 { + margin-top: 20px; + margin-bottom: 20px; +} + +.mar-y-4 { + margin-left: 20px; + margin-right: 20px; +} + +.pad-bot-5 { + padding-bottom: 25px; +} + +.pad-top-5 { + padding-top: 25px; +} + +.pad-left-5 { + padding-left: 25px; +} + +.pad-right-5 { + padding-right: 25px; +} + +.pad-x-5 { + padding-left: 25px; + padding-right: 25px; +} + +.pad-y-5 { + padding-top: 25px; + padding-bottom: 25px; +} + +.mar-bot-5 { + margin-bottom: 25px; +} + +.mar-top-5 { + margin-top: 25px; +} + +.mar-left-5 { + margin-left: 25px; +} + +.mar-right-5 { + margin-right: 25px; +} + +.mar-x-5 { + margin-top: 25px; + margin-bottom: 25px; +} + +.mar-y-5 { + margin-left: 25px; + margin-right: 25px; +} + +@media screen and (max-width: 1000px) { + header { + padding-left: 0; + } + .responsive-hidden { + display: none !important; + } + .responsive-width-100 { + width: 100% !important; + flex: auto !important; + flex-basis: 100% !important; + } + .responsive-flex-column { + flex-flow: column; + } + .responsive-flex-wrap { + flex-flow: wrap; + } + .responsive-flex { + display: flex; + } + main { + padding: 70px 7px 20px 7px; + } + main .content-header { + max-width: 100%; + } + main .content-header form { + padding-top: 10px; + } + main .content-header form .search input, main .content-header form > select { + padding-right: 0; + margin-left: 0; + } + main .content-block { + padding: 5px; + } + main .content-block .block-header { + padding-top: 10px; + } + main .dashboard { + flex-flow: column; + } + main .dashboard .stat { + width: 100%; + } + .responsive-pad-1 { + padding: 5px; + } + .responsive-mar-1 { + margin: 5px; + } + .responsive-pad-2 { + padding: 10px; + } + .responsive-mar-2 { + margin: 10px; + } + .responsive-pad-3 { + padding: 15px; + } + .responsive-mar-3 { + margin: 15px; + } + .responsive-pad-4 { + padding: 20px; + } + .responsive-mar-4 { + margin: 20px; + } + .responsive-pad-5 { + padding: 25px; + } + .responsive-mar-5 { + margin: 25px; + } + .responsive-pad-bot-1 { + padding-bottom: 5px; + } + .responsive-pad-top-1 { + padding-top: 5px; + } + .responsive-pad-left-1 { + padding-left: 5px; + } + .responsive-pad-right-1 { + padding-right: 5px; + } + .responsive-pad-x-1 { + padding-left: 5px; + padding-right: 5px; + } + .responsive-pad-y-1 { + padding-top: 5px; + padding-bottom: 5px; + } + .responsive-mar-bot-1 { + margin-bottom: 5px; + } + .responsive-mar-top-1 { + margin-top: 5px; + } + .responsive-mar-left-1 { + margin-left: 5px; + } + .responsive-mar-right-1 { + margin-right: 5px; + } + .responsive-mar-x-1 { + margin-top: 5px; + margin-bottom: 5px; + } + .responsive-mar-y-1 { + margin-left: 5px; + margin-right: 5px; + } + .responsive-pad-bot-2 { + padding-bottom: 10px; + } + .responsive-pad-top-2 { + padding-top: 10px; + } + .responsive-pad-left-2 { + padding-left: 10px; + } + .responsive-pad-right-2 { + padding-right: 10px; + } + .responsive-pad-x-2 { + padding-left: 10px; + padding-right: 10px; + } + .responsive-pad-y-2 { + padding-top: 10px; + padding-bottom: 10px; + } + .responsive-mar-bot-2 { + margin-bottom: 10px; + } + .responsive-mar-top-2 { + margin-top: 10px; + } + .responsive-mar-left-2 { + margin-left: 10px; + } + .responsive-mar-right-2 { + margin-right: 10px; + } + .responsive-mar-x-2 { + margin-top: 10px; + margin-bottom: 10px; + } + .responsive-mar-y-2 { + margin-left: 10px; + margin-right: 10px; + } + .responsive-pad-bot-3 { + padding-bottom: 15px; + } + .responsive-pad-top-3 { + padding-top: 15px; + } + .responsive-pad-left-3 { + padding-left: 15px; + } + .responsive-pad-right-3 { + padding-right: 15px; + } + .responsive-pad-x-3 { + padding-left: 15px; + padding-right: 15px; + } + .responsive-pad-y-3 { + padding-top: 15px; + padding-bottom: 15px; + } + .responsive-mar-bot-3 { + margin-bottom: 15px; + } + .responsive-mar-top-3 { + margin-top: 15px; + } + .responsive-mar-left-3 { + margin-left: 15px; + } + .responsive-mar-right-3 { + margin-right: 15px; + } + .responsive-mar-x-3 { + margin-top: 15px; + margin-bottom: 15px; + } + .responsive-mar-y-3 { + margin-left: 15px; + margin-right: 15px; + } + .responsive-pad-bot-4 { + padding-bottom: 20px; + } + .responsive-pad-top-4 { + padding-top: 20px; + } + .responsive-pad-left-4 { + padding-left: 20px; + } + .responsive-pad-right-4 { + padding-right: 20px; + } + .responsive-pad-x-4 { + padding-left: 20px; + padding-right: 20px; + } + .responsive-pad-y-4 { + padding-top: 20px; + padding-bottom: 20px; + } + .responsive-mar-bot-4 { + margin-bottom: 20px; + } + .responsive-mar-top-4 { + margin-top: 20px; + } + .responsive-mar-left-4 { + margin-left: 20px; + } + .responsive-mar-right-4 { + margin-right: 20px; + } + .responsive-mar-x-4 { + margin-top: 20px; + margin-bottom: 20px; + } + .responsive-mar-y-4 { + margin-left: 20px; + margin-right: 20px; + } + .responsive-pad-bot-5 { + padding-bottom: 25px; + } + .responsive-pad-top-5 { + padding-top: 25px; + } + .responsive-pad-left-5 { + padding-left: 25px; + } + .responsive-pad-right-5 { + padding-right: 25px; + } + .responsive-pad-x-5 { + padding-left: 25px; + padding-right: 25px; + } + .responsive-pad-y-5 { + padding-top: 25px; + padding-bottom: 25px; + } + .responsive-mar-bot-5 { + margin-bottom: 25px; + } + .responsive-mar-top-5 { + margin-top: 25px; + } + .responsive-mar-left-5 { + margin-left: 25px; + } + .responsive-mar-right-5 { + margin-right: 25px; + } + .responsive-mar-x-5 { + margin-top: 25px; + margin-bottom: 25px; + } + .responsive-mar-y-5 { + margin-left: 25px; + margin-right: 25px; + } + .media-library-modal { + padding: 10px; + } + .media-library-modal .media { + flex-flow: column; + } + .media-library-modal .media .list { + width: 100%; + height: 220px; + } + .media-library-modal .media .list > a { + width: 29%; + } + .media-library-modal .media .list .list-header input { + max-width: 150px; + width: auto; + } + .media-library-modal .media .details { + width: 100%; + height: 110px; + } + .options-modal { + padding: 10px; + } + .options-modal .body { + max-height: 260px; + } + .options-modal .body .option-header { + width: 100%; + } + .options-modal .body .table thead td { + font-size: 12px; + } + .options-modal .body .table tbody td input { + font-size: 12px; + } + .options-modal .body .table tbody td { + padding-right: 5px; + } + .options-modal .body .table tbody td .modifier { + width: 45px; + } + .options-modal .body .table tbody td .modifier ~ input { + padding-left: 0; + } + .downloads-modal { + padding: 10px; + } + .content-block-wrapper { + flex-flow: column; + } + .content-block-wrapper .content-block { + margin: 15px 0 0 0 !important; + } +} + +#tableView thead { + background-color: #ffd717; + color: var(--color-selected-bg); +} + +#tableView thead td { + font-weight: bold; +} + +#tableView { + border-collapse: collapse; + width: 100%; + border-radius: 5px; + border-style: hidden; + margin: auto; + margin-top: 10px; + background-color: var(--color-bg-body); +} + +#content { + margin-top:20px; + width: 90%; + margin: auto; +} + +.datalist { + width: 100%; + padding: 15px 5px; + margin-bottom: 25px; + border: 0; + border-bottom: 1px solid var(--color-tab-bg); +} + +#readBar { + width:1%; + height: 100%; + background-color: #04aa6d; + text-align: center; + color: white; + border-radius: 5px; + padding: 5px; +} + +input[type='file'] { + display: inline-block; + width: 100%; + padding: 120px 0 0 0; + height: 100px; + overflow: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4; + border-radius: 20px; + background-size: 60px 60px; +} + +.dot { + height: 15px; + width: 15px; + font-size: 10px; + color: var(--color-border-light); + display: table-cell; + text-align: center; + vertical-align: middle; + border-radius: 50%; + background-color: #bbb; + } + + .content-wrapper { + width: 1050px; + margin: 0 auto; + } + + .content-wrapper.error { + padding: 40px 0; + } + + .recentlyadded .products, main .products .products-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + padding: 40px 0 0 0; + } + + .recentlyadded .products .product, main .products .products-wrapper .product { + display: block; + overflow: hidden; + text-decoration: none; + padding-bottom: 20px; + margin-left: 10px; + text-align: center; + } + .recentlyadded .products .product img, main .products .products-wrapper .product img { + transform: scale(1); + transition: transform 1s; + mix-blend-mode: multiply; + } + + .recentlyadded .products .product .name, main .products .products-wrapper .product .name { + display: block; + color: var(--color-text-default); + font-size: 12px; + text-align: center; + } + + main > .products .products-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 40px; + font-size: 10px; + } + + main > .products .products-header label { + padding-left: 20px; + font-size: 10px; + } + + main > .products .products-header select { + padding: 5px; + margin-left: 15px; + border: 1px solid #d5d5d5; + color: var(--color-text-default); + border-radius: 4px; + font-size: 10px; + } + + .product_category_nav { + display: inline-block; + } + + .product_category_nav a { + white-space: nowrap; + text-decoration: none; + color: var(--color-bg-body); + padding: 5px 5px; + margin: 5px; + border: 1px solid var(--color-text-default); + border-radius: 5px; + display: block; + float: left; + background:var(--color-btn-bg); + } + + /* Responsive CSS below */ + @media screen and (max-width: 1050px) { + .content-wrapper { + width: 100%; + margin: 0 auto; + } + + .recentlyadded .products, main .products .products-wrapper { + justify-content: center; + } + .recentlyadded .products .product, main .products .products-wrapper .product { + width: auto; + } + .products .products-header { + flex-flow: column; + } + .products .products-header p { + padding-bottom: 10px; + } + } + + th a { + text-decoration: none; + color: var(--color-text-default); + text-transform: capitalize; +} + +.chart { + display:table; + table-layout: fixed; + width:60%; + max-width:500px; +} + +.chart li{ + position:relative; + display:table-cell; + vertical-align:bottom; + height:100px; + color: var(--color-selected-bg); +} + +.chart span{ + margin:0 1em; + display: block; + background-color: var(--color-selected-bg); + animation: draw 1s ease-in-out; + border-radius: 3px; +} + +.chart span::before{ + position:absolute; + left:0;right:0;top:100%; + padding:5px; + display:block; + color: var(--color-selected-bg); + text-align:center; + content:attr(title); + word-wrap: break-word; + font-size: 10px; +} + +.servicereport { + border-collapse: collapse; + width: 100%; + border-radius: 5px; + border-style: hidden; + margin: auto; + background-color: var(--color-bg-body); + margin-top: 20px; +} + +.servicereport.fs-normal td { + font-size: 18px; +} + +.servicereport.fs-small td { + font-size: 14px; +} + +.servicereport thead { + background-color: var(--color-selected-bg); + color: var(--color-bg-body); +} + +.servicereport td { + padding: 5px 15px; +} + +.servicereport thead td { + font-weight: bold; +} + +.servicereport tbody td.success { + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: #3ead48; + text-underline-offset: 2px; +} + +.servicereport tbody td.warning { + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: #ffc107; + text-underline-offset: 2px; +} + +.servicereport tbody td.error { + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: #d1232a; + text-underline-offset: 2px; +} + +.servicereport .col-key { + width: 70%; +} + +.servicereport .col-value { + width: 30%; +} + +.servicereport--details tbody tr { + border-bottom: 1px solid #035754; +} + +.servicereport--striped tbody tr:nth-child(odd) { + background-color: #f3fafa; +} + +.servicereport--striped tbody tr:nth-child(even) { + background-color: #e7f6f6; +} + +.servicereport--striped tbody tr { + border-bottom: 1px solid #9bdcd9; +} + +.service_summary { + background-image: linear-gradient(#e7f6f6, #fafdfd); + margin-top: 20px; + padding-bottom: 15px; +} + +.service_summary__title { + background-color: #035754; + color: var(--color-bg-body); + font-weight: bold; + padding: 5px 15px; +} + +.service_notes { + margin: 15px 15px 0 15px; + padding: 15px; + background-color: var(--color-bg-body); + color: #035754; +} + +h4.label { + padding: 5px 15px; + background-color: #035754; + color: var(--color-bg-body); + margin-top: 20px; + margin-bottom: 20px; +} + +.text-center { + text-align: center; +} + +@media screen and (max-width: 600px) { +#support_btn { + display:none; + } +} +.form-popup { + display: none; + position: fixed; + bottom: 0; + right: 15px; + z-index: 9; +} + +.close { + position: absolute; + top: 0px; + right: 0px; +} + +#support_btn img:hover{ + transform: scale(1.5); +} + +.cancel_link { + white-space: nowrap; + text-align: center; + background: #b44a4a; + border: 0; + padding: 5px 0; + font-size: 9px; + margin-top: 5px; + cursor: pointer; + border-radius: 4px; +} + +.order-detail input { + border: 0; + border-bottom: 1px solid var(--color-tab-bg) +} + +.loading-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.8); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; +} + +.loading-container.active { + opacity: 1; + visibility: visible; +} + +.loading-bar { + width: 200px; + height: 10px; + background-color: #f0f0f0; + border-radius: 5px; + overflow: hidden; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.progress { + height: 100%; + width: 0%; + background-color: #4caf50; + animation: progressAnimation 2s infinite ease-in-out; +} + +.loading-text { + margin-top: 10px; + font-size: 14px; + color: #333; +} + +@keyframes progressAnimation { + 0% { width: 0%; } + 50% { width: 100%; } + 100% { width: 0%; } +} + +/* Hide the loading bar when page is loaded */ +.loaded .loading-container { + display: none; +} + +.hidden { + display: none !important; +} + +/*CATALOG VIEW*/ + +.stock p { + font-size: 10px; + margin: auto; + padding: 5px; + width: fit-content; + border-radius: 5px; + color: white; +} + +.stock p:before { + content : '\1F4E6'; +} + +.filtersection { + display: flex; + margin: 0 auto; + background: white; + border-radius: 12px; + margin-bottom: 50px; + padding: 10px; + width: 95%; +} + +.filter-section { + width: 250px; + padding: 20px; + border-right: 1px solid #e0e0e0; +} + +.filter-section h2 { + margin-bottom: 15px; + color: #333; +} + +.filter-group { + margin-bottom: 20px; +} + +.filter-group label { + margin-bottom: 10px; +} + +.filter-group input[type="checkbox"] { + margin-right: 10px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .filtersection { + flex-direction: column; + text-align: center; + } + + .filter-section { + width: 100%; + border-right: none; + border-bottom: 1px solid #e0e0e0; + } +} + +main .recentlyadded .products .product, main .products .products-wrapper .product { + display: block; + overflow: hidden; + text-decoration: none; + padding-bottom: 30px; + text-align: center; + margin: 5px; +} + +main .recentlyadded .products .product img, main .products .products-wrapper .product img { + transform: scale(1); + transition: transform 1s; +} + +main .products .product .name, main .products .products-wrapper .product .name { + display: block; + color: var(--color-text-default); + padding: 20px 0 2px 0; + text-align: center; + font-family: 'gerb'; + word-wrap: break-word; +} +main .products .product .price, main .products .products-wrapper .product .price { + display: block; + color: #999999; + text-align: center; +} + +.product .rrp { + color: #bbbbbb; + text-decoration: line-through; + font-size: 22px; + padding-left: 10px; +} + +.img_config { + border-radius:5px; + width: 25px; + height: 25px; + margin: 1px; +} \ No newline at end of file diff --git a/custom/bewellwell/style/bewellwell_login.css b/custom/bewellwell/style/bewellwell_login.css new file mode 100644 index 0000000..134443f --- /dev/null +++ b/custom/bewellwell/style/bewellwell_login.css @@ -0,0 +1,230 @@ +:root { + --color-white: #FFFFFF; + --color-light-blue: #2D64BC; + --color-blue: #2D64BC; + --color-red: #a75151; + --text-color: #333333; + --error-background: #f3c3c3; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Open Sans", Helvetica, sans-serif; + accent-color: var(--color-blue); +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: var(--color-white); + padding: 20px; +} + +.login-container { + display: flex; + width: 100%; + max-width: 1200px; + height: calc(100vh - 40px); + background-color: var(--color-white); + border-radius: 16px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); + overflow: hidden; +} + +.login-form { + width: 45%; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.logo { + position: absolute; + top: 20px; + left: 20px; + background-image: url(BWWLogo.svg); + background-repeat: no-repeat; + opacity: inherit; + width: 85px; + height: 120px; + margin: 0 auto; + -webkit-filter: drop-shadow(5px 5px 5px #222); + filter: drop-shadow(5px 5px 5px #222); +} + +.login-visual { + width: 55%; + position: relative; + overflow: hidden; + background-image: url(background_section.jpg); + background-position: center center; + background-size: 100% 100%; + background-color: var(--color-light-blue); + background-repeat: no-repeat; +} + +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.register-link { + position: absolute; + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); +} + +.header { + margin-bottom: 30px; +} + +.header h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.header p { + color: #666; +} + +.input-group { + margin-bottom: 15px; + position: relative; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.input-group input[type="password"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.forgot-password { + color: var(--text-color); + text-decoration: none; + text-align: right; + margin-top: 5px; + float: right; + font-size: 12px; +} + +.remember-me { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.remember-me input { + margin-right: 10px; +} + +.maintenance { + padding: 5px; +} + +.message p { + margin-top: 5px; + background-color: var(--error-background); + border-left: 4px solid var(--color-red); + color: var(--color-red); + padding: 5px; + border-radius: 4px; + text-align: center; +} + +.login-btn { + width: 100%; + padding: 12px; + background-color: var(--color-light-blue); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-blue); +} + +.trademark { + position: absolute; + bottom: 20px; + left: 20px; + color: var(--text-color); + font-size: 12px; +} + +.language-selector { + position: absolute; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + color: var(--text-color); +} + +.language-selector select { + margin-left: 10px; + border: none; + background: transparent; +} + +/* Responsive Design */ +@media screen and (max-width: 1024px) { + .login-container { + flex-direction: column; + height: auto; + max-width: 500px; + } + + .login-form, .login-visual { + width: 100%; + height: auto; + } + + .login-visual { + height: 300px; + } + + .logo { + position: static; + margin: 20px auto; + margin-bottom: 0; + } + + .trademark, .language-selector { + position: static; + text-align: center; + margin: 20px 0; + } +} + +@media screen and (max-width: 480px) { + .login-form { + padding: 20px; + } + + .header h1 { + font-size: 20px; + } +} \ No newline at end of file diff --git a/custom/bewellwell/style/bewellwell_reset.css b/custom/bewellwell/style/bewellwell_reset.css new file mode 100644 index 0000000..227ac28 --- /dev/null +++ b/custom/bewellwell/style/bewellwell_reset.css @@ -0,0 +1,230 @@ +:root { + --color-white: #FFFFFF; + --color-light-blue: #2D64BC; + --color-blue: #2D64BC; + --color-red: #a75151; + --text-color: #333333; + --error-background: #f3c3c3; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Open Sans", Helvetica, sans-serif; + accent-color: var(--color-blue); +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: var(--color-white); + padding: 20px; +} + +.login-container { + display: flex; + width: 100%; + max-width: 1200px; + height: calc(100vh - 40px); + background-color: var(--color-white); + border-radius: 16px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); + overflow: hidden; +} + +.login-form { + width: 45%; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.logo { + position: absolute; + top: 20px; + left: 20px; + background-image: url(BWWLogo.svg); + background-repeat: no-repeat; + opacity: inherit; + width: 85px; + height: 120px; + margin: 0 auto; + -webkit-filter: drop-shadow(5px 5px 5px #222); + filter: drop-shadow(5px 5px 5px #222); +} + +.login-visual { + width: 55%; + position: relative; + overflow: hidden; + background-image: url(background_section.jpg); + background-position: center center; + background-size: 100% 100%; + background-color: var(--color-light-blue); + background-repeat: no-repeat; +} + +.login-visual img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.register-link { + position: absolute; + top: 20px; + right: 20px; + text-decoration: none; + color: var(--text-color); +} + +.header { + margin-bottom: 30px; +} + +.header h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.header p { + color: #666; +} + +.input-group { + margin-bottom: 15px; + position: relative; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.input-group input[type="email"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.input-group input[type="password"] { + padding-left: 40px; + background: url('data:image/svg+xml;utf8,') no-repeat left 10px center; +} + +.forgot-password { + color: var(--text-color); + text-decoration: none; + text-align: right; + margin-top: 5px; + float: right; + font-size: 12px; +} + +.remember-me { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.remember-me input { + margin-right: 10px; +} + +.maintenance { + padding: 5px; +} + +.message p { + margin-top: 5px; + background-color: var(--error-background); + border-left: 4px solid var(--color-red); + color: var(--color-red); + padding: 5px; + border-radius: 4px; + text-align: center; +} + +.login-btn { + width: 100%; + padding: 12px; + background-color: var(--color-light-blue); + color: var(--color-white); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--color-blue); +} + +.trademark { + position: absolute; + bottom: 20px; + left: 20px; + color: var(--text-color); + font-size: 12px; +} + +.language-selector { + position: absolute; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + color: var(--text-color); +} + +.language-selector select { + margin-left: 10px; + border: none; + background: transparent; +} + +/* Responsive Design */ +@media screen and (max-width: 1024px) { + .login-container { + flex-direction: column; + height: auto; + max-width: 500px; + } + + .login-form, .login-visual { + width: 100%; + height: auto; + } + + .login-visual { + height: 300px; + } + + .logo { + position: static; + margin: 20px auto; + margin-bottom: 0; + } + + .trademark, .language-selector { + position: static; + text-align: center; + margin: 20px 0; + } +} + +@media screen and (max-width: 480px) { + .login-form { + padding: 20px; + } + + .header h1 { + font-size: 20px; + } +} \ No newline at end of file diff --git a/custom/soveliti/style/soveliti.css b/custom/soveliti/style/soveliti.css index 45c346a..fcc5e9a 100644 --- a/custom/soveliti/style/soveliti.css +++ b/custom/soveliti/style/soveliti.css @@ -1,3 +1,50 @@ +:root { + --color-text-default: #555555; + --color-text-heading: #4a5361; + --color-bg-body: #fff; + --color-bg-body: #ffffff; + --color-bg-header: #F8f9fa; + --color-bg-header: #f8f9fa; + --color-border-light: #eee; + --color-hover-dark: #606c7e; + --color-hover-light: #fbfbfb; + --color-note-bg: #383c46; + --color-note-text: #afb1b5; + --color-selected-bg: #527ee5; + --color-sub-hover: #2a374a; + --color-title-muted: #959faf; + --color-title-muted-light: #99999a; + --color-title-bg: #dbdddf; + --color-icon-bg: #7c8394; + --color-msg-success-bg: #C3F3D7; + --color-msg-success: #51a775; + --color-msg-error-bg: #f3c3c3; + --color-msg-error: #a75151; + --color-border-input: #d0d3d5; + --color-border-input-hover: #b5b9bd; + --color-filter-text-hover: #343a44; + --color-btn-bg: #4a79b4; + --color-btn-hover-bg: #4672a9; + --color-tab-bg: #dedfe1; + --color-tab-hover: #d8dadc; + --color-muted: #8d9398; + --color-status-neutral: #81848a; + --color-status-enabled: #13b368; + --color-status-warning: #eb8a0d; + --color-status-disabled: #bd4141; + --color-danger: #e26060; + --color-btn-secondary: #bed4ea; + --color-btn-neutral: #f1f3f4; + --color-pagination-hover: #6d7c90; + --color-pagination-bg: #758497; + --color-accent-blue: #0060ba; + --color-accent-blue-hover: #003260; + --color-accent-red: #ba0000; + --color-accent-red-hover: #600000; + --color-disabled: #b1b3b4; + --color-disabled-hover: #a9abad; +} + * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; @@ -11,13 +58,13 @@ html { body { position: relative; min-height: 100%; - color: #555555; - background-color: #fff; + color: var(--color-text-default); + background-color: var(--color-bg-body); margin: 0; } h1, h2, h3, h4, h5 { - color: #4a5361; + color: var(--color-text-heading); margin: 0; padding: 0; } @@ -31,13 +78,13 @@ header { z-index: 999; width: 100%; height: 55px; - background-color: #F8f9fa; + background-color: var(--color-bg-header); box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); } header a { display: inline-flex; - color: #4a5361; + color: var(--color-text-heading); height: 100%; text-decoration: none; justify-content: center; @@ -50,7 +97,7 @@ header a i { } header a:hover, header a:active { - color: #606c7e; + color: var(--color-hover-dark); } header .space-between { @@ -59,7 +106,7 @@ header .space-between { header .dropdown { display: inline-flex; - color: #4a5361; + color: var(--color-text-heading); height: 100%; cursor: pointer; justify-content: center; @@ -72,7 +119,7 @@ header .dropdown i { } header .dropdown:hover, header .dropdown:active { - color: #606c7e; + color: var(--color-hover-dark); } header .dropdown .list { @@ -81,8 +128,8 @@ header .dropdown .list { top: 100%; right: 0; width: 150px; - background-color: #fff; - border-top: 1px solid #eee; + background-color: var(--color-bg-body); + border-top: 1px solid var(--color-border-light); box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05); } @@ -92,7 +139,7 @@ header .dropdown .list a { } header .dropdown .list a:hover { - background-color: #fbfbfb; + background-color: var(--color-hover-light); } header .dropdown:hover .list, header .dropdown:active .list { @@ -111,7 +158,7 @@ aside { width: 260px; display: flex; flex-flow: column; - background-color: #F8f9fa; + background-color: var(--color-bg-header); overflow-y: auto; } @@ -127,7 +174,7 @@ aside > a { font-size: 14px; font-weight: 600; text-decoration: none; - color: #afb1b5; + color: var(--color-note-text); padding: 15px 20px; } @@ -137,8 +184,8 @@ aside > a i { } aside > a:hover, aside > a.selected { - background-color: #527ee5; - color: #fff; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); padding: 15px 17px; border-radius: 5px; } @@ -148,7 +195,7 @@ aside > a.selected + .sub { } aside > a .note { - background-color: #383c46; + background-color: var(--color-note-bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; @@ -158,13 +205,13 @@ aside > a .note { aside .sub { display: none; flex-flow: column; - background-color: #F8f9fa; + background-color: var(--color-bg-header); padding: 13px 0; } aside .sub a { font-size: 14px; - color: #afb1b5; + color: var(--color-note-text); text-decoration: none; padding: 4px 20px; } @@ -176,7 +223,7 @@ aside .sub a span { } aside .sub a:hover, aside .sub a.selected { - color: #2a374a; + color: var(--color-sub-hover); } aside .footer { @@ -185,13 +232,13 @@ aside .footer { margin-top: auto; padding: 15px; font-size: 14px; - color: #afb1b5; + color: var(--color-note-text); } aside .footer a { text-decoration: none; font-size: 14px; - color: #afb1b5; + color: var(--color-note-text); padding-bottom: 2px; } @@ -224,11 +271,11 @@ main h2 span { font-size: 16px; margin-left: 5px; font-weight: 600; - color: #959faf; + color: var(--color-title-muted); } main .content-title { - border-bottom: 1px solid #dbdddf; + border-bottom: 1px solid var(--color-title-bg); display: flex; } @@ -251,8 +298,8 @@ main .content-title .title i { display: inline-flex; justify-content: center; align-items: center; - background-color: #527ee5; - color: #fff; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); width: 52px; height: 42px; border-radius: 4px; @@ -260,7 +307,7 @@ main .content-title .title i { } main .content-title .title i.alt { - background-color: #7c8394; + background-color: var(--color-icon-bg); } main .content-title .title h2 { @@ -270,7 +317,7 @@ main .content-title .title h2 { main .content-title .title p { margin: 0; font-size: 14px; - color: #99999a; + color: var(--color-title-muted-light); font-weight: 500; } @@ -301,23 +348,23 @@ main .msg i.fa-times:hover { } main .msg.success { - background-color: #C3F3D7; - border-left: 4px solid #51a775; - color: #51a775; + background-color: #c3f3d7; + border-left: 4px solid var(--color-msg-success); + color: var(--color-msg-success); } main .msg.success i { - color: #51a775; + color: var(--color-msg-success); } main .msg.error { - background-color: #f3c3c3; - border-left: 4px solid #a75151; - color: #a75151; + background-color: var(--color-msg-error-bg); + border-left: 4px solid var(--color-msg-error); + color: var(--color-msg-error); } main .msg.error i { - color: #a75151; + color: var(--color-msg-error); } main .content-header { @@ -336,13 +383,13 @@ main .content-header form .search input, main .content-header form > select { border: none; height: 40px; width: 220px; - border-bottom: 1px solid #d0d3d5; + border-bottom: 1px solid var(--color-border-input); padding-right: 25px; margin-left: 10px; } main .content-header form .search input:hover, main .content-header form .search input:active, main .content-header form > select:hover, main .content-header form > select:active { - border-bottom: 1px solid #b5b9bd; + border-bottom: 1px solid var(--color-border-input-hover); } main .content-header form > select { @@ -374,7 +421,7 @@ main .content-header .search i { font-size: 14px; margin-top: auto; margin-bottom: auto; - color: #b5b9bd; + color: var(--color-border-input-hover); } main .content-header .filters { @@ -388,12 +435,12 @@ main .content-header .filters { main .content-header .filters a { text-decoration: none; font-weight: 600; - color: #4a5361; + color: var(--color-text-heading); white-space: nowrap; } main .content-header .filters a:hover { - color: #343a44; + color: var(--color-filter-text-hover); } main .content-header .filters .list { @@ -402,7 +449,7 @@ main .content-header .filters .list { width: 180px; flex-flow: column; position: absolute; - background-color: #fff; + background-color: var(--color-bg-body); padding: 10px; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); } @@ -421,13 +468,13 @@ main .content-header .filters .list select { margin-bottom: 10px; font-size: 14px; padding: 3px; - border: 1px solid #dedfe1; + border: 1px solid var(--color-tab-bg); } main .content-header .filters .list button { - background: #4a79b4; + background: var(--color-btn-bg); border: 0; - color: #FFFFFF; + color: var(--color-bg-body); padding: 5px 0; font-size: 12px; font-weight: 600; @@ -437,7 +484,7 @@ main .content-header .filters .list button { } main .content-header .filters .list button:hover { - background: #4672a9; + background: var(--color-btn-hover-bg); } @@ -452,12 +499,12 @@ main .content-header .sort { main .content-header .sort a { text-decoration: none; font-weight: 600; - color: #4a5361; + color: var(--color-text-heading); white-space: nowrap; } main .content-header .sort a:hover { - color: #343a44; + color: var(--color-filter-text-hover); } main .content-header .sort .list { @@ -466,7 +513,7 @@ main .content-header .sort .list { width: 180px; flex-flow: column; position: absolute; - background-color: #fff; + background-color: var(--color-bg-body); padding: 10px; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); } @@ -485,13 +532,13 @@ main .content-header .sort .list select { margin-bottom: 10px; font-size: 14px; padding: 3px; - border: 1px solid #dedfe1; + border: 1px solid var(--color-tab-bg); } main .content-header .sort .list button { - background: #4a79b4; + background: var(--color-btn-bg); border: 0; - color: #FFFFFF; + color: var(--color-bg-body); padding: 5px 0; font-size: 12px; font-weight: 600; @@ -501,11 +548,11 @@ main .content-header .sort .list button { } main .content-header .sort .list button:hover { - background: #4672a9; + background: var(--color-btn-hover-bg); } main .content-block { - background-color: #fff; + background-color: var(--color-bg-body); margin-top: 25px; padding: 15px; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.03); @@ -532,8 +579,8 @@ main .content-block .block-header i { justify-content: center; align-items: center; border-radius: 50%; - background-color: #527ee5; - color: #fff; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); margin-right: 10px; } @@ -561,7 +608,7 @@ main .tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; - background-color: #dedfe1; + background-color: var(--color-tab-bg); margin-top: 25px; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.03); z-index: 100; @@ -578,12 +625,12 @@ main .tabs a { } main .tabs a:hover { - background-color: #d8dadc; + background-color: var(--color-tab-hover); } main .tabs a.active { - color: #4a5361; - background-color: #fff; + color: var(--color-text-heading); + background-color: var(--color-bg-body); } main .tabs ~ .content-block { @@ -623,8 +670,8 @@ main .dashboard .stat > i { height: 40px; width: 40px; border-radius: 5px; - background-color: #527ee5; - color: #fff; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); } main .dashboard .stat .data { @@ -648,7 +695,7 @@ main .dashboard .stat .data p { main .dashboard .stat .footer { width: 100%; border-top: 1px solid #ebeced; - background-color: #fbfbfb; + background-color: var(--color-hover-light); color: #9aa0a5; font-size: 14px; padding: 10px; @@ -669,11 +716,11 @@ main .form input[type="text"], main .form input[type="password"], main .form inp padding: 15px 5px; margin-bottom: 25px; border: 0; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } main .form input[type="text"]:hover, main .form input[type="text"]:active, main .form input[type="password"]:hover, main .form input[type="password"]:active, main .form input[type="datetime-local"]:hover, main .form input[type="datetime-local"]:active, main .form input[type="email"]:hover, main .form input[type="email"]:active, main .form input[type="number"]:hover, main .form input[type="number"]:active, main .form textarea:hover, main .form textarea:active, main .form select:hover, main .form select:active { - border-bottom: 1px solid #b5b9bd; + border-bottom: 1px solid var(--color-border-input-hover); } main .form textarea { @@ -693,11 +740,11 @@ main .form label { main .form label .required { font-style: normal; - color: #e26060; + color: var(--color-danger); } main .form button { - background-color: #dedfe1; + background-color: var(--color-tab-bg); color: #676d72; border: 0; padding: 5px; @@ -715,7 +762,7 @@ main .form .multiselect { position: relative; display: flex; flex-flow: wrap; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); padding-bottom: 10px; margin: 15px 0 25px 0; margin-bottom: 25px; @@ -723,7 +770,7 @@ main .form .multiselect { main .form .multiselect > .item { display: inline-flex; - border: 1px solid #dedfe1; + border: 1px solid var(--color-tab-bg); padding: 0 10px; height: 40px; margin: 0 5px 5px 0; @@ -733,7 +780,7 @@ main .form .multiselect > .item { } main .multiselect > .item { display: inline-flex; - border: 1px solid #dedfe1; + border: 1px solid var(--color-tab-bg); padding: 0 10px; height: 40px; margin: 0 5px 5px 0; @@ -748,7 +795,7 @@ main .form .multiselect > .item .remove { font-size: 19px; margin-right: 3px; margin-top: -2px; - color: #b5b9bd; + color: var(--color-border-input-hover); } main .form .multiselect > .item .remove:hover { @@ -775,7 +822,7 @@ main .form .multiselect .list { top: 100%; width: 100%; flex-flow: column; - background-color: #fff; + background-color: var(--color-bg-body); box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); max-height: 100px; overflow-y: auto; @@ -793,7 +840,7 @@ main .form .multiselect .list span:hover { } main .form .multiselect:hover, main .form .multiselect:active { - border-bottom: 1px solid #b5b9bd; + border-bottom: 1px solid var(--color-border-input-hover); } main .top-nav { @@ -816,16 +863,16 @@ main .pagination { main .pagination a { display: inline-flex; text-decoration: none; - background-color: #758497; + background-color: var(--color-pagination-bg); font-size: 14px; font-weight: 600; - color: #fff; + color: var(--color-bg-body); border-radius: 4px; padding: 7px 10px; } main .pagination a:hover { - background-color: #6d7c90; + background-color: var(--color-pagination-hover); } main .pagination a:first-child { @@ -880,7 +927,7 @@ main .media-page .media .image::after { } main .media-page .media .image:hover { - border: 1px solid #d0d3d5; + border: 1px solid var(--color-border-input); } main .media-page .media .image:hover img { @@ -938,7 +985,7 @@ main .manage-order-table input, main .manage-order-table select { height: 40px; background: transparent; width: 90%; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } main .manage-order-table .add-item { @@ -1009,102 +1056,102 @@ main .manage-order-table .delete-item:hover { } .table table tbody .rrp { - color: #e26060; + color: var(--color-danger); } .table table tbody .status { padding: 4px 7px; border-radius: 4px; - background-color: #81848a; + background-color: var(--color-status-neutral); font-weight: 500; font-size: 12px; - color: #fff; + color: var(--color-bg-body); } .table table tbody .status.enabled { padding: 4px 7px; border-radius: 4px; - background-color: #13b368; + background-color: var(--color-status-enabled); font-weight: 500; font-size: 12px; - color: #fff; + color: var(--color-bg-body); } .table table tbody .status.disabled { padding: 4px 7px; border-radius: 4px; - background-color: #bd4141; + background-color: var(--color-status-disabled); font-weight: 500; font-size: 12px; - color: #fff; + color: var(--color-bg-body); } .status { padding: 4px 7px; border-radius: 4px; - background-color: #81848a; + background-color: var(--color-status-neutral); font-weight: 500; font-size: 12px; - color: #fff; + color: var(--color-bg-body); } .status.enabled { - background-color: #13b368; + background-color: var(--color-status-enabled); } .status.disabled { - background-color: #bd4141; + background-color: var(--color-status-disabled); } .status.id4 { - background-color: #13b368; + background-color: var(--color-status-enabled); } .status.id3 { -background-color: #13b368; +background-color: var(--color-status-enabled); } .status.id2 { - background-color: #eb8a0d; + background-color: var(--color-status-warning); } .table table tbody .status.service_renewal{ - background-color: #eb8a0d; + background-color: var(--color-status-warning); } .table table tbody .status.firmware_update{ - background-color: #eb8a0d; + background-color: var(--color-status-warning); } .table table tbody .status.warranty_outdated{ - background-color: #eb8a0d; + background-color: var(--color-status-warning); } .table table tbody .status.warranty { - background-color: #13b368; + background-color: var(--color-status-enabled); } .table table tbody .status.service{ - background-color: #13b368; + background-color: var(--color-status-enabled); } .table table tbody .status.firmware_recent{ - background-color: #13b368; + background-color: var(--color-status-enabled); } .status.id5 { - background-color: #bd4141; + background-color: var(--color-status-disabled); } .table table tbody .status.id4, .table table tbody .status.id3, .table table tbody .status.warranty { - background-color: #13b368; + background-color: var(--color-status-enabled); } .table table tbody .status.id2 { - background-color: #eb8a0d; + background-color: var(--color-status-warning); } .table table tbody .status.id5{ - background-color: #bd4141; + background-color: var(--color-status-disabled); } .product-media-tab, .product-options-tab, .product-downloads-tab { @@ -1168,7 +1215,7 @@ background-color: #13b368; .product-media-tab .product-media .media-text p, .product-media-tab .product-media .option-text p, .product-media-tab .product-media .download-text p, .product-media-tab .product-option .media-text p, .product-media-tab .product-option .option-text p, .product-media-tab .product-option .download-text p, .product-media-tab .product-download .media-text p, .product-media-tab .product-download .option-text p, .product-media-tab .product-download .download-text p, .product-options-tab .product-media .media-text p, .product-options-tab .product-media .option-text p, .product-options-tab .product-media .download-text p, .product-options-tab .product-option .media-text p, .product-options-tab .product-option .option-text p, .product-options-tab .product-option .download-text p, .product-options-tab .product-download .media-text p, .product-options-tab .product-download .option-text p, .product-options-tab .product-download .download-text p, .product-downloads-tab .product-media .media-text p, .product-downloads-tab .product-media .option-text p, .product-downloads-tab .product-media .download-text p, .product-downloads-tab .product-option .media-text p, .product-downloads-tab .product-option .option-text p, .product-downloads-tab .product-option .download-text p, .product-downloads-tab .product-download .media-text p, .product-downloads-tab .product-download .option-text p, .product-downloads-tab .product-download .download-text p { margin: 0; - color: #8d9398; + color: var(--color-muted); font-size: 14px; } @@ -1212,21 +1259,21 @@ background-color: #13b368; .link1, .link2 { text-decoration: none; - color: #0060ba; + color: var(--color-accent-blue); border-bottom: 1px dotted; margin: 0 5px 0 0; } .link1:hover, .link2:hover { - color: #003260; + color: var(--color-accent-blue-hover); } .link2 { - color: #ba0000; + color: var(--color-accent-red); } .link2:hover { - color: #600000; + color: var(--color-accent-red-hover); } .title1 { @@ -1245,8 +1292,8 @@ background-color: #13b368; appearance: none; cursor: pointer; border: 0; - background: #527ee5; - color: #FFFFFF; + background: var(--color-selected-bg); + color: var(--color-bg-body); padding: 0 14px; font-size: 14px; font-weight: 600; @@ -1264,8 +1311,8 @@ background-color: #13b368; appearance: none; cursor: pointer; border: 0; - background: #bed4ea; - color: #FFFFFF; + background: var(--color-btn-secondary); + color: var(--color-bg-body); padding: 0px 10px; font-size: 14px; font-weight: 600; @@ -1278,8 +1325,8 @@ background-color: #13b368; a.btn:after{ content: ' '; display: inline-block; - border-bottom: 1px solid #fff; - border-right: 1px solid #fff; + border-bottom: 1px solid var(--color-bg-body); + border-right: 1px solid var(--color-bg-body); height: 8px; width: 8px; transform: rotate(-45deg); @@ -1294,7 +1341,7 @@ a.btn:after{ appearance: none; cursor: pointer; border: 0; - background: #f1f3f4; + background: var(--color-btn-neutral); color: #75797e; padding: 0 14px; font-size: 12px; @@ -1317,7 +1364,7 @@ a.btn_link:after{ } .btn:hover { - background: #4672a9; + background: var(--color-btn-hover-bg); } .btn.green { @@ -1340,7 +1387,7 @@ a.btn_link:after{ color: #75797e; border: 1px solid #d4dbde; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.03); - background: #f1f3f4; + background: var(--color-btn-neutral); } .btn.alt:hover { @@ -1348,11 +1395,11 @@ a.btn_link:after{ } .btn.disabled { - background: #b1b3b4; + background: var(--color-disabled); } .btn.disabled:hover { - background: #a9abad; + background: var(--color-disabled-hover); } .btn.small { @@ -1389,7 +1436,7 @@ a.btn_link:after{ .dialog .content { transform: scale(0.5); - background-color: #fff; + background-color: var(--color-bg-body); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.03); width: 400px; } @@ -1408,16 +1455,16 @@ a.btn_link:after{ line-height: 24px; padding-bottom: 4px; cursor: pointer; - color: #959faf; + color: var(--color-title-muted); } .dialog .content .heading span:hover { - color: #606c7e; + color: var(--color-hover-dark); } .dialog .content .footer { border-top: 1px solid #ebeced; - background-color: #fbfbfb; + background-color: var(--color-hover-light); } .dialog.large .content { @@ -1482,7 +1529,7 @@ a.btn_link:after{ font-weight: 900; bottom: 0; right: 0; - color: #fff; + color: var(--color-bg-body); background-color: #237fe8; font-size: 12px; padding: 4px 4px 1px 4px; @@ -1498,7 +1545,7 @@ a.btn_link:after{ .media-library-modal .media .list .list-header input { border: 0; padding: 5px 0; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } .media-library-modal .media .details { @@ -1538,7 +1585,7 @@ a.btn_link:after{ background: transparent; width: 100%; font-size: 14px; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } .media-library-modal .media .details .media-links { @@ -1555,7 +1602,7 @@ a.btn_link:after{ .media-library-modal .media .list::-webkit-scrollbar, .media-library-modal .media .details::-webkit-scrollbar { width: 6px; - background: #fff; + background: var(--color-bg-body); } .media-library-modal .media .list::-webkit-scrollbar-thumb, .media-library-modal .media .details::-webkit-scrollbar-thumb { @@ -1575,7 +1622,7 @@ a.btn_link:after{ height: 40px; background: transparent; width: 100%; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } .options-modal .body select { @@ -1664,7 +1711,7 @@ a.btn_link:after{ font-size: 14px; background: transparent; width: 100%; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } .downloads-modal .body label { @@ -1695,7 +1742,7 @@ a.btn_link:after{ background: transparent; width: 100%; font-size: 14px; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } .loader, @@ -2359,7 +2406,7 @@ a.btn_link:after{ #tableView thead { background-color: #ffd717; - color: #527ee5; + color: var(--color-selected-bg); } #tableView thead td { @@ -2373,7 +2420,7 @@ a.btn_link:after{ border-style: hidden; margin: auto; margin-top: 10px; - background-color: #fff; + background-color: var(--color-bg-body); } #content { @@ -2387,13 +2434,13 @@ a.btn_link:after{ padding: 15px 5px; margin-bottom: 25px; border: 0; - border-bottom: 1px solid #dedfe1; + border-bottom: 1px solid var(--color-tab-bg); } #readBar { width:1%; height: 100%; - background-color: #04AA6D; + background-color: #04aa6d; text-align: center; color: white; border-radius: 5px; @@ -2418,7 +2465,7 @@ input[type='file'] { height: 15px; width: 15px; font-size: 10px; - color: #eee; + color: var(--color-border-light); display: table-cell; text-align: center; vertical-align: middle; @@ -2459,7 +2506,7 @@ input[type='file'] { .recentlyadded .products .product .name, main .products .products-wrapper .product .name { display: block; - color: #555555; + color: var(--color-text-default); font-size: 12px; text-align: center; } @@ -2481,7 +2528,7 @@ input[type='file'] { padding: 5px; margin-left: 15px; border: 1px solid #d5d5d5; - color: #555555; + color: var(--color-text-default); border-radius: 4px; font-size: 10px; } @@ -2493,14 +2540,14 @@ input[type='file'] { .product_category_nav a { white-space: nowrap; text-decoration: none; - color: #fff; + color: var(--color-bg-body); padding: 5px 5px; margin: 5px; - border: 1px solid #555555; + border: 1px solid var(--color-text-default); border-radius: 5px; display: block; float: left; - background:#4a79b4; + background:var(--color-btn-bg); } /* Responsive CSS below */ @@ -2526,7 +2573,7 @@ input[type='file'] { th a { text-decoration: none; - color: #555555; + color: var(--color-text-default); text-transform: capitalize; } @@ -2542,13 +2589,13 @@ input[type='file'] { display:table-cell; vertical-align:bottom; height:100px; - color: #527ee5; + color: var(--color-selected-bg); } .chart span{ margin:0 1em; display: block; - background-color: #527ee5; + background-color: var(--color-selected-bg); animation: draw 1s ease-in-out; border-radius: 3px; } @@ -2558,7 +2605,7 @@ input[type='file'] { left:0;right:0;top:100%; padding:5px; display:block; - color: #527ee5; + color: var(--color-selected-bg); text-align:center; content:attr(title); word-wrap: break-word; @@ -2571,7 +2618,7 @@ input[type='file'] { border-radius: 5px; border-style: hidden; margin: auto; - background-color: #fff; + background-color: var(--color-bg-body); margin-top: 20px; } @@ -2584,8 +2631,8 @@ input[type='file'] { } .servicereport thead { - background-color: #527ee5; - color: #fff; + background-color: var(--color-selected-bg); + color: var(--color-bg-body); } .servicereport td { @@ -2649,7 +2696,7 @@ input[type='file'] { .service_summary__title { background-color: #035754; - color: #fff; + color: var(--color-bg-body); font-weight: bold; padding: 5px 15px; } @@ -2657,14 +2704,14 @@ input[type='file'] { .service_notes { margin: 15px 15px 0 15px; padding: 15px; - background-color: #fff; + background-color: var(--color-bg-body); color: #035754; } h4.label { padding: 5px 15px; background-color: #035754; - color: #fff; + color: var(--color-bg-body); margin-top: 20px; margin-bottom: 20px; } @@ -2710,7 +2757,7 @@ h4.label { .order-detail input { border: 0; - border-bottom: 1px solid #dedfe1 + border-bottom: 1px solid var(--color-tab-bg) } .loading-container { @@ -2747,7 +2794,7 @@ h4.label { .progress { height: 100%; width: 0%; - background-color: #4CAF50; + background-color: #4caf50; animation: progressAnimation 2s infinite ease-in-out; } @@ -2850,7 +2897,7 @@ main .recentlyadded .products .product img, main .products .products-wrapper .pr main .products .product .name, main .products .products-wrapper .product .name { display: block; - color: #555555; + color: var(--color-text-default); padding: 20px 0 2px 0; text-align: center; font-family: 'gerb'; @@ -2863,7 +2910,7 @@ main .products .product .price, main .products .products-wrapper .product .price } .product .rrp { - color: #BBBBBB; + color: #bbbbbb; text-decoration: line-through; font-size: 22px; padding-left: 10px; diff --git a/custom/soveliti/style/soveliti_login.css b/custom/soveliti/style/soveliti_login.css index f367737..1c0c2fb 100644 --- a/custom/soveliti/style/soveliti_login.css +++ b/custom/soveliti/style/soveliti_login.css @@ -67,7 +67,6 @@ body { background-position: center center; background-size: 100% 100%; background-color: var(--color-light-blue); - min-height: 100vh; background-repeat: no-repeat; } diff --git a/custom/soveliti/style/soveliti_reset.css b/custom/soveliti/style/soveliti_reset.css index 46c0609..a88f437 100644 --- a/custom/soveliti/style/soveliti_reset.css +++ b/custom/soveliti/style/soveliti_reset.css @@ -67,7 +67,6 @@ body { background-position: center center; background-size: 100% 100%; background-color: var(--color-light-blue); - min-height: 100vh; background-repeat: no-repeat; } diff --git a/settings/settingsviews.php b/settings/settingsviews.php index ddbd37a..a98a0a6 100644 --- a/settings/settingsviews.php +++ b/settings/settingsviews.php @@ -88,6 +88,7 @@ $all_views = [ "media", "media_manage", "media_scanner", + "mailer", "application", "maintenance", "uploader",