css: Fix and cleanup calendar rules

Icinga · Apr 17, 2024 · c2f0bbd · c2f0bbd
1 parent 734d157
commit c2f0bbd
Showing 1 changed file with 61 additions and 88 deletions.
diff --git a/public/css/calendar.less b/public/css/calendar.less
@@ -1,4 +1,5 @@
 /* Layout */
+
 .calendar-controls {
   display: flex;
   justify-content: flex-start;
@@ -87,48 +88,57 @@
   .entry {
     overflow: hidden;
 
-     .content {
-       display: flex;
-       flex-wrap: wrap;
-       column-gap: .5em;
-       padding: .125em;
-       height: 100%;
-       max-height: 100%;
-     }
-
-     .title {
-       display: flex;
-       flex-wrap: wrap;
-       align-content: flex-start;
-       flex: 0 1 auto;
-       column-gap: .5em;
-       overflow: hidden;
-
-       time {
-         margin-right: .5em;
-       }
-
-       .attendee {
-         word-break: break-word;
-       }
-
-       .attendee .icon {
-         vertical-align: baseline;
-       }
-     }
-
-     .description {
-       flex: 1 1 auto;
-       overflow: hidden;
-
-       p {
-         margin: 0;
-         overflow: hidden;
-         text-overflow: ellipsis;
-         .line-clamp(3);
-       }
-     }
-   }
+    .content {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: .5em;
+      padding: .125em;
+      height: 100%;
+      max-height: 100%;
+    }
+
+    .title {
+      display: flex;
+      flex-wrap: wrap;
+      flex: 0 1 auto;
+      column-gap: .5em;
+      overflow: hidden;
+
+      time {
+        margin-right: .5em;
+      }
+
+      .attendee {
+        word-break: break-word;
+      }
+
+      .attendee .icon {
+        vertical-align: baseline;
+      }
+    }
+
+    .description {
+      flex: 1 1 auto;
+      overflow: hidden;
+
+      p {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .line-clamp(3);
+      }
+    }
+
+    .ends-at {
+      align-self: flex-end;
+      text-align: right;
+      width: 100%;
+
+      .text-ellipsis();
+      font-size: 11/12em;
+      line-height: 12/11 * 1.5;
+    }
+  }
 }
 
 .calendar-grid.month {
@@ -147,11 +157,6 @@
     grid-template-rows: repeat(@weeks * @rowsPerDay, 1fr);
     grid-template-columns: repeat(@days * @columnsPerDay, minmax(0, 1fr));
     overflow: hidden;
-
-    .ends-at {
-      flex: 1 1 0;
-      text-align: right;
-    }
   }
 
   .step {
@@ -188,10 +193,6 @@
   .grid,
   .overlay {
     border-left: none;
-
-    .title {
-      width: 100%;
-    }
   }
 
   .step {
@@ -229,22 +230,6 @@
   }
 }
 
-.calendar-grid.week,
-.calendar-grid.day {
-  .entry {
-    .content {
-      flex-direction: column;
-      align-content: flex-start;
-      justify-content: flex-end;
-
-      .ends-at {
-        text-align: right;
-        width: 100%;
-      }
-    }
-  }
-}
-
 .calendar-grid {
   display: grid;
 
@@ -283,17 +268,6 @@
 
     .entry {
       pointer-events: all;
-
-      .starts-at,
-      .ends-at {
-        font-weight: normal;
-        color: @text-color-light;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 11/12em;
-        line-height: 12/11 * 1.5;
-      }
     }
   }
 }
@@ -325,43 +299,43 @@
         border-radius: 0;
         border-right: none;
         border-left: none;
-        background: linear-gradient(to right, transparent, var(--entry-bg) 0.5em, var(--entry-bg) calc(100% - 0.5em), transparent);
+        background: linear-gradient(to right, transparent, var(--entry-bg) 0.5em, var(--entry-bg) ~"calc(100% - 0.5em)", transparent);
       }
 
       &.opening-gradient {
         border-radius: 0 0.25em 0.25em 0;
         border-left: none;
-        background: linear-gradient(to left, var(--entry-bg) calc(100% - 1em), transparent);
+        background: linear-gradient(to left, var(--entry-bg) ~"calc(100% - 1em)", transparent);
       }
 
       &.ending-gradient {
         border-radius: 0.25em 0 0 0.25em;
         border-right: none;
-        background: linear-gradient(to right, var(--entry-bg) calc(100% - 1em), transparent);
+        background: linear-gradient(to right, var(--entry-bg) ~"calc(100% - 1em)", transparent);
       }
     }
   }
 
   .calendar-grid.week,
-  .calendar-grid.day{
+  .calendar-grid.day {
     .entry {
       &.two-way-gradient {
         border-radius: 0;
         border-top: none;
         border-bottom: none;
-        background: linear-gradient(to bottom, transparent, var(--entry-bg) 0.5em, var(--entry-bg) calc(100% - 0.5em), transparent);
+        background: linear-gradient(to bottom, transparent, var(--entry-bg) 0.5em, var(--entry-bg) ~"calc(100% - 0.5em)", transparent);
       }
 
       &.opening-gradient {
         border-radius: 0 0 0.25em 0.25em;
         border-top: none;
-        background: linear-gradient(to top, var(--entry-bg) calc(100% - 1em), transparent);
+        background: linear-gradient(to top, var(--entry-bg) ~"calc(100% - 1em)", transparent);
       }
 
       &.ending-gradient {
         border-radius: 0.25em 0.25em 0 0;
         border-bottom: none;
-        background: linear-gradient(to bottom, var(--entry-bg) calc(100% - 1em), transparent);
+        background: linear-gradient(to bottom, var(--entry-bg) ~"calc(100% - 1em)", transparent);
       }
     }
   }
@@ -396,7 +370,6 @@
     .title {
       font-weight: bold;
       color: @text-color;
-      mix-blend-mode: screen;
       opacity: .75;
 
       time {
@@ -409,8 +382,8 @@
       }
     }
 
-    .description {
-      mix-blend-mode: screen;
+    .ends-at {
+      color: @text-color-light;
     }
   }