mirror of
https://github.com/iv-org/invidious.git
synced 2025-10-25 10:18:29 -05:00
1932 lines
52 KiB
CSS
1932 lines
52 KiB
CSS
:root {
|
|
--acceptBgColor: linear-gradient(to left bottom, rgba(0,128,0,0.8), rgba(0,128,0,0.1));
|
|
--activeView: -10;
|
|
--adjust: 100%;
|
|
--alertBgColor: var(--lightRed);
|
|
--alertColor: var(--lightRed);
|
|
--alertRed: #cc0000;
|
|
--alertTop: 3em;
|
|
--AnswerBoxBg: var(--lightRed);
|
|
--animiImage: var(--imageVirus);
|
|
--animiStartPosX: 0;
|
|
--animiStartPosY: 0;
|
|
--animiStartPosZ: 0;
|
|
--animiStartPerspective: 150px;
|
|
--animiStopPosX: 0;
|
|
--animiStopPosY: 0;
|
|
--animiStopPosZ: 0;
|
|
--animiStopPerspective: 7000px;
|
|
--animiTransformStyle: preserve-3d;
|
|
--appearance: none;
|
|
--aspectRatio: 16 / 9;
|
|
--aspectRatioLT: 16 / 6.7467;
|
|
--aspectRatioCircle: 1 / 1;
|
|
--aspectRatioQuad: 1 / 1;
|
|
--autoHeight: auto;
|
|
--autoTop: auto;
|
|
--bgBlur: blur(2.5px);
|
|
--bgLight: rgba(238,238,238,0.75);
|
|
--bgGradientDark: linear-gradient(to bottom, rgba(16,96,0,0.8), rgba(16,96,0,0.7), rgba(16,96,0,0));
|
|
--bgGradientDiagDark: linear-gradient(to top right, rgba(16,96,0,0.8), rgba(16,96,0,0.7), rgba(16,96,0,0));
|
|
--bgGradientDiagLight: linear-gradient(to bottom left, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
|
|
--bgGradientDiagLightActive: linear-gradient(to top right, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
|
|
--bgGradientLight: linear-gradient(to right, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
|
|
--bgGradientLightActive: linear-gradient(to top, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
|
|
--bgModal: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.3), rgba(0,0,0,1) );
|
|
--bgPosFixed: fixed;
|
|
--bgTransparent: transparent;
|
|
--bgRepeate: no-repeat;
|
|
--bibleTextTransition: 0.75s;
|
|
--bibleTextDisplay: block;
|
|
--bibleTextHidden: none;
|
|
--bibleTextImageDisplay: inline-block;
|
|
--bibleImageShadow: 0.1em 0.1em 0.125em rgb(0 0 0 / 50%), 0 0 0.05em rgba(0, 0, 0, 0.25);
|
|
--blackColor: #000000;
|
|
--bookTextColor: #201000;
|
|
--bookBGColor: #ffeed8;
|
|
--blackGradient: radial-gradient(rgba(0,0,0,.3), rgba(0,0,0,1));
|
|
--blackTrans: rgba(0,0,0,0.8);
|
|
--blackTransLght: rgba(0,0,0,0.5);
|
|
--blockBgColor: linear-gradient(to bottom left, rgba(224,224,0,0.8), rgba(224,224,0,0.1));
|
|
--drkClouds: #03060b;
|
|
--drkCloudsTrand: rgba(3,6,11,0.15);
|
|
--drkCloudGrad: linear-gradient(to bottom, transparent, rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15) , transparent);
|
|
--blueGradient: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1));
|
|
--blueGradient2: radial-gradient(rgba(94,149,183,.3), rgba(94,149,183,1));
|
|
--blueGradient3: linear-gradient(0deg, transparent, transparent, transparent, rgba(47,121,160,1));
|
|
--blueTransparent: rgba(47, 121,160, 0.75);
|
|
--blueGradientRight: linear-gradient(to right, rgba(17,17,17,.9), var(--colorBlueMid));
|
|
--blueGradientTitle: linear-gradient(to right, rgba(17,17,17,.9), var(--colorBlueMid2));
|
|
--blueGradientLeft: linear-gradient(to left, var(--colorBlueTrans), var(--colorBlue));
|
|
--blueGradientPlayButton: radial-gradient(rgba(17,17,17,.9), var(--colorBlueMid));
|
|
--blueGradientPlaySelectButton: radial-gradient(var(--colorBlueMid), rgba(17,17,17,.9));
|
|
--blueGradientPauseButton: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1), rgba(47, 121,160,.3), rgba(47, 121,160,.3));
|
|
--blueGradientPauseSelectButton: radial-gradient(rgba(47, 121,160,1), rgba(47, 121,160,.3), rgba(47, 121,160,1), rgba(47, 121,160,1));
|
|
--blueScrollPic: rgba(94,149,183,.4);
|
|
--blueScrollPic2: rgba(94,149,183,.04);
|
|
--bookBGImage: linear-gradient(to right,rgba(135,100,0,1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,1));
|
|
--bookFont: var(--fontBook);
|
|
--borderDark: 1px solid #000000;
|
|
--borderColorDark: rgba(81,81,81,0.6);
|
|
--borderColorDark: var(--buttonBorderColorDark);
|
|
--borderColorLight: var(--colorLgtGrey);
|
|
--borderColorMiddle: rgba(128,128,128,0.6);
|
|
--borderColorMiddle: var(--buttonBorderColorMiddle);
|
|
--borderDark: 0.75px solid rgba(81,81,81,0.6);
|
|
--borderLght: 0.7vmin solid var(--colorLgtGrey);
|
|
--borderLghtSmall: 0.5vmin solid var(--colorLgtGrey);
|
|
--borderLoader: 2px solid rgb(32,128,0);
|
|
--borderLoader2: 7px solid #aaaaaa;
|
|
--borderLoaderRadius: 50%;
|
|
--borderLoaderTop: 7px solid rgb(32,128,0);
|
|
--borderMiddle: 0.75px solid rgba(128,128,128,0.6);
|
|
--borderNone: 1px solid #44cc00;
|
|
--borderRadius: 5px;
|
|
--borderRadiusNone: 0;
|
|
--borderRadiusNormal: 7px;
|
|
--borderRadiusSmall: 3px;
|
|
--borderRadiusTouch: 15px;
|
|
--borderSelect: 1px solid #cccccc;
|
|
--borderTerminal: 2px solid rgba(68,204,0,0.5);
|
|
--boxBg: rgba(128,128,128,0.6);
|
|
--boxBgDrk: rgba(48,48,48,0.85);
|
|
--boxBgDrkGreen: rgba(0,48,0,0.85);
|
|
--boxBgImage: linear-gradient(to bottom left, rgba(128,128,128,0.8), rgba(128,128,128,0.1));
|
|
--boxBgLgtDrk: rgba(81,81,81,0.6);
|
|
--boxBgLight: rgba(204,204,204,0.85);
|
|
--boxBgLightGreen: rgba(0,204,0,0.6);
|
|
--boxBgMidGreen: rgba(68,136,68,0.85);
|
|
--boxBGView: 49;
|
|
--boxHighLightBorder: rgba(0,224,0,0.9)!important;
|
|
--boxHighLightBorder: rgba(82,236,168,0.9)!important;
|
|
--boxHighLightShadow: inset 0 1px 3px rgb(0 0 0 / 10%), 0 0 8px rgb(0 224 0 / 60%);
|
|
--boxPadding: 1em 1.5em;
|
|
--boxShadow: 0.25em 0.25em 0.5em var(--blackTrans);
|
|
--boxShadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.7), 0 0 0.05em #000000;
|
|
--boxShadow2: -0.5em 0.95em 0.5em rgba(0, 0, 0, 0.6);
|
|
--boxSizeingNorm: content-box;
|
|
--boxSizeingBorder: border-box;
|
|
--boxView: 50;
|
|
--bsLogoHeight: 51;
|
|
--buttonBorderColorDark: rgba(81,81,81,0.6);
|
|
--buttonBorderColorMiddle: rgba(128,128,128,0.6);
|
|
--buttonBorderDark: 0.75px solid rgba(81,81,81,0.6);
|
|
--buttonBorderMiddle: 0.75px solid rgba(128,128,128,0.6);
|
|
--buttonBorderMiddle: 0.75px solid rgba(128,128,128,0.6);
|
|
--buttonBoxHeight: 2.1vw;
|
|
--buttonColorNorm: rgba(0,0,0,0.35);
|
|
--buttonColorSelect: rgba(224,0,0,0.75);
|
|
--buttonColorDark: var(--fontDark);
|
|
--buttonColorLight: var(--fontLight);
|
|
--buttonColorStd: rgba(000,113,000,0.75);
|
|
--buttonHeight: 16px;
|
|
--buttonFloat: right;
|
|
--buttonHeightTouch: 60px;
|
|
--buttonTop: -.05em;
|
|
--buttonRight: 0em;
|
|
--buttonPadding: 0 0em 0.25em 0.5em;
|
|
--buttonCursor: pointer;
|
|
--calcBGMinHeight: 75vh;
|
|
--calcBGMinWidth: 75vw;
|
|
--calcBGMaxHeight: 100vh;
|
|
--calcBGMaxWidth: 100vw;
|
|
--calcBGHeight: 100vh;
|
|
--calcBGWidth: 100vw;
|
|
--calcBG_Height: calc(var(--calcBGMaxHeight) * var(--setCalcFactor));
|
|
--calcBG_Width: calc(var(--calcBGMaxWidth) * var(--setCalcFactor));
|
|
--calcBGTop: 0px;
|
|
--calcBGLeft: 0px;
|
|
--calcHeaderMinHeight: calc( var(--fontSizeEm) * 4);
|
|
--calcHeaderMaxHeight: calc( var(--fontSizeEm) * 9.5);
|
|
--calcHeaderHeight: calc( var(--fontSizeEm) * 9.5);
|
|
--calcHeaderCollapseHeight: 0px;
|
|
--calcFooterHeight: 1.5em;
|
|
--calcFooterTop: calc(100vh - 1.5em);
|
|
--calcFooterBottom: 0em;
|
|
--calcMainTop: calc( var(--calcBGTop) + var(--calcHeaderHeight) );
|
|
--calcMainWidth: 100vw;
|
|
--calcMainHeight: auto;
|
|
--calcVisibelWindowHeight: calc( var(--calcBGHeight) - (var(--calcHeaderHeight) + var(--calcFooterHeight) ) );
|
|
--calcContentMinWidth: calc( var(--calcBGWidth) * 0.75);
|
|
--calcContentMinHeight: calc( var(--calcVisibelWindowHeight) * 0.75);
|
|
--calcContentMaxWidth: var(--calcBGWidth);
|
|
--calcContentMaxHeight: var(--calcVisibelWindowHeight);
|
|
--calcContentWidth: calc(var(--calcContentMaxWidth) * var(--setCalcFactor));
|
|
--calcContentHeight: calc(var(--calcContentMaxHeight) * var(--setCalcFactor));
|
|
--calcInfoHeight: var(--infoMaxHeight);
|
|
--calcInfoWidth: var(--infoMaxWidth);
|
|
--calcScrollScreenTop: 0px;
|
|
--calcScrollHeaderBottom: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
|
|
--calcScrollMainTop: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
|
|
--calcScrollMainBottom: calc( var(--calcScrollScreenTop) + var(--calcVisibelWindowHeight) );
|
|
--calcScrollVisibelWindowTop: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
|
|
--calcScrollVisibelWindowBottom: calc( var(--calcScrollScreenTop) + var(--calcVisibelWindowHeight) );
|
|
--calcSlideContainerMinWidth: calc( var(--calcBGWidth) * 0.75);
|
|
--calcSlideContainerMinHeight: calc( var(--calcBGWidth) * 0.5625 * 0.75);
|
|
--calcSlideContainerMaxWidth: var(--calcBGWidth);
|
|
--calcSlideContainerMaxHeight: calc( var(--calcBGWidth) * 0.5625);
|
|
--calcSlideContainerHeight: calc( var(--calcSlideContainerMaxHeight) * var(--setCalcFactor) );
|
|
--calcSlideContainerWidth: calc( var(--calcSlideContainerMaxWidth) * var(--setCalcFactor) );
|
|
--calcSlideMinWidth: calc( var(--calcBGWidth) * 0.75 - 1.4vmin);
|
|
--calcSlideMinHeight: calc( var(--calcBGWidth) * 0.5625 * 0.75 - 1.4vmin);
|
|
--calcSlideMaxWidth: calc( var(--calcBGWidth) - 1.4vmin);
|
|
--calcSlideMaxHeight: calc( var(--calcBGWidth) * 0.5625 - 1.4vmin);
|
|
--calcSlideHeight: calc( var(--calcSlideContainerMaxHeight) * var(--setCalcFactor) - 1.4vmin);
|
|
--calcSlideWidth: calc( var(--calcSlideContainerMaxWidth) * var(--setCalcFactor) - 1.4vmin);
|
|
--calcDotBottom: calc(var(--showPreview) * var(--calcSlideHeight) * 0 + var(--calcLogoHeight) );
|
|
--calcLogoBottom: calc(0px - 0.325vmin) !important;
|
|
--calcLogoleft: calc(var(--calcLogoWidth) * 0.5 - var(--calcLogoWidth) * .5 - 0.325vmin);
|
|
--calcLogoMinWidth: calc( var(--logoWidth) * 0.75);
|
|
--calcLogoMinHeight: calc( var(--logoHeight) * 0.75);
|
|
--calcLogoMaxWidth: var(--logoWidth);
|
|
--calcLogoMaxHeight: var(--logoHeight);
|
|
--calcLogoWidth: calc(var(--logoWidth) * var(--setCalcFactor));
|
|
--calcLogoHeight: calc(var(--logoHeight) * var(--setCalcFactor));
|
|
/* --calcTitleBottom: calc( var(--showPreview) * var(--calcSlideHeight) + var(--calcLogoHeight) + 0.7vmin); */
|
|
--calcTitleBottom: calc( var(--showPreview) * var(--calcSlideHeight) + var(--calcLogoHeight) * 1.25 + 0.7vmin);
|
|
--calcTitleMinWidth: calc( var(--titleWidth) * 0.75);
|
|
--calcTitleMinHeight: calc( var(--titleHeight) * 0.75);
|
|
--calcTitleMaxWidth: var(--titleWidth);
|
|
--calcTitleMaxHeight: var(--titleHeight);
|
|
/* --calcTitleWidth: calc(var(--titleWidth) * var(--setCalcFactor)); */
|
|
--calcTitleWidth: var(--calcSlideWidth);
|
|
--calcTitleHeight: calc(var(--titleHeight) * var(--setCalcFactor));
|
|
/* --calcPlayBottom: calc( var(--showPreview) * var(--calcSlideHeight)); */
|
|
--calcPlayBottom: calc(var(--showPreview) * var(--calcSlideHeight) + var(--calcSlideHeight) * .5 + 62px );
|
|
--setCalcMinFactor: 0.75;
|
|
--setCalcMaxFactor: 1;
|
|
--setCalcFactor: var(--setCalcMinFactor);
|
|
--setCalcPlayTop: 1.5;
|
|
--canLeft: 60%;
|
|
--canSize: 30em;
|
|
--centerMargin: auto;
|
|
--centerPos: 50%;
|
|
--colorBlueTrans: rgba(47, 121,160,.3);
|
|
--colorBlue: rgba(47, 121,160,1);
|
|
--colorBlueMid: rgba(94,149,183,0.8);
|
|
--colorBlueMid2: rgba(94,149,183,1);
|
|
--colorBlueDrk: rgba(7, 81,120,1);
|
|
--colorBlueLgth: rgba(107, 181,220,1);
|
|
--colorDrkGrey: rgba(17,17,17,0.75);
|
|
--colorDrkGreyTrans: rgba(17,17,17,0.25);
|
|
--colorLgtGrey: #dddddd;
|
|
--colorXLgtGrey: #eeeeee;
|
|
--configHeight: var(--menuHeight);
|
|
--configLableMax: var(--popupMaxWidth);
|
|
--configLableMin: var(--popupMinWidth);
|
|
--configMax: 40em;
|
|
--configMin: 6em;
|
|
--cursorHand: pointer;
|
|
--cursorWait: wait;
|
|
--containerBibleTextWidth: 80vw;
|
|
--default: 0em;
|
|
--defaultValue: unset;
|
|
--devColor: #ff0000;
|
|
--devColorTrans: rgba(255,0,0,0.25);
|
|
--devColor1: #880000;
|
|
--devColor1Trans: rgba(128,0,0,0.25);
|
|
--devColor2: #008800;
|
|
--devColor2Trans: rgba(0,128,0,0.25);
|
|
--devColor3: #00ff00;
|
|
--devColor3Trans: rgba(0,255,0,0.25);
|
|
--devColor4: #000088;
|
|
--devColor4Trans: rgba(0,0,128,0.25);
|
|
--devColor5: #0000ff;
|
|
--devColor5Trans: rgba(0,0,255,0.25);
|
|
--devColor6: #888800;
|
|
--devColor6Trans: rgba(128,128,0,0.25);
|
|
--devColor7: #ffff00;
|
|
--devColor7Trans: rgba(255,255,0,0.25);
|
|
--devColorBG: #AA00AA;
|
|
--devColorBGTrans: rgba(172,0,172,0.25);
|
|
--devColorOverL: #AAAAAA;
|
|
--devColorOverLTrans: rgba(172,172,172,0.25);
|
|
--displayNone: none;
|
|
--displayBlock: block;
|
|
--displayInlineBlock: inline-block;
|
|
--displayInline: inline;
|
|
--displayInlineFlex: inline-flex;
|
|
--displayBlock: block;
|
|
--displayFlex: flex;
|
|
--drk-bg: #000000;
|
|
--drkGreen: #004400;
|
|
--blueGradient: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1));
|
|
--blueGradient2: radial-gradient(rgba(94,149,183,.3), rgba(94,149,183,1));
|
|
--blueTransparent: rgba(47, 121,160, 0.75);
|
|
--dropBgColor: linear-gradient(to bottom left, rgba(224,0,0,0.8), rgba(224,0,0,0.1));
|
|
--dropShadow: var(--boxShadow);
|
|
--factorHDVideo: 56.25;
|
|
--factorHDVideoVW: var(--factorHDVideo) + 'vw';
|
|
--factorLetterBoxSmallVideo: 37.5;
|
|
--factorLetterBoxSmallVideoVW: var(--factorLetterBoxSmallVideo) + 'vw';
|
|
--factorLetterBoxVideo: 48.92;
|
|
--factorLetterBoxVideoVW: var(--factorLetterBoxVideo) + 'vw';
|
|
--fillHeadHeight: var(--lineBoxHeadHeight);
|
|
--flowLeft: left;
|
|
--flowRight: right;
|
|
--focusShadow: 0 0 0.15em var(--colorBlueMid);
|
|
--footerHeight: calc(var(--fontSizeEm) * 2);
|
|
--fontActiveShadow: var(--fontShadow);
|
|
--fontBigShadow: -0.25em 0.425em 0.25em rgba(0, 0, 0, 0.6);
|
|
--fontBold: bold;
|
|
--fontDark: #222222;
|
|
--fontLight: #cccccc;
|
|
--fontNormal: normal;
|
|
--fontSelectShadow: -0.125em 0.2125em 0.125em rgba(224, 224, 224, 0.6);
|
|
--fontShadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
|
|
--fontSize: 10pt;
|
|
--fontSizeEm: 10pt;
|
|
--fontSizeButton: var(--fontSizeSmall);
|
|
--fontSizeHead: var(--fontSizeNorm);
|
|
--fontSizeHead1: 1.85em;
|
|
--fontSizeHead2: 1.575em;
|
|
--fontSizeHead3: 1.3em;
|
|
--fontSizeHelp: var(--fontSizeXXSmall);
|
|
--fontSizeIfBox: var(--fontSizeXSmall);
|
|
--fontSizeIfBoxHead: var(--fontSizeSmall);
|
|
--fontSizeOverlay: 1.3em;
|
|
--fontSizeLabel: var(--fontSizeXSmall);
|
|
--fontSizeMenu: var(--fontSizeSmall);
|
|
--fontSizeMobile: 1.25em;
|
|
--fontSizeNorm: 1.1em;
|
|
--fontSizeSmall: 0.8em;
|
|
--fontSizeTable: var(--fontSizeXSmall);
|
|
--fontSizeXSmall: 0.7em;
|
|
--fontSizeXXSmall: 0.6em;
|
|
--fontWeight: 650;
|
|
--fontTerminal: var(--mainColor);
|
|
--fontXDrk: var(--drk-bg);
|
|
--fontXLight: var(--lightColor);
|
|
--fontBook: "Times New Roman", Times, serif;
|
|
--footerHeight: 1.5em;
|
|
--footerBGColor: linear-gradient(to left,rgba(17,17,17,.9), var(--colorBlueMid));
|
|
--forwardBgColor: linear-gradient(to left bottom, rgba(0,255,0,0.8), rgba(0,255,0,0.1));
|
|
--fwStateDynWidth: 260px;
|
|
--gray: #444444;
|
|
--halfTransparent: 0.8;
|
|
--headerBgColor: rgba(0,0,0,0.8);
|
|
--headerBGImage: var(--imageCMovie), var(--blueGradientRight);
|
|
--headerBGImageSmall: var(--blueGradientRight);
|
|
--headerBGSize: 10%, auto;
|
|
--headerBGSizeSmall: auto;
|
|
--headerBGPosX: 7%, 0px;
|
|
--headerBGPosXBig: 10%, 0px;
|
|
--headerBGPosY: 55%, 0px;
|
|
--headerBGPosXSmall: 0px;
|
|
--headerBGPosYSmall: 0px;
|
|
--headerBoxHeight: var(--lineBoxHeadHeight);
|
|
--headerBoxItem: var(--lineBoxHeadHeight);
|
|
--headerH1: "Willkommen bei C`Movie dem Hoffnungsportal";
|
|
--headerH1Small: "C`Movie das Hoffnungsportal";
|
|
--headerH1XSmall: "C`Movie gibt Hoffnung";
|
|
--headerH1XXSmall: "C`Movie\ngibt Hoffnung";
|
|
--headerH3: "Der Gegenpol zu Chaos und Panik seitens der Medien und Politik";
|
|
--headerH3Small: "Der Gegenpol zu Chaos und Panik";
|
|
--headerH3XSmall: "Stoppe Chaos und Panik";
|
|
--headerHeight: var(--lineHeadHeight);
|
|
--headerHeight: calc(var(--fontSizeEm) * 9.5);
|
|
--headerHeightLarge: calc(var(--fontSizeEm) * 9.5);
|
|
--headerHeightSmall: calc(var(--fontSizeEm) * 4.5);
|
|
--headerItem: var(--lineHeadHeight);
|
|
--headerAlign: center;
|
|
--headerTop: -1em;
|
|
--headerTopH3: -0.4em;
|
|
--headerLineHeight: 1.2;
|
|
--headFont: var(--mainFont);
|
|
--heightTerm: 31em;
|
|
--hidden: none;
|
|
--hoverView: 10;
|
|
--hyphens: auto;
|
|
--imageVirus: url('../virus.png');
|
|
--imageWar: url('../_500.jpg');
|
|
--imageWar: url('../_500.jpg');
|
|
--imageWar_o: url('../_500.jpg');
|
|
--imageWarMask2: url('../_500.png');
|
|
--imageWarMask: url('../_500.png');
|
|
--imageWarSky: url('../_500.png');
|
|
--imageForeMask: url('../_500.png');
|
|
--imageSky: url('../_500.jpg');
|
|
--imageSky: url('../_500.jpg');
|
|
--imageCoins: url('../Münzen.png');
|
|
--imagePlay: url('../_500.png');
|
|
--imagePause: url('../_500.png');
|
|
--imageCMovie: url('../CMovie.svg');
|
|
--imageCMovieLogo: url('../CMovie.svg');
|
|
--imageBibleServer: url('../_500.png');
|
|
--imageFlameMask: url('../_500.png');
|
|
--imageFlameMask: url('../_500.png');
|
|
--imageDustMask: url('../_500.png');
|
|
--imageDustMask: url('../_500.png');
|
|
--imageDustMask2: url('');
|
|
--imageDustMask2: url('');
|
|
--imageRubbleMask: url('');
|
|
--imageRubbleMask: url('');
|
|
--imageMiddleMask: url('');
|
|
--imageYTDefaultImg: 'maxresdefault.jpg';
|
|
--imageYouTube: url('');
|
|
--imageInstagram: url('');
|
|
--imagePinterest: url('');
|
|
--imageTor: url('');
|
|
--imageGit: url('');
|
|
--imageTumblr: url('');
|
|
--imageTwitter: url('');
|
|
--imageFacebook: url('');
|
|
--imageTikTok: url('');
|
|
--imageSnapchat: url('');
|
|
--imageRumble: url('');
|
|
--imageTelegram: url('');
|
|
--imageDLive: url('');
|
|
--imageOdysee: url('');
|
|
--imageTwitch: url('');
|
|
--imageVimeo: url('');
|
|
--imageFlickr: url('');
|
|
--imageInvidious: url('');
|
|
--inlineVisible: inline-block;
|
|
--inpBoxWidth: 210px;
|
|
--inpFill-bg: var(--lightGray);
|
|
--inpFocus-bg: #ffffcc;
|
|
--inpHeight: var(--mainTextHeight);
|
|
--inpMarginTop: 0.75em;
|
|
--inpPadding: 0.25em 0.5em;
|
|
--inpTxt: #0000aa;
|
|
--inputShadow: inset 1px 1px 3px rgba(0,0,0,0.4);
|
|
--infoBG: var(--bgLight);
|
|
--infoPosLeft: calc(50% - 225px);
|
|
--infoPosTop: 10em;
|
|
--infoMargin: auto;
|
|
--infoWidth: 90vw;
|
|
--infoMaxWidth: 450px;
|
|
--infoMaxHeight: 80vh;
|
|
--infoTextShadow: var(--textNoShadow);
|
|
--infoPadding: 0.5em 0.5em;
|
|
--infoFont: Arial, sans-serif;
|
|
--infoTextWidth: auto;
|
|
--infoImageHeight: 1em;
|
|
--infoFontButtonHeight: 1em;
|
|
--inpWidth: 92%;
|
|
--lastScrollY: 0;
|
|
--lastScrollX: 0;
|
|
--layer2View: 20;
|
|
--layer3View: 30;
|
|
--leftTerm: 16em;
|
|
--light-bg: #cccccc;
|
|
--lightColor: #ffffff;
|
|
--lightGray: #aaaaaa;
|
|
--lightgreen: rgb(32,128,0);
|
|
--lightRed: rgba(196,0,0,0.6);
|
|
--lightRed: rgba(224,0,0,0.75);
|
|
--lineBoxHeadHeight: 3.92vw;
|
|
--lineBoxHeight: 2.1vw;
|
|
--lineBoxInputHeight: var(--buttonBoxHeight);
|
|
--lineHeadHeight: 2.8em;
|
|
--lineHeight: 1.5em;
|
|
--lineInputHeight: var(--buttonHeight);
|
|
--loaderAnimation: spin 2s linear infinite;
|
|
--loaderPadding: 30px;
|
|
--loaderSize: 1.5em;
|
|
--loaderStartAnimation: rotate(0deg);
|
|
--loaderStopAnimation: rotate(360deg);
|
|
--logoWidth: 16.3vw;
|
|
--logoHeight: 8.645833vw;
|
|
--logoPosTop: calc(100vh - var(--logoHeight) - 16px) !important;
|
|
--logoPosBottom: calc(var(--calcLogoHeight) + 4em) !important;
|
|
--logoPosPortraiTop: calc(var(--factorHDVideoVW) - var(--logoHeight) - 16px) !important;
|
|
--logoPosLeft: 0em;
|
|
--logoBackShadow: unset;
|
|
--logoShadow: var(--boxShadow);
|
|
--logoPic: var(--imageCMovieLogo);
|
|
--logoSize: cover;
|
|
--logoRepeate: no-repeat;
|
|
--main-bg-color: var(--xDrkGreen);
|
|
--mainBoxTextHeight: 1.68vw;
|
|
--mainColor: #44cc00;
|
|
--mainFont: 'OCR A','OCR A Std','OCR-A','OCR-A Std', OCR, Monaco, 'Andale Mono', Terminal, FreeMono, monospace;
|
|
--mainHeight: 1em;
|
|
--mainMargin: 0;
|
|
--mainOverflow: hidden;
|
|
--mainPadding: 0;
|
|
--mainPadding: 1em;
|
|
--mainTextHeight: 1.2em;
|
|
--mainVisible: inline;
|
|
--mainZoom: 100%;
|
|
--maxHeight: 100%;
|
|
--maxWidth: var(--widthMax);
|
|
--maxTerm: 70%;
|
|
--menuActiveBg: var(--bgGradientLightActive);
|
|
--menuActiveBorder: 1px solid rgba(0, 0, 0,0.8);
|
|
--menuBg: var(--bgGradientLight);
|
|
--menuBorder: 1px solid rgba(0,0,0,0.8);
|
|
--menuBottom: -1.4em;
|
|
--menuBoxHeight: var(--buttonBoxHeight);
|
|
--menuBoxMaxWidth: 13.3vw;
|
|
--menuBoxMinWidth: 11.2vw;
|
|
--menuBtn: 43;
|
|
--menuHeight: var(--mainTextHeight);
|
|
--menuHoverBg: var(--bgGradientLight);
|
|
--menuHoverBorder: 1px solid rgba(196,196,196,0.8);
|
|
--menuMargin: 0 0.5em;
|
|
--menuMaxWidth: 9.5em;
|
|
--menuMinWidth: 8em;
|
|
--menuPadding: 0 0.5em;
|
|
--menuPadding2: 0.5em 1em;
|
|
--menuShadow: 0 0 0.15em rgb(224 224 224 / 50%), 0.25em 0.25em 0.35em rgb(0 0 0 / 50%);
|
|
--menuTop: 3.5em;
|
|
--menuTopTop: 0.25em;
|
|
--menuTopLow: 6.1em;
|
|
--menuTopWidth: max-content;
|
|
--menuView: 40;
|
|
--midGray: #888888;
|
|
--minTerm: 20%;
|
|
--modalView: 100;
|
|
--msgBoxMax: 80%;
|
|
--msgBoxMin: 15%;
|
|
--msgPadding: 1em;
|
|
--naviTop: calc(var(--calcHeaderHeight) + 2rem);
|
|
--noBorder: none;
|
|
--noneBorder: none;
|
|
--noShadow: none;
|
|
--noTransparent: 1;
|
|
--noMarginPadding: 0;
|
|
--opacity: 0.8;
|
|
--opacityFull: 1;
|
|
--opacityHalf: 0.6;
|
|
--opacityTranspartent: 0;
|
|
--overflowAuto: auto;
|
|
--overflowHidden: hidden;
|
|
--overflowNone: none;
|
|
--overflowCut: clip;
|
|
--overflowClip: clip;
|
|
--overflowOverlay: overlay;
|
|
--overflowScroll: scroll;
|
|
--overflowScrollTouch: touch;
|
|
--overflowVisible: visible;
|
|
--overlayDiverence: 0;
|
|
--overlayHeight: 0;
|
|
--overlayCalcHeight: 0;
|
|
--overlayCalcLayerHeight: 0;
|
|
--overlayTop: 0;
|
|
--overlayLayerTop: 0;
|
|
--overlayHeadTop: 0;
|
|
--overlayScreenTop: 0;
|
|
--overlayScreenBottom: 0;
|
|
--overlayBottom: 0;
|
|
--overlayHeadBottom: 0;
|
|
--overlayPos: 0;
|
|
--overlayPosTop: 0;
|
|
--overlayPosHalfTop: 0;
|
|
--overlayPosOverlayTop: 0;
|
|
--overlayPosScreenTop: 0;
|
|
--overlayPosBottom: 0;
|
|
--overlayPosHeadBottom: 0;
|
|
--overlayPosScreenBottom: 0;
|
|
--overlayPosHeadScreenBottom: 0;
|
|
--overlayPosOverlayBottom: 0;
|
|
--overlayPosHeadOverlayBottom: 0;
|
|
--overlayPosHeadTop: 0;
|
|
--overlayPosHeadHalfTop: 0;
|
|
--overlayPosHeadOverlayTop: 0;
|
|
--overlayPosHeadScreenTop: 0;
|
|
--overlayPositionScreenTop: 0;
|
|
--overlayPositionTop: 0;
|
|
--overlayPositionBottom: 0;
|
|
--overlayPositionScreenBottom: 0;
|
|
--overlayTransition: var(--transitionLong);
|
|
--overlayHeightPC: 684;
|
|
--overlay1HeightPC: calc(100vh - 1em);
|
|
--overlay2HeightPC: calc(100vh - 1em);
|
|
--overlay3HeightPC: calc(100vh - 1em);
|
|
--overlay4HeightPC: calc(100vh - 1em);
|
|
--overlay1TopPC: 40px;
|
|
--overlay2TopPC: 804px;
|
|
--overlay3TopPC: 1568px;
|
|
--overlay4TopPC: 2440px;
|
|
--overlayHeightPad: 684;
|
|
--overlay1HeightPad: 554;
|
|
--overlay2HeightPad: 697;
|
|
--overlay3HeightPad: 576;
|
|
--overlay4HeightPad: 697;
|
|
--overlayHeightWPad: 684;
|
|
--overlay1HeightWPad: 684;
|
|
--overlay2HeightWPad: 684;
|
|
--overlay3HeightWPad: 684;
|
|
--overlay4HeightWPad: 684;
|
|
--overlayHeightPhone: 684;
|
|
--overlay1HeightPhone: 280;
|
|
--overlay2HeightPhone: 1477;
|
|
--overlay3HeightPhone: 211;
|
|
--overlay4HeightPhone: 697px;
|
|
--overlayHeightWPhone: 684px;
|
|
--overlay1HeightWPhone: 684;
|
|
--overlay2HeightWPhone: 684;
|
|
--overlay3HeightWPhone: 684;
|
|
--overlay4HeightWPhone: 684;
|
|
--parentValue: inherit;
|
|
--popupActiveBg: var(--bgGradientLightActive);
|
|
--popupActiveBorder: var(--menuActiveBorder);
|
|
--popupActiveColorBg: var(--drk-bg);
|
|
--popupBg: var(--bgGradientDiagLight);
|
|
--popupBorder: var(--menuBorder);
|
|
--popupBorder2: 1px solid var(--xDrkGreen);
|
|
--popupBtn: 48;
|
|
--popupChildMargin: var(--mainMargin);
|
|
--popupChildMarginBottom: -1em;
|
|
--popupChildPadding: 0.5em 1em 0.5em 2em;
|
|
--popupHeight: 33.15em;
|
|
--popupHoverBg: var(--bgGradientLight);
|
|
--popupHoverBorder: var(--menuHoverBorder);
|
|
--popupHoverColorBg: var(--light-bg);
|
|
--popupItemBg: transparent;
|
|
--popupItemMargin: var(--mainMargin);
|
|
--popupItemPadding: var(--menuPadding);
|
|
--popupMarginRight: 2em;
|
|
--popupMarginTop: -0.5em;
|
|
--popupMaxWidth: 12em;
|
|
--popupMinWidth: 6em;
|
|
--popupPosleft: 1em;
|
|
--popupPosTop: 3em;
|
|
--popupView: 45;
|
|
--posBg: center 4.2em;
|
|
--posAbsolute: absolute;
|
|
--posRelative: relative;
|
|
--posFixed: fixed;
|
|
--posStatic: static;
|
|
--posSticky: sticky;
|
|
--posTitle: var(--mainTextHeight);
|
|
--progressbarBoxHeight: 2.1vw;
|
|
--progressbarHeight: 1.5em;
|
|
--repeateBg: no-repeat;
|
|
--ratioHDVideo: 16/9;
|
|
--ratioLetterBox: 16/6.7467;
|
|
--screenHeight: 100vh;
|
|
--screenWide: 100vw;
|
|
--screenWidth: 100vw;
|
|
--scrollTouch: touch;
|
|
--scrollPos: 0;
|
|
--scrollOpacity: var(--transparent);
|
|
--scrollFixOpacity: var(--noTransparent);
|
|
--scrollPicTransition: var(--transitionXLong);
|
|
--scrollPosFixTop: 0;
|
|
--scrollPosFixBottom: 100vh;
|
|
--scrollPic: 4;
|
|
--scrollPicImage1: var(--imageSky);
|
|
--scrollPicImage2: var(--animiImage);
|
|
--scrollPicImage3: linear-gradient(180deg,transparent, transparent, transparent, var(--warBlendYellow), var(--warBlendOrange) );
|
|
--scrollPicImage4: var(--imageWar);
|
|
--scrollPicImage4Flame: var(--imageFlame);
|
|
--scrollPicImage4Mask: var(--imageWarMask);
|
|
--scrollPicImage4Mask2: var(--imageWarSky);
|
|
--scrollPicImage4Mask3: var(--imageWarMask2);
|
|
--scrollPicImage4Foreground: var(--imageForeMask);
|
|
--scrollPic1activeTop: var(--scrollPic1TopPC);
|
|
--scrollPic2activeTop: var(--scrollPic2TopPC);
|
|
--scrollPic3activeTop: var(--scrollPic3TopPC);
|
|
--scrollPic4activeTop: var(--scrollPic4TopPC);
|
|
--scrollPic1TopPC: 0px;
|
|
--scrollPic2TopPC: 764;
|
|
--scrollPic3TopPC: 1528;
|
|
--scrollPic4TopPC: 2292;
|
|
--scrollPicHeightPC: 764;
|
|
--scrollPic1HeightPC: 764;
|
|
--scrollPic2HeightPC: 764;
|
|
--scrollPic3HeightPC: 764;
|
|
--scrollPic4HeightPC: 764;
|
|
--scrollPic1TopPad: 0;
|
|
--scrollPic2TopPad: 634;
|
|
--scrollPic3TopPad: 1411;
|
|
--scrollPic4TopPad: 2067;
|
|
--scrollPicHeightPad: 777;
|
|
--scrollPic1HeightPad: 634;
|
|
--scrollPic2HeightPad: 777;
|
|
--scrollPic3HeightPad: 656;
|
|
--scrollPic4HeightPad: 777;
|
|
--scrollPic1TopWPad: 0;
|
|
--scrollPic2TopWPad: 764;
|
|
--scrollPic3TopWPad: 1528;
|
|
--scrollPic4TopWPad: 2292;
|
|
--scrollPicHeightWPad: 764;
|
|
--scrollPic1HeightWPad: 764;
|
|
--scrollPic2HeightWPad: 764;
|
|
--scrollPic3HeightWPad: 764;
|
|
--scrollPic4HeightWPad: 764;
|
|
--scrollPic1TopPhone: 0;
|
|
--scrollPic2TopPhone: 320;
|
|
--scrollPic3TopPhone: 1877;
|
|
--scrollPic4TopPhone: 2088;
|
|
--scrollPicHeightPhone: 320;
|
|
--scrollPic1HeightPhone: 320;
|
|
--scrollPic2HeightPhone: 1557;
|
|
--scrollPic3HeightPhone: 211;
|
|
--scrollPic4HeightPhone: 777;
|
|
--scrollPic1TopWPhone: 0;
|
|
--scrollPic2TopWPhone: 764;
|
|
--scrollPic3TopWPhone: 1528;
|
|
--scrollPic4TopWPhone: 2292;
|
|
--scrollPicHeightWPhone: 764;
|
|
--scrollPicSize: cover;
|
|
--scrollPosScreenTop: var(--scrollPos);
|
|
--scrollPosHeader: calc(var(--scrollPos) + var(--headerHeight));
|
|
--scrollPosScreenBottom: calc(var(--scrollPos) + 100vh);
|
|
--scrollPosFooter: calc(var(--scrollPos) + (100vh - var(--footerHeight)));
|
|
--scrollPosHeaderBottom: calc(var(--scrollPosScreenTop) + var(--headerHeight));
|
|
--scrollPosFooterTop: calc(var(--scrollPosScreenTop) + var(--screenHeight) - var(--footerHeight));
|
|
--scrollPic1TopVisible: calc(var(--scrollPic1activeTop) - var(--scrollPosHeader));
|
|
--scrollPic2TopVisible: calc(var(--scrollPic2activeTop) - var(--scrollPosHeader));
|
|
--scrollPic3TopVisible: calc(var(--scrollPic3activeTop) - var(--scrollPosHeader));
|
|
--scrollPic4TopVisible: calc(var(--scrollPic4activeTop) - var(--scrollPosHeader));
|
|
--scrollSnapStop: always;
|
|
--scrollSnapXMan: x mandatory;
|
|
--scrollSnapYMan: y mandatory;
|
|
--scrollBehaviorSmooth: smooth;
|
|
--scrollSnapAlign: start;
|
|
--selectColor: rgba(0,0,0,0.4);
|
|
--show: visible;
|
|
--sizeBg: contain;
|
|
--slideTop: 10vh;
|
|
--startPos: 0px;
|
|
--stdTerm: 25%;
|
|
--tableColor: var(--lightgreen);
|
|
--tableEven: #000000;
|
|
--tableFont: Courier;
|
|
--tableMargin: 1em;
|
|
--tableMarginH4: 0.75em;
|
|
--tableOdd: #222222;
|
|
--tablePadding: 0.5em;
|
|
--tablePaddingH4: 1.5em;
|
|
--tableSelect: #44cc00;
|
|
--tableThTop: 4.1em;
|
|
--terminalFont: 'OCR A','OCR A Std','OCR-A','OCR-A Std', OCR, Monaco, 'Andale Mono', Terminal, FreeMono, monospace;
|
|
--terminalH4Top: -0.5em;
|
|
--terminalMarginLeft: 0.75em;
|
|
--terminalMax: 65%;
|
|
--terminalMin: 25%;
|
|
--terminalPaddingH4: 1.5em;
|
|
--terminalSelect: text;
|
|
--terminalThpadding: 0.5em;
|
|
--terminalTop: 4.1em;
|
|
--terminalTopCorrect: -0.5em;
|
|
--textCenter: center;
|
|
--textDecoration: underline;
|
|
--textDecoNo: none;
|
|
--textLeft: left;
|
|
--textRight: right;
|
|
--textShadow: var(--fontShadow);
|
|
--textNoShadow: none;
|
|
--textTop: top;
|
|
--thikBorder: 2px;
|
|
--titleHeight: 6.5104166vw;
|
|
--titleTop: calc(100vh - var(--titleHeight) - 1em);
|
|
--titleFontSize: 2vw;
|
|
--titleWidth: 75vw;
|
|
--titleWidth: 100vw;
|
|
--titleLeft: 17.5vw;
|
|
--titleLineHeight: 1;
|
|
--titleVAlign: middle;
|
|
--titleAlign: left;
|
|
--titlePadding: 1em 0.5em;
|
|
--topFix: sticky;
|
|
--topFixMoz: -moz-sticky;
|
|
--topFixWebkit: -webkit-sticky;
|
|
--topTerm: 10em;
|
|
--topLeft: 0px;
|
|
--touchAction: none;
|
|
--touchActionNone: none;
|
|
--touchActionX: pan-x;
|
|
--touchActionY: pan-y;
|
|
--touchActionMan: manipulation;
|
|
--transBgColor: linear-gradient(to left bottom, rgba(0,224,224,0.8), rgba(0,224,224,0.1));
|
|
--transDiagram: translate(-19%, -50%);
|
|
--transFX: display visibility width height 0.5s;
|
|
--translateCenter: translate(-50%, -50%);
|
|
--transState: translateY(-30%);
|
|
--transparent: 0.0;
|
|
--transitionXLong: 3s;
|
|
--transitionLong: 1.5s;
|
|
--transition: 1s;
|
|
--transitionFaster: 0.75s;
|
|
--transitionNone: 0.0s;
|
|
--transitionFast: 0.5s;
|
|
--transitionXFast: 0.25s;
|
|
--unshow: hidden;
|
|
--user-select: none;
|
|
--userSelect: none;
|
|
--userSelectYes: text;
|
|
--visible: block;
|
|
--whiteColor: #ffffff;
|
|
--whiteTrans: rgba(255,255,255,0.5);
|
|
--widthMax: 100%;
|
|
--xDrkGreen: #001000;
|
|
--xLightGreen: #00c100;
|
|
--YesNoActiveBg: linear-gradient(to top, rgba(128,128,128,1), rgba(128,128,128,0.1));
|
|
--YesNoActiveBorder: 1px solid rgba(128,128,128,1);
|
|
--YesNoBg: linear-gradient(to bottom, rgba(128,128,128,1), rgba(128,128,128,0.1));
|
|
--YesNoBorder: 1px solid #888888;
|
|
--YesNoHoverBg: linear-gradient(to top, rgba(128,128,128,1), rgba(128,128,128,0.1));
|
|
--YesNoHoverBorder: 1px solid rgba(255,255,255,1);
|
|
--YesNoPadding: 0.25em 1em 0.25em 1em;
|
|
--YesNoShadow: -0.25em 0.425em 0.25em rgba(0, 0, 0, 0.6);
|
|
--urlYTDirImg: 'https://i.ytimg.com/';
|
|
--urlYTDirJpg: 'vi/';
|
|
--urlYTDirJpg1: url("https://i.ytimg.com/vi/FdcLKygXYAw/maxresdefault.jpg");
|
|
--urlYTDirJpg2: url("https://i.ytimg.com/vi/1G0_A2xZd8g/maxresdefault.jpg");
|
|
--urlYTDirJpg3: url("https://i.ytimg.com/vi/sAx4rUsUAdg/maxresdefault.jpg");
|
|
--urlYTDirJpg4: url("https://i.ytimg.com/vi/CL-petFZkRk/maxresdefault.jpg");
|
|
--urlYTDirJpg5: url("https://i.ytimg.com/vi/F8NFr8wI3PM/maxresdefault.jpg");
|
|
--urlYTDirJpg6: url("https://i.ytimg.com/vi/7W4LyIoXc2U/maxresdefault.jpg");
|
|
--urlYTDirJpg7: url("https://i.ytimg.com/vi/42cSOnfDlCs/maxresdefault.jpg");
|
|
--urlYTDirJpg8: url("https://i.ytimg.com/vi/7gXw4HA7PMU/maxresdefault.jpg");
|
|
--urlYTDirJpg9: url("https://i.ytimg.com/vi/5S2R3efEG64/maxresdefault.jpg");
|
|
--urlYTDirJpg10: url("https://i.ytimg.com/vi/UfB4-SHtHr4/maxresdefault.jpg");
|
|
--YTImg: '/maxresdefault.jpg';
|
|
--videoYTId1: 'FdcLKygXYAw';
|
|
--videoYTId2: '1G0_A2xZd8g';
|
|
--videoYTId3: 'sAx4rUsUAdg';
|
|
--videoYTId4: 'CL-petFZkRk';
|
|
--videoYTId5: 'F8NFr8wI3PM';
|
|
--videoYTId6: '7W4LyIoXc2U';
|
|
--videoYTId7: '42cSOnfDlCs';
|
|
--videoYTId8: '7gXw4HA7PMU';
|
|
--videoYTId9: '5S2R3efEG64';
|
|
--videoYTId10: 'UfB4-SHtHr4';
|
|
--videoYTIdTitle1: 'Krisenvorsorge von <cite>Outdoor Chiemgau</cite>';
|
|
--videoYTIdTitle2: 'Trailer zur Serie <cite>The Chosen</cite> über Jesus Christus';
|
|
--videoYTIdTitle3: 'Meine eigenen Veröffentlichungen';
|
|
--videoYTIdTitle4: 'Videos und Predigten von <cite>Dr. Lothar Gassmann</cite>';
|
|
--videoYTIdTitle5: 'Empfenswerte Videos zum Thema <cite>IT-Sicherheit, Datenschutz usw.</cite>';
|
|
--videoYTIdTitle6: 'Die komplette erste Staffel der Serie <cite>The Chosen</cite>';
|
|
--videoYTIdTitle7: 'COVID-Impfstoffe unter dem Mikroskop von <cite>Jörg Rinne</cite>';
|
|
--videoYTIdTitle8: '<cite>ICF Zürich</cite> Gottesdienste(deutsch) mit Leo Bigger usw.';
|
|
--videoYTIdTitle9: '<cite>C\`Movie</cite> Lineares Programm über alle Kanäle';
|
|
--videoYTIdTitle10: '<cite>Victory Channel</cite> Christliche News und Predigten aus USA';
|
|
--videoYTTitle1: 'Krisenvorsorge von \"Outdoor Chiemgau\"';
|
|
--videoYTTitle2: 'Trailer zur Serie \"The Chosen\" über Jesus Christus';
|
|
--videoYTTitle3: 'Meine eigenen Veröffentlichungen';
|
|
--videoYTTitle4: 'Videos und Predigten von \"Dr. Lothar Gassmann\"';
|
|
--videoYTTitle5: 'Empfenswerte Videos zum Thema \"IT-Sicherheit, Datenschutz usw.\"';
|
|
--videoYTTitle6: 'Die komplette erste Staffel der Serie \"The Chosen\"';
|
|
--videoYTTitle7: 'COVID-Impfstoffe unter dem Mikroskop von \"Jörg Rinne\"';
|
|
--videoYTTitle8: '\"ICF Zürich\" Gottesdienste(deutsch) mit Leo Bigger usw.';
|
|
--videoYTTitle9: '\"C\`Movie\" Lineares Programm über alle Kanäle';
|
|
--videoYTTitle10: '\"Victory Channel\" Christliche News und Predigten aus USA';
|
|
--videoYTIdTitle_1: 'Krisenvorsorge von 'open-quote'Outdoor Chiemgau'close-quote;
|
|
--videoYTIdTitle_2: 'Trailer zur Serie 'open-quote'The Chosen'close-quote' \über Jesus Christus';
|
|
--videoYTIdTitle_3: 'Meine eigenen Ver\öffentlichungen';
|
|
--videoYTIdTitle_4: 'Videos und Predigten von 'open-quote'Dr. Lothar Gassmann'close-quote;
|
|
--videoYTIdTitle_5: 'Empfenswerte Videos zum Thema 'open-quote'IT-Sicherheit, Datenschutz usw.'close-quote;
|
|
--videoYTIdTitle_6: 'Die komplette erste Staffel der Serie 'open-quote'The Chosen'close-quote;
|
|
--videoYTIdTitle_7: 'COVID-Impfstoffe unter dem Mikroskop von 'open-quote'J\örg Rinne'close-quote;
|
|
--videoYTIdTitle_8: open-quote'ICF Z\ürich'close-quote' Gottesdienste(deutsch) mit Leo Bigger usw.';
|
|
--videoYTIdTitle_9: open-quote'C\`Movie'close-quote' Lineares Programm \über alle Kan\äle';
|
|
--videoYTIdTitle_10: open-quote'Victory Channel'close-quote' Christliche News und Predigten aus USA';
|
|
--warBGOpacity: 0.865;
|
|
--warFGOpacity: 1;
|
|
--warDustFixOpacity: 0.35;
|
|
--warDustOpacity: 0.865;
|
|
--warFlameOpacity: 0;
|
|
--warDustAnimiOpacity: 0.865;
|
|
--warFlameAnimiOpacity: 0.75;
|
|
--warRubbleOpacity: 1;
|
|
--warBGHoverOpacity: 0.535;
|
|
--warFGHoverOpacity: 0.65;
|
|
--warDustFixHoverOpacity: 0.35;
|
|
--warDustHoverOpacity: 0.865;
|
|
--warFlameHoverOpacity: 0.65;
|
|
--warDustAnimiHoverOpacity: 0.865;
|
|
--warFlameAnimiHoverOpacity: 0.15;
|
|
--warRubbleHoverOpacity: 0.65;
|
|
--warBlendBlue: #cfe5da;
|
|
--warBlendDrkBlue: #8c96a8;
|
|
--warBlendYellow: #cad2bc;
|
|
--warBlendOrange: #c5a47b;
|
|
--warBlendTransBlue: rgba(207,229,218,0.4);
|
|
--warBlendTransDrkBlue: rgba(140,150,168,0.4);
|
|
--warBlendTransYellow: rgba(202,210,188,0.9);
|
|
--warBlendTransOrange: rgba(197 164 123,0.9);
|
|
--zIndexFooter: 50;
|
|
--zIndexHeader: 50;
|
|
--zIndexInfo: 55;
|
|
--zIndexMain: 0;
|
|
--zIndexMenu: 50;
|
|
--posBannerTopAbs: calc(var(--posPlayerTopAbs) + var(--posPlayerHeight) - 7.5em);
|
|
--posBannerTopRel: calc(var(--posPlayerHeight) - 7.5em);
|
|
--posBannerHeight: calc(100vh - 140px);
|
|
--posBannerWidth: var(--posPlayerWidth);
|
|
--posBannerLeft: var(--posPlayerLeft);
|
|
--posPlayerTopAbs: 140px;
|
|
--posPlayerTopRel: 0px;
|
|
--posPlayerHeight: calc(100vh - 140px);
|
|
--posPlayerWidth: calc((100vh - 140px) * 1.78);
|
|
--posPlayerLeft: calc((100vh - 140px) * 0.5625 * 0.5);
|
|
--ticking: false;
|
|
--videoPlay: 0;
|
|
--runFade: 0;
|
|
--activeScroll: 0;
|
|
--indexPosition: 0;
|
|
--timer_on: 0;
|
|
--picDirection: 'up';
|
|
--swipeIn: true;
|
|
--swipePrev: 0;
|
|
--windowOrientation: '';
|
|
--videoHeigth: '1080px';
|
|
--videoWidth: '1920px';
|
|
--swipeIn: true;
|
|
--swipePrev: 0;
|
|
--showPreview: 1;
|
|
scrollbar-color: var(--colorBlueLgth) var(--colorDrkGrey);
|
|
}
|
|
/*
|
|
* Common attributes
|
|
*/
|
|
@font-face {
|
|
font-family: "ocr-a";
|
|
src: url("../fonts/OCR-A.ttf");
|
|
src: url("../fonts/OCR-A.woff") format("woff"),url("../fonts/OCR-A.ttf") format("tff");
|
|
font-weight: normal;
|
|
font-style: normal
|
|
}
|
|
|
|
::-moz-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
|
|
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
|
|
Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-image: linear-gradient(0deg, transparent, transparent, rgba(47,121,160,1), rgba(47,121,160,1)) !important;
|
|
background-color: #03060b;
|
|
color: #f0f0f0;
|
|
background-size: cover !important;
|
|
background-repeat: no-repeat !important;
|
|
background-attachment: fixed !important;
|
|
height: 100vh !important;
|
|
font-size: 10pt;
|
|
text-shadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
|
|
}
|
|
|
|
#contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
padding-top: 9em;
|
|
}
|
|
|
|
.h-box {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.v-box {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.deleted {
|
|
background-color: rgb(255, 0, 0, 0.5);
|
|
}
|
|
|
|
.underlined {
|
|
border-bottom: 1px solid;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.title {
|
|
margin: 0.5em 0 1em 0;
|
|
}
|
|
|
|
/* A flex container */
|
|
.flexible {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-left {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
width: 38vw;
|
|
}
|
|
|
|
.flex-right {
|
|
display: flex;
|
|
flex: 2 0 auto;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-end;
|
|
width: auto !important;
|
|
}
|
|
|
|
/*
|
|
* Channel page
|
|
*/
|
|
|
|
.channel-profile > * {
|
|
font-size: 1.17em;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.channel-profile > img {
|
|
width: 82px;
|
|
height: auto;
|
|
}
|
|
|
|
body a.channel-owner {
|
|
background-color: #008bec;
|
|
color: #fff;
|
|
border-radius: 9px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.creator-heart-container {
|
|
display: inline-block;
|
|
padding: 0px 7px 6px 0px;
|
|
margin: 0px -7px -4px 0px;
|
|
}
|
|
|
|
.creator-heart {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px none;
|
|
}
|
|
|
|
.creator-heart-background-hearted {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.creator-heart-small-hearted {
|
|
position: absolute;
|
|
right: -7px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.creator-heart-small-container {
|
|
display: block;
|
|
position: relative;
|
|
width: 13px;
|
|
height: 13px;
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
|
|
.feed-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feed-menu-item {
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.feed-menu-item {
|
|
flex: 0 0 40%;
|
|
}
|
|
}
|
|
|
|
div {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
#playlist {
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.playlist-restricted {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
#playlist ~ .h-box {
|
|
display: none !important;
|
|
height: 0px !important;
|
|
}
|
|
|
|
|
|
/*
|
|
* Buttons
|
|
*/
|
|
|
|
.pure-button, button {
|
|
color: #000000 !important;
|
|
text-decoration: none !important;
|
|
text-shadow: none;
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.6);
|
|
}
|
|
|
|
:is(.pure-button, button):is(:hover,:active,:focus) {
|
|
text-decoration: none !important;
|
|
text-shadow: none;
|
|
}
|
|
|
|
button.pure-button-primary,
|
|
body a.pure-button-primary,
|
|
.channel-owner:hover,
|
|
.channel-owner:focus {
|
|
background-color: #a0a0a0;
|
|
color: rgba(35, 35, 35, 1);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.pure-button-primary,
|
|
.pure-button-secondary {
|
|
border: 1px solid #a0a0a0;
|
|
border-radius: 3px;
|
|
margin: 0 .4em;
|
|
}
|
|
|
|
.pure-button-secondary.low-profile {
|
|
padding: 5px 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Has to be combined with flex-left/right */
|
|
.button-container {
|
|
flex-flow: wrap;
|
|
gap: 0.5em 0.75em;
|
|
}
|
|
|
|
|
|
/*
|
|
* Video thumbnails
|
|
*/
|
|
|
|
div.thumbnail {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img.thumbnail {
|
|
display: block;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
border-radius: 9px;
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
|
|
border: solid 0.75px rgba(32,32,32,0.5);
|
|
}
|
|
|
|
img.thumbnail:is(:hover, :active, :focus) {
|
|
border: solid 1.5px rgba(230,230,230,0.5) !important;
|
|
}
|
|
|
|
.thumbnail-placeholder {
|
|
min-height: 50px;
|
|
border: 2px dotted;
|
|
}
|
|
|
|
div.watched-overlay {
|
|
z-index: 50;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(255,255,255,.4);
|
|
}
|
|
|
|
div.watched-indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 4px;
|
|
width: 100%;
|
|
background-color: red;
|
|
}
|
|
|
|
div.thumbnail > .top-left-overlay,
|
|
div.thumbnail > .bottom-right-overlay {
|
|
z-index: 100;
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.top-left-overlay { top: 0.6em; left: 0.6em; }
|
|
.bottom-right-overlay { bottom: 0.6em; right: 0.6em; }
|
|
|
|
.length {
|
|
padding: 0.35em;
|
|
margin: -0.3em 0px;
|
|
color: #fff !important;
|
|
border-radius: 3px;
|
|
width: fit-content;
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
|
|
font-size: .8rem !important;
|
|
background-color: rgba(0,0,0,0.65) !important;
|
|
}
|
|
|
|
.length, .top-left-overlay button {
|
|
color: #eee;
|
|
background-color: rgba(35, 35, 35, 0.85) !important;
|
|
}
|
|
|
|
|
|
/*
|
|
* Navbar
|
|
*/
|
|
|
|
.navbar {
|
|
margin: 1em 0;
|
|
display: flex; /* this is also defined in framework, but in case of future changes */
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.navbar > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.searchbar {
|
|
flex-grow: 2; /* take double the space of the other items */
|
|
}
|
|
|
|
.navbar a {
|
|
padding: 0; /* this way it will stay aligned with content under */
|
|
}
|
|
|
|
.navbar .index-link {
|
|
font-weight: bold;
|
|
display: inline;
|
|
color: transparent !important;
|
|
text-shadow: none;
|
|
}
|
|
|
|
|
|
a.feed-menu-item.pure-menu-heading {
|
|
display: none !important;
|
|
}
|
|
/*
|
|
a.index-link.pure-menu-heading::before {
|
|
background-size: cover;
|
|
position: relative;
|
|
content: '';
|
|
top: 10px;
|
|
left: 2em;
|
|
width: 100px;
|
|
background-image: url(../CMovie.svg);
|
|
background-repeat: no-repeat;
|
|
height: 2rem !important;
|
|
display: inline-block !important;
|
|
}*/
|
|
|
|
.searchbar .pure-form fieldset { padding: 0; }
|
|
|
|
.searchbar input[type="search"] {
|
|
width: 100%;
|
|
margin: 1px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.searchbar input[type="search"]:focus {
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="search"]::placeholder{
|
|
color: #ffffff;
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
|
|
background-size: 14px;
|
|
}
|
|
|
|
.user-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-field div {
|
|
width: auto;
|
|
}
|
|
|
|
.user-field div:not(:last-child) {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
/*header#headerHidden::after {
|
|
content: '';
|
|
display: block;
|
|
top: 2em;
|
|
left: calc(50% - 16.3vw * 0.75);
|
|
width: calc(16.3vw * 1.5);
|
|
height: calc(8.645833vw * 1.5);
|
|
position: relative;
|
|
background-image: url(../CMovie.svg), url(../Wasser.png);
|
|
background-repeat: no-repeat;
|
|
border-radius: 13px;
|
|
background-position-y: calc(8.645833vw * 1.5 * 0.22), 0;
|
|
border: solid 3px rgba(230,230,230,1);
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
|
|
}
|
|
*/
|
|
|
|
.pure-g.navbar.h-box ~ .h-box:has(header) {
|
|
--calcHeaderHeight: calc( var(--fontSize) * var(--setCalcMinHeaderFactor));
|
|
font-family: "ocr-a";
|
|
background-image: var(--headerBGImage);
|
|
background-color: var(--colorDrkGrey);
|
|
background-repeat: var(--repeateBg);
|
|
backdrop-filter: var(--bgBlur);
|
|
-webkit-backdrop-filter: var(--bgBlur);
|
|
background-position-x: var(--headerBGPosX);
|
|
background-position-y: var(--headerBGPosY);
|
|
background-size: var(--headerBGSize);
|
|
box-shadow: var(--menuShadow);
|
|
color: var(--colorLgtGrey);
|
|
width: var(--maxWidth);
|
|
position: var(--posFixed);
|
|
height: var(--calcHeaderHeight);
|
|
text-align: var(--headerAlign);
|
|
top: var(--headerTop);
|
|
left: 0px;
|
|
margin: var(--noMarginPadding) var(--centerMargin);
|
|
display: var(--displayBlock);
|
|
overflow: var(--overflowHidden);
|
|
user-select: var(--userSelect);
|
|
-webkit-user-select: var(--userSelect);
|
|
-moz-user-select: var(--userSelect);
|
|
z-index: 150;
|
|
}
|
|
|
|
.headerText {
|
|
font-family: "ocr-a";
|
|
}
|
|
|
|
.h-box h3:has(header) {
|
|
height: auto;
|
|
}
|
|
|
|
.h-box.flexible.title {
|
|
font-family: "ocr-a";
|
|
font-size: 1em;
|
|
width: 100%;
|
|
}
|
|
|
|
.channel-name {
|
|
font-family: "ocr-a";
|
|
font-size: 1em;
|
|
}
|
|
|
|
.thumbnail ~ p ~ p b {
|
|
font-size: 1em;
|
|
font-family: "ocr-a";
|
|
}
|
|
|
|
.channel-profile.pure-u-4-24.pure-u-md-2-24 ~ .pure-u-20-24.pure-u-md-22-24 > p > b {
|
|
font-size: 1em;
|
|
font-family: "ocr-a";
|
|
}
|
|
|
|
span#channel-name {
|
|
font-family: "ocr-a";
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
#download_widget {
|
|
width: 100%;
|
|
color: #505050;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.pure-button:not([class*="vjs"]), button:not([class*="vjs"]), .searchbar input[type="search"], [href*="/login"] {
|
|
color: #ffffff !important;
|
|
background-color: rgba(230,230,230,0.5) !important;
|
|
text-decoration: none !important;
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.6) !important;
|
|
text-shadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
|
|
border-radius: 1em !important;
|
|
border: 0.5px solid rgba(0,0,0,0.5) !important;
|
|
padding: 0.35em 0.8em !important;
|
|
}
|
|
|
|
:is(.pure-button:not([class*="vjs"]), button:not([class*="vjs"]), .searchbar input[type="search"], [href*="/login"] ):is(:hover,:active,:focus){
|
|
background-color: rgba(0, 182, 240, 0.5) !important;
|
|
}
|
|
|
|
footer {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
* Responsive rules
|
|
*/
|
|
|
|
@media only screen and (max-aspect-ratio: 16/9) {
|
|
.player-dimensions.vjs-fluid {
|
|
padding-top: 46.86%;
|
|
padding-top: 56.25% !important;
|
|
}
|
|
|
|
#player-container {
|
|
padding-bottom: 46.86% ;
|
|
padding-bottom: 56.25% !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.navbar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.navbar > div {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.navbar > .searchbar > form {
|
|
width: 75%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.25em;
|
|
margin: 0.42em 0;
|
|
}
|
|
|
|
/* Space out the subscribe & RSS buttons and align them to the left */
|
|
.title.flexible { display: block; }
|
|
.title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; }
|
|
|
|
/* Space out buttons to make them easier to tap */
|
|
.user-field { font-size: 125%; }
|
|
.user-field > :not(:last-child) { margin-right: 1.75em; }
|
|
|
|
.icon-buttons { font-size: 125%; }
|
|
.icon-buttons > :not(:last-child) { margin-right: 0.75em; }
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.navbar > .searchbar > form {
|
|
width: 100%;
|
|
margin: 0 1em;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Video "cards" (results/playlist/channel videos)
|
|
*/
|
|
|
|
.video-card-row { margin: 15px 0; }
|
|
|
|
p.channel-name { margin: 0; }
|
|
p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
|
|
|
|
|
|
/*
|
|
* Comments & community posts
|
|
*/
|
|
|
|
.comments {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
/*
|
|
* We don't want the top and bottom margin on the post page.
|
|
*/
|
|
.comments.post-comments {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.video-iframe-wrapper {
|
|
position: relative;
|
|
height: 0;
|
|
padding-bottom: 56.25%;
|
|
}
|
|
|
|
.video-iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.headerText :is(h1,h2,h3,h4) {
|
|
text-align: center !important;
|
|
margin: unset
|
|
}
|
|
|
|
.headerText h1 {
|
|
/*font-size: 20pt; */
|
|
}
|
|
|
|
.headerText h3 {
|
|
/*font-size: 14pt; */
|
|
}
|
|
|
|
.headerText h4 {
|
|
/*font-size: 11pt; */
|
|
padding: 0.5em 0em;
|
|
}
|
|
|
|
.pure-menu-heading {
|
|
color: inherit !important;
|
|
}
|
|
|
|
a:not([data-id]) > .icon, .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], .playlist-restricted > ol > li > a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
a.feed-menu-item.pure-menu-heading {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
* Page navigation
|
|
*/
|
|
|
|
.page-nav-container { margin: 15px 0 30px 0; }
|
|
|
|
.page-prev-container { text-align: start; }
|
|
.page-next-container { text-align: end; }
|
|
|
|
.page-prev-container,
|
|
.page-next-container {
|
|
display: inline-block;
|
|
}
|
|
|
|
.searchbar input[type="search"] {
|
|
width: 100%;
|
|
font-weight: 650;
|
|
color: #505050;
|
|
margin: 1px;
|
|
border: 1px solid;
|
|
border-color: rgba(0,0,0,0);
|
|
border-bottom-color: #CCC;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.theme-light .searchbar input[type="search"] {
|
|
width: 100%;
|
|
font-weight: 650;
|
|
/*color: #505050;
|
|
margin: 1px;
|
|
border: 1px solid;
|
|
border-color: rgba(0,0,0,0.5);
|
|
border-bottom-color: #CCC;
|
|
border-radius: 0;
|
|
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8); */
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
/*
|
|
* Footer
|
|
*/
|
|
|
|
footer {
|
|
margin-top: auto;
|
|
padding: 1.5em 0;
|
|
text-align: center;
|
|
max-height: 30vh;
|
|
}
|
|
|
|
.light-theme footer {
|
|
color: #7c7c7c;
|
|
}
|
|
|
|
.dark-theme footer {
|
|
color: #adadad;
|
|
}
|
|
|
|
.light-theme footer a {
|
|
color: #7c7c7c !important;
|
|
}
|
|
|
|
.dark-theme footer a {
|
|
color: #adadad !important;
|
|
}
|
|
|
|
footer span {
|
|
margin: 4px 0;
|
|
display: block;
|
|
}
|
|
|
|
/* keyframes */
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
fieldset > select,
|
|
span > select {
|
|
color: rgba(49, 49, 51, 1);
|
|
}
|
|
|
|
.pure-control-group label {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
|
|
/*
|
|
* Light theme
|
|
*/
|
|
|
|
.light-theme a:hover,
|
|
.light-theme a:active,
|
|
.light-theme summary:hover,
|
|
.light-theme a:focus,
|
|
.light-theme summary:focus {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.light-theme .pure-button-primary:hover,
|
|
.light-theme .pure-button-primary:focus,
|
|
.light-theme .pure-button-secondary:hover,
|
|
.light-theme .pure-button-secondary:focus {
|
|
color: #fff !important;
|
|
border-color: rgba(0, 182, 240, 0.75) !important;
|
|
background-color: rgba(0, 182, 240, 0.75) !important;
|
|
}
|
|
|
|
.light-theme .pure-button-secondary:not(.low-profile) {
|
|
color: #335d7a;
|
|
background-color: #fff2;
|
|
}
|
|
|
|
.light-theme a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* All links that do not fit with the default color goes here */
|
|
.light-theme a:not([data-id]) > .icon,
|
|
.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
|
|
.light-theme .playlist-restricted > ol > li > a {
|
|
color: #303030;
|
|
}
|
|
|
|
.light-theme .pure-menu-heading {
|
|
color: #565d64;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active,
|
|
.no-theme summary:hover,
|
|
.no-theme a:focus,
|
|
.no-theme summary:focus {
|
|
color: inherit;
|
|
text-decoration: underline
|
|
}
|
|
|
|
.no-theme .pure-button-primary:hover,
|
|
.no-theme .pure-button-primary:focus,
|
|
.no-theme .pure-button-secondary:hover,
|
|
.no-theme .pure-button-secondary:focus {
|
|
color: #fff !important;
|
|
border-color: rgba(0, 182, 240, 0.75) !important;
|
|
background-color: rgba(0, 182, 240, 0.75) !important;
|
|
}
|
|
|
|
.no-theme .pure-button-secondary:not(.low-profile) {
|
|
color: #335d7a;
|
|
background-color: #fff2;
|
|
}
|
|
|
|
.no-theme a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* All links that do not fit with the default color goes here */
|
|
.no-theme a:not([data-id]) > .icon,
|
|
.no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
|
|
.no-theme .playlist-restricted > ol > li > a {
|
|
color: #303030;
|
|
}
|
|
|
|
.no-theme footer {
|
|
color: #7c7c7c;
|
|
}
|
|
|
|
.no-theme footer a {
|
|
color: #7c7c7c !important;
|
|
}
|
|
|
|
.light-theme .pure-menu-heading {
|
|
color: #565d64;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Dark theme
|
|
*/
|
|
|
|
.dark-theme a:hover,
|
|
.dark-theme a:active,
|
|
.dark-theme summary:hover,
|
|
.dark-theme a:focus,
|
|
.dark-theme summary:focus {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dark-theme .pure-button-primary:hover,
|
|
.dark-theme .pure-button-primary:focus,
|
|
.dark-theme .pure-button-secondary:hover,
|
|
.dark-theme .pure-button-secondary:focus {
|
|
color: #fff !important;
|
|
border-color: rgb(0, 182, 240) !important;
|
|
background-color: rgba(0, 182, 240, 1) !important;
|
|
}
|
|
|
|
.dark-theme .pure-button-secondary {
|
|
background-color: #0002;
|
|
color: #ddd;
|
|
}
|
|
|
|
.dark-theme a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.dark-theme {
|
|
background-color: rgba(35, 35, 35, 1);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme #headerHidden a {
|
|
color: inherit !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.dark-theme .pure-form legend {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme .pure-menu-heading {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme input,
|
|
.dark-theme select,
|
|
.dark-theme textarea {
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
.dark-theme .pure-form input[type="file"] {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.dark-theme .pure-menu-heading:nth-child(1)::before {
|
|
display: block;
|
|
background-image: url(../CMovie.svg);
|
|
background-repeat: no-repeat;
|
|
height: 2.35em;
|
|
content: "";
|
|
position: relative;
|
|
top: 0.75em;
|
|
/* left: 350px; */
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active,
|
|
.no-theme a:focus {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-theme .pure-button-primary:hover,
|
|
.no-theme .pure-button-primary:focus,
|
|
.no-theme .pure-button-secondary:hover,
|
|
.no-theme .pure-button-secondary:focus {
|
|
color: #fff !important;
|
|
border-color: rgb(0, 182, 240) !important;
|
|
background-color: rgba(0, 182, 240, 1) !important;
|
|
}
|
|
|
|
.no-theme .pure-button-secondary {
|
|
background-color: #0002;
|
|
color: #ddd;
|
|
}
|
|
|
|
.no-theme a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.no-theme {
|
|
background-color: rgba(35, 35, 35, 1);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .pure-form legend {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .pure-menu-heading {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme input,
|
|
.no-theme select,
|
|
.no-theme textarea {
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
.no-theme .pure-form input[type="file"] {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.no-theme footer {
|
|
color: #adadad;
|
|
}
|
|
|
|
.no-theme footer a {
|
|
color: #adadad !important;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Miscellanous
|
|
*/
|
|
|
|
|
|
/*With commit d9528f5 all contents of the page is now within a flexbox. However,
|
|
the hr element is rendered improperly within one.
|
|
See https://stackoverflow.com/a/34372979 for more info */
|
|
hr {
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
|
|
/* Description Expansion Styling*/
|
|
#descexpansionbutton,
|
|
#music-desc-expansion {
|
|
display: none;
|
|
}
|
|
|
|
#descexpansionbutton ~ div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#descexpansionbutton:not(:checked) ~ div {
|
|
max-height: 8.3em;
|
|
}
|
|
|
|
#descexpansionbutton:checked ~ div {
|
|
overflow: unset;
|
|
height: 100%;
|
|
}
|
|
|
|
#descexpansionbutton ~ label {
|
|
order: 1;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
label[for="descexpansionbutton"]:hover,
|
|
label[for="music-desc-expansion"]:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Bidi (bidirectional text) support */
|
|
h1, h2, h3, h4, h5, p,
|
|
#descriptionWrapper,
|
|
#description-box,
|
|
#music-description-box {
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
}
|
|
|
|
#descriptionWrapper {
|
|
max-width: 80%;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#music-description-box {
|
|
display: none;
|
|
}
|
|
|
|
#music-desc-expansion:checked ~ #music-description-box {
|
|
display: block;
|
|
}
|
|
|
|
#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up,
|
|
#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down {
|
|
display: none;
|
|
}
|
|
|
|
#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up,
|
|
#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down {
|
|
display: inline;
|
|
}
|
|
|
|
/* Select all the music items except the first one */
|
|
.music-item + .music-item {
|
|
border-top: 1px solid #ffffff;
|
|
}
|
|
|
|
/* Center the "invidious" logo on the search page */
|
|
#logo > h1 { text-align: center; }
|
|
|
|
|
|
|
|
/* IE11 fixes */
|
|
:-ms-input-placeholder { color: #ffffff; }
|
|
|
|
/* Wider settings name to less word wrap */
|
|
.pure-form-aligned .pure-control-group label { width: 19em; }
|
|
|
|
.channel-emoji {
|
|
margin: 0 2px;
|
|
}
|
|
|
|
#download_widget {
|
|
width: 100%;
|
|
}
|