Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-12 11:52:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/cobalt.css: optimised padding and safe area

Browse source 
- fixed top padding on iphones with dynamic island when installed as app
- unified padding with 2 variables
- smaller padding everywhere
- moved all safe area calls into standalone media query for mobile layout
- fixed dialog bottom padding
- minimised header and tab footprint in browser on mobile, allowing for more content on one screen
This commit is contained in:
wukko 2024-05-12 15:51:54 +06:00
parent c35f900f31
commit 526341fcae
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 136 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
src/front/cobalt.css
View file

@ -6,7 +6,9 @@
--inset-focus: 0 0 0 0.1rem var(--accent) inset; --inset-focus: 0 0 0 0.1rem var(--accent) inset;
--inset-focus-inv: 0 0 0 0.15rem var(--background) inset; --inset-focus-inv: 0 0 0 0.15rem var(--background) inset;
--font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace; --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace;
--padding-1: 0.75rem; --padding: 0.7rem;
--padding-small: 0.2rem;
--padding-dialog: 18px;
--line-height: 1.65rem; --line-height: 1.65rem;
--red: rgb(249, 47, 96); --red: rgb(249, 47, 96);
--blue: rgb(47, 138, 249); --blue: rgb(47, 138, 249);
@ -81,6 +83,7 @@ html,
body { body {
margin: 0; margin: 0;
background: var(--background); background: var(--background);
background-color: var(--background);
color: var(--accent); color: var(--accent);
-webkit-tap-highlight-color: var(--transparent); -webkit-tap-highlight-color: var(--transparent);
font-family: var(--font-mono); font-family: var(--font-mono);
@ -89,7 +92,6 @@ body {
overflow: hidden; overflow: hidden;
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
height: calc(100% + env(safe-area-inset-top)/2);
} }
#home { #home {
position: fixed; position: fixed;
@ -118,10 +120,10 @@ a {
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
padding: calc(var(--gap) - 0.1rem) calc(var(--gap)*2 - 0.2rem) calc(var(--gap) - 0.1rem) var(--gap); padding: calc(var(--gap) - 0.1rem) calc(var(--gap)*2 - var(--padding-small)) calc(var(--gap) - 0.1rem) var(--gap);
width: auto; width: auto;
margin-right: var(--padding-1); margin-right: var(--padding);
margin-bottom: var(--padding-1); margin-bottom: var(--padding);
background: var(--accent-button); background: var(--accent-button);
} }
.checkbox-label { .checkbox-label {
@ -133,7 +135,7 @@ a {
width: 20px; width: 20px;
height: 20px; height: 20px;
z-index: 0; z-index: 0;
margin-right: var(--padding-1); margin-right: var(--padding);
border: 0.15rem solid var(--accent); border: 0.15rem solid var(--accent);
} }
[type="checkbox"]::before { [type="checkbox"]::before {
@ -241,7 +243,7 @@ button:active,
background: none; background: none;
border: var(--border-15); border: var(--border-15);
color: var(--accent); color: var(--accent);
padding: 0.3rem 0.75rem 0.5rem; padding: 0.3rem var(--padding) 0.5rem;
font-size: 1rem; font-size: 1rem;
} }
.mono { .mono {
@ -307,7 +309,7 @@ button:active,
#url-clear { #url-clear {
height: 100%; height: 100%;
background: none; background: none;
padding: 0 1rem 0.2rem; padding: 0 1rem var(--padding-small);
transform: none; transform: none;
font-size: 1rem; font-size: 1rem;
box-shadow: none!important; box-shadow: none!important;
@ -320,8 +322,8 @@ button:active,
display: flex; display: flex;
position: absolute; position: absolute;
width: 20px; width: 20px;
padding-top: 0.2rem; padding-top: var(--padding-small);
left: 0.7rem; left: var(--padding);
flex-wrap: nowrap; flex-wrap: nowrap;
color: var(--accent-subtext); color: var(--accent-subtext);
} }
@ -350,7 +352,7 @@ button:active,
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 2rem); padding-bottom: 2rem;
font-size: 0.9rem; font-size: 0.9rem;
text-align: center; text-align: center;
} }
@ -412,7 +414,7 @@ button:active,
max-height: 95%; max-height: 95%;
opacity: 0; opacity: 0;
transform: translate(-50%,-48%)scale(.95); transform: translate(-50%,-48%)scale(.95);
box-shadow: 0 0 0 0.2rem var(--glass) inset, box-shadow: 0 0 0 var(--padding-small) var(--glass) inset,
0 0 20px 0 var(--accent-hover-transparent); 0 0 20px 0 var(--accent-hover-transparent);
} }
.popup.visible { .popup.visible {
@ -442,15 +444,15 @@ button:active,
.popup.small { .popup.small {
width: 21rem; width: 21rem;
box-shadow: 0px 0px 60px 0px var(--accent-hover); box-shadow: 0px 0px 60px 0px var(--accent-hover);
padding: 18px; padding: var(--padding-dialog);
transform: translate(-50%,-50%)scale(.95); transform: translate(-50%, -50%)scale(.95);
pointer-events: all; pointer-events: all;
border-radius: 22px; border-radius: 22px;
} }
.popup.small .popup-content-inner { .popup.small .popup-content-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: var(--padding-dialog);
width: 100%; width: 100%;
} }
.popup.small.visible { .popup.small.visible {
@ -507,7 +509,7 @@ button:active,
width: 100%; width: 100%;
max-height: 300px; max-height: 300px;
min-height: 210px; min-height: 210px;
margin-bottom: 0.7rem; margin-bottom: var(--padding);
float: left; float: left;
background: var(--accent-hover); background: var(--accent-hover);
display: flex; display: flex;
@ -521,8 +523,8 @@ button:active,
.changelog-tags { .changelog-tags {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.7rem; gap: var(--padding);
padding-bottom: 0.7rem; padding-bottom: var(--padding);
flex-wrap: wrap; flex-wrap: wrap;
} }
.changelog-tag-version { .changelog-tag-version {
@ -540,11 +542,11 @@ button:active,
padding-top: 0!important; padding-top: 0!important;
} }
.desc-padding { .desc-padding {
padding-bottom: 0.7rem; padding-bottom: var(--padding);
} }
#popup-subtitle { #popup-subtitle {
font-size: 1.1rem; font-size: 1.1rem;
padding-bottom: var(--padding-1); padding-bottom: var(--padding);
} }
.popup-desc, .popup-desc,
.desc-error, .desc-error,
@ -562,9 +564,9 @@ button:active,
} }
.popup-title { .popup-title {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.2em;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1em;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
margin-top: 0.4rem; margin-top: 0.4rem;
} }
@ -581,12 +583,12 @@ button:active,
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
#picker-holder { #picker-holder {
padding-top: calc(env(safe-area-inset-top)/2 + 4.7rem); padding-top: calc(var(--padding) + 4rem);
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); padding-bottom: 4.8rem;
} }
.tab-content-settings, .tab-content-settings,
#tab-about-about .popup-content-inner { #tab-about-about .popup-content-inner {
padding-top: calc(env(safe-area-inset-top)/2 + 6rem);; padding-top: 6rem;
} }
.bullpadding { .bullpadding {
padding-left: 0.58rem; padding-left: 0.58rem;
@ -594,11 +596,11 @@ button:active,
.popup-header { .popup-header {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem); padding-top: calc(var(--padding) + 1rem);
width: 100%; width: 100%;
} }
.settings-category { .settings-category {
padding-bottom: 0.7rem; padding-bottom: var(--padding);
} }
.separator { .separator {
float: left; float: left;
@ -616,13 +618,13 @@ button:active,
line-height: var(--line-height); line-height: var(--line-height);
} }
.bottom-margin { .bottom-margin {
margin-bottom: var(--padding-1)!important; margin-bottom: var(--padding)!important;
} }
.top-margin { .top-margin {
margin-top: var(--padding-1)!important; margin-top: var(--padding)!important;
} }
.top-margin-only { .top-margin-only {
margin-top: var(--padding-1)!important; margin-top: var(--padding)!important;
margin-bottom: 0!important; margin-bottom: 0!important;
} }
.no-margin { .no-margin {
@ -668,7 +670,7 @@ button:active,
cursor: pointer; cursor: pointer;
} }
.switch.space-right { .switch.space-right {
margin-right: var(--padding-1); margin-right: var(--padding);
} }
.switch:focus { .switch:focus {
box-shadow: var(--inset-focus) inset; box-shadow: var(--inset-focus) inset;
@ -738,12 +740,12 @@ button:active,
bottom: 0; bottom: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
padding-top: 0.2rem; padding-top: var(--padding-small);
padding-bottom: 1.7rem; padding-bottom: calc(var(--padding) + 1rem);
} }
.popup-tabs-child { .popup-tabs-child {
width: 100%; width: 100%;
padding: 0 0.2rem; padding: 0 var(--padding-small);
} }
.emoji, svg { .emoji, svg {
user-select: none; user-select: none;
@ -773,10 +775,10 @@ button:active,
justify-content: start; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-around; align-content: space-around;
padding-top: calc(env(safe-area-inset-top)/2 + 7.6rem); padding-top: 7.6rem;
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); padding-bottom: 4.8rem;
padding-left: 0.2rem; padding-left: var(--padding-small);
padding-right: 0.2rem; padding-right: var(--padding-small);
} }
.imageBlock { .imageBlock {
width: 100%; width: 100%;
@ -795,7 +797,7 @@ button:active,
} }
#popup-picker .explanation { #popup-picker .explanation {
margin-top: 0!important; margin-top: 0!important;
margin-bottom: var(--padding-1); margin-bottom: var(--padding);
} }
#cobalt-main-box #bottom button { #cobalt-main-box #bottom button {
width: auto; width: auto;
@ -807,7 +809,7 @@ button:active,
-webkit-user-select: none; -webkit-user-select: none;
} }
.collapse-header { .collapse-header {
padding: 0.5rem var(--padding-1); padding: 0.5rem var(--padding);
font-size: 0.95rem; font-size: 0.95rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -816,7 +818,7 @@ button:active,
background: var(--accent-button); background: var(--accent-button);
} }
.collapse-header .emoji { .collapse-header .emoji {
margin-right: var(--padding-1); margin-right: var(--padding);
} }
.collapse-indicator { .collapse-indicator {
display: flex; display: flex;
@ -836,7 +838,7 @@ button:active,
} }
.collapse-body { .collapse-body {
display: none; display: none;
padding: var(--padding-1); padding: var(--padding);
padding-bottom: 1rem; padding-bottom: 1rem;
user-select: text; user-select: text;
-webkit-user-select: text; -webkit-user-select: text;
@ -863,7 +865,7 @@ button:active,
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: calc(env(safe-area-inset-top) + 1rem); padding-top: 1rem;
} }
.urgent-text { .urgent-text {
display: flex; display: flex;
@ -943,7 +945,7 @@ button:active,
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.2rem 1rem; gap: var(--padding-small) 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.sponsored-logo svg { .sponsored-logo svg {
@ -963,7 +965,7 @@ button:active,
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 1rem; gap: 1rem;
padding: 0.5rem 0.7rem; padding: 0.5rem var(--padding);
} }
.filename-item.line { .filename-item.line {
border-bottom: 0.1rem solid var(--accent-button-elevated); border-bottom: 0.1rem solid var(--accent-button-elevated);
@ -1079,7 +1081,7 @@ button:active,
} }
@media screen and (max-width: 660px) { @media screen and (max-width: 660px) {
#cobalt-main-box { #cobalt-main-box {
width: calc(100% - (0.7rem * 2)); width: calc(100% - (var(--padding) * 2));
} }
} }
/* mobile page */ /* mobile page */
@ -1101,14 +1103,11 @@ button:active,
#cobalt-main-box #bottom #audioMode button, #audioMode { #cobalt-main-box #bottom #audioMode button, #audioMode {
width: 100%; width: 100%;
} }
#footer {
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
}
#footer-buttons { #footer-buttons {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
padding: 0 0.7rem; padding: 0 var(--padding);
} }
.footer-pair .footer-button { .footer-pair .footer-button {
width: 100%!important; width: 100%!important;
@ -1125,9 +1124,6 @@ button:active,
flex-direction: column; flex-direction: column;
gap: var(--gap); gap: var(--gap);
} }
.urgent-notice {
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
}
.popup, .popup,
.popup-header .glass-bkg, .popup-header .glass-bkg,
.popup-tabs .glass-bkg, .popup-tabs .glass-bkg,
@ -1149,14 +1145,13 @@ button:active,
transform: unset; transform: unset;
} }
.popup.small { .popup.small {
width: calc(100% - 18px * 2); width: calc(100% - var(--padding-dialog) * 2);
height: auto; height: auto;
top: unset; top: unset;
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: none; transform: none;
position: absolute; position: absolute;
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem);
transform: translateY(30rem); transform: translateY(30rem);
} }
#popup-download .popout-meowbalt { #popup-download .popout-meowbalt {
@ -1199,14 +1194,96 @@ button:active,
max-height: 100%; max-height: 100%;
box-shadow: none; box-shadow: none;
} }
.popup-tabs {
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
}
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
.popup-tabs-child, .popup-tabs-child,
.popup-header-contents { .popup-header-contents {
padding-left: 0.7rem; padding-left: var(--padding);
padding-right: 0.7rem; padding-right: var(--padding);
}
.popup-content-inner,
.tab-content-settings,
#picker-holder {
padding-bottom: calc(var(--padding) + 3.5rem);
padding-top: calc(var(--padding) + 3rem);
}
#footer,
.popup-tabs {
padding-bottom: var(--padding);
}
.popup.small {
padding-bottom: var(--padding-dialog)
}
.urgent-notice {
padding-top: 1rem;
}
.popup-title {
margin-top: var(--padding-small);
}
.popup-header {
padding-top: var(--padding);
}
.tab-content-settings,
#tab-about-about .popup-content-inner {
padding-top: 5rem;
}
}
@media screen and (max-width: 535px) and (display-mode: standalone) {
html,
body {
height: calc(100% + env(safe-area-inset-top) / 2);
}
.popup-header {
padding-top: max(
calc(env(safe-area-inset-top)),
var(--padding) + 1rem
);
}
.urgent-notice {
padding-top: max(
calc(env(safe-area-inset-top) - var(--padding-small)),
var(--padding)
);
}
#footer,
.popup-tabs {
padding-bottom: max(
calc(env(safe-area-inset-bottom) + var(--padding-small)),
var(--padding)
);
}
.popup.small {
padding-bottom: max(
calc(env(safe-area-inset-bottom) + var(--padding-small)),
var(--padding-dialog)
);
}
.popup-content-inner,
.tab-content-settings {
padding-top: max(
calc(env(safe-area-inset-top) + var(--padding) + var(--padding-small) + 2rem),
calc(var(--padding) + 4rem - var(--padding-small))
);
padding-bottom: max(
calc(env(safe-area-inset-bottom) + var(--padding) + 3rem),
calc(var(--padding) + var(--padding-small) * 2 + 3rem)
);
}
.tab-content-settings,
#tab-about-about .popup-content-inner {
padding-top: max(
calc(env(safe-area-inset-top) + var(--padding) + var(--padding-small) * 2 + 3rem),
calc(var(--padding) + 5rem)
);
}
#picker-holder {
padding-top: max(
calc(env(safe-area-inset-top) + var(--padding) + 5rem),
calc(var(--padding) * 2 + 6rem)
);
padding-bottom: max(
calc(env(safe-area-inset-bottom) + var(--padding) + 2rem),
calc(4rem - var(--padding) + var(--padding-small))
);
} }
} }