From 92b440e7fa4761e95ad81cc6ac945f4c6c4799ec Mon Sep 17 00:00:00 2001 From: rugk Date: Fri, 29 Apr 2022 17:41:23 +0200 Subject: [PATCH] Use CommonCss from TinyWebExt --- .gitmodules | 3 + src/common/common.css | 258 +---------------------------------- src/common/modules/CommonCss | 1 + src/common/variables.css | 59 -------- 4 files changed, 5 insertions(+), 316 deletions(-) create mode 160000 src/common/modules/CommonCss delete mode 100644 src/common/variables.css diff --git a/.gitmodules b/.gitmodules index 6d25850..0ac737d 100644 --- a/.gitmodules +++ b/.gitmodules @@ -13,3 +13,6 @@ [submodule "src/common/modules/PermissionRequest"] path = src/common/modules/PermissionRequest url = https://github.com/TinyWebEx/PermissionRequest +[submodule "src/common/modules/CommonCss"] + path = src/common/modules/CommonCss + url = https://github.com/TinyWebEx/CommonCss diff --git a/src/common/common.css b/src/common/common.css index f1fe89c..a466d63 100644 --- a/src/common/common.css +++ b/src/common/common.css @@ -1,257 +1 @@ -@import url("./variables.css"); - -body { - direction: __MSG_@@bidi_dir__; -} - -/* https://design.firefox.com/photon/components/links.html */ -a { - color: var(--blue-60); - text-decoration: none; -} - -a:focus { - border-radius: 4px; - box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30); -} - -a:hover, a:active { - text-decoration: underline; -} - -a:active { - color: var(--blue-70); -} - -/* external link symbol */ -/* currently disabled, because it is not clear what an external link is, in our case */ -/*a:not([class])[href*="//"]::after { - background-image: url(/common/img/open-in-new.svg); - background-repeat: no-repeat; - background-size: 16px 16px; - content: ""; - display: inline-block; - height: 16px; - margin: -.3rem .15rem 0 .25rem; - vertical-align: middle; - width: 16px; -}*/ - -/* small classes in order to avoid inline CSS */ -.invisible { - display: none !important; -} - -.message-container { - position: relative; -} - -/* buttons https://design.firefox.com/photon/components/buttons.html */ -.micro-button { - min-height: 24px; - height: auto; - border-radius: 2px; - - padding-left: 8px; - padding-right: 8px; - - /* not documented, but looks ugly otherwise */ - padding-top: 2px; - padding-bottom: 2px; - - box-sizing: content-box; - - /* do not break over multiple lines */ - /* white-space: nowrap; */ - height: auto; /* currently, we rather prefer breaking until https://github.com/rugk/offline-qr-code/issues/12 is done */ -} - -/* use light color for dark backgrounds */ -.micro-button:hover.success, -.micro-button:active.success, -.micro-button:hover.warning, -.micro-button:active.warning, -.micro-button:hover.error, -.micro-button:active.error { - color: var(--white-100); -} - -.micro-button.info { - background-color: var(--grey-90-a10); -} -.micro-button:hover.info { - background-color: var(--grey-90-a20); -} -.micro-button:active.info { - background-color: var(--grey-90-a30); -} - -.micro-button.success { - background-color: var(--green-60); -} -.micro-button:hover.success { - background-color: var(--green-70); -} -.micro-button:active.success { - background-color: var(--green-80); -} - -.micro-button.warning { - background-color: var(--yellow-60); -} -.micro-button:hover.warning { - background-color: var(--yellow-70); -} -.micro-button:active.warning { - background-color: var(--yellow-80); -} - -.micro-button.error { - background-color: var(--red-70); - color: var(--white-100); -} -.micro-button:hover.error { - background-color: var(--red-80); -} -.micro-button:active.error { - background-color: var(--red-90); -} - -.micro-button:focus { - box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3) -} - -/* message box */ -/* follows https://design.firefox.com/photon/components/message-bars.html */ -.message-box { - padding: 4px; - - border-radius: 4px; - - /* use whole width */ - width: 100%; - min-height: 32px; - - /* make errors selectable, so users can copy them */ - -moz-user-select: text; - cursor: text; - - /* multiline */ - hypens: auto; - overflow-wrap: break-word; - - /* center-vertically */ - display: flex; - align-items: center; - - z-index: 2; - - /* fade-in transition */ - /* follow https://design.firefox.com/photon/motion/duration-and-easing.html */ - opacity: 1; - max-height: 100px; - - transition: opacity 150ms cubic-bezier(.07,.95,0,1), - max-height 200ms cubic-bezier(.07,.95,0,1); -} -.message-box.fade-hide { - max-height: 0px; - opacity: 0; - min-height: 0px; -} - -/* add margin when messages are stacked on each other */ -.message-box:not(.invisible) ~ .message-box:not(.invisible) { - margin-top: 8px; -} - -.error { - color: var(--white-100); - background-color: var(--red-60); -} - -.info { - color: var(--grey-90); - background-color: var(--grey-20); -} - -.success { - color: var(--green-90); - background-color: var(--green-50); -} - -.warning { - color: var(--yellow-90); - background-color: var(--yellow-50); -} - -/* message box action button */ -.message-action-button { - margin-left: 8px; - - /* center vertially */ - margin-top: auto; - margin-bottom: auto; - - /* some minimum margin to dismiss button or similar */ - margin-right: 4px; - - border: 0; - color: var(--grey-90); - - cursor: pointer; -} - -/* icons for the message boxes */ -.message-box::before { - display: inline-block; - - /* fixed size */ - background-size: 16px 16px; - width: 16px; - height: 16px; - min-width: 16px; - min-height: 16px; - - content: ""; - margin: 4px; -} - -.error::before { - background-image: url('/common/img/error-white.svg'); -} -.info::before { - background-image: url('/common/img/info-dark.svg'); -} -.success::before { - background-image: url('/common/img/check.svg'); -} -.warning::before { - background-image: url('/common/img/warning-dark.svg'); -} - -.icon-dismiss { - box-sizing: content-box; - padding: 2px; - - width: 24px; - height: 24px; - - margin-left: auto; - cursor: pointer; - - /* some animation on hover */ - transition: background-color 150ms cubic-bezier(.07,.95,0,1); -} -.icon-dismiss:hover { - background-color: var(--grey-90-a10); - border-radius: 2px; -} -.icon-dismiss:active { - background-color: var(--grey-90-a20); - border-radius: 2px; -} -.icon-dismiss:focus { - box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30); - border-radius: 2px; -} +@import url("./modules/CommonCss/common.css"); diff --git a/src/common/modules/CommonCss b/src/common/modules/CommonCss new file mode 160000 index 0000000..048849d --- /dev/null +++ b/src/common/modules/CommonCss @@ -0,0 +1 @@ +Subproject commit 048849de6236620fa4d92727ed03e2eee913cdb3 diff --git a/src/common/variables.css b/src/common/variables.css deleted file mode 100644 index 1812c2c..0000000 --- a/src/common/variables.css +++ /dev/null @@ -1,59 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* Photon Colors CSS Variables v3.2.0 */ -/* only a subset is included, the complete declaration can be found at - * https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css - */ - -:root { - --blue-50: #0a84ff; - --blue-50-a30: rgba(10, 132, 255, 0.3); - --blue-60: #0060df; - --blue-70: #003eaa; - - --green-50: #30e60b; - --green-60: #12bc00; - --green-70: #058b00; - --green-80: #006504; - --green-90: #003706; - - --yellow-50: #ffe900; - --yellow-60: #d7b600; - --yellow-70: #a47f00; - --yellow-80: #715100; - --yellow-90: #3e2800; - - --red-50: #ff0039; - --red-60: #d70022; - --red-70: #a4000f; - --red-80: #5a0002; - --red-90: #3e0200; - - --red-60: #d70022; - - --grey-20: #ededf0; - --grey-30: #d7d7db; - --grey-50: #737373; - --grey-90: #0c0c0d; - --grey-90-a10: rgba(12, 12, 13, 0.1); - --grey-90-a20: rgba(12, 12, 13, 0.2); - --grey-90-a30: rgba(12, 12, 13, 0.3); - - --white-100: #ffffff; -} - -/* custom variables, independent of Mozilla's Photon colors - * or only based upon them */ - -:root { - --red-60-a90: rgba(215, 0, 34, 0.9); - --red-60-light-shadow: rgba(215, 52, 77, 0.75); - --grey-20-a90: rgba(237, 237, 240, 0.9); - - /* shadows https://design.firefox.com/photon/patterns/shadows.html */ - --shadow-10: 0px 1px 4px var(--grey-90-a20); - --shadow-20: 0px 1px 4px var(--grey-90-a20); - --shadow-30: 0px 1px 4px var(--grey-90-a20); -}