mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 14:59:32 +07:00
css: Split into multiple files
This commit is contained in:
Daniel
parent
8c162678a7
commit
3f3a209ed0
33
css/Background.css
Normal file
33
css/Background.css
Normal file
@ -0,0 +1,33 @@
|
||||
#background img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
transition: transform .4s, opacity .4s !important;
|
||||
}
|
||||
|
||||
#background.scaled img {
|
||||
transform: scale(var(--scale-factor));
|
||||
}
|
||||
|
||||
body #background img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body:not(.dark) #background img:last-child,
|
||||
body.dark #background img:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.dark #background:not(.scaled) img:first-child,
|
||||
body:not(.dark) #background:not(.scaled) img:last-child {
|
||||
transform: scale(var(--scale-factor));
|
||||
}
|
||||
|
||||
body.dark #background.scaled img:first-child,
|
||||
body:not(.dark) #background.scaled img:last-child {
|
||||
transform: none;
|
||||
}
|
||||
11
css/Flags/Dark.css
Normal file
11
css/Flags/Dark.css
Normal file
@ -0,0 +1,11 @@
|
||||
body.dark {
|
||||
--color: #EEE;
|
||||
--color2: #EEE9;
|
||||
--background: #1118;
|
||||
--bg2: #0008;
|
||||
--hover: #FFF1;
|
||||
}
|
||||
|
||||
body.dark #theme-switcher .icon::after {
|
||||
content: "dark_mode"
|
||||
}
|
||||
19
css/Flags/Flags.css
Normal file
19
css/Flags/Flags.css
Normal file
@ -0,0 +1,19 @@
|
||||
@import url(Dark.css);
|
||||
|
||||
body {
|
||||
--color: #222;
|
||||
--color2: #2229;
|
||||
--background: #EEE8;
|
||||
--bg2: #FFF8;
|
||||
--hover: #0001;
|
||||
--scale-factor: 1.15;
|
||||
--blur: blur(16px);
|
||||
}
|
||||
|
||||
body.noblur {
|
||||
--blur: 0;
|
||||
}
|
||||
|
||||
body.noanim * {
|
||||
transition: none !important;
|
||||
}
|
||||
78
css/PageManager.css
Normal file
78
css/PageManager.css
Normal file
@ -0,0 +1,78 @@
|
||||
.page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
max-width: 920px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
overflow-y: scroll;
|
||||
transition: top .4s, opacity .4s, visibility .4s, color .3s;
|
||||
}
|
||||
|
||||
.page:not(.current) {
|
||||
top: 240px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
box-shadow: 2px 2px 8px #0003;
|
||||
background: var(--background);
|
||||
padding: 3px;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
margin: -4px 12px 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
min-width: 340px;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.back {
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
background: var(--background);
|
||||
margin: 20px;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.back .icon {
|
||||
margin: 4px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.back .icon:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.back .icon:after {
|
||||
content: "chevron_left";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.header .icon {
|
||||
margin-top: 1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.header .text {
|
||||
font-size: 26px;
|
||||
}
|
||||
75
css/Pages/Home.css
Normal file
75
css/Pages/Home.css
Normal file
@ -0,0 +1,75 @@
|
||||
.main {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.appicon {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#theme-switcher .icon::after {
|
||||
content: "light_mode"
|
||||
}
|
||||
|
||||
.home.page {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.home.page:not(.current) {
|
||||
top: calc(50% - 64px);
|
||||
}
|
||||
|
||||
.home .wrapper {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.appname {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.appdesc {
|
||||
opacity: .6;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
display: flex;
|
||||
margin: 16px auto 0;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
max-width: 480px;
|
||||
background: var(--background);
|
||||
padding: 2px;
|
||||
justify-content: space-between;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
.buttons > div {
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.buttons > div:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.buttons .text {
|
||||
margin-top: -2px;
|
||||
}
|
||||
3
css/Pages/Pages.css
Normal file
3
css/Pages/Pages.css
Normal file
@ -0,0 +1,3 @@
|
||||
@import url(Home.css);
|
||||
@import url(Services.css);
|
||||
@import url(Settings.css);
|
||||
52
css/Pages/Services.css
Normal file
52
css/Pages/Services.css
Normal file
@ -0,0 +1,52 @@
|
||||
.boxes {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
min-width: 292px;
|
||||
flex: 1;
|
||||
margin: 2px;
|
||||
border-radius: 20px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.box .icon {
|
||||
font-size: 24px;
|
||||
padding: 20px;
|
||||
background: hsl(var(--color), 100%, 89%);
|
||||
color: hsl(var(--color), 100%, 35%);
|
||||
border-radius: 100px;
|
||||
margin: 2px 12px 2px 2px;
|
||||
}
|
||||
|
||||
a.box {
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.box img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.box .name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.box .desc {
|
||||
opacity: .6;
|
||||
}
|
||||
72
css/Pages/Settings.css
Normal file
72
css/Pages/Settings.css
Normal file
@ -0,0 +1,72 @@
|
||||
.settings {
|
||||
margin: 32px auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: var(--bg2);
|
||||
margin: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
transition: background .4s;
|
||||
}
|
||||
|
||||
.setting .icon {
|
||||
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 .4s;
|
||||
}
|
||||
|
||||
.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 .4s;
|
||||
}
|
||||
|
||||
.setting.checked .switch {
|
||||
background-color: #68F;
|
||||
border-color: #68F;
|
||||
}
|
||||
|
||||
.setting.checked .switch:after {
|
||||
left: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin: 24px 0 -8px;
|
||||
color: #F60;
|
||||
}
|
||||
|
||||
.warn.hidden {
|
||||
display: none;
|
||||
}
|
||||
373
css/main.css
373
css/main.css
@ -1,45 +1,11 @@
|
||||
@import url(../font/quicksand/quicksand.css);
|
||||
@import url(../fonts/Quicksand/Quicksand.css);
|
||||
@import url(../fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url(../font/MaterialSymbolsRounded.woff2) format('woff2');
|
||||
}
|
||||
@import url(Flags/Flags.css);
|
||||
@import url(PageManager.css);
|
||||
@import url(Background.css);
|
||||
@import url(Pages/Pages.css);
|
||||
|
||||
body {
|
||||
--color: #222;
|
||||
--color2: #2229;
|
||||
--background: #EEE8;
|
||||
--bg2: #FFF8;
|
||||
--hover: #0001;
|
||||
--scale-factor: 1.15;
|
||||
--blur: blur(16px);
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--color: #EEE;
|
||||
--color2: #EEE9;
|
||||
--background: #1118;
|
||||
--bg2: #0008;
|
||||
--hover: #FFF1;
|
||||
}
|
||||
|
||||
#theme-switcher .icon::after {
|
||||
content: "light_mode"
|
||||
}
|
||||
|
||||
body.dark #theme-switcher .icon::after {
|
||||
content: "dark_mode"
|
||||
}
|
||||
|
||||
body.noblur {
|
||||
--blur: 0;
|
||||
}
|
||||
|
||||
body.noanim * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
@ -55,330 +21,3 @@ body {
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#background img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
transition: transform .4s, opacity .4s !important;
|
||||
}
|
||||
|
||||
#background.scaled img {
|
||||
transform: scale(var(--scale-factor));
|
||||
}
|
||||
|
||||
body #background img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body:not(.dark) #background img:last-child,
|
||||
body.dark #background img:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.dark #background:not(.scaled) img:first-child,
|
||||
body:not(.dark) #background:not(.scaled) img:last-child {
|
||||
transform: scale(var(--scale-factor));
|
||||
}
|
||||
|
||||
body.dark #background.scaled img:first-child,
|
||||
body:not(.dark) #background.scaled img:last-child {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.appicon {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
max-width: 920px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
overflow-y: scroll;
|
||||
transition: top .4s, opacity .4s, visibility .4s, color .3s;
|
||||
}
|
||||
|
||||
.home.page {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.page:not(.current) {
|
||||
top: 240px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.home.page:not(.current) {
|
||||
top: calc(50% - 64px);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
box-shadow: 2px 2px 8px #0003;
|
||||
background: var(--background);
|
||||
padding: 3px;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
margin: -4px 12px 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
min-width: 340px;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.home .wrapper {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.appname {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.appdesc {
|
||||
opacity: .6;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
display: flex;
|
||||
margin: 16px auto 0;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
max-width: 480px;
|
||||
background: var(--background);
|
||||
padding: 2px;
|
||||
justify-content: space-between;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
.buttons > div {
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.buttons > div:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.buttons .text {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.back {
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
background: var(--background);
|
||||
margin: 20px;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.back .icon {
|
||||
margin: 4px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.back .icon:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.back .icon:after {
|
||||
content: "chevron_left";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.boxes {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
min-width: 292px;
|
||||
flex: 1;
|
||||
margin: 2px;
|
||||
border-radius: 20px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.box .icon {
|
||||
font-size: 24px;
|
||||
padding: 20px;
|
||||
background: hsl(var(--color), 100%, 89%);
|
||||
color: hsl(var(--color), 100%, 35%);
|
||||
border-radius: 100px;
|
||||
margin: 2px 12px 2px 2px;
|
||||
}
|
||||
|
||||
a.box {
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.box img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.box .name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.box .desc {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.header .icon {
|
||||
margin-top: 1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.header .text {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin: 32px auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: var(--bg2);
|
||||
margin: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
transition: background .4s;
|
||||
}
|
||||
|
||||
.setting .icon {
|
||||
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 .4s;
|
||||
}
|
||||
|
||||
.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 .4s;
|
||||
}
|
||||
|
||||
.setting.checked .switch {
|
||||
background-color: #68F;
|
||||
border-color: #68F;
|
||||
}
|
||||
|
||||
.setting.checked .switch:after {
|
||||
left: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin: 24px 0 -8px;
|
||||
color: #F60;
|
||||
}
|
||||
|
||||
.warn.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
22
fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css
Normal file
22
fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css
Normal file
@ -0,0 +1,22 @@
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url(MaterialSymbolsRounded.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
font-weight: 500;
|
||||
src: local("Quicksand Medium"), local("Quicksand-Medium"), url(quicksand-medium.woff2) format("woff2");
|
||||
}
|
||||
|
||||
/* quicksand-bold */
|
||||
@font-face {
|
||||
font-family: Quicksand;
|
||||
@ -12,4 +13,3 @@
|
||||
font-weight: 700;
|
||||
src: local("Quicksand Bold"), local("Quicksand-Bold"), url(quicksand-bold.woff2) format("woff2");
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user