nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: corner cases for dark mode #175

Browse source
This commit is contained in:
Sören Weber 2022-02-15 20:00:00 +01:00
parent e67b6035e8
commit 5e06e2e21a
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
4 changed files with 162 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/css/tabs.css
View file

@ -1,25 +1,25 @@
#body .tab-nav-button { #body .tab-nav-button {
border-width: 1px 1px 1px 1px !important; background-color: rgba( 134, 134, 134, .166 ) !important;
border-color: #ccc !important; border-color: rgba( 134, 134, 134, .333 ) !important;
border-radius: 4px 4px 0 0 !important; border-radius: 4px 4px 0 0 !important;
background-color: #eaeaea !important; border-width: 1px 1px 1px 1px !important;
bottom: -1px;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
color-adjust: exact; color-adjust: exact;
float: left;
display: block; display: block;
position: relative; float: left;
margin-left: 4px; margin-left: 4px;
bottom: -1px; position: relative;
} }
#body .tab-nav-button:first-child { #body .tab-nav-button:first-child {
margin-left: 9px; margin-left: 9px;
} }
#body .tab-nav-button.active { #body .tab-nav-button.active {
background-color: #fff !important; background-color: #ffffff !important; /* var(--MAIN-BG-color) */
border-bottom-color: #fff !important; border-bottom-color: #ffffff !important; /* var(--MAIN-BG-color) */
} }
#body .tab-nav-button:not(.active) { #body .tab-nav-button:not(.active) {
border-bottom-color: #ddd !important; border-bottom-color: rgba( 134, 134, 134, .1 ) !important;
margin-top: 7px; margin-top: 7px;
padding-bottom: 2px !important; padding-bottom: 2px !important;
padding-top: 2px !important; padding-top: 2px !important;
@ -28,19 +28,19 @@
opacity: .8; opacity: .8;
} }
#body .tab-panel { #body .tab-panel {
margin-top: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
margin-top: 1.5rem;
} }
#body .tab-content { #body .tab-content {
background-color: #fff; background-color: transparent;
border-color: rgba( 134, 134, 134, .333 );
border-style: solid;
border-width: 1px;
clear: both; clear: both;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
color-adjust: exact; color-adjust: exact;
display: block; display: block;
padding: 8px; padding: 8px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
z-index: 10; z-index: 10;
} }
#body .tab-content .tab-item{ #body .tab-content .tab-item{

8
static/css/tags.css
View file

@ -12,7 +12,7 @@
position: relative; position: relative;
margin: 0 16px 8px 0; margin: 0 16px 8px 0;
padding: 0 10px 0 12px; padding: 0 10px 0 12px;
background: #7dc903; background: #7dc903; /* var(--MENU-HEADER-BG-color) */
-webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
@ -21,7 +21,7 @@
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
color: #ffffff; color: #ffffff; /* var(--MAIN-BG-color) */
} }
#body .tags a.tag-link:before { #body .tags a.tag-link:before {
@ -31,7 +31,7 @@
left: -.99em; left: -.99em;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent #7dc903 transparent transparent; border-color: transparent #7dc903 transparent transparent; /* var(--MENU-HEADER-BG-color) */
border-style: solid; border-style: solid;
border-width: 1em 1em 1em 0; border-width: 1em 1em 1em 0;
} }
@ -45,5 +45,5 @@
height: 5px; height: 5px;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
border-radius: 100%; border-radius: 100%;
background: #ffffff; background: #ffffff; /* var(--MAIN-BG-color) */
} }

216
static/css/theme.css
View file

