@bagelink/vue 0.0.140 → 0.0.145

package/src/styles/theme.css

@@ -0,0 +1,736 @@
+/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
+/*noinspection CssUnknownTarget*/
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+:root {
+  --bgl-blue: #19b8ea;
+  --bgl-blue-tint: #19b8ea80;
+  --bgl-blue-20: rgba(46, 91, 255, 20%);
+  --bgl-blue-dark: #191c30;
+  --bgl-red: #ed6c6f;
+  --bgl-red-tint: #fbe2e2;
+  --bgl-yellow: #ffbb00;
+  --bgl-yellow-light: #fff6d5;
+  --bgl-white: #fff;
+  --bgl-pink: #f1416c;
+  --bgl-gray: #b7b7b7;
+  --bgl-gray-light: #f5f8fa;
+  --bgl-gray-80: #e8ecef;
+  --bgl-gray-20: rgba(183, 183, 183, 0.2);
+  --bgl-blue-light: #eef6ff;
+  --bgl-green: #75c98f;
+  --border-color: #eff2f5;
+  --bgl-black: #282929;
+  --bgl-black-tint: #28292980;
+  --bgl-bg: #f4f6fa;
+  --bgl-shadow: #4c577d26;
+  --whatsapp-gray: #89959f;
+  --whatsapp-green: #e0fcd6;
+  --whatsapp-blue: #71bce6;
+  --input-border-radius: 7px;
+  --card-border-radius: 15px;
+  --btn-border-radius: 10px;
+  --btn-padding: 30px;
+  --input-bg: #f5f8fa;
+  --input-color: #00000080;
+  --input-height: 40px;
+  --btn-height: 40px;
+  --input-font-size: 12px;
+  --bgl-transition: all 200ms ease;
+  --bgl-hover-filter: brightness(90%);
+  --bgl-active-filter: brightness(70%);
+  --bgl-font: "Lexend", "Ploni", sans-serif;
+}
+
+[theme="dark"] {}
+
+.Vue-Toastification__toast {
+  border-radius: var(--card-border-radius);
+  box-shadow: none;
+}
+
+.Vue-Toastification__toast--default {
+  background: var(--bgl-blue);
+}
+
+.Vue-Toastification__close-button {
+  height: 1rem;
+  line-height: 1rem;
+}
+
+::selection {
+  color: var(--bgl-white);
+  background: var(--bgl-blue-dark);
+}
+
+.top-title {
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.page-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.modal-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 20px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.modal-footer {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-around;
+}
+
+.formkit-actions .formkit-wrapper {
+  gap: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+body {
+  background-color: var(--bgl-bg);
+  color: var(--bgl-black);
+  font-family: var(--bgl-font);
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.display-block {
+  display: block;
+}
+
+.card {
+  border-radius: var(--card-border-radius);
+  background: var(--bgl-white);
+  padding: 2rem 2rem;
+}
+
+.card.gray {
+  background: var(--bgl-gray-20);
+}
+
+.card.border {
+  border: 1px solid var(--border-color);
+  background-color: transparent;
+}
+
+.card.thin {
+  padding: 1rem 1rem;
+}
+
+.login-card {
+  padding: 3rem 2rem;
+  border-radius: calc(var(--card-border-radius) * 2);
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 330px;
+  margin: 15vh auto 0;
+}
+
+.login-card h3 {
+  font-size: 1.4rem;
+}
+
+.login-card .bagel-input input {
+  min-width: calc(var(--input-height) * 2);
+}
+
+.login-card .loader-wrapper {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.btn.thin {
+  height: calc(var(--btn-height) * 0.7);
+  line-height: calc(var(--btn-height) * 0.7);
+}
+
+.login-card .btn {
+  width: 100%;
+  background: var(--bgl-blue);
+  color: var(--bgl-white);
+}
+
+.login-card .forgot-password {
+  margin: -5px 0 10px;
+  color: var(--bgl-black);
+  text-decoration: none;
+}
+
+.login-card .forgot-password:active {
+  filter: brightness(70%);
+  color: var(--bgl-blue);
+}
+
+.login-card .error {
+  color: var(--bgl-red);
+  font-size: 0.8rem;
+  margin-top: -0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.popup {
+  border-radius: 15px;
+  background: var(--bgl-white);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  padding: 2rem;
+  min-width: 300px;
+  text-align: center;
+}
+
+.icon-font {
+  font-family: "Material Symbols Outlined", serif;
+}
+
+.tabs {
+  column-gap: 1rem;
+  margin-top: 20px;
+  margin-bottom: -2rem;
+  border-top: 1px solid var(--border-color);
+  width: calc(100% + 4rem);
+  margin-inline-start: -2rem;
+  padding-inline-start: 2rem;
+  overflow: auto;
+  display: flex;
+}
+
+.card.thin .tabs {
+  margin-bottom: 1rem;
+}
+
+.card>.card {
+  /* padding: 0; */
+}
+
+.card .card.tabs-top {
+  padding: 0;
+}
+
+.tab {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 2.5;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  border-bottom: 2px solid transparent;
+  padding: 0 5px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: inherit;
+}
+
+.tab.active {
+  color: var(--bgl-blue);
+  border-bottom: 2px solid var(--bgl-blue);
+}
+
+.tab:hover {
+  color: var(--bgl-blue);
+}
+
+.tab:active {
+  filter: brightness(70%);
+}
+
+.router-tab {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 2.5;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  border-bottom: 2px solid transparent;
+  padding: 0 5px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: inherit;
+}
+
+.router-tab.router-link-active {
+  color: var(--bgl-blue);
+  border-bottom: 2px solid var(--bgl-blue);
+}
+
+.router-tab:hover {
+  color: var(--bgl-blue);
+}
+
+.router-tab:active {
+  filter: brightness(70%);
+}
+
+.pill {
+  border-radius: 10px;
+  padding: 4px 8px;
+  font-size: 10px;
+  background: var(--bgl-gray-light);
+  white-space: nowrap;
+  display: inline;
+}
+
+.pill.blue {
+  background: var(--bgl-blue-light);
+  color: var(--bgl-blue);
+}
+
+.pill.red {
+  background-color: var(--bgl-red-tint);
+  color: var(--bgl-red);
+}
+
+.hide {
+  display: none;
+}
+
+.pill.green {
+  background-color: var(--bgl-green);
+  color: var(--bgl-white);
+}
+
+.pill.orange {
+  background-color: var(--bgl-yellow);
+  color: var(--bgl-black);
+}
+
+.block {
+  display: block;
+  width: 100%;
+}
+
+.pill.yellow {
+  background-color: var(--bgl-yellow);
+}
+
+.pill.Paid,
+.pill.Active {
+  background-color: var(--bgl-green);
+  color: white;
+}
+
+.pill.Error {
+  background-color: var(--bgl-red-tint);
+  color: var(--bgl-red);
+}
+
+.list-item {
+  padding: 0.5rem 1rem;
+  min-height: fit-content;
+  margin: 0.25rem 0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  color: var(--bgl-black);
+  text-decoration: none;
+  position: relative;
+}
+
+.list-item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.list-item:hover,
+.list-item.router-link-active {
+  background-color: var(--bgl-blue-light);
+}
+
+.list-item:active {
+  filter: var(--bgl-hover-filter);
+}
+
+.entity-container {
+  display: grid;
+  height: 100%;
+  /* grid-template-columns: 2fr 0fr; */
+  grid-template-columns: minmax(300px, 1fr) 3fr;
+  grid-gap: 1rem;
+  column-gap: 1rem;
+  grid-template-rows: 1fr;
+  grid-template-areas: "list-view detail-view";
+  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+  transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.flex-stretch {
+  display: flex;
+  align-items: stretch;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.FormRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.flex-end {
+  justify-content: flex-end;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.detail-main {
+  overflow-y: auto;
+}
+
+.content-row p {
+  margin: 0 0 10px 0;
+}
+
+.txt20 {
+  font-size: 20px;
+}
+
+.txt16 {
+  font-size: 16px;
+}
+
+.txt14 {
+  font-size: 14px;
+}
+
+.txt12 {
+  font-size: 12px;
+}
+
+.txt9 {
+  font-size: 9px;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.txtgray {
+  color: var(--bgl-gray);
+}
+
+.txtblue {
+  color: var(--bgl-blue);
+}
+
+.font-light {
+  font-weight: 100;
+}
+
+.id {
+  color: var(--bgl-gray);
+  font-size: 9px;
+}
+
+.empty-box {
+  width: 100%;
+  background-color: var(--bgl-gray-light);
+  color: var(--bgl-gray);
+  text-align: center;
+  padding: 20px;
+  border-radius: 10px;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+}
+
+.field {
+  --field-count: 1;
+  --width: calc(100% / var(--field-count));
+  grid-auto-columns: minmax(var(--width), var(--width));
+  font-size: 10px;
+  text-align: z;
+}
+
+.card.BagelTable {
+  height: 100%;
+  overflow: auto;
+  padding-top: 0;
+}
+
+.detail-view-inner {
+  display: grid;
+  height: 100%;
+  overflow: hidden;
+  grid-template-rows: max-content 1fr;
+  gap: 1rem;
+}
+
+.detail-view-inner-wrap {
+  height: 100%;
+  overflow: hidden;
+  transition: var(--bgl-transition);
+}
+
+.table-list-wrap {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.list-logo {
+  width: 50px;
+  aspect-ratio: 1;
+  object-fit: contain;
+  line-height: 1;
+}
+
+.list-content {
+  grid-auto-rows: max-content;
+  overflow-y: auto;
+}
+
+.DonationsDashbored {
+  position: relative;
+}
+
+.DonationsDashbored .list-content {
+  overflow-y: visible !important;
+}
+
+.DonationsDashbored .tabs-top {
+  position: sticky;
+  padding-top: 1rem;
+  inset-inline-start: 0;
+}
+
+/* [dir="rtl"] .DonationsDashbored .tabs-top {
+  inset-inline-start: 8vw;
+} */
+
+.copy-url {
+  background-color: var(--bgl-gray-light);
+  border-radius: var(--btn-border-radius);
+  padding: 0.5rem 1rem;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  /* gap: 1rem; */
+}
+
+.copy-url a {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.8;
+  color: var(--bgl-black);
+  word-break: break-all;
+}
+
+.list-view {
+  grid-area: list-view;
+  grid-template-areas: "list-header""list-content";
+  grid-template-columns: 1fr;
+  overflow-y: auto;
+  grid-template-rows: max-content 1fr;
+  transition: var(--transition);
+}
+
+.shekel {
+  line-height: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.15s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.15s ease-in;
+}
+
+.slide-fade-enter-from {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+
+.grid>* {
+  min-height: 0;
+}
+
+.view-wrapper {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+input[type="color"] {
+  padding: 0.025rem 0.05rem;
+  display: block;
+  width: var(--input-height);
+  height: var(--input-height);
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  border-radius: var(--input-border-radius);
+  border: none;
+  transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-moz-color-swatch {
+  border-radius: var(--input-border-radius);
+  border: none;
+  transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-webkit-color-swatch:hover {
+  box-shadow: inset 0 0 10px #00000050;
+}
+
+input[type="color"]::-moz-color-swatch:hover {
+  box-shadow: inset 0 0 10px #00000050;
+}
+
+.ellipsis {
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 1000px) {
+  :root {
+    /* --input-font-size: 16px;
+--input-height: 46px;
+--btn-height: 46px; */
+  }
+
+  .entity-container {
+    grid-template-columns: minmax(22vw, 1fr) 2fr;
+  }
+}
+
+@media screen and (max-width: 910px) {
+  .tab {
+    font-size: 12px;
+  }
+
+  .entity-container {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .detail-view-inner {
+    border-radius: var(--card-border-radius);
+    background: var(--bgl-white);
+  }
+
+  .detail-view-inner-wrap {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--bgl-bg);
+  }
+
+  .detail-view-inner-wrap.card {
+    background: var(--bgl-white);
+  }
+
+  .list-item {
+    padding: 0.5rem;
+  }
+
+  .card {
+    padding: 1rem 1rem;
+  }
+
+  .tabs {
+    column-gap: 10px;
+    margin-top: 10px;
+    margin-bottom: -15px;
+    box-sizing: border-box;
+    margin-inline-start: -1rem;
+    padding-inline-start: 1rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  .login-card {
+    /* padding: 1rem 2.3rem; */
+    width: 94%;
+    max-width: 400px;
+  }
+
+  .login-card .bagel-input.wider input {
+    min-width: 220px;
+  }
+
+  .popup {
+    border-radius: 15px;
+    background: var(--bgl-white);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    padding: 2rem;
+    min-width: 0;
+    max-width: 90%;
+    max-height: 90vh;
+    overflow-x: auto;
+    text-align: center;
+  }
+
+  .detail-main {
+    overflow-y: unset;
+  }
+
+  .detail-section {
+    height: fit-content;
+  }
+
+  .field {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .top-title {
+    font-size: 1.25em;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    margin-inline-start: 0.5rem;
+  }
+
+  .txt20 {
+    font-size: 18px;
+  }
+
+  .txt16 {
+    font-size: 14px;
+  }
+
+  .txt14 {
+    font-size: 12px;
+  }
+}