mirror of
https://github.com/bitwarden/browser
synced 2026-01-30 16:23:53 +00:00
108 lines
2.6 KiB
CSS
108 lines
2.6 KiB
CSS
@import "../../../../libs/components/src/tw-theme-preflight.css";
|
|
|
|
/*
|
|
* Web specific global styling.
|
|
*
|
|
* Be mindful of what is added here. Generally use Tailwind classes directly in Angular components.
|
|
*
|
|
* Some valid scenarios for adding styles here:
|
|
*
|
|
* - Duplicated styling for CL components used in non Angular pages like connectors and 404.
|
|
* - Shared styles like Logo.
|
|
*/
|
|
@layer components {
|
|
body {
|
|
@apply tw-bg-background;
|
|
@apply tw-text-main;
|
|
}
|
|
|
|
/**
|
|
* Stripe form control styling
|
|
*/
|
|
.tw-stripe-form-control {
|
|
@apply tw-block tw-w-full tw-h-11 tw-rounded-lg tw-bg-background tw-border tw-border-solid tw-border-secondary-500 tw-px-3 tw-py-2 tw-text-main;
|
|
|
|
@apply hover:tw-border-primary-600;
|
|
|
|
@apply focus:tw-outline-none focus:tw-border-primary-600 focus:tw-border-2 focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-600;
|
|
|
|
&.is-invalid {
|
|
@apply tw-border-danger-600 hover:tw-border-danger-700;
|
|
}
|
|
|
|
&.is-focused {
|
|
@apply tw-outline-none tw-border-primary-600 focus:tw-border-primary-600;
|
|
|
|
&.is-invalid {
|
|
@apply tw-border-danger-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Loading page
|
|
*/
|
|
body.layout_frontend {
|
|
/* We apply the background color here since body classes are dynamically added and removed */
|
|
@apply tw-bg-background-alt !important;
|
|
|
|
/* Spinner requires fixed height and width to appear centered */
|
|
.spinner-container {
|
|
@apply tw-fixed tw-inset-2/4 -tw-translate-x-1/2 -tw-translate-y-1/2;
|
|
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Logo on old `FrontendLayoutComponent`. Remove when the component is gone.
|
|
*/
|
|
img.logo {
|
|
display: block;
|
|
height: 43px;
|
|
margin: 0 auto;
|
|
width: 284px;
|
|
}
|
|
|
|
/**
|
|
* Logo, used both in loading and on "frontend" pages.
|
|
*/
|
|
img.new-logo-themed {
|
|
@apply tw-block;
|
|
|
|
width: 128px;
|
|
}
|
|
.theme_light img.new-logo-themed {
|
|
content: url("../images/logo.svg");
|
|
}
|
|
.theme_dark img.new-logo-themed {
|
|
content: url("../images/logo-white.svg");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 404 page styling.
|
|
*/
|
|
@layer components {
|
|
.tw-h1 {
|
|
@apply tw-text-3xl tw-font-medium;
|
|
}
|
|
|
|
.tw-btn {
|
|
@apply tw-font-medium tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
|
|
}
|
|
|
|
.tw-btn-secondary {
|
|
@apply tw-btn;
|
|
|
|
@apply tw-bg-transparent tw-text-primary-600 tw-border-primary-600 hover:tw-bg-hover-default;
|
|
}
|
|
|
|
.tw-link {
|
|
@apply tw-font-medium hover:tw-underline hover:tw-decoration-1;
|
|
|
|
@apply tw-text-primary-600 hover:tw-text-primary-700 focus-visible:before:tw-ring-primary-600;
|
|
}
|
|
}
|