/* ##############################################################
   #  This file is part of VDR Live and gives users the option
   #  to adapt the default CSS styles for matching their needs.
   #
   #  By default, this file does not affect the default settings.
   #  But even if you don't intent to apply changes, you must not
   #  delete this file.
   ##############################################################
*/


/* Uncomment to adjust the width of each column in multicolumn view. In case of
** many columns, min-width will be used in combination with vertical scrolling.
*/
/*
table.multischedule div.content1 {
  min-width: 15em;
  max-width: 30em;
}
*/


/* Uncomment the definition below to have all tables expanded to the full
** page width.
*/
/*
table {
  width: 100%;
}
*/


/* Customize the settings below to match the desired shadow for images
** enlarged upon mouse hovering. They have no effect unless one of the
** sections for enlarging images upon hovering are uncommented.
*/

/* EPG and recording images within details */

@property --epg-image-shadow-size {
  syntax: "<length>";
  initial-value: 4px;
  inherits: false;
}

@property --epg-image-shadow-blur {
  syntax: "<length>";
  initial-value: 4px;
  inherits: false;
}

@property --epg-image-shadow-color {
  syntax: "<color>";
  initial-value: gray;
  inherits: false;
}

/* recording thumbnail images */

@property --thumb-image-shadow-size {
  syntax: "<length>";
  initial-value: 3px;
  inherits: false;
}

@property --thumb-image-shadow-blur {
  syntax: "<length>";
  initial-value: 3px;
  inherits: false;
}

@property --thumb-image-shadow-color {
  syntax: "<color>";
  initial-value: gray;
  inherits: false;
}

/* channel logos */

@property --logo-shadow-size {
  syntax: "<length>";
  initial-value: 2px;
  inherits: false;
}

@property --logo-shadow-blur {
  syntax: "<length>";
  initial-value: 2px;
  inherits: false;
}

@property --logo-shadow-color {
  syntax: "<color>";
  initial-value: gray;
  inherits: false;
}

@property --logo-background-color {
  syntax: "<color>";
  initial-value: #e9efef;
  inherits: false;
}

/* common hover transition settings */

@property --hover-transition-time {
  syntax: "<time>";
  initial-value: 0.1s;
  inherits: false;
}

@property --hover-transition-function {
  syntax: "<custom-ident>";
  initial-value: ease-in-out;
  inherits: false;
}


/* Uncomment the definition below to enlarge EPG and recording images in
** detail windows upon hovering. Keeping the comment does not dynamically
** enlarge the images upon mouse-over.
**
** Note that enlarged images get clipped at the bottom of the detail window.
** To avoid such clipping, some spare margin must be added. This margin is
** the difference between the heights of scaled and unscaled images and
** includes some extra space for displaying an image shadow.
**
** @property --epg-image-width:
** The width for displaying EPG and recording images in the detail window,
** serving as reference for the scaling factor. As images can easily be
** enlarged, the width can be smaller than without this feature.
**
** @property --epg-image-ratio:
** The ratio of height to width for portrait images. The calculated height is
** used for providing extra space for not clipping an enlarged image. TvScraper
** posters usually have a ratio of 1.5 (a common portrait ratio).
**
** @property --epg-image-hover-scale:
** The scaling factor for enlarging images upon hovering with the mouse.
** A scaled image should not exceed a width or height of 480px, and it
** should neither exceed about 2/3 of the typically used viewport height.
**
** Default size upon hovering: 360px on long edge
*/
/*
@property --epg-image-width {
  syntax: "<length>";
  initial-value: 120px;
  inherits: false;
}

@property --epg-image-ratio {
  syntax: "<number>";
  initial-value: 1.5;
  inherits: false;
}

@property --epg-image-hover-scale {
  syntax: "<number>";
  initial-value: 3;
  inherits: false;
}

span.epg_images:has(> :first-child) {
  margin-bottom: calc(var(--epg-image-width) * var(--epg-image-ratio) * calc(var(--epg-image-hover-scale) - 1) + calc(var(--epg-image-shadow-size) + var(--epg-image-shadow-blur)) * var(--epg-image-hover-scale));
}

span.epg_images img.epg_image {
  transform-origin: top right;
}

span.epg_images img.epg_image:hover {
  transform: scale(var(--epg-image-hover-scale));
  box-shadow: calc(0px - var(--epg-image-shadow-size)) var(--epg-image-shadow-size) var(--epg-image-shadow-blur) var(--epg-image-shadow-color);
  transition: var(--hover-transition-time) var(--hover-transition-function);
}

span.epg_images img.epg_image:not(:hover) {
  transition: var(--hover-transition-time) var(--hover-transition-function);
}
*/