@ -345,7 +345,7 @@ th {
#body img.shadow, #body img.shadow,
#body .video-container.shadow { #body .video-container.shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 30px rgba( 216, 216, 216, .666 );
} }
#body img.inline { #body img.inline {
@ -777,110 +777,140 @@ td {
.tooltipped { .tooltipped {
position: relative; position: relative;
} }
.tooltipped:after { .tooltipped:after {
background: rgba(0, 0, 0, 0.8);
border: 1px solid #777; border: 1px solid #777;
position: absolute; border-radius: 3px;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
color: #fff; color: #fff;
content: attr(aria-label);
display: none;
font: normal normal 11px/1.5 "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
letter-spacing: normal;
padding: 5px 8px;
pointer-events: none;
position: absolute;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
text-transform: none; text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre; white-space: pre;
pointer-events: none; word-wrap: break-word;
content: attr(aria-label); z-index: 1000000;
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
} }
.tooltipped:before { .tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent; border: 5px solid transparent;
color: rgba(0, 0, 0, 0.8);
content: "";
display: none;
height: 0;
pointer-events: none;
position: absolute;
width: 0;
z-index: 1000001;
} }
.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
top: 100%; .tooltipped-s:after,
right: 50%; .tooltipped-se:after,
.tooltipped-sw:after {
margin-top: 5px; margin-top: 5px;
}
.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
top: auto;
right: 50%; right: 50%;
top: 100%;
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
border-bottom-color: rgba(0, 0, 0, 0.8);
bottom: -5px; bottom: -5px;
margin-right: -5px; margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8); right: 50%;
top: auto;
} }
.tooltipped-se:after { .tooltipped-se:after {
right: auto;
left: 50%; left: 50%;
margin-left: -15px; margin-left: -15px;
right: auto;
} }
.tooltipped-sw:after { .tooltipped-sw:after {
margin-right: -15px; margin-right: -15px;
} }
.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
right: 50%; .tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
bottom: 100%; bottom: 100%;
margin-bottom: 5px; margin-bottom: 5px;
}
.tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before {
top: -5px;
right: 50%; right: 50%;
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
border-top-color: rgba(0, 0, 0, 0.8);
bottom: auto; bottom: auto;
margin-right: -5px; margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8); right: 50%;
top: -5px;
} }
.tooltipped-ne:after { .tooltipped-ne:after {
right: auto;
left: 50%; left: 50%;
margin-left: -15px; margin-left: -15px;
right: auto;
} }
.tooltipped-nw:after { .tooltipped-nw:after {
margin-right: -15px; margin-right: -15px;
} }
.tooltipped-s:after, .tooltipped-n:after {
.tooltipped-s:after,
.tooltipped-n:after {
transform: translateX(50%); transform: translateX(50%);
} }
.tooltipped-w:after { .tooltipped-w:after {
right: 100%;
bottom: 50%; bottom: 50%;
margin-right: 5px; margin-right: 5px;
right: 100%;
transform: translateY(50%); transform: translateY(50%);
} }
.tooltipped-w:before { .tooltipped-w:before {
top: 50%; border-left-color: rgba(0, 0, 0, 0.8);
bottom: 50%; bottom: 50%;
left: -5px; left: -5px;
margin-top: -5px; margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8); top: 50%;
} }
.tooltipped-e:after { .tooltipped-e:after {
bottom: 50%; bottom: 50%;
left: 100%; left: 100%;
margin-left: 5px; margin-left: 5px;
transform: translateY(50%); transform: translateY(50%);
} }
.tooltipped-e:before { .tooltipped-e:before {
top: 50%; border-right-color: rgba(0, 0, 0, 0.8);
right: -5px;
bottom: 50%; bottom: 50%;
margin-top: -5px; margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8); right: -5px;
top: 50%;
} }
.highlightable { .highlightable {
@ -918,7 +948,7 @@ td {
} }
#top-bar.is-sticky { #top-bar.is-sticky {
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
} }
#top-github-link { #top-github-link {
@ -1154,7 +1184,7 @@ option {
} }
.mermaid > svg:hover { .mermaid > svg:hover {
border-color: #ccc; border-color: rgba( 134, 134, 134, .333 );
} }
.include.hide-first-heading h1:first-of-type, .include.hide-first-heading h1:first-of-type,
@ -1184,25 +1214,6 @@ option {
display: block; display: block;
} }
/* Table of contents */
.progress ul {
list-style: none;
margin: 0;
padding: 0 15px;
}
#TableOfContents {
font-size: 13px !important;
max-height: 85vh;
overflow: auto;
padding: 15px 5px !important;
}
#TableOfContents > ul > li > a {
font-weight: 500;
}
#body a.highlight, #body a.highlight,
#body a.highlight:hover, #body a.highlight:hover,
#body a.highlight:focus { #body a.highlight:focus {
@ -1237,76 +1248,99 @@ option {
background-color: transparent; background-color: transparent;
} }
/* Table of contents */
.progress { .progress {
background-color: rgba(246, 246, 246, 0.97); background-color: #ffffff; /* var(--MAIN-BG-color) */
border: thin solid #ECECEC; border: thin solid rgba( 134, 134, 134, .166 );
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
display: none; display: none;
position: absolute; position: absolute;
width: auto; width: auto;
z-index: 200; z-index: 200;
} }
.progress .wrapper {
background-color: rgba( 134, 134, 134, .066 );
}
.progress ul {
list-style: none;
margin: 0;
padding: 0 15px;
}
#TableOfContents {
font-size: 13px !important;
max-height: 85vh;
overflow: auto;
padding: 15px 5px !important;
}
#TableOfContents > ul > li > a {
font-weight: 500;
}
#toc-menu { #toc-menu {
border-right: thin solid #DAD8D8 !important; border-right: thin solid rgba( 134, 134, 134, .333 );
margin-right: 0.5rem !important; margin-right: 0.5rem !important;
padding-right: 1rem !important; padding-right: 1rem !important;
} }
#sidebar-toggle-span { #sidebar-toggle-span {
border-right: thin solid #DAD8D8 !important; border-right: thin solid rgba( 134, 134, 134, .333 );
margin-right: 1rem !important; margin-right: 1rem !important;
padding-right: 0.5rem !important; padding-right: 0.5rem !important;
} }
.btn { .btn {
background-image: none !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
cursor: pointer !important;
display: inline-block !important; display: inline-block !important;
padding: 6px 12px !important;
margin-bottom: 0 !important;
font-size: 14px !important; font-size: 14px !important;
font-weight: 500; font-weight: 500;
line-height: 1.42857143 !important; line-height: 1.42857143 !important;
padding: 6px 12px !important;
margin-bottom: 0 !important;
text-align: center !important; text-align: center !important;
white-space: nowrap !important;
vertical-align: middle !important;
-ms-touch-action: manipulation !important; -ms-touch-action: manipulation !important;
touch-action: manipulation !important; touch-action: manipulation !important;
cursor: pointer !important; -webkit-transition: all 0.15s !important;
-moz-transition: all 0.15s !important;
transition: all 0.15s !important;
-webkit-user-select: none !important; -webkit-user-select: none !important;
-moz-user-select: none !important; -moz-user-select: none !important;
-ms-user-select: none !important; -ms-user-select: none !important;
user-select: none !important; user-select: none !important;
background-image: none !important; vertical-align: middle !important;
border: 1px solid transparent !important; white-space: nowrap !important;
border-radius: 4px !important;
-webkit-transition: all 0.15s !important;
-moz-transition: all 0.15s !important;
transition: all 0.15s !important;
} }
.btn:focus { .btn:focus {
/*outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;*/
outline: none !important; outline: none !important;
} }
.btn:hover, .btn:hover,
.btn:focus { .btn:focus {
color: #2b2b2b !important;
text-decoration: none !important; text-decoration: none !important;
} }
.btn-default { .btn-default {
color: #333 !important; color: #101010 !important; /* var(--MAIN-TEXT-color) */
background-color: #fff !important; background-color: transparent;
border-color: #ccc !important; border-color: rgba( 134, 134, 134, .333 ) !important;
} }
.btn-default:hover, .btn-default:hover,
.btn-default:focus, .btn-default:focus,
.btn-default:active { .btn-default:active {
color: #fff !important; color: #ffffff !important; /* var(--MAIN-BG-color) */
background-color: #9e9e9e !important; background-color: rgba( 134, 134, 134, .75 ) !important;
border-color: #9e9e9e !important; border-color: rgba( 134, 134, 134, .75 ) !important;
} }
.btn-default:active { .btn-default:active {
background-image: none !important; background-image: none !important;
} }

19
static/css/variant.css
View file

@ -143,6 +143,20 @@ pre .copy-to-clipboard:hover {
background-color: var(--MAIN-LINK-color); background-color: var(--MAIN-LINK-color);
} }
.progress {
background-color: var(--MAIN-BG-color, #ffffff);
}
.btn-default {
color: var(--MAIN-TEXT-color) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: var(--MAIN-BG-color, #ffffff) !important;
}
.anchor { .anchor {
color: var(--MAIN-ANCHOR-color); color: var(--MAIN-ANCHOR-color);
} }
@ -159,3 +173,8 @@ pre .copy-to-clipboard:hover {
#body .tags a.tag-link:after { #body .tags a.tag-link:after {
background-color: var(--MAIN-BG-color, #ffffff); background-color: var(--MAIN-BG-color, #ffffff);
} }
#body .tab-nav-button.active {
background-color: var(--MAIN-BG-color, #ffffff) !important;
border-bottom-color: var(--MAIN-BG-color, #ffffff) !important;
}