Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 21:27:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

5.7: ui improvements

Browse Source 
- padding (everywhere) has been slightly reduced to fit in more content.
- padding is now consistent across ui.
- added more info to the "how to save" popup for ios devices.
- crypto wallet press-to-copy buttons now look like buttons.
- improved looks for smallest screens (iphone 5, 5s, se, etc).
This commit is contained in:
wukko
2023-05-18 23:05:29 +06:00
parent 0ea28783be
commit fa4e418e36
8 changed files with 89 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/front/cobalt.css
View File

@ -7,7 +7,8 @@
--padding-1: 0.75rem;
--line-height: 1.65rem;
--red: rgb(255, 0, 61);
--gap: 0.6rem;
--gap: 0.5rem;
--gap-no-icon: 0.6rem;
--rainbow-gradient: linear-gradient(161deg,#ffe454,#ff6964,#fe85e5,#bd26fe,#587ae9,#8ded95);
}
@media (prefers-color-scheme: dark) {
@ -19,6 +20,7 @@
--accent-unhover: rgb(100, 100, 100);
--accent-unhover-2: rgb(110, 110, 110);
--background: rgb(0, 0, 0);
--glow-transparency: 0.45;
}
}
@media (prefers-color-scheme: light) {
@ -30,6 +32,7 @@
--accent-unhover: rgb(190, 190, 190);
--accent-unhover-2: rgb(110, 110, 110);
--background: rgb(255, 255, 255);
--glow-transparency: 0.6;
}
}
[data-theme="dark"] {
@ -40,6 +43,7 @@
--accent-unhover: rgb(100, 100, 100);
--accent-unhover-2: rgb(110, 110, 110);
--background: rgb(0, 0, 0);
--glow-transparency: 0.45;
}
[data-theme="light"] {
--accent: rgb(25, 25, 25);
@ -49,6 +53,7 @@
--accent-unhover: rgb(190, 190, 190);
--accent-unhover-2: rgb(110, 110, 110);
--background: rgb(255, 255, 255);
--glow-transparency: 0.6;
}
html,
body {
@ -83,7 +88,7 @@ a {
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
padding: 0.55rem 1rem 0.55rem 0.7rem;
padding: calc(var(--gap) - 0.1rem) calc(var(--gap)*2 - 0.2rem) calc(var(--gap) - 0.1rem) var(--gap);
width: auto;
margin-right: var(--padding-1);
margin-bottom: var(--padding-1);
@ -223,7 +228,7 @@ button:active,
color: var(--accent);
}
#url-input-area {
background: var(--background);
background: none;
padding: 0 1rem;
width: 100%;
color: var(--accent);
@ -345,7 +350,7 @@ button:active,
}
.changelog-subtitle {
font-size: 1.1rem;
padding-bottom: 0.7rem;
padding-bottom: var(--gap-no-icon);
}
.changelog-banner {
width: 100%;
@ -437,7 +442,7 @@ button:active,
color: var(--accent-unhover-2);
border-bottom: 0.05rem solid var(--accent-unhover-2);
padding-bottom: 0.25rem;
margin-bottom: 1rem;
margin-bottom: calc(var(--gap-no-icon)*1.5);
}
.category-title {
text-align: left;
@ -470,7 +475,7 @@ button:active,
margin-top: 0.5rem;
}
.explanation {
margin-top: 1rem;
margin-top: 0.8rem;
width: 100%;
font-size: 0.8rem;
text-align: left;
@ -481,7 +486,7 @@ button:active,
color: var(--accent-unhover-2);
}
.switch {
padding: 0.7rem;
padding: var(--gap-no-icon);
width: 100%;
text-align: left;
color: var(--accent);
@ -511,6 +516,13 @@ button:active,
overflow-x: scroll;
scrollbar-width: none;
}
.switches .switch {
padding-left: calc(var(--gap-no-icon) + 0.1rem);
padding-right: calc(var(--gap-no-icon) + 0.1rem);
}
#popup-settings .switches .switch {
text-align: center;
}
.autowidth {
width: auto;
}
@ -520,12 +532,12 @@ button:active,
.text-to-copy {
user-select: text;
-webkit-user-select: text;
border: var(--border-15);
background: var(--accent-button-bg);
padding: var(--padding-1);
overflow: auto;
}
#close-button {
max-width: 2.8rem;
max-width: 2.6rem;
margin-left: var(--padding-1);
background: var(--background);
border: var(--border-15);
@ -536,7 +548,7 @@ button:active,
float: right;
position: absolute;
right: 0;
height: 2.8rem;
height: 2.6rem;
}
.popup-tab-content {
display: none;
@ -548,7 +560,7 @@ button:active,
width: 100%;
}
.popup-tabs {
margin-top: 0.8rem;
margin-top: 0.9rem;
}
.emoji {
margin-right: 0.4rem;
@ -664,7 +676,7 @@ button:active,
background: var(--rainbow-gradient);
z-index: -2;
filter: blur(5px);
opacity: 0.65;
opacity: var(--glow-transparency);
}
#about-donate-footer:active::before {
opacity: 0;
@ -763,9 +775,14 @@ button:active,
}
}
@media screen and (max-width: 320px) {
:root {
--gap: 0.38rem;
--gap-no-icon: 0.38rem;
--line-height: 1.2rem;
}
#popup-title {
font-size: 1.3rem;
line-height: 2rem;
font-size: 1.07rem;
line-height: 1.5rem;
}
.footer-button,
#audioMode-false,
@ -779,22 +796,61 @@ button:active,
#paste .emoji {
margin-right: 0;
}
.switch, .checkbox, .category-title, .subtitle, #popup-desc {
font-size: .75rem;
.switch,
.checkbox,
.category-title,
.subtitle,
#popup-desc,
.collapse-title {
font-size: .7rem;
}
.collapse-header {
padding: 0.5rem;
}
#popup-above-title,
#url-input-area {
font-size: 0.6rem;
}
.explanation {
font-size: .77rem;
margin-top: 0.8rem;
font-size: .6rem;
margin-top: 0.5rem;
line-height: 1rem!important;
}
#popup-desc {
line-height: 1.4rem;
line-height: 1.2rem;
font-size: .64rem;
}
.changelog-subtitle, #popup-subtitle {
font-size: 0.9rem!important;
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 #bottom {
@ -804,7 +860,7 @@ button:active,
width: 100%;
}
#footer {
bottom: 4%;
bottom: 4.9%;
transform: translate(-50%, 0%);
}
#footer-buttons {