From a6413da67a4579866f0fd0323ddb23a7b6b9654a Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 18 Sep 2026 17:00:53 +0000
Subject: [PATCH] =Cleaning up the Integrations setup a bit, started the Helcim integration work too
---
inc/admin/Integrations.php | 566 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 353 insertions(+), 213 deletions(-)
diff --git a/inc/admin/Integrations.php b/inc/admin/Integrations.php
index cc11446..3462c18 100644
--- a/inc/admin/Integrations.php
+++ b/inc/admin/Integrations.php
@@ -1,7 +1,9 @@
<?php
namespace JVBase\admin;
+use JVBase\integrations\ServiceMap;
use JVBase\managers\IconsManager;
+use JVBase\registrar\Registrar;
if (!defined('ABSPATH')) {
exit;
@@ -9,11 +11,14 @@
class Integrations
{
+ use ServiceMap;
+
public function __construct()
{
// Hook into WordPress admin
add_action('admin_menu', [$this, 'registerAdminPages']);
add_action('admin_enqueue_scripts', [$this, 'enqueueAdminAssets']);
+ add_action(BASE.'dashboard_page_integrations', [$this, 'renderDashPage'], 10);
}
/**
@@ -32,17 +37,16 @@
);
// Add submenu pages for configured integrations
- $integrations = JVB()->getAvailableServices(false);
+ foreach ($this->getAvailableServices() as $service) {
+ $integration = $this->getService($service);
- foreach($integrations as $service => $integration) {
-// if ($integration->isSetUp() && !empty($integration->enabledContentTypes())) {
- if (!empty($integration->enabledContentTypes())) {
+ if (!empty(Registrar::withIntegration($service)) && $integration->isSetUp() && method_exists($integration, 'getAllowedContent') && !empty($integration->getAllowedContent())) {
add_submenu_page(
'jvb-integrations',
$integration->getTitle() . ' Defaults',
$integration->getTitle(),
'manage_options',
- 'jvb-integration-'.$service,
+ 'jvb-integration-'.$integration->getServiceName(),
[$integration, 'renderDefaults']
);
}
@@ -62,6 +66,9 @@
wp_enqueue_style(
'jvb-dash',
);
+ wp_enqueue_style(
+ 'jvb-forms'
+ );
wp_enqueue_script(
'jvb-admin-scripts',
@@ -73,12 +80,12 @@
IconsManager::for()->enqueueIconStyles();
IconsManager::for('dash')->enqueueIconStyles();
- IconsManager::for('form')->enqueueIconStyles();
+ IconsManager::for('forms')->enqueueIconStyles();
$queue = [
'api' => rest_url('jvb/v1/'),
'redirect' => wp_login_url(home_url(add_query_arg(null, null))),
- 'labels' => jvbGetLabels(),
+ 'labels' => Registrar::getLabels(),
];
wp_localize_script('jvb-auth', 'jvbSettings', $queue);
@@ -94,35 +101,62 @@
// );
}
+ public function renderDashPage():void
+ {
+ $this->renderPage();
+ }
/**
* Render the main integrations page
*/
public function renderPage(): void
{
?>
+ <style>
+ form.integration .actions.x-btw.x-btw {
+ justify-content: flex-start;
+ }
+ form.integration button {
+ display: flex;
+ gap: .5rem;
+ padding: .25rem .5rem;
+ align-items: center;
+ justify-content: space-between;
+ }
+ form.integration button svg {
+ width: 1.5em;
+ height: 1.5em;
+ }
+ </style>
<div class="wrap jvb-admin-wrap">
<h1>Integrations</h1>
<div class="jvb-admin-content">
<?php
// Display any admin notices from form submissions
- settings_errors('jvb_integrations');
+ if (is_admin()) {
+ settings_errors('jvb_integrations');
+ }
+
$this->displayNotices();
?>
<div class="item-grid integrations">
<?php
- $integrations = JVB()->getAvailableServices(false);
+ foreach ($this->getAvailableServices() as $service) {
+ $integration = $this->getService($service);
+ if (method_exists($integration, 'renderConnection')) {
+ $integration->renderConnection();
+ }
+ }
- foreach ($integrations as $service => $integration):
- $integration->renderConnection();
- endforeach;
?>
</div>
</div>
</div>
- <?php $this->renderStyles(); ?>
+ <?php if (is_admin()) {
+ $this->renderStyles();
+ } ?>
<?php
}
@@ -248,169 +282,272 @@
// jvbInlineStyles('style');
?>
<style>
- :root{
- /* Layout */
- --narrow: min(500px, 50vw);
- --maxWidth: min(768px, 65vw);
- --alignWide: min(1024px, 90vw);
- --alignMed: min(962px, 82.5vw);
+ :root {
+ /*****************************
+ Layout
+ *****************************/
+ --half: min(384px, 17.5vw);
+ --narrow: min(500px, 62.5vw);
+ --content: min(768px, 65vw);
+ --wider: min(900px, 75vw);
+ --wide: min(1024px, 90vw);
--full: 100vw;
- /* Margin */
- --mr: auto;
- --ml: auto;
- --mt: 1rem;
- --mb: 1rem;
- --setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
- --insetMargin: var(--mt) calc((var(--content) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
- --height: 4rem;
- --doubleHeight: 8rem;
- --offHeight: 5rem;
- --maxHeight: calc(100vh - var(--height) - var(--height));
+ --offScreen: -200vw;
- --gap: .5rem;
- --wrap: wrap;
+ --aside: min(500px, calc(100vw - 2rem));
+
+ /*****************************
+ Sizing
+ *****************************/
+ --chip: 1.5rem;
+ --chipchip: 3rem;
+ --chip_: 2rem;
+ --btn: 4rem;
+ --btn_: 5rem;
+ --btnbtn: 8rem;
+ --maxHeight: calc(100vh - var(--btnbtn));
+
+ /*****************************
+ Flex
+ *****************************/
+ --dir: row;
--justify: center;
--align: center;
- --dir: row;
- /* Typography */
- --w: 1.2em; /** Icon **/
+ --wrap: wrap;
+ --gap: .5rem;
- --filter: grayscale(.3) sepia(.4);
+ /*****************************
+ Typography
+ *****************************/
+ --w: 1.2em; /** For icons **/
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--heading: 'Aleo', var(--font-base);
--body: 'Josefin Slab', var(--font-base);
- --hWeight: 900;
- --hlight: 400;
- --bWeight: 400;
- --bBold: 700;
- --bLight: 200;
- /* Font sizes */
- --enormous: calc(26vh - 4rem);
- --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
- --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
- --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
- --large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
- --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
- --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
- --small: clamp(.95rem, .879rem + .19vw, 1.05rem);
- --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
- /* Colours
- For best results, generate colours from base colours using: https://uicolors.app/generate/
- or sass darken/lighten by 5%: http://scg.ar-ch.org/
- */
- --light-0: #fafafa;
- --light-50: #fcfbfb;
- --light-100: #f1eded;
- --light-200: #e6dfdf;
- --dark-0: #100404;
- --dark-50: #201212;
- --dark-100: #322423;
- --dark-200: #443635;
- --action-0: #B7332E;
- --action-50: #a32d29;
- --action-100: #8e2824;
- --action-200: #7a221f;
- --secondary-0: #E8A737;
- --secondary-50: #e59d20;
- --secondary-100: #d48f18;
- --secondary-200: #bd7f16;
+ --fw-h-light: 400;
+ --fw-h: 900;
+ --fw-h-bold: 900;
+ --fw-b-light: 200;
+ --fw-b: 400;
+ --fw-b-bold: 700;
- --success: #4CAF50;
- --warning: #E8A737;
- --error: #B7332E;
+ --txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
+ --txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);
+ --txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
+ --txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
+ --txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
+ --txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
+ --txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);
+ --txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
+ --txt-enormous: calc(26vh - 4rem);
+
+ /*****************************
+ Colours
+ *****************************/
+ --filter: grayscale(.3) sepia(.4);
+ --filterNone: grayscale(0) sepia(0);
+
+ --mix-blend-mode: darken;
+ --coverBlend: overlay;
+ --coverIndex: 2;
+ --light-0: 239,239,239; /* #efefef; */
+ --light-50: 226,226,226; /* #e2e2e2; */
+ --light-100: 213,213,213; /* #d5d5d5; */
+ --light-200: 201,201,201; /* #c9c9c9; */
+
+ --dark-0: 21,21,21; /* #151515; */
+ --dark-50: 34,34,34; /* #222222; */
+ --dark-100: 46,46,46; /* #2e2e2e; */
+ --dark-200: 59,59,59; /* #3b3b3b; */
+
+ --action-0: 255,0,128; /* #ff0080; */
+ --action-50: 255,38,146; /* #ff2492; */
+ --action-100: 255,71,164; /* #ff47a4; */
+ --action-200: 255,107,181; /* #ff6bb5; */
--action-contrast: var(--light-0);
- --secondary-contrast: var(--light-0);
- --light-rgb: 250,250,250;
- --dark-rgb: 16,4,4;
- --action-rgb: 183,51,46;
- --secondary-rgb: 232,167,55;
- --rgba-subtle: rgba(var(--c),.5);
- --rgba-subtle-hover: rgba(var(--c),.1);
+ --action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
+ --action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
+ --action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
+ --secondary-0: 214,145,33; /* #D69121; */
+ --secondary-50: 255,196,33; /* #ffc421; */
+ --secondary-100: 255,205,68;/* #ffcd44; */
+ --secondary-200: 255,215,104;/* #ffd768; */
+ --secondary-contrast: var(--light-0);
+ --secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
+ --secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
+ --secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);
+
+ --success: 76,175,80; /* #4CAF50; */
+ --successLight: 234,246,235; /* #eaf6eb; */
+ --successDark: 14,33,15; /* #0e210f; */
+ --successBack: var(--successLight);
+ --successText: var(--successDark);
+ --warning: 232,167,55; /* #E8A737; */
+ --warningLight: 253,247,238;/* #fdf7ee; */
+ --warningDark: 52,35,6; /* #342306; */
+ --warningBack: var(--warningLight);
+ --warningText: var(--warningDark);
+ --error: 183,51,46; /* #B7332E; */
+ --errorLight: 250,235,234; /* #faebea; */
+ --errorDark: 40,11,10; /* #280b0a; */
+ --errorBack: var(--errorLight);
+ --errorText: var(--errorDark);
--base: var(--light-0);
--base-50: var(--light-50);
--base-100: var(--light-100);
--base-200: var(--light-200);
+
--contrast: var(--dark-0);
--contrast-50: var(--dark-50);
--contrast-100: var(--dark-100);
--contrast-200: var(--dark-200);
- --c: var(--light-rgb);
- --base-rgb: var(--light-rgb);
- --contrast-rgb: var(--dark-rgb);
- /* Stacking */
+
+
+ --contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
+ --contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
+ --contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
+ --base-comp: oklch(from rgb(var(--base)) .8 .26 h);
+ --base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
+ --base-mono: oklch(from rgb(var(--base)) .3 .04 h);
+
+
+ --tone-a: rgb(var(--contrast));
+ --tone-b: rgb(var(--base));
+
+ --duo-dark: oklch(from var(--tone-a) .22 c h);
+ --duo-light: oklch(from var(--tone-b) .78 c h);
+
+ --shimmer: rgba(var(--contrast),0) 0%,
+ rgba(var(--contrast),.05) 50%,
+ rgba(var(--contrast),0) 100%;
+
+ --op-1: .05;
+ --op-2: .15;
+ --op-3: .25;
+ --op-45: .45;
+ --op-4: .66;
+ --op-5: .75;
+ --op-6: .85;
+
+ /*****************************
+ Shadows
+ *****************************/
+ --shdw-inset: inset 0 0 4px 1px;
+ --shdw: 0 0 4px;
+ --shdw-down: 0 6px 5px -5px;
+ --shdw-right: 6px 0 5px -5px;
+ --shdw-left: -6px 0 5px -5px;
+ --shdw-up: 0 -6px 5px -5px;
+ --shdw-subtle: 0 25px 20px -20px;
+ --shdw-subtle-right: 10px 0 20px -20px;
+ --shdw-none: transparent 0 0 0;
+
+ /*****************************
+ Stacking
+ *****************************/
--z-1: 5;
--z-2: 10;
--z-3: 15;
--z-4: 20;
--z-5: 50;
--z-6: 100;
- --z-top: 999;
- --zz-top: 999999;
- /* Overlays */
- --rgb-light: .25;
- --rgb-medium: .66;
- --rgb-heavy: .85;
- --overlay-light: rgba(var(--c), .25);
- --overlay-medium: rgba(var(--c), .66);
- --overlay-heavy: rgba(var(--c), .85);
- --shimmer: rgba(var(--dark-rgb),0) 0%,
- rgba(var(--dark-rgb),.05) 50%,
- rgba(var(--dark-rgb),0) 100%;
- /* Shadows */
- --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
- --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
- --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
- --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
- --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
- --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
- --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
- --shadow-none: transparent 0px 0px 0px;
- /* Rounding */
- --innerRadius: 4px;
- --outerPadding: 1rem;
- --outerRadius: calc(var(--innerRadius) + var(--outerPadding));
- /* Transitions */
- --function:cubic-bezier(.47,.24,.07,.47);
- --timing: .25s;
- --transition-base: var(--timing) var(--function);
- --transition-color: background-color var(--transition-base),
- color var(--transition-base), border var(--transition-base);
- --transition-transform: transform var(--transition-base);
- --transition-size: width var(--transition-base),
- height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
+ --z-7: 999;
+ --z-8: 1000;
+ --z-9: 999999;
+ --z-10: 9999999;
- --offScreen: -200vw;
+ /*****************************
+ Rounding
+ *****************************/
+ --radius: 4px;
+ --p-outer: 1rem;
+ --radius-outer: calc(var(--radius) + var(--p-outer));
+ --p-y: var(--sp1);
+ --p-x: var(--sp1);
+ /*****************************
+ Transitions
+ *****************************/
+ --trans-fn: cubic-bezier(.47,.24,.07,.47);
+ --trans-t: .25s;
+ --trans-base: var(--trans-t) var(--trans-fn);
+ --trans-color: background-color var(--trans-base),
+ color var(--trans-base), border var(--trans-base);
+ --trans-transform: transform var(--trans-base);
+ --trans-size: width var(--trans-base),
+ height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);
+ --trans-vis: opacity var(--trans-base);
- /** Icons **/
- --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
- --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
- --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
- --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
- --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
- --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
- --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
- --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
- --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
- --linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
- --swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
+ /*****************************
+ Spacing
+ *****************************/
+ --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem); /* 8px → 16px */
+ --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem); /* 12px → 24px */
+ --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem); /* 16px → 32px */
+ --sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem); /* 24px → 48px */
+ --sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem); /* 32px → 64px */
+ --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem); /* 48px → 96px */
+ --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem); /* 64px → 128px */
+ /*****************************
+ Scrollbar
+ *****************************/
+ --sb-width: 8px;
+ --sb-track: rgb(var(--base-100));
+ --sb-thumb: rgb(var(--action-0));
+ --sb-thumb-hover: rgb(var(--action-50));
+ --sb-thumb-border: 2px solid rgb(var(--base-50));
+ --sb-radius: 4px;
- --scrollbar-width: 8px;
- --scrollbar-track-color: var(--base-100);
- --scrollbar-thumb-color: var(--action-0);
- --scrollbar-thumb-hover-color: var(--action-50);
- --scrollbar-thumb-border: 2px solid var(--base-50);
- --scrollbar-border-radius: 4px;
+ --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
+ --link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');
}
+
+
+ body:has(#theme-switcher:checked){
+ /*****************************
+ Colours
+ *****************************/
+ --mixBlendMode: lighten;
+ --coverBlend: multiply;
+ --coverIndex: 0;
+
+ --action-50: 219,0,110; /* #db006e; */
+ --action-100: 184,0.92; /* #b8005c; */
+ --action-200: 148,0,74; /* #94004a; */
+
+ --secondary-50: 216,159,0; /* #d89f00; */
+ --secondary-100: 181,133,0; /* #b58500; */
+ --secondary-200: 145,106,0; /* #916a00; */
+
+ --contrast: var(--light-0);
+ --contrast-50: var(--light-50);
+ --contrast-100: var(--light-100);
+ --contrast-200: var(--light-200);
+
+ --base: var(--dark-0);
+ --base-50: var(--dark-50);
+ --base-100: var(--dark-100);
+ --base-200: var(--dark-200);
+
+
+ --successBack: var(--successDark);
+ --successText: var(--successLight);
+ --warningBack: var(--warningDark);
+ --warningText: var(--warningLight);
+ --errorBack: var(--errorDark);
+ --errorText: var(--errorLight);
+
+ --shimmer: rgba(var(--light-0),0) 0%,
+ rgba(var(--light-0),.05) 50%,
+ rgba(var(--light-0),0) 100%;
+ }
+
.item-grid.integrations {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
@@ -427,8 +564,8 @@
}
.integration {
- background: var(--bg-white, #EFEFEF);
- border: 2px solid #ddd;
+ background: rgb(var(--base));
+ border: 2px solid rgb(Var(--contrast-200));
border-radius: 8px;
padding: 1.5rem;
position: relative;
@@ -436,18 +573,18 @@
}
.integration.connected {
- border-color: #22c55e;
- box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
+ border-color: rgb(var(--success));
+ box-shadow: 0 2px 8px rgba(var(--successBack), .1);
}
.integration.disconnected {
- border-color: #ef4444;
- box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
+ border-color: rgb(var(--error));
+ box-shadow: 0 2px 8px rgba(var(--errorBack), 0.1);
}
.integration[data-oauth="true"].disconnected {
- border-color: #3b82f6;
- box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+ border-color: rgb(var(--warning));
+ box-shadow: 0 2px 8px rgba(var(--warning), 0.1);
}
.header {
@@ -456,7 +593,7 @@
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
- border-bottom: 2px solid #ddd;
+ border-bottom: 2px solid var(--contrast-200);
}
.header h3 {
@@ -465,7 +602,7 @@
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
- color: var(--bg-black, #1B1B1B);
+ color: rgb(var(--contrast));
}
.connection-status {
@@ -482,16 +619,16 @@
}
.status-indicator.connected {
- color: #22c55e;
+ color: rgb(var(--success));
}
.status-indicator.disconnected {
- color: #ef4444;
+ color: rgb(var(--error));
}
.integration-meta {
margin-bottom: 1rem;
- color: #666;
+ color: rgb(var(--contrast-100));
font-size: 0.85rem;
}
@@ -504,10 +641,10 @@
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
- color: var(--bg-black, #1B1B1B);
+ color: rgb(var(--contrast));
text-transform: uppercase;
font-size: 0.85rem;
- letter-spacing: 0.5px;
+ letter-spacing: .5px;
}
.integration input,
@@ -516,10 +653,10 @@
.integration textarea {
width: 100%;
padding: 0.75rem;
- border: 2px solid #ddd;
+ border: 2px solid rgb(var(--contrast-200));
border-radius: 4px;
font-size: 0.9rem;
- background: white;
+ background: rgb(var(--base-50));
transition: border-color 0.3s ease;
}
@@ -534,8 +671,8 @@
display: inline-block;
width: 90%;
margin: 0 .5rem;
- background-color: #ddd;
- border-color: white;
+ background-color: rgb(var(--base-50));
+ border-color: rgb(var(--contrast-200));
user-select: all;
}
@@ -555,13 +692,13 @@
.integration select:focus,
.integration textarea:focus {
outline: none;
- border-color: var(--action-color, #FF0080);
- box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.1);
+ border-color: rgb(var(--action-0));
+ box-shadow: var(--shdw) rgba(var(--action-0),.1);
}
.integration .hint {
font-size: 0.8rem;
- color: #666;
+ color: ;
margin-top: 0.5rem;
line-height: 1.4;
}
@@ -576,29 +713,29 @@
cursor: pointer;
}
button:hover {
- background: #FF0080;
- color: #fff;
+ background: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
}
.integration-actions .button-primary {
- background: var(--action-color, #FF0080);
- border-color: var(--action-color, #FF0080);
- color: white;
+ background: rgb(var(--action-0));
+ border-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
}
.integration-actions .button-primary:hover {
- background: #e6007a;
- border-color: #e6007a;
+ background: rgb(var(--action-0));
+ border-color: rgb(var(--action-200));
}
.integration-actions .button-link-delete {
- color: #ef4444;
+ color: rgb(var(--action-0));
border-color: transparent;
background: transparent;
}
.integration-actions .button-link-delete:hover {
- color: #dc2626;
+ color: rgb(var(--action-0));
text-decoration: underline;
}
@@ -606,8 +743,8 @@
position: absolute;
top: 10px;
right: 10px;
- background: var(--action-color, #FF0080);
- color: white;
+ background: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
@@ -645,12 +782,12 @@
@keyframes flash-success {
0%, 100% { border-color: inherit; }
- 50% { border-color: #22c55e; }
+ 50% { border-color: rgb(var(--success)); }
}
@keyframes flash-error {
0%, 100% { border-color: inherit; }
- 50% { border-color: #ef4444; }
+ 50% { border-color: rgb(var(--error)); }
}
@media (max-width: 768px) {
@@ -684,25 +821,25 @@
@keyframes flash-success {
0%, 100% {
- background-color: var(--bg-white, #EFEFEF);
- border-color: #22c55e;
+ background-color: rgb(var(--base));
+ border-color: rgb(var(--success));
}
50% {
- background-color: #dcfce7;
- border-color: #22c55e;
- box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
+ background-color: rgb(var(--successBack));
+ border-color: rgb(var(--success));
+ box-shadow: var(--shdw) rgba(var(--success), 0.3);
}
}
@keyframes flash-error {
0%, 100% {
- background-color: var(--bg-white, #EFEFEF);
- border-color: #ef4444;
+ background-color: rgb(var(--base));
+ border-color: rgb(var(--error));
}
50% {
- background-color: #fee2e2;
- border-color: #ef4444;
- box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
+ background-color: rgb(var(--errorBack));
+ border-color: rgb(var(--error));
+ box-shadow: var(--shdw) rgba(var(--error), .3);
}
}
@@ -710,7 +847,7 @@
.unsaved-indicator {
display: inline-block;
padding: 2px 8px;
- background: #fef3c7;
+ background: rgb(var(--base-200));
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
@@ -743,21 +880,21 @@
}
.notification-success {
- background-color: #d4edda;
- border: 1px solid #c3e6cb;
- color: #155724;
+ background-color: rgb(var(--successBack));
+ border: 1px solid rgb(var(--success));
+ color: rgb(var(--successText));
}
.notification-error {
- background-color: #f8d7da;
- border: 1px solid #f5c6cb;
- color: #721c24;
+ background-color: rgb(var(--errorBack));
+ border: 1px solid rgb(var(--error));
+ color: rgb(var(--errorText));
}
.notification-info {
- background-color: #d1ecf1;
- border: 1px solid #bee5eb;
- color: #0c5460;
+ background-color: rgb(var(--warningBack));
+ border: 1px solid rgb(var(--warning));
+ color: rgb(var(--warningText));
}
/* OAuth Status Indicators */
@@ -769,11 +906,11 @@
}
.status-invalid {
- color: #856404;
- background-color: #fff3cd;
+ color: rgb(var(--warning));
+ background-color: rgb(var(--warningBack));
padding: 5px 10px;
border-radius: 3px;
- border: 1px solid #ffeaa7;
+ border: 1px solid rgb(var(--warningText));
}
/* Form Field Updates */
@@ -812,8 +949,8 @@
transform: translateY(-50%);
width: 16px;
height: 16px;
- border: 2px solid #f3f3f3;
- border-top: 2px solid #3498db;
+ border: 2px solid rgb(var(--action-200));
+ border-top: 2px solid rgb(var(--action-0));
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -832,8 +969,8 @@
.generate-webhook-signature {
padding: 6px 12px;
- background-color: #007cba;
- color: white;
+ background-color: rgb(var(--secondary-0));
+ color: rgb(var(--secondary-contrast));
border: none;
border-radius: 3px;
cursor: pointer;
@@ -842,14 +979,14 @@
}
.generate-webhook-signature:hover {
- background-color: #005a87;
+ background-color: rgb(var(--action-0));
}
/* Save Button States */
.save-credentials {
padding: 8px 16px;
- background-color: #28a745;
- color: white;
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
border: none;
border-radius: 4px;
cursor: pointer;
@@ -859,7 +996,7 @@
}
.save-credentials:hover:not(:disabled) {
- background-color: #218838;
+ background-color: rgb(var(--action-0));
}
.save-credentials:disabled {
@@ -879,18 +1016,18 @@
}
.connection-status.connected {
- background-color: #d4edda;
- color: #155724;
+ background-color: rgb(var(--successBack));
+ color: rgb(var(--successText));
}
.connection-status.disconnected {
- background-color: #f8d7da;
- color: #721c24;
+ background-color: rgb(var(--errorBack));
+ color: rgb(var(--errorText));
}
.connection-status.expired {
- background-color: #fff3cd;
- color: #856404;
+ background-color: rgb(var(--warningBack));
+ color: rgb(var(--warningText));
}
/* Hidden location field that appears after account selection */
@@ -928,6 +1065,9 @@
height: auto;
}
+ #wpfooter#wpfooter {
+ position: relative;
+ }
</style>
<?php
}
--
Gitblit v1.10.0