diff --git a/app-template/index.html b/app-template/index.html
index 472b8f075f4fc741959e952e6ae68bb6fd48c3fb..3d99e5e568313a7ead71ff2cb3bb9c667bf8439f 100644
--- a/app-template/index.html
+++ b/app-template/index.html
@@ -5,6 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="white"/>
+ <!-- Meta Data for Search Engines -->
+ <meta title="esign - Der digitale Signaturservice an der Universität | My University">
+ <meta name="description" content="Signieren sie ganz einfach digital ihre Dokumente. Der digitale Signaturservice an der Universität." />
+
+ <!-- Meta Data for open graph(facebook & co) -->
+ <meta property="og:locale" content="de_DE" />
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content="esign - Der digitale Signaturservice an der Universität | My University" />
+ <meta property="og:description" content="Signieren sie ganz einfach digital ihre Dokumente. Der digitale Signaturservice an der Universität." />
+ <meta property="og:url" content="https://esign.my-university.at/" />
+ <meta property="og:site_name" content="esign" />
+
<!-- Favicons -->
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
@@ -41,38 +53,59 @@
font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
font-weight: 300;
margin: 0;
- background-color: var(--dbp-override-base-light, white);
- color: var(--dbp-override-text-dark, black);
}
/* style override */
html {
- /*--dbp-override-base-light: #ffffff;
- --dbp-override-base-dark: #000000;
- --dbp-override-text-light: #ffffff;
- --dbp-override-text-dark: #000000;
- --dbp-override-text-muted-light: #adadad;
- --dbp-override-text-muted-dark: #767676;
- --dbp-override-accent-light: #c24f68;
- --dbp-override-accent-dark: #c24f68;
- --dbp-override-primary-light: #8ca4eb;
- --dbp-override-primary-dark: #2a4491;
- --dbp-override-secondary-light: #ffffff;
- --dbp-override-secondary-dark: #000000;
- --dbp-override-info-light: #8ca4eb;
- --dbp-override-info-dark: #2a4491;
- --dbp-override-success-light: #7acc79;
- --dbp-override-success-dark: #188018;
- --dbp-override-warning-light: #f99a41;
- --dbp-override-warning-dark: #c15500;
- --dbp-override-danger-light: #ff887a;
- --dbp-override-danger-dark: #de3535;
- --dbp-override-border-light: 1px solid #ffffff;
- --dbp-override-border-dark: 1px solid #000000;
- --dbp-border-radius: 0px;
- --dbp-override-hover-base: unset;
- --dbp-override-hover-text: unset;
- */
+ }
+
+ .light-theme{
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
+ --dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #2a4491;
+ --dbp-override-success: #188018;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid black;
+
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
+ }
+
+ .dark-theme{
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
+
+ --dbp-override-muted: #666666;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #8ca4eb;
+ --dbp-override-success: #7acc79;
+ --dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid white;
+
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
}
</style>
</head>
@@ -87,6 +120,8 @@
src="/topic.metadata.json"
base-path="/"
keycloak-config='{"url": "https://auth-demo.tugraz.at/auth", "realm": "tugraz-vpu", "clientId": "auth-dev-mw-frontend-local", "silentCheckSsoRedirectUri": "/app/silent-check-sso.html"}'
+ themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
+ {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'
><dbp-loading-spinner></dbp-loading-spinner>
<template slot="name">
DBP<br />
diff --git a/assets/dbp-signature.html.ejs b/assets/dbp-signature.html.ejs
index af7c8d6f4dcc570e8a0c1af2da9d8e1d082f0094..3e6d5ba386ccda3d428ceb972efcf0cfe2b81a48 100644
--- a/assets/dbp-signature.html.ejs
+++ b/assets/dbp-signature.html.ejs
@@ -5,6 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="white"/>
+ <!-- Meta Data for Search Engines -->
+ <meta title="esign - Der elekronische Signaturservice an der Universität | TU Graz">
+ <meta name="description" content="Signieren sie ganz einfach digital ihre Dokumente. Der elekronische Signaturservice an der Technischen Universität Graz." />
+
+ <!-- Meta Data for open graph(facebook & co) -->
+ <meta property="og:locale" content="de_DE" />
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content="esign - Der elekronische Signaturservice an der Universität | TU Graz" />
+ <meta property="og:description" content="Signieren sie ganz einfach digital ihre Dokumente. Der elekronische Signaturservice an der Technischen Universität Graz." />
+ <meta property="og:url" content="https://esign.tugraz.at/" />
+ <meta property="og:site_name" content="esign" />
+
<!-- Favicons -->
<link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('favicon.ico') %>">
<link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>" sizes="any">
@@ -41,38 +53,33 @@
font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
font-weight: 300;
margin: 0;
- background-color: var(--dbp-override-base-light);
- color: var(--dbp-override-text-dark);
}
/* TU-Graz style override */
html {
- --dbp-override-base-light: #ffffff;
- --dbp-override-base-dark: #000000;
- --dbp-override-text-light: #ffffff;
- --dbp-override-text-dark: #000000;
- --dbp-override-text-muted-light: #afaca7;
- --dbp-override-text-muted-dark: #767676;
- --dbp-override-accent-light: #e4154b;
- --dbp-override-accent-dark: #e4154b;
- --dbp-override-primary-light: #73899e;
- --dbp-override-primary-dark: #245b78;
- --dbp-override-secondary-light: #ffffff;
- --dbp-override-secondary-dark: #000000;
- --dbp-override-info-light: #73899e;
- --dbp-override-info-dark: #245b78;
- --dbp-override-success-light: #75c438;
- --dbp-override-success-dark: #148800;
- --dbp-override-warning-light: #ffe183;
- --dbp-override-warning-dark: #c15500;
- --dbp-override-danger-light: #ff5d79;
- --dbp-override-danger-dark: #e4154b;
- --dbp-override-border-light: 1px solid #ffffff;
- --dbp-override-border-dark: 1px solid #000000;
-
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #245b78;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
+ --dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #5c5856;
+ --dbp-override-accent: #e4154b;
+ --dbp-override-info: #245b78;
+ --dbp-override-success: #138800;
+ --dbp-override-warning: #af6405;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #e4154b;
+
+ --dbp-override-border: 1px solid black;
--dbp-override-image-nextcloud: url(<%= getUrl('') %>images/nextcloud.svg);
}
+
</style>
<!-- Preloading/Preconnecting -->
@@ -132,19 +139,16 @@
}
.footer-links a {
- border-bottom: var(--dbp-border-dark);
+ border-bottom: var(--dbp-border);
+ border-color: var(--dbp-content);
padding: 0;
margin-left: 1em;
transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
- color: var(--dbp-text-dark);
+ color: var(--dbp-content);
cursor: pointer;
text-decoration: none;
}
- .footer-links a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
- }
</style>
<dbp-translated subscribe="lang">
<div slot="de" class="footer-links">
@@ -176,38 +180,25 @@
<div slot="additional-information">
<style>
.int-link-internal{
- transition: background-color 0.15s, color 0.15s;
- border-bottom: var(--dbp-border-dark);
- }
-
- .int-link-internal:hover{
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ border-bottom: var(--dbp-border);
+ border-color: var(--dbp-content);
}
.int-link-internal:after{
content: "\00a0\00a0\00a0";
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: 73%;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0 0 3px;
+ background-color: var(--dbp-content);
+ -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
+ mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center -2px;
+ mask-position: center center;
+ margin: 0 0 0 4px;
padding: 0 0 0.25% 0;
- animation: 0.15s linkIconOut;
- font-size: 103%;
+ -webkit-mask-size: 100%;
+ mask-size: 120%;
}
- .int-link-internal:hover::after{
- content: "\00a0\00a0\00a0";
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: 73%;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0 0 3px;
- padding: 0 0 0.25% 0;
- animation: 0s linkIconIn;
- font-size: 103%;
- }
</style>
<dbp-translated subscribe="lang">
<div slot="de">
diff --git a/src/dbp-official-signature-pdf-upload.js b/src/dbp-official-signature-pdf-upload.js
index f55b018f34080aea6413bb58f060fd42660fa8d2..81575ab910c614713b390d938fd16272d19895e6 100644
--- a/src/dbp-official-signature-pdf-upload.js
+++ b/src/dbp-official-signature-pdf-upload.js
@@ -317,6 +317,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
${commonStyles.getButtonCSS()}
${commonStyles.getNotificationCSS()}
${SignatureStyles.getSignatureCss()}
+
`;
}
@@ -427,8 +428,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
<span class="bold-filename">${file.name}</span>
(${humanFileSize(file.contentSize)})
</span>
- <button
- class="button close"
+ <button class="button"
title="${i18n.t('official-pdf-upload.download-file-button-title')}"
@click="${() => {
this.downloadFileClickHandler(file, 'file-block-' + id);
@@ -688,7 +688,7 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
this.currentFile !== undefined ? this.currentFile.size : 0
)})
</div>
- <button class="button is-cancel" @click="${this.hidePDF}">
+ <button class="is-cancel" @click="${this.hidePDF}">
<dbp-icon name="close"></dbp-icon>
</button>
</div>
@@ -721,8 +721,8 @@ class OfficialSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElem
: 0
)})
</div>
- <button
- class="button is-cancel annotation"
+ <button
+ class="is-cancel annotation"
@click="${this.hideAnnotationView}">
<dbp-icon name="close" id="close-icon"></dbp-icon>
</button>
diff --git a/src/dbp-pdf-annotation-view.js b/src/dbp-pdf-annotation-view.js
index edc199af2de49958fe195d6d756927844c6da9d9..2bf87ee3afa6f7022ecaf85bd8220962e06a1326 100644
--- a/src/dbp-pdf-annotation-view.js
+++ b/src/dbp-pdf-annotation-view.js
@@ -247,11 +247,12 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
}
.border {
- border-top: var(--dbp-border-dark);
- padding-bottom: 0.5em;
+ border-top: var(--dbp-border);
+ padding-bottom: .5em;
}
+
.border-wrapper {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
border-bottom-width: 0;
border-top-width: 0;
@@ -287,14 +288,14 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
#fields-wrapper {
position: relative;
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
padding: 0.5em;
padding-bottom: 0.8em;
border-top-width: 0;
}
#pdf-meta {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
padding: 0.5em;
border-bottom-width: 0;
border-top-width: 0;
@@ -305,8 +306,8 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
padding-left: 8px;
font-weight: 300;
color: inherit;
- border: var(--dbp-border-dark);
- border-color: var(--dbp-text-muted-dark);
+ border: var(--dbp-border);
+ border-color: var(--dbp-muted);
line-height: 100%;
height: 28px;
width: 100%;
diff --git a/src/dbp-pdf-preview.js b/src/dbp-pdf-preview.js
index cc6e8b649cb3095c617432c1cb27ce9d541bc0e7..51e48bbac9bfd960cd162a81f5a9f0fee3ac154f 100644
--- a/src/dbp-pdf-preview.js
+++ b/src/dbp-pdf-preview.js
@@ -542,7 +542,7 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
position: absolute;
top: 0;
left: 0;
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
}
#annotation-layer {
@@ -588,21 +588,21 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
.nav-buttons > * {
margin: 2px;
}
-
+
input[type='number'] {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
padding: 0 0.3em;
}
#pdf-meta {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
padding: 0.54em;
border-bottom-width: 0;
border-top-width: 0;
}
.button.is-cancel {
- color: var(--dbp-danger-dark);
+ color: var(--dbp-danger);
}
.error-message {
@@ -616,6 +616,18 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
#canvas-wrapper canvas.upper-canvas {
border: unset;
}
+
+
+ input[type="number"]{
+ background-color: var(--dbp-background);
+ }
+
+ dbp-mini-spinner{
+ margin: auto;
+ display: block;
+ width: 17px;
+ }
+
`;
}
diff --git a/src/dbp-qualified-signature-pdf-upload.js b/src/dbp-qualified-signature-pdf-upload.js
index 025c6490cbcf497b146b473180c3279bce6ac0ff..d06fa3ac4345e3e1867492d3ba1bd8ece58e68ab 100644
--- a/src/dbp-qualified-signature-pdf-upload.js
+++ b/src/dbp-qualified-signature-pdf-upload.js
@@ -437,7 +437,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
}
#external-auth .button.is-cancel {
- color: var(--dbp-danger-dark);
+ color: var(--dbp-danger);
}
#iframe {
@@ -555,11 +555,10 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
<div class="file-block" id="file-block-${id}">
<div class="header">
<span class="filename">
- <span class="bold-filename">${file.name}</span>
+ <span class="bold-filename">${file.name}</span>
(${humanFileSize(file.contentSize)})
</span>
- <button
- class="button close"
+ <button class="button"
title="${i18n.t('qualified-pdf-upload.download-file-button-title')}"
@click="${() => {
this.downloadFileClickHandler(file, 'file-block-' + id);
@@ -841,7 +840,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
this.currentFile !== undefined ? this.currentFile.size : 0
)})
</div>
- <button class="button is-cancel" @click="${this.hidePDF}">
+ <button class="is-cancel" @click="${this.hidePDF}">
<dbp-icon name="close"></dbp-icon>
</button>
</div>
@@ -874,8 +873,8 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
: 0
)})
</div>
- <button
- class="button is-cancel annotation"
+ <button
+ class="is-cancel annotation"
@click="${this.hideAnnotationView}">
<dbp-icon name="close" id="close-icon"></dbp-icon>
</button>
@@ -913,8 +912,8 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitEle
: 0
)})
</div>
- <button
- class="button is-cancel"
+ <button
+ class="is-cancel"
title="${i18n.t(
'qualified-pdf-upload.stop-signing-process-button'
)}"
diff --git a/src/dbp-signature-verification-full.js b/src/dbp-signature-verification-full.js
index 562199547c984fc74432de5676b233da24f02cd7..df04042012bda7aa39a672af883631a7e60c7b23 100644
--- a/src/dbp-signature-verification-full.js
+++ b/src/dbp-signature-verification-full.js
@@ -680,7 +680,7 @@ class SignatureVerificationFull extends ScopedElementsMixin(DBPSignatureLitEleme
this.currentFile !== undefined ? this.currentFile.size : 0
)})
</div>
- <button class="button is-cancel" @click="${this.hidePDF}">
+ <button class="is-cancel" @click="${this.hidePDF}">
<dbp-icon name="close"></dbp-icon>
</button>
</div>
diff --git a/src/dbp-signature-verification.js b/src/dbp-signature-verification.js
index d69b5b8e9ba1af6e944d175f152667ce5f196116..74aca8ba513abd3ed792893866de755f0eeab978 100644
--- a/src/dbp-signature-verification.js
+++ b/src/dbp-signature-verification.js
@@ -42,56 +42,20 @@ class SignatureVerification extends ScopedElementsMixin(DBPSignatureLitElement)
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS(false)}
-
+ ${commonStyles.getLinkCss()}
+
a {
- border-bottom: var(--dbp-border-dark);
+ border-bottom: var(--dbp-border);
+ border-color: var(--dbp-content);
padding: 0;
}
-
- a:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
- }
+
h2:first-child {
margin-top: 0;
margin-bottom: 0px;
}
- .int-link-internal {
- transition: background-color 0.15s, color 0.15s;
- border-bottom: var(--dbp-border-dark);
- }
-
- .int-link-internal:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
- }
-
- .int-link-internal:after {
- content: '\\00a0\\00a0\\00a0';
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: 73%;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0 0 3px;
- padding: 0 0 0.25% 0;
- animation: 0.15s linkIconOut;
- font-size: 103%;
- }
-
- .int-link-internal:hover::after {
- content: '\\00a0\\00a0\\00a0';
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: 73%;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0 0 3px;
- padding: 0 0 0.25% 0;
- animation: 0s linkIconIn;
- font-size: 103%;
- }
-
.subheadline {
font-style: italic;
padding-left: 2em;
diff --git a/src/styles.js b/src/styles.js
index da8fa237762b5532a42e89eb9e418d11642efb6c..ac1d8875cc476353dd307b2ba389bcdf8b9237e7 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -3,14 +3,16 @@ import {css} from 'lit';
export function getSignatureCss() {
// language=css
return css`
- #annotation-view .button.is-cancel {
+
+ #annotation-view button.is-cancel {
background: transparent;
border: none;
font-size: 1.5rem;
- color: var(--dbp-accent-dark);
+ color: var(--dbp-accent);
cursor: pointer;
padding: 0px;
padding-right: 2px;
+ margin-top: -5px;
}
#annotation-view .box-header,
@@ -44,7 +46,7 @@ export function getSignatureCss() {
#pdf-preview .box-header,
#annotation-view .box-header {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
border-bottom-width: 0;
padding: 0.5em 0.5em 0 0.5em;
}
@@ -88,12 +90,12 @@ export function getSignatureCss() {
.error,
#cancel-signing-process {
- color: var(--dbp-danger-dark);
+ color: var(--dbp-danger);
}
#cancel-signing-process:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color);
+ background-color: var(--dbp-hover-background-color);
}
/* using dbp-icon doesn't work */
@@ -101,9 +103,12 @@ export function getSignatureCss() {
a > [name='close'] {
font-size: 0.8em;
}
-
+
a > [name='close'] {
- color: var(--dbp-accent-dark);
+ color: var(--dbp-accent);
+ }
+ .button.close dbp-icon{
+ margin-left: -2px;
}
.empty-queue {
@@ -126,7 +131,7 @@ export function getSignatureCss() {
.file-block,
.box {
- border: var(--dbp-border-dark);
+ border: var(--dbp-border);
padding: 10px;
}
@@ -165,7 +170,7 @@ export function getSignatureCss() {
.file-block .error-line {
margin-top: 6px;
- color: var(--dbp-danger-dark);
+ color: var(--dbp-danger);
}
.file-block.error div.bottom-line {
@@ -190,8 +195,14 @@ export function getSignatureCss() {
font-weight: bold;
}
- #pdf-preview .button.is-cancel {
- color: var(--dbp-accent-dark);
+ #pdf-preview button.is-cancel {
+ background: transparent;
+ border: none;
+ font-size: 1.5rem;
+ color: var(--dbp-accent);
+ cursor: pointer;
+ padding: 0px 2px ;
+ margin-top: -5px;
}
.is-right {
@@ -239,15 +250,16 @@ export function getSignatureCss() {
margin-top: 2rem;
/*padding-top: 2rem;*/
}
-
- .border {
- border-top: var(--dbp-border-dark);
+
+ .border{
+ border-top: var(--dbp-border);
margin-top: 2rem;
padding-top: 2rem;
}
.placement-missing {
- border: solid 2px var(--dbp-danger-dark);
+ border: var(--dbp-danger);
+ border-width: 2px;
border-radius: var(--dbp-border-radius);
}
@@ -269,8 +281,8 @@ export function getSignatureCss() {
left: 0;
right: 0;
bottom: 0;
- background-color: var(--dbp-base-light);
- color: var(--dbp-text-dark);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
overflow-y: scroll;
}
diff --git a/src/textswitch.js b/src/textswitch.js
index 989992a94680ef10f6dcadc66ce49bd62429d410..d38693b87ce5b253467fd55fe9513e6ba2a781d0 100644
--- a/src/textswitch.js
+++ b/src/textswitch.js
@@ -65,8 +65,8 @@ export class TextSwitch extends LitElement {
}
.active {
- background-color: var(--dbp-secondary-dark) !important;
- color: var(--dbp-text-light) !important;
+ background-color: var(--dbp-secondary-surface) !important;
+ color: var(--dbp-on-secondary-surface) !important;
}
.button {
@@ -74,8 +74,8 @@ export class TextSwitch extends LitElement {
}
.button:hover {
- background-color: var(--dbp-hover-base) !important;
- color: var(--dbp-hover-text) !important;
+ background-color: var(--dbp-hover-background-color) !important;
+ color: var(--dbp-hover-color) !important;
}
`;
}