Skip to content

Commit d15cf6a

Browse files
edwiniedwini
committed
Using sandbox hit
CSS fixes Removed white-flash in darkmode
1 parent 2af6777 commit d15cf6a

File tree

3 files changed

+59
-136
lines changed

3 files changed

+59
-136
lines changed

‎src/css/helios-gcx.css‎

Lines changed: 32 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,6 @@
66
--announcement-height: 48px;
77
}
88

9-
.doc .source-toolbox .copy-button {
10-
flex-direction: row!important;
11-
}
12-
13-
.source-toolbox .copy-toast {
14-
position: absolute!important;
15-
right: 0;
16-
top: 1em;
17-
}
18-
199
@font-face {
2010
font-family: 'Material Icons';
2111
font-style: normal;
@@ -1091,10 +1081,6 @@ label.switch_label:after {
10911081
color: var(--white);
10921082
}
10931083

1094-
.dark-mode .nav-item.is-current-page a {
1095-
color: var(--color-interface-night-300);
1096-
}
1097-
10981084
.dark-mode .nav-item.is-current-page::before {
10991085
background: var(--color-interface-night-300);
11001086
border: 2px solid var(--color-interface-night-300);
@@ -1379,29 +1365,13 @@ label.switch_label:after {
13791365

13801366
/* DARK MODE LISTS */
13811367

1382-
.dark-mode .nav-item[data-depth="1"].toggler:hover,
1383-
.dark-mode .nav-item[data-depth="2"].toggler:hover,
1384-
.dark-mode .nav-item[data-depth="3"].toggler:hover,
1385-
.dark-mode .nav-item[data-depth="4"].toggler:hover {
1386-
color: #000;
1387-
background-color: #f6f8fa;
1388-
}
1389-
13901368
.dark-mode .nav-item[data-depth="1"].toggler>.nav-text:hover,
13911369
.dark-mode .nav-item[data-depth="2"].toggler>.nav-text:hover,
13921370
.dark-mode .nav-item[data-depth="3"].toggler>.nav-text:hover,
13931371
.dark-mode .nav-item[data-depth="4"].toggler>.nav-text:hover {
13941372
background-color: transparent;
13951373
}
13961374

1397-
.dark-mode .nav-item[data-depth="1"]:hover,
1398-
.dark-mode .nav-item[data-depth="2"]:hover,
1399-
.dark-mode .nav-item[data-depth="3"]:hover,
1400-
.dark-mode .nav-item[data-depth="4"]:hover {
1401-
color: #000;
1402-
background-color: #f6f8fa;
1403-
}
1404-
14051375
.dark-mode .nav-item[data-depth="1"].toggler.is-active:hover,
14061376
.dark-mode .nav-item[data-depth="2"].toggler.is-active:hover,
14071377
.dark-mode .nav-item[data-depth="3"].toggler.is-active:hover,
@@ -1416,10 +1386,6 @@ label.switch_label:after {
14161386
background-color: transparent;
14171387
}
14181388

1419-
.dark-mode .nav-item.is-current-page a:hover {
1420-
color: black;
1421-
}
1422-
14231389
.dark-mode li.nav-item.toggler.is-active[data-depth="2"] .nav-text {
14241390
color: #fff;
14251391
}
@@ -1547,20 +1513,22 @@ code::before {
15471513
background-size: 49%;
15481514
}
15491515

1550-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] {
1516+
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) {
15511517
padding: 0;
15521518
}
15531519

1554-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] a {
1555-
margin: 8px 32px;
1520+
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) a.nav-link {
1521+
padding: 8px 62px;
15561522
}
15571523

1558-
li.nav-item.is-current-page.is-active li.nav-item[data-depth="2"] {
1524+
li.nav-item[data-depth="3"] {
15591525
padding: 0;
15601526
}
15611527

1562-
li.nav-item.is-current-page.is-active li.nav-item[data-depth="2"] a {
1563-
margin: 8px 32px;
1528+
li.nav-item[data-depth="3"] a.nav-link {
1529+
padding-right: 32px!important;
1530+
padding-left: 64px!important;
1531+
margin: 0 0 0 32px!important;
15641532
}
15651533

15661534
li.nav-item.is-current-page.is-active:has(li):has(li) {
@@ -1572,89 +1540,39 @@ li.nav-item.is-current-page.is-active:has(li):has(li):before {
15721540
border: none;
15731541
}
15741542

1575-
li.nav-item.is-current-page.is-active:has(li.toggler):hover {
1576-
color: #6a7086;
1577-
}
1578-
1579-
li.nav-item.toggler[data-depth="2"]:hover a {
1580-
color: #6a7086;
1581-
}
1582-
1583-
li.nav-item[data-depth="3"] {
1584-
padding: 2px 18px;
1585-
}
1586-
1587-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"] a {
1588-
padding: 8px 15px 8px 32px;
1589-
}
1590-
1591-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] a.nav-link {
1592-
padding: 20px 32px;
1593-
}
1594-
1595-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) a {
1596-
padding: 8px 32px;
1597-
}
1598-
1599-
.nav-item.is-current-page.is-active>a,
1600-
.nav-item.is-current-page.is-active>button {
1601-
color: #6a7086;
1602-
}
1603-
1604-
.dark-mode .nav-item.is-current-page.is-active>a,
1605-
.dark-mode .nav-item.is-current-page.is-active>button {
1606-
color: #a6b1c2;
1607-
}
1608-
1609-
li.nav-item.is-active.is-current-path[data-depth="1"] a:hover {
1610-
color: #6a7086;
1611-
}
1612-
1613-
.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"]:hover a {
1614-
color: black!important;
1615-
}
1616-
1617-
.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"] a {
1618-
color: white;
1619-
}
1620-
1621-
.dark-mode .nav-item[data-depth="3"]:hover a {
1622-
color: black;
1623-
}
1624-
1625-
.dark-mode .nav-item[data-depth="2"].toggler.is-active:hover a {
1543+
.dark-mode .nav-item.is-current-page a {
16261544
color: white;
16271545
}
16281546

1629-
.dark-mode li.nav-item.toggler[data-depth="2"]:hover a {
1630-
color: black;
1631-
}
1632-
1633-
.dark-mode li.nav-item.toggler[data-depth="2"]:has(li[data-depth="3"]) {
1634-
background-color: transparent;
1635-
}
1636-
1637-
.dark-mode li.nav-item.toggler[data-depth="2"]:has(li[data-depth="3"])::before {
1638-
background-color: transparent;
1639-
border: 0;
1640-
}
1641-
1642-
.dark-mode li.nav-item.toggler[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]) a {
1643-
color: white;
1547+
.dark-mode .nav-item[data-depth="1"]:hover,
1548+
.dark-mode .nav-item[data-depth="2"]:hover,
1549+
.dark-mode .nav-item[data-depth="3"]:hover,
1550+
.dark-mode .nav-item[data-depth="4"]:hover {
1551+
background-color: #2e394e;
16441552
}
16451553

1646-
.dark-mode li.nav-item.toggler[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]):hover a {
1647-
color: black;
1554+
.dark-mode .nav-item a:hover,
1555+
.dark-mode .nav-item button:hover,
1556+
.dark-mode .nav-item span:hover,
1557+
.dark-mode li.nav-item.toggler[data-depth="1"]:hover .nav-text,
1558+
.dark-mode li.nav-item.toggler[data-depth="1"]:hover button {
1559+
color: #fff;
16481560
}
16491561

1650-
.dark-mode li.nav-item.toggler.is-active[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]):hover a {
1651-
color: white;
1562+
.dark-mode .nav-item[data-depth="1"].toggler:hover,
1563+
.dark-mode .nav-item[data-depth="2"].toggler:hover,
1564+
.dark-mode .nav-item[data-depth="3"].toggler:hover,
1565+
.dark-mode .nav-item[data-depth="4"].toggler:hover {
1566+
color: #fff;
1567+
background-color: #2e394e;
16521568
}
16531569

1654-
.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:hover span a {
1655-
color: black;
1570+
.dark-mode .nav-item.is-current-page a:hover {
1571+
color: #fff;
16561572
}
16571573

1658-
.navbar-burger {
1659-
height: 20px!important;
1574+
.dark-mode .nav-item[data-depth="1"].toggler:hover button,
1575+
.dark-mode li.nav-item.toggler.is-active[data-depth="2"]:hover .nav-text,
1576+
.dark-mode li.nav-item[data-depth="2"]:hover a {
1577+
color: #fff;
16601578
}

‎src/js/08-gcx-helios.js‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/*Dark theme verification*/
2-
var theme = window.localStorage.getItem('theme')
32

43
function isMobile () {
54
// eslint-disable-next-line no-undef
@@ -8,21 +7,21 @@ function isMobile () {
87
else if (localStorage.mobile) return true
98
// eslint-disable-next-line max-len
109
var mobile = ['iphone', 'ipad', 'android', 'blackberry', 'nokia', 'opera mini', 'windows mobile', 'windows phone', 'iemobile']
11-
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true
10+
for (var i in mobile) { if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true }
1211
return false
1312
}
1413

1514
window.addEventListener('DOMContentLoaded', (event) => {
15+
var theme = window.localStorage.getItem('theme')
16+
1617
var path = window.location.pathname
1718
var page = path.split('/').pop()
1819
var name = page.replace('.html', '')
1920
console.log(name)
2021
const sidebar = document.querySelector('.sidebar')
2122
const col = document.getElementById('collapse')
2223
var checkbox = document.getElementById('switch')
23-
var root = document.getElementsByTagName('html')[0]
2424
if (theme) {
25-
root.classList.add('dark-mode')
2625
checkbox.checked = true
2726
} else {
2827
checkbox.checked = false
@@ -46,19 +45,19 @@ window.addEventListener('DOMContentLoaded', (event) => {
4645
//No es un clic en el sidebar
4746
//if (!event.target.matches('li[data-depth="1"]') && !event.target.matches('.switch')) return;
4847
/* if (event.target.closest('li.nav-item.toggler')) {
49-
console.log(event.target)
50-
event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
51-
}
52-
/*if ((event.target.matches('span.nav-text') ||
53-
event.target.matches('button.nav-item-toggle')) &&
54-
(event.target.offsetParent.matches('li[data-depth="1"]') ||
55-
event.target.offsetParent.matches('li[data-depth="0"]'))) {
56-
event.target.offsetParent.classList.toggle('is-active');
57-
}
58-
if (event.target.matches('li[data-depth="1"]') ||
59-
event.target.matches('li[data-depth="0"]')) {
60-
event.target.classList.toggle('is-active');
61-
}*/
48+
console.log(event.target)
49+
event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
50+
}
51+
/*if ((event.target.matches('span.nav-text') ||
52+
event.target.matches('button.nav-item-toggle')) &&
53+
(event.target.offsetParent.matches('li[data-depth="1"]') ||
54+
event.target.offsetParent.matches('li[data-depth="0"]'))) {
55+
event.target.offsetParent.classList.toggle('is-active');
56+
}
57+
if (event.target.matches('li[data-depth="1"]') ||
58+
event.target.matches('li[data-depth="0"]')) {
59+
event.target.classList.toggle('is-active');
60+
}*/
6261
if (event.target.matches('.switch')) {
6362
var root = document.getElementsByTagName('html')[0]
6463
if (event.target.checked) {

‎src/partials/header-scripts.hbs‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
<!--<script>
2-
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://a.datastax.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="d24gQtyKIUu5mLdkp11xjfiXLhRqx0HH";;analytics.SNIPPET_VERSION="4.15.3";
1+
<script>
2+
!function(){
3+
/*var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://a.datastax.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="d24gQtyKIUu5mLdkp11xjfiXLhRqx0HH";;analytics.SNIPPET_VERSION="4.15.3";
34
analytics.load("d24gQtyKIUu5mLdkp11xjfiXLhRqx0HH");
4-
analytics.page();
5-
}}();
6-
</script>-->
5+
analytics.page();*/
6+
var theme = window.localStorage.getItem('theme');
7+
var root = document.getElementsByTagName('html')[0];
8+
if (theme) {
9+
root.classList.add('dark-mode');
10+
}
11+
}();
12+
</script>
713

0 commit comments

Comments
 (0)