mirror of
https://github.com/bitwarden/browser
synced 2025-12-24 04:04:24 +00:00
PM-27364 delete bar.scss and drop bar.html internals (#17023)
* PM-27364 delete bar.scss and drop bar.html internals * no longer clear document
This commit is contained in:
Daniel Riera
GitHub
@@ -5,55 +5,5 @@
|
||||
<title>Bitwarden</title>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="notification-bar-outer-wrapper" class="outer-wrapper">
|
||||
<div class="logo-wrapper">
|
||||
<a href="https://vault.bitwarden.com" target="_blank" id="logo-link" rel="noreferrer">
|
||||
<img id="logo" alt="Bitwarden" />
|
||||
</a>
|
||||
</div>
|
||||
<div id="content"></div>
|
||||
<div class="notification-close">
|
||||
<button type="button" class="neutral" id="close-button">
|
||||
<svg id="close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
|
||||
<path
|
||||
d="M14.431 13.57 8.865 8.173a.388.388 0 0 1 0-.559l5.498-5.33a.388.388 0 0 0-.005-.553.415.415 0 0 0-.572-.006l-5.498 5.33a.416.416 0 0 1-.577 0L2.196 1.72a.403.403 0 0 0-.29-.12.422.422 0 0 0-.292.115.395.395 0 0 0-.12.283.386.386 0 0 0 .125.28l5.515 5.338a.388.388 0 0 1 0 .559L1.56 13.568a.397.397 0 0 0-.12.28c0 .105.044.205.12.28a.416.416 0 0 0 .578-.001l5.574-5.395a.416.416 0 0 1 .577 0l5.567 5.395a.422.422 0 0 0 .582.005.398.398 0 0 0 .12-.282.387.387 0 0 0-.125-.281Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<template id="template-add">
|
||||
<div class="inner-wrapper">
|
||||
<div id="add-text" class="notification-body"></div>
|
||||
<div class="add-change-cipher-buttons notification-actions">
|
||||
<button type="button" id="never-save" class="link"></button>
|
||||
<select id="select-folder"></select>
|
||||
<button type="button" id="add-edit" class="secondary"></button>
|
||||
<button type="button" id="add-save" class="primary"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="template-change">
|
||||
<div class="inner-wrapper">
|
||||
<div id="change-text" class="notification-body"></div>
|
||||
<div class="add-change-cipher-buttons notification-actions">
|
||||
<button type="button" id="change-edit" class="secondary"></button>
|
||||
<button type="button" id="change-save" class="primary"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="template-unlock">
|
||||
<div class="inner-wrapper">
|
||||
<div id="unlock-text" class="notification-body"></div>
|
||||
<div class="notification-actions">
|
||||
<button type="button" id="unlock-vault" class="primary"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@@ -1,304 +0,0 @@
|
||||
@import "../shared/styles/variables";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-family: $font-family-sans-serif;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("backgroundColor");
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
.outer-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
min-height: 42px;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include themify($themes) {
|
||||
border-color: themed("borderColor");
|
||||
border-bottom-color: themed("primaryColor");
|
||||
}
|
||||
|
||||
&.success-event {
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed("successColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.error-event {
|
||||
@include themify($themes) {
|
||||
border-bottom-color: themed("errorColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto max-content;
|
||||
}
|
||||
|
||||
.outer-wrapper > *,
|
||||
.inner-wrapper > * {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
border-color: rgba(themed("textColor"), 0.2);
|
||||
background-color: rgba(themed("textColor"), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#close {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
> path {
|
||||
@include themify($themes) {
|
||||
fill: themed("textColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
#content .inner-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
.notification-body {
|
||||
width: 100%;
|
||||
padding: 4px 38px 24px 42px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
|
||||
#never-save {
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#select-folder {
|
||||
width: 125px;
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
appearance: none;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 4px;
|
||||
background-size: 16px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("mutedTextColor");
|
||||
border-color: themed("mutedTextColor");
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.primary,
|
||||
.secondary {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
margin-right: 6px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&.success-message,
|
||||
&.error-message {
|
||||
padding: 4px 36px 6px 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.primary:not(.neutral) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("primaryColor");
|
||||
color: themed("textContrast");
|
||||
border-color: themed("primaryColor");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed("primaryColor"), 1.5%);
|
||||
color: darken(themed("textContrast"), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.secondary:not(.neutral) {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundColor");
|
||||
color: themed("mutedTextColor");
|
||||
border-color: themed("mutedTextColor");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themify($themes) {
|
||||
background-color: themed("backgroundOffsetColor");
|
||||
color: darken(themed("mutedTextColor"), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.link,
|
||||
button.neutral {
|
||||
@include themify($themes) {
|
||||
background-color: transparent;
|
||||
color: themed("primaryColor");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
@include themify($themes) {
|
||||
color: darken(themed("primaryColor"), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("inputBackgroundColor");
|
||||
border-color: themed("inputBorderColor");
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed("successColor");
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
|
||||
path {
|
||||
@include themify($themes) {
|
||||
fill: themed("successColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include themify($themes) {
|
||||
color: themed("errorColor");
|
||||
}
|
||||
}
|
||||
|
||||
.success-event,
|
||||
.error-event {
|
||||
.notification-body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#select-folder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme_light {
|
||||
#content .inner-wrapper {
|
||||
#select-folder {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIGZpbGw9J25vbmUnPjxwYXRoIHN0cm9rZT0nIzIxMjUyOScgZD0nbTUgNiAzIDMgMy0zJy8+PC9zdmc+");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme_dark {
|
||||
#content .inner-wrapper {
|
||||
#select-folder {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjZmZmZmZmJyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -187,8 +187,6 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
|
||||
const notificationTestId = getNotificationTestId(notificationType);
|
||||
appendHeaderMessageToTitle(headerMessage);
|
||||
|
||||
document.body.innerHTML = "";
|
||||
|
||||
if (isVaultLocked) {
|
||||
const notificationConfig = {
|
||||
...notificationBarIframeInitData,
|
||||
|
||||
Reference in New Issue
Block a user