finish messaging ui
This commit is contained in:
marlonerler
Vendored
+185
-158
@@ -85,30 +85,29 @@ COLORS
|
||||
}
|
||||
}
|
||||
|
||||
/* implementation */
|
||||
/* basic */
|
||||
html {
|
||||
background-color: var(--background);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
menu,
|
||||
aside {
|
||||
background-color: var(--backdrop);
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--layer);
|
||||
}
|
||||
|
||||
.modal > div {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
menu,
|
||||
header {
|
||||
background-color: var(--background-transparent);
|
||||
}
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
/* controls */
|
||||
button,
|
||||
footer,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
@@ -138,10 +137,7 @@ input:checked {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
button.ghost:not(.tile) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* primary button */
|
||||
button.primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--text-on-color);
|
||||
@@ -155,6 +151,10 @@ button.primary:active {
|
||||
background-color: var(--primary-active);
|
||||
}
|
||||
|
||||
/* ghost button */
|
||||
button.ghost:not(.tile) {
|
||||
background-color: transparent;
|
||||
}
|
||||
button.ghost {
|
||||
color: var(--link);
|
||||
}
|
||||
@@ -170,6 +170,7 @@ button.ghost:active {
|
||||
background-color: var(--background-active);
|
||||
}
|
||||
|
||||
/* danger button */
|
||||
button.danger {
|
||||
background-color: var(--danger);
|
||||
color: var(--text-on-color);
|
||||
@@ -188,14 +189,14 @@ SIZES
|
||||
*/
|
||||
:root {
|
||||
/* gap */
|
||||
--grid-gap: 4px;
|
||||
--label-gap: 0.25rem;
|
||||
--label-tile-gap: 0.5rem;
|
||||
--link-gap: 1rem;
|
||||
--control-gap: 1.2rem;
|
||||
--gap-between-tiles: 4px;
|
||||
--gap-in-tab-links: 1rem;
|
||||
--gap-in-controls: 1.2rem;
|
||||
|
||||
/* margin */
|
||||
--label-margin: 1rem;
|
||||
--label-top-padding: 0.25rem;
|
||||
--label-tile-top-padding: 0.5rem;
|
||||
--label-margin-bottom: 1rem;
|
||||
--content-margin: 0.75rem;
|
||||
|
||||
/* padding */
|
||||
@@ -203,13 +204,14 @@ SIZES
|
||||
--control-marker-padding: 0.7rem;
|
||||
--content-padding: 1rem;
|
||||
--modal-padding: 1.25rem;
|
||||
--link-padding-h: 0.8rem;
|
||||
--horizontal-tab-link-padding: 0.8rem;
|
||||
|
||||
/* size */
|
||||
--checkbox-size: 16px;
|
||||
|
||||
--menu-width: 200px;
|
||||
--split-pane-width: 300px;
|
||||
--menu-height-mobile: calc(var(--header-height) + var(--safe-area-bottom));
|
||||
--menu-width-desktop: 200px;
|
||||
--split-pane-width-desktop: 300px;
|
||||
|
||||
--control-height: 42px;
|
||||
--header-height: 48px;
|
||||
@@ -225,42 +227,8 @@ SIZES
|
||||
}
|
||||
|
||||
/*
|
||||
TEXT
|
||||
*/
|
||||
* {
|
||||
font-family: IBM Plex Sans;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: IBM Plex Mono;
|
||||
}
|
||||
|
||||
.secondary,
|
||||
.helper-text,
|
||||
.error-text,
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
label span,
|
||||
.helper-text,
|
||||
.secondary,
|
||||
.tab-link:not([active]) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
TYPE
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: IBM Plex Sans;
|
||||
@@ -303,10 +271,8 @@ textarea {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.modal > div {
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
footer {
|
||||
border-top: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
||||
@@ -322,10 +288,6 @@ hr {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
menu {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
|
||||
label.tile *
|
||||
),
|
||||
@@ -333,7 +295,7 @@ label.tile:has(input:focus),
|
||||
label.tile:has(textarea:focus),
|
||||
textarea:focus:not(label.tile *),
|
||||
[selected] {
|
||||
outline: var(--grid-gap) solid var(--primary);
|
||||
outline: var(--gap-between-tiles) solid var(--primary);
|
||||
}
|
||||
|
||||
/* border-radius */
|
||||
@@ -357,13 +319,14 @@ a,
|
||||
}
|
||||
|
||||
button:not(.tile),
|
||||
footer,
|
||||
input,
|
||||
header,
|
||||
label.inline,
|
||||
.modal,
|
||||
select,
|
||||
textarea,
|
||||
.align-right,
|
||||
.align-center,
|
||||
.tile:not(label) {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -377,12 +340,12 @@ label * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
footer,
|
||||
header,
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
label.inline,
|
||||
main,
|
||||
menu,
|
||||
.flex-column,
|
||||
.flex-row,
|
||||
.modal[open],
|
||||
@@ -415,7 +378,6 @@ main,
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
menu,
|
||||
.flex-column,
|
||||
.modal > div,
|
||||
.tile > div {
|
||||
@@ -424,11 +386,11 @@ menu,
|
||||
|
||||
button,
|
||||
.tile {
|
||||
gap: var(--control-gap);
|
||||
gap: var(--gap-in-controls);
|
||||
}
|
||||
|
||||
.grid {
|
||||
gap: var(--grid-gap);
|
||||
.gap {
|
||||
gap: var(--gap-between-tiles);
|
||||
}
|
||||
|
||||
header,
|
||||
@@ -442,6 +404,7 @@ button,
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
footer,
|
||||
header button,
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
@@ -459,6 +422,13 @@ input[type="radio"],
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
label span,
|
||||
.helper-text,
|
||||
.secondary,
|
||||
.tab-link:not([active]) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* padding, margin, etc */
|
||||
h1,
|
||||
h2,
|
||||
@@ -477,34 +447,29 @@ hr {
|
||||
}
|
||||
|
||||
label:not(.tile) {
|
||||
margin-bottom: var(--label-margin);
|
||||
}
|
||||
|
||||
label:not(.tile) > span:first-child {
|
||||
margin-bottom: var(--label-gap);
|
||||
margin-bottom: var(--label-margin-bottom);
|
||||
}
|
||||
|
||||
label.tile {
|
||||
margin-bottom: var(--grid-gap);
|
||||
margin-bottom: var(--gap-between-tiles);
|
||||
}
|
||||
|
||||
label.tile > span:first-child {
|
||||
margin-top: var(--label-tile-gap);
|
||||
label:not(.tile) span:first-child {
|
||||
margin-top: var(--label-top-padding);
|
||||
}
|
||||
|
||||
menu {
|
||||
padding-top: 10px;
|
||||
label.tile span:first-child {
|
||||
margin-top: var(--label-tile-top-padding);
|
||||
}
|
||||
|
||||
input[type="color"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
label.tile:has(> span.icon) * {
|
||||
input[type="radio"] {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
article > div {
|
||||
padding: calc(var(--header-height) + 20px) var(--content-padding);
|
||||
padding: var(--content-padding);
|
||||
}
|
||||
|
||||
button:not(.tile):not(header *),
|
||||
@@ -513,7 +478,6 @@ select {
|
||||
padding: 0px var(--control-padding);
|
||||
}
|
||||
|
||||
menu h1,
|
||||
textarea,
|
||||
.tile:not(label) {
|
||||
padding: var(--control-padding);
|
||||
@@ -523,8 +487,8 @@ textarea,
|
||||
padding: var(--modal-padding);
|
||||
}
|
||||
|
||||
label.tile {
|
||||
padding: var(--label-gap) 0px;
|
||||
article > div {
|
||||
padding-top: calc(var(--header-height) + var(--content-margin));
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -535,6 +499,12 @@ label.tile:has(> span.icon) {
|
||||
padding-left: var(--control-padding);
|
||||
}
|
||||
|
||||
article > div {
|
||||
padding-bottom: calc(
|
||||
var(--menu-height-mobile) + var(--control-height) + var(--content-padding)
|
||||
);
|
||||
}
|
||||
|
||||
label {
|
||||
text-indent: var(--control-padding);
|
||||
}
|
||||
@@ -549,41 +519,51 @@ label.tile:has(> span.icon) {
|
||||
}
|
||||
|
||||
/* position etc */
|
||||
select + .icon {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
article > div,
|
||||
footer,
|
||||
header,
|
||||
select + .icon {
|
||||
select + .icon,
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal,
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
article,
|
||||
main,
|
||||
input,
|
||||
label {
|
||||
label,
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
article > div,
|
||||
header,
|
||||
.modal {
|
||||
.modal,
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
article > div,
|
||||
footer,
|
||||
header,
|
||||
.modal {
|
||||
.modal,
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
article > div,
|
||||
footer,
|
||||
header,
|
||||
.modal {
|
||||
.modal,
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
@@ -591,8 +571,14 @@ select + .icon {
|
||||
right: var(--control-marker-padding);
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom: var(--menu-height-mobile);
|
||||
}
|
||||
|
||||
article > div,
|
||||
.modal {
|
||||
select + .icon,
|
||||
.modal,
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
@@ -600,17 +586,13 @@ article > div,
|
||||
article,
|
||||
main,
|
||||
select + .icon,
|
||||
.modal > div,
|
||||
.modal main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.modal > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
button:not(.tile):not(header *),
|
||||
footer,
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
select + .icon,
|
||||
@@ -623,20 +605,6 @@ header button {
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
p,
|
||||
.width-content,
|
||||
.modal > div {
|
||||
max-width: var(--max-content-width);
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea,
|
||||
.width-input {
|
||||
max-width: var(--max-input-width);
|
||||
}
|
||||
|
||||
article {
|
||||
min-width: 100%;
|
||||
}
|
||||
@@ -647,6 +615,7 @@ article {
|
||||
|
||||
article,
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
select,
|
||||
@@ -664,22 +633,50 @@ header button {
|
||||
width: var(--header-height);
|
||||
}
|
||||
|
||||
menu {
|
||||
width: var(--menu-width);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
text
|
||||
*/
|
||||
* {
|
||||
font-family: IBM Plex Sans;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: IBM Plex Mono;
|
||||
}
|
||||
|
||||
.secondary,
|
||||
.helper-text,
|
||||
.error-text,
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* text-decoration */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* z-index */
|
||||
footer,
|
||||
header,
|
||||
menu {
|
||||
z-index: 1;
|
||||
@@ -736,22 +733,13 @@ LAYOUT
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
body,
|
||||
.tab-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
body > * {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
|
||||
padding-left: var(--safe-area-left);
|
||||
padding-right: var(--safe-area-right);
|
||||
padding-top: var(--safe-area-top);
|
||||
@@ -759,16 +747,14 @@ main {
|
||||
|
||||
menu {
|
||||
width: 100%;
|
||||
height: calc(var(--header-height) + var(--safe-area-bottom));
|
||||
height: var(--menu-height-mobile);
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
background-color: var(--background-transparent);
|
||||
border-right: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
@@ -777,24 +763,27 @@ menu {
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
|
||||
padding: var(--horizontal-tab-link-padding) var(--control-padding);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0px;
|
||||
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
height: var(--header-height);
|
||||
padding: var(--link-padding-h) var(--control-padding);
|
||||
article > div {
|
||||
padding-bottom: calc(
|
||||
var(--menu-height-mobile) + var(--header-height) + var(--content-padding)
|
||||
);
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
menu,
|
||||
article > div {
|
||||
menu {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -804,6 +793,10 @@ main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article > div {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
@@ -823,17 +816,14 @@ main {
|
||||
|
||||
/* desktop */
|
||||
@media (min-width: 640px) {
|
||||
/* basic */
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
main.split {
|
||||
display: grid;
|
||||
grid-template-columns: var(--split-pane-width) 1fr;
|
||||
/* border, outline, etc */
|
||||
.modal > div {
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
menu,
|
||||
@@ -841,10 +831,47 @@ main {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* size */
|
||||
.modal > div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p,
|
||||
.width-content,
|
||||
.modal > div {
|
||||
max-width: var(--max-content-width);
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea,
|
||||
.width-input {
|
||||
max-width: var(--max-input-width);
|
||||
}
|
||||
|
||||
/* layout */
|
||||
body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
main.split {
|
||||
display: grid;
|
||||
grid-template-columns: var(--split-pane-width-desktop) 1fr;
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
article > div {
|
||||
padding-bottom: calc(var(--content-padding) + var(--control-height));
|
||||
}
|
||||
|
||||
menu {
|
||||
position: static;
|
||||
|
||||
width: var(--menu-width);
|
||||
width: var(--menu-width-desktop);
|
||||
height: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
@@ -857,7 +884,7 @@ main {
|
||||
height: var(--control-height);
|
||||
|
||||
flex-direction: row;
|
||||
gap: var(--link-gap);
|
||||
gap: var(--gap-in-tab-links);
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user