diff --git a/package/ctcgfw/luci-theme-edge/Makefile b/package/ctcgfw/luci-theme-edge/Makefile index abfe420d77..40587d5108 100644 --- a/package/ctcgfw/luci-theme-edge/Makefile +++ b/package/ctcgfw/luci-theme-edge/Makefile @@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Edge Theme LUCI_DEPENDS:= -PKG_VERSION:=2.2 -PKG_RELEASE:=20201029 +PKG_VERSION:=2.4 +PKG_RELEASE:=20201128 include $(TOPDIR)/feeds/luci/luci.mk diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/1.jpg b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/1.jpg new file mode 100644 index 0000000000..5f7ce31545 Binary files /dev/null and b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/1.jpg differ diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/2.jpg b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/2.jpg new file mode 100644 index 0000000000..81462887fc Binary files /dev/null and b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/2.jpg differ diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/3.jpg b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/3.jpg new file mode 100644 index 0000000000..53b7fc5f38 Binary files /dev/null and b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/background/3.jpg differ diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/cascade.css b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/cascade.css index e0ab483a10..43f0062476 100644 --- a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/cascade.css +++ b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/cascade.css @@ -364,46 +364,6 @@ a { width: 100%; } -.col-1 { - flex: 1 1 30px !important; -} - -.col-2 { - flex: 2 2 60px !important; -} - -.col-3 { - flex: 3 3 90px !important; -} - -.col-4 { - flex: 4 4 120px !important; -} - -.col-5 { - flex: 5 5 150px !important; -} - -.col-6 { - flex: 6 6 180px !important; -} - -.col-7 { - flex: 7 7 210px !important; -} - -.col-8 { - flex: 8 8 240px !important; -} - -.col-9 { - flex: 9 9 270px !important; -} - -.col-10 { - flex: 10 10 300px !important; -} - * { box-sizing: border-box; margin: 0; @@ -480,7 +440,7 @@ input:not([type]), input[type=text]:not(.browser-default), input[type=password]: border-radius: 0; outline: none; margin: 0; - padding: 0; + padding: 0 0.5rem; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; @@ -900,7 +860,7 @@ header .fill .status * { .main .main-left .nav>li>a { display: block; - font-size: 0.9rem !important; + font-size: 0.93rem !important; margin: 0.4rem 0.5rem !important; padding: 0.5rem 0 0.5rem 2.5rem !important; transition: box-shadow .25s, -webkit-box-shadow .25s; @@ -1113,7 +1073,15 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before } #maincontent > .container { - margin: 1rem 0 1rem 0; + margin: 0 2%; +} + +.Overview.node-admin-status #maincontent > .container { + padding:0; +} + +.Overview.node-admin-status #maincontent > .container h2{ + padding-left:2rem; } ul { @@ -1143,7 +1111,7 @@ h3 { h4 { font-size: 1.2rem; - margin: 2rem 0 0 0; + margin: 1.2rem 0 0 0; padding: 0rem 2rem 0.75rem 2rem; } @@ -1153,25 +1121,9 @@ h5 { padding-bottom: 10px; } -.cbi-section, -.cbi-section-error, -#iptables, -.Firewall form, -#cbi-network > .cbi-section-node, -#cbi-wireless > .cbi-section-node, -#cbi-wireless > #wifi_assoclist_table, -[data-tab-title], -[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), -[data-page="admin-system-opkg"] #maincontent > .container { - font-family: inherit; - font-weight: normal; - font-style: normal; - line-height: normal; - min-width: inherit; - margin: 1rem 0; - padding: 0rem; - border: 0; - background-color: #fff; +.container .cbi-section{ + margin-bottom:1rem; + } .cbi-modal .cbi-section, @@ -1188,7 +1140,7 @@ h5 { .cbi-section-descr { font-size: small; line-height: 2rem; - padding: 0 0 0.5rem 2rem; + padding: 0 0 0.5rem 0; } .cbi-section-node { @@ -1212,6 +1164,10 @@ h5 { text-decoration: underline; } +fieldset.cbi-section{ +border:none; +} + .cbi-section > legend { display: none !important; } @@ -1411,38 +1367,13 @@ td > table > tbody > tr > td, -webkit-appearance: none !important; } -.btn:hover, -.btn:focus, -.btn:active, -.cbi-button:hover, -.cbi-button:focus, -.cbi-button:active, -.item:hover::after, -.item:focus::after, -.item:active::after, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:hover, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:focus, -.cbi-page-actions .cbi-button-apply + .cbi-button-save:active { - text-decoration: none; - outline: 0; -} - button:hover, .waves-input-wrapper:hover, .btn:hover, -.btn:focus, .cbi-button:hover, -.cbi-button:focus, -.item:hover::after, -.item:focus::after { - opacity: 0.7; - top: 0.15rem; -} - -.btn:active, -.cbi-button:active, -.item:active::after { +.item:hover::after { opacity: 0.7; + top: 0.1rem; } .cbi-button-up:hover, @@ -1450,10 +1381,6 @@ button:hover, opacity: 0.7; } -.cbi-button-up:active { - opacity: 0.7; -} - .btn:disabled, .cbi-button:disabled { cursor: not-allowed; @@ -1598,7 +1525,7 @@ button:hover, } ul.tabs,.tabmenu .tabs,#tabmenu .tabs,ul.cbi-tabmenu { - padding-left: 2rem; + padding-left: 2.5%; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12); transition: box-shadow .25s, -webkit-box-shadow .25s; border-radius: 2px; @@ -1608,6 +1535,11 @@ ul.tabs,.tabmenu .tabs,#tabmenu .tabs,ul.cbi-tabmenu { padding-top: 1rem; } +#packages{ + margin-left: -2%; + width: 105%; +} + .cbi-tabmenu > li:hover { background-color: rgba(246,178,181,0.2); } @@ -1873,7 +1805,7 @@ ul.tabs,.tabmenu .tabs,#tabmenu .tabs,ul.cbi-tabmenu { outline: 0; } -.cbi-dropdown > ul.preview { +#cbi-adblock-global-adb_sources .cbi-dropdown > ul.preview { display: none; } @@ -1959,6 +1891,7 @@ ul.tabs,.tabmenu .tabs,#tabmenu .tabs,ul.cbi-tabmenu { .cbi-dropdown > ul > li > form > input[type="checkbox"] { height: auto; margin: 0; + display:inline-block; } .cbi-dropdown > ul > li input[type="text"] { @@ -1972,7 +1905,7 @@ ul.tabs,.tabmenu .tabs,#tabmenu .tabs,ul.cbi-tabmenu { width: auto; min-width: 100%; max-width: none; - max-height: 200px !important; + max-height: 200px; border: thin solid #918e8c; background: #f6f6f6; box-shadow: 0 0 4px #918e8c; @@ -2259,7 +2192,6 @@ body.modal-overlay-active #modal_overlay { .cbi-page-actions { padding-top: 1rem; text-align: right; - padding-right: 2rem; } .node-main-login .cbi-page-actions { @@ -2347,8 +2279,12 @@ textarea { transition: box-shadow .25s, -webkit-box-shadow .25s; border-radius: 2px; border: 0 !important; - margin: 0 2rem; - width: 95% !important; +} + +textarea:focus{ + outline: none; + border: 1px solid #5A8DEE !important; + box-shadow: 0 0px 5px 0 #5A8DEE; } .cbi-section textarea { @@ -2647,8 +2583,8 @@ span[data-tooltip] .label { background-color: #D2FFE8; } -label > input[type="checkbox"], -label > input[type="radio"] { +input[type="checkbox"], +input[type="radio"] { position: relative; right: 0.2rem; margin: 0; @@ -2758,7 +2694,7 @@ input[name="nslookup"] { transition: box-shadow .25s, -webkit-box-shadow .25s; border-radius: 2px; text-align: left; - background: #faf5f3c2; + background: rgba(255, 255, 255, 0.75); margin: 0; } @@ -2975,15 +2911,9 @@ input[name="nslookup"] { color: #32325d; color: var(--gray-dark); } -/* software */ -[data-page="admin-system-opkg"] h2 { - margin-left: 1.5rem; - color: #32325d; - color: var(--gray-dark); -} .controls { - margin: 0.5em 2rem 1em 2rem !important; + margin: 0.5em 0 1em 0 !important; } .controls > * > .btn:not([aria-label$="page"]) { @@ -3008,12 +2938,6 @@ input[name="nslookup"] { padding-top: 0.1rem; } -.td.version, -.td.size { - white-space: normal !important; - word-break: break-word; -} - .cbi-tabmenu + .cbi-section { margin-top: 0; } @@ -3223,11 +3147,8 @@ input[type="checkbox"] { padding: 0; cursor: pointer; transition: all 0.2s; - position: absolute; - opacity: 0; - pointer-events: none; + display:none; } - input[type="checkbox"]:checked { border: 1px solid #5A8DEE; background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; @@ -3236,19 +3157,17 @@ input[type="checkbox"]:checked { background-repeat: no-repeat; background-position: center; } -/* IE hacks */ -@media all and (-ms-high-contrast: none) { - .main > .main-left > .nav > .slide > .menu::before { - top: 30.25%; - } +.cbi-dropdown[open]>ul.dropdown>li label { + margin-left: .5rem; +} - .main > .main-left > .nav > li:last-child::before { - top: 20%; - } +#cbi-adblock-global-adb_sources .cbi-dropdown-open .cbi-dropdown[open] > ul.dropdown{ + position:relative !important; + bottom:0 !important; +} - .showSide::before { - top: -12px; - } +#cbi-adblock-global-adb_sources .cbi-dropdown-open .preview,#cbi-adblock-global-adb_sources .cbi-dropdown-open .more,.cbi-dropdown-open .open{ +display:none !important; } @media screen and (max-width: 1600px) { @@ -3420,10 +3339,6 @@ input[type="checkbox"]:checked { font-size: 1rem; } - .table { - display: block; - } - .Interfaces .table { overflow-x: hidden; } @@ -3447,6 +3362,12 @@ input[type="checkbox"]:checked { border-top: 0; } +.node-admin-status.Overview .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + .th, .td { display: inline-block; @@ -3548,6 +3469,14 @@ input[type="checkbox"]:checked { width: 100% !important; margin-left: 0 !important; } +#packages .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +#packages .td { + padding: 1em 2rem; +} } @media screen and (max-width: 768px) { @@ -3611,21 +3540,9 @@ input[type="checkbox"]:checked { display: inline-block; } - .main > .main-left > .nav > .slide > .menu { - font-size: 1.2rem; - } - - .main > .main-left > .nav > .slide > .slide-menu > li > a { - font-size: 0.8rem; - } - .cbi-section > div { overflow-x: auto; } - - .cbi-map >.cbi-section { - padding: 0 1rem !important; - } } @media screen and (max-width: 600px) { @@ -3722,6 +3639,7 @@ input[type="checkbox"]:checked { margin: 0.5rem 0; background: none; padding: 0; + border:none; } .cbi-map style+fieldset.cbi-section:first-of-type p font { @@ -4002,10 +3920,6 @@ code,.cbi-progressbar::after { background-color: white !important; } -.cbi-map >.cbi-section { - padding: 0 2rem; -} - .cbi-map >.cbi-section .cbi-value { padding-left: 1rem; padding-right: 1rem; @@ -4059,15 +3973,9 @@ i input { flex-basis: auto !important; } -h2,.cbi-map-descr { - padding-left: 2rem; -} - -@media screen and (max-width: 1680px) and (min-width: 1280px) { -.cbi-map >.cbi-section .cbi-section-table,.cbi-map >.cbi-section .cbi-tabmenu,.cbi-map >.cbi-section .table { - margin-left: -1.95rem !important; - width: 105.5% !important; -} +.cbi-map >.cbi-section .cbi-section-table,.container .cbi-tabmenu,.container #tabmenu,.cbi-map >.cbi-section .table { + margin-left: -2%; + width: 105%; } .admin-status-overview h2.content { @@ -4137,10 +4045,14 @@ cbi-button.cbi-button-neutral { } input[type=password]+.cbi-button.cbi-button-neutral { - padding: 0.1rem 0.4rem; + padding: 0 0.4rem; color: #fff !important; } +.cbi-input-password[type=text]+.cbi-button.cbi-button-neutral { + padding: 0.2rem 0.5rem; +} + .main-right>hr { height: 6px; background-color: rgba(255, 0, 27, 0.95); @@ -4166,6 +4078,10 @@ div[id^="cbi-unblockmusic"] .cbi-button { padding: 0 2rem; } +.cbi-section-table .tr>.td:last-child,#packages .tr>.td:last-child{ + padding-right:3%; +} + .chromeframe { padding: 2rem 3rem; margin: 0 auto; @@ -4188,8 +4104,12 @@ div[id^="cbi-unblockmusic"] .cbi-button { color: orangered; } -.landscape { - position: absolute; - width: 100%; - height: 100%; +[data-page="admin-network-wifi"] tr > td .cbi-button{ + margin-left: 0 !important; } +[data-page="admin-network-wifi"] tr > td input[type="button"]{ + padding: 0.5rem 1rem !important; +} +table.interfaces .th{ + padding:1.1em 0.5rem !important; +} \ No newline at end of file diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/js/script.js b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/js/script.js index 54e288aff2..76c58c8114 100644 --- a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/js/script.js +++ b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/js/script.js @@ -282,36 +282,10 @@ var getaudio = $('#player')[0]; /* Get the audio from the player (using the player's ID), the [0] is necessary */ - var mouseovertimer; /* Global variable for a timer. When the mouse is hovered over the speaker it will start playing after hovering for 1 second, if less than 1 second it won't play (incase you accidentally hover over the speaker) */ var audiostatus = 'off'; /* Global variable for the audio's status (off or on). It's a bit crude but it works for determining the status. */ - $(document).on('mouseenter', '.speaker', function() { - /* Bonus feature, if the mouse hovers over the speaker image for more than 1 second the audio will start playing */ - if (!mouseovertimer) { - mouseovertimer = window.setTimeout(function() { - mouseovertimer = null; - if (!$('.speaker').hasClass("speakerplay")) { - getaudio.load(); - /* Loads the audio */ - getaudio.play(); - /* Play the audio (starting at the beginning of the track) */ - $('.speaker').addClass('speakerplay'); - return false; - } - }, 1000); - } - }); - - $(document).on('mouseleave', '.speaker', function() { - /* If the mouse stops hovering on the image (leaves the image) clear the timer, reset back to 0 */ - if (mouseovertimer) { - window.clearTimeout(mouseovertimer); - mouseovertimer = null; - } - }); - $(document).on('click touchend', '.speaker', function() { /* Touchend is necessary for mobile devices, click alone won't work */ if (!$('.speaker').hasClass("speakerplay")) { @@ -319,7 +293,6 @@ $('.speaker').addClass('speakerplay'); getaudio.load(); getaudio.play(); - window.clearTimeout(mouseovertimer); audiostatus = 'on'; return false; } else if (audiostatus == 'on') { @@ -329,7 +302,6 @@ } else if ($('.speaker').hasClass("speakerplay")) { getaudio.pause(); $('.speaker').removeClass('speakerplay'); - window.clearTimeout(mouseovertimer); audiostatus = 'on'; } }); @@ -362,13 +334,13 @@ $(".waves-input-wrapper").filter(function () {     } }).hide(); -$("div>select:first-child,div>input[type='text']:first-child,div>input[type='email']:first-child,div>input[type='url']:first-child,div>input[type='date']:first-child,div>input[type='datetime']:first-child,div>input[type='tel']:first-child,div>input[type='number']:first-child,div>input[type='search']:first-child").filter(function () { -return (!$(this).parents(".cbi-dynlist").length&&!$("body.Diagnostics").length) +$("div>select:first-child,div>input[type='text']:first-child").filter(function () { +return (!$(this).parents(".cbi-dynlist").length&&!$("body.Diagnostics").length&&!$(this).hasClass("cbi-input-password")) }).after(""); $("input[type='checkbox']").filter(function () { return (!$(this).next("label").length) -}).css({"position":"relative","opacity":"1","pointer-events":"auto"}); +}).show(); $("select,input").filter(function () { return ($(this).next(".focus-input").length) @@ -377,6 +349,6 @@ $("select,input").filter(function () { }).blur(function(){ $(this).css("border-bottom","1px solid #9e9e9e"); }); - }, 400); + }, 0); $(".cbi-value").has("textarea").css("background","none"); })(jQuery); diff --git a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/landscape.css b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/landscape.css index 05e3aaf63e..10817377b4 100644 --- a/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/landscape.css +++ b/package/ctcgfw/luci-theme-edge/htdocs/luci-static/edge/landscape.css @@ -1,1058 +1,57 @@ -/* Global Styles - ---------------------------------------------- */ - html {font-family: 'Open Sans', sans-serif; background: #0D133A; height:100%; font-size: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-smoothing: antialiased;overflow: hidden;position: relative;} - img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } - svg:not(:root) { overflow: hidden; } - -/* Animation globals - ---------------------------------------------- */ - #landscape, .land, #bottom, .stags,.stag, .counter:before, #lensFlare, .sunMask{ - animation-duration: 15s; - animation-iteration-count: infinite; - animation-timing-function: linear; - } - -/* Background gradients - ---------------------------------------------- */ - #sky{ - height: 60%; - margin-bottom: -6px; - position: absolute; - top: 0px; - z-index: 2; - } -#sky-rect{height:100%;} - - #reflection, #sunMask{ - height: 40%; - position: absolute; - top: 60%; - z-index: 4; - } -#reflection-rect{height:100%;} - #sunMask{ - background: #0D133A; - height: 40%; - position: absolute; - top: 60%; - width: 100%; - } - -/* Stag - ---------------------------------------------- */ - #stag{ - position: absolute; - bottom: 15.3%; - width: 6.3%; - left: 38%; - z-index: 5; - } - .stag{ - width:100%; - position: absolute; - bottom: 0px; - } - .stags{ - animation-name: stags; - animation-delay:1s; - } - @keyframes stags{ - 0% { fill:#0D141E;} - 4% { fill:#101522;} - 8% { fill:#121726;} - 12% { fill:#141829;} - 16% { fill:#1C1E3C;} - 20% { fill:#22214F;} - 24% { fill:#262262;} - 28% { fill:#1D4065;} - 32% { fill:#125768;} - 36% { fill:#1E4553;} - 40% { fill:#1E404E;} - 44% { fill:#1E3B49;} - 48% { fill:#1D3643;} - 52% { fill:#1C313E;} - 56% { fill:#1C3344;} - 60% { fill:#1C3449;} - 64% { fill:#1B344F;} - 68% { fill:#183454;} - 72% { fill:#242B4A;} - 76% { fill:#2B2241;} - 80% { fill:#24203C;} - 84% { fill:#1D1D37;} - 88% { fill:#151A32;} - 92% { fill:#14192C;} - 96% { fill:#111725;} - 100% { fill:#0D141E;} - } - #stag1{ - animation-name: stag_one; - width: 108%; - left: -20%; - - } - @keyframes stag_one{ - 0% {opacity:1.0;} - 15% {opacity:1.0;} - 20% {opacity:0.0;} - 90% {opacity:0.0;} - 95% {opacity:1.0;} - 100% {opacity:1.0;} - } - #stag2{ - animation-name: stag_two; - } - @keyframes stag_two{ - 0% {opacity:0.0;} - 17% {opacity:0.0;} - 20% {opacity:1.0;} - 40% {opacity:1.0;} - 45% {opacity:0.0;} - 65% {opacity:0.0;} - 70% {opacity:1.0;} - 90% {opacity:1.0;} - 95% {opacity:0.0;} - 100% {opacity:0.0;} - } - #stag3{ - animation-name: stag_three; - width: 144%; - left: -10%; - bottom: -3%; - } - @keyframes stag_three{ - 0% {opacity:0.0;} - 15% {opacity:0.0;} - 20% {opacity:0.0;} - 40% {opacity:0.0;} - 45% {opacity:1.0;} - 65% {opacity:1.0;} - 70% {opacity:0.0;} - 100% {opacity:0.0;} - } - -/* Sun - ---------------------------------------------- */ - .sunMask{ - position:absolute; - width:100%; - height:100%; - -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); - z-index: 4; - mix-blend-mode: screen; - animation-name: sunFocus; - } - @keyframes sunFocus{ - 0% { filter: blur(10px);opacity:0;} - 16% {filter: blur(10px);} - 20% {filter: blur(10px);} - 25% {filter: blur(5px);opacity:0;} - 30% {filter: blur(0px);opacity:1;} - 80% {filter: blur(0px);opacity:1;} - 88% {filter: blur(5px);opacity:0;} - 100% {filter: blur(10px);opacity:0;} - } - .sun{ - width: 100%; - padding-bottom: 100%; - position:absolute; - right: -51%; - top: -330%; - } - .sun div{ - background: transparent url(./sun.svg); - position: absolute; - top: 0; bottom: 0; left: 0; right: 0; - } - .suncrane{ - animation: suncrane 15s linear infinite; - position:absolute; - width: 21%; - height: 4%; - background: transparent; - margin: auto; - top: 40%; - left: 0; - right: 0; - } - @keyframes suncrane{ - 0% {transform:rotate(90deg);} - 100% {transform:rotate(-270deg);} - } - .sun:before{ - display:block; - content:' '; - animation: glare 15s linear infinite; - position:absolute; - width: 120%; - height: 120%; - background: url(./glare.svg) no-repeat scroll center; - top: -10%; - left: -10%; - background-size: 100%; - } - - @keyframes glare{ - from {transform:rotate(90deg);opacity:0.0;} - 30%{opacity:0.0;} - 36%{opacity:1.0;} - 68%{opacity:1.0;} - 74%{opacity:0.0;} - to {transform:rotate(450deg);opacity:0.0;} - } - - - .sun:after{display: block; content:' '; position:absolute;background: white;width: 10%;height: 10%;top: 45%;border-radius: 100%;margin: auto;left: 0;right: 0;box-shadow: 0px 0px 80px 30px white;} - -/* Clouds - ---------------------------------------------- */ - .clouds{ - position: absolute; - width: 100%; - z-index: 4; mix-blend-mode: screen; - height: 100%; - } - .clouds svg{ - width: 60%; - position: absolute; - top: 51%; - filter: blur(2px); - opacity: 0.4; - left: -60%; - animation-duration: 15s; - animation-iteration-count: infinite; - animation-timing-function: linear; - animation-name: clouds; - } - @keyframes clouds{ - 0% {transform: translate3d(110%, 0px, 0px);opacity: 0.0;} - 19%{opacity: 0.0;filter: blur(5px);} - 25%{opacity: 0.3;filter: blur(2px);} - 50%{opacity: 0.6;} - 75%{opacity: 0.2;} - 90%{opacity: 0.0;} - 100% {transform: translate3d(150%, 0px, 0px);opacity: 0.0} - } - -/* Lens flare - ---------------------------------------------- */ - .lighting{ - width: 100%; - height: 100%; - position: absolute; - z-index: 8; - opacity: 0.3; - -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1))); - mix-blend-mode: screen; - pointer-events: none; - filter: blur(3px); - } - .lighting .suncrane{ - width: 100%; - } - #lensFlare{ - transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); - animation-name: flaring; - } - - @keyframes flaring{ - 0% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0;} - 28% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } - 35% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } - 70% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } - 78% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } - 100% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } - } - -/* Sun on lake twinkles - ---------------------------------------------- */ - .twinkleWrap{ - position: absolute; - z-index: 4; - width:100%; - height:100%; - top:0; - opacity: 0.55; - } - - .twinkles{ - width: 2.3%; - position: absolute; - right: 49.2%; - top: 72.5%; - animation: twinkles 15s linear infinite; - } - @keyframes twinkles{ - 0% {transform: translate(450%, 0%);opacity:0.0;} - 32%{opacity:0.0;} - 34%{opacity:1.0;} - 36.5% {transform: translate(450%, 0%);} - 54% {transform: translate(0%, 0%);} - 72% {transform: translate(-450%, 0%);opacity:1.0;} - 78%{opacity:0.0;} - 100% {transform: translate(-450%, 0%);opacity:0.0;} - } - .twinkles:before{ - content:' '; - display: none; - position:absolute; - height: 600px; - width:3px; - background:red; - top: -600px; - left: 50%; - } - .twinkles svg{ - width: 100%; - position: absolute; - top: 0; - } - #twinkle1{ - animation: twinkle1 2s linear infinite; - } - @keyframes twinkle1{ - 0% {opacity:1.0;} - 33.33% {opacity:0.0;} - 66.66% {opacity:0.0;} - 99.99% {opacity:1.0;} - 100% {opacity:1.0;} - } - #twinkle2{ animation: twinkle2 2s linear infinite; - } - @keyframes twinkle2{ - 0% {opacity:0.0;} - 33.33% {opacity:1.0;} - 66.66% {opacity:0.0;} - 99.99% {opacity:0.0;} - 100% {opacity:0.0;} - } - #twinkle3{ animation: twinkle3 2s linear infinite; - } - @keyframes twinkle3{ - 0% {opacity:0.0;} - 33.33% {opacity:0.0;} - 66.66% {opacity:1.0;} - 99.99% {opacity:0.0;} - 100% {opacity:0.0;} - } - -/* Vignette - ---------------------------------------------- */ - .vignette{ - background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%); - background-size: cover; - height: 100%; - z-index: 9; - position: absolute; - width: 100%; - pointer-events: none; +#CrossFade { + background: #fff; + position: absolute; + width: 100%; + height: 100%; +} +#CrossFade img { + position: absolute; + min-width: 100%; + min-height: 100%; + height: auto; + background: #fff; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0; + -webkit-transform: scale(1.4) rotate(12deg); + transform: scale(1.4) rotate(12deg); + -webkit-animation: CrossFade 12s infinite; + animation: CrossFade 12s infinite; +} +#CrossFade img:nth-child(3) { + -webkit-animation-delay: 8s; + animation-delay: 8s; +} +#CrossFade img:nth-child(2) { + -webkit-animation-delay: 4s; + animation-delay: 4s; +} +#CrossFade img:nth-child(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; } -/* Stars - ---------------------------------------------- */ - .stars{ - height: 100%; - z-index: 2; - position: absolute; - width: 100%; - - overflow: hidden; +@-webkit-keyframes CrossFade { + 33.3% { + opacity: 1; + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); } - .starWrap{ - height: 60%; - width: 100%; - position:relative; + 45% { + opacity: 0; + } +} +@keyframes CrossFade { + 33.3% { + opacity: 1; + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } + 45% { + opacity: 0; } - .starProject{ - overflow: hidden; - } - .starReflect{ - overflow: hidden; - height: 40%; - opacity: 0.9; - top: 1%; - } - #stars{ - position: absolute; - width: 120%; - border-radius: 100%; - margin: auto; - left: -10%; - right: 0; - animation: stars 30s linear infinite; - transform: rotate(0deg); - top: -35%; - } - - @keyframes stars{ - 100% {transform: rotate(-360deg);} - } - - #starReflection{ - position: absolute; - width: 120%; - border-radius: 100%; - margin: auto; - left: -10%; - right: 0; - animation: starsReflect 30s linear infinite; - transform: rotate(0deg); - top:initial; - bottom: -102%; - } - @keyframes starsReflect{ - 100% {transform: rotate(360deg);} - } - -/* Sprites - ----------------------------------------------- */ - .spriteWrap{ - height: 100%; - width: 100%; - position: absolute; - z-index: 13; - animation: sprites 15s linear infinite; - pointer-events: none; - } - @keyframes sprites{ - 0% {opacity:0.8;} - 20% {opacity:0.8;} - 25%{opacity:0.0;} - 73% {opacity:0.0;} - 90% {opacity:0.8;} - 100% {opacity:0.8;} - } - - #sprites{ - height: 100%; - width: 100%; - } - - - -/* Landscape - ---------------------------------------------- */ - #landscape{ - width: 100.02%; - position: absolute; - bottom: 11%; - z-index: 5; - animation-name: focus; - } - @keyframes focus{ - 0% { filter: blur(5px);} - 16% {filter: blur(2px);} - 20% {filter: blur(0px);} - 80% {filter: blur(0px);} - 88% {filter: blur(2px);} - 100% {filter: blur(5px);} - } - - #bottom{ - animation-name: bottomFill; - height: 100%; - position: absolute; - top: 88%; - width: 100%; - z-index: 5; - animation-delay:1s; - } - @keyframes bottomFill{ - 0% { background:#0D141E; } - 4% { background:#101522; } - 8% { background:#121726; } - 12% { background:#141829; } - 16% { background:#1C1E3C; } - 20% { background:#22214F; } - 24% { background:#262262; } - 28% { background:#1D4065; } - 32% { background:#125768; } - 36% { background:#1E4553; } - 40% { background:#1E404E; } - 44% { background:#1E3B49; } - 48% { background:#1D3643; } - 52% { background:#1C313E; } - 56% { background:#1C3344; } - 60% { background:#1C3449; } - 64% { background:#1B344F; } - 68% { background:#183454; } - 72% { background:#242B4A; } - 76% { background:#2B2241; } - 80% { background:#24203C; } - 84% { background:#1D1D37; } - 88% { background:#151A32; } - 92% { background:#14192C; } - 96% { background:#111725; } - 100% { background:#0D141E; } - } - - /* Land - layer 1 animation */ - #landscape .layer1 { - fill:#F1F2F2; - animation-name: layer1; - animation-delay:1s; - } - @keyframes layer1{ - 0% { fill:#244154; } - 4% { fill:#344358; } - 8% { fill:#42465D; } - 12% { fill:#4F4761; } - 16% { fill:#7E5773; } - 20% { fill:#A3517F; } - 24% { fill:#F3829F; } - 28% { fill:#D4B2AF; } - 32% { fill:#AEDABB; } - 36% { fill:#A1D6D6; } - 40% { fill:#9ED5DD; } - 44% { fill:#9AD4E4; } - 48% { fill:#97D3EA; } - 52% { fill:#92D3F4; } - 56% { fill:#95C8DA; } - 60% { fill:#96BDC5; } - 64% { fill:#96B3B2; } - 68% { fill:#96AA9E; } - 72% { fill:#AF866A; } - 76% { fill:#C0633B; } - 80% { fill:#9D5E51; } - 84% { fill:#7B5960; } - 88% { fill:#59546D; } - 92% { fill:#484E64; } - 96% { fill:#37475C; } - 100% { fill:#244154; } - } - - /* Land - layer 2 animation */ - #landscape .layer2 { - fill:#E6E7E8; - animation-name: layer2; - animation-delay:1s; - } - @keyframes layer2{ - 0% { fill:#0F2B46; } - 4% { fill:#1C2D4A; } - 8% { fill:#272E4E; } - 12% { fill:#302F52; } - 16% { fill:#663966; } - 20% { fill:#913776; } - 24% { fill:#D94A93; } - 28% { fill:#BB94AD; } - 32% { fill:#76CCCE; } - 36% { fill:#6BAEC9; } - 40% { fill:#62A7CA; } - 44% { fill:#59A0CB; } - 48% { fill:#5099CC; } - 52% { fill:#4692CF; } - 56% { fill:#4D8FBD; } - 60% { fill:#518CAF; } - 64% { fill:#548AA1; } - 68% { fill:#578793; } - 72% { fill:#7E6768; } - 76% { fill:#8F4244; } - 80% { fill:#74404D; } - 84% { fill:#593D55; } - 88% { fill:#393B5D; } - 92% { fill:#2C3655; } - 96% { fill:#1F304E; } - 100% { fill:#0F2B46; } - } - - /* Land - layer 3 animation */ - #landscape .layer3 { - fill:#D1D3D4; - animation-name: layer3; - animation-delay:1s; - } - @keyframes layer3{ - 0% { fill:#0F2944; } - 4% { fill:#1B2B47; } - 8% { fill:#252C4B; } - 12% { fill:#2E2D4E; } - 16% { fill:#5F3663; } - 20% { fill:#863572; } - 24% { fill:#C8458D; } - 28% { fill:#A48BAB; } - 32% { fill:#68BFC7; } - 36% { fill:#54A4C8; } - 40% { fill:#4F9EC8; } - 44% { fill:#4B98C7; } - 48% { fill:#4691C7; } - 52% { fill:#408BC8; } - 56% { fill:#4688B7; } - 60% { fill:#4984A9; } - 64% { fill:#4C819C; } - 68% { fill:#4E7E8F; } - 72% { fill:#776167; } - 76% { fill:#893E45; } - 80% { fill:#6F3C4C; } - 84% { fill:#543A52; } - 88% { fill:#353758; } - 92% { fill:#2A3351; } - 96% { fill:#1E2E4A; } - 100% { fill:#0F2944; } - } - - /* Land - layer 4 animation */ - #landscape .layer4 { - fill:#BCBEC0; - animation-name: layer4; - animation-delay:1s; - } - @keyframes layer4{ - 0% { fill:#0F2841; } - 4% { fill:#1A2945; } - 8% { fill:#232A48; } - 12% { fill:#2B2A4B; } - 16% { fill:#59335F; } - 20% { fill:#7C336D; } - 24% { fill:#B84089; } - 28% { fill:#9683A5; } - 32% { fill:#57B5C1; } - 36% { fill:#4798BD; } - 40% { fill:#4391BC; } - 44% { fill:#408BBB; } - 48% { fill:#3D85BA; } - 52% { fill:#397FBA; } - 56% { fill:#3E7DAC; } - 60% { fill:#407AA1; } - 64% { fill:#427896; } - 68% { fill:#44768B; } - 72% { fill:#705B66; } - 76% { fill:#823B46; } - 80% { fill:#69394B; } - 84% { fill:#503650; } - 88% { fill:#323454; } - 92% { fill:#27304D; } - 96% { fill:#1C2C47; } - 100% { fill:#0F2841; } - } - - /* Land - layer 5 animation */ - #landscape .layer5 { - fill:#A7A9AC; - animation-name: layer5; - animation-delay:1s; - } - @keyframes layer5{ - 0% { fill:#0E263F; } - 4% { fill:#192742; } - 8% { fill:#212745; } - 12% { fill:#292848; } - 16% { fill:#51305B; } - 20% { fill:#6E3068; } - 24% { fill:#A23B82; } - 28% { fill:#84799F; } - 32% { fill:#44AABC; } - 36% { fill:#3A8DB3; } - 40% { fill:#3887B1; } - 44% { fill:#3680AF; } - 48% { fill:#347AAD; } - 52% { fill:#3273AB; } - 56% { fill:#3672A1; } - 60% { fill:#387198; } - 64% { fill:#396F90; } - 68% { fill:#3A6E87; } - 72% { fill:#695565; } - 76% { fill:#7C3747; } - 80% { fill:#64354A; } - 84% { fill:#4B334D; } - 88% { fill:#2E314F; } - 92% { fill:#252D4A; } - 96% { fill:#1B2A44; } - 100% { fill:#0E263F; } - } - - /* Land - layer 6 animation */ - #landscape .layer6 { - fill:#939598; - animation-name: layer6; - animation-delay:1s; - } - @keyframes layer6{ - 0% { fill:#0E243C; } - 4% { fill:#18253F; } - 8% { fill:#202542; } - 12% { fill:#262544; } - 16% { fill:#482C56; } - 20% { fill:#612D63; } - 24% { fill:#8D357C; } - 28% { fill:#6F719B; } - 32% { fill:#00A1BC; } - 36% { fill:#2583A8; } - 40% { fill:#287CA3; } - 44% { fill:#2A759F; } - 48% { fill:#2D6F9A; } - 52% { fill:#2E6895; } - 56% { fill:#2F6891; } - 60% { fill:#30678D; } - 64% { fill:#306788; } - 68% { fill:#306683; } - 72% { fill:#625064; } - 76% { fill:#753347; } - 80% { fill:#5E3249; } - 84% { fill:#47304A; } - 88% { fill:#2B2E4B; } - 92% { fill:#222A46; } - 96% { fill:#192741; } - 100% { fill:#0E243C; } - } - - /* Land - layer 7 animation */ - #landscape .layer7 { - fill:#808285; - animation-name: layer7; - animation-delay:1s; - } - @keyframes layer7{ - 0% { fill:#102237; } - 4% { fill:#18223A; } - 8% { fill:#1E233D; } - 12% { fill:#242340; } - 16% { fill:#402952; } - 20% { fill:#542A5E; } - 24% { fill:#793177; } - 28% { fill:#5F668F; } - 32% { fill:#0A8FA7; } - 36% { fill:#237595; } - 40% { fill:#256F90; } - 44% { fill:#27698C; } - 48% { fill:#286387; } - 52% { fill:#285D82; } - 56% { fill:#285E82; } - 60% { fill:#285F81; } - 64% { fill:#275F81; } - 68% { fill:#255F7F; } - 72% { fill:#574A63; } - 76% { fill:#683148; } - 80% { fill:#542F48; } - 84% { fill:#3F2D47; } - 88% { fill:#242742; } - 92% { fill:#202841; } - 96% { fill:#19253C; } - 100% { fill:#102237; } - } - - /* Land - layer 8 animation */ - #landscape .layer8 { - fill:#6D6E71; - animation-name: layer8; - animation-delay:1s; - } - @keyframes layer8{ - 0% { fill:#111F31; } - 4% { fill:#172034; } - 8% { fill:#1C2037; } - 12% { fill:#20213B; } - 16% { fill:#37274C; } - 20% { fill:#472759; } - 24% { fill:#662C71; } - 28% { fill:#4F5C83; } - 32% { fill:#118095; } - 36% { fill:#206983; } - 40% { fill:#21637E; } - 44% { fill:#225D7A; } - 48% { fill:#225775; } - 52% { fill:#225270; } - 56% { fill:#235372; } - 60% { fill:#235574; } - 64% { fill:#235675; } - 68% { fill:#235676; } - 72% { fill:#4C445F; } - 76% { fill:#5B2F49; } - 80% { fill:#4A2C47; } - 84% { fill:#382A44; } - 88% { fill:#242742; } - 92% { fill:#1E253D; } - 96% { fill:#182338; } - 100% { fill:#111F31; } - } - - /* Land - layer 9 animation */ - #landscape .layer9 { - fill:#58595B; - animation-name: layer9; - animation-delay:1s; - } - @keyframes layer9{ - 0% { fill:#111C2B; } - 4% { fill:#151D2E; } - 8% { fill:#191E32; } - 12% { fill:#1D1E35; } - 16% { fill:#2F2447; } - 20% { fill:#3A2454; } - 24% { fill:#52296C; } - 28% { fill:#405279; } - 32% { fill:#137185; } - 36% { fill:#1C5C72; } - 40% { fill:#1C576E; } - 44% { fill:#1C5269; } - 48% { fill:#1B4C64; } - 52% { fill:#1A475F; } - 56% { fill:#1C4A63; } - 60% { fill:#1E4B67; } - 64% { fill:#1F4D6A; } - 68% { fill:#204E6D; } - 72% { fill:#413E5A; } - 76% { fill:#4E2D49; } - 80% { fill:#402A45; } - 84% { fill:#312742; } - 88% { fill:#20243E; } - 92% { fill:#1B2238; } - 96% { fill:#171F32; } - 100% { fill:#111C2B; } - } - - /* Land - layer 10 animation */ - #landscape .layer10 { - fill:#414042; - animation-name: layer10; - animation-delay:1s; - } - @keyframes layer10{ - 0% { fill:#101825; } - 4% { fill:#131928; } - 8% { fill:#161A2C; } - 12% { fill:#181B2F; } - 16% { fill:#262141; } - 20% { fill:#2C214F; } - 24% { fill:#3D2567; } - 28% { fill:#30486F; } - 32% { fill:#136476; } - 36% { fill:#165163; } - 40% { fill:#154C5E; } - 44% { fill:#144759; } - 48% { fill:#134254; } - 52% { fill:#113D4F; } - 56% { fill:#154055; } - 60% { fill:#19425A; } - 64% { fill:#1B445F; } - 68% { fill:#1E4564; } - 72% { fill:#363856; } - 76% { fill:#412A49; } - 80% { fill:#352744; } - 84% { fill:#29243F; } - 88% { fill:#1C203A; } - 92% { fill:#191F33; } - 96% { fill:#151C2C; } - 100% { fill:#101825; } - } - - /* Land - layer 11 animation */ - #landscape .layer11 { - fill:#232323; - animation-name: layer11; - animation-delay:1s; - } - @keyframes layer11{ - 0% { fill:#0D141E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 4% { fill:#101522; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} - 8% { fill:#121726; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 12% { fill:#141829; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} - 16% { fill:#1C1E3C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 20% { fill:#22214F; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} - 24% { fill:#262262; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 28% { fill:#1D4065; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} - 32% { fill:#125768; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 36% { fill:#1E4553; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} - 40% { fill:#1E404E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 44% { fill:#1E3B49; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} - 48% { fill:#1D3643; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 52% { fill:#1C313E; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} - 56% { fill:#1C3344; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 60% { fill:#1C3449; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} - 64% { fill:#1B344F; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 68% { fill:#183454; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} - 72% { fill:#242B4A; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 76% { fill:#2B2241; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} - 80% { fill:#24203C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} - 84% { fill:#1D1D37; } - 88% { fill:#151A32; } - 92% { fill:#14192C; } - 96% { fill:#111725; } - 100% { fill:#0D141E; } - } - -/* Aspect ratio media queries - ---------------------------------------------- */ - - /* 3/2 and 6/1 -- out of range*/ - @media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1){ - body{background: rgb(31, 60, 80);} - body:before{content:'Aspect ratio out of range - too wide';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} - #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} - } - - /* 14/5 and 3/1 */ - @media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2){ - .twinkles{} - #reflection, #sunMask{height: 42%;} - #landscape{bottom: -3%;} - #bottom{top: 101%;} - #stag{bottom: 3%;} - .sun{top: -570%;} - .twinkles{top: 77%;} - } - /* 5/2 and 14/5 */ - @media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5){ - .twinkles{top: 75%;} - #reflection, #sunMask{} - #landscape{bottom: 1%;} - #bottom{top: 98%;} - #stag{bottom: 7%;} - .sun{top: -532%;} - } - /* 9/4 and 5/2 */ - @media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2){ - .twinkles{top: 75%;} - #reflection, #sunMask{height: 40%;} - #landscape{bottom: 5%;} - #bottom{top: 94%;} - #stag{bottom: 10%;} - .sun{top: -452%;} - } - /* 11/5 and 9/4 */ - @media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4){ - .twinkles{} - #reflection, #sunMask{} - #landscape{bottom: 6%;} - #bottom{top: 93%;} - #stag{ - bottom: 11%;} - .sun{top: -410%;} - } - /* 13/6 and 11/5 */ - @media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5){ - .twinkles{} - #reflection, #sunMask{height: 37%;} - #landscape{bottom: 6%;} - #bottom{top: 93%;} - #stag{bottom: 11%;} - .sun{} - } - - /* 15/7 and 13/6 */ - @media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6){ - .twinkles{} - #reflection, #sunMask{height: 31%;} - #landscape{bottom: 7%;} - #bottom{top: 92%;} - #stag{bottom: 12%;} - .sun{} - } - - /* 2/1 and 15/7 */ - @media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7){ - .twinkles{} - #reflection, #sunMask{height: 31%;} - #landscape{bottom: 8%;} - #bottom{top: 91%;} - #stag{bottom: 12%;} - .sun{top: -370%;} - } - - @media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1){ - .twinkles{} - #reflection, #sunMask{height: 30%;} - #landscape{} - #bottom{} - #stag{bottom: 15%;} - .sun{} - } - - /* 7/4 and 15/8 */ - @media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8){ - .twinkles{top: 71%;} - #reflection, #sunMask{height: 28%;} - #landscape{bottom: 13%;} - #bottom{top: 86%;} - #stag{bottom: 17%;} - .sun{top: -300%;} - } - /* 11/7 and 7/4 */ - @media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4){ - .twinkles{top: 69%;} - #reflection, #sunMask{height: 24%;} - #landscape{bottom: 16%;} - #bottom{top: 83%;} - #stag{bottom: 20%;} - .sun{top: -270%;} - } - /* 13/9 and 11/7 */ - @media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7){ - .twinkles{top: 68%;} - #reflection, #sunMask{height: 22%;} - #landscape{bottom: 18%;} - #bottom{top: 81%;} - #stag{bottom: 21.6%;} - .sun{top: -240%;} - } - /* 4/3 and 13/9 */ - @media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9){ - .twinkles{top: 66%;} - #reflection, #sunMask{height: 19%;} - #landscape{bottom: 22%;} - #bottom{top: 77%;} - #stag{bottom: 25%;} - .sun{top: -230%;} - } - /* 8/7 and 4/3 */ - @media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3){ - .twinkles{top: 65%;} - #reflection, #sunMask{height: 18%;} - #landscape{bottom: 23%;} - #bottom{top: 76%;} - #stag{bottom: 25.3%;} - .sun{top: -180%;} - } - /* 14/15 and 8/7 */ - @media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7){ - .twinkles{top: 63%;width: 3%;} - #reflection, #sunMask{height: 17%;} - #landscape{bottom: 26%;} - #bottom{top: 73.8%;} - #stag{bottom: 28.3%;} - .sun{top: -140%;} - } - /* 5/6 and 14/15 */ - @media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15){ - .twinkles{top: 63%; width: 3%;} - #reflection, #sunMask{height: 13%;} - #landscape{bottom: 28%;} - #bottom{top: 71.5%;} - #stag{bottom: 30%;} - .sun{top: -110%;} - } - /* 7/10 and 5/6 */ - @media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6){ - .twinkles{top: 62%; width: 3%;} - #reflection, #sunMask{height: 11%;} - #landscape{bottom: 30%;} - #bottom{top: 69.6%;} - #stag{bottom: 31.8%;} - .sun{top: -70%;} - } - /* 4/9 and 7/10 */ - @media screen and (min-aspect-ratio: 4/9) and (max-aspect-ratio: 7/10){ - .twinkles{top: 62%; width: 3%;} - #reflection, #sunMask{height: 8%;} - #landscape{bottom: 32%;} - #bottom{top: 67.5%;} - #stag{bottom: 33.5%;} - .sun{top: -55%;} - } - - /* 1/10 and 4/9 --- out of range*/ - @media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 4/9){ - body{background: rgb(31, 60, 80);} - body:before{content:'Aspect ratio out of range - too narrow';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} - #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} - } - - #player { - height: 0; - width: 0 } - -/* Apologies for the large base64 image file */ .speaker { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAACACAYAAAG0HAZ0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEFERTNEQzA3QTMxMTFFMzgzNTFFRDRCMzk1MDA0NUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEFERTNEQzE3QTMxMTFFMzgzNTFFRDRCMzk1MDA0NUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQURFM0RCRTdBMzExMUUzODM1MUVENEIzOTUwMDQ1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQURFM0RCRjdBMzExMUUzODM1MUVENEIzOTUwMDQ1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvEtsecAABjVSURBVHjaYvz//z/D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); diff --git a/package/ctcgfw/luci-theme-edge/luasrc/view/themes/edge/sysauth.htm b/package/ctcgfw/luci-theme-edge/luasrc/view/themes/edge/sysauth.htm index 3b8618f17b..70d78abcce 100644 --- a/package/ctcgfw/luci-theme-edge/luasrc/view/themes/edge/sysauth.htm +++ b/package/ctcgfw/luci-theme-edge/luasrc/view/themes/edge/sysauth.htm @@ -5,9 +5,9 @@ -%> <%+header_login%> -
-
>
+
imgimgimg
+
+ + + <% + local uci = require "luci.model.uci".cursor() + local fs = require "nixio.fs" + local https_key = uci:get("uhttpd", "main", "key") + local https_port = uci:get("uhttpd", "main", "listen_https") + if type(https_port) == "table" then + https_port = https_port[1] + end + + if https_port and fs.access(https_key) then + https_port = https_port:match("(%d+)$") + %> + + <% end %> + <%+footer%> +<% +luci.sys.exec("(sleep 1;curl -k -L https://source.unsplash.com/featured/1080x720/?wallpapers -o /www/luci-static/edge/background/1.jpg) &") +luci.sys.exec("(sleep 1;curl -k -L https://source.unsplash.com/featured/1080x720/?fashion -o /www/luci-static/edge/background/2.jpg) &") +luci.sys.exec("(sleep 1;curl -k -L https://source.unsplash.com/featured/1080x720/?nature -o /www/luci-static/edge/background/3.jpg) &") +%> \ No newline at end of file