mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
3c83165b4e
* add custom directive to use the angular CDK resize textarea directive * swap to textarea to allow for full content to be shown when view text or hidden custom fields * add text-field styling to web sass file * move angular import to CL scss file * add `textarea` to selector to enforce directive usage only on textareas
165 lines
4.2 KiB
CSS
165 lines
4.2 KiB
CSS
@import "@angular/cdk/a11y-prebuilt.css";
|
|
@import "@angular/cdk/text-field-prebuilt.css";
|
|
@import "./reset.css";
|
|
@import "./popover/popover.component.css";
|
|
@import "./toast/toast.tokens.css";
|
|
@import "./toast/toastr.css";
|
|
@import "./search/search.component.css";
|
|
|
|
:root {
|
|
--color-transparent-hover: rgb(0 0 0 / 0.02);
|
|
--color-shadow: 168 179 200;
|
|
|
|
--color-background: 255 255 255;
|
|
--color-background-alt: 243 246 249;
|
|
--color-background-alt2: 23 92 219;
|
|
--color-background-alt3: 26 65 172;
|
|
--color-background-alt4: 2 15 102;
|
|
|
|
--color-primary-100: 219 229 246;
|
|
--color-primary-300: 121 161 233;
|
|
--color-primary-600: 23 93 220;
|
|
--color-primary-700: 26 65 172;
|
|
|
|
--color-secondary-100: 230 233 239;
|
|
--color-secondary-300: 168 179 200;
|
|
--color-secondary-500: 90 109 145;
|
|
--color-secondary-600: 83 99 131;
|
|
--color-secondary-700: 63 75 99;
|
|
|
|
--color-info-100: 219 229 246;
|
|
--color-info-600: 121 161 233;
|
|
--color-info-700: 26 65 172;
|
|
|
|
--color-warning-100: 255 248 228;
|
|
--color-warning-600: 255 191 0;
|
|
--color-warning-700: 172 88 0;
|
|
|
|
--color-danger-100: 255 236 239;
|
|
--color-danger-600: 203 38 58;
|
|
--color-danger-700: 149 27 42;
|
|
|
|
--color-success-100: 191 236 195;
|
|
--color-success-600: 12 128 24;
|
|
--color-success-700: 11 111 21;
|
|
|
|
--color-notification-100: 255 225 247;
|
|
--color-notification-600: 192 17 118;
|
|
|
|
--color-art-primary: 2 15 102;
|
|
--color-art-accent: 44 221 223;
|
|
|
|
--color-text-main: 27 32 41;
|
|
--color-text-muted: 96 109 145;
|
|
--color-text-contrast: 255 255 255;
|
|
--color-text-alt2: 255 255 255;
|
|
--color-text-code: 192 17 118;
|
|
|
|
--color-marketing-logo: 23 93 220;
|
|
|
|
--tw-ring-offset-color: #ffffff;
|
|
}
|
|
|
|
.theme_light {
|
|
/* should be left empty as white is the default */
|
|
}
|
|
|
|
.theme_dark {
|
|
--color-transparent-hover: rgb(255 255 255 / 0.02);
|
|
--color-shadow: 0 0 0;
|
|
|
|
--color-background: 32 39 51;
|
|
--color-background-alt: 18 26 39;
|
|
--color-background-alt2: 47 52 61;
|
|
--color-background-alt3: 48 57 70;
|
|
--color-background-alt4: 18 26 39;
|
|
|
|
--color-primary-100: 26 39 78;
|
|
--color-primary-300: 26 65 172;
|
|
--color-primary-600: 101 171 255;
|
|
--color-primary-700: 170 195 239;
|
|
|
|
--color-secondary-100: 48 57 70;
|
|
--color-secondary-300: 82 91 106;
|
|
--color-secondary-500: 121 128 142;
|
|
--color-secondary-600: 143 152 166;
|
|
--color-secondary-700: 158 167 181;
|
|
|
|
--color-success-100: 11 111 21;
|
|
--color-success-600: 107 241 120;
|
|
--color-success-700: 191 236 195;
|
|
|
|
--color-danger-100: 149 27 42;
|
|
--color-danger-600: 255 78 99;
|
|
--color-danger-700: 255 236 239;
|
|
|
|
--color-warning-100: 172 88 0;
|
|
--color-warning-600: 255 191 0;
|
|
--color-warning-700: 255 248 228;
|
|
|
|
--color-info-100: 26 65 172;
|
|
--color-info-600: 121 161 233;
|
|
--color-info-700: 219 229 246;
|
|
|
|
--color-notification-100: 117 37 83;
|
|
--color-notification-600: 255 143 208;
|
|
|
|
--color-art-primary: 243 246 249;
|
|
--color-art-accent: 44 221 233;
|
|
|
|
--color-text-main: 243 246 249;
|
|
--color-text-muted: 136 152 181;
|
|
--color-text-contrast: 18 26 39;
|
|
--color-text-alt2: 255 255 255;
|
|
--color-text-code: 255 143 208;
|
|
|
|
--color-marketing-logo: 255 255 255;
|
|
|
|
--tw-ring-offset-color: #1f242e;
|
|
}
|
|
|
|
/**
|
|
* tw-break-words does not work with table cells:
|
|
* https://github.com/tailwindlabs/tailwindcss/issues/835
|
|
*/
|
|
td.tw-break-words {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/**
|
|
* tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
|
|
* https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
|
|
*/
|
|
summary.tw-list-none::marker,
|
|
summary.tw-list-none::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Arbitrary values can't be used with `text-align`:
|
|
* https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
|
|
*/
|
|
.tw-text-unset {
|
|
text-align: unset;
|
|
}
|
|
|
|
/**
|
|
* Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
|
|
* When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
|
|
* CL-483
|
|
*/
|
|
.cdk-drag-preview,
|
|
.cdk-overlay-container,
|
|
.cdk-global-overlay-wrapper,
|
|
.cdk-overlay-connected-position-bounding-box,
|
|
.cdk-overlay-backdrop,
|
|
.cdk-overlay-pane {
|
|
z-index: 2000 !important;
|
|
}
|
|
|
|
.cdk-global-scrollblock {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|