fix(elements): Improved styling consistency across several components

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

View File

@ -1,5 +1,13 @@
# 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)
Corrected build script and updated @consent.software/webclient dependency version

View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
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.'
}

View File

@ -75,8 +75,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
display: block;
color: var(--text-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;
border: 1px dotted rgba(255, 255, 255, 0.1);
border-top: 1px solid var(--accent-color);
border-radius: 16px;
max-width: 1100px;
@ -142,9 +143,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
.info-container {
color: var(--text-color);
text-align: center;
line-height: 2em;
line-height: 3em;
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;
color: rgba(255, 255, 255, 0.5);
}
@ -269,7 +270,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
await this.updated();
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.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)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');

View File

@ -11,10 +11,10 @@ export class ConsentsoftwareHeader extends LitElement {
public static styles = css`
:host {
display: block;
line-height: 2em;
line-height: 3em;
text-align: center;
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 {

View File

@ -16,8 +16,6 @@ export class ConsentsoftwareMainSelection extends LitElement {
:host {
display: block;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.maincontainer {
@ -28,7 +26,8 @@ export class ConsentsoftwareMainSelection extends LitElement {
.itemBox {
padding: 16px;
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 {
border-right: none;

View File

@ -44,7 +44,7 @@ export class ConsentsoftwareTabs extends LitElement {
<div class="tabs">
<div class="tab" @click=${this.handleClick}>Consent</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 class="selector"></div>
`;