:root { /* Darkmode colors */ --clr-white: #ffffff; --clr-white-80: #ffffffc6; --clr-white-40: #ffffff73; --clr-white-20: #ffffff31; --clr-white-10: #ffffff0e; --clr-black: #000000; --clr-black-80: #000000b2; --clr-black-70: #0000009b; --clr-black-40: #00000081; --clr-black-30: #0000003b; --clr-black-20: #00000030; --clr-black-10: #0000000e; --clr-red: #ff3224; --clr-red-sheer: #fe11001e; --clr-yellow: #EDAF5E; --clr-yellow-sheer: #edaf5e26; --clr-blue: #8EBFFF; --clr-blue-sheer: #8ebfff20; --clr-green: #85c0a3; --clr-dark-background: #0C0F12; --clr-dark-background-40: #0c0f126b; --clr-dark-background-20: #0c0f1227; --clr-medium-background: #13181F; --clr-light-background: #20252C; --clr-light-background-40: #20252c6c; --clr-light-background-20: #20252ca1; --clr-text-input-outline: #30353B; --clr-pb-img-border: #b6bdc56e; --clr-code-block-top-bar: #20252C; --clr-code-font: #daddf3; --clr-link: #4F94FF; --clr-spinner-1: #ffffff; --clr-spinner-2: #aef8ff; --clr-spinner-3: #a8beff; --clr-spinner-4: #ffcfa5; --clr-spinner-5: #ffb0aa; --clr-spinner-6: #f0a2ff; --clr-spinner-7: #ff98f8; --clr-paywall-effect-1: #1B1B1B; --clr-paywall-effect-2: #1B1B1B; --clr-paywall-effect-3: #110431; --clr-paywall-effect-4: #2A0101; /* lightmode colors */ --clrlight-black: #000000d1; --clrlight-red: #cf4a4a; --clrlight-red-sheer: #f66e6e20; --clrlight-yellow: #7f4b07; --clrlight-yellow-sheer: #edaf5e42; --clrlight-blue: #1f3858; --clrlight-blue-sheer: #1f38581f; --clrlight-green: #82a493; --clrlight-prompt-button-outline: #CED5E1; --clrlight-dark-background: #DAE1ED; --clrlight-dark-background-40: #ced5e167; --clrlight-dark-background-20: #ced5e122; --clrlight-medium-background: #F1F3F7; --clrlight-light-background: #F9FCFF; --clrlight-light-background-40: #f9fcff54; --clrlight-light-background-20: #ffffff31; --clrlight-text-input-outline: #bebebe; --clrlight-pb-img-border: #84848459; --clrlight-code-block-top-bar: #e4eaf0; --clrlight-code-font: #262734; --clrlight-link: #0066ff; --clrlight-spinner-1: #383838; --clrlight-spinner-2: #4D7FFF; --clrlight-spinner-3: #00E5FF; --clrlight-spinner-4: #FFA500; --clrlight-spinner-5: #FF5555; --clrlight-spinner-6: #FF00E5; --clrlight-spinner-7: #B300FF; --clrlight-paywall-effect-1: #e0e0e0; --clrlight-paywall-effect-2: #cdcccc; --clrlight-paywall-effect-3: #e4daf8; --clrlight-paywall-effect-4: #fde0e0; /* Setting variables to lightmode */ --clr-var-primary-background: var(--clrlight-medium-background); --clr-var-light-background: var(--clrlight-light-background); --clr-var-light-background-40: var(--clrlight-light-background-40); --clr-var-light-background-20: var(--clrlight-light-background-20); --clr-var-dark-background: var(--clrlight-dark-background); --clr-var-dark-background-40: var(--clrlight-dark-background-40); --clr-var-dark-background-20: var(--clrlight-dark-background-20); --clr-var-text: var(--clrlight-black); --clr-var-text-80: var(--clr-black-80); --clr-var-text-40: var(--clr-black-40); --clr-var-text-20: var(--clr-black-20); --clr-var-highlight-text: var(--clr-white); --clr-var-highlight-text-80: var(--clr-white-80); --clr-var-highlight-text-40: var(--clr-white-40); --clr-var-red-alert: var(--clrlight-red); --clr-var-red-sheer: var(--clrlight-red-sheer); --clr-var-yellow-warning: var(--clrlight-yellow); --clr-var-yellow-sheer: var(--clrlight-yellow-sheer); --clr-var-blue-notification: var(--clrlight-blue); --clr-var-blue-sheer: var(--clrlight-blue-sheer); --clr-var-green-alert: var(--clrlight-green); --clr-var-green-static: #28a745; --clr-var-text-input-outline: var(--clrlight-text-input-outline); --clr-var-side-nav-border: var(--clrlight-prompt-button-outline); --clr-var-prompt-button-outline: var(--clrlight-prompt-button-outline); --clr-var-pb-img-border: var(--clrlight-prompt-button-outline); --clr-var-hr: var(--clr-black-10); --clr-var-button-hover: var(--clr-black-10); --clr-var-math-highlight: var(--clr-white); --clr-var-toggle-button-outline: var(--clr-black-10); --clr-var-code-block-top-bar: var(--clrlight-code-block-top-bar); --clr-var-code-font: var(--clrlight-code-font); --clr-var-link: var(--clrlight-link); --clr-var-box-shadow: var(--clr-black-20); --clr-var-spinner-1: var(--clrlight-spinner-1); --clr-var-spinner-2: var(--clrlight-spinner-2); --clr-var-spinner-3: var(--clrlight-spinner-3); --clr-var-spinner-4: var(--clrlight-spinner-4); --clr-var-spinner-5: var(--clrlight-spinner-5); --clr-var-spinner-6: var(--clrlight-spinner-6); --clr-var-spinner-7: var(--clrlight-spinner-7); --clr-var-paywall-effect-1: var(--clrlight-paywall-effect-1); --clr-var-paywall-effect-2: var(--clrlight-paywall-effect-2); --clr-var-paywall-effect-3: var(--clrlight-paywall-effect-3); --clr-var-paywall-effect-4: var(--clrlight-paywall-effect-4); /* Additional colors for CSV upload */ --clr-var-green-sheer: #85c0a320; --clr-var-red-alert-dark: #a04040; --clr-var-link-dark: #0055cc; --clr-var-green-static-dark: #1e7e34; /* font sizes */ --fs-h1: 1.3rem; --fs-h2: 1.1rem; --fs-h3: 1.05rem; --fs-h4: 1rem; --fs-p: 1rem; --fs-button: 1rem; --fs-code: 0.9rem; --fs-mini: 0.8rem; --fs-onboarding-header: 1.3rem; --fs-paywall-price: 1.5rem; --fs-huge: 4rem; /*font weights */ --fw-h1: 500; --fw-h2: 500; --fw-h3: 500; --fw-h4: 500; --fw-p: 300; --fw-button: 500; --fw-nav: 700; --fw-very-light: 200; --fw-light: 300; --fw-normal: 400; --fw-semi: 500; --fw-bold: 600; --fw-heavy: 800; /* border opacity */ --border-opacity: 0.6; --ff: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; } .icon-button img { filter: invert(0.7) !important; transition: all 0.2s ease; } .icon-button.no-invert img { filter: invert(0) !important; transition: all 0.2s ease; } .icon-button:disabled img { filter: brightness(0.7) !important; } img.color-flip-100 { filter: invert(1) !important; transition: all 0.2s ease; } img.color-flip-80 { filter: invert(0.7) !important; transition: all 0.2s ease; } img.color-flip-60 { filter: invert(0.5) !important; transition: all 0.2s ease; } img.color-flip-30 { filter: invert(0.3) !important; transition: all 0.2s ease; } /* check if they prefer darkmode */ @media (prefers-color-scheme: dark) { :root { --clr-var-primary-background: var(--clr-medium-background); --clr-var-light-background: var(--clr-light-background); --clr-var-light-background-40: var(--clr-light-background-40); --clr-var-light-background-20: var(--clr-light-background-20); --clr-var-dark-background: var(--clr-dark-background); --clr-var-dark-background-40: var(--clr-dark-background-40); --clr-var-dark-background-20: var(--clr-dark-background-20); --clr-var-text: var(--clr-white); --clr-var-text-80: var(--clr-white-80); --clr-var-text-40: var(--clr-white-40); --clr-var-text-20: var(--clr-white-20); --clr-var-highlight-text: var(--clr-black); --clr-var-highlight-text-80: var(--clr-black-80); --clr-var-highlight-text-40: var(--clr-black-40); --clr-var-red-alert: var(--clr-red); --clr-var-red-sheer: var(--clr-red-sheer); --clr-var-yellow-warning: var(--clr-yellow); --clr-var-yellow-sheer: var(--clr-yellow-sheer); --clr-var-blue-notification: var(--clr-blue); --clr-var-blue-sheer: var(--clr-blue-sheer); --clr-var-green-alert: var(--clr-green); --clr-var-text-input-outline: var(--clr-text-input-outline); --clr-var-side-nav-border: var(--clr-prompt-button-outline); --clr-var-prompt-button-outline: var(--clr-text-input-outline); --clr-var-pb-img-border: var(--clr-text-input-outline); --clr-var-hr: var(--clr-white-10); --clr-var-button-hover: var(--clr-white-10); --clr-var-math-highlight: var(--clr-light-background-20); --clr-var-toggle-button-outline: var(--clr-black); --clr-var-code-block-top-bar: var(--clr-code-block-top-bar); --clr-var-code-font: var(--clr-code-font); --clr-var-link: var(--clr-link); --clr-var-box-shadow: var(--clr-black-70); --clr-var-spinner-1: var(--clr-spinner-1); --clr-var-spinner-2: var(--clr-spinner-2); --clr-var-spinner-3: var(--clr-spinner-3); --clr-var-spinner-4: var(--clr-spinner-4); --clr-var-spinner-5: var(--clr-spinner-5); --clr-var-spinner-6: var(--clr-spinner-6); --clr-var-spinner-7: var(--clr-spinner-7); --clr-var-paywall-effect-1: var(--clr-paywall-effect-1); --clr-var-paywall-effect-2: var(--clr-paywall-effect-2); --clr-var-paywall-effect-3: var(--clr-paywall-effect-3); --clr-var-paywall-effect-4: var(--clr-paywall-effect-4); /* Additional colors for CSV upload - dark mode */ --clr-var-green-sheer: #85c0a320; --clr-var-red-alert-dark: #cc1f11; --clr-var-link-dark: #3d7acc; --clr-var-green-static-dark: #1e7e34; } .icon-button img { filter: brightness(0.8) !important; } .icon-button:disabled img { filter: brightness(0.5) !important; } img.color-flip-100 { filter: brightness(1) !important; } img.color-flip-80 { filter: brightness(0.8) !important; } img.color-flip-60 { filter: brightness(0.6) !important; } img.color-flip-30 { filter: brightness(0.3) !important; } .chevron-button img { filter: invert(1) !important; } .chevron-button.secondary img { filter: invert(0) !important; } .chevron-button.text img { filter: invert(0) !important; } .chevron-button.text.back img { filter: invert(0.2) !important; } } .blank-space { height: 400px; } h1 { color: var( --clr-var-text); font-size: var( --fs-h1); font-weight: var(--fw-h1); margin: 5px 0px 5px 0px; } h2 { color: var( --clr-var-text-80); font-size: var(--fs-h2); font-weight: var(--fw-h2); margin: 0px; } h3 { color: var( --clr-var-text); font-size: var(--fs-h3); font-weight: var(--fw-h3); margin: 0px; } p { color: var( --clr-var-text-80); font-size: var( --fs-p); font-weight: var(--fw-p); margin-top: 10px; } .bold { font-weight: var(--fw-semi); /* Makes the text bold */ } a { text-decoration: none; color: inherit; } a.underline { text-decoration: underline; } /* remove all default styling from buttons */ button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } .hidden { display: none !important; } html { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; /* color: var( --clr-var-highlight-text); */ -webkit-appearance: none; overflow-x: hidden; } body { background: var(--clr-var-primary-background); margin: 0; padding: 0; display: block; } /* Global scrollbar styling */ * { scrollbar-width: thin; /* For Firefox */ scrollbar-color: var(--clr-var-text-40) transparent; /* For Firefox */ } /* For Webkit browsers like Chrome, Safari */ ::-webkit-scrollbar { width: 4px; /* Width of vertical scrollbar */ height: 4px; /* Height of horizontal scrollbar */ } ::-webkit-scrollbar-track { background: transparent; /* Color of the tracking area */ } ::-webkit-scrollbar-thumb { background-color: var(--clr-var-text-40); /* Color of the scroll thumb */ border-radius: 4px; /* Rounded corners of the scroll thumb */ border: 2px solid var(--clr-var-dark-background-20); } ::-webkit-scrollbar-thumb:hover { background-color: var(--clr-var-text-80); /* Color of the scroll thumb on hover */ } .main-container { display: flex; height: 100%; } .content-container { /* width: calc(100% - 310px); position: relative;*/ /* height: 100%; */ } .block-content { display: block; height: 100%; width: 100%; } /* ------------------------------------------ ERROR PAGES --------------------------------------------------- */ /* NOTE: these are also used on the unsubscribe page */ .error-page-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: auto; } .error-page-center-container { width: calc(100% - 2rem); max-width: 400px; margin-top: 10%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; row-gap: 2rem; /* padding: 20px; */ } .error-page-center-container.unsubscribe { max-width: 440px; } .error-page-message-container { width: calc(100% - 2rem); display: flex; flex-direction: column; align-items: center; } .error-page-message-container p, .error-page-message-container h3 { text-align: center; } .unsubscribe-form { display: flex; flex-direction: row; column-gap: 40px; margin: 30px 0; } /* ------------------------------------------ MODALS ----------------------- */ .modal::backdrop { background-color: rgba(0,0,0,0.4); } dialog::backdrop { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.4); } .modal { border: none; border-radius: 10px; padding: 0px; /* to ensure taps on modal body don't close the modal */ max-height: 80%; background-color: var(--clr-var-light-background); width: calc(100dvw - 3rem); max-width: 900px; /* min-height: 380px; */ color: var(--clr-var-text-80); } .modal.small { width: calc(100dvw - 3rem); max-width: 600px; } .modal-buttons { display: flex; flex-direction: row; justify-content: flex-end; width: 100%; margin-top: 40px; column-gap: 15px; } .disconnect-modal-padding { padding: 20px; } .react-modal-padding { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .react-modal-padding.overflow-hidden { overflow: hidden; } .react-modal-content { display: flex; flex-direction: column; align-items: flex-start; column-gap: 15px; } .react-modal-options { display: flex; flex-direction: row; margin-bottom: 10px; row-gap: 10px; justify-content: flex-start; } .react-modal-section-header { padding: 3px 0px 3px 5px; display: flex; flex-direction: row; align-items: center; column-gap: 10px; border-radius: 8px; width: 115px; } .react-modal-section-header.active { background-color: var(--clr-var-primary-background); } .react-modal-section-header img { height: 1.2rem; } .react-modal-section-header h1 { font-size: var(--fs-p); } .react-modal-header h1 { color: var(--clr-var-text); } .react-modal-message {} .react-modal-message p { color: var(--clr-var-text-80); line-height: 1.6em; } .react-modal-buttons { display: flex; flex-direction: row; justify-content: flex-end; column-gap: 20px; } .react-close-button { color: var(--clr-var-text-40); float: right; font-size: 28px; /* font-weight: bold; */ } /* account settings modal */ .react-modal-bottom-buttons { display: flex; flex-direction: row; justify-content: flex-end; width: 100%; margin-top: 40px; column-gap: 10px; } .react-modal-content hr { margin: 15px 0px; border-radius: 5px; border: 1px solid var(--clr-var-hr); width: 100%; } .react-modal-body { flex: 1; width: 100%; margin-top: 10px; } .react-modal-as-element.confirmation-message { flex-direction: column; } .react-modal-as-element { display: flex; flex-direction: column; justify-content: space-between; margin: 0px; row-gap: 10px; } .react-modal-as-element p { margin: 0; } .react-modal-as-element p.element { color: var(--clr-var-text); font-weight: var(--fw-normal); } .react-modal-as-element.os-select { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; } .react-modal-as-element.os-select p { margin: 0; padding: 0; } .react-modal-element-with-tt { display: flex; flex-direction: row; align-items: center; column-gap: 5px; } .confirmation-message-text { display: flex; flex-direction: column; row-gap: 20px; } .confirmation-message-buttons { display: flex; flex-direction: column; justify-content: space-between;; column-gap: 20px; row-gap: 30px; align-items: flex-start; } .temporary-no-delete { display: flex; flex-direction: column; justify-content: space-between; margin: 25px 0px; row-gap: 10px; } /* ------------------------------------------ BUTTON STYLING ----------------------- */ .stacked-buttons { display: flex; flex-direction: column; row-gap: 15px; } .profile-picture { display: block; border-radius: 10px; } .profile-picture img { object-fit: cover; } .profile-picture.small img { height: 35px; width: 35px; border-radius: 20px; } .button { background-color: var(--clr-var-text); color: var(--clr-var-highlight-text); font-size: var(--fs-button); font-weight: var(--fw-button); /* font-family: var(--ff); */ border: none; display: flex; align-items: center; justify-content: center; border-radius: 13px; height: 35px; width: 120px; transition: all 0.3s ease; } .button.long { width: 220px; } .button.variable-width { width: fit-content; padding: 0px 10px; } .button.full-width { width: 100%; } .button p { color: var(--clr-var-highlight-text); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; } .button span { color: var(--clr-var-highlight-text); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; } input.button.loading-button:disabled { color: var(--clr-var-dark-background-20); z-index: 1; } .button:disabled { filter: opacity(0.3) !important; color: var(--clr-var-highlight-text-40); } input.button.loading-button { position: relative; z-index: 10; } /* ------- small button */ .button.small { height: 30px; width: fit-content; padding: 0px 10px; border-radius: 10px; } .button.small-width { width: fit-content; padding: 0px 10px; border-radius: 10px; } .button.small.full-width { width: -webkit-fill-available; } .button.small img { height: 1rem; } .button.small.pressed { filter: opacity(0.7); } /* ------- secondary button */ .button.secondary { background-color: transparent; border: 1px solid var(--clr-var-text-40); color: var(--clr-var-text); } .button.secondary.artifact { height: 27px; display: flex; flex-direction: row; column-gap: 5px; } .button.secondary.no-shrink { width: fit-content; padding: 0px 10px; } .button.secondary p { color: var(--clr-var-text); } .button.secondary span { color: var(--clr-var-text); } .button.secondary.artifact span { color: var(--clr-var-text-80); font-size: var(--fs-mini); } .button.secondary span.light { color: var(--clr-var-text-80); font-weight: var(--fw-p); } .button.secondary:hover { background-color: var(--clr-var-button-hover); filter: opacity(1); } /* ------- text button */ .button.text { background-color: transparent; color: var(--clr-var-text); column-gap: 5px; font-weight: var(--fw-normal); cursor: pointer; white-space: nowrap; width: fit-content; min-width: 120px; } .button.text p { color: var(--clr-var-text); } .button.text span { color: var(--clr-var-text); } .button.text img { width: 1rem; } .button:hover { filter: opacity(0.7); cursor: pointer; } /* ------- delete button */ .button.delete { background-color: var(--clr-var-red-sheer); /* border: 2px solid var(--clr-var-text-40); */ color: var(--clr-var-red-alert) ; } .button.delete span { color: var(--clr-var-red-alert); } .button.delete:hover { background-color: var(--clr-var-button-hover); filter: opacity(0.7); } /* SERIOUS FINAL DELETE BUTTON */ .alert-button { background-color: var(--clr-var-red-alert); display: flex; align-items: center; justify-content: center; border-radius: 13px; height: 35px; padding: 0px 10px; /* width: 120px; */ } .alert-button span { color: var(--clr-var-text); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; } /* ------- buttons w chevron -----------*/ .chevron-button { background-color: var(--clr-var-text); display: flex; align-items: center; justify-content: space-between; padding: 0px; border-radius: 13px; height: 35px; width: 120px; cursor: pointer; } .chevron-button.no-shrink { width: fit-content; min-width: 140px; column-gap: 5px; } .chevron-button p { color: var(--clr-var-highlight-text); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; padding: 0px 0px 0px 11px; } .chevron-button span { color: var(--clr-var-highlight-text); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; padding: 0px 0px 0px 11px; cursor: pointer; } .chevron-button img { height: 18px !important; margin: 0px 7px 0px 0px; /* invert the color */ filter: invert(0); rotate: 90deg; } .chevron-button.back img { rotate: 270deg; } .chevron-button:hover { /* background-color: var(--clr-var-button-hover); */ filter: opacity(0.7); } /* ------- secondary button */ .chevron-button.secondary { background-color: transparent; border: 2px solid var(--clr-var-text-40); } .chevron-button.secondary p { color: var(--clr-var-text); } .chevron-button.secondary img { filter: invert(1); } .chevron-button.secondary:hover { background-color: var(--clr-var-button-hover); /* filter: brightness(0.7); */ } /* ------- text button w chevron */ .chevron-button.text { background-color: transparent; width: fit-content; /* min-width: 140px; */ column-gap: 10px; } .chevron-button.text span { color: var(--clr-var-text); } .chevron-button.text img { filter: invert(1); } .chevron-button.text:hover { background-color: var(--clr-var-button-hover); filter: brightness(1); } /* for a text button "< Back" */ .chevron-button.text.back { margin: 0; padding: 0; column-gap: 0; transition: all 0.2s; } .chevron-button.text.back span { margin: 0; padding: 0; color: var(--clr-var-text-80); font-weight: var(--fw-normal); } .chevron-button.text.back img { filter: invert(0.8); } .chevron-button.text.back:hover { background-color: transparent; filter: brightness(0.8); } /* ------- icon that is a button (icon button) */ /* icon button code is duplicated in chat-stylesheet.css for open source version */ .icon-button { border-radius: 2px; padding: 4px; margin: 0px; cursor: pointer; display: flex; flex-direction: row; align-items: center; position: relative; } .icon-button img { height: 1rem; filter: brightness(0.8); } .icon-button.big img { height: 28px; filter: brightness(0.8); } .icon-button.big { height: fit-content; } .icon-button.small img { height: 1rem; filter: brightness(0.8); } .icon-button.refreshing img { animation: reverse-spin 0.6s ease-in-out infinite; } .grey-out img { opacity: 0.4; } @keyframes reverse-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .icon-button:active { background: var(--clr-var-dark-background); } .icon-button:disabled { /* filter: opacity(0.5) !important; */ cursor: default !important; } .icon-button:hover { background-color: var(--clr-var-button-hover); border-radius: 3px; } .icon-button::after { content: attr(data-tooltip); position: absolute; /* bottom: -26px; left: -2px; */ left: 50%; bottom: -26px; transform: translateX(-50%); max-width: 90vw; z-index: 20; background-color: var(--clr-var-dark-background); color: var(--clr-var-text-80); padding: 5px 10px; border-radius: 4px; font-size: var(--fs-code); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.1s ease, visibility 0.1s ease; transition-delay: 0.3s; } .icon-button.shift-tt-right::after { left: 220% !important; } .icon-button.left-align-tooltip::after { left: 0 !important; transform: translateX(0%) !important;; } .icon-button.shift-tt-left::after { left: -105% !important; } .icon-button.shift-tt-left-zero::after { left: unset !important; right: -82.2px; } .icon-button.code-block-button::after { left: -105% !important; } .icon-button.img-block-button::after {} .icon-button.small-width::after { /* This is for the user modal tool tip */ bottom: -65px !important; right: -71px !important; left: auto !important; white-space: wrap; width: 190px; } .icon-button:hover::after { opacity: 1 !important; visibility: visible; } .icon-button:not([data-tooltip])::after, .icon-button[data-tooltip=""]::after { display: none; } @keyframes pulseButton { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .icon-button.no-sources-selected { animation: pulseButton 2s ease-in-out infinite; } /* Stop animation on hover */ .icon-button.no-sources-selected:hover { animation: none; } /* --- Back button --- */ .back-button { display: flex; flex-direction: row; align-items: center; column-gap: 5px; margin: 10px 0px 20px 0px; padding: 2px; border-radius: 5px; width: fit-content; } .back-button:hover { background-color: var(--clr-var-button-hover); } .back-button p { color: var(--clr-var-text); font-size: var(--fs-button); font-weight: var(--fw-normal); margin: 0px; } .back-button img { height: 16px; filter: invert(1); } /* ------------------------------------------ Generic STYLING ----------------------- */ img.chevron-right { transform: rotate(90deg); } img.chevron-left { transform: rotate(-90deg); } img.chevron-down { transform: rotate(180deg); } .tool-tip { position: relative; display: flex; align-items: center; } .tool-tip img { width: 1rem; } .tool-tip::after { content: attr(data-tooltip); position: absolute; z-index: 100; /* Remove fixed left positioning */ /* left: 0px; */ background-color: var(--clr-var-dark-background); color: var(--clr-var-text-80); padding: 5px 10px; border-radius: 4px; font-size: var(--fs-code); width: max-content; white-space: normal; /* Allow wrapping when max-width is hit */ word-wrap: break-word; opacity: 0; visibility: hidden; transition: opacity 0.1s ease, visibility 0.1s ease; transition-delay: 0.3s; /* Add these properties for dynamic positioning */ top: 20px; left: -330%; transform: translateX(-50%); max-width: 200px; /* width: fit-content; */ } /* modifies all tool tips within form-title class, mostly within connect pages */ .form-title-with-tool-tip .tool-tip:after { left: 50%; } .tool-tip:hover::after { opacity: 1; visibility: visible; } .tool-tip.no-collapse::after { left: 170%; } .tool-tip:not([data-tooltip])::after, .tool-tip[data-tooltip=""]::after { display: none; } .huge-text { font-size: var(--fs-huge); } /* ------------------------------------------ TOGGLE Styling */ /* The switch - the box around the toggle */ .switch { position: relative; display: inline-block; width: 50px; height: 20px; } .switch.small { width: 40px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 40px; height: 0; } /* The toggle */ .toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #D9D9D9; -webkit-transition: .4s; transition: .4s; border: 1px solid var(--clr-var-toggle-button-outline); padding: 10px; width: 18px; } .toggle:before { position: absolute; content: ""; height: 16px; width: 16px; top: 2px; left: 2px; right: 0; bottom: 0; background-color: #FFFFFF; -webkit-transition: .4s; transition: .4s; box-shadow: 2px 2px 5px rgba(2, 1, 4, 0.25); } .toggle.disabled { background-color: #3D3D3D; } .toggle.disabled:before { background-color: #4D4D4D; } input:checked + .toggle { background-color: #40C48A; } input:focus + .toggle { box-shadow: 0 0 1px #ffffff92; } input:checked + .toggle:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(18px); box-shadow: -2px 2px 5px rgba(2, 1, 4, 0.25); } /* Rounded toggles */ .toggle.round { border-radius: 15px; } .toggle.round:before { border-radius: 50%; } /* error message styling */ .kb-error-message, .error-message { background-color: var(--clr-var-red-sheer); padding: 10px; border-radius: 8px; display: flex; /* border: 2px solid var(--clr-var-red-alert); */ flex-direction: column; row-gap: 8px; width: -webkit-fill-available; } .error-message.auto-width { width: auto; } .kb-error-message p, .kb-error-message li, .kb-error-message span, .error-message p, .error-message li, .error-message span { color: var(--clr-var-red-alert); font-size: var(--fs-code); font-weight: var(--fw-semi); margin: 0px; } .kb-error-message ul, .error-message ul { margin: 0px; } .warning-message { background-color: var(--clr-var-yellow-sheer); padding: 10px; border-radius: 8px; display: flex; flex-direction: column; row-gap: 8px; width: -webkit-fill-available; } .warning-message.auto-width { width: auto; } .warning-message p, .warning-message span { color: var(--clr-var-yellow-warning); font-size: var(--fs-code); font-weight: var(--fw-semi); margin: 0px; display: block !important; } .warning-message.mini-font p, .warning-message.mini-font span { font-size: var(--fs-mini); } .warning-message li { color: var(--clr-var-yellow-warning); font-size: var(--fs-code); font-weight: var(--fw-semi); /* margin: 0px; */ display: list-item !important; } .warning-message ul { margin: 0; padding: 0 20px !important; list-style-type: disc !important; } /* ------------------------------------------ Generic STYLING ----------------------- */ .page-spacing { padding: 20px; } .z-index-10 { z-index: 10; } .django-messages-container { position: fixed; /* Keep messages fixed on screen */ top: 10px; /* Position from the top */ left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Adjust horizontal centering */ z-index: 1050; /* Ensure it overlays most content (adjust as needed) */ display: flex; flex-direction: column; /* Stack messages vertically */ align-items: center; /* Center messages horizontally within the container */ width: auto; /* Adjust width automatically */ max-width: 80%; /* Prevent it from becoming too wide */ pointer-events: none; /* Allow clicks to pass through the container */ } .alert { padding: 10px 20px; /* Adjusted padding */ margin: 5px 0; /* Vertical margin between alerts */ border-radius: 4px; /* opacity: 1; */ /* Opacity is handled by the auto-hide script if enabled */ transition: opacity 0.3s ease-in-out; pointer-events: auto; /* Make individual alerts clickable/hoverable */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */ width: fit-content; /* Make alert width fit its content */ max-width: 100%; /* Ensure alert doesn't exceed container width */ } .alert.db-sharing-modal { width: fit-content; position: absolute; bottom: 15px; } .alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-success p, .alert-success h3, .alert-success span { color: #155724; } .alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .alert-error p, .alert-error h3, .alert-error span { color: #721c24; } /* ------------------------------------------ PAGE: Connections STYLING ----------------------- */ .connections-page-header { margin: 0px 0px 30px 0px; display: flex; flex-direction: row; row-gap: 10px; width: calc(100% - 2rem); max-width: 66rem; justify-content: space-between; align-items: center; } .page-header h1 {} .page-nav { display: flex; flex-direction: row; column-gap: 20px; } .page-nav h3 { color: var(--clr-var-text-40); font-size: var(--fs-h3); font-weight: var(--fw-h3); margin: 0px; position: relative; } .page-nav h3.active { color: var(--clr-var-text); } .page-nav h3.active::after { content: ""; /* Required for the pseudo-element */ position: absolute; left: 0; right: 0; bottom: -5px; /* Adjust to your desired spacing */ height: 3px; /* Height of the border */ border-radius: 3px; background: linear-gradient(69deg, rgba(171, 248, 255, var(--border-opacity)), rgba(175, 193, 247, var(--border-opacity)), rgba(231, 179, 205, var(--border-opacity)), rgba(242, 165, 237, var(--border-opacity)), rgba(252, 188, 153, var(--border-opacity)), rgba(246, 152, 134, var(--border-opacity)), rgba(158, 128, 145, var(--border-opacity))); } .app-connections-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; } .app-connections-container.connection-base { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; } .app-connections-center-container { width: 100%; overflow-x: hidden; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; /* padding: 20px; */ } .app-connections-center-container.connection-base { width: calc(100% - 2rem); } .app-connections-center-container.add-connection { align-items: flex-start; } .connection-list { display: flex; gap: 1.5rem; justify-content: space-evenly; flex-direction: column; flex-wrap: wrap; width: 100%; max-width: 64rem; margin: 0 0 3rem 0; padding: 0 1rem; /* Add consistent padding */ } .connection-list.active-connections { flex-direction: row; width: calc(100% - 2rem); } .connection-container { position: relative; display: flex; flex-direction: column; align-items: center; width: 280px; height: 220px; /* padding: 8px 10px 10px 10px; */ padding: 20px; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 12px; row-gap: 10px; border-radius: 12px; transition: all 0.2s ease; } .connection-container.new-connection { padding: 12px; } .connection-container::before { content: ''; position: absolute; inset: 0; backdrop-filter: brightness(1) contrast(1) saturate(1); -webkit-backdrop-filter: blur(0px); background-color: rgba(0, 0, 0, 0); border-radius: 10px; z-index: 10; pointer-events: none; opacity: 0; transition: all 0.3s ease; } .connection-container.menu-open::before { backdrop-filter: brightness(0.8) contrast(0.7) saturate(0.6); -webkit-backdrop-filter: blur(6px); background-color: var(--clr-var-box-shadow); opacity: 1; pointer-events: auto; /* attempt to block clicks */ } .connection-container:hover { background-color: var(--clr-var-dark-background-20); } .connection-body img { height: 25px; } .connection-header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 10px; width: 100%; } .connection-header.add-new-connection { flex-direction: column; row-gap: 5px; } .connection-header h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; margin: 0; font-size: var(--fs-p); color: var(--clr-var-text-80); } .connection-header.add-new-connection h1 { font-size: var(--fs-h2); } .connection-header img { height: 30px; border: 2px solid var(--clr-var-pb-img-border); border-radius: 50%; } .connection-header.add-new-connection img { height: 55px; border: 2px solid var(--clr-var-pb-img-border); border-radius: 50%; } .connection-short-text { display: flex; flex-direction: row; margin: -5px 0px 0px 45px; } .connection-short-text button { display: flex; flex-direction: row; align-items: center; margin: 10px 0px; } .connection-short-text span { margin: 0px; color: var(--clr-var-text-80); text-align: left; } button.chevron:hover img { background-color: var(--clr-light-background-20); border-radius: 3px; } button.chevron:hover span { color: var(--clr-var-text); } .connection-short-text img { height: 20px; margin: 0px 5px 0px 0px; transition: all 0.2s ease; /* filter: brightness(0.8); */ } .connection-short-text img.open, img.open { transform: rotate(180deg); } .connection-details { display: flex; flex-direction: column; row-gap: 15px; flex: 1; } .connection-details.formatting-guidelines { padding: 20px 0; } .connection-details p { color: var(--clr-var-text-80); margin: 0px; line-height: 1.5; } .connection-details ul { color: var(--clr-var-text-80); margin: 0px; padding-inline-start: 25px; } .connection-details li { color: var(--clr-var-text-80); margin: 5px 0px; } .connection-details.hidden { display: none; } .connection-policy-links.bottom-space { margin: 0px 0px 20px 0px; } p.connection-policy-links { font-size: x-small; margin: 0; } .connection-policy-links a { text-decoration: underline; } .connection-button { display: flex; width: 100%; justify-content: flex-end; flex-direction: row; } .connection-buttons { display: flex; justify-content: flex-end; align-items: center; flex-direction: row; column-gap: 20px; position: relative; width: 100%; } .connection-cs-header { display: flex; flex-direction: column; margin: 60px 0px 30px; } .connection-cs-header h2 { margin: 0px; } .connection-cs-subheader { display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px; margin: 10px 0px 0px 0px; } .no-connections-container { display: flex; flex-direction: column; } /* connection menu also used within dashboard submenus */ .connection-menu { position: absolute; top: 37px; right: 0; z-index: 10; display: flex; flex-direction: column; row-gap: 10px; background: var(--clr-var-light-background); border-radius: 10px; box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3); } .connection-menu.bottom-align { bottom: 37px; top: revert; } .connection-menu img { height: 1.3rem; } .connection-menu ul { color: var(--clr-var-text); list-style-type: none; padding: 0px; margin: 0; } .connection-menu li { /* padding: 12px 20px; */ color: var(--clr-var-text); list-style-type: none; } .connection-menu a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; width: 160px; border-radius: 10px; } .connection-menu button { display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: var(--clr-var-text); padding: 12px 20px; width: 200px; border-radius: 10px; } .connection-menu-item:hover { background-color: var(--clr-var-button-hover); } .connection-tag { color: var(--clr-var-text); padding: 3px 5px; border-radius: 5px; width: min-content; background-color: var(--clr-var-text-40); margin: 10px 0px 0px 0px; } .connections-indexing-status p { margin: 10px 0px 0px 0px; } .active-connection-details { display: flex; flex-direction: column; flex: 1; width: 100%; align-items: flex-start; row-gap: 10px; margin: 10px 0 0 0; } .active-connection-details p { color: var(--clr-var-text-40); margin: 0; } span.active-connection-details-max-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin: 5px 0 0 0; } .connection-meta-data { color: var(--clr-var-text-40); font-size: var(--fs-mini); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; column-gap: 8px; } .connection-meta-data.centered { justify-content: center; } .connection-meta-data img { width: auto; height: var(--fs-code); } .connection-in-progress-container { display: flex; flex-direction: column; flex: 1; align-items: flex-start; justify-content: flex-end; width: 100%; row-gap: 8px; } .connection-in-progress-container span { color: var(--clr-var-text); font-size: var(--fs-mini); } .progress-track { width: 100%; height: 8px; background-color: var(--clr-var-prompt-button-outline); /* Track color */ border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background-color: #5b76f0; /* Fill color */ transition: width 0.3s ease; /* Smooth transition */ } .cm-toggle-content-container { width: fit-content; display: flex; flex-direction: row; align-items: center; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 11px; position: relative; overflow: hidden; margin: 5px 0px 15px 0px; padding: 2px; background-color: var(--clr-var-secondary-background); } .cm-toggle-content-button { padding: 3px 0px; width: 125px; color: var(--clr-var-text-40); font-size: var(--fs-mini); font-weight: var(--fw-normal); position: relative; z-index: 1; transition: color 0.3s ease; background: none; border: none; cursor: pointer; } .cm-toggle-content-button.active { color: var(--clr-var-text); } .cm-slider { /* z-index: -10; */ position: absolute; left: -1px; height: calc(100% - 1px); width: 125px; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 5px; background-color: var(--clr-var-primary-background); border-radius: 10px; transition: transform 0.2s ease; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .cm-toggle-content-button:nth-child(2).active ~ .cm-slider { transform: translateX(127px); } .cm-toggle-content-button:nth-child(3).active ~ .cm-slider { transform: translateX(254px); } /* grouping within connections */ .connection-category-items { display: flex; gap: 1rem; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem; padding-right: 1rem; -webkit-overflow-scrolling: touch; width: 100%; position: relative; scroll-padding: 1rem; /* Better touch scrolling */ -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; /* Styled scrollbar */ scrollbar-width: thin; scrollbar-color: var(--clr-var-text-20) transparent; /* Webkit scrollbar styles */ &::-webkit-scrollbar { height: 6px; width: 6px; } &::-webkit-scrollbar-track { background: transparent; margin: 0 1rem; } &::-webkit-scrollbar-thumb { background: var(--clr-var-text-20); border-radius: 3px; /* &:hover { background: var(--clr-var-text-40); } */ } } .connection-category { margin-bottom: 2rem; width: 100%; position: relative; /* For absolute positioning of fade indicators */ } .connection-category h2 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--clr-var-text); font-weight: 500; } /* Container for scroll indicators and items */ .scroll-container { position: relative; width: 100%; margin: 0 -1rem; /* Negative margin to counteract padding */ padding: 0 1rem; /* Add padding to maintain spacing */ margin: 0 -0.5rem; padding: 0 0.1rem; } /* Scroll indicators */ .scroll-indicator { position: absolute; top: 0; bottom: 1rem; width: 50px; /* Made smaller */ pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.3s ease; } .scroll-indicator.left { left: 0; background: linear-gradient(to right, var(--clr-var-primary-background) 20%, transparent); } .scroll-indicator.right { right: 0; background: linear-gradient(to left, var(--clr-var-primary-background) 20%, transparent); } /* Show right indicator when content is scrollable */ .connection-category-items.is-scrollable ~ .scroll-indicator.right { opacity: 1; } /* Show left indicator when scrolled */ .connection-category-items.can-scroll-left ~ .scroll-indicator.left { opacity: 1; } /* Ensure connection containers don't grow but stay consistent */ .connection-category-items .connection-container { flex: 0 0 280px; min-width: 280px; scroll-snap-align: start; } /* Add padding to the last item specifically */ .connection-category-items .connection-container:last-child { margin-right: 2rem; /* Extra space after the last item */ } .formatting-guidelines-for-sheets-container { width: calc(100% - 2rem); } /* -------------------- Edit a connection ---------------- */ .add-connection-container.edit-connection { display: flex; flex-direction: column; row-gap: 1rem; /* width: 100%; */ max-width: 80rem; /* to give some space at the bottom */ margin: 0 0 3rem 0; } .edit-connection-container { display: flex; flex-direction: column; row-gap: 1rem; width: 100%; max-width: 64rem; /* to give some space at the bottom */ margin: 0 0 3rem 0; } .edit-connection-section { /* border: 2px solid var(--clr-var-prompt-button-outline); */ background-color: var(--clr-var-dark-background-20); border-radius: 8px; padding: 20px; } .edit-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ec-button-group { display: flex; flex-direction: row; align-items: center; column-gap: 10px; } .edit-section-content { display: flex; flex-direction: column; row-gap: 15px; } .edit-section-content.overflow-auto { overflow: auto; } img.form-connection-logo { width: 1.2rem; border: 1px solid var(--clr-var-pb-img-border); border-radius: 50%; } .edit-connection-type-and-logo { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; column-gap: 8px; } .edit-connection-type-and-logo p { margin: 0; } .edit-connections-selected-schemas { display: flex; flex-direction: column; align-items: flex-start; row-gap: 8px; } span.ec-selected-schema { font-weight: var(--fw-p); } span.ec-no-schemas { color: var(--clr-var-red-alert); font-weight: var(--fw-normal); } /* Knowledge Base styles */ .ec-knowledge-base-preview { display: flex; flex-direction: column; } .ec-knowledge-base-item { padding: 12px 0; border-bottom: 1px solid var(--clr-var-hr); } .ec-knowledge-base-item.no-border { border-bottom: none; } .ec-knowledge-base-content { font-size: 14px; line-height: 1.5; white-space: pre-wrap; } /* Queries within edit connection */ .query-preview-item { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--clr-var-pb-img-border); border-radius: 2px; } .query-preview-item.no-border { border-bottom: none; padding-bottom: 0; } .query-description-container { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 0.3rem; } .query-description { color: var(--clr-var-text-80); font-size: var(--fs-p); font-weight: var(--fw-p); margin-bottom: 0.25rem; } .query-ai-generated-badge { display: flex; align-items: center; color: var(--clr-var-yellow-warning); background-color: var(--clr-var-yellow-sheer); border-radius: 8px; padding: 5px; font-size: var(--fs-mini); font-weight: 500; width: fit-content; } /* ------------------------------------------ Login page --------------------------------------------------- */ .login-relative-container { height: 100dvh; display: flex; flex-direction: row; justify-content: center; align-items: center; } .login-modal-container { background-color: var(--clr-white); border-radius: 10px; width: 280px; } .login-modal-body { display: flex; flex-direction: column; align-items: center; row-gap: 10px; padding: 40px 20px 40px 20px; } .login-modal-body h1 { color: var(--clr-black); } .login-modal-body p { color: var(--clr-black); text-align: center; } .login-logo { display: flex; align-items: center; justify-content: center; background-color: var(--clr-black); border-radius: 10px; height: 70px; width: 70px; margin: 0px 0px 20px 0px; } .login-logo img { height: 50px; } .login-buttons-container {} .login-buttons-container.mcp-auth-buttons { gap: 10px; display: flex; flex-direction: column; align-items: center; margin-top: 1rem; } .login-button { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border: 1px solid var(--clr-black-30); border-radius: 3px; width: 230px; height: 40px; color: var(--clr-black); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; } .login-button.centered { justify-content: center; } .login-button.deny { justify-content: center; color: var(--clr-red); } .login-button img { height: 15px; margin: 10px; } .login-button p { color: var(--clr-black); font-size: var(--fs-button); font-weight: var(--fw-button); margin: 0px; } .login-divider { display: flex; align-items: center; text-align: center; margin: 5px 0; width: 100%; } .login-divider span { color: var(--clr-black-70); } .login-divider hr { width: 40%; border-style: solid; border-radius: 5px; color: var(--clr-black-20); } .login-divider.mcp-auth hr { width: 100%; } .magic-link-form { display: flex; width: 100%; margin-bottom: 20px; flex-direction: column; align-items: center; } .magic-link-form-group { margin-bottom: 15px; } input.magic-link-form-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border: 1px solid var(--clr-black-30); border-radius: 3px; width: 210px; height: 40px; padding: 0 10px; font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; font-size: var(--fs-button); font-weight: var(--fw-button); } input.magic-link-form-item::placeholder { color: var(--clr-black-40); } input.magic-link-form-item:focus { border: 1px solid var(--clr-black-40); } .magic-link-button { background-color: var(--clr-black); color: var(--clr-white); justify-content: center; } .login-info { display: flex; flex-direction: column; align-items: center; gap: 8px; } .login-info p { margin: 0; text-align: center; } .login-temp-password-buttons { display: flex; flex-direction: column; gap: 10px; } /* ------------------------------------------ PAGE: Onboarding --------------------------------------------------- */ .onboarding-container { display: flex; flex-direction: column; height: 100dvh; column-gap: 2rem; overflow: hidden; } .ob-left-container { background-color: var(--clr-var-dark-background); min-width: 250px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem; padding: 1rem 0 2rem 15px; } .ob-left-container.add-connection { row-gap: 0; padding: 1rem 15px; } .ob-left-top { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; /* align-items: flex-start; */ row-gap: 1rem; padding: 0; width: 100%; } .ob-left-top h1, .ob-left-top h3 { width: 90%; } .ob-left-top.auto-width h1, .ob-left-top.auto-width h3 { width: auto; padding: 0 1rem; } .ob-privacy-message { display: none; width: calc(100% - 2rem); } .ob-privacy-message p { font-size: var(--fs-code); } .ob-left-top h1 { font-size: var(--fs-h1); } .ob-left-top h3 { font-size: var(--fs-h3); color: var(--clr-var-text-80); } .ob-left-top h3 .bold { font-weight: var(--fw-semi); } .ob-right-container { width: auto; /* max-width: 840px; */ padding: 15px 0px 0 10px; overflow-y: scroll; } .ob-right-container.dataset-select-container { overflow-y: revert; } .ob-right-container h1 { margin: 10px 0px; } .ob-right-header { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem 0 0; } .ob-app-list { overflow-y: hidden; margin: 0 0 30px 0; } .ob-privacy-message p { font-size: var(--fs-mini); } .ob-privacy-message a { text-decoration: underline; /* color: var(--clr-var-link); */ } #dataSourceForm { display: none; } .ob-request-db, .connection-request-db { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0.5rem; margin: 2rem 0 0 0; } .connection-request-db-cta, .ob-request-db-cta { display: flex; column-gap: 6px; flex-direction: column; align-items: flex-start; } .connection-request-db-cta p, .ob-request-db-cta p { margin: 0; } .connection-request-db-form input, .ob-request-db-form input { background-color: var(--clr-var-dark-background); border: 1px solid var(--clr-var-text-input-outline); border-radius: 8px; padding: 10px; color: var(--clr-var-text-80); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; margin: 0 0 0.5rem 0; width: 300px; resize: none; } .connection-request-db-form input::placeholder, .ob-request-db-form input::placeholder { color: var(--clr-var-text-20); } .connection-request-db-form input:focus, .ob-request-db-form input:focus { outline: none; text-decoration: none; } /* ------------------------------------------ PAGE: ADD CONNECTION --------------------------------------------------- */ /* was called config modal */ .cm-modal-content { padding: 20px; color: var(--clr-var-text-80); } .add-connection-container { padding: 20px; background-color: var(--clr-var-light-background); color: var(--clr-var-text-80); border-radius: 12px; width: calc(100% - 3rem); max-width: 900px; margin: 0 0 2rem 0; } .cm-button-container { display: flex; flex-direction: row-reverse; column-gap: 10px; } h1.cm-title { margin: 0px 0px 20px 0px; color: var(--clr-var-text); } h1.cm-title span.grey { color: var(--clr-var-text-80); } h3.cm-form-label { margin: 0px 0px 10px 0px; color: var(--clr-var-text-80); } form.cm-form { display: flex; flex-direction: column; row-gap: 25px; margin: 0 0 1.5rem 0; } .cm-toggle-container { display: flex; flex-direction: row; align-items: center; margin: 10px 0px; } .cm-toggle-container p { margin: 0px; } span.cm-form-disclaimer { font-size: var(--fs-mini); color: var(--clr-var-text-40); } p.form-text { margin: 10px 0px; color: var(--clr-var-text-80); } p.form-warning { margin: 10px 0px; } .form-group { display: flex; flex-direction: column; row-gap: 10px; } .form-item { display: flex; flex-direction: column; row-gap: 8px; margin: 0 0 10px 0; } .form-item p { margin: 5px 0; color: var(--clr-var-text); } .form-item.switch { display: flex; flex-direction: row; row-gap: 5px; margin: 0 0 15px 0; } .form-title-with-tool-tip { display: flex; flex-direction: row; column-gap: 8px; } .form-title-with-tool-tip.link { column-gap: 0px; } .form-title-with-tool-tip.link a { /* text-decoration: underline; */ color: var(--clr-var-link); margin: 0 0 0 4px; cursor: pointer; } .form-title { display: flex; flex-direction: column; row-gap: 1rem; margin: 0 0 1rem 0; } .form-title h2 { color: var(--clr-var-text); font-weight: var(--fw-normal); } .form-title h3 { color: var(--clr-var-text-80); font-weight: var(--fw-normal); } .form-group select { display: block; background-color: var(--clr-var-dark-background); border: 1px solid var(--clr-var-text-input-outline); color: var(--clr-var-text-80); border-radius: 8px; padding: 10px; margin: 0px; width: 100%; max-width: 500px; /* Remove default arrow */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Add custom chevron arrow */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 20px; padding-right: 30px; } .form-group select:focus { outline: none; border-color: var(--clr-var-text); box-shadow: 0 0 0 2px rgba(var(--clr-var-text-rgb), 0.2); } /* Style the options within the select */ .form-group select option { color: var(--clr-var-text); background-color: var(--clr-var-dark-background); padding: 10px; } /* Style for when the dropdown is open */ .form-group select::-ms-expand { display: none; } .form-group select:hover { border-color: var(--clr-var-text-80); } .form-group textarea { margin: 10px 0px 0px 0px !important; border: 1px solid var(--clr-var-text-input-outline); } .form-group input { background-color: var(--clr-var-dark-background); border: 1px solid var(--clr-var-text-input-outline); border-radius: 8px; padding: 10px; color: var(--clr-var-text-80); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; margin: 10px 0px 0px 0px; max-width: 500px; } .form-group input::placeholder { color: var(--clr-var-text-20); } .form-group.no-spacing input { margin: 0px 0px 0px 0px; } .form-group.postgres-connection-form-builder input { margin: 0px 0px 10px 0px; } .form-group input:focus { outline: none; text-decoration: none; } .form-group input.variable-width { width: calc(100% - 2rem); } .db-no-write-message p { font-size: var(--fs-code); color: var(--clr-var-text-40); margin: 0px; } a.link-primary { /* color: var(--clr-var-link); font-weight: var(--fw-semi); */ text-decoration: underline; } a.link-primary:focus { text-decoration: none; outline: none; } a.link-highlight { color: var(--clr-var-link); font-weight: var(--fw-semi); } .schema-selection-holder { display: flex; flex-direction: column; align-items: flex-start; margin: 1rem 0; } /* -------- TESTING A SPINNER FOR CONFIG MODAL ------- */ .anchor-for-spinner { position: relative; } /* Spinner element */ .spinner { opacity: 0; position: absolute; top: -2px; left: 37%; /* transform: translate(-50%, -50%); width: 15px; height: 15px; border: 3px solid transparent; border-top-color: var(--clr-var-dark-background); border-radius: 50%; animation: spin 1s linear infinite; */ z-index: 5; } .lds-ellipsis { /* change color here */ color: var(--clr-var-dark-background); } .lds-ellipsis, .lds-ellipsis div { box-sizing: border-box; } .lds-ellipsis { display: inline-block; position: relative; width: 40px; height: 40px; } .lds-ellipsis div { position: absolute; top: 16.66667px; width: 6.66667px; height: 6.66667px; border-radius: 50%; background: currentColor; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left: 4px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left: 4px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left: 16px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left: 28px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(12px, 0); } } .htmx-indicator { display: none; } /* Show the spinner when a request is in progress */ .htmx-request .htmx-indicator { display: block; } .htmx-request .hide-on-request { display: none; } /* Spinner rotation animation */ @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------ REPORTS list --------------------------------------------------- */ .db-list-container, .reports-list-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: auto; } .db-list-center-container, .reports-list-center-container { width: 100%; overflow-x: hidden; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; /* padding: 20px; */ } .reports-header { margin: 0px 0px 30px 0px; display: flex; flex-direction: column; row-gap: 10px; width: calc(100% - 2rem); max-width: 48rem; justify-content: space-between; } .report-list { width: calc(100% - 2rem); max-width: 48rem; } .report-list table { color: var(--clr-var-text-80); width: 100%; margin: 20px 0px 40px 0px; border-collapse: collapse; border-spacing: 2px 0px; /* background-color: var(--clr-var-light-background); */ } .report-list img.connection-logo { height: 1.9rem; border: 2px solid var(--clr-var-pb-img-border); border-radius: 50%; } .star-icon img { height: 1rem; } span.star-icon { display: flex; height: max-content; width: auto; padding: 5px; } .report-list thead th { text-align: left; padding: 0 0 4px 0; font-weight: var(--fw-p); color: var(--clr-var-text-80); font-size: var(--fs-code); } .report-list tbody tr { font-weight: var(--fw-p); background-color: var(--clr); } .report-list tbody tr:hover { background-color: var(--clr-var-dark-background-20); cursor: pointer; } .report-list td { border-bottom: 2px solid var(--clr-var-prompt-button-outline); } .report-list tbody td { padding: 0.5rem 0; } a.report-is-favorited { text-decoration: none; color: inherit; width: 1.2rem; height: 1rem; display: flex; justify-content: flex-start; align-items: center; } .report-info { display: flex; flex-direction: row; align-items: center; column-gap: 5px; max-width: 100%; } .report-failed-tag { display: flex; flex-direction: row; align-items: center; border-radius: 8px; border: 1px solid var(--clr-var-text-20); color: var(--clr-var-text); background-color: var(--clr-var-red-sheer); /* padding: 3px 5px; */ } .report-failed-tag span { padding: 0px 5px; cursor: default; } .report-failed-tag hr { height: 28px; /* Specific height instead of 100% */ border: none; border-left: 1px solid var(--clr-var-text-20); margin: 0; } .report-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: calc(100% - 3rem); /* Adjust as needed */ } td.report-created-date { width: 115px !important; } .no-reports-message { width: calc(100% - 2rem); max-width: 80rem; display: flex; flex-direction: column; row-gap: 40px; } .no-reports-message.dashboard { max-width: 80rem; } .no-reports-message p { margin: 0px; } .no-reports-perks-list { display: flex; flex-direction: column; row-gap: 20px; } .no-reports-list-item { display: flex; flex-direction: row; align-items: center; column-gap: 8px; } .no-reports-list-item img { width: 1rem; } .no-reports-list-item p { margin: 0; color: var(--clr-var-text-80); } .wait-screen-notes {} .wait-screen { display: flex; flex-direction: column; row-gap: 1rem; width: calc(100% - 2rem); max-width: 48rem; } .stopwatch { font-size: var(--fs-h1); color: var(--clr-var-text-80); margin: 0px 0px 15px 0px; } /* ------------------------------------------ Create reports - react --------------------------------------------------- */ .create-report { color: var(--clr-var-text); width: calc(100% - 2rem); max-width: 48rem; margin: 1rem 0rem; display: flex; flex-direction: column; row-gap: 3rem; } .create-report.onboarding { margin: 0rem; } .cr-navigation-buttons { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; column-gap: 1.8rem; margin: 2rem 0 0 0; } .cr-form-group { display: flex; flex-direction: column; row-gap: 0.8rem; } .create-report select { display: block; background-color: var(--clr-var-dark-background); border: 1px solid var(--clr-var-text-input-outline); color: var(--clr-var-text-80); border-radius: 8px; padding: 10px; margin: 0px; width: 100%; max-width: 500px; /* Remove default arrow */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Add custom chevron arrow */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 20px; padding-right: 30px; } .create-report select:focus { outline: none; border-color: var(--clr-var-text); box-shadow: 0 0 0 2px rgba(var(--clr-var-text-rgb), 0.2); } /* Style the options within the select */ .create-report select option { color: var(--clr-var-text); background-color: var(--clr-var-dark-background); padding: 10px; } /* Style for when the dropdown is open */ .create-report select::-ms-expand { display: none; } .create-report select:hover { border-color: var(--clr-var-text-80); } .create-report input, .create-report textarea, .form-group textarea, textarea.edit-report-modal-textarea { background-color: var(--clr-var-dark-background); border: 1px solid transparent; border-radius: 8px; padding: 10px; color: var(--clr-var-text-80); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; margin: 0px; /* max-width: 500px; */ width: calc(100% - 20px); height: 5rem; resize: none; border: 1px solid var(--clr-var-text-input-outline); } .create-report input::placeholder, .create-report textarea::placeholder, .form-group textarea::placeholder, textarea.edit-report-modal-textarea::placeholder { color: var(--clr-var-text-20); } .create-report input:focus, .create-report textarea:focus, .form-group textarea, textarea.edit-report-modal-textarea:focus { outline: none; text-decoration: none; } .sample-dataset-tags { display: flex; flex-direction: column; width: calc(100% - 3rem); } .dataset-select-button-container { width: calc(100% - 1.4rem); display: flex; justify-content: flex-end; margin: 1rem 0 0 0; } .cr-tags {} .cr-tag { color: var(--clr-var-text); font-weight: var(--fw-p); border-radius: 15px; border: 3px solid var(--clr-var-prompt-button-outline); margin: 5px; padding: 5px 10px; transition: all 0.1s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; background-color: transparent; text-align: left; width: fit-content; } .cr-tag.metric { width: 100%; display: flex; flex-direction: column; margin: 10px 0px; row-gap: 5px; } input[type="radio"]:checked + .cr-tag, .cr-tag.selected, input[type="checkbox"]:checked + .cr-tag { background-color: var(--clr-var-text-80); color: var(--clr-var-highlight-text); border-color: var(--clr-var-text-80); transform: scale(1.0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } input[type="checkbox"]:checked + .cr-tag .cr-tag-description, input[type="radio"]:checked + .cr-tag .cr-tag-description { color: var(--clr-var-highlight-text-80); } .cr-tag:hover { transform: scale(1.01); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .cr-tag.width-100 { width: 100%; } .cr-form-subheader span { color: var(--clr-var-text-40); font-weight: var(--fw-light); } .cr-tag-header { font-weight: var(--fw-normal); } .cr-tag-description { font-weight: var(--fw-light); color: var(--clr-var-text-80); } /* ------------------------------------------ ACTUAL REPORT --------------------------------------------------- */ .full-report-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; } .full-report-center-container { width: 100%; overflow-x: hidden; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; } .full-report-header { width: calc(100% - 2rem); max-width: 64rem; display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; } .full-report-error-message { display: flex; max-width: 350px; background-color: var(--clr-var-light-background); flex-direction: column; padding: 1rem; border-radius: 8px; border: 1px solid var(--clr-var-prompt-button-outline); margin: 2rem 0; } .full-report-options { display: flex; flex-direction: row; align-items: center; column-gap: 10px; } .full-report-body { width: calc(100% - 2rem); max-width: 64rem; margin: 0 0 3rem 0; } .full-report-section { width: 100%; margin: 2.5rem 0 0 0; } .full-report-section p { line-height: 1.5; width: 100%; } .full-report-section strong { color: var(--clr-var-text); font-weight: var(--fw-normal); } .full-report-section code { color: var(--clr-var-code-font); font-size: var(--fs-code); background-color: var(--clr-var-highlight-text); border-radius: 5px; padding: 4px 7px; margin: 0; width: calc(100% - 1.2rem); line-height: 1.5; } .full-report-section ol { font-size: var(--fs-p); color: var(--clr-var-text-80); margin: 15px 0px; width: calc(100% - 2.2rem); padding-inline-start: 20px; } .full-report-section ul { font-size: var(--fs-p); color: var(--clr-var-text-80); margin: 0px; width: calc(100% - 2.2rem); } .full-report-section li { font-size: var(--fs-p); color: var(--clr-var-text-80); margin: 15px 0px; line-height: 1.6; max-width: 99%; overflow-wrap: break-word; } .full-report-artifact-container { display: flex; width: calc(100% - 0.5rem); flex-direction: column; align-items: center; min-height: 100px; margin: 1.6rem 10px; max-width: 80rem; border: 3px solid var(--clr-var-prompt-button-outline); border-radius: 10px; background-color: var(--clr-var-light-background); } .full-report-artifact-header { width: calc(100% - 10px); margin: 0 0 8px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .full-report-artifact-options { display: flex; flex-direction: row; align-items: center; column-gap: 8px; justify-content: flex-end; } .full-report-artifact-nav {} .full-report-artifact-nav-container { width: fit-content; display: flex; flex-direction: row; align-items: center; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 11px; position: relative; overflow: hidden; margin: 5px 0px 8px 0px; padding: 2px; background-color: var(--clr-var-secondary-background); } .full-report-artifact-nav-button { padding: 3px 0px; width: 65px; color: var(--clr-var-text-40); font-size: var(--fs-mini); font-weight: var(--fw-normal); position: relative; z-index: 1; transition: color 0.3s ease; background: none; border: none; cursor: pointer; } .full-report-artifact-nav-button.active { color: var(--clr-var-text); } .full-report-slider { /* z-index: -10; */ position: absolute; left: -1px; height: calc(100% - 1px); width: 65px; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 5px; background-color: var(--clr-var-primary-background); border-radius: 10px; transition: transform 0.2s ease; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .full-report-artifact-nav-button:nth-child(2).active ~ .slider { transform: translateX(67px); } .full-report-artifact-body { overflow: auto; color: var(--clr-var-text-80); width: 100%; } .full-report-artifact-body img { width: 100%; border-radius: 5px; } .full-report-section table { color: var(--clr-var-text-80); } .full-report-section table, .db-artifact-details-code-container table, .full-report-artifact-body table { border-spacing: 0px; font-size: var(--fs-code); transition: transform 0.2s ease; border: none; border-radius: 8px; overflow: hidden; } .db-artifact-details-code-container th, .db-artifact-details-code-container td { border: 1px solid var(--clr-var-dark-background) !important; } .full-report-section th, .full-report-section td, .db-artifact-details-code-container th, .db-artifact-details-code-container td, .full-report-artifact-body th, .full-report-artifact-body td { border: 1px solid var(--clr-var-light-background); padding: 5px; text-align: left; } .full-report-section th, .db-artifact-details-code-container th, .full-report-artifact-body th { background-color: var(--clr-var-dark-background); font-weight: var(--fw-semi); } .full-report-section td, .db-artifact-details-code-container td, .full-report-artifact-body td { background-color: var(--clr-var-primary-background); } .full-report-section tr:first-child th:first-child, .db-artifact-details-code-container tr:first-child th:first-child { border-top-left-radius: 8px; } .full-report-section tr:first-child th:last-child, .db-artifact-details-code-container tr:first-child th:last-child, .full-report-artifact-body tr:first-child th:last-child { border-top-right-radius: 8px; } .full-report-section tr:last-child td:first-child, .db-artifact-details-code-container tr:last-child td:first-child, .full-report-artifact-body tr:last-child td:first-child { border-bottom-left-radius: 8px; } .full-report-section tr:last-child td:last-child, .db-artifact-details-code-container tr:last-child td:last-child, .full-report-artifact-body tr:last-child td:last-child { border-bottom-right-radius: 8px; } .full-report-fullscreen-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; } .full-report-fullscreen-content { position: relative; max-width: 90%; max-height: 90%; } .full-report-fullscreen-image { max-width: 100%; max-height: 100%; object-fit: contain; } .full-report-close-button { position: absolute; top: -40px; right: 0px; background: none; border: none; cursor: pointer; padding: 5px; } .full-report-close-button img { width: 30px; height: 30px; } /* --------------- Full report - Thumbs down menu --------------- */ .fr-thumbs-down-modal { display: none; width: 100%; background-color: var(--clr-var-dark-background); margin: 0 0 10px 0; } .fr-thumbs-down-modal-content { padding: 1rem; width: calc(100% - 2rem); } .fr-thumbs-down-modal-header { display: flex; flex-direction: row; justify-content: space-between; } .fr-thumbs-down-modal-header img { width: 1rem; } .fr-thumbs-down-radio-group { margin: 20px 0; display: flex; flex-direction: row; flex-wrap: wrap; } .fr-thumbs-down-modal-buttons { display: flex; justify-content: flex-end; gap: 10px; } .fr-thumbs-down-modal h3 { font-size: var(--fs-p); font-weight: var(--fw-normal); } .tag-button { color: var(--clr-var-text); border-radius: 20px; margin: 4px; cursor: pointer; background-color: transparent; border: 2px solid var(--clr-var-text-40); color: var(--clr-var-text); width: fit-content; padding: 5px 10px; transition: all 0.2s ease; font-size: var(--fs-code); font-weight: var(--fs-p); } .tag-button:hover { background-color: var(--clr-var-text); color: var(--clr-var-highlight-text); } .tag-button input[type="radio"] { display: none; } .tag-button.selected { background-color: var(--clr-var-text); color: var(--clr-var-highlight-text); } .fr-thumbs-down-modal-textarea { margin: 8px; } .fr-thumbs-down-modal-textarea textarea { background-color: var(--clr-var-primary-background); border: 1px solid var(--clr-var-text-input-outline); border-radius: 8px; padding: 10px; margin: 20px; color: var(--clr-var-text-80); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; margin: 0px; width: calc(100% - 2rem); height: 2rem; resize: none; } .fr-thumbs-down-modal-textarea textarea { outline: none; text-decoration: none; } /* ------------------------------------------ DASHBOARDS --------------------------------------------------- */ /* --------------- db list --------------- */ .db-header { margin: 0px 0px 30px 0px; display: flex; flex-direction: row; row-gap: 10px; width: calc(100% - 2rem); max-width: 80rem; justify-content: space-between; } .db-list { width: calc(100% - 2rem); max-width: 80rem; display: flex; gap: 1.5rem; justify-items: center; justify-content: center; flex-direction: row; flex-wrap: wrap; } .db-tile-container { display: flex; flex-direction: column; align-items: center; width: 240px; height: 200px; padding: 10px; border: 1px solid var(--clr-var-text-input-outline); border-radius: 12px; color: var(--clr-var-text-80); row-gap: 10px; } .db-tile-db-preview { width: 240px; height: 120px; border-radius: 8px; background-color: var(--clr-var-dark-background); overflow: hidden; } .db-tile-db-preview img { width: 240px; height: auto; } .db-tile-db-preview.empty { background-color: var(--clr-var-dark-background); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 5px; } .db-tile-db-preview.empty img { width: 60px; height: auto; margin: 0 0 0 8px; } .db-tile-db-preview.empty span { color: var(--clr-var-text-80); font-size: var(--fs-mini); margin: 0 0 0 8px; } span.no-artifacts-message-header { /* font-size: var(--fs-p) !important; */ } .db-tile-title { display: flex; align-items: center; gap: 4px; justify-content: flex-start; width: 100%; } .db-tile-title .connection-logos { display: flex; align-items: center; } .db-tile-title .connection-logo { width: 1.2rem; height: 1.2rem; border: 1px solid var(--clr-var-pb-img-border); border-radius: 50%; margin-right: -6px; /* Overlap the logos slightly */ } .db-tile-title .connection-logo:last-child { margin-right: 4px; /* Add some space between the last logo and the title */ } .db-tile-title span { display: -webkit-box; -webkit-line-clamp: 1; /* Limit to 1 line */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; flex: 1; /* Take up available space */ text-align: left; } .db-tile-title img { width: 20px; height: 20px; } .db-created-by { color: var(--clr-var-text-40); font-size: var(--fs-mini); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; column-gap: 8px; } .db-created-by img { width: auto; height: var(--fs-code); } span.connection-tile-created-by-name, span.db-tile-created-by-name { color: var(--clr-var-text-80); } .db-metadata { display: flex; font-size: var(--fs-mini); color: var(--clr-var-text-40); flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; column-gap: 5px; } /* --------------- db details --------------- */ .dashboard-react-root { overflow: auto; } .dashboard-detail-loading-message { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; color: var(--clr-var-text-40); } .dashboard-detail-loading-message span { color: var(--clr-var-text-40); } .dashboard-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: auto; } .dashboard-center-container { width: 100%; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; row-gap: 2rem; } .dashboard-header-container { width: calc(100% - 2rem); max-width: 100rem; display: flex; flex-direction: row; align-items: flex-start; row-gap: 10px; justify-content: space-between; } .dashboard-header {} .dashboard-header-metadata { display: flex; flex-direction: row; align-items: center; column-gap: 8px; } .dashboard-header-metadata p { font-size: var(--fs-code); color: var(--clr-var-text-40); margin: 5px 0; } .dashboard-header-actions { display: flex; flex-direction: row; gap: 8px; margin: 5px 0 0 0; } span.highlight { color: var(--clr-var-text); } .dashboard-header-metadata img { width: var(--fs-mini); margin: 5px 0; } .dashboard-actions { position: relative; } .dashboard-actions.rbac-submenu-menu { display: flex; justify-content: flex-end; } .dashboard-actions img { height: 1.3rem; width: auto; } .dashboard-actions img { position: relative; } .dashboard-artifacts-container { /* display: flex; */ width: calc(100% - 2rem); } .dashboard-artifact { border: 1px solid var(--clr-var-prompt-button-outline); border-radius: 10px; background-color: var(--clr-var-primary-background); overflow: scroll; } .dashboard-artifact-header { display: flex; width: 100%; align-items: center; flex-direction: row; justify-content: space-between; } .dashboard-artifact-header .left { display: flex; flex-direction: row; align-items: center; column-gap: 8px; padding: 3px 10px; /* flex: 1; */ } .dashboard-artifact-header .left img { height: 1.2rem; margin: 2px 0px 0px 0px; border: 1px solid var(--clr-var-pb-img-border); border-radius: 50%; } .dashboard-artifact-header .right { display: flex; flex-direction: row; align-items: center; column-gap: 8px; padding: 3px 5px; justify-content: flex-end; position: relative; } h1.dashboard-artifact-title { color: var(--clr-var-text-80); font-size: var(--fs-mini); font-weight: var(--fw-normal); } .artifact-header h3 { margin: 0; } .artifact-frame { width: 100%; min-height: 100px; /* Minimum height while loading */ border: none; transition: height 1.2s ease; /* Smooth height transitions */ } .artifact-frame.dashboard-artifact-max-size { max-height: 700px; } .no-artifacts-message { grid-column: 1 / -1; text-align: center; padding: 40px; display: flex; flex-direction: column; align-items: center; } .db-artifact-details-modal { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; margin: 15px 0 0 0; } .db-artifact-details-group { display: flex; flex-direction: row; align-items: center; column-gap: 10px; } .db-artifact-details-group h3 { color: var(--clr-var-text-40); font-size: var(--fs-code); font-weight: var(--fw-normal); } .db-artifact-details-group span { font-size: var(--fs-code); } .db-artifact-connection-info { display: flex; flex-direction: row; align-items: center; column-gap: 5px; } .db-artifact-connection-info img { width: 1rem; } .db-artifact-connection-info span { color: var(--clr-var-text); font-size: var(--fs-code); font-weight: var(--fw-normal); } .db-artifact-details-code-and-nav-container { width: 100%; } .db-artifact-details-code-container { border: 2px solid var(--clr-var-pb-img-border); border-radius: 8px; width: 100%; background-color: var(--clr-var-dark-background); overflow: auto; max-height: 400px; } /* ------------------------------------------ db MODALs ----------------------- */ .modal-message { margin: 20px 0 0 0; } /* --------------- db share modal --------------- */ .db-sharing-modal-content {} .db-sharing-modal-content h1 {} .db-sharing-modal-content h2 { color: var(--clr-var-text); font-size: var(--fs-h2); } .db-sharing-modal-content h3 { color: var(--clr-var-text-80); } .db-sharing-modal-content p { margin: 0; } .db-sharing-modal-toggle-container { display: flex; align-items: center; height: 50px; /* gap: 8px; */ } .db-sharing-copy-link { margin: 20px 0; } .db-toggle-content-container { width: fit-content; display: flex; flex-direction: row; align-items: center; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 11px; position: relative; overflow: hidden; margin: 1rem 0; padding: 2px; background-color: var(--clr-var-secondary-background); } .db-toggle-content-button{ padding: 8px 0px; width: 110px; color: var(--clr-var-text-40); font-size: var(--fs-code); font-weight: var(--fw-normal); position: relative; z-index: 1; transition: color 0.3s ease; background: none; border: none; cursor: pointer; } .db-toggle-content-button.active { color: var(--clr-var-text); } .db-slider { /* z-index: -10; */ position: absolute; left: -1px; height: calc(100% - 1px); width: 110px; border: 2px solid var(--clr-var-prompt-button-outline); border-radius: 5px; background-color: var(--clr-var-primary-background); border-radius: 10px; transition: transform 0.2s ease; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .db-toggle-content-button:nth-child(2).active ~ .db-slider { transform: translateX(112px); } .db-sharing-modal-body { display: flex; flex-direction: column; gap: 0.8rem } .db-sharing-email-input-container { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .db-sharing-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .db-share-modal-input { background-color: var(--clr-var-primary-background); border: 1px solid transparent; border-radius: 8px; padding: 10px; font-size: var(--fs-p); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; color: var(--clr-var-text); margin: 0px; width: -webkit-fill-available; max-width: 360px; } .db-share-modal-input:empty:before { content: attr(data-placeholder); color: var(--clr-var-text-20); } .db-share-modal-input:focus { outline: none; text-decoration: none; } .db-sharing-view-only-form { display: flex; flex-direction: column; gap: 1rem } .db-sharing-viewers { display: flex; flex-direction: column; gap: 0.8rem; } .db-sharing-viewers-list { display: flex; flex-direction: column; gap: 0.8rem; max-height: 26rem; overflow: scroll; } .db-sharing-viewer-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.4rem; } .db-sharing-viewer-item.confirmation-message-showing { flex-direction: column; align-items: flex-start; } .db-sharing-viewer-info { display: flex; flex-direction: row; align-items: center; gap: 8px; } .db-sharing-viewer-avatar {} .db-sharing-viewer-avatar img { border-radius: 50%; width: 2.5rem; height: 2.5rem; } .db-sharing-viewer-blank-avatar { display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 50%; width: 2.5rem; height: 2.5rem; background-color: var(--clr-var-code-font); color: var(--clr-var-highlight-text); } .db-sharing-viewer-details { font-weight: var(--fw-p); } .db-sharing-viewer-meta { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: var(--fs-mini); } .db-sharing-confirmation { display: flex; flex-direction: column; margin: 10px 0; gap: 15px; width: 100%; } .db-sharing-confirmation-buttons { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } /* ------------------------------------------ RBAC styling used in api key list --------------------------------------------------- */ .rbac-admin-container { display: flex; flex-direction: column; align-items: center; overflow: auto; padding: 0 0 3rem 0; } .rbac-admin-header { display: flex; flex-direction: column; width: calc(100% - 2rem); max-width: 84rem; row-gap: 10px; } .rbac-admin-header.api-keys { border-bottom: 2px solid var(--clr-var-hr); border-radius: 2px; } .rbac-admin-nav { /* padding: 10px 0; */ border-bottom: 2px solid var(--clr-var-hr); border-radius: 2px; display: flex; flex-direction: row; gap: 30px; position: relative; } .rbac-admin-nav a { color: var(--clr-var-text-40); border-bottom: 2px solid transparent; border-radius: 2px; padding: 10px 5px; margin-bottom: -2px; /* This aligns the link border with the nav border */ position: relative; /* Needed for z-index to work */ z-index: 1; /* Place it above the nav border */ } .rbac-admin-nav a.active { color: var(--clr-var-text); border-bottom: 2px solid var(--clr-var-text); } .admin-content { display: flex; flex-direction: column; width: calc(100% - 2rem); max-width: 84rem; row-gap: 10px; } .search-container { display: flex; flex-direction: row; gap: 1rem; } .search-container input { background-color: var(--clr-var-dark-background); border: 1px solid var(--clr-var-text-input-outline); border-radius: 8px; color: var(--clr-var-text-80); font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; margin: 0px; width: -webkit-fill-available; overflow-y: auto; padding: 4px 8px; font-size: var(--fs-mini); } .search-container input:empty:before { content: attr(data-placeholder); color: var(--clr-var-text-20); } .search-container input:focus { outline: none; text-decoration: none; } .rbac-table-container { overflow: auto; } table.rbac-table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: auto; } .rbac-table thead { color: var(--clr-var-text-40); } .rbac-table th { padding: 10px 8px; text-align: left; font-weight: var(--fw-p); } .rbac-table tbody { color: var(--clr-var-text); } .rbac-table tr { border-bottom: 2px solid var(--clr-var-hr); } .rbac-table td { padding: 10px 8px; align-content: start; } /* .rbac-table td a { color: var(--clr-var-link); text-decoration: none; } */ .rbac-table td a:hover { color: var(--clr-var-text); } .rbac-table-row-name { max-width: 130px; word-wrap: break-word; } .rbac-data-source-badges { display: flex; /* flex-wrap: wrap; align-items: center; */ gap: 5px; align-items: flex-start; flex-direction: column; } .rbac-data-source-badge { display: flex; flex-direction: row; align-items: center; gap: 8px; background: var(--clr-var-light-background); /* border: 1px solid var(--clr-var-hr); */ border: 1px solid var(--clr-var-text-input-outline); padding: 5px; width: fit-content; border-radius: 5px; max-width: 450px; } .rbac-data-source-badge img { width: 20px; height: 20px; border: 1px solid var(--clr-var-text-input-outline); border-radius: 50%; } .rbac-description-max-width { max-width: 450px; } /* Styles for the table row menu */ .rbac-table-row-menu { border-radius: 4px; background: var(--clr-var-light-background); border-radius: 10px; box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3); min-width: 160px; } .rbac-table-row-menu ul { list-style: none; margin: 0; padding: 0; } .rbac-table-row-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; color: var(--clr-var-text-80); text-decoration: none; } .rbac-table-row-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; color: var(--clr-var-text-80); text-decoration: none; } a.rbac-table-row-menu-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; width: 160px; border-radius: 10px; } button.rbac-table-row-menu-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: var(--clr-var-text); padding: 12px 20px; width: 200px; border-radius: 10px; } .rbac-table-row-menu-item:hover { background-color: var(--clr-var-button-hover); } .rbac-table-row-menu-item img { width: 16px; height: 16px; margin-left: 8px; } /* ------------ RBAC details page ------------ */ .rbac-details-header { margin: 30px 0px; display: flex; flex-direction: row; row-gap: 10px; width: calc(100% - 2rem); max-width: 80rem; justify-content: space-between; align-items: center; } .add-connection-container.rbac-details { display: flex; flex-direction: column; row-gap: 1rem; width: calc(100% - 2.5rem); max-width: 80rem; /* to give some space at the bottom */ margin: 0 0 3rem 0; } .rbac-details-header-actions { display: flex; flex-direction: row; gap: 1rem; } .rbac-user-group-badges { display: flex; flex-wrap: wrap; gap: 5px; } .rbac-user-group-badge { background: var(--clr-var-dark-background); padding: 5px 8px; border-radius: 5px; } .rbac-user-group-badge.admin-badge { background: transparent; padding: 5px 8px; border-radius: 5px; } a.rbac-user-group-badge { transition: opacity 0.2s ease; text-decoration: none; color: inherit; display: inline-block; cursor: pointer; } a.rbac-user-group-badge:hover { filter: opacity(0.8); } .rbac-form-checkbox-container { align-content: start; } /* ------------ RBAC edit form page ------------ */ .rbac-edit-form-actions { display: flex; justify-content: flex-end; gap: 1rem; } .rbac-form-select-all-container { margin: 1rem 0 0 8px; } span.rbac-form-toggle-label { padding: 0 0 0 8px; } .rbac-form-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .collapse-toggle { background: none; border: none; cursor: pointer; padding: 4px 8px; display: flex; align-items: center; justify-content: center; color: var(--clr-var-link); font-size: var(--fs-code); font-weight: var(--fw-normal); } .collapse-toggle:hover { filter: opacity(0.8); } /* ------------------------------------------ RESPONSIVE Styling --------------------------------------------------- */ .mobile-hidden { display: none; } /* wherever dvh isn't supported */ @supports not (height: 100dvh) { .content { height: 100vh; } .side-nav { height: 100vh; } .login-relative-container { height: 100vh; } .onboarding-container { height: 100vh; } } /* wherever dvw isn't supported */ @supports not (width: 100dvw) { .modal { width: calc(100vw - 3rem); } .modal.small { width: calc(100vw - 3rem); } } /* for people who don't like animations */ @media(prefers-reduced-motion) { .hidden { transition: none; } } /* smallest phone */ @media (min-width: 370px) { /* ---------------------------- CONNECTION LIST ----------------------- */ .chevron-button { width: 140px; } .button { width: 140px; } } @media (min-width: 400px) { /* ---------------------------- Reports list ----------------------- */ .reports-header { flex-direction: row; column-gap: 20px; } /* ---------------------------- Full report ----------------------- */ .full-report-artifact-header { width: calc(100% - 20px); margin: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } } @media (min-width: 460px) { /* ---------------------------- General tool-tips ----------------------- */ .tool-tip::after { left: 170%; } /* ---------------------------- Connections list ----------------------- */ .connection-top-row.coming-soon { flex-direction: row; } /* ---------------------------- Account settings modal ----------------------- */ .confirmation-message-buttons { flex-direction: row; } } @media (min-width: 540px) { /* ---------------------------- Account settings modal ----------------------- */ .react-modal-as-element { flex-direction: row; } /* ---------------------------- Full report ----------------------- */ .full-report-close-button { right: -40px; } /* ---------------------------- Onboarding ----------------------- */ .connection-request-db-cta, .ob-request-db-cta { flex-direction: row; align-items: center; } } @media (min-width: 580px) { /* ---------------------------- DASHBOARDS PAGE ----------------------- */ .db-list { justify-content: flex-start; } /* ---------------------------- User settings modal ----------------------- */ .react-modal-content { flex-direction: row; } .react-modal-options { flex-direction: column; } .react-modal-section-header { width: 140px; } /* ---------------------------- EDIT CONNECTIONS - Ref Query header ----------------------- */ .query-description-container { flex-direction: row; justify-content: space-between; align-items: center; } } @media (min-width: 640px) { /* ---------------------------- DASHBOARDS PAGE ----------------------- */ /* db share modal */ .db-sharing-viewer-item { flex-direction: row; align-items: center; } .db-sharing-email-input-container { flex-direction: row; align-items: center; width: 100%; } } /* styles for tablet */ @media (min-width: 710px) { /* ---------------------------- CONNECTIONS PAGE ----------------------- */ .connection-list { justify-content: flex-start; } } /* styles for tablet */ @media (min-width: 768px) { :root { --fs-onboarding-header: 1.5rem; } /* ----------------------- Onboarding ------------------------ */ .onboarding-container { flex-direction: row; } .ob-privacy-message { display: block; } .ob-left-container.add-connection, .ob-left-container { background-color: var(--clr-var-dark-background); width: 30%; min-width: 250px; /* height: 100%; */ display: flex; flex-direction: column; justify-content: space-between; align-items: center; row-gap: 2rem; padding: 15% 0 0 0; } .ob-left-top { align-items: flex-start; row-gap: 3rem; padding: 1rem 0 2rem 2rem; } .ob-left-top.auto-width { padding: 0; } .ob-left-top h1 { font-size: var(--fs-onboarding-header); } .ob-left-top h3 { font-size: var(--fs-h1); } .ob-left-bottom { display: flex; justify-content: center; } .ob-privacy-message { /* width: 80%; */ margin: 0 0 1rem 0; } .ob-right-container { width: 70%; padding: 15dvh 0 0 0; } .ob-right-container.add-connection { width: -webkit-fill-available; padding: 4rem 0 0 0; max-width: none; } .ob-right-container.dataset-select-container { padding: 20dvh 0 0 0; } .create-report.onboarding { margin: 1rem 0rem; } /* ---------------------------- Connections ----------------------- */ .connection-list { padding: 0 0.5rem; } .scroll-container { margin: 0 -1rem; /* Negative margin to counteract padding */ padding: 0 1rem; /* Add padding to maintain spacing */ } /* .connection-category-items .connection-container { flex: 0 0 280px; min-width: 280px; } */ } /* styles for desktop */ @media (min-width: 991px) { :root { --fs-onboarding-header: 1.5rem; } /* ----------------------- Connections list ------------------------ */ .connection-buttons .right { display: flex; flex-direction: row; column-gap: 5px; } .connection-cs-subheader { display: flex; flex-direction: row; align-items: center; justify-content: space-between; max-width: 800px; } /* ---------------------------- ONBOARDING ----------------------- */ .ob-left-top.auto-width h1, .ob-left-top.auto-width h3 { padding: 0 2rem; } } /* styles for xl desktop */ @media (min-width: 1330px) {}