bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

Remove unused CSS from browser (#13453)

Browse Source 
Cleanup browser CSS by removing unused rules. There are probably more unused CSS rules but it's not trivial to audit and we will probably remove them as part of the auth redesign.
This commit is contained in:
Oscar Hinton
2025-02-21 16:56:05 +01:00
committed by GitHub
parent b86e587507
commit 9228df4e28
7 changed files with 0 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
apps/browser/src/popup/scss/base.scss
View File

@@ -356,86 +356,10 @@ header:not(bit-callout header, bit-dialog header, popup-page header) {
}
}
.no-bg {
background-color: transparent;
}
.no-pad {
padding: 0 !important;
}
.content {
padding: 15px 5px;
}
.tabs {
width: 100%;
height: 55px;
border-top: 1px solid #000000;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
@include themify($themes) {
background-color: themed("tabBackgroundColor");
border-top-color: themed("borderColor");
}
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
li {
flex: 1;
display: inline-block;
padding: 0;
margin: 0;
a,
button {
text-align: center;
display: block;
padding: 7px 0;
text-decoration: none;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
@include themify($themes) {
color: themed("mutedColor");
}
&:hover,
&:focus {
@include themify($themes) {
background-color: themed("tabBackgroundHoverColor");
}
}
i {
display: block;
margin-bottom: 2px;
text-align: center;
}
}
&.active {
a,
button {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
}
}
}
app-root {
position: absolute;
width: 100%;
@@ -475,16 +399,6 @@ main:not(popup-page main) {
display: flex;
flex-flow: column;
height: calc(100% - 44px);
&.tab-page {
height: calc(100% - 99px);
}
}
}
.tab-page {
main {
bottom: 55px;
}
}
@@ -534,102 +448,6 @@ main:not(popup-page main) {
width: 100%;
}
.org-filter-content {
padding-bottom: 5px;
padding-left: 7px;
.org-filter {
@include themify($themes) {
background-color: themed("buttonBackgroundColor");
}
border-radius: $border-radius;
padding: 6px 10px;
width: auto;
max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.org-filter-text-container {
// src: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
display: flex;
flex: 1;
min-width: 0;
.org-filter-text-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.vault-select {
overflow-y: auto;
display: flex;
flex-direction: column;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
margin-right: 18px;
margin-top: 1px;
@include themify($themes) {
border: 1px solid themed("borderColor");
}
border-radius: $border-radius;
button {
border: none;
background: transparent;
width: auto;
max-width: 100%;
padding: 5px 10px;
text-align: start;
@include themify($themes) {
color: themed("textColor");
}
a {
@include themify($themes) {
color: themed("textColor");
}
}
&:hover {
@include themify($themes) {
background-color: themed("boxBackgroundHoverColor");
}
}
i.vault-select-prefix-icon {
margin-right: 5px;
}
i.vault-select-suffix-icon {
margin-left: 5px;
}
.vault-select-org-text-container {
display: flex;
flex: 1;
min-width: 0;
align-items: center;
.vault-select-org-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.border {
@include themify($themes) {
background: themed("borderColor");
}
left: 10px;
width: calc(100% - 20px);
height: 1px;
position: relative;
}
}
.login-with-device {
.fingerprint-phrase-header {
padding-top: 1rem;

164
apps/browser/src/popup/scss/box.scss
View File

@@ -18,39 +18,6 @@
}
}
.box-header-expandable {
padding: 10px 5px;
margin: 0 5px;
text-transform: uppercase;
display: flex;
width: calc(100% - 10px);
box-sizing: border-box;
align-items: center;
border-radius: $border-radius;
@include themify($themes) {
color: themed("headingColor");
}
&:hover,
&:focus-visible,
&.active {
@include themify($themes) {
background-color: themed("boxBackgroundHoverColor");
}
}
.icon {
display: flex;
align-items: center;
margin-right: 5px;
@include themify($themes) {
color: themed("headingColor");
}
}
}
.box-content {
@include themify($themes) {
background-color: themed("backgroundColor");
@@ -200,35 +167,6 @@
}
}
}
&.only-list {
margin-bottom: 0;
.box-content {
border-bottom: none;
}
}
&.full-list {
margin: 0;
.box-content {
border: none;
}
}
}
.stacked-boxes {
display: flex;
flex-direction: column;
}
.box-section-divider {
border-top: 1px solid #000000;
@include themify($themes) {
border-color: themed("borderColor");
}
}
.box-content-row {
@@ -243,10 +181,6 @@
background-color: themed("boxBackgroundColor");
}
&.no-bg {
background-color: rgba(0, 0, 0, 0) !important;
}
&:last-child {
&:before {
border: none;
@@ -599,15 +533,6 @@
}
}
.row-sub-label {
margin: 0 15px;
white-space: nowrap;
@include themify($themes) {
color: themed("mutedColor");
}
}
.icon {
display: flex;
justify-content: center;
@@ -630,68 +555,6 @@
}
}
&.totp {
.totp-code {
font-family: $font-family-monospace;
font-size: 1.1em;
}
.totp-countdown {
margin: 3px 3px 0 0;
display: block;
user-select: none;
.totp-sec {
font-size: 0.85em;
position: absolute;
line-height: 32px;
width: 32px;
text-align: center;
}
svg {
width: 32px;
height: 32px;
transform: rotate(-90deg);
}
.totp-circle {
fill: none;
@include themify($themes) {
stroke: themed("totpStrokeColor");
}
&.inner {
stroke-width: 3;
stroke-dasharray: 78.6;
stroke-dashoffset: 0;
}
&.outer {
stroke-width: 2;
stroke-dasharray: 88;
stroke-dashoffset: 0;
}
}
}
&.low {
.totp-sec,
.totp-code {
@include themify($themes) {
color: themed("dangerColor");
}
}
.totp-circle {
@include themify($themes) {
stroke: themed("dangerColor");
}
}
}
}
.progress {
display: flex;
height: 5px;
@@ -740,12 +603,6 @@
}
}
.truncate-box {
display: flex;
align-items: center;
gap: 5px;
}
.truncate {
display: inline-block;
white-space: nowrap;
@@ -768,24 +625,3 @@ form {
}
}
}
.account-switcher-row {
@include themify($themes) {
color: themed("textColor");
background-color: themed("boxBackgroundColor");
}
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed("listItemBackgroundHoverColor");
}
}
&-details {
@include themify($themes) {
color: themed("mutedColor");
}
}
}

