diff --git a/.gitmodules b/.gitmodules index c2c1104c23..c434de0873 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,6 @@ [submodule "EspruinoAppLoaderCore"] path = core - url = https://github.com/espruino/EspruinoAppLoaderCore.git + url = https://github.com/RKBoss6/EspruinoAppLoaderCore.git [submodule "webtools"] path = webtools url = https://github.com/espruino/EspruinoWebTools.git diff --git a/core b/core index 1a23f49bd3..4fb873a3cc 160000 --- a/core +++ b/core @@ -1 +1 @@ -Subproject commit 1a23f49bd3fcc332577788a3c8d14bbb4344a563 +Subproject commit 4fb873a3cc37465d255017eca5728de399e8ec52 diff --git a/css/main.css b/css/main.css index ab40a93199..874566ff1a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,12 +1,17 @@ /* NAVIGATION BAR AND GENERAL STYLES */ + :root { + color-scheme: light dark; /* Informs the browser the site supports both schemes */ + --hero-img-filter: invert(0%); + } body { - color: #3c3c3c; + background-color: light-dark(#ffffff, #232323); + color: light-dark(#3c3c3c, #cacaca); padding-left: 1em; padding-right: 1em; } .navbar { - background-color: #5755d9; + background-color: light-dark(#5755d9, #3a386f); padding: 1em 1em 1em 1em; } @@ -57,9 +62,11 @@ border-radius: 1em; padding: 0.5em; padding-left: 1em; - border: solid 1px #dadee4; + background-color: light-dark(#fff, #2d2d2d); + border: solid 1px light-dark(#dadee4, #3a386f); box-shadow: none; margin: -1; + color: light-dark(#3c3c3c, #cacaca); } .panel-header { @@ -111,21 +118,39 @@ transform: scale(1, 1); } } - + .modal-overlay { + background: light-dark(#ffffff4b,#5e5e5ebc)!important; + /* Add the blur effect */ + /* Apply the blur to the backdrop */ + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); /* Safari support */ + } .btn { border-radius: 0.4em; + background-color: light-dark(#ffffff, #232323); } #connectmydevice { margin-right: 1.5em; + background-color:#fff; } - + .menu{ + background-color:light-dark(#ffffff, #313131); + color: light-dark(#3c3c3c, #cacaca); + } + .btn.input-group-btn { border-bottom-right-radius: 1em; border-top-right-radius: 1em; } - + .btn.btn-clear{ + color:light-dark(#000000,#FFFFFF); + } + .form-select{ + background-color:light-dark(#ffffff, #232323)!important; + border-radius:0.4em; + } .btn.btn-favourite:focus, .btn.btn-favourite:focus-visible, .btn-favourite:focus, @@ -336,9 +361,12 @@ padding-left: 0.01em; } + .avatar { + background-color: transparent!important; + } .avatar img { - border-radius: 5px 5px 5px 5px; - background: #fff; + background-color: transparent!important; + border-radius: 0.3em!important; } #toastcontainer { @@ -403,7 +431,7 @@ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.025); - border: solid 1.3px #dadee47c; + border: solid 1.3px light-dark(#dadee47c,#484848); margin: 0; /* spacing handled by container gap */ padding: 0.9em; @@ -422,7 +450,28 @@ } .chip{ border-radius: 0.7em; + background-color: light-dark(#EEF0F3,#424242); + } + code{ + background-color: light-dark(#fdf2f2,#2f2e2e); + } + .hero-img { + filter: invert(0%); + } + + html[data-theme="dark"] { + --hero-img-filter: invert(100%); + } + .hero-img { + filter: var(--hero-img-filter); + } + .modal-title{ + color: light-dark(#000000,#FFFFFF); + } + .hero.bg-gray{ + background-color: light-dark(#F7F7F9,#2C2C2C)!important; + border-radius:1em; } .link-github { position: absolute; @@ -448,7 +497,7 @@ justify-content: flex-end; padding: 0em 1em; margin-right: 0.05em; - background-color: rgba(87, 85, 217, 0.055); + background-color: light-dark(rgba(87, 85, 217, 0.055), rgba(87, 85, 217, 0.152)); border-radius: 999px; font-family: sans-serif; height: auto; @@ -457,7 +506,7 @@ .modal-container { border-radius: 1.5em; - background-color: rgb(253, 253, 255); + background-color: light-dark(rgb(253, 253, 255), rgb(44, 44, 44)); padding: 1em; } @@ -476,6 +525,7 @@ align-items: center; /* Centers vertically */ text-align: left; + color: light-dark(#3c3c3c, #cacaca); } diff --git a/index.html b/index.html index 21ff5e5443..43be8ac20e 100644 --- a/index.html +++ b/index.html @@ -122,7 +122,7 @@