@getalby/lightning-messageboard/dist/styles.d.ts

A web component for a lightning messageboard powered by NWC

export declare const styles = "\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  color: var(--lmb-text-color, #000);\n  --lmb-primary-color: #0066cc;\n  --lmb-background-color: #fff;\n  --lmb-border-color: #e0e0e0;\n  --lmb-hover-color: #f5f5f5;\n  --lmb-text-color: #000;\n  --lmb-text-muted-color: #6c757d;\n  --lmb-button-text-color: #fff;\n  --lmb-border-radius: 8px;\n}\n\n.card {\n  border: 1px solid var(--lmb-border-color);\n  border-radius: var(--lmb-border-radius);\n  overflow: hidden;\n  background-color: var(--lmb-background-color);\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n  display: flex;\n  flex-direction: column;\n  height: 512px;\n}\n\n.card-header {\n  padding: 1rem;\n  /*border-bottom: 1px solid var(--lmb-border-color);*/\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.card-title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.card-content {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden; /* Prevent overflow */\n}\n\n.card-footer {\n  padding: 0.75rem 1rem;\n  /*border-top: 1px solid var(--lmb-border-color);*/\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n}\n\n.button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  border-radius: var(--lmb-border-radius);\n  font-weight: 500;\n  transition: all 0.2s;\n  outline: none;\n  border: 1px solid transparent;\n}\n\n.button-primary {\n  background-color: var(--lmb-primary-color);\n  color: var(--lmb-button-text-color);\n}\n\n.button-primary:focus {\n  border-color: var(--lmb-border-color);\n}\n\n.button-primary:hover {\n}\n\n.button-secondary {\n  background-color: var(--lmb-border-color);\n  color: var(--lmb-text-color);\n}\n\n.button-secondary:focus {\n  border-color: var(--lmb-primary-color);\n}\n\n.input {\n  padding: 0.5rem;\n  font-size: 1rem;\n  border-radius: var(--lmb-border-radius);\n  border: 1px solid var(--lmb-border-color);\n  outline: none;\n  transition: border-color 0.15s;\n  width: 100%;\n  background-color: var(--lmb-background-color);\n  color: var(--lmb-text-color);\n}\n\n*::placeholder {\n  color: var(--lmb-border-color);\n}\n\n\n.input:focus {\n  border-color: var(--lmb-primary-color);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  background-color: var(--lmb-primary-color);\n  color: var(--lmb-button-text-color);\n}\n\n.separator {\n  height: 1px;\n  background-color: var(--lmb-border-color);\n  margin: 0.5rem 0;\n}\n\n.message-list-container {\n  position: relative;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0; /* Ensure it respects parent height constraints */\n}\n\n.message-list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow-y: auto;\n  gap: 0.5rem;\n  word-break: break-word; /* Break long words to prevent horizontal overflow */\n}\n\n.form {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 1rem;\n  flex-shrink: 0; /* Prevent form from shrinking when content grows */\n}\n\n.hidden {\n  display: none !important;\n}\n\n.dialog-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n}\n\n.dialog-backdrop:not(.hidden) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dialog {\n  background-color: var(--lmb-background-color);\n  border-radius: var(--lmb-border-radius);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  width: 90%;\n  max-width: 600px;\n  max-height: 90vh;\n  overflow-y: auto;\n  overflow-x: hidden; /* Prevent horizontal scrollbar */\n}\n\n.dialog-header {\n  padding: 1rem;\n  border-bottom: 1px solid var(--lmb-border-color);\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.dialog-description {\n  margin-top: 0.5rem;\n  color: var(--lmb-text-muted-color);\n}\n\n.dialog-content {\n  padding: 1rem;\n}\n\n/* Make sure form elements respect container width and have proper padding */\n#payment-form {\n  width: 100%;\n  box-sizing: border-box;\n  padding-right: 1rem; /* Add right padding to match the left padding */\n}\n\n.dialog-footer {\n  padding: 1rem;\n  border-top: 1px solid var(--lmb-border-color);\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.form-group {\n  margin-bottom: 1rem;\n}\n\n.label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n}\n\n.textarea {\n  padding: 0.5rem;\n  font-size: 1rem;\n  border-radius: var(--lmb-border-radius);\n  border: 1px solid var(--lmb-border-color);\n  outline: none;\n  transition: border-color 0.15s;\n  resize: vertical;\n  width: 100%;\n  min-height: 80px;\n  background-color: var(--lmb-background-color);\n  color: var(--lmb-text-color);\n}\n\n.textarea:focus {\n  border-color: var(--lmb-primary-color);\n}\n\n.loading-spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid var(--lmb-border-color);\n  border-radius: 50%;\n  border-top-color: var(--lmb-primary-color);\n  animation: spin 1s linear infinite;\n  margin-right: 0.5rem;\n}\n\n.centered-loading {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 40px;\n  height: 40px;\n  border-width: 3px;\n  margin: 0;\n  border-color: rgba(0, 0, 0, 0.1);\n  border-top-color: var(--lmb-primary-color);\n}\n\n.empty-message {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  width: 100%;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.grid {\n  display: grid;\n  gap: 1rem;\n}\n\n.text-sm {\n  font-size: 12px;\n}\n\n.text-muted {\n  color: var(--lmb-text-muted-color);\n}\n\n.break-word {\n  word-break: break-word;\n}\n\n.zap-icon {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  margin-right: 2px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.chevron-up-icon {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.toast {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  padding: 1rem;\n  background-color: var(--lmb-text-color);\n  color: var(--lmb-button-text-color);\n  border-radius: var(--lmb-border-radius);\n  z-index: 1100;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  max-width: 400px;\n  animation: fadeIn 0.3s ease;\n}\n\n.toast-title {\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.toast-error {\n  background-color: var(--lmb-toast-error-color);\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n";