diff --git a/src/core/markdown.py b/src/core/markdown.py index 685481c9b9180f52cb5416711b4c70699a9a8b0a..4b45c5d7022978c90b1cded8601fa776dd33cea1 100644 --- a/src/core/markdown.py +++ b/src/core/markdown.py @@ -51,7 +51,7 @@ class Tag(SpanToken): class AlertBlock(BlockToken): - pattern = re.compile(r'^!!! (danger|warning|info)(\s+".+")?\s*$') + pattern = re.compile(r'^!!! (danger|warning|info|success)(\s+".+")?\s*$') def __init__(self, match): self.alert_type = match[0] @@ -89,9 +89,9 @@ class MyHtmlRenderer(HTMLRenderer): return html.escape(token.content) def render_alert_block(self, token: AlertBlock) -> str: - result = f'<div class="mx-1 my-3 alert alert-{token.alert_type}">' + result = f'<div class="mx-1 my-3 hub-alert hub-alert--{token.alert_type}">' if token.alert_caption: - result += f'<p class="fw-bold">{token.alert_caption}</p>' + result += f'{token.alert_caption}' result += self.render_inner(token) result += '</div>\n' return result diff --git a/src/plainui/jinja2/plainui/components/alert.html.j2 b/src/plainui/jinja2/plainui/components/alert.html.j2 index 771e28fe8f81ff5e40e315a428e679854f326935..b44676ecefee8ee384408de1fc5de7cc876bb95e 100644 --- a/src/plainui/jinja2/plainui/components/alert.html.j2 +++ b/src/plainui/jinja2/plainui/components/alert.html.j2 @@ -1,8 +1,5 @@ {% macro alert(type, class="") -%} - <div class="hub-alert hub-alert--{{ type }} {{ class }}"> - <div class="hub-alert__bar"></div> - <div role="alert">{{ caller() }}</div> - </div> + <div class="hub-alert hub-alert--{{ type }} {{ class }}" role"alert">{{ caller() }}</div> {%- endmacro %} {% macro info(class="") -%} diff --git a/src/plainui/styles/_variables-hub.scss b/src/plainui/styles/_variables-hub.scss index 98d5265d086d6009778d0803a8b0e2bf36ac5da8..b1e666d29dee34d32f9e47414e52fd7412ca6739 100644 --- a/src/plainui/styles/_variables-hub.scss +++ b/src/plainui/styles/_variables-hub.scss @@ -38,21 +38,21 @@ $hub-event-list-upcoming-color: $info !default; /* Alerts */ -$hub-alert-success-border: $success-border-subtle !default; -$hub-alert-success-color: $success !default; -$hub-alert-success-fill: $success !default; +$hub-alert-success-border: $secondary-border-subtle !default; +$hub-alert-success-color: $white !default; +$hub-alert-success-bg: $success !default; $hub-alert-info-border: $info-border-subtle !default; -$hub-alert-info-color: $info !default; -$hub-alert-info-fill: $info !default; +$hub-alert-info-color: $black !default; +$hub-alert-info-bg: $info !default; $hub-alert-warning-border: $warning-border-subtle !default; -$hub-alert-warning-color: $warning !default; -$hub-alert-warning-fill: $warning !default; +$hub-alert-warning-color: $black !default; +$hub-alert-warning-bg: $warning !default; $hub-alert-danger-border: $danger-border-subtle !default; -$hub-alert-danger-color: $danger !default; -$hub-alert-danger-fill: $danger !default; +$hub-alert-danger-color: $white !default; +$hub-alert-danger-bg: $danger !default; /* Tags */ diff --git a/src/plainui/styles/components/_alert.scss b/src/plainui/styles/components/_alert.scss index 63f40215fde1ba5505f11bd025365edfe3fe95c4..ebf6c2a754d7a9ccf7d469d45ec7f66231310a47 100644 --- a/src/plainui/styles/components/_alert.scss +++ b/src/plainui/styles/components/_alert.scss @@ -1,40 +1,33 @@ .hub-alert { align-items: center; + background-color: var(--hub-alert-background-color); + border-left: 0.2rem solid var(--hub-alert-border-color); color: var(--hub-alert-text-color); - border: 1px solid var(--hub-alert-border-color); display: flex; font: $hub-text-main-font; - gap: map-get($spacers, 3); - padding: map-get($spacers, 1) map-get($spacers, 2); -} - -.hub-alert__bar { - background-color: var(--hub-alert-fill-color); - border-radius: 0.25rem; - min-height: 32px; - width: 0.1875rem; + padding: map-get($spacers, 2); } .hub-alert--info { + --hub-alert-background-color: #{$hub-alert-info-bg}; --hub-alert-border-color: #{$hub-alert-info-border}; - --hub-alert-fill-color: #{$hub-alert-info-fill}; --hub-alert-text-color: #{$hub-alert-info-color}; } .hub-alert--warning { + --hub-alert-background-color: #{$hub-alert-warning-bg}; --hub-alert-border-color: #{$hub-alert-warning-border}; - --hub-alert-fill-color: #{$hub-alert-warning-fill}; --hub-alert-text-color: #{$hub-alert-warning-color}; } .hub-alert--success { + --hub-alert-background-color: #{$hub-alert-success-bg}; --hub-alert-border-color: #{$hub-alert-success-border}; - --hub-alert-fill-color: #{$hub-alert-success-fill}; --hub-alert-text-color: #{$hub-alert-success-color}; } .hub-alert--danger { + --hub-alert-background-color: #{$hub-alert-danger-bg}; --hub-alert-border-color: #{$hub-alert-danger-border}; - --hub-alert-fill-color: #{$hub-alert-danger-fill}; --hub-alert-text-color: #{$hub-alert-danger-color}; } diff --git a/src/plainui/styles/themes/38c3.scss b/src/plainui/styles/themes/38c3.scss index b73b380cf10ccd3ea816cbb17620f14f5eb18579..398e0fdf5b5b081bf2bad82567318dde6544cc01 100644 --- a/src/plainui/styles/themes/38c3.scss +++ b/src/plainui/styles/themes/38c3.scss @@ -18,7 +18,3 @@ body { background-position: 100% 100%; background-repeat: no-repeat; } - -.hub-alert { - background-color: $black; -}