sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-10 17:49:58 +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

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;