/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } div.modalLayer > div.confirm > div { text-align: left; font-size: 1rem; } div.customInputSelect > .curValue { background: #f4f2e1; box-shadow: none; border: 1px solid lightgrey; color: black; } div.customInputSelect > .curValue:hover { background: #f4f2e1; } div.customInputSelect ul.options li { padding: 3px; } div.customInputSelect ul.options li.selected, div.customInputSelect ul.options li:hover { background: #f4f2e1; color: black; } body { font-family: 'OpenSans', sans-serif; font-size: 14px; line-height: 1.5em; } select { padding: 5px; background-color: #f4f2e1; } table.standard thead { background: #e3db9b; } table.standard tbody { background: #f4f2e1; } table.standard tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.5); } div.selectBox { background-color: #f4f2e1; border: 1px solid lightgrey; border-radius: 10px; cursor: pointer; display: inline-block; margin: 5px 2px; padding: 5px; width: 40px; } div.selectBox:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } div.selectBox input[type="checkbox"] { display: none; } div.selectBox.active { background-color: #E3DB9B; } ul.ajaxResult { font-size: 0.8em; text-align: left; width: 100%; } ul.ajaxResult li { padding: 5px; background: #dfdfe1; } a, .pseudoLink { color: #002a66; cursor: pointer; text-decoration: none; } b, strong { font-family: 'OpenSansBold', sans-serif; } textarea { resize: vertical; } div.shadowBox { background: rgba(0, 0, 0, 0.1); padding: 15px; } input, textarea { border: none; font-size: inherit; font-family: inherit; } input[type="text"], textarea[type="text"], input[type="password"], textarea[type="password"], input[type="tel"], textarea[type="tel"], input[type="email"], textarea[type="email"], input[type="date"], textarea[type="date"], input[type="time"], textarea[type="time"], input[type="datetime-local"], textarea[type="datetime-local"], input[type=""], textarea[type=""], input:not([type]), textarea:not([type]) { background-color: #f4f2e1; } h1.pageHeading { text-align: center; padding: 5px; background: #668059; margin: 0 0 15px 0; color: white; hyphens: none; } #page { max-width: 1280px; border-left: 1px solid grey; border-right: 1px solid grey; text-align: center; margin: 0 auto 0 auto; position: relative; } #page #contentWrapper { background: white; padding: 0 10px 50px 10px !important; } #page #contentWrapper > .content .section, #page #contentWrapper #mainLeft .section { margin-top: 15px; } #page #contentWrapper > .content .section:last-child, #page #contentWrapper #mainLeft .section:last-child { margin-bottom: 80px; } #page #contentWrapper > .content > table.standard, #page #contentWrapper #mainLeft > table.standard { font-family: 'OpenSansLight', sans-serif; border-collapse: collapse; text-align: left; } #page #contentWrapper > .content > table.standard thead, #page #contentWrapper #mainLeft > table.standard thead { background-color: #ebe7c1; font-family: 'OpenSansBold', sans-serif; } #page #contentWrapper > .content > table.standard thead tr th, #page #contentWrapper #mainLeft > table.standard thead tr th { padding: 7px; position: relative; } #page #contentWrapper > .content > table.standard > tbody > tr > td, #page #contentWrapper #mainLeft > table.standard > tbody > tr > td { padding: 7px; position: relative; } header, #header *, footer, #sideMenu { background-color: #313e2b !important; } header, #header *, footer { color: rgba(255, 255, 255, 1) !important; } footer .title { margin-top: 12px; font-size: 12px; } footer .miscLinks { font-size: 10px; margin-top: 5px; } footer a { color: inherit; } body footer .userName { font-size: 18px; padding: 17px 0 5px 12px; } body footer .avatar { text-align: center; } input { font-family: 'OpenSans', sans-serif; } #contentWrapper { min-height: calc(100vh - 200px); position: relative; padding: 0 25px 0 25px; } #contentWrapper > .content { overflow: hidden; } h1 { font-family: 'OpenSansBold', sans-serif; font-size: 20px; text-transform: uppercase; margin-top: 10px; margin-bottom: 5px; } img[src^="https://deutsche-saengerschaft.de/ajax/userImage.php?user_id="] { background-color: white; } .phelicSlider img.slideRight, .phelicSlider img.slideLeft { max-height: 50px; } .bandLogo { display: block; border-radius: 100%; width: 30px; height: 30px; text-align: center; color: white; font-family: 'OpenSansBold', sans-serif; font-size: 15px; line-height: 2em; overflow: hidden; border: 1px solid white; } .validationError { box-shadow: 0 0 5px red; } .modalLayer > div.confirm, .modalLayer > div.confirm > div { font-size: 13px; line-height: 1.4em; } .modalLayer > div.confirm > .faLogo, .modalLayer > div.confirm > div > .faLogo { font-size: 40px; margin-bottom: 15px; display: block; } .modalLayer > div.confirm > .faLogo.fa-times, .modalLayer > div.confirm > div > .faLogo.fa-times { color: rgb(177, 17, 22); } .modalLayer > div.confirm > .faLogo.fa-plus, .modalLayer > div.confirm > div > .faLogo.fa-plus { color: rgb(80, 184, 72); } .modalLayer > div.confirm > button.accept, .modalLayer > div.confirm > div > button.accept, .modalLayer > div.confirm > button.decline, .modalLayer > div.confirm > div > button.decline { float: left; } .modalLayer > div.confirm > button.accept.decline, .modalLayer > div.confirm > div > button.accept.decline, .modalLayer > div.confirm > button.decline.decline, .modalLayer > div.confirm > div > button.decline.decline { background: transparent; color: grey; margin-top: 10px; } div.accordion .ui-accordion-header { font-size: 1.2em; text-align: left; } div.accordion .ui-widget-content { padding: 0 5px 5px 5px; } div.accordion .ui-widget-content a { color: #002a66; } div.accordion .ui-state-active { background-color: #ebe7c1; border: 1px solid grey; border-bottom: 1px solid lightgrey; color: black; } div.accordion .ui-state-active .ui-accordion-header-icon { filter: brightness(0); } body .lightYellowBg { background-color: #fdfaf8; position: relative; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); text-align: justify; } body .darkYellowBg { background-color: rgba(255, 227, 0, 0.05); } body button, body input[type=submit], body input[type=button], body input[type=reset], body .button { background: linear-gradient(to bottom, #eeecd7 0%, #cccab6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid grey; border-radius: 3px; color: #5e5c4f; display: inline-block; text-align: center; cursor: pointer; padding: 5px 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-weight: bold; width: 100%; margin-bottom: 15px; } body button:disabled, body input[type=submit]:disabled, body input[type=button]:disabled, body input[type=reset]:disabled, body .button:disabled { cursor: default; } body button:not(:disabled):hover, body input[type=submit]:not(:disabled):hover, body input[type=button]:not(:disabled):hover, body input[type=reset]:not(:disabled):hover, body .button:not(:disabled):hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); } body button:not(:disabled):active, body input[type=submit]:not(:disabled):active, body input[type=button]:not(:disabled):active, body input[type=reset]:not(:disabled):active, body .button:not(:disabled):active { background: linear-gradient(to bottom, #cccab6 0%, #eeecd7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } body input[type=submit], body button:not([type]), body button[type="submit"] { color: white; background: linear-gradient(to bottom, #f8c137 0%, #a78225 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } body input[type=submit]:active, body button:not([type]):active, body button[type="submit"]:active { background: linear-gradient(to bottom, #a78225 0%, #f8c137 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } body .ui-widget { font-family: 'OpenSans', sans-serif; } table.paginator { background-color: #f4f2e1; } body #backToTop { background: #548a3b; } footer .testEnv { background: #aaaaaa; color: black; opacity: 0.75; top: unset; bottom: 55px; } #sideMenu { background-color: #313e2b; top: 0; left: 0; right: 0; bottom: 0; width: 250px; z-index: 1001; /* over .modalLayer & .messageContainer */ transform: translateX(-249px); transition: all 500ms ease; position: fixed; pointer-events: none; text-align: left; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; } #sideMenu.open { transform: translateX(0px); pointer-events: initial; opacity: 1; } #sideMenu a { display: block; position: relative; text-decoration: none; color: inherit; } #sideMenu .background { position: absolute; opacity: 0.15; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #sideMenu .bandLogo { position: absolute; left: 20px; top: 5px; width: 28px; height: 28px; line-height: 1.75em; } #sideMenu .plusHideAnimated { position: absolute; width: 50px; height: 50px; right: 5px; margin-top: 2px; transform: scale(0.6, 0.6); } #sideMenu .menuDivider { color: #ffffff; background-color: rgba(0, 0, 0, 0.02); border-top: solid 1px rgba(0, 0, 0, 0.08); border-bottom: solid 1px rgba(0, 0, 0, 0.08); box-shadow: none; font-family: 'Roboto', sans-serif; display: block; height: 40px; line-height: 40px; font-size: 9px; text-transform: uppercase; font-weight: 700; font-style: normal; padding-left: 20px; margin-bottom: -1px; margin-top: -1px; z-index: 999; position: relative; } #sideMenu .menuDivider i { position: absolute; right: 25px; height: 40px; line-height: 40px !important; } #sideMenu .menuItem { padding-left: 20px; color: #ffffff; border-top: solid 1px rgba(255, 255, 255, 0.01); border-bottom: solid 1px rgba(255, 255, 255, 0.33); height: 41px; line-height: 3em; display: block; transition: all 350ms ease; font-size: 14px; font-family: OpenSansBold, sans-serif; position: relative; cursor: pointer; } #sideMenu .menuItem.hasChildren.open { margin-bottom: 1px; } #sideMenu .menuItem.hasChildren.open .fa-chevron-down { transform: rotate(180deg); } #sideMenu .menuItem.hasChildren.open + .submenuItem { background-color: rgba(249, 249, 249, 0.1); } #sideMenu .menuItem.hasChildren + .submenuItem + .menuItem { border-top: solid 1px rgba(0, 0, 0, 0.05); } #sideMenu .menuItem.hasChildren .fa-chevron-down { transition: all 350ms ease; border-radius: 100%; } #sideMenu .menuItem > .fa { width: 40px; height: 100%; text-align: center; line-height: 2.5em; transition: all 250ms ease; position: absolute; right: 10px; top: 0; color: #ffffff; font-size: 16px; } #sideMenu .submenuItem { display: none; font-size: 1em; } #sideMenu .submenuItem a { color: #ffffff; font-family: 'OpenSansLight', sans-serif; font-size: 12px !important; height: 40px; line-height: 40px; padding-left: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.33); } #sideMenu .submenuItem a.todo div.text { font-size: 1em; } #sideMenu .submenuItem a:nth-child(1) { margin-top: -1px; } #sideMenu .submenuItem a i { margin-right: 10px; } #sideMenu .submenuItem a div.text { width: 125px; font-size: 1.2em; color: #ffffff; } #sideMenu .submenuItem .fa-angle-right { position: absolute; left: 0; height: 50px; line-height: 50px; width: 60px; text-align: center; font-size: 10px; opacity: 0.5; } #sideMenu .submenuItem .fa-circle { position: absolute; width: 40px; height: 40px; top: 0; right: 12px; font-size: 5px; text-align: center; opacity: 1; color: #ffffff; } #sideMenu .submenuItem .fa-circle::before { top: 17px; position: absolute; } /* active menu item */ #sideMenu .menuItem.active, #sideMenu .submenuItem a.active, #sideMenu .menuItem.active > .fa, #sideMenu .menuItem.hasChildren.open, #sideMenu .menuItem.hasChildren.open .fa { color: #ffffff; background: hsl(101.3, 9.6%, 40%); } #menuOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); z-index: 5; } #sideMenu + header, #sideMenu + header + #page > #contentWrapper, #sideMenu + header + #page + footer { /* #contentWrapper to prevent mobile chrome bug */ transition: transform 500ms ease; } #sideMenu.open + header, #sideMenu.open + header + #page > #contentWrapper, #sideMenu.open + header + #page + footer { /* #contentWrapper to prevent mobile chrome bug */transform: translateX(45px); }