winters27_obsidian-byoc/styles.css

/* ═══════════════════════════════════════════════════════════════════════════
   BYOC — Bring Your Own Cloud
   Plugin Stylesheet — Frosted Glass / Acrylic Design Language
   Scoped to .byoc-settings to prevent bleed into other plugins or Obsidian core
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──── 1. Visibility toggles — functional only, no visual treatment ────────────────────── */

.settings-percentage-custom-hide,
.settings-encryption-method-hide,
.s3-hide, .dropbox-hide, .onedrive-hide, .onedrivefull-hide,
.webdav-hide, .webdis-hide, .googledrive-hide, .box-hide,
.pcloud-hide, .yandexdisk-hide, .koofr-hide, .azureblobstorage-hide,
.pro-hide,
.dropbox-auth-button-hide, .dropbox-revoke-auth-button-hide,
.onedrive-auth-button-hide, .onedrive-revoke-auth-button-hide,
.onedrivefull-auth-button-hide, .onedrivefull-revoke-auth-button-hide,
.onedrivefull-allow-to-use-hide,
.googledrive-auth-button-hide, .googledrive-revoke-auth-button-hide,
.googledrive-allow-to-use-hide,
.box-auth-button-hide, .box-revoke-auth-button-hide, .box-allow-to-use-hide,
.pcloud-auth-button-hide, .pcloud-revoke-auth-button-hide, .pcloud-allow-to-use-hide,
.yandexdisk-auth-button-hide, .yandexdisk-revoke-auth-button-hide, .yandexdisk-allow-to-use-hide,
.koofr-auth-button-hide, .koofr-revoke-auth-button-hide, .koofr-allow-to-use-hide,
.azureblobstorage-allow-to-use-hide,
.pro-auth-button-hide, .pro-revoke-auth-button-hide {
  display: none;
}


/* ──── 2. Settings panel root ──────────────────────────────────────────────────────────────────────────────────────────────────── */

.byoc-settings {
  overflow-wrap: break-word;
  --byoc-radius: 8px;
  --byoc-radius-sm: 5px;
  --byoc-transition: 160ms ease;
  --byoc-accent: var(--interactive-accent);
  --byoc-accent-hover: var(--interactive-accent-hover);
  --byoc-surface: rgba(var(--mono-100-rgb, 128, 128, 128), 0.05);
  --byoc-border: var(--background-modifier-border);
  --byoc-warn-bg: rgba(var(--color-yellow-rgb, 230, 175, 45), 0.1);
  --byoc-warn-border: rgba(var(--color-yellow-rgb, 230, 175, 45), 0.4);
  --byoc-warn-text: var(--text-warning, var(--text-muted));
}


/* ──── 3. Page heading ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

.byoc-settings > h1 {
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-normal);
  padding-bottom: 0.5em;
  margin-bottom: 0.25em;
  border-bottom: 2px solid var(--byoc-accent);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.byoc-settings > h1::before {
  content: "☁";
  font-size: 0.85em;
  opacity: 0.7;
}


/* ──── 4. Auth section card ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/*    .settings-auth-related wraps the Authorize / Revoke setting items      */

.byoc-settings .settings-auth-related {
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
  padding: 1.25rem 1.25rem 0.5rem;
  border-radius: calc(var(--byoc-radius) + 4px);
  border: 1px solid var(--byoc-border);
  background: var(--byoc-surface);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
}

/* Accent left strip */
.byoc-settings .settings-auth-related::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--byoc-accent);
  border-radius: var(--byoc-radius) 0 0 var(--byoc-radius);
  opacity: 0.8;
}


/* ──── 5. Disclaimer callout boxes ────────────────────────────────────────────────────────────────────────────────────── */
/*    Replaces the plain font-weight:bold with a proper callout treatment     */

.byoc-settings .s3-disclaimer,
.byoc-settings .dropbox-disclaimer,
.byoc-settings .onedrive-disclaimer,
.byoc-settings .onedrivefull-disclaimer,
.byoc-settings .webdav-disclaimer,
.byoc-settings .webdis-disclaimer,
.byoc-settings .googledrive-disclaimer,
.byoc-settings .box-disclaimer,
.byoc-settings .pcloud-disclaimer,
.byoc-settings .yandexdisk-disclaimer,
.byoc-settings .koofr-disclaimer,
.byoc-settings .azureblobstorage-disclaimer,
.byoc-settings .pro-disclaimer,
.byoc-settings .password-disclaimer,
.byoc-settings .password-second-confirm,
.byoc-settings .encryptionmethod-second-confirm {
  font-weight: 500;
  font-size: 0.82em;
  color: var(--byoc-warn-text);
  background: var(--byoc-warn-bg);
  border: 1px solid var(--byoc-warn-border);
  border-radius: var(--byoc-radius-sm);
  padding: 0.45em 0.65em 0.45em 2em;
  margin: 0.25em 0;
  line-height: 1.5;
  position: relative;
}

