Use CommonCss from TinyWebExt
This commit is contained in:
rugk
parent
532c098968
commit
92b440e7fa
4 changed files with 5 additions and 316 deletions
3
.gitmodules
vendored
3
.gitmodules
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
1
src/common/modules/CommonCss
Submodule
1
src/common/modules/CommonCss
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 048849de6236620fa4d92727ed03e2eee913cdb3
|
||||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue