Compare commits

..

No commits in common. "master" and "alpha-3.9-beta-8" have entirely different histories.

19 changed files with 3615 additions and 4339 deletions

View File

@ -1,124 +0,0 @@
name: "Build Theme Alpha | OpenWrt SDK"
on:
repository_dispatch:
workflow_dispatch:
inputs:
ssh:
description: 'SSH connection to Actions'
required: false
default: 'false'
push:
branches:
- 'master'
paths:
- 'luci-theme-alpha/Makefile'
env:
TZ: Asia/Jakarta
jobs:
job_check:
if: github.repository == ${{ github.repository }}
name: Check Version
runs-on: ubuntu-latest
outputs:
alpha_version: ${{ steps.check_version.outputs.latest_version }}
has_update: ${{ steps.check_version.outputs.has_update }}
steps:
- name: Checkout
uses: actions/checkout@main
with:
fetch-depth: 0
ref: 'master'
- name: Check version
id: check_version
env:
url_release: https://api.github.com/repos/${{ github.repository }}/releases/latest
run: |
latest_version=$(grep -oP 'PKG_VERSION:=\K.*' Makefile | sed 's/^/v/')
latest_release=$(wget -qO- -t1 -T2 ${{env.url_release}} | awk -F '"' '/tag_name/{print $4}')
has_update=$([ "${latest_version}" != "${latest_release}" ] && echo true || echo false)
echo "latest_version=${latest_version}" >> $GITHUB_OUTPUT
echo "has_update=${has_update}" >> $GITHUB_OUTPUT
echo "latest_version: ${latest_version}"
echo "latest_release: ${latest_release}"
echo "has_update: ${has_update}"
- name: Generate new tag & release
if: steps.check_version.outputs.has_update == 'true'
uses: softprops/action-gh-release@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
name: Alpha Theme - OpenWrt
tag_name: ${{steps.check_version.outputs.latest_version}}
job_build_alpha:
name: Build Alpha Theme (master)
needs: job_check
if: needs.job_check.outputs.has_update == 'true'
runs-on: ubuntu-latest
steps:
- name: Install packages
run: |
echo "Install packages"
sudo -E apt-get -qq update
sudo -E apt-get -qq install build-essential clang flex bison g++ gawk gcc-multilib g++-multilib gettext git libncurses5-dev libssl-dev python3-distutils rsync unzip zlib1g-dev file wget
sudo -E apt-get -qq autoremove --purge
sudo -E apt-get -qq clean
- name: Cache openwrt SDK
id: cache-sdk
uses: actions/cache@v3
with:
path: sdk
key: openwrt-sdk-21.02-x86-64
- name: Initialization environment
if: steps.cache-sdk.outputs.cache-hit != 'true'
env:
url_sdk: https://archive.openwrt.org/releases/21.02.5/targets/x86/64/openwrt-sdk-21.02.5-x86-64_gcc-8.4.0_musl.Linux-x86_64.tar.xz
run: |
wget ${{ env.url_sdk }}
file_name=$(echo ${{env.url_sdk}} | awk -F/ '{print $NF}')
mkdir sdk && tar -xJf $file_name -C ./sdk --strip-components=1
cd sdk
echo "src-git base https://github.com/openwrt/openwrt.git;openwrt-21.02" > feeds.conf
echo "src-git-full packages https://github.com/openwrt/packages.git;openwrt-21.02" >> feeds.conf
echo "src-git-full luci https://git.openwrt.org/project/luci.git;openwrt-21.02" >> feeds.conf
echo "src-git-full routing https://git.openwrt.org/feed/routing.git;openwrt-21.02" >> feeds.conf
git clone -b master https://github.com/${{ github.repository }}.git package/downloads/luci-theme-alpha
./scripts/feeds update -a
echo "CONFIG_PACKAGE_luci-theme-alpha=m" > .config
./scripts/feeds install -d n luci-theme-alpha
make download -j8
- name: Configure Alpha Theme (master)
run: |
cd sdk
./scripts/feeds install luci-theme-alpha
echo "CONFIG_ALL_NONSHARED=n" > .config
echo "CONFIG_ALL_KMODS=n" >> .config
echo "CONFIG_ALL=n" >> .config
echo "CONFIG_AUTOREMOVE=n" >> .config
echo "CONFIG_LUCI_LANG_zh_Hans=n" >> .config
echo "CONFIG_PACKAGE_luci-theme-alpha=m" >> .config
make defconfig
- name: Compile Alpha Theme (master)
id: compile
run: |
cd sdk
echo "make package/luci-theme-alpha/{clean,compile} -j$(nproc)"
make package/luci-theme-alpha/{clean,compile} -j$(nproc)
mv bin/packages/x86_64/base/ ../
rm .config .config.old
cd ..
echo "status=success" >> $GITHUB_OUTPUT
echo "FIRMWARE=$PWD" >> $GITHUB_ENV
- name: Upload Alpha Theme (master) ipks to release
uses: softprops/action-gh-release@v1
if: steps.compile.outputs.status == 'success'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag_name: ${{needs.job_check.outputs.alpha_version}}
files: ${{ env.FIRMWARE }}/base/luci-theme*.ipk

