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