consent.software/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(elements): Improved styling consistency across several components

Browse Source
This commit is contained in:
Philipp Kunz 2025-01-16 00:28:47 +01:00
parent fb15f62189
commit 1e091ec600
6 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@ -1,5 +1,13 @@
# Changelog # Changelog
## 2025-01-16 - 1.3.5 - fix(elements)
Improved styling consistency across several components
- Increased box-shadow intensity for better visual separation
- Changed border-bottom styles to use dotted lines for consistency
- Adjusted line-height for better vertical spacing
- Fixed border-right gradient on itemBox for better styling
## 2025-01-14 - 1.3.4 - fix(dependencies) ## 2025-01-14 - 1.3.4 - fix(dependencies)
Corrected build script and updated @consent.software/webclient dependency version Corrected build script and updated @consent.software/webclient dependency version

2
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@consent.software/catalog', name: '@consent.software/catalog',
version: '1.3.4', version: '1.3.5',
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.' description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
} }

9
ts_web/elements/consentsoftware-cookieconsent.ts
View File

@ -75,8 +75,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
display: block; display: block;
color: var(--text-color); color: var(--text-color);
background: var(--background-color); background: var(--background-color);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
position: realtive; position: realtive;
border: 1px dotted rgba(255, 255, 255, 0.1);
border-top: 1px solid var(--accent-color); border-top: 1px solid var(--accent-color);
border-radius: 16px; border-radius: 16px;
max-width: 1100px; max-width: 1100px;
@ -142,9 +143,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
.info-container { .info-container {
color: var(--text-color); color: var(--text-color);
text-align: center; text-align: center;
line-height: 2em; line-height: 3em;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px dotted rgba(255, 255, 255, 0.1);
font-size: 0.8em; font-size: 0.8em;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
@ -269,7 +270,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
await this.updated(); await this.updated();
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) { if (pageOverlay) {
pageOverlay.style.background = 'rgba(0, 0, 0, 0.5)'; pageOverlay.style.background = 'rgba(0, 0, 0, 0.1)';
pageOverlay.style.backdropFilter = 'blur(2px)'; pageOverlay.style.backdropFilter = 'blur(2px)';
} }
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox'); const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');

4
ts_web/elements/consentsoftware-header.ts
View File

@ -11,10 +11,10 @@ export class ConsentsoftwareHeader extends LitElement {
public static styles = css` public static styles = css`
:host { :host {
display: block; display: block;
line-height: 2em; line-height: 3em;
text-align: center; text-align: center;
font-family: ${shared.fontStack}; font-family: ${shared.fontStack};
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
} }
.heading { .heading {

5
ts_web/elements/consentsoftware-mainselection.ts
View File

@ -16,8 +16,6 @@ export class ConsentsoftwareMainSelection extends LitElement {
:host { :host {
display: block; display: block;
position: relative; position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.maincontainer { .maincontainer {
@ -28,7 +26,8 @@ export class ConsentsoftwareMainSelection extends LitElement {
.itemBox { .itemBox {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid;
border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
} }
.itemBox:last-child { .itemBox:last-child {
border-right: none; border-right: none;

2
ts_web/elements/consentsoftware-tabs.ts
View File

@ -44,7 +44,7 @@ export class ConsentsoftwareTabs extends LitElement {
<div class="tabs"> <div class="tabs">
<div class="tab" @click=${this.handleClick}>Consent</div> <div class="tab" @click=${this.handleClick}>Consent</div>
<div class="tab" @click=${this.handleClick}>Details</div> <div class="tab" @click=${this.handleClick}>Details</div>
<div class="tab" @click=${this.handleClick}>About Cookies</div> <div class="tab" @click=${this.handleClick}>Cookie Policy + Legal Info</div>
</div> </div>
<div class="selector"></div> <div class="selector"></div>
`; `;