Compare commits

...

24 Commits

Author SHA1 Message Date
deri sahertian 5154da69bc
Merge pull request #23 from animegasan/master
Add iStore and Fix Logout
2024-02-28 23:51:18 +07:00
Hilman Maulana fe592a9b97
luci-app-alpha-config: Add theme configure 2024-02-24 15:09:20 +07:00
Hilman Maulana 06ef56c223
luci-app-alpha-config: Add theme configure 2024-02-24 15:08:47 +07:00
Hilman Maulana bd6a92977b
luci-app-alpha-config: Add themes configure 2024-02-24 15:07:29 +07:00
Hilman Maulana fcd3e54b60
luci-app-alpha-config: Add neko 2024-02-23 19:49:35 +07:00
Hilman Maulana 665b516e76
luci-app-alpha-config: Add neko icon 2024-02-23 19:39:42 +07:00
Hilman Maulana a196aa4e25
luci-app-alpha-config: Add CSS 2024-02-23 19:11:54 +07:00
Hilman Maulana 5c69f7deb5
luci-app-alpha-config: Replace css
Move CSS navbar a to footer.htm
2024-02-23 19:10:04 +07:00
Hilman Maulana aabed8229a
luci-app-alpha-config: Add uci alpha 2024-02-22 23:12:26 +07:00
Hilman Maulana 01e7171238
luci-app-alpha-config: Add uci config 2024-02-22 22:51:38 +07:00
Hilman Maulana 40350a9c91
luci-app-alpha-config: Migration for navbar 2024-02-22 22:47:02 +07:00
Hilman Maulana 9d9d94e6fc
Update Makefile 2024-02-22 16:22:39 +07:00
Hilman Maulana c5b13b0665
Update iStore 2024-02-22 15:57:46 +07:00
Hilman Maulana a3a8ed6b93
Add iStore and Fix Logout 2024-02-22 15:50:09 +07:00
Hilman Maulana ae3645bb4a
Add icon for iStore 2024-02-22 15:39:22 +07:00
deri sahertian 634c44dc33
Merge pull request #20 from animegasan/master
Update to 3.9.2-beta
2024-02-09 10:57:58 +07:00
Hilman Maulana f3ae2a4c3b Penyesuaian untuk luci-app-alpha-config
Ada beberapa penyesuaian dan fix bugs pada update 3.9.2-beta antara lain:

1. Memindahkan lokasi background login dan dasboard LuCI
2. Migrasi dari CSS ke HTML
2024-02-09 00:52:24 +07:00
Hilman Maulana e892cf9f43
Add files via upload 2024-02-08 13:55:02 +07:00
Hilman Maulana edce0e5086
Delete luasrc/style/style.css 2024-02-08 13:54:18 +07:00
deri sahertian 6b39b599e1
Merge pull request #17 from animegasan/master
luci-theme-alpha: Update file
2024-02-06 17:55:28 +07:00
Hilman Maulana e423372fcf
luci-theme-alpha: Rename background 2024-02-06 17:08:49 +07:00
Hilman Maulana 5a7b62d10b
luci-theme-alpha: Rename backgroundfanspage.png to login.png 2024-02-06 17:07:32 +07:00
Hilman Maulana 5539c5caf1
luci-theme-alpha: Change background name 2024-02-06 17:06:38 +07:00
Hilman Maulana 3fc40b5c63
luci-theme-alpha: Rename backgroundfanspage.png to dashboard.png 2024-02-06 17:04:29 +07:00
11 changed files with 4135 additions and 3587 deletions

View File

