mirror of
https://github.com/bitwarden/web
synced 2025-12-11 13:53:17 +00:00
cf24113924
* Stylesheets * Theme Configuration * Options Area * swal2 style Missed the swal2 styling and improved the table theming * Icon styling * Fix theme not saving * Update English Remove colour to make it more translatable between English and American * Update messages.json * Login logo * dropdown and login logo * btn-link and totp fix Added a border for extra readability on the btn-link * Organisation Styling * Update messages.json * Update webauthn-fallback.ts Add missing semicolon and enable console.error bypass for tslint * Fix contrast issues Update the blue to match the browser extension and lighten the grey for text-muted variable * Add Paypal Container and Loading svg file * Update jslib * Password Generator contrast fix
150 lines
4.0 KiB
SCSS
150 lines
4.0 KiB
SCSS
$primary: #175DDC;
|
|
$primary-accent: #1252A3;
|
|
$secondary: #ced4da;
|
|
$secondary-alt: #1A3B66;
|
|
$success: #00a65a;
|
|
$info: #555555;
|
|
$warning: #bf7e16;
|
|
$danger: #dd4b39;
|
|
|
|
$theme-colors: (
|
|
"primary-accent": $primary-accent,
|
|
"secondary-alt": $secondary-alt,
|
|
);
|
|
|
|
$body-bg: #ffffff;
|
|
$body-color: #333333;
|
|
|
|
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
|
|
Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
|
|
|
|
$h1-font-size: 1.7rem;
|
|
$h2-font-size: 1.3rem;
|
|
$h3-font-size: 1rem;
|
|
$h4-font-size: 1rem;
|
|
$h5-font-size: 1rem;
|
|
$h6-font-size: 1rem;
|
|
|
|
$small-font-size: 90%;
|
|
$font-size-lg: 1.15rem;
|
|
$code-font-size: 100%;
|
|
|
|
$navbar-padding-y: .75rem;
|
|
$grid-gutter-width: 20px;
|
|
$card-spacer-y: .6rem;
|
|
|
|
$list-group-item-padding-y: .6rem;
|
|
$list-group-active-color: $body-color;
|
|
$list-group-active-bg: #ffffff;
|
|
$list-group-active-border-color: rgba(#000000, .125);
|
|
|
|
$dropdown-link-color: $body-color;
|
|
$dropdown-link-hover-bg: rgba(#000000, .06);
|
|
$dropdown-link-active-color: $dropdown-link-color;
|
|
$dropdown-link-active-bg: rgba(#000000, .1);
|
|
$dropdown-item-padding-x: 1rem;
|
|
|
|
$navbar-brand-font-size: 35px;
|
|
$navbar-brand-height: 35px;
|
|
$navbar-brand-padding-y: 0;
|
|
$navbar-dark-color: rgba(#ffffff, .7);
|
|
$navbar-dark-hover-color: rgba(#ffffff, .9);
|
|
$navbar-nav-link-padding-x: 0.8rem;
|
|
|
|
$input-bg: #fbfbfb;
|
|
$input-focus-bg: #ffffff;
|
|
$input-disabled-bg: #e0e0e0;
|
|
$input-placeholder-color: #b4b4b4;
|
|
|
|
$table-accent-bg: rgba(#000000, .02);
|
|
$table-hover-bg: rgba(#000000, .03);
|
|
|
|
$modal-backdrop-opacity: 0.3;
|
|
$btn-font-weight: 600;
|
|
$lead-font-weight: normal;
|
|
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 1px,
|
|
md: 2px,
|
|
lg: 3px,
|
|
xl: 4px
|
|
);
|
|
|
|
$text-color: #333333;
|
|
$border-color: #ced4da;
|
|
|
|
$themes: (
|
|
Light: (
|
|
primary: $primary,
|
|
textColor: $text-color,
|
|
textMuted: #6c757d,
|
|
linkColor: $primary,
|
|
iconHover: $body-color,
|
|
borderColor: $border-color,
|
|
backgroundColor: $body-bg,
|
|
inputBackgroundColor: #fbfbfb,
|
|
inputBorderColor: $border-color,
|
|
bgPrimaryColor: $primary,
|
|
borderPrimaryColor: $primary,
|
|
buttonBorderColor: $secondary,
|
|
buttonBackgroundColor: $primary,
|
|
buttonBackgroundColorHover: $primary,
|
|
buttonBorderColorHover: $primary,
|
|
buttonTextColor: $primary,
|
|
warning: $warning,
|
|
loginLogo: url("../images/logo-dark@2x.png"),
|
|
totpFilter: invert(0) grayscale(0),
|
|
imgLoading: url('../images/loading.svg'),
|
|
cdkDraggingBackground: #FFFFFF,
|
|
tableHover: #333333,
|
|
navActiveBackground: #FFFFFF,
|
|
pwNumber: #007fde,
|
|
pwSpecial: #c40800
|
|
),
|
|
Dark: (
|
|
primary: $secondary-alt,
|
|
textColor: #fbfbfb,
|
|
textMuted: #C1C4C8,
|
|
linkColor: #46ace7,
|
|
iconHover: #555555,
|
|
borderColor: #111111,
|
|
backgroundColor: #222222,
|
|
inputBackgroundColor: #1A1A1A,
|
|
inputBorderColor: #111111,
|
|
bgPrimaryColor: $secondary-alt,
|
|
borderPrimaryColor: $secondary-alt,
|
|
buttonBorderColor: $secondary-alt,
|
|
buttonBackgroundColor: $secondary-alt,
|
|
buttonBackgroundColorHover: $primary-accent,
|
|
buttonBorderColorHover: $secondary-alt,
|
|
buttonTextColor: $secondary,
|
|
warning: $warning,
|
|
loginLogo: url("../images/logo-white@2x.png"),
|
|
imgFilter: invert(1) grayscale(1),
|
|
imgLoading: url('../images/loading-white.svg'),
|
|
cdkDraggingBackground: #000000,
|
|
tableHover: $secondary,
|
|
navActiveBackground: #1A1A1A,
|
|
pwNumber: #51b5ff,
|
|
pwSpecial: #ff8c87
|
|
),
|
|
);
|
|
|
|
@mixin themify($themes: $themes) {
|
|
@each $theme, $map in $themes {
|
|
html.theme#{$theme} & {
|
|
$theme-map: () !global;
|
|
@each $key, $submap in $map {
|
|
$value: map-get(map-get($themes, $theme), '#{$key}');
|
|
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
|
}
|
|
@content;
|
|
$theme-map: null !global;
|
|
}
|
|
}
|
|
}
|
|
|
|
@function themed($key) {
|
|
@return map-get($theme-map, $key);
|
|
} |