View File

@ -10,8 +10,8 @@ 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.4-beta PKG_VERSION:=0.3.9-beta
PKG_RELEASE:=9 PKG_RELEASE:=8
include $(INCLUDE_DIR)/package.mk include $(INCLUDE_DIR)/package.mk
@ -40,8 +40,6 @@ 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

@ -1,12 +1,5 @@
[issues]: https://github.com/derisamedia/luci-theme-alpha/issues [issues]: https://github.com/jerrykuku/luci-app-argon-config/issues/new
[issues-badge]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat-square [issues-badge]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat-square
[release]: https://github.com/derisamedia/luci-theme-alpha/releases
[release-badge]: https://img.shields.io/badge/download-check_releases-blue
[group]: https://facebook.com/groups/indowrt
[group-badge]: https://img.shields.io/badge/visit_Facebook-Comunity-cyan
[discord]: https://discord.gg/gdZwmDQGUm
[discord-badge]: https://img.shields.io/badge/visit_Discord-Comunity-blue
@ -18,9 +11,7 @@
<img src="https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/luasrc/brand.png"> <img src="https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/luasrc/brand.png">
[![issues][issues-badge]][issues] [![issues][issues-badge]][issues]
[![release][release-badge]][release]
[![group][group-badge]][group]
[![discord][discord-badge]][discord]
Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and material luCi theme refferences, Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and material luCi theme refferences,
@ -31,22 +22,11 @@ Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and mater
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss2.png) ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss2.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss3.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview1.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview2.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview3.png)
</p> </p>
### FYI ### FYI
alpha os is my idea which wants to develop the OpenWrt community in Indonesia, even the world, thanks to friends who have supported this alpha-os theme, hopefully given health to all of us. alpha os is my idea which is to develop the Indonesian OpenWrt community so that it can grow even overseas (China already has looking), in the sense that we have to make an innovation that appears and is new, not the existing one, made our version, Mr. Sibondt once they said 'jalan ditempat komunitas indo', that's what moved my heart to make an innovation that I named alpha os (alpha = initial version, because it hasn't been perfect until now 😁)
(old text) Mr. Sibondt once they said 'jalan ditempat komunitas indo', that's what moved my heart to make an innovation that I named alpha os (alpha = initial version, because it hasn't been perfect until now 😁)
donate donate
buy me a padang rice or coffee buy me a padang rice or coffee

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.

Before

Width:  |  Height:  |  Size: 28 KiB

View File

@ -1,12 +0,0 @@
<!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>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 666 KiB

View File