.byoc-settings .s3-disclaimer::before,
.byoc-settings .dropbox-disclaimer::before,
.byoc-settings .onedrive-disclaimer::before,
.byoc-settings .onedrivefull-disclaimer::before,
.byoc-settings .webdav-disclaimer::before,
.byoc-settings .webdis-disclaimer::before,
.byoc-settings .googledrive-disclaimer::before,
.byoc-settings .box-disclaimer::before,
.byoc-settings .pcloud-disclaimer::before,
.byoc-settings .yandexdisk-disclaimer::before,
.byoc-settings .koofr-disclaimer::before,
.byoc-settings .azureblobstorage-disclaimer::before,
.byoc-settings .pro-disclaimer::before,
.byoc-settings .password-disclaimer::before,
.byoc-settings .password-second-confirm::before,
.byoc-settings .encryptionmethod-second-confirm::before {
  content: "âš ";
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  opacity: 0.75;
}


/* ──── 6. Monospace textareas ──────────────────────────────────────────────────────────────────────────────────────────────── */

.webdav-customheaders-textarea,
.ignorepaths-textarea,
.onlyallowpaths-textarea {
  font-family: var(--font-monospace);
  font-size: 0.85em;
  border-radius: var(--byoc-radius-sm);
  background: var(--background-secondary);
  border-color: var(--byoc-border);
  transition: border-color var(--byoc-transition);
  resize: vertical;
  min-height: 5em;
}

.webdav-customheaders-textarea:focus,
.ignorepaths-textarea:focus,
.onlyallowpaths-textarea:focus {
  border-color: var(--byoc-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb, 100, 130, 255), 0.15);
}


/* ──── 7. QR code export ────────────────────────────────────────────────────────────────────────────────────────────────────────── */

.qrcode-img {
  width: 260px;
  height: 260px;
  border-radius: var(--byoc-radius);
  border: 1px solid var(--byoc-border);
  display: block;
  margin: 0.75em auto;
}


/* ──── 8. HTTP server warning (log to http) ──────────────────────────────────────────────────────────────────── */

.logtohttpserver-warning {
  color: var(--text-error);
  font-weight: 600;
  font-size: 0.82em;
  padding: 0.3em 0.5em;
  border-radius: var(--byoc-radius-sm);
  background: rgba(var(--color-red-rgb, 220, 60, 60), 0.08);
  border: 1px solid rgba(var(--color-red-rgb, 220, 60, 60), 0.25);
}


/* ──── 9. Grid control wrapping ──────────────────────────────────────────────────────────────────────────────────────────── */

.setting-need-wrapping .setting-item-control {
  display: grid;
}


/* ──── 10. Auth modal content ──────────────────────────────────────────────────────────────────────────────────────────────── */
/*     Targets the contentEl inside BYOC's auth modals                       */

