styles.css - my_obsidian -

styles.css (6734B)
      1 /* Advanced PDF Export — plugin styles */
      2 
      3 .mpdf-modal {
      4   width: 96vw;
      5   max-width: 1800px;
      6   height: 90vh;
      7   max-height: 90vh;
      8   overflow: hidden;
      9 }
     10 
     11 .mpdf-modal .modal-content {
     12   padding: 0;
     13   height: 100%;
     14   overflow: hidden;
     15   display: flex;
     16   flex-direction: column;
     17 }
     18 
     19 /* Topbar */
     20 .mpdf-topbar {
     21   display: flex;
     22   align-items: flex-start;
     23   padding: 6px 12px;
     24   min-height: 44px;
     25   background: var(--background-secondary);
     26   border-bottom: 1px solid var(--background-modifier-border);
     27   flex-shrink: 0;
     28 }
     29 
     30 .mpdf-topbar-left {
     31   display: flex;
     32   align-items: center;
     33   gap: 8px;
     34   row-gap: 4px;
     35   flex: 1;
     36   min-width: 0;
     37   flex-wrap: wrap;
     38 }
     39 
     40 .mpdf-topbar-title {
     41   flex-shrink: 1;
     42   min-width: 40px;
     43   max-width: 220px;
     44   font-size: 12px;
     45   font-weight: 500;
     46   color: var(--text-normal);
     47   white-space: nowrap;
     48   overflow: hidden;
     49   text-overflow: ellipsis;
     50   padding: 0 6px;
     51   opacity: 0.85;
     52   border-left: 1px solid var(--background-modifier-border);
     53 }
     54 
     55 .mpdf-topbar-right {
     56   display: flex;
     57   align-items: center;
     58   gap: 8px;
     59   flex-shrink: 0;
     60 }
     61 
     62 .mpdf-ctrl {
     63   display: flex;
     64   align-items: center;
     65   gap: 5px;
     66   flex-shrink: 0;
     67 }
     68 
     69 .mpdf-ctrl-label {
     70   font-size: 11px;
     71   color: var(--text-muted);
     72   white-space: nowrap;
     73 }
     74 
     75 .mpdf-select {
     76   background: var(--background-primary);
     77   color: var(--text-normal);
     78   border: 1px solid var(--background-modifier-border);
     79   border-radius: 4px;
     80   font-size: 12px;
     81   padding: 3px 6px;
     82   cursor: pointer;
     83   outline: none;
     84 }
     85 
     86 .mpdf-select:hover {
     87   border-color: var(--interactive-accent);
     88 }
     89 
     90 .mpdf-btn {
     91   display: flex;
     92   align-items: center;
     93   gap: 4px;
     94   background: var(--background-primary);
     95   color: var(--text-normal);
     96   border: 1px solid var(--background-modifier-border);
     97   border-radius: 5px;
     98   font-size: 12px;
     99   padding: 4px 10px;
    100   cursor: pointer;
    101   flex-shrink: 0;
    102   transition: border-color 0.12s, color 0.12s, background-color 0.12s;
    103 }
    104 
    105 .mpdf-btn:hover {
    106   border-color: var(--interactive-accent);
    107   color: var(--interactive-accent);
    108 }
    109 
    110 .mpdf-btn-primary {
    111   background: var(--interactive-accent);
    112   color: var(--text-on-accent);
    113   border-color: transparent;
    114   font-weight: 500;
    115 }
    116 
    117 .mpdf-btn-primary:hover {
    118   background: var(--interactive-accent-hover);
    119   color: var(--text-on-accent);
    120 }
    121 
    122 .mpdf-btn-icon {
    123   padding: 4px 6px;
    124 }
    125 
    126 .mpdf-btn-icon svg {
    127   width: 16px;
    128   height: 16px;
    129 }
    130 
    131 .mpdf-btn:disabled,
    132 .mpdf-btn-primary:disabled {
    133   opacity: 0.55;
    134   cursor: not-allowed;
    135   pointer-events: none;
    136 }
    137 
    138 /* Export PDF split button: main action + dropdown arrow, one visual unit */
    139 .mpdf-split-btn {
    140   display: flex;
    141   align-items: center;
    142   flex-shrink: 0;
    143 }
    144 
    145 .mpdf-split-btn-main {
    146   border-radius: 5px 0 0 5px;
    147 }
    148 
    149 .mpdf-split-btn-arrow {
    150   border-radius: 0 5px 5px 0;
    151   padding: 4px 6px;
    152   border-left: 1px solid rgba(255, 255, 255, 0.25);
    153 }
    154 
    155 .mpdf-split-btn-arrow svg {
    156   width: 14px;
    157   height: 14px;
    158 }
    159 
    160 .mpdf-page-count {
    161   font-size: 11px;
    162   color: var(--text-muted);
    163   white-space: nowrap;
    164   flex-shrink: 0;
    165 }
    166 
    167 /* Main layout */
    168 .mpdf-main {
    169   display: flex;
    170   flex: 1;
    171   overflow: hidden;
    172 }
    173 
    174 .mpdf-editor-panel {
    175   display: flex;
    176   flex-direction: column;
    177   width: 42%;
    178   min-width: 200px;
    179   border-right: 1px solid var(--background-modifier-border);
    180   background: var(--background-primary);
    181   flex-shrink: 0;
    182 }
    183 
    184 .mpdf-editor {
    185   flex: 1;
    186   background: transparent;
    187   color: var(--text-normal);
    188   border: none;
    189   outline: none;
    190   resize: none;
    191   font-family: var(--font-monospace);
    192   font-size: 13px;
    193   line-height: 1.75;
    194   padding: 16px 18px;
    195   tab-size: 2;
    196 }
    197 
    198 .mpdf-editor::placeholder {
    199   color: var(--text-faint);
    200 }
    201 
    202 /* Keeps the loading overlay as a non-scrolling sibling of .mpdf-preview. */
    203 .mpdf-preview-container {
    204   flex: 1;
    205   position: relative;
    206   overflow: hidden;
    207   display: flex;
    208   flex-direction: column;
    209 }
    210 
    211 .mpdf-preview {
    212   flex: 1;
    213   background: var(--background-secondary-alt, #2a2a30);
    214   overflow-y: auto;
    215   display: flex;
    216   flex-direction: column;
    217   align-items: center;
    218   padding: 28px 20px 48px; /* extra bottom so last page label isn't clipped */
    219   gap: 24px;
    220 }
    221 
    222 .mpdf-loading-overlay {
    223   position: absolute;
    224   inset: 0;
    225   background: rgba(0, 0, 0, 0.38);
    226   backdrop-filter: blur(3px);
    227   -webkit-backdrop-filter: blur(3px);
    228   display: none;
    229   flex-direction: column;
    230   align-items: center;
    231   justify-content: center;
    232   gap: 14px;
    233   z-index: 20;
    234   pointer-events: none; /* let clicks through to cancel/settings while loading */
    235 }
    236 
    237 .mpdf-loading-overlay.mpdf-is-active {
    238   display: flex;
    239 }
    240 
    241 .mpdf-spinner {
    242   width: 34px;
    243   height: 34px;
    244   border: 3px solid rgba(255, 255, 255, 0.12);
    245   border-top-color: var(--interactive-accent);
    246   border-radius: 50%;
    247   flex-shrink: 0;
    248 }
    249 
    250 @media (prefers-reduced-motion: no-preference) {
    251   .mpdf-spinner {
    252     animation: mpdf-spin 0.65s linear infinite;
    253   }
    254 
    255   @keyframes mpdf-spin {
    256     to { transform: rotate(360deg); }
    257   }
    258 }
    259 
    260 .mpdf-loading-text {
    261   font-size: 12px;
    262   color: rgba(255, 255, 255, 0.65);
    263   font-family: var(--font-interface);
    264   letter-spacing: 0.02em;
    265 }
    266 
    267 /* width/height set inline to match the scaled page footprint */
    268 .mpdf-page-wrap {
    269   position: relative;
    270   flex-shrink: 0;
    271 }
    272 
    273 .mpdf-page-label {
    274   position: absolute;
    275   top: -18px;
    276   left: 0;
    277   font-size: 10px;
    278   color: rgba(255, 255, 255, 0.3);
    279   font-family: var(--font-monospace);
    280   white-space: nowrap;
    281 }
    282 
    283 /* Clips the shadow-host to the scaled footprint; width/height set inline. */
    284 .mpdf-page-scale {
    285   overflow: hidden;
    286   position: relative;
    287 }
    288 
    289 /* width/accent kept in CSS to avoid inline styles in JS */
    290 .mpdf-topbar .mpdf-zoom-slider {
    291   width: 64px;
    292   accent-color: var(--interactive-accent);
    293 }
    294 
    295 /* Number inputs for the custom page-size control in the topbar */
    296 .mpdf-custom-size-input {
    297   width: 52px;
    298   background: var(--background-primary);
    299   color: var(--text-normal);
    300   border: 1px solid var(--background-modifier-border);
    301   border-radius: 4px;
    302   font-size: 12px;
    303   padding: 3px 5px;
    304   outline: none;
    305   /* Suppress native spinners so the compact topbar stays tidy */
    306   -moz-appearance: textfield;
    307 }
    308 
    309 .mpdf-custom-size-input::-webkit-outer-spin-button,
    310 .mpdf-custom-size-input::-webkit-inner-spin-button {
    311   -webkit-appearance: none;
    312   margin: 0;
    313 }
    314 
    315 .mpdf-custom-size-input:hover,
    316 .mpdf-custom-size-input:focus {
    317   border-color: var(--interactive-accent);
    318 }
    319 
    320 /* Utility: toggle visibility without affecting layout flow.
    321    Doubled class selector bumps specificity above single-class rules
    322    (e.g. .mpdf-ctrl, Obsidian's own .setting-item) without needing !important. */
    323 .mpdf-is-hidden.mpdf-is-hidden {
    324   display: none;
    325 }
    326 
    327 /* Static positioning for the per-page shadow-DOM host; width/height/transform set inline */
    328 .mpdf-shadow-host {
    329   position: absolute;
    330   top: 0;
    331   left: 0;
    332   transform-origin: top left;
    333 }