@ -10,7 +10,7 @@ THEME_NAME:=alpha
THEME_TITLE:=Alpha THEME_TITLE:=Alpha
PKG_NAME:=luci-theme-$(THEME_NAME) PKG_NAME:=luci-theme-$(THEME_NAME)
PKG_VERSION:=3.9.1-beta PKG_VERSION:=3.9.4-beta
PKG_RELEASE:=9 PKG_RELEASE:=9
include $(INCLUDE_DIR)/package.mk include $(INCLUDE_DIR)/package.mk
@ -40,6 +40,8 @@ define Package/luci-theme-$(THEME_NAME)/install
$(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true $(CP) -a ./template/* $(1)/usr/lib/lua/luci/view/themes/$(THEME_NAME)/ 2>/dev/null || true
$(INSTALL_DIR) $(1)/www/luci-static/resources $(INSTALL_DIR) $(1)/www/luci-static/resources
$(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true $(CP) -a ./js/* $(1)/www/luci-static/resources/ 2>/dev/null || true
$(INSTALL_DIR) $(1)/etc/config
$(CP) -a ./root/etc/config/* $(1)/etc/config/ 2>/dev/null || true
endef endef
define Package/luci-theme-$(THEME_NAME)/postinst define Package/luci-theme-$(THEME_NAME)/postinst

View File

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 666 KiB

View File

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 666 KiB

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -0,0 +1,12 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#fff" width="800px" height="800px" viewBox="0 0 1024 1024" t="1569683928793" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15091" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(-1, 0, 0, 1, 0, 0)" stroke="#fff">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<defs>
<style type="text/css"/>
</defs>
<path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16z m-52 268H212V212h200v200zM864 144H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16z m-52 268H612V212h200v200zM864 544H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16z m-52 268H612V612h200v200zM424 712H296V584c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v128H104c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h128v128c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V776h128c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="15092"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,28 +1,26 @@
/*-------------------- /*--------------------
catatan usahakan untuk mengganti bg pakai format png, kalo jpg ganti aja di bagian body, sesuaikan aja nama formatnya catatan usahakan untuk mengganti bg pakai format png, kalo jpg ganti aja di bagian body, sesuaikan aja nama formatnya
---------------------*/ ---------------------*/
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
body, body,
html { html {
height: 100%; height: 100%;
font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body { body {
background: url('backgroundfanspage.png'); height: 100%;
height: 100%; background-position: center;
background-position: center; background-repeat: no-repeat;
background-repeat: no-repeat; background-size: cover;
background-size: cover; background-attachment: fixed;
background-attachment: fixed;
} }
@ -30,10 +28,11 @@ background-attachment: fixed;
Text Text
---------------------*/ ---------------------*/
h2, h3 { h2,
font-size: 16px; h3 {
font-size: 16px;
letter-spacing: -1px; letter-spacing: -1px;
line-height: 20px; line-height: 20px;
} }
h2 { h2 {
@ -50,53 +49,53 @@ h3 {
Icons Icons
---------------------*/ ---------------------*/
.i { .i {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.i-login { .i-login {
margin: 13px 0px 0px 15px; margin: 13px 0px 0px 15px;
position: relative; position: relative;
float: left; float: left;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.i-more { .i-more {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibW9yZSI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik03Ni41LDIyOS41QzM0LjMsMjI5LjUsMCwyNjMuOCwwLDMwNnMzNC4zLDc2LjUsNzYuNSw3Ni41UzE1MywzNDguMiwxNTMsMzA2UzExOC43LDIyOS41LDc2LjUsMjI5LjV6IE03Ni41LDM0NC4yICAgICBjLTIxLjEsMC0zOC4yLTE3LjEwMS0zOC4yLTM4LjJjMC0yMS4xLDE3LjEtMzguMiwzOC4yLTM4LjJzMzguMiwxNy4xLDM4LjIsMzguMkMxMTQuNywzMjcuMSw5Ny42LDM0NC4yLDc2LjUsMzQ0LjJ6ICAgICAgTTUzNS41LDIyOS41Yy00Mi4yLDAtNzYuNSwzNC4zLTc2LjUsNzYuNXMzNC4zLDc2LjUsNzYuNSw3Ni41UzYxMiwzNDguMiw2MTIsMzA2UzU3Ny43LDIyOS41LDUzNS41LDIyOS41eiBNNTM1LjUsMzQ0LjIgICAgIGMtMjEuMSwwLTM4LjItMTcuMTAxLTM4LjItMzguMmMwLTIxLjEsMTcuMTAxLTM4LjIsMzguMi0zOC4yczM4LjIsMTcuMSwzOC4yLDM4LjJDNTczLjcsMzI3LjEsNTU2LjYsMzQ0LjIsNTM1LjUsMzQ0LjJ6ICAgICAgTTMwNiwyMjkuNWMtNDIuMiwwLTc2LjUsMzQuMy03Ni41LDc2LjVzMzQuMyw3Ni41LDc2LjUsNzYuNXM3Ni41LTM0LjMsNzYuNS03Ni41UzM0OC4yLDIyOS41LDMwNiwyMjkuNXogTTMwNiwzNDQuMiAgICAgYy0yMS4xLDAtMzguMi0xNy4xMDEtMzguMi0zOC4yYzAtMjEuMSwxNy4xLTM4LjIsMzguMi0zOC4yYzIxLjEsMCwzOC4yLDE3LjEsMzguMiwzOC4yQzM0NC4yLDMyNy4xLDMyNy4xLDM0NC4yLDMwNiwzNDQuMnoiIGZpbGw9IiNkZjQwNWEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibW9yZSI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik03Ni41LDIyOS41QzM0LjMsMjI5LjUsMCwyNjMuOCwwLDMwNnMzNC4zLDc2LjUsNzYuNSw3Ni41UzE1MywzNDguMiwxNTMsMzA2UzExOC43LDIyOS41LDc2LjUsMjI5LjV6IE03Ni41LDM0NC4yICAgICBjLTIxLjEsMC0zOC4yLTE3LjEwMS0zOC4yLTM4LjJjMC0yMS4xLDE3LjEtMzguMiwzOC4yLTM4LjJzMzguMiwxNy4xLDM4LjIsMzguMkMxMTQuNywzMjcuMSw5Ny42LDM0NC4yLDc2LjUsMzQ0LjJ6ICAgICAgTTUzNS41LDIyOS41Yy00Mi4yLDAtNzYuNSwzNC4zLTc2LjUsNzYuNXMzNC4zLDc2LjUsNzYuNSw3Ni41UzYxMiwzNDguMiw2MTIsMzA2UzU3Ny43LDIyOS41LDUzNS41LDIyOS41eiBNNTM1LjUsMzQ0LjIgICAgIGMtMjEuMSwwLTM4LjItMTcuMTAxLTM4LjItMzguMmMwLTIxLjEsMTcuMTAxLTM4LjIsMzguMi0zOC4yczM4LjIsMTcuMSwzOC4yLDM4LjJDNTczLjcsMzI3LjEsNTU2LjYsMzQ0LjIsNTM1LjUsMzQ0LjJ6ICAgICAgTTMwNiwyMjkuNWMtNDIuMiwwLTc2LjUsMzQuMy03Ni41LDc2LjVzMzQuMyw3Ni41LDc2LjUsNzYuNXM3Ni41LTM0LjMsNzYuNS03Ni41UzM0OC4yLDIyOS41LDMwNiwyMjkuNXogTTMwNiwzNDQuMiAgICAgYy0yMS4xLDAtMzguMi0xNy4xMDEtMzguMi0zOC4yYzAtMjEuMSwxNy4xLTM4LjIsMzguMi0zOC4yYzIxLjEsMCwzOC4yLDE3LjEsMzguMiwzOC4yQzM0NC4yLDMyNy4xLDMyNy4xLDM0NC4yLDMwNiwzNDQuMnoiIGZpbGw9IiNkZjQwNWEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
background-size: 20px 20px; background-size: 20px 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.i-save { .i-save {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idGljayI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MzYuNywxOTYuNzAxTDI1OC4xODgsMzc1LjIxM2wtODIuODY5LTgyLjg4N2MtNy4yODctNy4yODctMTkuMTI1LTcuMjg3LTI2LjQxMiwwcy03LjI4NywxOS4xMjUsMCwyNi40MTIgICAgIGw5My44MDgsOTMuODA4YzAuNjMxLDAuODk5LDEuMDE0LDEuOTMyLDEuODE3LDIuNzM1YzMuNzY4LDMuNzY4LDguNzIxLDUuNTA4LDEzLjY1NSw1LjM3NGM0LjkzNCwwLjExNSw5LjkwNy0xLjYwNiwxMy42NzQtNS4zNzQgICAgIGMwLjgwMy0wLjgwNCwxLjE4Ni0xLjgzNiwxLjgxNy0yLjczNWwxODkuNDM0LTE4OS40MzNjNy4yODYtNy4yODcsNy4yODYtMTkuMTI1LDAtMjYuNDEyICAgICBDNDU1LjgwNiwxODkuNDE0LDQ0My45ODcsMTg5LjQxNCw0MzYuNywxOTYuNzAxeiBNMzA2LDBDMTM2Ljk5MiwwLDAsMTM2Ljk5MiwwLDMwNnMxMzYuOTkyLDMwNiwzMDYsMzA2ICAgICBjMTY4Ljk4OCwwLDMwNi0xMzYuOTkyLDMwNi0zMDZTNDc1LjAwOCwwLDMwNiwweiBNMzA2LDU3My43NUMxNTguMTI1LDU3My43NSwzOC4yNSw0NTMuODc1LDM4LjI1LDMwNiAgICAgQzM4LjI1LDE1OC4xMjUsMTU4LjEyNSwzOC4yNSwzMDYsMzguMjVjMTQ3Ljg3NSwwLDI2Ny43NSwxMTkuODc1LDI2Ny43NSwyNjcuNzVDNTczLjc1LDQ1My44NzUsNDUzLjg3NSw1NzMuNzUsMzA2LDU3My43NXoiIGZpbGw9IiMyMGMxOTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idGljayI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MzYuNywxOTYuNzAxTDI1OC4xODgsMzc1LjIxM2wtODIuODY5LTgyLjg4N2MtNy4yODctNy4yODctMTkuMTI1LTcuMjg3LTI2LjQxMiwwcy03LjI4NywxOS4xMjUsMCwyNi40MTIgICAgIGw5My44MDgsOTMuODA4YzAuNjMxLDAuODk5LDEuMDE0LDEuOTMyLDEuODE3LDIuNzM1YzMuNzY4LDMuNzY4LDguNzIxLDUuNTA4LDEzLjY1NSw1LjM3NGM0LjkzNCwwLjExNSw5LjkwNy0xLjYwNiwxMy42NzQtNS4zNzQgICAgIGMwLjgwMy0wLjgwNCwxLjE4Ni0xLjgzNiwxLjgxNy0yLjczNWwxODkuNDM0LTE4OS40MzNjNy4yODYtNy4yODcsNy4yODYtMTkuMTI1LDAtMjYuNDEyICAgICBDNDU1LjgwNiwxODkuNDE0LDQ0My45ODcsMTg5LjQxNCw0MzYuNywxOTYuNzAxeiBNMzA2LDBDMTM2Ljk5MiwwLDAsMTM2Ljk5MiwwLDMwNnMxMzYuOTkyLDMwNiwzMDYsMzA2ICAgICBjMTY4Ljk4OCwwLDMwNi0xMzYuOTkyLDMwNi0zMDZTNDc1LjAwOCwwLDMwNiwweiBNMzA2LDU3My43NUMxNTguMTI1LDU3My43NSwzOC4yNSw0NTMuODc1LDM4LjI1LDMwNiAgICAgQzM4LjI1LDE1OC4xMjUsMTU4LjEyNSwzOC4yNSwzMDYsMzguMjVjMTQ3Ljg3NSwwLDI2Ny43NSwxMTkuODc1LDI2Ny43NSwyNjcuNzVDNTczLjc1LDQ1My44NzUsNDUzLjg3NSw1NzMuNzUsMzA2LDU3My43NXoiIGZpbGw9IiMyMGMxOTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
background-size: 20px 20px; background-size: 20px 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.i-warning { .i-warning {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi44MTYgNjEyLjgxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjgxNiA2MTIuODE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTMwNi40MDgsMEMxMzcuMzY4LDAsMC4zNzEsMTM2Ljk5NywwLjM3MSwzMDYuMDM3czEzNi45OTcsMzA2Ljc3OSwzMDYuMDM3LDMwNi43NzlzMzA2LjAzNy0xMzcuODEzLDMwNi4wMzctMzA2LjAzNyAgIEM2MTIuNDQ1LDEzNy43MzksNDc1LjQ0OCwwLDMwNi40MDgsMHogTTMwNi40MDgsNTgzLjE0N2MtMTUyLjIwMywwLTI3Ni4zNjgtMTI0LjE2NS0yNzYuMzY4LTI3Ni4zNjggICBTMTU0LjIwNSwyOS41OTUsMzA2LjQwOCwyOS41OTVTNTgyLjc3NiwxNTMuNzYsNTgyLjc3NiwzMDYuNzc5UzQ1OC42MTEsNTgzLjE0NywzMDYuNDA4LDU4My4xNDd6IE0zMjEuNjEzLDQzMS43NiAgIGMwLDguODI3LTcuMTk1LDE2LjAyMS0xNi4wMjEsMTYuMDIxYy04LjgyNywwLTE2LjAyMS03LjE5NS0xNi4wMjEtMTYuMDIxYzAtOC44MjcsNy4xOTUtMTYuMDIxLDE2LjAyMS0xNi4wMjEgICBTMzIxLjYxMyw0MjIuOTM0LDMyMS42MTMsNDMxLjc2eiBNMjkwLjM4NywzNTMuMjExdi0xODAuMjRjMC04LjAxMSw2LjM3OS0xNC4zOSwxNC4zOS0xNC4zOWM4LjAxMSwwLDE0LjM5LDYuMzc5LDE0LjM5LDE0LjM5ICAgdjE4MC4yNGMwLDguMDExLTYuMzc5LDE0LjM5LTE0LjM5LDE0LjM5QzI5Ni43NjYsMzY4LjQ5MSwyOTAuMzg3LDM2MS4yMjIsMjkwLjM4NywzNTMuMjExeiIgZmlsbD0iI2Y1ZDg3OCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi44MTYgNjEyLjgxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjgxNiA2MTIuODE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTMwNi40MDgsMEMxMzcuMzY4LDAsMC4zNzEsMTM2Ljk5NywwLjM3MSwzMDYuMDM3czEzNi45OTcsMzA2Ljc3OSwzMDYuMDM3LDMwNi43NzlzMzA2LjAzNy0xMzcuODEzLDMwNi4wMzctMzA2LjAzNyAgIEM2MTIuNDQ1LDEzNy43MzksNDc1LjQ0OCwwLDMwNi40MDgsMHogTTMwNi40MDgsNTgzLjE0N2MtMTUyLjIwMywwLTI3Ni4zNjgtMTI0LjE2NS0yNzYuMzY4LTI3Ni4zNjggICBTMTU0LjIwNSwyOS41OTUsMzA2LjQwOCwyOS41OTVTNTgyLjc3NiwxNTMuNzYsNTgyLjc3NiwzMDYuNzc5UzQ1OC42MTEsNTgzLjE0NywzMDYuNDA4LDU4My4xNDd6IE0zMjEuNjEzLDQzMS43NiAgIGMwLDguODI3LTcuMTk1LDE2LjAyMS0xNi4wMjEsMTYuMDIxYy04LjgyNywwLTE2LjAyMS03LjE5NS0xNi4wMjEtMTYuMDIxYzAtOC44MjcsNy4xOTUtMTYuMDIxLDE2LjAyMS0xNi4wMjEgICBTMzIxLjYxMyw0MjIuOTM0LDMyMS42MTMsNDMxLjc2eiBNMjkwLjM4NywzNTMuMjExdi0xODAuMjRjMC04LjAxMSw2LjM3OS0xNC4zOSwxNC4zOS0xNC4zOWM4LjAxMSwwLDE0LjM5LDYuMzc5LDE0LjM5LDE0LjM5ICAgdjE4MC4yNGMwLDguMDExLTYuMzc5LDE0LjM5LTE0LjM5LDE0LjM5QzI5Ni43NjYsMzY4LjQ5MSwyOTAuMzg3LDM2MS4yMjIsMjkwLjM4NywzNTMuMjExeiIgZmlsbD0iI2Y1ZDg3OCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-size: 20px 20px; background-size: 20px 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.i-close { .i-close {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-size: 20px 20px; background-size: 20px 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.i-left { .i-left {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-size: 16px 16px; background-size: 16px 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
/*-------------------- /*--------------------
@ -104,19 +103,19 @@ Login Box
---------------------*/ ---------------------*/
.box { .box {
width: 330px; width: 330px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.box-form { .box-form {
width: 320px; width: 320px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.box-login-tab { .box-login-tab {
@ -126,22 +125,22 @@ Login Box
position: relative; position: relative;
float: left; float: left;
z-index: 1; z-index: 1;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-box-shadow: 15px -15px 30px rgba(0,0,0,0.32); -webkit-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 15px -15px 30px rgba(0,0,0,0.32); -moz-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
box-shadow: 15px -15px 30px rgba(0,0,0,0.32); box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
} }
.box-login-title { .box-login-title {
@ -153,129 +152,135 @@ Login Box
} }
.box-login { .box-login {
position: relative; position: relative;
top: -4px; top: -4px;
width: 320px; width: 320px;
background: #00000044; background: #00000044;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-border-radius: 20px: -webkit-border-radius: 20px: -moz-border-radius=20px;
-moz-border-radius= 20px; border-radius: 20px;
border-radius: 20px; -moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 15px 30px 30px rgba(0,0,0,0.32); box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
} }
.box-info { .box-info {
width: 260px; width: 260px;
top: 60px; top: 60px;
position: absolute; position: absolute;
right: -5px; right: -5px;
padding: 15px 15px 15px 30px; padding: 15px 15px 15px 30px;
background-color: rgba(255,255,255,0.6); background-color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 0; z-index: 0;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 15px 30px 30px rgba(0,0,0,0.32); -webkit-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 15px 30px 30px rgba(0,0,0,0.32); -moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
box-shadow: 15px 30px 30px rgba(0,0,0,0.32); box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
} }
.line-wh { .line-wh {
width: 100%; width: 100%;
height: 1px; height: 1px;
top: 0px; top: 0px;
margin: 12px auto; margin: 12px auto;
position: relative; position: relative;
border-top: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255, 255, 255, 0.3);
} }
/*-------------------- /*--------------------
Form Form
---------------------*/ ---------------------*/
a { text-decoration: none; } a {
text-decoration: none;
}
button:focus { outline:0; } button:focus {
outline: 0;
}
.b { .b {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.b-form { .b-form {
opacity: 0.5; opacity: 0.5;
margin: 10px 20px; margin: 10px 20px;
float: right; float: right;
} }
.b-info { .b-info {
opacity: 0.5; opacity: 0.5;
float: left; float: left;
} }
.b-form:hover, .b-form:hover,
.b-info:hover { .b-info:hover {
opacity: 1; opacity: 1;
} }
.b-support, .b-cta { .b-support,
.b-cta {
width: 100%; width: 100%;
padding: 0px 15px; padding: 0px 15px;
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
font-weight: 700; font-weight: 700;
letter-spacing: -1px; letter-spacing: -1px;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
-webkit-border-radius: 16px; -webkit-border-radius: 16px;
-moz-border-radius: 16px; -moz-border-radius: 16px;
border-radius: 16px; border-radius: 16px;
} }
.b-support { .b-support {
border: #87314e 1px solid; border: #87314e 1px solid;
background-color: transparent; background-color: transparent;
color: #87314e; color: #87314e;
margin: 6px 0; margin: 6px 0;
} }
.b-cta { .b-cta {
border: #df405a 1px solid; border: #df405a 1px solid;
background-color: #df405a; background-color: #df405a;
color: #fff; color: #fff;
} }
.b-support:hover, .b-cta:hover { .b-support:hover,
color: #fff; .b-cta:hover {
color: #fff;
background-color: #87314e; background-color: #87314e;
border: #87314e 1px solid; border: #87314e 1px solid;
} }
.fieldset-body { .fieldset-body {
display: table; display: table;
} }
.fieldset-body p { .fieldset-body p {
width: 100%; width: 100%;
display: inline-table; display: inline-table;
padding: 5px 20px; padding: 5px 20px;
margin-bottom:2px; margin-bottom: 2px;
} }
label { label {
float: left; float: left;
width: 100%; width: 100%;
top: 0px; top: 0px;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
@ -286,43 +291,43 @@ label {
label.checkbox { label.checkbox {
float: left; float: left;
padding: 5px 20px; padding: 5px 20px;
line-height: 1.7; line-height: 1.7;
} }
input[type=text], input[type=text],
input[type=password] { input[type=password] {
width: auto; width: auto;
height: 32px; height: 32px;
padding: 0px 10px; padding: 0px 10px;
background-color:rgb(0 0 0 / 28%); background-color: rgb(0 0 0 / 28%);
border: none; border: none;
display: inline; display: inline;
color: #bdbdbd; color: #bdbdbd;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
float: none; float: none;
border-radius: 10px; border-radius: 10px;
} }
input[type=text]:focus, input[type=text]:focus,
input[type=password]:focus { input[type=password]:focus {
background-color: #f8f8c6; background-color: #f8f8c6;
outline: none; outline: none;
} }
input[type=submit] { input[type=submit] {
width: 100%; width: 100%;
height: 48px; height: 48px;
margin-top: 24px; margin-top: 24px;
padding: 0px 20px; padding: 0px 20px;
font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
background-color: #0c5091; background-color: #0c5091;
border: 1px #075fa7 solid; border: 1px #075fa7 solid;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
@ -330,7 +335,7 @@ input[type=submit] {
input[type=submit]:hover { input[type=submit]:hover {
background-color: #df405a; background-color: #df405a;
border: 1px #df405a solid; border: 1px #df405a solid;
} }
input[type=submit]:focus { input[type=submit]:focus {
@ -339,32 +344,37 @@ input[type=submit]:focus {
p.field span.i { p.field span.i {
width: 24px; width: 24px;
height: 24px; height: 24px;
float: right; float: right;
position: relative; position: relative;
margin-top: -26px; margin-top: -26px;
right: 2px; right: 2px;
z-index: 2; z-index: 2;
display: none; display: none;
-webkit-animation: bounceIn 0.6s linear; -webkit-animation: bounceIn 0.6s linear;
-moz-animation: bounceIn 0.6s linear; -moz-animation: bounceIn 0.6s linear;
-o-animation: bounceIn 0.6s linear; -o-animation: bounceIn 0.6s linear;
animation: bounceIn 0.6s linear; animation: bounceIn 0.6s linear;
} }
/*-------------------- /*--------------------
Transitions Transitions
---------------------*/ ---------------------*/
.box-form, .box-info, .b, .b-support, .b-cta, .box-form,
input[type=submit], p.field span.i { .box-info,
.b,
.b-support,
.b-cta,
input[type=submit],
p.field span.i {
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
-ms-transition: all 0.3s; -ms-transition: all 0.3s;
-o-transition: all 0.3s; -o-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
} }
/*-------------------- /*--------------------
@ -372,35 +382,35 @@ Credits
---------------------*/ ---------------------*/
.icon-credits { .icon-credits {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,0.1); color: rgba(255, 255, 255, 0.1);
text-align: center; text-align: center;
z-index: -1; z-index: -1;
} }
img.tengah { img.tengah {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
text-decoration: none; text-decoration: none;
width: 200px; width: 200px;
} }
img.bawah { img.bawah {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 2rem; padding: 2rem;
} }
.icon-credits a { .icon-credits a {
text-decoration: none; text-decoration: none;
color: rgba(255,255,255,0.2); color: rgba(255, 255, 255, 0.2);
} }

10
root/etc/config/alpha Normal file
View File

@ -0,0 +1,10 @@
config alpha 'config'
option nav_01 '/cgi-bin/luci/admin/status/overview'
option nav_02 '/cgi-bin/luci/admin/services/ttyd'
option nav_03 '/cgi-bin/luci/admin/services/openclash'
option nav_04 '/cgi-bin/luci/admin/nas/tinyfm'
option nav_05 '/cgi-bin/luci/admin/modem/main'
option nav_06 '/cgi-bin/luci/admin/network/network'
option blur '20'
option color '#2222359a'

View File

@ -17,49 +17,92 @@
Licensed to the public under the Apache License 2.0 Licensed to the public under the Apache License 2.0
-%> -%>
<%
local ver = require "luci.version"
local uci = require "luci.model.uci".cursor()
local config = uci:get_all("alpha", "config")
local icon = {
['/cgi-bin/luci/admin/status/overview'] = '/gaya/icon/navbar/status.png',
['/cgi-bin/luci/admin/services/ttyd'] = '/gaya/icon/navbar/terminal.png',
['/cgi-bin/luci/admin/services/openclash'] = '/gaya/icon/navbar/oc.png',
['/cgi-bin/luci/admin/nas/tinyfm'] = '/gaya/icon/navbar/nas.png',
['/cgi-bin/luci/admin/modem/main'] = '/gaya/icon/navbar/modem.png',
['/cgi-bin/luci/admin/network/network'] = '/gaya/icon/navbar/interface.png',
['/cgi-bin/luci/admin/services/neko'] = '/gaya/icon/navbar/neko.png'
}
<% local ver = require "luci.version" %> local function getLink(nav)
local link = config[nav]
return (link and link ~= "none") and link or nil
end
local num_links = 0
for i = 1, 6 do
local nav_key = 'nav_0' .. i
local link = getLink(nav_key)
if link then
num_links = num_links + 1
end
end
local link_width = string.format("calc(100%% / %d)", num_links)
local blur_value = tonumber(config.blur)
local link_blur = string.format("blur(%dpx)", blur_value)
local background_color = config.color
%>
<style>
.main>.main-left, .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, .tabs, .cbi-tabmenu, .cbi-tooltip {
background-color: <%=background_color%>;
backdrop-filter: <%=link_blur%>;
-webkit-backdrop-filter: <%=link_blur%>;
}
@media screen and (max-width: 720px) {
.navbar a {
width: <%=link_width%>;
}
}
</style>
</div>
<footer class="mobile">
<a href="https://github.com/derisamedia/luci-theme-alpha"><%=ver.luciname%> | <%=ver.luciversion%> | Alpha OS Theme v3.9</a>
</footer>
</div>
<div class="navbar active">
<div class="dropdown">
<% for i = 1, 6 do
local nav_key = 'nav_0' .. i
local link = getLink(nav_key)
if link then %>
<a href="<%=link%>">
<img src="<%=media%><%=icon[link]%>" />
</a>
<% end
end %>
</div> </div>
<label class="toggler">
<footer class="mobile"> <img src="<%=media%>/gaya/icon/arrow.svg">
<a href="https://github.com/derisamedia/luci-theme-alpha"><%= ver.luciname %> | <%= ver.luciversion %> | Alpha OS Theme v3.9</a> </label>
</footer>
</div>
<div class="navbar active">
<div class="dropdown">
<a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/gaya/icon/navbar/status.png" /></a>
<a href="/cgi-bin/luci/admin/services/ttyd"><img src="<%=media%>/gaya/icon/navbar/terminal.png" /></a>
<a href="/cgi-bin/luci/admin/services/openclash"><img src="<%=media%>/gaya/icon/navbar/oc.png" /></a>
<a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/gaya/icon/navbar/nas.png" /></a>
<a href="/cgi-bin/luci/admin/modem/main"><img src="<%=media%>/gaya/icon/navbar/modem.png" /></a>
<a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/gaya/icon/navbar/interface.png" /></a>
</div>
<label class="toggler">
<img src="<%=media%>/gaya/icon/arrow.svg" alt="">
</label>
</div> </div>
<script> <script>
{ {
const nav = document.querySelector(".navbar"); const nav = document.querySelector(".navbar");
let lastScrollY = window.scrollY; let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
window.addEventListener("scroll", () => { if (lastScrollY < window.scrollY) {
if (lastScrollY < window.scrollY) { nav.classList.add("navbar--hidden");
nav.classList.add("navbar--hidden"); }
} else { else {
nav.classList.remove("navbar--hidden"); nav.classList.remove("navbar--hidden");
} }
lastScrollY = window.scrollY;
lastScrollY = window.scrollY; });
});
} }
</script> </script>
</div> </div>
<script type="text/javascript">L.require('menu-alpha')</script> <script type="text/javascript">L.require('menu-alpha')</script>
<script src="<%=media%>/app.js"></script> <script src="<%=media%>/app.js"></script>
</body> </body>
</html> </html>

View File

@ -57,12 +57,10 @@
</style> </style>
<% end -%> <% end -%>
</head> </head>
<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>"> <body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>" style="background-image:url('/luci-static/alpha/background/dashboard.png')">
<header> <header>
<div class="fill"> <div class="fill">
<div class="container"> <div class="container">
<a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"> <a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>">
<img src="<%=media%>/brand.png" alt="OpenWrt"> <img src="<%=media%>/brand.png" alt="OpenWrt">
</a> </a>
@ -95,5 +93,4 @@
<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
</div> </div>
</noscript> </noscript>
<div id="tabmenu" style="display:none"></div> <div id="tabmenu" style="display:none"></div>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- saved from url=(0014)about:internet --> <!-- saved from url=(0014)about:internet -->
<html lang="en"> <html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
@ -20,67 +20,65 @@
<title>Alpha - Login Dulu</title> <title>Alpha - Login Dulu</title>
</head> </head>
<body class="lang_en node-main-login" data-page=""> <body class="lang_en node-main-login" data-page="" style="background-image:url('/luci-static/alpha/background/dashboard.png')">
<header> <header>
<div class="fill">
<div class="container">
<span class="showSide"></span>
<img class="tengah" src="/luci-static/alpha/style/brand.png" />
<img class="bawah" src="/luci-static/alpha/style/indo-wrt.png" />
<span class="status" id="indicators"></span>
</div>
</div>
</header>
<script type="text/javascript" src="/luci-static/resources/promis.min.js?v=git-22.361.69894-438c598"></script>
<div class="fill"> <script type="text/javascript" src="/luci-static/resources/luci.js?v=git-22.361.69894-438c598"></script>
<div class="container"> <script type="text/javascript">
<span class="showSide"></span> L = new LuCI({"apply_rollback":90,"resource":"\/luci-static\/resources","media":"\/luci-static\/material","documentroot":"\/www","pollinterval":5,"apply_display":1.5,"requestpath":[],"ubuspath":"\/ubus\/","scriptname":"\/cgi-bin\/luci","dispatchpath":[],"apply_timeout":5,"apply_holdoff":4,"nodespec":{"satisfied":true,"action":{"type":"template","path":"admin_status\/index"},"order":1,"depends":{"acl":["luci-mod-status-index"]},"title":"Overview"}});
<img class="tengah" src="/luci-static/alpha/style/brand.png" /> </script>
<img class="bawah" src="/luci-static/alpha/style/indo-wrt.png" />
<span class="status" id="indicators"></span>
</div>
</div>
</header>
<script type="text/javascript" src="/luci-static/resources/promis.min.js?v=git-22.361.69894-438c598"></script>
<script type="text/javascript" src="/luci-static/resources/luci.js?v=git-22.361.69894-438c598"></script>
<script type="text/javascript">
L = new LuCI({"apply_rollback":90,"resource":"\/luci-static\/resources","media":"\/luci-static\/material","documentroot":"\/www","pollinterval":5,"apply_display":1.5,"requestpath":[],"ubuspath":"\/ubus\/","scriptname":"\/cgi-bin\/luci","dispatchpath":[],"apply_timeout":5,"apply_holdoff":4,"nodespec":{"satisfied":true,"action":{"type":"template","path":"admin_status\/index"},"order":1,"depends":{"acl":["luci-mod-status-index"]},"title":"Overview"}});
</script>
<form method="post" action="/cgi-bin/luci"><div class="cbi-map"></div> <form method="post" action="/cgi-bin/luci"><div class="cbi-map"></div>
<div class='box'> <div class='box'>
<div class='box-form'> <div class='box-form'>
<!-- <div class='box-login-tab'></div> <!-- <div class='box-login-tab'></div>
<div class='box-login-title'> <div class='box-login-title'>
<div class='i i-login'></div><h2><div class="cbi-map-descr"></div>LOGIN</h2> <div class='i i-login'></div><h2><div class="cbi-map-descr"></div>LOGIN</h2>
</div> --> </div> -->
<div class='box-login'> <div class='box-login'>
<label class='checkbox'> <label class='checkbox'>
<form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>"> <form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>">
<%- if fuser then %> <%- if fuser then %>
<div class="alert-message warning"> <div class="alert-message warning">
<p><%:Sandi gagal,silahkan ulangi.%></p> <p><%:Sandi gagal,silahkan ulangi.%></p>
</div> </div>
<% end -%> <% end -%>
</label> </label>
<div class='fieldset-body' id='login_form'> <div class='fieldset-body' id='login_form'>
<p class='field'> <p class='field'>
<label for='user'> <label for='user'>
<label class="cbi-value-title" for="luci_username">Username</label> <label class="cbi-value-title" for="luci_username">Username</label>
<input type="text" name="luci_username" id="luci_username" autocomplete="username" value="root" /> <input type="text" name="luci_username" id="luci_username" autocomplete="username" value="root" />
</div></label> </div></label>
<span id='valida' class='i i-warning'></span> <span id='valida' class='i i-warning'></span>
</p> </p>
<p class='field'> <p class='field'>
<label for='pass'> <label for='pass'>
<label class="cbi-value-title" for="luci_password">Password</label> <label class="cbi-value-title" for="luci_password">Password</label>
<div class="cbi-value-field"> <div class="cbi-value-field">
<input type="password" name="luci_password" id="luci_password" autocomplete="current-password"/> <input type="password" name="luci_password" id="luci_password" autocomplete="current-password"/>
</div></label> </div></label>
<span id='valida' class='i i-close'></span> <span id='valida' class='i i-close'></span>
</p> </p>
<label class='checkbox'> <label class='checkbox'>
Please Enter Username & Password. Please Enter Username & Password.
</label> </label>
<input type='submit' id='do_login' value='LOGIN' title='Login' /> <input type='submit' id='do_login' value='LOGIN' title='Login' />
</div> </div>
</div> </div>
</div> </div>