mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-05 07:49:58 +00:00
fixes for poor rendering in chrome
- fixed blurry header - fixed blurry tab bar - fixed blurry switches - fixed weirdly rounded corners in popups - fixed 1px gap on edges of various elements in popup - fixed overscrolling in other settings tab - fixed unexpected button highlight effect in mobile version - removed outdated fixed for tiny screens
This commit is contained in:
wukko
parent
af6c93cbf8
commit
be00900a49
6 changed files with 73 additions and 111 deletions
|
|
@ -175,6 +175,24 @@ input[type="text"],
|
|||
backdrop-filter: blur(7px);
|
||||
-webkit-backdrop-filter: blur(7px);
|
||||
}
|
||||
.glass-bkg.alone {
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.glass-bkg.small {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
border: var(--accent-highlight) solid 0.15rem;
|
||||
border-radius: 8px/9px;
|
||||
}
|
||||
.desktop button:hover,
|
||||
.desktop .switch:hover,
|
||||
.desktop .checkbox:hover,
|
||||
|
|
@ -198,7 +216,7 @@ button:active,
|
|||
.popup.small .switch {
|
||||
background: var(--accent-button-elevated);
|
||||
}
|
||||
.popup.small .switch:hover {
|
||||
.desktop .popup.small .switch:hover {
|
||||
background: var(--accent-hover-elevated);
|
||||
}
|
||||
.switch.text-backdrop,
|
||||
|
|
@ -267,7 +285,6 @@ button:active,
|
|||
}
|
||||
.box {
|
||||
background: var(--background);
|
||||
border: var(--glass) solid .2rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
#url-input-area {
|
||||
|
|
@ -375,7 +392,8 @@ button:active,
|
|||
max-height: 95%;
|
||||
opacity: 0;
|
||||
transform: translate(-50%,-48%)scale(.95);
|
||||
box-shadow: 0 0 20px 0 var(--accent-hover-transparent);
|
||||
box-shadow: 0 0 0 0.2rem var(--glass) inset,
|
||||
0 0 20px 0 var(--accent-hover-transparent);
|
||||
}
|
||||
.popup.visible {
|
||||
visibility: visible;
|
||||
|
|
@ -404,7 +422,6 @@ button:active,
|
|||
.popup.small {
|
||||
width: 20%;
|
||||
box-shadow: 0px 0px 60px 0px var(--accent-hover);
|
||||
border: var(--accent-highlight) solid 0.15rem;
|
||||
padding: 1.7rem;
|
||||
transform: translate(-50%,-50%)scale(.95);
|
||||
pointer-events: all;
|
||||
|
|
@ -530,7 +547,6 @@ button:active,
|
|||
z-index: 999;
|
||||
padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem);
|
||||
width: 100%;
|
||||
border-bottom: var(--accent-highlight) solid 0.1rem;
|
||||
}
|
||||
.settings-category {
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -629,7 +645,6 @@ button:active,
|
|||
width: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.switches .switch {
|
||||
|
|
@ -672,7 +687,6 @@ button:active,
|
|||
width: 100%;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 1.7rem;
|
||||
border-top: var(--accent-highlight) solid 0.1rem;
|
||||
}
|
||||
.popup-tabs-child {
|
||||
width: 100%;
|
||||
|
|
@ -907,13 +921,17 @@ button:active,
|
|||
.scrollable #popup-content {
|
||||
border-radius: 8px / 9px;
|
||||
}
|
||||
#popup-header {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
#popup-header .glass-bkg {
|
||||
border-top-left-radius: 8px 9px;
|
||||
border-top-right-radius: 8px 9px;
|
||||
border-bottom: var(--accent-highlight) solid 0.1rem;
|
||||
top: -1px;
|
||||
}
|
||||
#popup-tabs {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
#popup-tabs .glass-bkg {
|
||||
border-bottom-left-radius: 8px 9px;
|
||||
border-bottom-right-radius: 8px 9px;
|
||||
border-top: var(--accent-highlight) solid 0.1rem;
|
||||
bottom: -1px;
|
||||
}
|
||||
.switches .first {
|
||||
border-top-left-radius: 5px 6px;
|
||||
|
|
@ -1009,87 +1027,6 @@ button:active,
|
|||
width: calc(100% - 1.3rem);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
:root {
|
||||
--gap: 0.38rem;
|
||||
--gap-no-icon: 0.38rem;
|
||||
--line-height: 1.2rem;
|
||||
}
|
||||
#popup-title {
|
||||
font-size: 1.07rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.checkbox {
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
.footer-button,
|
||||
#audioMode-false,
|
||||
#audioMode-true,
|
||||
#paste {
|
||||
font-size: 0!important;
|
||||
}
|
||||
.footer-button .emoji,
|
||||
#audioMode-false .emoji,
|
||||
#audioMode-true .emoji,
|
||||
#paste .emoji {
|
||||
margin-right: 0;
|
||||
}
|
||||
.switch,
|
||||
.checkbox,
|
||||
.category-title,
|
||||
.subtitle,
|
||||
#popup-desc,
|
||||
.collapse-title {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.collapse-header {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
#popup-above-title,
|
||||
#url-input-area {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.explanation {
|
||||
font-size: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1rem!important;
|
||||
}
|
||||
#popup-desc {
|
||||
line-height: 1.2rem;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
.changelog-subtitle, #popup-subtitle {
|
||||
font-size: 0.8rem!important;
|
||||
}
|
||||
.category-title {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.emoji {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
.desc-padding {
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
#logo {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.popup,
|
||||
.popup.scrollable,
|
||||
.popup.small {
|
||||
height: 98%;
|
||||
}
|
||||
[type=checkbox] {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0.12rem solid var(--accent);
|
||||
}
|
||||
[type=checkbox]:before {
|
||||
transform: scaleY(.8)scaleX(.7)rotate(45deg);
|
||||
left: 3.4px;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
#cobalt-main-box {
|
||||
width: calc(100% - (0.7rem * 2));
|
||||
|
|
@ -1128,10 +1065,20 @@ button:active,
|
|||
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
|
||||
}
|
||||
.popup,
|
||||
#popup-header,
|
||||
#popup-tabs {
|
||||
#popup-header .glass-bkg,
|
||||
#popup-tabs .glass-bkg,
|
||||
.glass-bkg.small {
|
||||
border-radius: 0;
|
||||
}
|
||||
#popup-tabs .glass-bkg {
|
||||
bottom: 0;
|
||||
}
|
||||
.switches {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
.popup.center {
|
||||
top: unset;
|
||||
left: unset;
|
||||
|
|
@ -1145,11 +1092,13 @@ button:active,
|
|||
left: 0;
|
||||
transform: none;
|
||||
position: absolute;
|
||||
border: none;
|
||||
border-top: var(--accent-highlight) solid 0.15rem;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem);
|
||||
transform: translateY(30rem);
|
||||
}
|
||||
.glass-bkg.small {
|
||||
border: none;
|
||||
border-top: var(--accent-highlight) solid 0.15rem;
|
||||
}
|
||||
.popup.small.visible {
|
||||
transform: none;
|
||||
transition: transform 200ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
|
||||
|
|
@ -1177,6 +1126,7 @@ button:active,
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
#popup-tabs {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@
|
|||
"KeyboardShortcutClosePopup": "close all popups",
|
||||
"CollapseLegal": "legal stuff",
|
||||
"FairUse": "cobalt is a tool for easing content downloads from internet and takes <span class=\"text-backdrop\">zero liability</span>. you are responsible for what you download, how you use and distribute that content.\n\ncobalt does not log any info about you, it's impossible for me to snitch on you, but please be mindful when using content of others and always credit original creators!\n\nwhen used in education purposes (lecture, homework, etc) please attach the source link.\n\nfair use and credits benefit everyone.",
|
||||
"UrgentFeatureUpdate71": "more supported services!"
|
||||
"UrgentFeatureUpdate71": "more supported services!",
|
||||
"UrgentThanks": "thank you for support!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@
|
|||
"KeyboardShortcutClosePopup": "закрыть все окна",
|
||||
"CollapseLegal": "правовые штучки",
|
||||
"FairUse": "кобальт - это инструмент для облегчения скачивания контента из интернета, и он <span class=\"text-backdrop\">не несёт никакой ответственности</span>. ты несёшь ответственность за то, что скачиваешь, как используешь и распространяешь скачанный контент.\n\nкобальт не собирает никакой информации о тебе, и не может донести на тебя, но, пожалуйста, будь сознателен при использовании чужого контента и всегда указывай авторов!\n\nпри использовании в образовательных целях (лекции, домашние задания и т.д.), пожалуйста, прикладывай ссылку на источник.\n\nчестное использование и указание авторства выгодно всем.",
|
||||
"UrgentFeatureUpdate71": "расширение поддержки сервисов!"
|
||||
"UrgentFeatureUpdate71": "расширение поддержки сервисов!",
|
||||
"UrgentThanks": "спасибо за поддержку!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,17 +68,19 @@ export function popup(obj) {
|
|||
}
|
||||
return `
|
||||
${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box": ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''}
|
||||
<div id="popup-header" class="popup-header${!obj.buttonOnly ? " glass-bkg": ''}">
|
||||
<div id="popup-header" class="popup-header">
|
||||
<div id="popup-header-contents">
|
||||
${obj.buttonOnly ? obj.header.emoji : ``}
|
||||
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
|
||||
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
|
||||
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
|
||||
</div>
|
||||
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>`: ''}
|
||||
</div>
|
||||
<div id="popup-content" class="popup-content-inner">
|
||||
${body}${obj.buttonOnly ? `<button id="close-error" class="switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
|
||||
</div>
|
||||
${classes.includes("small") ? `<div class="glass-bkg small"></div>`: ''}
|
||||
${obj.standalone ? `</div>` : ''}`
|
||||
}
|
||||
|
||||
|
|
@ -97,14 +99,18 @@ export function multiPagePopup(obj) {
|
|||
return `
|
||||
<div id="popup-${obj.name}" class="popup center box scrollable">
|
||||
<div id="popup-content">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header glass-bkg">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header">
|
||||
<div id="popup-header-contents">
|
||||
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
|
||||
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
|
||||
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
|
||||
</div>
|
||||
<div class="glass-bkg alone"></div>
|
||||
</div>` : ''}${tabContent}</div>
|
||||
<div id="popup-tabs" class="switches popup-tabs glass-bkg"><div class="switches popup-tabs-child">${tabs}</div></div>
|
||||
<div id="popup-tabs" class="switches popup-tabs">
|
||||
<div class="switches popup-tabs-child">${tabs}</div>
|
||||
<div class="glass-bkg alone"></div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
export function collapsibleList(arr) {
|
||||
|
|
@ -136,15 +142,19 @@ export function popupWithBottomButtons(obj) {
|
|||
return `
|
||||
<div id="popup-${obj.name}" class="popup center box scrollable">
|
||||
<div id="popup-content">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header glass-bkg">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header">
|
||||
<div id="popup-header-contents">
|
||||
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
|
||||
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
|
||||
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
|
||||
${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
|
||||
</div>
|
||||
<div class="glass-bkg alone"></div>
|
||||
</div>` : ''}${obj.content}</div>
|
||||
<div id="popup-tabs" class="switches popup-tabs glass-bkg"><div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div></div>
|
||||
<div id="popup-tabs" class="switches popup-tabs">
|
||||
<div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div>
|
||||
<div class="glass-bkg alone"></div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
export function socialLink(emji, name, handle, url) {
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@ export default function(obj) {
|
|||
name: "download",
|
||||
standalone: true,
|
||||
buttonOnly: true,
|
||||
classes: ["small", "glass-bkg"],
|
||||
classes: ["small"],
|
||||
header: {
|
||||
closeAria: t('AccessibilityGoBack'),
|
||||
emoji: emoji("🐱", 78, 1, 1),
|
||||
|
|
@ -487,7 +487,7 @@ export default function(obj) {
|
|||
name: "error",
|
||||
standalone: true,
|
||||
buttonOnly: true,
|
||||
classes: ["small", "glass-bkg"],
|
||||
classes: ["small"],
|
||||
header: {
|
||||
closeAria: t('AccessibilityGoBack'),
|
||||
title: t('TitlePopupError'),
|
||||
|
|
@ -500,10 +500,10 @@ export default function(obj) {
|
|||
<div id="popup-backdrop" onclick="hideAllPopups()"></div>
|
||||
<div id="home" style="visibility:hidden">
|
||||
${urgentNotice({
|
||||
emoji: "🔗",
|
||||
text: t("UrgentFeatureUpdate71"),
|
||||
emoji: "💖",
|
||||
text: t("UrgentThanks"),
|
||||
visible: true,
|
||||
action: "popup('about', 1, 'changelog')"
|
||||
action: "popup('about', 1, 'donate')"
|
||||
})}
|
||||
<div id="cobalt-main-box" class="center">
|
||||
<div id="logo">${t("AppTitleCobalt")}</div>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
}, {
|
||||
"name": "retweeted video",
|
||||
"url": "https://twitter.com/hugekiwinuts/status/1618671150829309953?s=46&t=gItGzgwGQQJJaJrO6qc1Pg",
|
||||
"url": "https://twitter.com/uwukko/status/1696901469633421344",
|
||||
"params": {},
|
||||
"expected": {
|
||||
"code": 200,
|
||||
|
|
|
|||
Loading…
Reference in a new issue