<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/> <link rel="shortcut icon" type="image/x-icon" href="resources/images/favicon.ico"/> <link rel="shortcut icon" type="image/png" href="resources/images/favicon-16.png" sizes="16x16"/> <link rel="shortcut icon" type="image/png" href="resources/images/favicon-24.png" sizes="24x24"/> <link rel="shortcut icon" type="image/png" href="resources/images/favicon-32.png" sizes="32x32"/> <link rel="shortcut icon" type="image/png" href="resources/images/favicon-64.png" sizes="64x64"/> <link rel="stylesheet" href="resources/css/theme.css"/> <link rel="stylesheet" href="resources/css/zacuto.css"/> <script type="module" src="pb-components-bundle.js" data-template="pages:load-components"/> <script src="resources/scripts/index.js"/> <custom-style> <style> paper-item, :host ::slotted(paper-item) { color: white; } .menubar pb-login { --pb-login-theme: { font-weight: 400; } padding-bottom: 0.4em; } pb-page{ background-image: url('resources/images/klassik.png'); background-repeat: repeat; !important; width: 100% !important; } app-header{ position:fixed; top:0; left:0; width:100%; height:340px; --app-header-background-front-layer: { background: transparent; }; --app-header-background-rear-layer: { background: #ead8c3; }; } app-toolbar{ height:64px; background:transparent; } .cropper{ overflow:hidden; border-radius:50%; width:160px; height:160px; margin:0 auto; box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); } header div{ color:black; padding-top:0.1rem; } .portrait{ width:160px; } main { margin: 0 auto; max-width: 1100px; background: rgba(0,0,0,0.5); padding: 0.5rem; animation: fadein 0.6s; padding-bottom: 10rem; margin-bottom: 1rem; } paper-listbox { background: #fff; } .tp-title { /*font-family: "Oswald",Verdana,"Helvetica",sans-serif;*/ font-size: 64px; font-weight: 400; color:#3d3224; text-shadow:2px 2px white; font-family:"Oswald", Verdana, "Helvetica", sans-serif; margin-top:4px; text-align:center; width:100%; margin-bottom:10px; } .tp-title span { color: #9e9e9e; font-size: 26px; margin-top: 12px; } [condensed-title] { margin: 0; overflow: hidden; font-family:"Oswald", Verdana, "Helvetica", sans-serif; font-size:28px !important; font-weight:700; color:#3d3224; text-shadow:2px 2px white; } .menu { text-align: center; margin: -1.9rem auto 0; padding-top: 0.2em; display: block; /* ensures it's a block container */ } .menu a{ display: inline-block; padding: 0 0.5em; vertical-align: middle; position: relative; color: #3d3224; text-decoration: none; text-shadow:1px 1px white; font-size: 1.2rem; font-weight: 600; padding-left: 0.7em; padding-right: 0.7em; background: rgba(234, 211, 197, 0.4); border: 2px solid #3d3224; border-radius: 200px; } pb-results { overflow: scroll; margin: 0 20px; height: calc(100vh - 128px); } @media (min-width: 1024px) { .toolbar { display: none; } .panels { display: flex; flex-direction: row; } .panels .doclist { flex: 2 auto; margin-right: 20px; } } .panels { margin-bottom: 40px; } .panels .doclist { --paper-tabs-selection-bar-color: #607D8B; --paper-tab-content: { font-family: "Oswald", Verdana, "Helvetica", sans-serif; font-weight: 400; } ; --paper-card-header: { background-color: #d1dae0; } ; --paper-card-header-text: { font-family: "Oswald", Verdana, "Helvetica", sans-serif; font-size: 16px; font-weight: 400; } ; } .panels .doclist .card-content { padding: 0; } .panels .doclist .browse { display: flex; flex-direction: row; justify-content: space-between; padding: 0; } #document-list { flex: 2; margin: 0 1rem 1rem 0; /* optional, smaller margin on mobile */ background: rgba(255, 255, 255, 0.9); border: 2px solid #3d3224; border-radius: 20px; width: 100%; max-width: 800px; padding: 1.2rem; /* 25px ≈ 1.5rem */ box-sizing: border-box; } .upload-panel { flex: 1; display: flex; flex-direction: column; min-width: 360px; } .splash { background-image: url(resources/images/splash.png); } paper-card { --paper-material-elevation-1_-_box-shadow: none; } .parent-link iron-icon { padding-right: 4px; } .parent-link { display: none; margin-bottom: 10px; margin-top: 16px; padding: 6px 0; border-bottom: thin solid var(--paper-grey-300); } .documents ul { list-style: none; } .documents div { margin: 0; } .documents .error { color: #c02020; } .documents a, .documents a:visited { color: #000; text-decoration: none; } .documents li { box-shadow: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.4); background: #ead8c3; opacity: 0.95; border-radius: 12px; border: 2px solid #3d3224; padding: 15px; margin-bottom: 20px; list-style: none; /* removes bullet */ } .documents .document-select { flex: 0 0; margin-right: 20px; } h2, h3, h4, h5, h6 { font-family: "Oswald",Verdana,"Helvetica",sans-serif; font-weight: 500 !important; line-height: 1.2; color: #3d3224; } h5 { font-size: 20px; margin: 0; font-family: "Oswald", Verdana, "Helvetica", sans-serif; font-weight: bold; font-weight: 300; transition: 0.3s; } h5:hover { color: #89a6fb; } aside { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); background: white; opacity: 0.95; padding: 20px; max-width: 300px; border-radius: 22px; border: 2px solid #3d3224; color: #3d3224; flex: 0; min-width: 220px; margin-right: 20px; margin-left: 20px; } #facets h3 { display: flex; flex-direction: row; align-items: center; } #facets h3 paper-checkbox { margin-left: 16px; font-size: 11px; } #facets table { font-size: 14px; } #facets table table { padding-left: 16px; width: 100%; } #facets table td { padding: 4px 0; } #facets table td:nth-child(2) { color: #808080; text-align: right; padding-left: 1em; vertical-align: middle; } .timeline-search-row { display: flex; justify-content: center; /* horizontally center inside parent */ align-items: center; /* vertically align */ gap: 2rem; /* space between timeline and search options */ margin-bottom: 1.5rem; /* space below the row */ } pb-timeline { display: inline-block; border: 2px solid #3d3224; background: rgba(255, 255, 255, 0.8); color: #3d3224; padding: 1rem; border-radius: 10px; font-weight: 500; } /* Tooltip link colors */ pb-timeline::part(tooltip-link) { color: white; } pb-media-query { justify-content: flex-end; display: flex; } h3:empty { display: none; } .row { display: flex; flex-direction: row; } .column { display: flex; flex-direction: column; padding: 2rem; background-color: #89A6FB; --pb-menubar-color: white; } .documents { padding-left: 10px; } .documents .label { display: none; } .toolbar pb-search { padding-left: 0; } @media (max-width: 768px) { app-header { height: auto !important; /* shrink header to content */ min-height: 0 !important; /* remove desktop min-height */ } app-header-layout, app-header-layout > * { padding-top: 0 !important; /* remove reserved space */ margin-top: 0 !important; } pb-page, pb-page > * { padding-top: 5vh !important; /* small buffer between header and main */ margin-top: 0 !important; } .menu { display: inline-block; position: sticky; /* sticks to viewport */ } } } @media screen and (min-width: 125px) { footer { background: rgba(61, 50, 36, 0.7) !important; color: rgb(255, 255, 255); padding: 10px 20px; // position:fixed; bottom:0; } } section { padding-top: 10px; padding-bottom: 10px; margin: auto; } html { --light-theme-background-color: none; } #paginate{ color:black; } .document-info > header > div.tei-teiHeader3 > div.tei-fileDesc1 { /* Keep this whole container visible because it contains the title */ display: block; } .document-info > header > div.tei-teiHeader3 > div:not(.tei-fileDesc1) { /* Hide all other siblings inside tei-teiHeader3 */ display: none; } /* Hide the author inside the titleDesc1 if you want just the title text */ .tei-fileDesc1 .tei-author1 { display: none; } /* Hide the whole toolbar below document-info if you want only the title */ .document-info > app-toolbar { display: none; } .document-info .tei-titleStmt4 { font-weight: bold; font-size: 1.2rem; color: #3d3224!important; text-shadow:0.5px 0.5px white; } .document-info .tei-titleStmt4:hover { color: blue!important; text-decoration: underline; } pb-select{ --paper-input-container-color: #3d3224; --paper-input-container-input-color: #222; /* Input text color */ --paper-font-common-base_: { font-family: "Oswald", Verdana, "Helvetica", sans-serif; font-weight: 400; font-size: 16px; }; color: #222; /* dark text */ border-radius: 4px; padding: 6px 10px; } paper-item { color:#3d3224; background-color: white; font-size: 16px; padding: 8px 12px; } .header-row { display: flex; justify-content: center; align-items: center; padding: 20px; } </style> </custom-style> </head> <body> <pb-page data-template="pages:pb-page" unresolved="unresolved" subscribe="transcription"> <app-drawer-layout force-narrow="force-narrow"> <app-drawer slot="drawer" align="right"> <div class="drawer-content"> <pb-lang name="lang" label="language" data-template="pages:languages"> </pb-lang> <pb-login id="login" group="tei"> <iron-icon slot="icon" icon="account-circle"/> </pb-login> </div> </app-drawer> <app-header-layout> <app-header slot="header" condenses="condenses" fixed="fixed" effects="parallax-background blend-background resize-title"> <app-toolbar style="height:64px;"> <div condensed-title="condensed-title" data-template="config:app-title"/> <paper-icon-button icon="icons:menu" drawer-toggle="drawer-toggle"/> <pb-progress indeterminate="indeterminate" bottom-item="bottom-item"/> </app-toolbar> <div class="cropper"> <a href="/exist/apps/wvh-schriften/index.html"> <img class="portrait" src="resources/images/splash.png"/> </a> </div> <h1 class="tp-title" main-title="main-title" data-template="config:app-title"/> <div class="menu"> <a href="/exist/apps/wvh-schriften/about.html">About</a> <a href="/exist/apps/wvh-schriften/uebersicht.html">Textübersicht</a> <paper-menu-button> <a href="#" slot="dropdown-trigger"> <pb-i18n key="menu.register">Register</pb-i18n> </a> <paper-listbox slot="dropdown-content"> <paper-item> <a href="/exist/apps/wvh-schriften/people/"> <pb-i18n key="menu.people">Namen</pb-i18n> </a> </paper-item> <paper-item> <a href="/exist/apps/wvh-schriften/places/"> <pb-i18n key="menu.places">Orte</pb-i18n> </a> </paper-item> </paper-listbox> </paper-menu-button> </div> <pb-progress indeterminate="indeterminate" bottom-item="bottom-item"/> </app-header> <main> <section class="panels"> <paper-card class="doclist"> <div class="card-content"> <div class="browse" slot="page"> <aside data-template="browse:form">  <pb-custom-form class="options"> <input type="hidden" name="collection" value="${collection}" data-template="pages:parse-params"/> <pb-select label="browse.sort" name="sort" value="${sort}" data-template="pages:parse-params"> <paper-item value="title"> <pb-i18n key="browse.title"/> </paper-item> </pb-select> <pb-select label="search.scope" name="field" value="${field}" data-template="pages:parse-params"> <paper-item value="text"> <pb-i18n key="search.content"/> </paper-item> <paper-item value="title"> <pb-i18n key="search.title"/> </paper-item> </pb-select> </pb-custom-form> <pb-search id="search-form" subscribe="search" data-template="pages:parse-params" value="${query}" subforms=".facets,.options" submit-on-load="submit-on-load"> <paper-button slot="searchButton"> <pb-i18n key="search.search">Search</pb-i18n> </paper-button> </pb-search> <pb-custom-form id="facets" class="facets" url="api/search/facets" event="pb-results-received" subscribe="search" emit="search"/> </aside> <div id="document-list"> <div slot="header" class="header-row" style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;"> <pb-timeline url="api/timeline" scopes="['D','M','Y','5Y','10Y']" resettable="" subscribe="search" emit="search"> <span slot="label"/> </pb-timeline> </div> <pb-paginate id="paginate" per-page="10" range="5" subscribe="search" emit="search"/> <pb-load url="api/collection/{collection}" expand="" emit="search"/> </div> </div> </div> </paper-card> </section> </main> <footer data-template="templates:include" data-template-path="templates/footer.html"/> </app-header-layout> </app-drawer-layout> <paper-dialog id="errorDialog"> <h2>Error </h2> <paper-dialog-scrollable/> <div class="buttons"> <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus"> Close </paper-button> </div> </paper-dialog> </pb-page> <div class="splash"/> <script> const facets = document.getElementById('facets'); if (facets) { facets.addEventListener('pb-custom-form-loaded', function(ev) { const elems = ev.detail.querySelectorAll('.facet'); elems.forEach(facet => { facet.addEventListener('change', () => { const table = facet.closest('table'); if (table) { const nested = table.querySelectorAll('.nested .facet').forEach(nested => { if (nested != facet) { nested.checked = false; } }); } facets.submit(); }); }); }); } </script> </body> </html>