/* Uncomment the definitions below to enlarge EPG and recording thumbnail
** images in list view upon hovering. Keeping the comment does not dynamically
** enlarge the thumbnail images upon mouse-over.
**
** Note that enlarged thumbnail images get clipped at the bottom of the list.
** To avoid such clipping, some spare margin must be added. This margin is
** the difference between the heights of scaled and unscaled thumbnail images
** and includes some extra space for displaying an image shadow.
**
** @property --thumb-image-width:
** The maximum width for displaying EPG and recording thumbnail images in
** list view, serving as reference for the scaling factor. As images can
** easily be enlarged, the width can be smaller than without this feature.
**
** @property --thumb-image-ratio:
** The ratio of height to width for portrait images. The calculated height
** is used for providing extra space for not clipping an enlarged image.
** TvScraper posters usually have a ratio of 1.5 (a common portrait ratio).
**
** @property --thumb-image-hover-scale-landscape:
** The scaling factor for enlarging landscape thumbnail images upon hovering
** with the mouse. A scaled image should not exceed a width or height of 480px,
** and it should neither exceed about 2/3 of the typically used viewport height.
**
** @property --thumb-image-hover-scale-portrait:
** The scaling factor for enlarging portrait thumbnail images upon hovering
** with the mouse. As portrait thumbnail images are much smaller than landscape
** thumbnail images, a distinct scaling factor is needed. See the considerations
** the size of enlarge landscape thumbnail images.
**
** Default size upon hovering: 360px on long edge
*/
/*
@property --thumb-image-width {
  syntax: "<length>";
  initial-value: 80px;
  inherits: false;
}

@property --thumb-image-ratio {
  syntax: "<number>";
  initial-value: 1.5;
  inherits: false;
}

@property --thumb-image-hover-scale-landscape {
  syntax: "<number>";
  initial-value: 4.8;
  inherits: false;
}

@property --thumb-image-hover-scale-portrait {
  syntax: "<number>";
  initial-value: 8;
  inherits: false;
}

#form_recordings, table.listing.schedule {
  margin-bottom: calc(max(var(--thumb-image-height) * calc(var(--thumb-image-hover-scale-landscape) - 1) + calc(var(--thumb-image-shadow-size) + var(--thumb-image-shadow-blur)) * var(--thumb-image-hover-scale-landscape), var(--thumb-image-height) * calc(var(--thumb-image-hover-scale-portrait) - 1) + calc(var(--thumb-image-shadow-size) + var(--thumb-image-shadow-blur)) * var(--thumb-image-hover-scale-portrait)));
}

div.thumb {
  overflow: visible;
}

div.thumb img.thumb, div.thumb img.thumbpt {
  transform-origin: left top;
}

div.thumb img.thumb:hover {
  transform: scale(var(--thumb-image-hover-scale-landscape));
  box-shadow: var(--thumb-image-shadow-size) var(--thumb-image-shadow-size) var(--thumb-image-shadow-blur) var(--thumb-image-shadow-color);
  transition: var(--hover-transition-time) var(--hover-transition-function);
}

div.thumb img.thumbpt:hover {
  transform: scale(var(--thumb-image-hover-scale-portrait));
  box-shadow: var(--thumb-image-shadow-size) var(--thumb-image-shadow-size) var(--thumb-image-shadow-blur) var(--thumb-image-shadow-color);
  transition: var(--hover-transition-time) var(--hover-transition-function);
}

div.thumb img.thumb:not(:hover), div.thumb img.thumbpt:not(:hover) {
  transition: var(--hover-transition-time) var(--hover-transition-function);
}

@media (max-width: 600px) {

  div.thumb img.thumb:hover {
    transform: scale(calc(var(--thumb-image-hover-scale-landscape) / var(--thumb-image-enlargement-scale)));
  }

  div.thumb img.thumbpt:hover {
    transform: scale(calc(var(--thumb-image-hover-scale-portrait) / var(--thumb-image-enlargement-scale)));
  }

}
*/


