mirror of
https://github.com/bitwarden/browser
synced 2025-12-20 10:13:31 +00:00
9152c3203f
Migrate the index.html to use tailwind instead of bootstrap * Extracted some more global styles to override the bootstrap styles for layout frontend. We should revisit this when we remove bootstrap. * Removed Angular specific logo for anon pages. Now uses the same css class as loading page to prevent duplicated assets.
64 lines
1.7 KiB
CSS
64 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import "../../../../libs/components/src/tw-theme.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 {
|
|
.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;
|
|
}
|
|
|
|
/**
|
|
* 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");
|
|
}
|
|
}
|