.byoc-auth-modal .modal-title {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.byoc-auth-modal .modal-content {
  gap: 0.75em;
  display: flex;
  flex-direction: column;
}

/* Step description paragraphs inside auth modals */
.byoc-auth-modal p {
  font-size: 0.9em;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Auth link button inside modal */
.byoc-auth-modal a {
  display: block;
  text-align: center;
  margin-top: 0.25em;
  padding: 0.5em 0;
  color: var(--byoc-accent);
  font-weight: 500;
  text-underline-offset: 2px;
  transition: opacity var(--byoc-transition);
}

.byoc-auth-modal a:hover {
  opacity: 0.8;
}

/* ──── 12. Auth modal buttons ──── */
.byoc-auth-modal button {
  background-color: var(--byoc-accent);
  color: var(--text-on-accent, #ffffff);
  padding: 0.7em 1.2em;
  margin: 1em 0;
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  border-radius: var(--byoc-radius-sm);
  font-size: 0.85em;
  transition:
    background var(--byoc-transition),
    transform var(--byoc-transition);
}

.byoc-auth-modal button:active {
  transform: scale(0.98);
}

.byoc-settings .setting-item.setting-item-heading {
  border-top: none;
  border-bottom: 1px solid rgba(var(--mono-100-rgb, 128, 128, 128), 0.08);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

.byoc-settings .setting-item.setting-item-heading .setting-item-name.setting-item-name {
  font-weight: 600;
  color: var(--text-normal);
  font-size: 1.15em;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.byoc-settings .setting-item.setting-item-heading .setting-item-name svg {
  width: 1.55em;
  height: 1.55em;
  color: var(--byoc-accent);
  flex-shrink: 0;
  display: block;
}

/* ──── 13. Service Chooser Dropdown Card ──── */
.byoc-provider-chooser {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  background: rgba(var(--mono-100-rgb, 128, 128, 128), 0.08);
  border: 1px solid var(--byoc-border);
  border-radius: var(--byoc-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.byoc-provider-chooser .setting-item {
  border: none;
  background: transparent;
  padding: 0.5rem 0;
}

.byoc-provider-chooser .setting-item-name {
  font-weight: 600;
  color: var(--text-normal);
}

/* ──── 14. Active Provider Sub-header ──── */
h2.byoc-provider-heading.byoc-provider-heading {
  margin-top: 2rem;
  padding-bottom: 0.5em;
  font-size: 1.2em;
  color: var(--byoc-accent);
  border-bottom: 1px solid var(--byoc-border);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

h2.byoc-provider-heading svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ──── 15. General Section Headers ──── */
h2.byoc-section-heading.byoc-section-heading {
  margin-top: 2.5rem;
  padding-bottom: 0.5em;
  font-size: 1.15em;
  color: var(--text-normal);
  border-bottom: 1px solid var(--byoc-border);
  display: flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.9;
}
h2.byoc-section-heading::before {
  content: "♦";
  color: var(--text-muted);
  font-size: 0.7em;
  opacity: 0.6;
}

/* ──── 16. Setting Item Hover ──── */
.byoc-settings .setting-item {
  border-radius: var(--byoc-radius-sm);
  transition: background var(--byoc-transition);
}

.byoc-settings .setting-item:hover {
  background: rgba(var(--mono-100-rgb, 128, 128, 128), 0.04);
}


/* Added BYOC Intro Card */
.byoc-intro-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(100, 130, 255, 0.05);
  border-left: 3px solid var(--byoc-accent);
  padding: 1rem 1.2rem;
  border-radius: var(--byoc-radius-sm);
  margin-bottom: 2rem;
  color: var(--text-normal);
  font-size: 0.95em;
}

.byoc-intro-card > p {
  margin: 0;
  flex: 1;
}

.byoc-intro-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* ── Remote Folder Picker ───────────────────────────────────────────────────
   Post-OAuth modal for choosing the cloud-side base folder. Native iOS-list
   feel: grouped card, full-width tap rows, chevron affordance, separators.
   ─────────────────────────────────────────────────────────────────────────── */

.byoc-folder-picker .modal-content {
  padding: 1rem 1.25rem 1.25rem;
}

.byoc-folder-picker__desc {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.45;
}

.byoc-folder-picker__section-label {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.25rem;
}

.byoc-folder-picker__section-label:first-of-type {
  margin-top: 0;
}

/* Grouped card around list rows. Constrains height + scrolls itself so
   the create-new section below stays anchored even with many folders. */
.byoc-folder-picker__list {
  background: var(--background-secondary);
  border-radius: 12px;
  overflow-y: auto;
  border: 1px solid var(--background-modifier-border);
  max-height: 45vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Override card styling for state views (loading/empty/error) */
.byoc-folder-picker__list--state {
  background: transparent;
  border: 1px dashed var(--background-modifier-border);
}

/* Row: full-width tap target, icon + name + chevron */
.byoc-folder-picker__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--background-modifier-border);
  border-radius: 0;
  color: var(--text-normal);
  font-size: 0.95em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background 120ms ease;
  box-shadow: none;
}

.byoc-folder-picker__row:last-child {
  border-bottom: none;
}

.byoc-folder-picker__row:hover,
.byoc-folder-picker__row:active {
  background: var(--background-modifier-hover);
  box-shadow: none;
}

.byoc-folder-picker__row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-accent);
}

.byoc-folder-picker__row-icon svg {
  width: 22px;
  height: 22px;
}

.byoc-folder-picker__row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.byoc-folder-picker__row-chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  opacity: 0.55;
}

.byoc-folder-picker__row-chev svg {
  width: 16px;
  height: 16px;
}

/* Create-new section */
.byoc-folder-picker__create {
  background: var(--background-secondary);
  border-radius: 12px;
  border: 1px solid var(--background-modifier-border);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.byoc-folder-picker__input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95em;
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  box-sizing: border-box;
}

.byoc-folder-picker__create-btn {
  width: 100%;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95em;
  border-radius: 8px;
  cursor: pointer;
}

.byoc-folder-picker__create-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* State views */
.byoc-folder-picker__loading,
.byoc-folder-picker__empty,
.byoc-folder-picker__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.9em;
  gap: 0.5rem;
}

.byoc-folder-picker__loader {
  width: 22px;
  height: 22px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--text-accent);
  border-radius: 50%;
  animation: byoc-folder-spin 0.8s linear infinite;
}

.byoc-folder-picker__error-msg {
  margin: 0;
  color: var(--text-error);
}

.byoc-folder-picker__retry {
  min-height: 36px;
  padding: 0 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
}

@keyframes byoc-folder-spin {
  to { transform: rotate(360deg); }
}

/* Breadcrumb display for the current remote folder, shown as a Setting desc.
   Renders as `Provider › Segment › Leaf` with muted root + separators and
   accented leaf. Wraps cleanly when long. */
.byoc-folder-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  font-size: 0.92em;
  line-height: 1.4;
}

