opaque background, multiple component updates

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"

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>

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 ~ ' / '}}

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>

src/plainui/jinja2/plainui/components/markdown.html

 {% 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 %}

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">

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;
 }

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;

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,