55 lines
2.1 KiB
SCSS
55 lines
2.1 KiB
SCSS
:host, :root {
|
|
/* Color Memo
|
|
Just refer - Photon's dark color
|
|
--button-primary-bgcolor: #0060DF;
|
|
--button-primary-hover-bgcolor: #003EAA;
|
|
--button-primary-active-bgcolor: #002275;
|
|
--lwt-brighttext-url-color: #74c0ff;
|
|
--lwt-toolbarbutton-icon-fill-attention: #45a1ff;
|
|
|
|
Just refer - Proton's light color
|
|
--in-content-accent-color: #0a84ff;
|
|
--in-content-accent-color-active: #0060df;
|
|
--in-content-primary-button-background: #0061e0;
|
|
--in-content-primary-button-background-hover: #0250bb;
|
|
--in-content-primary-button-background-active: #053e94;
|
|
|
|
--blue-40: #45a1ff; rgb(69, 161, 255)
|
|
--blue-50: #0a84ff; rgb(10, 132, 255)
|
|
--blue-60: #0060df; rgb(0, 96, 223)
|
|
--blue-70: #003eaa; rgb(0, 62, 170)
|
|
--blue-80: #002275; rgb(0, 34, 117)
|
|
|
|
Relation
|
|
lighten(#0060df, 29%): #74b0ff;
|
|
lighten(#0060df, 19.8%): #4595ff
|
|
lighten(#0060df, 8.3%): #0a74ff
|
|
#0060df
|
|
darken(#0060df, 15.5%): #003e90;
|
|
darken(#0060df, 28.1%): #002250;
|
|
*/
|
|
--blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
|
|
--blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
|
|
}
|
|
|
|
@mixin DarkBlueContent() {
|
|
--in-content-primary-button-text-color: var(--in-content-page-color) !important;
|
|
--in-content-primary-button-background: var(--blue-60) !important;
|
|
--in-content-primary-button-background-hover: var(--blue-50) !important;
|
|
--in-content-primary-button-background-active: var(--blue-40) !important;
|
|
|
|
--in-content-focus-outline-color: var(--blue-40) !important;
|
|
--in-content-accent-color: var(--blue-40) !important;
|
|
--in-content-accent-color-active: var(--blue-30) !important;
|
|
|
|
--in-content-table-background: rgb(35, 34, 43) !important;
|
|
--in-content-table-border-color: rgba(249,249,250,0.2) !important;
|
|
--in-content-table-header-background: rgb(5, 64, 150) !important;
|
|
--in-content-table-header-color: var(--in-content-page-color) !important;
|
|
|
|
--in-content-link-color: var(--blue-40) !important;
|
|
--in-content-link-color-hover: var(--blue-30) !important;
|
|
--in-content-link-color-active: var(--blue-20) !important;
|
|
--in-content-link-color-visited: var(--blue-40) !important;
|
|
}
|