mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-28 01:29:05 +01:00
Switch some CSS colors from specific values to variables
This commit is contained in:
parent
833a9a1c4c
commit
7559ae4f21
@ -55,12 +55,12 @@ export const cropperStyles = css`
|
||||
}
|
||||
|
||||
.cropper-drag-box {
|
||||
background-color: #fff;
|
||||
background-color: var(--sl-color-neutral-1000);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cropper-modal {
|
||||
background-color: #000;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@ export const cropperStyles = css`
|
||||
display: block;
|
||||
height: 100%;
|
||||
outline: 1px solid #39f;
|
||||
outline-color: rgba(51, 153, 255, 0.75);
|
||||
outline-color: var(--sl-color-primary-600);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
@ -110,7 +110,7 @@ export const cropperStyles = css`
|
||||
|
||||
.cropper-center::before,
|
||||
.cropper-center::after {
|
||||
background-color: #eee;
|
||||
background-color: var(--sl-color-neutral-100);
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -141,13 +141,13 @@ export const cropperStyles = css`
|
||||
}
|
||||
|
||||
.cropper-face {
|
||||
background-color: #fff;
|
||||
background-color: var(--sl-color-neutral-1000);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cropper-line {
|
||||
background-color: #39f;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.cropper-line.line-e {
|
||||
@ -179,7 +179,7 @@ export const cropperStyles = css`
|
||||
}
|
||||
|
||||
.cropper-point {
|
||||
background-color: #39f;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
height: 5px;
|
||||
opacity: 0.75;
|
||||
width: 5px;
|
||||
@ -263,7 +263,7 @@ export const cropperStyles = css`
|
||||
}
|
||||
|
||||
.cropper-point.point-se::before {
|
||||
background-color: #39f;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
bottom: -50%;
|
||||
content: ' ';
|
||||
display: block;
|
||||
|
@ -45,7 +45,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
|
||||
}
|
||||
::slotted(a) {
|
||||
cursor: pointer;
|
||||
color: #26537c;
|
||||
color: var(--sl-color-primary-700);
|
||||
text-decoration: none;
|
||||
display: inherit;
|
||||
}`
|
||||
|
@ -210,7 +210,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
|
||||
}
|
||||
.dialog__panel {
|
||||
border: 1px solid silver;
|
||||
box-shadow: -2px 1px 9px 3px #b4b4b4;
|
||||
box-shadow: -2px 1px 9px 3px var(--sl-color-gray-400);
|
||||
min-width: 250px;
|
||||
touch-action: none;
|
||||
}
|
||||
@ -223,7 +223,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
|
||||
user-select: none;
|
||||
}
|
||||
.dialog__close {
|
||||
background-color: #f3f3f3;
|
||||
background-color: var(--sl-color-gray-100);
|
||||
padding: 0;
|
||||
order: 99;
|
||||
}
|
||||
@ -234,7 +234,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 5px;
|
||||
border-top: 1px solid silver;
|
||||
border-top: 1px solid var(--sl-color-gray-400);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
|
@ -195,7 +195,7 @@ export default css`
|
||||
|
||||
:host([readonly][rows]) .hover__popup::part(popup) {
|
||||
z-index: var(--sl-z-index-dropdown);
|
||||
background-color: white;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
@ -212,7 +212,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
|
||||
|
||||
:host([readonly][multiple][rows]) .hover__popup::part(popup) {
|
||||
z-index: var(--sl-z-index-dropdown);
|
||||
background-color: white;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
:host([ readonly ][ multiple ][ rows ]) .hover__popup .select__tags {
|
||||
|
@ -172,7 +172,7 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
|
||||
margin-left: 0px;
|
||||
height: var(--sl-input-height-medium);
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
z-index: var(--sl-z-index-dropdown);
|
||||
}
|
||||
|
||||
|
@ -249,21 +249,17 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
sl-tree-item {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
sl-tree-item.drop-hover {
|
||||
background-color: #0a5ca5;
|
||||
background-color: var(--primary-background-color);
|
||||
}
|
||||
|
||||
sl-tree-item.drop-hover sl-tree-item {
|
||||
background-color: white;
|
||||
background-color: var(--sl-color-neutral-1000);
|
||||
}
|
||||
|
||||
sl-badge::part(base) {
|
||||
|
||||
background-color: rgb(130, 130, 130);
|
||||
background-color: var(--sl-color-neutral-500);
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
|
@ -25,7 +25,7 @@ export class Et2UrlReadonly extends Et2Description
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #26537c !important;
|
||||
color: var(--primary-background-color) !important;
|
||||
text-decoration: none !important;
|
||||
}`
|
||||
];
|
||||
|
@ -33,6 +33,7 @@
|
||||
* @see http://getbem.com/naming/ for what inspired naming convention
|
||||
*/
|
||||
:root {
|
||||
--primary-color: #26537C;
|
||||
--primary-background-color: #4177a2;
|
||||
--highlight-background-color: rgba(153, 204, 255, .4);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user