@edrlab/thorium-web 1.2.0 → 1.3.0

package/dist/components/Epub/index.css

@@ -71,7 +71,7 @@ input {
 .thorium_web_button_dockerButton svg,
 .thorium_web_button_closeButton svg,
 .thorium_web_button_backButton svg {
-  fill: var(--th-theme-text);
+  fill: currentColor;
   width: var(--th-icon-size, 24px);
   height: var(--th-icon-size, 24px);
 }
@@ -80,6 +80,7 @@ input {
 .thorium_web_button_closeButton[data-hovered],
 .thorium_web_button_backButton[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_button_icon[data-focus-visible],
 .thorium_web_button_dockerButton[data-focus-visible],
@@ -90,12 +91,6 @@ input {
 .thorium_web_button_backButton[data-disabled] {
   color: var(--th-theme-disable);
 }
-.thorium_web_button_icon[data-disabled] svg,
-.thorium_web_button_dockerButton[data-disabled] svg,
-.thorium_web_button_closeButton[data-disabled] svg,
-.thorium_web_button_backButton[data-disabled] svg {
-  fill: var(--th-theme-disable);
-}
 .thorium_web_button_tooltip {
   background-color: var(--th-theme-text);
   color: var(--th-theme-background);
@@ -162,6 +157,7 @@ input {
 }
 .thorium_web_overflow_menuItem[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_overflow_menuItem[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
@@ -216,6 +212,7 @@ input {
 }
 .thorium_web_jumpToPosition_button[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_jumpToPosition_input[data-focus-visible],
 .thorium_web_jumpToPosition_button[data-focus-visible] {
@@ -245,6 +242,32 @@ input {
   color: var(--th-theme-text);
   align-items: center;
 }
+.thorium_web_sheets_modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--th-layout-spacing);
+  background-color: var(--th-layout-defaults-scrim, rgba(0, 0, 0, 0.2));
+  pointer-events: none;
+}
+.thorium_web_sheets_modalDialog {
+  pointer-events: auto;
+  overflow-y: auto;
+  scroll-padding-top: calc(var(--th-sheet-sticky-header, 80px) + var(--th-layout-spacing));
+  scroll-padding-bottom: var(--th-layout-spacing);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--th-layout-constraints-modal, 600px);
+  max-height: 90dvh;
+  background-color: var(--th-theme-background);
+  color: var(--th-theme-text);
+  border-radius: var(--th-layout-radius);
+  border: 1px solid var(--th-theme-subdue);
+  filter: drop-shadow(var(--th-theme-elevate));
+}
 .thorium_web_sheets_popover {
   overflow-y: auto;
   scroll-padding-top: calc(var(--th-sheet-sticky-header, 80px) + var(--th-layout-spacing));
@@ -261,6 +284,22 @@ input {
   border: 1px solid var(--th-theme-subdue);
   filter: drop-shadow(var(--th-theme-elevate));
 }
+.thorium_web_sheets_compactPopover {
+  overflow-y: auto;
+  scroll-padding-top: var(--th-layout-spacing);
+  scroll-padding-bottom: var(--th-layout-spacing);
+  box-sizing: border-box;
+  width: calc(340px + (2 * var(--th-layout-spacing)));
+  max-width: var(--th-layout-constraints-popover, 500px);
+  max-height: 100%;
+  max-height: var(--visual-viewport-height, 100dvh);
+  padding: 0;
+  background-color: var(--th-theme-background);
+  color: var(--th-theme-text);
+  border-radius: var(--th-layout-radius);
+  border: 1px solid var(--th-theme-subdue);
+  filter: drop-shadow(var(--th-theme-elevate));
+}
 .thorium_web_sheets_draggable {
   box-sizing: border-box;
   max-width: var(--th-layout-constraints-bottomSheet, 600px);
@@ -386,6 +425,17 @@ input {
   margin: 0;
   padding: 0;
 }
+.thorium_web_sheets_compactHeader {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .thorium_web_sheets_body {
   padding: var(--th-layout-spacing);
 }
@@ -543,9 +593,11 @@ input {
 }
 .thorium_web_reader_settings_radio[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_reader_settings_radio[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
+  outline-offset: 2px;
 }
 .thorium_web_reader_settings_radio svg {
   width: var(--th-icon-size, 32px);
@@ -642,6 +694,50 @@ input {
 .thorium_web_reader_settings_sliderPlaceholder {
   color: var(--th-theme-subdue);
 }
+.thorium_web_reader_settings_sliderWithPresetsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--th-layout-spacing);
+}
+.thorium_web_reader_settings_sliderWithPresetsWrapper .thorium_web_reader_settings_sliderWrapper {
+  width: 100%;
+}
+.thorium_web_reader_settings_sliderWithPresetsWrapper .thorium_web_reader_settings_slider {
+  max-width: 100%;
+}
+.thorium_web_reader_settings_sliderWithPresetsRadioGroup {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
+  gap: calc(var(--th-layout-spacing) / 4);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.thorium_web_reader_settings_sliderWithPresetsRadio {
+  padding: calc(var(--th-layout-spacing) / 2);
+  border-radius: var(--th-layout-radius);
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  background: transparent;
+  color: var(--th-theme-text);
+}
+.thorium_web_reader_settings_sliderWithPresetsRadio[data-selected] {
+  border: 2px solid var(--th-theme-subdue);
+}
+.thorium_web_reader_settings_sliderWithPresetsRadio[data-hovered] {
+  background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
+}
+.thorium_web_reader_settings_sliderWithPresetsRadio[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+  outline-offset: 2px;
+}
+.thorium_web_reader_settings_sliderWithPresetsRadio[data-disabled] {
+  color: var(--th-theme-disable);
+  border-color: var(--th-theme-disable);
+}
 .thorium_web_reader_settings_sliderWithTicks .thorium_web_reader_settings_sliderTrack::before {
   background:
     linear-gradient(
@@ -724,10 +820,16 @@ input {
 }
 .thorium_web_reader_settings_dropdownListboxItem {
   padding: calc(var(--th-layout-spacing) / 4);
+  border-radius: var(--th-layout-radius);
+  outline: none;
 }
 .thorium_web_reader_settings_dropdownListboxItem[data-selected] {
   color: var(--th-theme-subdue);
 }
+.thorium_web_reader_settings_dropdownListboxItem[data-hovered] {
+  background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
+}
 .thorium_web_reader_settings_dropdownListboxItem[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
 }
@@ -879,6 +981,7 @@ input {
 }
 .thorium_web_toc_treeItem:hover {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_toc_treeItem[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
@@ -895,7 +998,7 @@ input {
   transition: rotate 200ms;
   width: 100%;
   height: 100%;
-  fill: var(--th-theme-text);
+  fill: currentColor;
 }
 .thorium_web_toc_treeItem[data-expanded] .thorium_web_toc_treeItemButton svg {
   rotate: 90deg;
@@ -906,6 +1009,261 @@ input {
   text-wrap: balance;
 }
 
+/* src/components/Audio/actions/Volume/assets/styles/thorium-web.volume.module.css */
+.thorium_web_volume_wrapper {
+  width: auto;
+}
+.thorium_web_volume_button {
+  --th-icon-size: calc(var(--audio-icon-base) * (5/4));
+  padding: calc(var(--th-icon-size) * (1/4));
+  outline: none;
+}
+.thorium_web_volume_button[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_volume_button[data-disabled] {
+  color: var(--th-theme-disable);
+}
+.thorium_web_volume_sliderTrack {
+  position: relative;
+  box-sizing: border-box;
+}
+.thorium_web_volume_sliderTrack::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background: var(--th-theme-subdue);
+}
+.thorium_web_volume_slider[data-disabled] .thorium_web_volume_sliderTrack::before {
+  background: var(--th-theme-disable);
+}
+.thorium_web_volume_slider[data-orientation=vertical] .thorium_web_volume_sliderTrack {
+  height: 150px;
+  width: 30px;
+  margin-block: calc(1.25rem / 2);
+}
+.thorium_web_volume_slider[data-orientation=vertical] .thorium_web_volume_sliderTrack::before {
+  width: 3px;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.thorium_web_volume_slider[data-orientation=vertical] .thorium_web_volume_sliderThumb {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.thorium_web_volume_slider[data-orientation=horizontal] {
+  max-width: 320px;
+  width: 100%;
+}
+.thorium_web_volume_slider[data-orientation=horizontal] .thorium_web_volume_sliderTrack {
+  width: 100%;
+  height: 30px;
+}
+.thorium_web_volume_slider[data-orientation=horizontal] .thorium_web_volume_sliderTrack::before {
+  height: 3px;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.thorium_web_volume_slider[data-orientation=horizontal] .thorium_web_volume_sliderThumb {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.thorium_web_volume_sliderThumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--th-theme-text);
+  border: 2px solid var(--th-theme-subdue);
+}
+.thorium_web_volume_slider[data-disabled] .thorium_web_volume_sliderThumb {
+  background: var(--th-theme-disable);
+  border: 2px solid var(--th-theme-disable);
+}
+.thorium_web_volume_sliderThumb[data-dragging] {
+  background: var(--th-theme-subdue);
+}
+.thorium_web_volume_sliderThumb[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+  border: 2px solid var(--th-theme-focus);
+}
+
+/* src/components/Audio/actions/PlaybackRate/assets/styles/thorium-web.playbackRate.module.css */
+.thorium_web_playbackRate_wrapper {
+  width: auto;
+}
+.thorium_web_playbackRate_button {
+  --th-icon-size: calc(var(--audio-icon-base) * (5/4));
+  padding: calc(var(--th-icon-size) * (1/4));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  outline: none;
+}
+.thorium_web_playbackRate_button[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_playbackRate_button[data-disabled] {
+  color: var(--th-theme-disable);
+}
+.thorium_web_playbackRate_button:has(.thorium_web_playbackRate_label) {
+  padding-bottom: calc(var(--th-icon-size) * (2/3));
+}
+.thorium_web_playbackRate_label {
+  position: absolute;
+  bottom: calc(var(--th-icon-size) * (1/4));
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  line-height: 1;
+  font-size: calc(var(--th-icon-size, 24px) * (5/12));
+  font-variant-numeric: tabular-nums;
+  font-weight: bold;
+}
+.thorium_web_playbackRate_slider {
+  min-width: 260px;
+}
+.thorium_web_playbackRate_numberfield {
+  min-width: 140px;
+  display: flex;
+  justify-content: center;
+}
+
+/* src/components/Audio/actions/Toc/assets/styles/thorium-web.audioToc.module.css */
+.thorium_web_audioToc_button {
+  --th-icon-size: calc(var(--audio-icon-base) * (5/4));
+  padding: calc(var(--th-icon-size) * (1/4));
+  outline: none;
+}
+.thorium_web_audioToc_button[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_audioToc_button[data-disabled] {
+  color: var(--th-theme-disable);
+}
+
+/* src/components/Audio/actions/SleepTimer/assets/styles/thorium-web.sleepTimer.module.css */
+.thorium_web_sleepTimer_wrapper {
+}
+.thorium_web_sleepTimer_button {
+  --th-icon-size: calc(var(--audio-icon-base) * (5/4));
+  padding: calc(var(--th-icon-size) * (1/4));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  outline: none;
+}
+.thorium_web_sleepTimer_button[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_sleepTimer_button[data-disabled] {
+  color: var(--th-theme-disable);
+}
+.thorium_web_sleepTimer_button:has(.thorium_web_sleepTimer_label) {
+  padding-bottom: calc(var(--th-icon-size) * (2/3));
+}
+.thorium_web_sleepTimer_label {
+  position: absolute;
+  bottom: calc(var(--th-icon-size) * (1/4));
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  line-height: 1;
+  font-size: calc(var(--th-icon-size, 24px) * (5/12));
+  font-variant-numeric: tabular-nums;
+  font-weight: bold;
+}
+.thorium_web_sleepTimer_listbox {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--th-layout-spacing) / 2);
+}
+.thorium_web_sleepTimer_listboxItem {
+  padding: calc(var(--th-layout-spacing) / 4);
+  border-radius: var(--th-layout-radius);
+  outline: none;
+  cursor: default;
+}
+.thorium_web_sleepTimer_listboxItem[data-selected] {
+  background-color: var(--th-theme-hover);
+  font-weight: bold;
+}
+.thorium_web_sleepTimer_listboxItem[data-hovered]:not([data-selected]) {
+  background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
+}
+.thorium_web_sleepTimer_listboxItem[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_sleepTimer_durationField {
+  display: flex;
+  flex-direction: column;
+}
+.thorium_web_sleepTimer_instruction {
+  display: block;
+  margin: 0 0 var(--th-layout-spacing) 0;
+}
+.thorium_web_sleepTimer_inputs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--th-layout-spacing) / 4);
+  margin-bottom: var(--th-layout-spacing);
+}
+.thorium_web_sleepTimer_fieldGroup {
+  display: contents;
+}
+.thorium_web_sleepTimer_fieldInput {
+  width: 4ch;
+  text-align: center;
+  background: transparent;
+  border: 2px solid var(--th-theme-subdue);
+  border-radius: var(--th-layout-radius);
+  padding: calc(var(--th-icon-size, 24px) * (1/4)) calc(var(--th-layout-spacing) / 2);
+  color: var(--th-theme-text);
+  font-variant-numeric: tabular-nums;
+  font-weight: bold;
+  outline: none;
+}
+.thorium_web_sleepTimer_fieldInput[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_sleepTimer_unitLabel {
+  margin-inline-end: calc(var(--th-layout-spacing) / 4);
+}
+.thorium_web_sleepTimer_remaining {
+  font-variant-numeric: tabular-nums;
+  font-weight: bold;
+  margin: 0 0 var(--th-layout-spacing) 0;
+}
+.thorium_web_sleepTimer_cancelButton {
+  margin-top: var(--th-layout-spacing);
+}
+.thorium_web_sleepTimer_startButton {
+  padding: calc(var(--th-icon-size, 24px) * (1/4)) calc(var(--th-icon-size, 24px) * (1/2));
+  border-radius: var(--th-layout-radius);
+  border: 2px solid var(--th-theme-subdue);
+  background: transparent;
+  color: var(--th-theme-text);
+  cursor: default;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+.thorium_web_sleepTimer_startButton[data-hovered] {
+  background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
+}
+.thorium_web_sleepTimer_startButton[data-focus-visible] {
+  outline: 2px solid var(--th-theme-focus);
+}
+.thorium_web_sleepTimer_startButton[data-disabled] {
+  color: var(--th-theme-disable);
+}
+
 /* src/components/assets/styles/thorium-web.reader.app.module.css */
 .thorium_web_reader_app_wrapper {
   height: 100%;
@@ -1196,6 +1554,10 @@ input {
 }
 .thorium_web_backlink_link[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
+}
+.thorium_web_backlink_link[data-hovered] svg {
+  fill: var(--th-theme-onHover);
 }
 .thorium_web_backlink_link[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
@@ -1252,6 +1614,7 @@ input {
 }
 .thorium_web_reader_pagination_listItem button[data-hovered] {
   background-color: var(--th-theme-hover);
+  color: var(--th-theme-onHover);
 }
 .thorium_web_reader_pagination_listItem button[data-focus-visible] {
   outline: 2px solid var(--th-theme-focus);
@@ -1271,7 +1634,7 @@ input {
   flex: none;
   width: var(--th-icon-size, 24px);
   height: var(--th-icon-size, 24px);
-  fill: var(--th-theme-text);
+  fill: currentColor;
 }
 
 /* src/components/assets/styles/thorium-web.reader.progression.module.css */