.byoc-folder-breadcrumb__root,
.byoc-folder-breadcrumb__sep {
  color: var(--text-muted);
}

.byoc-folder-breadcrumb__sep {
  opacity: 0.6;
}

.byoc-folder-breadcrumb__leaf {
  color: var(--text-normal);
  font-weight: 500;
}

/* The final leaf reads as the "current location" — slight accent to make
   it the visual focus of the row. */
.byoc-folder-breadcrumb__leaf:last-child {
  color: var(--text-accent);
}

/* Mobile-specific tightening */
@media (max-width: 600px) {
  .byoc-folder-picker .modal {
    width: calc(100vw - 1.5rem);
    max-width: 480px;
  }
  .byoc-folder-picker .modal-content {
    padding: 0.875rem 1rem 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .byoc-folder-picker__row {
    min-height: 52px;
  }
  /* Tighter list cap on phones so the create section is reachable
     above the on-screen keyboard. */
  .byoc-folder-picker__list {
    max-height: 38vh;
  }
}

.byoc-auth-modal .modal-title svg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 8px;
}

/* ── Interactive Status Bar ──────────────────────────── */
.byoc-status-bar {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.byoc-status-bar:hover {
  opacity: 0.7;
}

/* ── Mobile Sync Button ──────────────────────────────────────────────────────
   Lives in Obsidian's mobile bottom navbar (.mobile-navbar > .mobile-navbar-actions),
   inserted before the rightmost menu button. Inherits .mobile-navbar-action's
   sizing/colour from Obsidian's native CSS so it sits flush with the back,
   forward, quick-switcher, new-tab, tabs, and menu icons. We only add what
   the native class doesn't: the spinning state during sync.
   ─────────────────────────────────────────────────────────────────────────── */

.byoc-mobile-sync {
  display: flex;
  align-items: center;
  justify-content: center;
}

.byoc-mobile-sync svg {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

.byoc-mobile-sync--syncing {
  opacity: 0.5;
  pointer-events: none; /* hard-blocks re-tap; JS isSyncing guard is belt+suspenders */
}

.byoc-mobile-sync--syncing svg {
  animation: byoc-sync-spin 0.9s linear infinite;
}

@keyframes byoc-sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.byoc-svg-title-label {
  line-height: normal;
}

/* ── Authorized Provider Badges ──────────────────────────────────────────── */
.byoc-linked-providers-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 1rem 1rem;
  flex-wrap: wrap;
}

.byoc-linked-label {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.byoc-linked-badge {
  font-size: 0.75em;
  font-weight: 600;
  background: var(--background-modifier-form-field);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.byoc-linked-badge:hover {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
  color: var(--text-on-accent);
  transform: translateY(-1px);
}