@ -1,416 +1,406 @@
/*--------------------
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, *,
*::after { *::before,
box-sizing: border-box; *::after {
} box-sizing: border-box;
}
body,
html { body,
height: 100%; html {
font-family: 'Segoe UI', Arial, Helvetica, sans-serif; height: 100%;
-webkit-font-smoothing: antialiased; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
} -moz-osx-font-smoothing: grayscale;
}
body {
height: 100%; body {
background-position: center; background: url('backgroundfanspage.png');
background-repeat: no-repeat; height: 100%;
background-size: cover; background-position: center;
background-attachment: fixed; background-repeat: no-repeat;
} background-size: cover;
background-attachment: fixed;
}
/*--------------------
Text
---------------------*/ /*--------------------
Text
h2, ---------------------*/
h3 {
font-size: 16px; h2, h3 {
letter-spacing: -1px; font-size: 16px;
line-height: 20px; letter-spacing: -1px;
} line-height: 20px;
}
h2 {
color: #fff; h2 {
text-align: center; color: #fff;
} text-align: center;
}
h3 {
color: #032942; h3 {
text-align: right; color: #032942;
} text-align: right;
}
/*--------------------
Icons /*--------------------
---------------------*/ Icons
.i { ---------------------*/
width: 20px; .i {
height: 20px; width: 20px;
} height: 20px;
}
.i-login {
margin: 13px 0px 0px 15px; .i-login {
position: relative; margin: 13px 0px 0px 15px;
float: left; position: relative;
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==); float: left;
background-size: 18px 18px; 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-repeat: no-repeat; background-size: 18px 18px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
.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==); .i-more {
background-size: 20px 20px; 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-repeat: no-repeat; background-size: 20px 20px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
.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==); .i-save {
background-size: 20px 20px; 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-repeat: no-repeat; background-size: 20px 20px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
.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=); .i-warning {
background-size: 20px 20px; 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-repeat: no-repeat; background-size: 20px 20px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
.i-close {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); .i-close {
background-size: 20px 20px; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-repeat: no-repeat; background-size: 20px 20px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
.i-left {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); .i-left {
background-size: 16px 16px; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-repeat: no-repeat; background-size: 16px 16px;
background-position: center; background-repeat: no-repeat;
} background-position: center;
}
/*--------------------
Login Box /*--------------------
---------------------*/ Login Box
---------------------*/
.box {
width: 330px; .box {
position: absolute; width: 330px;
top: 50%; position: absolute;
left: 50%; top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
} transform: translate(-50%, -50%);
}
.box-form {
width: 320px; .box-form {
position: relative; width: 320px;
z-index: 1; position: relative;
} z-index: 1;
}
.box-login-tab {
width: 50%; .box-login-tab {
height: 40px; width: 50%;
background: #00000044; height: 40px;
position: relative; background: #00000044;
float: left; position: relative;
z-index: 1; float: left;
-webkit-backdrop-filter: blur(10px); z-index: 1;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-webkit-border-radius: 6px 6px 0 0; backdrop-filter: blur(10px);
-moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-webkit-transform-origin: 0 0; transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform-origin: 0 0; -webkit-transform-origin: 0 0;
-webkit-backface-visibility: hidden; transform-origin: 0 0;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32); -webkit-box-shadow: 15px -15px 30px rgba(0,0,0,0.32);
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-login-title {
width: 35%; .box-login-title {
height: 40px; width: 35%;
position: absolute; height: 40px;
float: left; position: absolute;
z-index: 2; float: left;
} z-index: 2;
}
.box-login {
position: relative; .box-login {
top: -4px; position: relative;
width: 320px; top: -4px;
background: #00000044; width: 320px;
text-align: center; background: #00000044;
overflow: hidden; text-align: center;
z-index: 2; overflow: hidden;
-webkit-backdrop-filter: blur(10px); z-index: 2;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-webkit-border-radius: 20px: -moz-border-radius=20px; backdrop-filter: blur(10px);
border-radius: 20px; -webkit-border-radius: 20px:
-moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); -moz-border-radius= 20px;
box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); border-radius: 20px;
} -moz-box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
.box-info { }
width: 260px; .box-info {
top: 60px; width: 260px;
position: absolute; top: 60px;
right: -5px; position: absolute;
padding: 15px 15px 15px 30px; right: -5px;
background-color: rgba(255, 255, 255, 0.6); padding: 15px 15px 15px 30px;
border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(255,255,255,0.6);
z-index: 0; border: 1px solid rgba(255,255,255,0.2);
z-index: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; -webkit-border-radius: 6px;
border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32); -webkit-box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
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);
}
.line-wh {
width: 100%; .line-wh {
height: 1px; width: 100%;
top: 0px; height: 1px;
margin: 12px auto; top: 0px;
position: relative; margin: 12px auto;
border-top: 1px solid rgba(255, 255, 255, 0.3); position: relative;
} 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 {
} height: 24px;
line-height: 24px;
.b { background-color: transparent;
height: 24px; border: none;
line-height: 24px; cursor: pointer;
background-color: transparent; }
border: none;
cursor: pointer; .b-form {
} opacity: 0.5;
margin: 10px 20px;
.b-form { float: right;
opacity: 0.5; }
margin: 10px 20px;
float: right; .b-info {
} opacity: 0.5;
float: left;
.b-info { }
opacity: 0.5;
float: left; .b-form:hover,
} .b-info:hover {
opacity: 1;
.b-form:hover, }
.b-info:hover {
opacity: 1; .b-support, .b-cta {
} width: 100%;
padding: 0px 15px;
.b-support, font-family: 'Quicksand', sans-serif;
.b-cta { font-weight: 700;
width: 100%; letter-spacing: -1px;
padding: 0px 15px; font-size: 16px;
font-family: 'Quicksand', sans-serif; line-height: 32px;
font-weight: 700; cursor: pointer;
letter-spacing: -1px;
font-size: 16px; -webkit-border-radius: 16px;
line-height: 32px; -moz-border-radius: 16px;
cursor: pointer; border-radius: 16px;
}
-webkit-border-radius: 16px;
-moz-border-radius: 16px; .b-support {
border-radius: 16px; border: #87314e 1px solid;
} background-color: transparent;
color: #87314e;
.b-support { margin: 6px 0;
border: #87314e 1px solid; }
background-color: transparent;
color: #87314e; .b-cta {
margin: 6px 0; border: #df405a 1px solid;
} background-color: #df405a;
color: #fff;
.b-cta { }
border: #df405a 1px solid;
background-color: #df405a; .b-support:hover, .b-cta:hover {
color: #fff; color: #fff;
} background-color: #87314e;
border: #87314e 1px solid;
.b-support:hover, }
.b-cta:hover {
color: #fff; .fieldset-body {
background-color: #87314e; display: table;
border: #87314e 1px solid; }
}
.fieldset-body p {
.fieldset-body { width: 100%;
display: table; display: inline-table;
} padding: 5px 20px;
margin-bottom:2px;
.fieldset-body p { }
width: 100%;
display: inline-table; label {
padding: 5px 20px; float: left;
margin-bottom: 2px; width: 100%;
} top: 0px;
color: #fff;
label { font-size: 13px;
float: left; font-weight: 700;
width: 100%; text-align: center;
top: 0px; line-height: 2.5;
color: #fff; }
font-size: 13px;
font-weight: 700; label.checkbox {
text-align: center; float: left;
line-height: 2.5; padding: 5px 20px;
} line-height: 1.7;
}
label.checkbox {
float: left; input[type=text],
padding: 5px 20px; input[type=password] {
line-height: 1.7; width: auto;
} height: 32px;
padding: 0px 10px;
input[type=text], background-color:rgb(0 0 0 / 28%);
input[type=password] { border: none;
width: auto; display: inline;
height: 32px; color: #bdbdbd;
padding: 0px 10px; font-size: 16px;
background-color: rgb(0 0 0 / 28%); font-weight: 400;
border: none; float: none;
display: inline; border-radius: 10px;
color: #bdbdbd; }
font-size: 16px;
font-weight: 400; input[type=text]:focus,
float: none; input[type=password]:focus {
border-radius: 10px; background-color: #f8f8c6;
} outline: none;
}
input[type=text]:focus,
input[type=password]:focus { input[type=submit] {
background-color: #f8f8c6; width: 100%;
outline: none; height: 48px;
} margin-top: 24px;
padding: 0px 20px;
input[type=submit] { font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
width: 100%; font-weight: 700;
height: 48px; font-size: 18px;
margin-top: 24px; color: #fff;
padding: 0px 20px; line-height: 40px;
font-family: 'Segoe UI', Arial, Helvetica, sans-serif; text-align: center;
font-weight: 700; background-color: #0c5091;
font-size: 18px; border: 1px #075fa7 solid;
color: #fff; opacity: 1;
line-height: 40px; cursor: pointer;
text-align: center; }
background-color: #0c5091;
border: 1px #075fa7 solid; input[type=submit]:hover {
opacity: 1; background-color: #df405a;
cursor: pointer; border: 1px #df405a solid;
} }
input[type=submit]:hover { input[type=submit]:focus {
background-color: #df405a; outline: none;
border: 1px #df405a solid; }
}
p.field span.i {
input[type=submit]:focus { width: 24px;
outline: none; height: 24px;
} float: right;
position: relative;
p.field span.i { margin-top: -26px;
width: 24px; right: 2px;
height: 24px; z-index: 2;
float: right; display: none;
position: relative;
margin-top: -26px; -webkit-animation: bounceIn 0.6s linear;
right: 2px; -moz-animation: bounceIn 0.6s linear;
z-index: 2; -o-animation: bounceIn 0.6s linear;
display: none; animation: bounceIn 0.6s linear;
}
-webkit-animation: bounceIn 0.6s linear;
-moz-animation: bounceIn 0.6s linear; /*--------------------
-o-animation: bounceIn 0.6s linear; Transitions
animation: bounceIn 0.6s linear; ---------------------*/
}
.box-form, .box-info, .b, .b-support, .b-cta,
/*-------------------- input[type=submit], p.field span.i {
Transitions
---------------------*/ -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
.box-form, -ms-transition: all 0.3s;
.box-info, -o-transition: all 0.3s;
.b, transition: all 0.3s;
.b-support, }
.b-cta,
input[type=submit], /*--------------------
p.field span.i { Credits
---------------------*/
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s; .icon-credits {
-ms-transition: all 0.3s; width: 100%;
-o-transition: all 0.3s; position: absolute;
transition: all 0.3s; bottom: 4px;
} font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
/*-------------------- color: rgba(255,255,255,0.1);
Credits text-align: center;
---------------------*/ z-index: -1;
}
.icon-credits {
width: 100%; img.tengah {
position: absolute; display: block;
bottom: 4px; margin-left: auto;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; margin-right: auto;
font-size: 12px; text-align: center;
color: rgba(255, 255, 255, 0.1); padding: 20px;
text-align: center; text-decoration: none;
z-index: -1; width: 200px;
} }
img.tengah { img.bawah {
display: block; position: absolute;
margin-left: auto; bottom: 0;
margin-right: auto; left: 50%;
text-align: center; transform: translateX(-50%);
padding: 20px; padding: 2rem;
text-decoration: none; }
width: 200px;
} .icon-credits a {
text-decoration: none;
img.bawah { color: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding: 2rem;
}
.icon-credits a {
text-decoration: none;
color: rgba(255, 255, 255, 0.2);
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 KiB

View File

@ -1,10 +0,0 @@
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'

BIN
ss1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 758 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
ss2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 549 KiB

After

Width:  |  Height:  |  Size: 612 KiB

BIN
ss3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 482 KiB

View File

@ -1,7 +1,7 @@
<%# <%#
Alpha os is made from me for all .. especially for indo wrt members and fan of OpenWrt or DBAI Community Alpha os is made from me for all .. especially for indo wrt members and fan of OpenWrt or DBAI Community
luci-theme-alpha luci-theme-alpha
Copyright 2024 derisamedia <facebook.com/derisamedia> Copyright 2022 derisamedia <facebook.com/derisamedia>
Have a bug? Please create an issue here on GitHub! Have a bug? Please create an issue here on GitHub!
luci-theme-material luci-theme-material
@ -17,92 +17,17 @@
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 function getLink(nav) <% local ver = require "luci.version" %>
local link = config[nav] </div>
return (link and link ~= "none") and link or nil <footer class="mobile">
end <a href="https://github.com/derisamedia/luci-theme-alpha"><%= ver.luciname %> | <%= ver.luciversion %> | Alpha OS Theme v3.8</a>
</footer>
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">
<img src="<%=media%>/gaya/icon/arrow.svg">
</label>
</div>
<script>
{
const nav = document.querySelector(".navbar");
let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
if (lastScrollY < window.scrollY) {
nav.classList.add("navbar--hidden");
}
else {
nav.classList.remove("navbar--hidden");
}
lastScrollY = window.scrollY;
});
}
</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,10 +57,42 @@
</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) %>" style="background-image:url('/luci-static/alpha/background/dashboard.png')"> <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) %>">
<header> <header>
<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>
<script>
{
const nav = document.querySelector(".navbar");
let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
if (lastScrollY < window.scrollY) {
nav.classList.add("navbar--hidden");
} else {
nav.classList.remove("navbar--hidden");
}
lastScrollY = window.scrollY;
});
}
</script>
<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>
@ -93,4 +125,5 @@
<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">
@ -19,68 +19,70 @@
<title>Alpha - Login Dulu</title> <title>Alpha - Login Dulu</title>
</head> </head>
<body class="lang_en node-main-login" data-page="" style="background-image:url('/luci-static/alpha/background/dashboard.png')"> <body class="lang_en node-main-login" data-page="">
<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>
</body> </body>
</html> </html>