mirror of
https://github.com/khairul169/honey.git
synced 2026-10-04 18:03:54 +07:00
Rebrand Settings to More
This commit is contained in:
Daniel
+5
-1
@@ -6,6 +6,10 @@ body.dark {
|
||||
--hover: #FFF1;
|
||||
}
|
||||
|
||||
body.dark #theme-switcher i::before {
|
||||
--hidden: 1;
|
||||
}
|
||||
|
||||
body.dark #theme-switcher i::after {
|
||||
content: "dark_mode"
|
||||
--hidden: 0;
|
||||
}
|
||||
|
||||
+23
-1
@@ -18,8 +18,30 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#theme-switcher i {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#theme-switcher i::before, #theme-switcher i::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--hidden: 1;
|
||||
opacity: calc(1 - var(--hidden));
|
||||
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2));
|
||||
transition: transform .3s, opacity .3s;
|
||||
}
|
||||
|
||||
#theme-switcher i::before {
|
||||
--hidden: 0;
|
||||
--dark: 0;
|
||||
content: "light_mode";
|
||||
}
|
||||
|
||||
#theme-switcher i::after {
|
||||
content: "light_mode"
|
||||
--dark: 1;
|
||||
content: "dark_mode";
|
||||
}
|
||||
|
||||
.home.page {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
@import url(Privacy.css);
|
||||
@import url(Settings.css);
|
||||
|
||||
.subpages {
|
||||
position: relative;
|
||||
transform: translateX(calc(var(--id) * -100%));
|
||||
transition: transform .4s, height .4s;
|
||||
}
|
||||
|
||||
.subpages > div {
|
||||
position: absolute;
|
||||
left: calc(var(--n) * 100%);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
#report-boxes {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#report-boxes i::after {
|
||||
color: var(--color);
|
||||
text-shadow: 0 0 48px var(--color);
|
||||
padding: 16px;
|
||||
font-size: 28px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
#report-boxes .icon-https::after {
|
||||
--color: #0C7;
|
||||
content: "lock";
|
||||
}
|
||||
|
||||
#report-boxes .icon-rocket::after {
|
||||
--color: #68F;
|
||||
content: "rocket_launch";
|
||||
}
|
||||
|
||||
#report-boxes .prewarn i::after {
|
||||
--color: #EA0;
|
||||
}
|
||||
|
||||
#report-boxes .warn i::after {
|
||||
--color: #F60;
|
||||
}
|
||||
|
||||
#report-boxes .error i::after {
|
||||
--color: #F22;
|
||||
}
|
||||
|
||||
#report-boxes > div {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 256px;
|
||||
flex: 1;
|
||||
padding: 20px 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#report-boxes .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#report-boxes .subtitle {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.security {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 600px;
|
||||
padding: 24px;
|
||||
margin: 120px auto 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.security i {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.security #report-score {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.security #report {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.score::after {
|
||||
content: "%";
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.settings {
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: var(--bg2);
|
||||
margin: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
.setting i {
|
||||
margin-right: 14px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.setting .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.setting .desc {
|
||||
opacity: .6;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.setting .switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 24px;
|
||||
background: #8886;
|
||||
border-radius: 100px;
|
||||
margin: 0 4px 0 auto;
|
||||
transition: border .4s, background .3s;
|
||||
}
|
||||
|
||||
.setting .switch:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color);
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
border-radius: 10px;
|
||||
transform: translateY(-50%);
|
||||
transition: left .2s, background .3s;
|
||||
}
|
||||
|
||||
.setting.checked .switch {
|
||||
background-color: #68F;
|
||||
border-color: #68F;
|
||||
}
|
||||
|
||||
.setting.checked .switch:after {
|
||||
left: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#no-cookies {
|
||||
margin: 24px 0 -8px;
|
||||
color: #F60;
|
||||
}
|
||||
|
||||
#no-cookies.hidden {
|
||||
display: none;
|
||||
}
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
@import url(Home.css);
|
||||
@import url(Services.css);
|
||||
@import url(Settings/Settings.css);
|
||||
@import url(More/More.css);
|
||||
|
||||
.page {
|
||||
position: fixed;
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
.settings {
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: var(--bg2);
|
||||
margin: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
.setting i {
|
||||
margin-right: 14px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.setting .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.setting .desc {
|
||||
opacity: .6;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.setting .switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 24px;
|
||||
background: #8886;
|
||||
border-radius: 100px;
|
||||
margin: 0 4px 0 auto;
|
||||
transition: border .4s, background .3s;
|
||||
}
|
||||
|
||||
.setting .switch:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color);
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
border-radius: 10px;
|
||||
transform: translateY(-50%);
|
||||
transition: left .2s, background .3s;
|
||||
}
|
||||
|
||||
.setting.checked .switch {
|
||||
background-color: #68F;
|
||||
border-color: #68F;
|
||||
}
|
||||
|
||||
.setting.checked .switch:after {
|
||||
left: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#no-cookies {
|
||||
margin: 24px 0 -8px;
|
||||
color: #F60;
|
||||
}
|
||||
|
||||
#no-cookies.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subpages {
|
||||
position: relative;
|
||||
transform: translateX(calc(var(--id) * -100%));
|
||||
transition: transform .4s, height .4s;
|
||||
}
|
||||
|
||||
.subpages > div {
|
||||
position: absolute;
|
||||
left: calc(var(--n) * 100%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#report-boxes {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#report-boxes i::after {
|
||||
color: var(--color);
|
||||
text-shadow: 0 0 48px var(--color);
|
||||
padding: 16px;
|
||||
font-size: 28px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
#report-boxes .icon-https::after {
|
||||
--color: #0C7;
|
||||
content: "lock";
|
||||
}
|
||||
|
||||
#report-boxes .icon-rocket::after {
|
||||
--color: #68F;
|
||||
content: "rocket_launch";
|
||||
}
|
||||
|
||||
#report-boxes .prewarn i::after {
|
||||
--color: #EA0;
|
||||
}
|
||||
|
||||
#report-boxes .warn i::after {
|
||||
--color: #F60;
|
||||
}
|
||||
|
||||
#report-boxes .error i::after {
|
||||
--color: #F22;
|
||||
}
|
||||
|
||||
#report-boxes > div {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 256px;
|
||||
flex: 1;
|
||||
padding: 20px 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#report-boxes .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#report-boxes .subtitle {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.security {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 600px;
|
||||
padding: 24px;
|
||||
margin: 120px auto 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.security i {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.security #report-score {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.security #report {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.score::after {
|
||||
content: "%";
|
||||
font-size: 18px;
|
||||
}
|
||||
Reference in New Issue
Block a user