diff --git a/src/plainui/jinja2/plainui/components/list_assemblies.html b/src/plainui/jinja2/plainui/components/list_assemblies.html
index 44561a7ce176d4a299482dc24ea5c6df1feeeeba..01ebdac0f194a6606249a7c22e7206609f6a7740 100644
--- a/src/plainui/jinja2/plainui/components/list_assemblies.html
+++ b/src/plainui/jinja2/plainui/components/list_assemblies.html
@@ -22,7 +22,7 @@
{% set link = url('plainui:assembly', assembly_slug=assembly.slug ) %}
{% set color="transparent" if assembly.is_official else "transparent" %}
- <li class="d-flex border border-{{ color }} bg-gradient-{{ color }}-horizontal p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
+ <li class="d-flex border border-{{ color }} bg-opaque p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
<a
href="{{ link }}"
title="{{ assembly.name }}"
@@ -68,7 +68,7 @@
{% macro tile(assembly, faved) -%}
{% set link = url('plainui:assembly', assembly_slug=assembly.slug ) %}
{% set color="transparent" if assembly.is_official else "transparent" %}
- <article class="h-100 d-flex flex-column border border-{{ color }}-dark bg-gradient-{{ color }}-vertical">
+ <article class="h-100 d-flex flex-column border border-white bg-opaque">
<a
href="{{ link }}"
class="text-decoration-none text-white"
diff --git a/src/plainui/jinja2/plainui/components/list_events.html b/src/plainui/jinja2/plainui/components/list_events.html
index 42de1b1993f10be474668d150d5988c75614b6f9..b55d06c84ddeed376dfc70f1abf339184f32ae15 100644
--- a/src/plainui/jinja2/plainui/components/list_events.html
+++ b/src/plainui/jinja2/plainui/components/list_events.html
@@ -24,8 +24,8 @@
{% macro list_el(event, faved, scheduled, first) -%}
{% set link = url('plainui:event', event_slug=event.slug ) %}
- {% set color="plattform" if event.kind == "official" else "assembly" %}
- <li class="d-flex border border-{{ color }} bg-gradient-{{ color }}-horizontal p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
+ {% set color="transparent" if event.kind == "official" else "transparent" %}
+ <li class="d-flex border border-white bg-opaque px-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
<a href="{{ link }}" title="{{ event.name }}" class="text-white mr-auto">
{{ event.name }}
</a>
@@ -47,7 +47,7 @@
<div class="rc3-slider">
<ul class="rc3-slider__container row row-cols-1 row-cols-sm-2 row-cols-lg-3 flex-nowrap m-0 list-unstyled">
{% for event in events %}
- <li class="rc3-slider__item col mb-2{% if loop.first %} pl-0{% endif %}{% if loop.last %} pr-0{% endif %}">
+ <li class="rc3-slider__item col p-0 mb-2 mr-2 border border-white {% if loop.first %} {% endif %}{% if loop.last %}mr-0{% endif %}">
{{ tile( event,
faved=true if event.id | safe in my_favorite_events,
scheduled=true if event.id | safe in my_scheduled_events) }}
@@ -64,7 +64,7 @@
{% if events %}
<ul class="row row-cols-1 row-cols-md-2 row-cols-xl-3 list-unstyled mb-0">
{% for event in events %}
- <li class="col mb-3">
+ <li class="col mb-0 border border-white p-0">
{{ tile( event,
faved=true if event.id | safe in my_favorite_events,
scheduled=true if event.id | safe in my_scheduled_events) }}
@@ -78,8 +78,8 @@
{% macro tile(event, faved, scheduled, custom_class="h-100") -%}
{% set link = url('plainui:event', event_slug=event.slug ) %}
- {% set color="plattform" if event.kind == "official" else "assembly" %}
- <article class="{{ custom_class }} d-flex flex-column border border-{{ color }}-dark bg-gradient-{{ color }}-vertical">
+ {% set color="transparent" if event.kind == "official" else "transparent" %}
+ <article class="{{ custom_class }} d-flex flex-column m-0 bg-opaque">
<a
href="{{ link }}"
class="text-decoration-none text-white"
@@ -155,8 +155,8 @@
{% macro tile_stream(room, faved, scheduled, custom_class="h-100") -%}
{% set link = url('plainui:event', event_slug=room.current_event.slug ) if room.current_event else '' %}
- {% set color="plattform" if room.current_event.kind == "official" else "assembly" %}
- <article class="{{ custom_class }} d-flex flex-column">
+ {% set color="transparent" if room.current_event.kind == "official" else "transparent" %}
+ <article class="{{ custom_class }} d-flex flex-column border border-1 border-white bg-opaque">
<figure class="mb-2">
{% if room.voc_stream %}
@@ -269,21 +269,21 @@
{%- endmacro -%}
{%- macro livestream(room, my_favorite_events, my_scheduled_events) -%}
- <div class="row border p-6 mx-0">
+ <div class="row mx-0">
<div class="col-sm-12 col-lg-7 col-xl-8 mb-3 mb-lg-0">
{{ tile_stream(room, faved=true if room.current_event and room.current_event.id | safe in my_favorite_events,
scheduled=true if room.current_event and room.current_event.id | safe in my_scheduled_events) }}
</div>
- <div class="col-sm-12 col-lg-5 col-xl-4 d-lg-flex flex-lg-column flex-lg-nowrap">
- <h3 class="text-center bg-info p-3 text-white h3">{{_("Coming Up Next")}}</h3>
+ <div class="col-sm-12 p-0 col-lg-5 col-xl-4 d-lg-flex flex-lg-column flex-lg-nowrap border border-1 border-white">
+ <h3 class="text-center bg-info p-2 m-0 text-dark h3">{{_("Coming Up Next")}}</h3>
{% if room.next_event %}
{{ tile(room.next_event, faved=true if room.next_event.id | safe in my_favorite_events,
- scheduled=true if room.next_event.id | safe in my_scheduled_events, custom_class="flex-lg-grow-1 mb-3") }}
+ scheduled=true if room.next_event.id | safe in my_scheduled_events, custom_class="flex-lg-grow-1 mb-0") }}
{% else %}
<p class="text-center my-6 flex-lg-grow">{{ _("no entry availaible")}}</p>
{% endif %}
{% if room.room.id %}
- <a href="{{ url('plainui:room', room_slug=room.room.slug) }}" class="mt-3 mt-lg-auto btn btn-secondary btn-lg btn-block">{{ _("View next Events") }}</a>
+ <a href="{{ url('plainui:room', room_slug=room.room.slug) }}" class="mt-3 mt-lg-auto btn btn-transparent btn-lg btn-block">{{ _("View next Events") }}</a>
{% endif %}
</div>
</div>
diff --git a/src/plainui/jinja2/plainui/components/list_rooms.html b/src/plainui/jinja2/plainui/components/list_rooms.html
index ba2bc57067ad0f3b9a55527b27505c03296c503c..145e4bf95244ef6668c8e53f959d907362a34543 100644
--- a/src/plainui/jinja2/plainui/components/list_rooms.html
+++ b/src/plainui/jinja2/plainui/components/list_rooms.html
@@ -21,7 +21,7 @@
{% macro list_el(room) -%}
{% set link = url('plainui:room', room_slug=room.slug) %}
{% set color="white" %}
- <li class="mt-3 d-flex border border-{{ color }} p-2 align-items-center font-headings">
+ <li class="mt-3 d-flex bg-opaque border border-{{ color }} p-2 align-items-center font-headings">
<span class="btn-icon-big text-white" title="{{ _("roomtype") ~ ': ' ~ _(room.room_type) }}">
{{ icon(room.room_type) }}
</span>
@@ -29,7 +29,7 @@
{{ room.name }}
</a>
{% if room.capacity and room.capacity != None and room.capacity > 0 %}
- <span class="btn-icon-big text-white">{{ icon("capacity") }}</span>
+ <span class="btn-icon-big btn-transparent text-white">{{ icon("capacity") }}</span>
<span class="mr-5" title="{{ _("capacity") }}">
{%- if room.occupants and room.occupants != None -%}
{{ room.occupants ~ ' / '}}
diff --git a/src/plainui/jinja2/plainui/components/listbox.html b/src/plainui/jinja2/plainui/components/listbox.html
index 0ce6370009c5037ff491e3bda45bd3c0d1cf2743..8dde91e993ed43bb0c552973dbf5082095459a98 100644
--- a/src/plainui/jinja2/plainui/components/listbox.html
+++ b/src/plainui/jinja2/plainui/components/listbox.html
@@ -9,7 +9,7 @@
{% else %}
{% set link = item.link %}
{% endif %}
- <li class="mt-2 d-flex border border-primary bg-gradient-plattform-horizontal p-2 align-items-center">
+ <li class="mt-2 d-flex border border-primary bg-opaque p-2 align-items-center">
<a href="{{ link }}" class="text-white mr-auto">
{{item.name}}
</a>
diff --git a/src/plainui/jinja2/plainui/components/markdown.html b/src/plainui/jinja2/plainui/components/markdown.html
index 8f6c6f9ab604cf4e64dd1197a683ae4cd040ac91..b956846fc0776f60e63f39fbd422f086a2491a60 100644
--- a/src/plainui/jinja2/plainui/components/markdown.html
+++ b/src/plainui/jinja2/plainui/components/markdown.html
@@ -1,11 +1,11 @@
{% macro markdown(markdown) -%}
- <section class="rc3-markdown border p-6">
+ <section class="rc3-markdown border bg-opaque p-3">
{{- markdown -}}
</section>
{%- endmacro %}
{% macro markdown_plain(markdown, customClass=null) -%}
- <section class="rc3-markdown{% if customClass %} {{customClass}}{% endif %}">
+ <section class="rc3-markdown border bg-opaque p-3 {% if customClass %} {{customClass}}{% endif %}">
{{- markdown -}}
</section>
{%- endmacro %}
diff --git a/src/plainui/jinja2/plainui/components/tile_board.html b/src/plainui/jinja2/plainui/components/tile_board.html
index 50b9afac2c327c12a6ed00471cb8a72fbedbf52a..f56174bc32c502f0cd78cdcfa6a38c671f74d420 100644
--- a/src/plainui/jinja2/plainui/components/tile_board.html
+++ b/src/plainui/jinja2/plainui/components/tile_board.html
@@ -48,7 +48,7 @@
<li class="pr-2">
<a
href="{{ item.edit_link }}"
- class="btn btn-icon btn-secondary"
+ class="btn btn-icon btn-transparent"
title="{{_("Edit")}}"
>
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
@@ -62,7 +62,7 @@
<li class="pr-2">
<button
type="submit"
- class="btn btn-icon btn-secondary"
+ class="btn btn-icon btn-transparent"
title="{{_("Delete")}}"
form="{{ item.delete_form_id }}"
name="id"
@@ -80,7 +80,7 @@
<li>
<a
href="{{ item.report_link }}"
- class="btn btn-icon btn-secondary"
+ class="btn btn-icon btn-transparent"
title="{{_("Report Content")}}"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-diamond-fill" viewBox="0 0 16 16">
diff --git a/src/plainui/styles/_util-classes.scss b/src/plainui/styles/_util-classes.scss
index 283654fa0e7bbde99bca884b45fdcd9a6e57e233..abcd7e19823275a60565550274cce05854b16710 100644
--- a/src/plainui/styles/_util-classes.scss
+++ b/src/plainui/styles/_util-classes.scss
@@ -87,6 +87,11 @@ h6,
background-color: $bg-opacity-color;
}
+.bg-opaque {
+ background-color: $bg-opacity-color;
+ backdrop-filter: $bg-filter-var;
+}
+
.fs-medium {
font-size: $medium-font-size;
}
diff --git a/src/plainui/styles/components/_event-info.scss b/src/plainui/styles/components/_event-info.scss
index 63bf01676909792124cb614e261d57cd5e247247..50c1a3e923d10ffe800d25fec502c6a22666a227 100644
--- a/src/plainui/styles/components/_event-info.scss
+++ b/src/plainui/styles/components/_event-info.scss
@@ -2,6 +2,7 @@
display: flex;
flex-flow: column nowrap;
background-color: $bg-opacity-color;
+ backdrop-filter: $bg-filter-var;
&__img {
object-fit: cover;
diff --git a/src/plainui/styles/utils/_globals.scss b/src/plainui/styles/utils/_globals.scss
index d115016027a33773f8c8c49c9d9dba650d3ed90c..394d171f5aad5345f7a08e6910ca197c49432b50 100644
--- a/src/plainui/styles/utils/_globals.scss
+++ b/src/plainui/styles/utils/_globals.scss
@@ -27,7 +27,8 @@ $spacers: (
17: ($spacer * 8) //128
);
-$bg-opacity-color: rgba(0,0,0,0.5);
+$bg-opacity-color: rgba(0, 0, 0, 0.4);
+$bg-filter-var: blur(1px);
$sizes: (
170: 10.625rem,