mirror of
https://github.com/bitwarden/browser
synced 2025-12-23 11:43:46 +00:00
86 lines
2.4 KiB
CSS
86 lines
2.4 KiB
CSS
@import "../../../../libs/components/src/tw-theme.css";
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
* 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 {
|
|
.tw-h1 {
|
|
@apply tw-text-3xl tw-font-semibold;
|
|
}
|
|
|
|
.tw-btn {
|
|
@apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded tw-transition tw-border tw-border-solid tw-text-center tw-no-underline hover:tw-no-underline focus:tw-outline-none;
|
|
}
|
|
|
|
.tw-btn-secondary {
|
|
@apply tw-btn;
|
|
|
|
@apply tw-bg-transparent tw-border-text-muted hover:tw-bg-text-muted hover:tw-border-text-muted hover:!tw-text-contrast disabled:tw-bg-transparent disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60 disabled:tw-cursor-not-allowed;
|
|
@apply tw-text-muted !important;
|
|
}
|
|
|
|
/**
|
|
* 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, 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");
|
|
}
|
|
}
|