| 1 | html, |
| 2 | body, |
| 3 | #app, |
| 4 | #page-root { |
| 5 | padding: 0; |
| 6 | margin: 0; |
| 7 | width: 100%; |
| 8 | height: 100vh; |
| 9 | height: calc(var(--vh, 1vh) * 100); |
| 10 | overflow: hidden; |
| 11 | print-color-adjust: exact; |
| 12 | -webkit-print-color-adjust: exact; |
| 13 | --uno: font-sans bg-main; |
| 14 | } |
| 15 | |
| 16 | html { |
| 17 | background: transparent; |
| 18 | } |
| 19 | |
| 20 | .slidev-icon-btn { |
| 21 | aspect-ratio: 1; |
| 22 | user-select: none; |
| 23 | outline: none; |
| 24 | cursor: pointer; |
| 25 | @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1 relative; |
| 26 | @apply hover:(opacity-100 bg-gray-400 bg-opacity-10); |
| 27 | @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white); |
| 28 | @apply md:p-2; |
| 29 | } |
| 30 | |
| 31 | .slidev-icon-btn.shallow { |
| 32 | opacity: 0.3; |
| 33 | } |
| 34 | |
| 35 | .slidev-icon-btn.active { |
| 36 | opacity: 1; |
| 37 | } |
| 38 | |
| 39 | .slidev-icon-btn.disabled { |
| 40 | opacity: 0.25; |
| 41 | pointer-events: none; |
| 42 | } |
| 43 | |
| 44 | .slidev-layout a.slidev-icon-btn { |
| 45 | @apply border-none hover:border-none hover:text-white; |
| 46 | } |
| 47 | |
| 48 | .slidev-icon { |
| 49 | display: inline-block; |
| 50 | vertical-align: sub; |
| 51 | line-height: 1em; |
| 52 | } |
| 53 | |
| 54 | .slidev-page { |
| 55 | position: relative; |
| 56 | top: 0; |
| 57 | left: 0; |
| 58 | right: 0; |
| 59 | width: 100%; |
| 60 | } |
| 61 | |
| 62 | /* Note Clicks */ |
| 63 | |
| 64 | .slidev-note-with-clicks .slidev-note-fade { |
| 65 | color: #888888cc; |
| 66 | } |
| 67 | |
| 68 | .dark .slidev-note-with-clicks .slidev-note-fade { |
| 69 | color: #a1a1a1cc; |
| 70 | } |
| 71 | |
| 72 | .slidev-note-click-mark { |
| 73 | user-select: none; |
| 74 | font-size: 0.7em; |
| 75 | display: inline-flex; |
| 76 | --uno: text-violet bg-violet/10 px1 font-mono rounded items-center border border-transparent; |
| 77 | } |
| 78 | .slidev-note-click-mark.slidev-note-click-mark-active { |
| 79 | --uno: border border-violet; |
| 80 | } |
| 81 | .slidev-note-click-mark.slidev-note-click-mark-past { |
| 82 | filter: saturate(0); |
| 83 | opacity: 0.5; |
| 84 | } |
| 85 | .slidev-note-click-mark.slidev-note-click-mark-future { |
| 86 | opacity: 0.5; |
| 87 | } |
| 88 | |
| 89 | .slidev-note-click-mark::before { |
| 90 | content: ''; |
| 91 | display: inline-block; |
| 92 | --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M23 28a1 1 0 0 1-.71-.29l-6.13-6.14l-3.33 5a1 1 0 0 1-1 .44a1 1 0 0 1-.81-.7l-6-20A1 1 0 0 1 6.29 5l20 6a1 1 0 0 1 .7.81a1 1 0 0 1-.44 1l-5 3.33l6.14 6.13a1 1 0 0 1 0 1.42l-4 4A1 1 0 0 1 23 28m0-2.41L25.59 23l-7.16-7.15l5.25-3.5L7.49 7.49l4.86 16.19l3.5-5.25Z'/%3E%3C/svg%3E"); |
| 93 | -webkit-mask: var(--un-icon) no-repeat; |
| 94 | mask: var(--un-icon) no-repeat; |
| 95 | -webkit-mask-size: 100% 100%; |
| 96 | mask-size: 100% 100%; |
| 97 | background-color: currentColor; |
| 98 | color: inherit; |
| 99 | width: 1.2em; |
| 100 | height: 1.2em; |
| 101 | opacity: 0.8; |
| 102 | } |
| 103 | |
| 104 | .slidev-note-click-mark::after { |
| 105 | content: attr(data-clicks); |
| 106 | display: inline-block; |
| 107 | transform: translateY(0.1em); |
| 108 | } |
| 109 | |
| 110 | .slidev-form-button { |
| 111 | --uno: text-white px-4 py-1 rounded border-b-2; |
| 112 | --uno: 'bg-gray-500 border-gray-700'; |
| 113 | --uno: 'hover:(bg-gray-400 border-gray6)'; |
| 114 | } |
| 115 | .slidev-form-button.primary { |
| 116 | --uno: bg-teal-600 border-teal-800; |
| 117 | --uno: 'hover:(bg-teal-500 border-teal-700)'; |
| 118 | } |
| 119 | |
| 120 | /* Transform the position back for Rough Notation (v-mark) */ |
| 121 | .rough-annotation { |
| 122 | transform: scale(calc(1 / var(--slidev-slide-scale))); |
| 123 | } |
| 124 | |
| 125 | #twoslash-container { |
| 126 | position: fixed; |
| 127 | |
| 128 | .v-popper__wrapper:not(.no-slide-scale > *) { |
| 129 | zoom: var(--slidev-slide-scale); |
| 130 | } |
| 131 | |
| 132 | .v-popper__popper:not(.no-slide-scale > *) { |
| 133 | translate: calc(10px * (1 - var(--slidev-slide-scale))) 0; |
| 134 | width: max-content; |
| 135 | } |
| 136 | } |
| 137 | |
| 138 | .slidev-note ul { |
| 139 | margin: 0; |
| 140 | } |
| 141 |