/* Uncomment the definition below to have a light-gray background for channel
** logos, which will make white (parts of) channel logos visible. Keeping the
** comment displays the channel logo on the theme's default background.
*/
/*
img.channel_logo {
  background-color: var(--logo-background-color);
}
*/


/* Uncomment the definitions below to enlarge channel logos with a light-color
** background when hovering over a logo. Keeping the comment leaves the logo
** unchanged on hovering.
**
** The margin should be the difference between the heights of scaled and unscaled
** channel logos and include some extra space for displaying the box shadow.
*/
/*
@property --logo-hover-scale {
  syntax: "<number>";
  initial-value: 6.25;
  inherits: false;
}

table.listing:has(.channel_logo) {
  margin-bottom: calc(var(--logo-image-height) * calc(var(--logo-hover-scale) - 1) + calc(var(--logo-shadow-size) + var(--logo-shadow-blur)) * var(--logo-hover-scale));
}

img.channel_logo {
  transform-origin: top right;
}

img.channel_logo:hover {
  background-color: var(--logo-background-color);
  transform: scale(var(--logo-hover-scale));
  box-shadow: calc(0px - var(--logo-shadow-size)) var(--logo-shadow-size) var(--logo-shadow-blur) var(--logo-shadow-color);
  transition: var(--hover-transition-time) var(--hover-transition-function);
}

img.channel_logo:not(:hover) {
  transition: var(--hover-transition-time) var(--hover-transition-function);
}
*/


/* Uncomment this to have all whats-on and stream-in-browser action icons
** displayed on small viewspaces. Keeping the comment will hide the streaming
** action icons.
*/
/*
@media (max-width: 600px) {

  table.listing > tbody > tr > td.leftcol div.event_actions:has(.xs-visible-4),
  table.listing > tbody > tr > td.leftcol div.event_actions:has(.xs-columns-2) {
    width: calc(2 * var(--icon-width) + var(--icon-column-gap));
    max-height: calc(3 * var(--icon-height) + 2 * var(--icon-row-gap));
  }

  table.listing > tbody > tr > td.leftcol div.event_actions .hidden-xs.invisible {
    display: block;
  }

}
*/


/* Uncomment this to have all recording action icons displayed on small
** viewspaces. Keeping the comment will hide the streaming action icons.
*/
/*
@media (max-width: 600px) {

  tr.recording_item div.recording_actions,
  tr.recording_item div.recording_actions:has(.xs-visible-4),
  tr.recording_item div.recording_actions:has(.xs-columns-2) {
    width: calc(2 * var(--icon-width) + var(--icon-column-gap));
    max-height: calc(3 * var(--icon-height) + 2 * var(--icon-row-gap));
  }

  table.recordings > tbody > tr > td div.recording_actions .hidden-xs.invisible {
    display: block;
  }

}
*/


/* Uncomment this to have recording action icons right-aligned (ragged left)
** at the table border.
*/
/*
@media (max-width: 600px) {

  tr.recording_item div.recording_actions {
    flex-wrap: wrap-reverse;
  }

}
*/


/* Uncomment this to get (existing) recordings still being recorded without
** animation. Adjust the rule to get another color or animation sequence.
*/
/*
tr.existing_recording.still_recording, tr.existing_recording.still_recording a,
tr.existing_recording div.still_recording, tr.existing_recording div.still_recording a,
tr.recording_item.still_recording, tr.recording_item.still_recording a,
tr.recording_item div.recording_name.still_recording, tr.recording_item div.recording_name.still_recording a,
tr.recording_item div.recording_name_new.still_recording, tr.recording_item div.recording_name_new.still_recording a,
table.streaming tr.still_recording, table.streaming tr.still_recording a {
  color: var(--listing-color-highlight);
  animation: unset;
}
*/


/* Uncomment this to use other than the default fonts. Prepend the desired
** font to be commonly used to the font family in the 'body' tag. Copy this
** definition or enter similar ones for the other tags as appropriate.
*/
/*
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

table {
}

input, textarea, select {
}
*/


/* Uncomment this to use a sans-serif monospace font for the OSD instead of
** a variant of the harder-to-read monospace font "Courier".
*/
/*
.osd div {
  font-family: "Lucida Console", "DejaVu Sans Mono", "Noto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
}
*/