44
apps/browser/src/popup/scss/environment.scss
View File

@@ -45,47 +45,3 @@ html.browser_safari {
border-color: #2e3440;
}
}
.environment-selector-btn {
font-size: $font-size-small;
color: $text-muted;
line-height: 25px;
font-weight: 400;
padding-left: 15px;
span {
font-weight: 600;
font-size: $font-size-small;
}
}
.environment-selector-dialog {
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
padding: 5px;
width: 100%;
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12),
0 1px 5px 0 rgba(0, 0, 0, 0.2);
border-radius: $border-radius;
}
.environment-selector-dialog-item {
@include themify($themes) {
color: themed("textColor") !important;
}
width: 100%;
text-align: left;
padding: 0px 15px 0px 5px;
border-radius: 3px;
border: 1px solid transparent;
transition: all 0.2s ease-in-out;
&:hover {
@include themify($themes) {
background-color: themed("listItemBackgroundHoverColor") !important;
}
}
}

9
apps/browser/src/popup/scss/misc.scss
View File

@@ -334,11 +334,6 @@ img,
}
}
app-about .modal-body > *,
app-vault-view .box-footer {
user-select: auto;
}
/* tweak for inconsistent line heights in cipher view */
.box-footer button,
.box-footer a {
@@ -359,10 +354,6 @@ html.force_redraw {
animation: redraw 1s linear infinite;
}
.rounded-circle {
border-radius: 50% !important;
}
/* override for vault icon in browser (pre extension refresh) */
app-vault-icon:not(app-vault-list-items-container app-vault-icon) > div {
display: flex;

356
apps/browser/src/popup/scss/modal.scss
View File

@@ -1,356 +0,0 @@
@import "variables.scss";
$white: white;
$black: black;
$line-height-base: 14px;
$border-radius-lg: $border-radius;
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
// Padding applied to the modal body
$modal-inner-padding: 10px !default;
$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
//$modal-content-bg: $background-color-alt !default;
$modal-content-border-color: rgba($black, 0.2) !default;
$modal-content-border-width: 1px !default;
$modal-content-box-shadow-xs: none;
$modal-content-box-shadow-sm-up: none;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: 0.5 !default;
$modal-header-border-color: $border-color-dark !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 12px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform 0.3s ease-out !default;
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Custom Added CSS animations
@keyframes modalshow {
0% {
opacity: 0;
transform: translate(0, -25%);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes backdropshow {
0% {
opacity: 0;
}
100% {
opacity: $modal-backdrop-opacity;
}
}
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal;
//display: none;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
.modal-open & {
overflow-x: hidden;
overflow-y: auto;
}
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: $modal-dialog-margin;
// allow clicks to pass through for custom click handling to close modal
pointer-events: none;
// When fading in the modal, animate it to slide down
.modal.fade & {
//@include transition($modal-transition);
//transform: translate(0, -25%);
animation: modalshow 0.3s ease-in;
}
//.modal.show & {
// transform: translate(0, 0);
//}
transform: translate(0, 0);
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
}
// Actual modal
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
pointer-events: auto;
//background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
//@include border-radius($border-radius-lg);
//@include box-shadow($modal-content-box-shadow-xs);
border-radius: $border-radius-lg;
box-shadow: $modal-content-box-shadow-xs;
// Remove focus outline from opened modal
outline: 0;
@include themify($themes) {
background-color: themed("backgroundColorAlt");
}
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade {
//opacity: 0;
animation: backdropshow 0.1s ease-in;
}
//&.show {
// opacity: $modal-backdrop-opacity;
//}
opacity: $modal-backdrop-opacity;
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
display: flex;
align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding $modal-inner-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
//@include border-top-radius($border-radius-lg);
@include themify($themes) {
border-bottom-color: themed("borderColor");
}
.close {
padding: $modal-header-padding $modal-inner-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
}
h5 {
font-size: $font-size-base;
font-weight: bold;
display: flex;
align-items: center;
.bwi {
margin-right: 5px;
}
}
}
// Title text within header
.modal-title {
margin-bottom: 0;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
display: flex;
align-items: center; // vertically center
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include themify($themes) {
border-top-color: themed("borderColor");
}
// Easily place margin between footer elements
button {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
.right {
margin-left: auto;
display: flex;
}
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-margin-y-sm-up auto;
}
.modal-dialog-centered {
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
}
.modal-content {
//@include box-shadow($modal-content-box-shadow-sm-up);
box-shadow: $modal-content-box-shadow-sm-up;
}
.modal-sm {
max-width: $modal-sm;
}
}
@include media-breakpoint-up(lg) {
.modal-lg {
max-width: $modal-lg;
}
}
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
.close {
float: right;
font-size: $close-font-size;
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: 0.5;
&:hover,
&:focus {
color: $close-color;
text-decoration: none;
opacity: 0.75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}
// stylelint-enable
// box
.modal-content .box {
margin-top: 20px;
&:first-child {
margin-top: 0;
}
}

245
apps/browser/src/popup/scss/pages.scss
View File

@@ -1,61 +1,5 @@
@import "variables.scss";
app-sync {
main {
.btn {
margin-bottom: 10px;
}
}
}
app-generator .generated-block {
font-size: $font-size-large;
font-family: $font-family-monospace;
margin: 8px;
padding: 8px 10px 8px 0;
display: flex;
border-radius: $border-radius;
border: 1px solid;
@include themify($themes) {
background-color: transparent;
border-color: themed("borderColorAlt");
}
.generated-wrapper {
text-align: left;
width: 100%;
min-width: 0;
white-space: pre-wrap;
word-break: break-all;
padding: 15px;
border-radius: $border-radius;
@include themify($themes) {
background-color: themed("backgroundColor");
}
}
.action-buttons {
display: flex;
align-self: center;
height: 100%;
margin-left: 10px;
button {
padding: 6px;
margin: 2px;
border-radius: $border-radius;
&:hover {
@include themify($themes) {
background-color: themed("hoverColorTransparent");
}
}
}
}
}
app-home {
position: fixed;
height: 100%;
@@ -148,29 +92,6 @@ body.body-full {
margin: 15px 0 15px 0;
}
app-options {
.box {
margin: 10px 0;
& + .box {
margin-top: 10px;
}
}
}
app-vault-view,
app-vault-add-edit,
app-generator,
app-vault-attachments {
.box {
margin: 15px 0 25px 0;
& + .box {
margin-top: 25px;
}
}
}
.useBrowserlink {
margin-left: 5px;
margin-top: 20px;
@@ -216,169 +137,3 @@ app-vault-attachments {
margin-bottom: 0;
}
}
app-fido2-v1 {
.auth-wrapper {
display: flex;
flex-direction: column;
padding: 12px 24px 12px 24px;
.auth-header {
display: flex;
justify-content: space-between;
align-items: center;
.left {
padding-right: 10px;
.logo {
display: inline-flex;
align-items: center;
i.bwi {
font-size: 35px;
margin-right: 3px;
@include themify($themes) {
color: themed("primaryColor");
}
}
span {
font-size: 45px;
font-weight: 300;
margin-top: -3px;
@include themify($themes) {
color: themed("primaryColor");
}
}
}
}
.search {
padding: 7px 10px;
width: 100%;
text-align: left;
position: relative;
display: flex;
.bwi {
position: absolute;
top: 15px;
left: 20px;
@include themify($themes) {
color: themed("labelColor");
}
}
input {
width: 100%;
margin: 0;
border: none;
padding: 5px 10px 5px 30px;
border-radius: $border-radius;
&:focus {
border-radius: $border-radius;
outline: none;
}
&[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
mask-image: none;
-webkit-mask-image: none;
}
}
}
}
.auth-flow {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-top: 32px;
.subtitle {
font-family: "DM Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}
.box.list {
overflow-y: auto;
}
.box-content {
max-height: 140px;
}
@media screen and (min-height: 501px) and (max-height: 600px) {
.box-content {
max-height: 200px;
}
}
@media screen and (min-height: 601px) {
.box-content {
max-height: 260px;
}
}
.box-content-row {
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
padding: 0px;
margin-bottom: 12px;
button {
min-height: 44px;
}
.row-main {
border-radius: 6px;
padding: 5px 0px 5px 12px;
&:focus {
@include themify($themes) {
padding: 3px 0px 3px 10px;
border: 2px solid themed("headerInputBackgroundFocusColor");
}
}
&.row-selected {
@include themify($themes) {
outline: none;
padding-left: 7px;
border-left: 5px solid themed("primaryColor");
background-color: themed("headerBackgroundHoverColor");
color: themed("headerColor");
}
}
}
.row-main-content {
display: flex;
flex-direction: column;
justify-content: center;
.detail {
min-height: 15px;
display: block;
}
}
}
.btn {
width: 100%;
font-size: 16px;
font-weight: 600;
}
}
}
}

1
apps/browser/src/popup/scss/popup.scss
View File

@@ -7,7 +7,6 @@
@import "box.scss";
@import "buttons.scss";
@import "misc.scss";
@import "modal.scss";
@import "environment.scss";
@import "pages.scss";
@import "plugins.scss";