Implement styling options for all the bar components (not menus) through options variables.

2024-07-17 01:44:50 -07:00
parent f4ff5bba27
commit 50eeb4275d
64 changed files with 783 additions and 2074 deletions
--- a/scss/style/notifications/popups.scss
+++ b/scss/style/notifications/popups.scss
@@ -0,0 +1,110 @@
+@import "../colors";
+.notification-card-container {
+    margin-top: 3.5rem;
+}
+
+.notification-card {
+  color: $text;
+  background: $mantle;
+  margin-right: 0.45em;
+  border: 0.15em solid transparentize($surface0, 0.5); 
+  min-width: 26em;
+  min-height: 6rem;
+  border-radius: 0.6em;
+
+  &:not(:first-child) {
+    margin-top: 0.85em;
+  }
+}
+
+.notification-card-container {
+  padding: 1px;
+}
+
+.notification-card-image-container {
+  margin: 0.65em 0.65em;
+  border-radius: 0.4em;
+}
+.notification-card-image {
+  border-radius: 0.4em;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  padding: 0.85em 0.85em;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.notification-card-content {
+  min-width: 2.9em;
+  min-height: 2.9em;
+  padding: 0.5em 0.5em;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.notification-card-content.noimg {
+  margin-left: 0.5em;
+  margin-top: .15em;
+}
+
+.notification-card-header-label {
+  font-size: 0.95em;
+  margin-bottom: 0.5em;
+  color: $lavender;
+}
+
+.notification-card-body-label {
+  font-size: 0.84em;
+  margin-bottom: 1em;
+  font-weight: 600;
+}
+
+.notification-card-actions {
+  margin-top: 0.25em;
+  margin-bottom: 0.4em;
+}
+
+.notification-action-buttons {
+  color: $lavender;
+  background: $surface0;
+  min-width: 4em;
+  min-height: 1.65em;
+  border-radius: 0.2em;
+
+  &:not(:last-child) {
+    margin-right: 2rem;
+  }
+
+  &:hover {
+    background: $surface1;
+  }
+}
+
+.notification-icon {
+  color: $lavender;
+  margin-bottom: 0.4em;
+  min-width: 1em;
+  min-height: 1em;
+  font-size: 1.3em;
+}
+
+.notification-time {
+  font-size: 0.85em;
+  color: $overlay1;
+}
+
+.close-notification-button {
+  background: $red;
+  color: $crust;
+  min-width: 2.1em;
+  border-radius: 0rem 0.35em 0.35em 0em;
+
+  label {
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    background: $maroon;
+  }
+}