diff --git a/src/css/popup.css b/src/css/popup.css index c9fc89e..3176ec9 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -236,18 +236,6 @@ table { background-color: rgba(0, 0, 0, 0.05); } -/* Text links with actions */ - -.action-link:link { - color: var(--primary-action-color); - text-decoration: none; -} - -.action-link:active, -.action-link:hover { - text-decoration: underline; -} - /* Panels keep everything together */ .panel { display: flex; @@ -267,30 +255,12 @@ table { min-block-size: 360px; } -.panel .columns { - display: flex; - flex: 1; -} - .panel-content { flex: 1; padding-block-start: 16px; } -/* Column panels for edit screens */ -.column-panel-content { - display: flex; - flex-direction: column; - inline-size: var(--column-panel-inline-size); -} - -.column-panel-content .panel-footer { - align-items: center; - display: flex; - justify-content: center; -} - -.column-panel-content .button, +/*.column-panel-content .button,*/ .panel-footer .button { align-items: center; block-size: 100%; @@ -299,28 +269,6 @@ table { justify-content: center; } -/* Column panels have a special back arrow */ -.panel-back-arrow { - align-items: center; - background: #ebebeb; - box-shadow: inset -2px 0 4px -2px rgba(0, 0, 0, 0.4); - display: flex; - flex: 0 0 32px; - flex-direction: column; - justify-content: center; -} - -.panel-back-arrow:hover, -.panel-back-arrow:focus { - background: #dedede; -} - -.back-arrow-img { - block-size: 16px; - inline-size: 16px; - transform: rotate(180deg); -} - /* Onboarding styles */ .onboarding * { text-align: center; @@ -412,200 +360,11 @@ manage things like container crud */ justify-content: center; } -.pop-button:hover, -.pop-button:focus, -.panel-footer-secondary:focus, -.panel-footer-secondary:hover { - background-color: rgba(0, 0, 0, 0.05); -} - -.pop-button:focus, -.panel-footer-secondary:focus { - background-color: rgba(0, 0, 0, 0.08); -} - -.pop-button a, -.panel-footer a, -.panel-footer-secondary a { +/*.pop-button a,*/ +.panel-footer a { text-decoration: none; } -.pop-button-image { - block-size: 20px; - flex: 0 0 20px; - margin-block-end: auto; - margin-block-start: auto; - margin-inline-end: auto; - margin-inline-start: auto; -} - -.pop-button-image-small { - block-size: 12px; - flex: 0 0 12px; -} - -/* Panel Header */ -.panel-header { - align-items: center; - block-size: 48px; - display: flex; - justify-content: space-between; - padding-block-start: 16px; -} - -.panel-header .usercontext-icon { - inline-size: var(--icon-button-size); -} - -.column-panel-content .panel-header { - flex: 0 0 48px; - inline-size: 100%; -} - -.panel-header-text { - color: var(--text-normal-color); - flex: 1; - font-size: var(--font-size-heading); - font-weight: normal; - margin-block-end: 0; - margin-block-start: 0; - margin-inline-end: 0; - margin-inline-start: 0; - padding-block-end: 16px; - padding-block-start: 16px; - padding-inline-end: 16px; - padding-inline-start: 16px; -} - -#container-panel .panel-header { - background-color: #efefef; - block-size: 26px; - font-size: 14px; -} - -#container-panel .panel-header-text { - color: #727272; - font-size: 14px; - padding-block-end: 0; - padding-block-start: 0; - text-transform: uppercase; -} - -.container-panel-controls { - display: flex; - justify-content: flex-end; - margin-block-end: var(--block-line-space-size); - margin-block-start: var(--block-line-space-size); - margin-inline-end: var(--inline-item-space-size); - margin-inline-start: var(--inline-item-space-size); -} - -span ~ .panel-header-text { - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: 0; - padding-inline-start: 0; -} - -#current-tab { - align-items: center; - color: var(--text-normal-color); - display: grid; - font-size: var(--small-text-size); - grid-column-gap: var(--inline-item-space-size); - grid-row-gap: var(--block-line-space-size); - grid-template-columns: var(--icon-size) var(--icon-size) 1fr; - margin-block-end: var(--block-line-space-size); - margin-block-start: var(--block-line-separation-size); - margin-inline-end: var(--inline-start-size); - margin-inline-start: var(--inline-start-size); - max-inline-size: 100%; -} - -#current-tab img { - max-block-size: var(--icon-size); -} - -#current-tab > h3 { - color: var(--text-heading-color); - font-weight: normal; - grid-column: span 3; - margin-block-end: 0; - margin-block-start: 0; - margin-inline-end: 0; - margin-inline-start: 0; -} - -#current-page { - display: contents; -} - -#current-tab .page-title { - font-size: var(--font-size-heading); - grid-column: 2 / 4; -} - -#current-tab > label { - display: contents; - font-size: var(--small-text-size); -} - -#current-tab > label > input { - -moz-appearance: none; - block-size: var(--icon-size); - border: 1px solid #d8d8d8; - border-radius: var(--small-radius); - display: block; - grid-column-start: 2; - inline-size: var(--icon-size); - margin-block-end: 0; - margin-block-start: 0; - margin-inline-end: 0; - margin-inline-start: 0; -} - -#current-tab > label > input[disabled] { - background-color: #efefef; -} - -#current-tab > label > input:checked { - background-image: url("/img/check.svg"); - background-position: -1px -1px; - background-size: var(--icon-size); -} - -#current-container { - color: var(--identity-tab-color); - flex: 1; -} - -#current-tab > label > .usercontext-icon { - background-size: 16px; - block-size: 16px; - display: block; - flex: 0 0 20px; - inline-size: 20px; - margin-inline-end: 3px; - margin-inline-start: 3px; -} - -/* Rows used when iterating over panels */ -.container-panel-row { - align-items: center; - background-color: #fefefe !important; - border-block-end: 1px solid #f1f1f1; - box-sizing: border-box; - display: flex; - justify-content: space-between; -} - -.container-panel-row .container-name { - flex: 1; - max-inline-size: 160px; - padding-inline-end: 4px; - padding-inline-start: 4px; -} - .edit-containers-panel .userContext-wrapper { max-inline-size: calc(var(--overflow-size) + 203px); } @@ -622,11 +381,6 @@ span ~ .panel-header-text { transition: background-color 75ms; } -.container-panel-row:hover .clickable.userContext-wrapper, -.container-panel-row:focus .clickable.userContext-wrapper { - background: #f2f2f2; -} - .userContext-icon-wrapper { block-size: var(--icon-button-size); flex: 0 0 var(--icon-button-size); @@ -678,62 +432,6 @@ span ~ .panel-header-text { justify-content: space-between; } -.edit-containers-text { - align-items: center; - block-size: 100%; - border-inline-end: solid 1px #d8d8d8; - display: flex; - flex: 1; - justify-content: center; -} - -.edit-containers-text a { - align-items: center; - block-size: 100%; - color: #0a0a0a; - display: flex; - flex: 1; - justify-content: center; -} - -/* Container info list */ -.container-info-tab-title { - display: flex; -} - -.container-info-tab-row:hover .container-info-tab-title .truncate-text { - inline-size: calc(var(--column-panel-inline-size) - 58px); -} - -#container-info-hideorshow { - margin-block-start: 4px; -} - -#container-info-movetabs-incompat { - font-size: 10px; - opacity: 0.3; -} - -.container-info-tab-row:not(.clickable), -.select-row:not(.clickable) { - opacity: 0.3; -} - -.container-close-tab { - transform: scale(0.7); - visibility: collapse; -} - -.container-info-tab-row:hover .container-close-tab { - opacity: 0.5; - visibility: visible; -} - -.container-info-tab-row .container-close-tab:hover { - opacity: 1; - visibility: visible; -} - .container-info-has-tabs, .container-info-tab-row { align-items: center; @@ -760,40 +458,6 @@ span ~ .panel-header-text { margin-inline-end: 0; } -.clickable { - cursor: pointer; -} - -.clickable:hover, -.clickable:focus { - background-color: #ebebeb; -} - -.edit-containers-exit-text { - align-items: center; - background: var(--primary-action-color); - block-size: 100%; - color: #fff; - display: inline-block; - justify-content: center; - padding-block-start: 6px; - padding-inline-start: 30%; -} - -.edit-containers-panel-footer { - background: var(--primary-action-color); -} - -.exit-edit-mode-link img { - block-size: 16px; - display: inline; - filter: grayscale(100%) brightness(5); - inline-size: 16px; - margin-inline-end: 5px; - transform: scaleX(-1); - vertical-align: bottom; -} - .delete-container-confirm { padding-inline-end: 20px; padding-inline-start: 20px; @@ -804,19 +468,6 @@ span ~ .panel-header-text { font-size: var(--font-size-heading); } -/* Form info */ -.column-panel-content form { - flex: 1; - padding-block-end: 16px; - padding-block-start: 16px; - padding-inline-end: 16px; - padding-inline-start: 16px; -} - -.edit-container-panel .columns { - overflow: hidden; /* Bugfix: issue 948 */ -} - #edit-sites-assigned h3 { font-size: 14px; font-weight: normal; diff --git a/src/js/popup.js b/src/js/popup.js index 680ece7..1998cb7 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -658,19 +658,19 @@ Logic.registerPanel(P_CONTAINERS_LIST, { /* Not sure why extensions require a focus for the doorhanger, however it allows us to have a tabindex before the first selected item */ - const focusHandler = () => { - const identityList = list.querySelector("tr .clickable"); - if (identityList) { - // otherwise this throws an error when there are no containers present. - identityList.focus(); - document.removeEventListener("focus", focusHandler); - } - }; - document.addEventListener("focus", focusHandler); - /* If the user mousedown's first then remove the focus handler */ - document.addEventListener("mousedown", () => { - document.removeEventListener("focus", focusHandler); - }); + // const focusHandler = () => { + // const identityList = list.querySelector("tr .clickable"); + // if (identityList) { + // // otherwise this throws an error when there are no containers present. + // identityList.focus(); + // document.removeEventListener("focus", focusHandler); + // } + // }; + // document.addEventListener("focus", focusHandler); + // /* If the user mousedown's first then remove the focus handler */ + // document.addEventListener("mousedown", () => { + // document.removeEventListener("focus", focusHandler); + // }); return Promise.resolve(); }, });