theme: fix copy-to-clipboard hover and colors #175

This commit is contained in:
Sören Weber 2022-02-16 17:30:10 +01:00
parent 7c04fdc473
commit efc6c1cd52
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 15 additions and 19 deletions

View file

@ -6,8 +6,8 @@
@import "chroma-relearn-dark.css"; @import "chroma-relearn-dark.css";
:root { :root {
--MAIN-TEXT-color: #ffffff; /* Color of text by default */ --MAIN-TEXT-color: #e0e0e0; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #7c7c7c; /* Color of titles h2-h3-h4-h5-h6 */ --MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-LINK-color: #1c90f3; /* Color of links */ --MAIN-LINK-color: #1c90f3; /* Color of links */
--MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */ --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
--MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */ --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */

View file

@ -767,7 +767,7 @@ td {
} }
.tooltipped:after { .tooltipped:after {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 1);
border: 1px solid #777; border: 1px solid #777;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
@ -790,7 +790,7 @@ td {
.tooltipped:before { .tooltipped:before {
border: 5px solid transparent; border: 5px solid transparent;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 1);
content: ""; content: "";
display: none; display: none;
height: 0; height: 0;
@ -1069,14 +1069,11 @@ a[aria-disabled="true"] {
color: #fffae9; /* var(--CODE-INLINE-BG-color) */ color: #fffae9; /* var(--CODE-INLINE-BG-color) */
} }
/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */
pre .copy-to-clipboard { pre .copy-to-clipboard {
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: rgba( 160, 160, 160, .2 );
border-color: #101010; /* var(--MAIN-TEXT-color) */ border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
border-radius: 2px; border-radius: 2px;
color: #101010; /* var(--MAIN-TEXT-color) */ color: #486ac9; /* var(--MAIN-LINK-color) */
font-size: 120%;
opacity: .5;
padding: 5px 3px 5px 25px; padding: 5px 3px 5px 25px;
position: absolute; position: absolute;
right: 4px; right: 4px;
@ -1084,9 +1081,9 @@ pre .copy-to-clipboard {
} }
pre .copy-to-clipboard:hover { pre .copy-to-clipboard:hover {
background-color: #101010; /* var(--MAIN-TEXT-color) */ background-color: #486ac9; /* var(--MAIN-LINK-color) */
color: #ffffff; /* var(--MAIN-BG-color) */ border-color: #486ac9; /* var(--MAIN-LINK-color) */
opacity: .5; color: #000000; /* var(--CODE-BLOCK-color) */
} }
#homelinks { #homelinks {

View file

@ -114,16 +114,15 @@ div.featherlight .featherlight-content{
color: var(--CODE-INLINE-BG-color, #fffae9); color: var(--CODE-INLINE-BG-color, #fffae9);
} }
/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */
pre .copy-to-clipboard { pre .copy-to-clipboard {
background-color: var(--MAIN-BG-color, #ffffff); border-color: var(--CODE-BLOCK-BORDER-color, #d8d8d8);
border-color: var(--MAIN-TEXT-color); color: var(--MAIN-LINK-color, #486ac9);
color: var(--MAIN-TEXT-color);
} }
pre .copy-to-clipboard:hover { pre .copy-to-clipboard:hover {
background-color: var(--MAIN-TEXT-color); background-color: var(--MAIN-LINK-color, #486ac9);
color: var(--MAIN-BG-color, #ffffff); border-color: var(--MAIN-LINK-color, #486ac9);
color: var(--CODE-BLOCK-BG-color, #f8f8f8);
} }
#homelinks { #homelinks {