sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use photon widget styles for light color scheme

Browse Source
This commit is contained in:
hensm
2020-09-16 19:43:56 +01:00
parent 05ff301964
commit 46e7c57804
8 changed files with 203 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ext/src/ui/dark-widgets.css
View File

@@ -1,94 +0,0 @@
button,
input,
textarea,
.select-wrapper {
background-color: #474749;
border: initial;
border-radius: 2px;
color: white;
overflow: hidden;
}
button:not(:disabled):hover,
.select-wrapper:not(:disabled):hover {
background-color: #505054;
}
button:not(:disabled):hover:active,
.select-wrapper:not(:disabled):hover:active {
background-color: #5c5c5e;
}
:-moz-any(button, input, textarea, select):focus {
box-shadow: 0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
:-moz-any(button, input, textarea, select)::-moz-focus-inner {
all: initial;
}
button:disabled,
input:disabled {
opacity: 0.35;
}
button,
input,
textarea,
select {
padding: 4px 8px;
}
/* No inset for spinbox control */
input[type="number"] {
padding-inline-end: initial;
}
button,
select {
/* Override mac.css height */
height: initial !important;
}
button:default {
background-color: var(--blue-60);
color: white !important;
}
button:default:hover {
background-color: var(--blue-70);
}
button:default:hover:active {
background-color: var(--blue-80);
}
.select-wrapper {
--arrow-width: 20px;
position: relative;
display: inline-block;
}
.select-wrapper::after {
align-items: center;
content: "▼";
display: flex;
height: 100%;
margin-right: 4px;
justify-content: center;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: var(--arrow-width);
}
select {
-moz-appearance: none;
background: inherit;
border: initial;
color: inherit;
padding-right: calc(8px + var(--arrow-width));
}
option {
color: white !important;
}
option:disabled {
color: rgba(255, 255, 255, 0.25) !important;
}

31
ext/src/ui/options/index.tsx
View File

@@ -32,37 +32,6 @@ browser.runtime.getPlatformInfo()
link.href = "styles/mac.css";
break;
}
// Fix issue with input[type="number"] height
case "linux": {
link.href = "styles/linux.css";
const input = document.createElement("input");
const inputWrapper = document.createElement("div");
inputWrapper.append(input);
document.documentElement.append(inputWrapper);
input.type = "text";
const textInputHeight = window.getComputedStyle(input).height;
input.type = "number";
const numberInputHeight = window.getComputedStyle(input).height;
inputWrapper.remove();
if (numberInputHeight !== textInputHeight) {
const style = document.createElement("style");
style.textContent = `
input[type="number"] {
height: ${textInputHeight};
}
`;
document.body.append(style);
}
break;
}
}
if (link.href) {

87
ext/src/ui/options/styles/index.css
View File

@@ -8,51 +8,22 @@
--border-color: var(--grey-50);
--secondary-color: var(--grey-10-a60);
}
a { color: var(--blue-40); }
a:hover { color: var(--blue-50); }
a:hover:active { color: var(--blue-60); }
body {
background: #202023 !important;
color: white !important;
}
.editable-list {
background-color: #202023 !important;
color: white !important;
}
.editable-list__item:not(.editable-list__item--selected) .editable-list__title {
padding: 0 8px !important;
}
.editable-list__item:nth-child(even) {
background-color: initial !important;
}
.editable-list__item:nth-child(odd) {
background-color: var(--grey-80) !important;
}
.about,
.about > summary {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.about hr {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.about__link > img {
filter: invert(1);
}
}
*:invalid {
box-shadow: 0 0 1.5px 1px var(--red-50);
}
#root {
padding: 20px 10px;
}
body {
background: var(--box-background) !important;
color: var(--box-color) !important;
}
a { color: var(--blue-40); }
a:hover { color: var(--blue-50); }
a:hover:active { color: var(--blue-60); }
button.ghost {
width: 24px !important;
height: 24px !important;
@@ -64,7 +35,6 @@ button.ghost {
button.ghost:not(:hover) {
background-color: initial;
border: initial;
}
@@ -346,9 +316,9 @@ button.ghost:not(:hover) {
.editable-list {
background-color: -moz-field;
background-color: var(--box-background);
border: 1px solid var(--border-color);
color: -moz-fieldtext;
color: var(--box-color);
justify-content: end;
padding: 5px;
}
@@ -380,32 +350,29 @@ button.ghost:not(:hover) {
.editable-list__item {
align-items: center;
display: flex;
height: 30px;
height: 34px;
padding: 0 5px;
}
.editable-list__item:nth-child(even) {
background-color: -moz-eventreerow;
}
.editable-list__item:nth-child(odd) {
background-color: -moz-oddtreerow;
background-color: var(--grey-20);
}
.editable-list__item--selected {
background-color: -moz-cellhighlight !important;
color: -moz-cellhighlighttext !important;
background-color: var(--blue-50-a30) !important;
}
.editable-list__title {
flex: 1;
font-family: monospace;
overflow: hidden;
padding: 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
.editable-list__item:not(.editable-list__item--selected) > .editable-list__title {
padding: 0 5px;
padding: 0 8px;
}
.editable-list__title + button {
@@ -433,7 +400,6 @@ button.ghost:not(:hover) {
.about {
border-radius: 2px;
margin-bottom: 40px;
overflow: hidden;
}
.about > summary {
@@ -504,3 +470,22 @@ button.ghost:not(:hover) {
text-transform: uppercase;
vertical-align: text-top;
}
@media (prefers-color-scheme: dark) {
.editable-list__item:nth-child(odd) {
background-color: var(--grey-80);
}
.about,
.about > summary {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.about hr {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.about__link > img {
filter: invert(1);
}
}

15
ext/src/ui/options/styles/linux.css
View File

@@ -1,15 +0,0 @@
:root {
--border-color: graytext;
--secondary-color: graytext;
}
body {
padding: 20px 0;
}
#root {
background-color: -moz-dialog;
border-radius: 5px;
color: -moz-dialogtext;
overflow: hidden;
}

20
ext/src/ui/options/styles/mac.css
View File

@@ -8,26 +8,6 @@ input {
font: inherit;
}
button:not([disabled]):hover:active {
color: -moz-mac-buttonactivetext;
}
button[default]:not([disabled]):not(:-moz-window-inactive) {
color: -moz-mac-defaultbuttontext;
}
button[default]:not(:hover):active {
color: ButtonText;
}
button,
select {
height: 22px;
}
button.ghost {
width: 22px !important;
height: 22px !important;
}
input[type="checkbox"],
input[type="radio"] {
height: 16px;

5
ext/src/ui/photon-colors.css
View File

@@ -21,7 +21,7 @@
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-50-a30: rgba(10, 132, 255, 0.3);
--blue-50-a30: #0a84ff4d;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
@@ -41,12 +41,14 @@
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-60-a30: #d7b6004d;
--yellow-70: #a47f00;
--yellow-80: #715100;
--yellow-90: #3e2800;
--red-50: #ff0039;
--red-60: #d70022;
--red-60-a30: #d700225d;
--red-70: #a4000f;
--red-80: #5a0002;
--red-90: #3e0200;
@@ -60,6 +62,7 @@
--grey-10: #f9f9fa;
--grey-10-a10: rgba(249, 249, 250, 0.1);
--grey-10-a20: rgba(249, 249, 250, 0.2);
--grey-10-a30: rgba(249, 249, 250, 0.3);
--grey-10-a40: rgba(249, 249, 250, 0.4);
--grey-10-a60: rgba(249, 249, 250, 0.6);
--grey-10-a80: rgba(249, 249, 250, 0.8);

162
ext/src/ui/photon-widgets.css Normal file
View File

@@ -0,0 +1,162 @@
:root {
--shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
--shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
--shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);
--box-background: var(--white-100);
--box-color: var(--grey-90);
--focus-box-shadow:
0 0 0 1px var(--blue-50)
, 0 0 0 4px var(--blue-50-a30);
--button-background: var(--grey-90-a10);
--button-background-hover: var(--grey-90-a20);
--button-background-active: var(--grey-90-a30);
--button-background-primary: var(--blue-60);
--button-background-primary-hover: var(--blue-70);
--button-background-primary-active: var(--blue-80);
--button-color: var(--grey-90);
--button-color-primary: var(--white-100);
--field-background: var(--box-background);
--field-color: var(--box-color);
--field-placeholder-color: var(--grey-50);
--field-border-color: var(--grey-90-a20);
--field-border-color-hover: var(--grey-90-a30);
--field-box-shadow-warning:
0 0 0 1px var(--yellow-60)
, 0 0 0 4px var(--yellow-60-a30);
--field-box-shadow-error:
0 0 0 1px var(--red-60)
, 0 0 0 4px var(--red-60-a30);
}
@media (prefers-color-scheme: dark) {
:root {
--box-background: #202023;
--box-color: var(--white-100);
--button-background: #474749;
--button-background-hover: #505054;
--button-background-active: #5c5c5e;
--button-color: var(--white-100);
--field-placeholder-color: var(--grey-30);
--field-border-color: var(--grey-10-a20);
--field-border-color-hover: var(--grey-10-a30);
}
}
button,
input,
textarea,
.select-wrapper {
border: 1px solid transparent;
border-radius: 2px;
overflow: hidden;
}
button,
.select-wrapper {
background-color: var(--button-background);
color: var(--button-color);
}
button:not(:disabled):hover,
.select-wrapper:not(:disabled):hover {
background-color: var(--button-background-hover);
}
button:not(:disabled):active,
.select-wrapper:not(:disabled):hover:active {
background-color: var(--button-background-active);
}
input,
textarea {
background-color: var(--field-background);
border: 1px solid var(--field-border-color);
color: var(--field-color);
}
input:hover,
textarea:hover {
border-color: var(--field-border-color-hover);
}
:-moz-any(button, input, textarea, select):focus {
border-color: var(--blue-50);
box-shadow: var(--focus-box-shadow);
outline: initial;
}
:-moz-any(button, input, textarea, select):focus::-moz-focus-inner {
border: initial;
}
input:invalid,
textarea:invalid {
box-shadow: var(--field-box-shadow-error) !important;
border-color: var(--red-60) !important;
}
button:disabled,
input:disabled {
opacity: 0.35;
}
button,
input,
textarea,
select {
padding: 4px 8px;
}
/* No inset for spinbox control */
input[type="number"] {
padding-inline-end: 2px;
}
button:default {
background-color: var(--button-background-primary);
color: white !important;
}
button:default:hover {
background-color: var(--button-background-primary-hover);
}
button:default:hover:active {
background-color: var(--button-background-primary-active);
}
.select-wrapper {
--arrow-width: 20px;
position: relative;
display: inline-block;
}
.select-wrapper::after {
align-items: center;
content: "▼";
display: flex;
height: 100%;
margin-right: 4px;
justify-content: center;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: var(--arrow-width);
}
select {
-moz-appearance: none;
background: inherit;
border: initial;
color: inherit;
padding-right: calc(8px + var(--arrow-width));
}
option {
color: white !important;
}
option:disabled {
color: rgba(255, 255, 255, 0.25) !important;
}

2
ext/src/ui/template.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="../photon-colors.css">
<link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="../photon-widgets.css">
<link rel="stylesheet" href="styles/index.css">
</head>
<body>