/* ######################
   #  This file is part of vdr-live!
   #  It is here to give the users the possibility to change the
   #  default CSS style of vdr-live to their needs.
   #
   #  If you don't want to change default settings, make this file
   #  empty, but don't delete it.
   ######################
*/

/*
** 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.mschedule 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%;
}
*/


/* Uncomment the definition below to restrict the width of EPG and recording
** images to 120 pixels. Keeping the comment displays the images at their
** native sizes in the popup windows.
*/
/*
.info-win span.epg_images {
  max-width: 120px;
}
*/


/* Customize the settings below to match the local image dimensions and the
** desired box shadow. They have no effect unless one of the sections for
** enlarging images upon hovering are uncommented.
*/

/* EPG images within details */

@property --epg-image-hover-scale {
  syntax: "<percentage>";
  initial-value: 300%;
  inherits: false;
}

@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-hover-scale {
  syntax: "<percentage>";
  initial-value: 800%;
  inherits: false;
}

@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-hover-scale {
  syntax: "<percentage>";
  initial-value: 625%;
  inherits: false;
}

@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: #E9EFEFFF;
  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 upon
** hovering. Keeping the comment does not enlarge images in the popup windows
** upon hovering. Note that enlarged images remain clipped to the info window.
**
** The margin should be the difference between the heights of scaled and unscaled
** EPG images and include some extra space for displaying the box shadow.
*/
/*
span.epg_images:has(> *:nth-child(1)) {
  margin-bottom: 210px;
}

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

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 recording images in list view
** upon hovering. Keeping the comment does not enlarge images in the left
** column upon hovering.
**
** The margin should be the difference between the heights of scaled and unscaled
** thumb images and include some extra space for displaying the box shadow.
*/
/*
#form_recordings {
  margin-bottom: 250px
}

div.thumb {
  overflow: visible;
}

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

div.thumb img.thumbpt:hover {
  transform: scale(var(--thumb-image-hover-scale));
  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:not(:hover) {
  transition: var(--hover-transition-time) var(--hover-transition-function);
}
*/


/* 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.
*/
/*
table.listing:has(.channel_logo) {
  margin-bottom: 180px;
}

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

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 recording actions kept on a single row. Keeping
** the comment can cause wrapping the action buttons into multiple lines on
** small viewspaces.
*/
/*
.recording_item div.recording_actions {
  white-space: nowrap;
}
*/
