Handle dark/light mode better in the extension
This commit is contained in:
Jackson Harper
@ -12,6 +12,7 @@
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
color: #3D3D3D;
|
||||
background: #fff;
|
||||
font: 400 12px Inter, sans-serif;
|
||||
line-height: 20px;
|
||||
@ -21,6 +22,10 @@
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
#omnivore-toast-container input, select, textarea{
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
#omnivore-toast-container .omnivore-toast-func-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -98,10 +103,25 @@
|
||||
#omnivore-toast-container #omnivore-toast-close-btn svg {
|
||||
fill: #3D3D3D;
|
||||
}
|
||||
|
||||
#omnivore-toast-container #omnivore-toast-close-btn > svg *,
|
||||
#omnivore-toast-container #omnivore-toast-close-btn svg:hover {
|
||||
fill: #D9D9D9;
|
||||
stroke: white;
|
||||
}
|
||||
#omnivore-toast-container svg {
|
||||
fill: #6A6968;
|
||||
}
|
||||
#omnivore-toast-container > svg *,
|
||||
#omnivore-toast-container svg:hover {
|
||||
fill: #3B3A38;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-toast-edit-title-btn > svg * {
|
||||
fill: none;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-toast-delete-btn > svg * {
|
||||
fill: none;
|
||||
}
|
||||
#omnivore-toast-container form {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
@ -129,8 +149,6 @@
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
resize: none;
|
||||
border: 1px solid #8E8E93;
|
||||
border-radius: 4px;
|
||||
@ -150,8 +168,6 @@
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
resize: none;
|
||||
border: 1px solid #8E8E93;
|
||||
border-radius: 4px;
|
||||
@ -245,6 +261,59 @@
|
||||
#omnivore-edit-labels-row form {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
#omnivore-add-note-row textarea:focus-visible {
|
||||
border-color: #2f81f7;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#omnivore-edit-labels-row input, select, textarea:focus-visible {
|
||||
border-color: #2f81f7;
|
||||
outline: none;
|
||||
}
|
||||
#omnivore-edit-title-row textarea:focus-visible {
|
||||
border-color: #2f81f7;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#omnivore-toast-container .omnivore-toast-func-row button {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
#omnivore-toast-container {
|
||||
background: #333333;
|
||||
}
|
||||
#omnivore-toast-container input, select, textarea{
|
||||
color: #D9D9D9;
|
||||
}
|
||||
.omnivore-toast-divider {
|
||||
border-right: 1px solid #898989;
|
||||
}
|
||||
#omnivore-toast-container svg {
|
||||
fill: #898989;
|
||||
}
|
||||
#omnivore-toast-container button {
|
||||
color: #898989;
|
||||
}
|
||||
#omnivore-toast-container button:hover > svg *,
|
||||
#omnivore-toast-container button:hover {
|
||||
color: #D9D9D9;
|
||||
fill: #D9D9D9;
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-extra-buttons-row button:hover {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-edit-labels-list button {
|
||||
border-bottom: 1px solid #898989;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-toast-edit-title-btn > svg * {
|
||||
fill: none;
|
||||
}
|
||||
#omnivore-toast-container #omnivore-toast-delete-btn > svg * {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="omnivore-toast-container">
|
||||
<div id="omnivore-toast-button-row">
|
||||
@ -277,7 +346,7 @@
|
||||
<span class="omnivore-toast-divider"></span>
|
||||
|
||||
<button class="omnivore-top-button" id="omnivore-toast-add-note-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#6a6968" viewBox="0 0 256 256">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
|
||||
<path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path>
|
||||
</svg>
|
||||
<span class="omnivore-top-button-label">Add Note</span>
|
||||
@ -285,9 +354,9 @@
|
||||
<span class="omnivore-toast-divider"></span>
|
||||
|
||||
<button id="omnivore-toast-edit-labels-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.99031 14.9786L15.3061 8.67029C15.3757 8.6002 15.4307 8.51707 15.468 8.42568C15.5053 8.33429 15.5242 8.23643 15.5237 8.13772L15.5237 1.38683C15.5237 1.18789 15.4446 0.997101 15.304 0.85643C15.1633 0.715759 14.9725 0.636731 14.7736 0.636731L8.02269 0.636731C7.92397 0.63616 7.82611 0.655082 7.73472 0.69241C7.64333 0.729738 7.5602 0.784739 7.49012 0.85426L1.18179 7.17009C0.76038 7.59202 0.523681 8.16397 0.523681 8.7603C0.523681 9.35663 0.76038 9.92857 1.18179 10.3505L5.77239 14.9786C6.19432 15.4 6.76627 15.6367 7.3626 15.6367C7.95893 15.6367 8.53087 15.4 8.95281 14.9786L8.99031 14.9786ZM6.87503 13.921L2.24693 9.28536C2.10722 9.14482 2.0288 8.95471 2.0288 8.75655C2.0288 8.55838 2.10722 8.36827 2.24693 8.22773L8.33022 2.13693L14.0235 2.13693L14.0235 7.83018L7.93267 13.921C7.86258 13.9905 7.77946 14.0455 7.68807 14.0828C7.59668 14.1202 7.49882 14.1391 7.4001 14.1385C7.20332 14.1377 7.01475 14.0595 6.87503 13.921Z" fill="#6A6968"/>
|
||||
<circle cx="10.8818" cy="5.48069" r="1.24925" fill="#6A6968"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.99031 14.9786L15.3061 8.67029C15.3757 8.6002 15.4307 8.51707 15.468 8.42568C15.5053 8.33429 15.5242 8.23643 15.5237 8.13772L15.5237 1.38683C15.5237 1.18789 15.4446 0.997101 15.304 0.85643C15.1633 0.715759 14.9725 0.636731 14.7736 0.636731L8.02269 0.636731C7.92397 0.63616 7.82611 0.655082 7.73472 0.69241C7.64333 0.729738 7.5602 0.784739 7.49012 0.85426L1.18179 7.17009C0.76038 7.59202 0.523681 8.16397 0.523681 8.7603C0.523681 9.35663 0.76038 9.92857 1.18179 10.3505L5.77239 14.9786C6.19432 15.4 6.76627 15.6367 7.3626 15.6367C7.95893 15.6367 8.53087 15.4 8.95281 14.9786L8.99031 14.9786ZM6.87503 13.921L2.24693 9.28536C2.10722 9.14482 2.0288 8.95471 2.0288 8.75655C2.0288 8.55838 2.10722 8.36827 2.24693 8.22773L8.33022 2.13693L14.0235 2.13693L14.0235 7.83018L7.93267 13.921C7.86258 13.9905 7.77946 14.0455 7.68807 14.0828C7.59668 14.1202 7.49882 14.1391 7.4001 14.1385C7.20332 14.1377 7.01475 14.0595 6.87503 13.921Z" />
|
||||
<circle cx="10.8818" cy="5.48069" r="1.24925" />
|
||||
</svg>
|
||||
<span class="omnivore-top-button-label">Set Labels</span>
|
||||
</button>
|
||||
@ -295,7 +364,7 @@
|
||||
|
||||
<button id="omnivore-toast-read-now-btn">
|
||||
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.1272 0.939454H12.6584C11.6995 0.939454 10.762 1.21484 9.95532 1.73438L9.0022 2.3457L8.04907 1.73438C7.24323 1.21494 6.30469 0.938941 5.34595 0.939454H0.877197C0.531494 0.939454 0.252197 1.21875 0.252197 1.56445V12.6582C0.252197 13.0039 0.531494 13.2832 0.877197 13.2832H5.34595C6.30493 13.2832 7.24243 13.5586 8.04907 14.0781L8.91626 14.6367C8.94165 14.6523 8.97095 14.6621 9.00024 14.6621C9.02954 14.6621 9.05884 14.6543 9.08423 14.6367L9.95142 14.0781C10.76 13.5586 11.6995 13.2832 12.6584 13.2832H17.1272C17.4729 13.2832 17.7522 13.0039 17.7522 12.6582V1.56445C17.7522 1.21875 17.4729 0.939454 17.1272 0.939454ZM5.34595 11.877H1.65845V2.3457H5.34595C6.03735 2.3457 6.70923 2.54297 7.28931 2.91602L8.24243 3.52734L8.3772 3.61523V12.6387C7.44751 12.1387 6.40845 11.877 5.34595 11.877ZM16.3459 11.877H12.6584C11.5959 11.877 10.5569 12.1387 9.6272 12.6387V3.61523L9.76196 3.52734L10.7151 2.91602C11.2952 2.54297 11.967 2.3457 12.6584 2.3457H16.3459V11.877ZM6.75415 4.8457H3.12524C3.04907 4.8457 2.98657 4.91211 2.98657 4.99219V5.87109C2.98657 5.95117 3.04907 6.01758 3.12524 6.01758H6.7522C6.82837 6.01758 6.89087 5.95117 6.89087 5.87109V4.99219C6.89282 4.91211 6.83032 4.8457 6.75415 4.8457ZM11.1116 4.99219V5.87109C11.1116 5.95117 11.1741 6.01758 11.2502 6.01758H14.8772C14.9534 6.01758 15.0159 5.95117 15.0159 5.87109V4.99219C15.0159 4.91211 14.9534 4.8457 14.8772 4.8457H11.2502C11.1741 4.8457 11.1116 4.91211 11.1116 4.99219ZM6.75415 7.58008H3.12524C3.04907 7.58008 2.98657 7.64648 2.98657 7.72656V8.60547C2.98657 8.68555 3.04907 8.75195 3.12524 8.75195H6.7522C6.82837 8.75195 6.89087 8.68555 6.89087 8.60547V7.72656C6.89282 7.64648 6.83032 7.58008 6.75415 7.58008ZM14.8792 7.58008H11.2502C11.1741 7.58008 11.1116 7.64648 11.1116 7.72656V8.60547C11.1116 8.68555 11.1741 8.75195 11.2502 8.75195H14.8772C14.9534 8.75195 15.0159 8.68555 15.0159 8.60547V7.72656C15.0178 7.64648 14.9553 7.58008 14.8792 7.58008Z" fill="#6A6968"/>
|
||||
<path d="M17.1272 0.939454H12.6584C11.6995 0.939454 10.762 1.21484 9.95532 1.73438L9.0022 2.3457L8.04907 1.73438C7.24323 1.21494 6.30469 0.938941 5.34595 0.939454H0.877197C0.531494 0.939454 0.252197 1.21875 0.252197 1.56445V12.6582C0.252197 13.0039 0.531494 13.2832 0.877197 13.2832H5.34595C6.30493 13.2832 7.24243 13.5586 8.04907 14.0781L8.91626 14.6367C8.94165 14.6523 8.97095 14.6621 9.00024 14.6621C9.02954 14.6621 9.05884 14.6543 9.08423 14.6367L9.95142 14.0781C10.76 13.5586 11.6995 13.2832 12.6584 13.2832H17.1272C17.4729 13.2832 17.7522 13.0039 17.7522 12.6582V1.56445C17.7522 1.21875 17.4729 0.939454 17.1272 0.939454ZM5.34595 11.877H1.65845V2.3457H5.34595C6.03735 2.3457 6.70923 2.54297 7.28931 2.91602L8.24243 3.52734L8.3772 3.61523V12.6387C7.44751 12.1387 6.40845 11.877 5.34595 11.877ZM16.3459 11.877H12.6584C11.5959 11.877 10.5569 12.1387 9.6272 12.6387V3.61523L9.76196 3.52734L10.7151 2.91602C11.2952 2.54297 11.967 2.3457 12.6584 2.3457H16.3459V11.877ZM6.75415 4.8457H3.12524C3.04907 4.8457 2.98657 4.91211 2.98657 4.99219V5.87109C2.98657 5.95117 3.04907 6.01758 3.12524 6.01758H6.7522C6.82837 6.01758 6.89087 5.95117 6.89087 5.87109V4.99219C6.89282 4.91211 6.83032 4.8457 6.75415 4.8457ZM11.1116 4.99219V5.87109C11.1116 5.95117 11.1741 6.01758 11.2502 6.01758H14.8772C14.9534 6.01758 15.0159 5.95117 15.0159 5.87109V4.99219C15.0159 4.91211 14.9534 4.8457 14.8772 4.8457H11.2502C11.1741 4.8457 11.1116 4.91211 11.1116 4.99219ZM6.75415 7.58008H3.12524C3.04907 7.58008 2.98657 7.64648 2.98657 7.72656V8.60547C2.98657 8.68555 3.04907 8.75195 3.12524 8.75195H6.7522C6.82837 8.75195 6.89087 8.68555 6.89087 8.60547V7.72656C6.89282 7.64648 6.83032 7.58008 6.75415 7.58008ZM14.8792 7.58008H11.2502C11.1741 7.58008 11.1116 7.64648 11.1116 7.72656V8.60547C11.1116 8.68555 11.1741 8.75195 11.2502 8.75195H14.8772C14.9534 8.75195 15.0159 8.68555 15.0159 8.60547V7.72656C15.0178 7.64648 14.9553 7.58008 14.8792 7.58008Z" />
|
||||
</svg>
|
||||
<span class="omnivore-top-button-label">Read Now</span>
|
||||
</button>
|
||||
@ -303,10 +372,10 @@
|
||||
|
||||
<button id="omnivore-open-menu-btn">
|
||||
<svg width="15" height="4" viewBox="0 0 15 4" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="1.48679" cy="1.79492" rx="1.4846" ry="1.5" fill="#6A6968"/>
|
||||
<ellipse cx="7.00217" cy="1.79492" rx="1.4846" ry="1.5" fill="#6A6968"/>
|
||||
<ellipse cx="7.00217" cy="1.79492" rx="1.4846" ry="1.5" fill="#6A6968"/>
|
||||
<ellipse cx="12.5176" cy="1.79492" rx="1.4846" ry="1.5" fill="#6A6968"/>
|
||||
<ellipse cx="1.48679" cy="1.79492" rx="1.4846" ry="1.5" />
|
||||
<ellipse cx="7.00217" cy="1.79492" rx="1.4846" ry="1.5" />
|
||||
<ellipse cx="7.00217" cy="1.79492" rx="1.4846" ry="1.5" />
|
||||
<ellipse cx="12.5176" cy="1.79492" rx="1.4846" ry="1.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="omnivore-toast-divider"></span>
|
||||
|
||||
Reference in New Issue
Block a user