init
This commit is contained in:
nnduc
@@ -0,0 +1,237 @@
|
||||
/* Article */
|
||||
|
||||
header:has(+ article) {
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
article footer {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
article>ul.list.thick:first-child>li>span {
|
||||
align-self: start;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
article>ul.list.thick:first-child>li>span.control {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
article header ul:not(:first-child) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
article footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
article section {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
font-weight: 500;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
article section[dir=rtl] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
article section.limited {
|
||||
display: block;
|
||||
max-height: 60rem;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
mask-image: linear-gradient(to bottom, black calc(100% - 10rem), transparent);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
article section.limited {
|
||||
max-height: 40rem;
|
||||
}
|
||||
}
|
||||
|
||||
article img,
|
||||
article video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
animation: fadeIn 0.2s;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
article pre {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Some CSS to style the quote XHTML generated by Movim */
|
||||
|
||||
article section>div div.quote {
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
padding: 1rem 2rem;
|
||||
margin-bottom: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article section>div div.quote:before,
|
||||
article section>div div.quote:after {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
|
||||
article section>div div.quote ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
article section>div div.quote ul:not(.list):not(.tabs):not(.grid)>li {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article section>div div.quote ul li>* {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
article section>div div.quote li:first-child {
|
||||
flex: 1 75%;
|
||||
padding-right: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
article section>div div.quote li {
|
||||
flex: 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
article section>div div.quote li img {
|
||||
max-height: 10rem;
|
||||
max-width: 100%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
article section>div img.big_picture {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
article section>div img.big_picture:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
article section>div img.active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article section>div div.video_embed {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
/* 16:9 */
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
article section>div div.video_embed iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
article ul li.pic img {
|
||||
max-width: 30rem;
|
||||
max-height: 30rem;
|
||||
}
|
||||
|
||||
article section>div div hr {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Spoiler */
|
||||
|
||||
article input[type=checkbox].spoiler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article input[type=checkbox].spoiler:not(:checked)+section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
article input[type=checkbox].spoiler:not(:checked)+section>div>* {
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
filter: blur(1rem);
|
||||
}
|
||||
|
||||
article section label.spoiler,
|
||||
article input[type=checkbox].spoiler:checked+section label.spoiler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article input[type=checkbox].spoiler+section label.spoiler {
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 5rem);
|
||||
left: calc(50% - 5rem);
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
line-height: 10rem;
|
||||
font-size: 4rem;
|
||||
border-radius: 100%;
|
||||
background-color: var(--movim-accent);
|
||||
color: rgba(var(--movim-font), 0.87);
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
article section label.spoiler:hover {
|
||||
cursor: pointer;
|
||||
font-variation-settings: 'FILL' 1;
|
||||
box-shadow: var(--elevation-2);
|
||||
}
|
||||
|
||||
/* Table */
|
||||
|
||||
.dialog>section table,
|
||||
article table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.dialog>section table tbody tr:nth-child(even),
|
||||
article table tbody tr:nth-child(even) {
|
||||
background-color: rgba(var(--movim-font), 0.05);
|
||||
}
|
||||
|
||||
.dialog>section table td,
|
||||
article table td {
|
||||
padding: 0.5rem;
|
||||
font-size: 1.9rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.dialog>section table th,
|
||||
article table th {
|
||||
padding: 0.5rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
.flex {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex.card {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex.card.large {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
ul.flex li.block {
|
||||
border-radius: 0.65rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
ul.flex li.subheader {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
ul.flex.card li.subheader {
|
||||
margin: -1rem 0;
|
||||
}
|
||||
|
||||
.flex .block:not(.subheader) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex.card .block:not(.subheader) {
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.flex.stacked .block:not(.subheader) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.flex.third {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.flex.fourth {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.flex.fifth {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.flex .block.large,
|
||||
.flex.card .block.large {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.column {
|
||||
column-count: 3;
|
||||
margin: 1rem 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.column > * {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) and (max-width: 900px) {
|
||||
.flex.third {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex.fourth {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.flex.fifth {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.column {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.flex,
|
||||
.flex.flex.third {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.flex.fourth {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex.flex.fifth {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.column {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
|
||||
ul.flex.gallery li.block:not(.subheader) {
|
||||
min-height: 25rem;
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block.story {
|
||||
width: 10rem;
|
||||
min-height: 0;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block p a.node,
|
||||
ul.flex.gallery li.block > img + span,
|
||||
ul.flex.gallery li.block > span.primary,
|
||||
ul.flex.gallery li.block > span.control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block div {
|
||||
flex: initial;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
z-index: 0; /* It seems that the img mask is applied on the div */
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block img.main {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
height: initial;
|
||||
max-height: 35rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
max-width: calc(100% + 3rem);
|
||||
width: calc(100% + 3rem);
|
||||
filter: none;
|
||||
mask-image: linear-gradient(to bottom, black calc(100% - 20rem), transparent);
|
||||
margin-bottom: -10rem;
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block.story img.main {
|
||||
max-height: 100%;
|
||||
max-width: calc(100% + 1rem);
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block img.main:after {
|
||||
content: attr(alt);
|
||||
}
|
||||
|
||||
ul.flex.gallery li.block.embed:before {
|
||||
font-family: 'Material Symbols';
|
||||
content: "\e02c";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 3rem;
|
||||
line-height: 5rem;
|
||||
opacity: 0.75;
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/* Card */
|
||||
|
||||
.card img.main,
|
||||
.card div.main {
|
||||
position: absolute;
|
||||
width: calc(100% + 2rem);
|
||||
height: calc(100% + 2rem);
|
||||
max-width: calc(100% + 2rem);
|
||||
object-fit: cover;
|
||||
left: -1rem;
|
||||
top: -1rem;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.card:not(.flex) > li:not(.subheader),
|
||||
.card:not(.flex) > div.block {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card > .block:focus:not(:hover) {
|
||||
outline: 2px solid var(--movim-accent);
|
||||
}
|
||||
|
||||
.card img.main {
|
||||
filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.card i.main {
|
||||
position: absolute;
|
||||
font-size: 18rem;
|
||||
opacity: 0.2;
|
||||
filter: blur(0.5rem);
|
||||
right: -5rem;
|
||||
bottom: -8rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card li > div > p > span.info {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card li.block.color {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
|
||||
.card li[onclick]:focus-within {
|
||||
outline: 3px solid var(--movim-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.card li[onclick] span.primary a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.card > .block:not(.subheader):not(.simple) {
|
||||
animation: fadeIn 0.3s;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card.noanim > .block:not(.subheader):not(.simple) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.card > form.block {
|
||||
padding: 2rem;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card:not(.gallery) > .block.ticket div {
|
||||
display: flex;
|
||||
justify-content:safe;
|
||||
flex-direction: column;
|
||||
height: calc(calc(100% - 2rem));
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.card:not(.gallery) > .block.ticket div p:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.card.shadow > .block:not(.subheader):not(.simple) {
|
||||
transition: background 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: var(--elevation-1);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card.shadow > .block:not(.subheader):not(.simple):hover {
|
||||
box-shadow: var(--elevation-2);
|
||||
}
|
||||
|
||||
.card.shadow > .block:not(.subheader):not(.simple):active {
|
||||
box-shadow: var(--elevation-0);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.chip {
|
||||
display: inline-block;
|
||||
line-height: 4rem;
|
||||
padding: 0 2rem;
|
||||
font-size: 1.75rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
color: rgb(var(--movim-font));
|
||||
background-color: rgba(var(--movim-element-action), 0.05);
|
||||
transition: background 0.3s ease;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chip.thin {
|
||||
line-height: 3rem;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p+p>.chip:first-child,
|
||||
*:not(p):not(h4)>.chip:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p+p>.chip:last-child,
|
||||
*:not(p):not(h4)>.chip:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.chip:has(i:not(.on_mobile)) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.chip.thin:has(i) {
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.chip i {
|
||||
margin: 0 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.chip.thin i {
|
||||
margin: 0 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.chip i.spin,
|
||||
.chip i.on_mobile {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chip.oppose {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.chip.active:hover {
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
box-shadow: var(--elevation-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chip.active:focus {
|
||||
background-color: rgba(var(--movim-element-action), 0.4);
|
||||
box-shadow: var(--elevation-0);
|
||||
}
|
||||
|
||||
.chip.outline {
|
||||
outline: 1px solid rgba(var(--movim-font), 0.12);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.chip.enabled {
|
||||
background-color: rgba(var(--movim-element-action), 0.4);
|
||||
box-shadow: var(--elevation-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chip img {
|
||||
margin-bottom: -0.7rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: -1.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
/* Color */
|
||||
|
||||
body {
|
||||
--movim-background-main: 238, 238, 238;
|
||||
--movim-background: 255, 255, 255;
|
||||
--movim-gray: 35, 35, 35;
|
||||
--movim-font: 0, 0, 0;
|
||||
--movim-header-font: 200, 200, 200;
|
||||
--movim-element-action: 153, 153, 153;
|
||||
scrollbar-color: rgba(var(--movim-font), 0.2) transparent;
|
||||
--movim-shadow: 0, 0, 0;
|
||||
--movim-shadow-strength: 1;
|
||||
}
|
||||
|
||||
/* Night mode, using an enforced class and with the browser media-query, the two following
|
||||
sections are therefore copy pasted */
|
||||
|
||||
body.nightmode {
|
||||
--movim-background-main: 20, 26, 33;
|
||||
--movim-background: 25, 32, 40;
|
||||
--movim-gray: var(--movim-background-main);
|
||||
--movim-font: 255, 255, 255;
|
||||
--movim-element-action: 74, 86, 99;
|
||||
scrollbar-color: rgba(var(--movim-font), 0.1) transparent;
|
||||
--movim-shadow-strength: 1.2;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--movim-background-main: 20, 26, 33;
|
||||
--movim-background: 25, 32, 40;
|
||||
--movim-gray: var(--movim-background-main);
|
||||
--movim-font: 255, 255, 255;
|
||||
--movim-element-action: 74, 86, 99;
|
||||
scrollbar-color: rgba(var(--movim-font), 0.1) transparent;
|
||||
--movim-shadow-strength: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
body>*,
|
||||
.context_menu,
|
||||
.icon-text,
|
||||
.tabs a,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
color: rgba(var(--movim-font), 0.87);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
select::placeholder {
|
||||
color: rgba(var(--movim-font), 0.67);
|
||||
}
|
||||
|
||||
ul.list li.divided:after,
|
||||
*.divided:not(.spaced):not(li)>*:not(:last-child):not(.subheader):after,
|
||||
*.divided.spaced>*:not(:last-child):after,
|
||||
hr:not(.clear),
|
||||
.card>.block:not(.subheader):not(.simple),
|
||||
*.divided>*:not(:last-child) {
|
||||
border-color: rgba(var(--movim-font), 0.12);
|
||||
}
|
||||
|
||||
ul.list li span.control.divided:before {
|
||||
border-color: rgba(var(--movim-font), 0.128);
|
||||
}
|
||||
|
||||
label,
|
||||
span.info,
|
||||
li div.bubble:after,
|
||||
ul.list li>div>p>span.second,
|
||||
table tr th {
|
||||
color: rgba(var(--movim-font), 0.54);
|
||||
}
|
||||
|
||||
ul.list li.color>div>p>span.second {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
body,
|
||||
#drawer .card>.block:not(.subheader):not(.simple):not(.color) {
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
}
|
||||
|
||||
.drawer,
|
||||
.dialog,
|
||||
ul.context_menu,
|
||||
ul>li.date>div>p,
|
||||
.card>.block:not(.subheader):not(.simple):not(.color) {
|
||||
background-color: rgb(var(--movim-background));
|
||||
}
|
||||
|
||||
main>header a,
|
||||
.icon:not(.placeholder):not(.active) a,
|
||||
.color input {
|
||||
color: rgb(var(--movim-font));
|
||||
}
|
||||
|
||||
.button.color,
|
||||
.color,
|
||||
span.icon span.counter,
|
||||
span.icon[data-counter]:after,
|
||||
span.icon.composing:after,
|
||||
form>div .checkbox>input[type="checkbox"]:checked:before,
|
||||
form>div .radio>input[type="radio"]:checked+label {
|
||||
border-color: var(--movim-accent);
|
||||
background-color: var(--movim-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
span.icon span.counter:not(.alt) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
span.icon span.counter.alt {
|
||||
color: var(--movim-font);
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
}
|
||||
|
||||
/* Elements */
|
||||
|
||||
ul li.action>div.action,
|
||||
ul li.action>form>div.action,
|
||||
.button.dorange,
|
||||
.icon.dorange,
|
||||
span.resource.dorange {
|
||||
color: var(--p-dorange)
|
||||
}
|
||||
|
||||
li div.bubble.moderator:after,
|
||||
ul li div>p>span.moderator,
|
||||
.button.orange,
|
||||
.icon.orange,
|
||||
span.resource.orange {
|
||||
color: var(--p-orange);
|
||||
}
|
||||
|
||||
.button.amber,
|
||||
.icon.anber,
|
||||
span.resource.amber {
|
||||
color: var(--p-amber)
|
||||
}
|
||||
|
||||
.button.yellow,
|
||||
.icon.yellow,
|
||||
span.resource.yellow {
|
||||
color: var(--p-yellow);
|
||||
}
|
||||
|
||||
.button.lime,
|
||||
.icon.lime,
|
||||
span.resource.lime {
|
||||
color: var(--p-lime)
|
||||
}
|
||||
|
||||
.button.lgreen,
|
||||
.icon.lgreen,
|
||||
span.resource.lgreen {
|
||||
color: var(--p-lgreen);
|
||||
}
|
||||
|
||||
.button.green,
|
||||
.icon.green,
|
||||
span.resource.green {
|
||||
color: var(--p-green);
|
||||
}
|
||||
|
||||
.button.teal,
|
||||
.icon.teal,
|
||||
span.resource.teal {
|
||||
color: var(--p-teal)
|
||||
}
|
||||
|
||||
.button.cyan,
|
||||
.icon.cyan,
|
||||
span.resource.cyan {
|
||||
color: var(--p-cyan)
|
||||
}
|
||||
|
||||
.button.lblue,
|
||||
.icon.lblue,
|
||||
span.resource.lblue {
|
||||
color: var(--p-lblue)
|
||||
}
|
||||
|
||||
.button.blue,
|
||||
.icon.blue,
|
||||
span.resource.blue {
|
||||
color: var(--p-blue);
|
||||
}
|
||||
|
||||
.button.red,
|
||||
.icon.red,
|
||||
span.resource.red,
|
||||
p.encrypted.error {
|
||||
color: var(--p-red);
|
||||
}
|
||||
|
||||
.button.indigo,
|
||||
.icon.indigo,
|
||||
span.resource.indigo {
|
||||
color: var(--p-indigo);
|
||||
}
|
||||
|
||||
.button.dpurple,
|
||||
.icon.dpurple,
|
||||
span.resource.dpurple {
|
||||
color: var(--p-dpurple);
|
||||
}
|
||||
|
||||
.button.purple,
|
||||
.icon.purple,
|
||||
span.resource.purple {
|
||||
color: var(--p-purple);
|
||||
}
|
||||
|
||||
.button.pink,
|
||||
.icon.pink,
|
||||
span.resource.pink {
|
||||
color: var(--p-pink)
|
||||
}
|
||||
|
||||
.button.black,
|
||||
.icon.black,
|
||||
span.resource.black {
|
||||
color: var(--p-black);
|
||||
}
|
||||
|
||||
.button.gray,
|
||||
.icon.gray,
|
||||
span.resource.gray {
|
||||
color: var(--p-gray);
|
||||
}
|
||||
|
||||
.color {
|
||||
color: white;
|
||||
background-color: var(--movim-accent);
|
||||
border-color: var(--movim-accent)
|
||||
}
|
||||
|
||||
.color.gray {
|
||||
color: white;
|
||||
background-color: var(--p-gray);
|
||||
border-color: var(--p-gray)
|
||||
}
|
||||
|
||||
.color.dorange {
|
||||
color: white;
|
||||
background-color: var(--p-dorange);
|
||||
border-color: var(--p-dorange)
|
||||
}
|
||||
|
||||
.color.orange {
|
||||
color: white;
|
||||
background-color: var(--p-orange);
|
||||
border-color: var(--p-orange)
|
||||
}
|
||||
|
||||
.color.amber {
|
||||
color: white;
|
||||
background-color: var(--p-amber);
|
||||
border-color: var(--p-amber)
|
||||
}
|
||||
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.away:after,
|
||||
.color.yellow {
|
||||
color: white;
|
||||
background-color: var(--p-yellow);
|
||||
border-color: var(--p-yellow)
|
||||
}
|
||||
|
||||
.color.lime {
|
||||
color: white;
|
||||
background-color: var(--p-lime);
|
||||
border-color: var(--p-lime)
|
||||
}
|
||||
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.chat:after,
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.online:after,
|
||||
.color.lgreen {
|
||||
color: white;
|
||||
background-color: var(--p-lgreen);
|
||||
border-color: var(--p-lgreen)
|
||||
}
|
||||
|
||||
.color.green {
|
||||
color: white;
|
||||
background-color: var(--p-green);
|
||||
border-color: var(--p-green)
|
||||
}
|
||||
|
||||
.color.teal {
|
||||
color: white;
|
||||
background-color: var(--p-teal);
|
||||
border-color: var(--p-teal)
|
||||
}
|
||||
|
||||
.color.cyan {
|
||||
color: white;
|
||||
background-color: var(--p-cyan);
|
||||
border-color: var(--p-cyan)
|
||||
}
|
||||
|
||||
.color.lblue {
|
||||
color: white;
|
||||
background-color: var(--p-lblue);
|
||||
border-color: var(--p-lblue)
|
||||
}
|
||||
|
||||
.color.blue {
|
||||
color: white;
|
||||
background-color: var(--p-blue);
|
||||
border-color: var(--p-blue)
|
||||
}
|
||||
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.server_error:after,
|
||||
.color.indigo {
|
||||
color: white;
|
||||
background-color: var(--p-indigo);
|
||||
border-color: var(--p-indigo)
|
||||
}
|
||||
|
||||
.color.dpurple {
|
||||
color: white;
|
||||
background-color: var(--p-dpurple);
|
||||
border-color: var(--p-dpurple)
|
||||
}
|
||||
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.xa:after,
|
||||
.color.purple {
|
||||
color: white;
|
||||
background-color: var(--p-purple);
|
||||
border-color: var(--p-purple)
|
||||
}
|
||||
|
||||
.color.pink {
|
||||
color: white;
|
||||
background-color: var(--p-pink);
|
||||
border-color: var(--p-pink)
|
||||
}
|
||||
|
||||
span.icon:not(.composing):not([data-counter]):not(.story).status.dnd:after,
|
||||
.color.red {
|
||||
color: white;
|
||||
background-color: var(--p-red);
|
||||
border-color: var(--p-red)
|
||||
}
|
||||
|
||||
.color.black {
|
||||
color: white;
|
||||
background-color: var(--p-black);
|
||||
border-color: var(--p-black)
|
||||
}
|
||||
|
||||
.color.none {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.color.transparent {
|
||||
color: white;
|
||||
backdrop-filter: blur(1rem);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.color.semi {
|
||||
color: rgba(var(--movim-font), 0.87);
|
||||
background-color: rgba(var(--movim-background-main), 0.75);
|
||||
}
|
||||
|
||||
form>div>input:focus:invalid,
|
||||
form>div>input:focus:required {
|
||||
box-shadow: 0px 2px 0px var(--p-red);
|
||||
}
|
||||
|
||||
form>div>input:invalid,
|
||||
form input:focus:invalid+label,
|
||||
form textarea:focus:invalid+label {
|
||||
color: var(--p-red);
|
||||
}
|
||||
|
||||
ul.list li>div>p:not(:first-of-type):not(.main):not(.brief) {
|
||||
color: rgba(var(--movim-font), 0.6);
|
||||
}
|
||||
|
||||
ul.list li.color>div>p:not(:first-of-type):not(.main) {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
header.big ul.list li>div>p:not(:first-of-type):not(.main),
|
||||
div.snackbar ul.list li>div>p:not(:first-of-type):not(.main) {
|
||||
color: rgb(var(--movim-header-font));
|
||||
}
|
||||
|
||||
header.big ul.list li>div>p>span.second {
|
||||
color: rgba(var(--movim-header-font), 0.9);
|
||||
}
|
||||
|
||||
/* Default color : indigo */
|
||||
|
||||
input[type=button].color,
|
||||
header.big,
|
||||
mark,
|
||||
main>header {
|
||||
background-color: var(--movim-accent);
|
||||
border-color: var(--movim-accent);
|
||||
}
|
||||
|
||||
/* Accent color */
|
||||
|
||||
.tabs,
|
||||
.button,
|
||||
header:not(.big) .icon a,
|
||||
a {
|
||||
color: var(--movim-accent);
|
||||
border-color: var(--movim-accent);
|
||||
}
|
||||
|
||||
span.control.icon a > i,
|
||||
span.primary.icon a > i {
|
||||
color: rgba(var(--movim-font), 0.68);
|
||||
}
|
||||
|
||||
a.normal {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
form>div .checkbox:before {
|
||||
background-color: var(--movim-accent);
|
||||
}
|
||||
|
||||
form input:focus:not(:invalid)+label,
|
||||
form textarea:focus:not(:invalid)+label {
|
||||
color: var(--movim-accent);
|
||||
}
|
||||
|
||||
form>div .select:has(:focus),
|
||||
form input:focus:not(:invalid):not(.button),
|
||||
form textarea:focus:not(:invalid):not(.button) {
|
||||
box-shadow: 0px 2px 0px var(--movim-accent);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
left: calc(50% - 30rem);
|
||||
height: initial;
|
||||
width: 60rem;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: var(--elevation-3);
|
||||
border-radius: 2rem;
|
||||
z-index: 4;
|
||||
box-sizing: border-box;
|
||||
animation: zoom .25s ease-in-out;
|
||||
}
|
||||
|
||||
.dialog:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog.scroll {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.dialog>section {
|
||||
max-height: calc(90vh - 7.2rem);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dialog>section>*:first-child:not(ul):not(header) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.dialog>section table {
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
|
||||
.dialog>section>form>label,
|
||||
.dialog>section>h3,
|
||||
.dialog>section>h4,
|
||||
.dialog>section form>div:not(:has(ul.list)) {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.dialog>footer {
|
||||
text-align: right;
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dialog>section h3+h4 {
|
||||
opacity: 0.7;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dialog>section form>p {
|
||||
margin-top: 1rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* List specific */
|
||||
.dialog>section form ul.list li>.primary {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 34rem) {
|
||||
.dialog {
|
||||
width: calc(100% - 6rem);
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
left: 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
body {
|
||||
--elevation-flat: 0px 1px 1px 0px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength)));
|
||||
--elevation-0: 0px 0px 0px 0px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 0px 0px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 0px 0px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-1: 0px 2px 1px -1px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 1px 1px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 3px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-2: 0px 3px 1px -2px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 2px 2px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 5px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-3: 0px 3px 3px -2px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 3px 4px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 8px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-4: 0px 2px 4px -1px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 4px 5px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 10px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-5: 0px 3px 5px -1px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 5px 8px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 14px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-6: 0px 3px 5px -1px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 6px 10px 0px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 1px 18px 0px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-7: 0px 4px 5px -2px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 7px 10px 1px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 2px 16px 1px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-8: 0px 5px 5px -3px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 8px 10px 1px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 3px 14px 2px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-9: 0px 5px 6px -3px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 9px 12px 1px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 3px 16px 2px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-10: 0px 6px 6px -3px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 10px 14px 1px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 4px 18px 3px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-11: 0px 6px 7px -4px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 11px 15px 1px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 4px 20px 3px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
--elevation-12: 0px 7px 8px -4px rgba(var(--movim-shadow), calc(0.2 * var(--movim-shadow-strength))), 0px 12px 17px 2px rgba(var(--movim-shadow), calc(0.14 * var(--movim-shadow-strength))), 0px 5px 22px 4px rgba(var(--movim-shadow), calc(0.12 * var(--movim-shadow-strength)));
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
/* Material Symbols */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Symbols';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
/** https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0 **/
|
||||
src: url(../fonts/MaterialSymbols/MaterialSymbols-Outlined.woff2?3) format('woff2');
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
font-family: 'Material Symbols';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: normal;
|
||||
direction: ltr;
|
||||
vertical-align: bottom;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-moz-font-feature-settings: 'liga';
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.material-symbols.fill {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
.material-symbols.blink {
|
||||
animation: blink 3s infinite;
|
||||
}
|
||||
|
||||
.material-symbols.flip-hor {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.material-symbols.flip-vert {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.material-symbols.flip-hor.flip-vert {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
/* Roboto */
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/Roboto/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
|
||||
.emoji {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 0.5rem;
|
||||
margin-bottom: -0.7rem;
|
||||
}
|
||||
|
||||
ul.list p+p .emoji {
|
||||
margin-bottom: -0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.emoji.medium {
|
||||
width: auto;
|
||||
height: 3.5rem;
|
||||
margin: 0;
|
||||
margin-bottom: -1.2rem;
|
||||
}
|
||||
|
||||
.emoji.large {
|
||||
width: 4.5rem;
|
||||
height: 5rem;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,512 @@
|
||||
/* Form */
|
||||
|
||||
input {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
li>form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
form>div:not(.clear):not(.control) {
|
||||
min-height: 9rem;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form>div.compact:not(.clear):not(.control) {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
form>div label {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: calc(100% - 3rem);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
form>div textarea[required]+label:after,
|
||||
form>div input[required]:not([type=checkbox])+label:after {
|
||||
content: '✱';
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
form>div.icon {
|
||||
padding-left: 9rem;
|
||||
}
|
||||
|
||||
form>div textarea {
|
||||
field-sizing: content;
|
||||
border: none;
|
||||
resize: none;
|
||||
line-height: 3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form>div .select:has(option:nth-child(2)):after {
|
||||
font-family: 'Material Symbols';
|
||||
content: "\e5c5";
|
||||
display: block;
|
||||
font-size: 4rem;
|
||||
color: rgba(var(--movim-font), 0.75);
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
pointer-events: none;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
form>div .select:hover:after {
|
||||
color: rgba(var(--movim-font), 0.6);
|
||||
}
|
||||
|
||||
form>div .select select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
padding-bottom: 1rem;
|
||||
mask-image: linear-gradient(to right, black calc(100% - 15rem), transparent);
|
||||
}
|
||||
|
||||
*[dir="rtl"] form>div .select select {
|
||||
mask-image: linear-gradient(to left, black calc(100% - 15rem), transparent);
|
||||
}
|
||||
|
||||
form>div .select:not(:has(option:nth-child(2))) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Placeholders to mimic FF */
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
transition: background-color 0s 50000s;
|
||||
-webkit-text-fill-color: rgba(var(--movim-font), 0.87) !important;
|
||||
}
|
||||
|
||||
/* Webkit weird CSS, sic */
|
||||
|
||||
form>div .select select,
|
||||
form>div input:not([type=submit]),
|
||||
form>div textarea {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
form>div .select select option,
|
||||
form>div .select select optgroup {
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
}
|
||||
|
||||
form>div .select,
|
||||
form>div input:not([type=submit]),
|
||||
form>div textarea {
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
padding-top: 4rem;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
-webkit-appearance: none;
|
||||
/* iOS */
|
||||
border-radius: 0;
|
||||
/* iOS */
|
||||
overflow: hidden;
|
||||
/* Fixme */
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
form>div .select,
|
||||
form>div input:not([type=submit]),
|
||||
form>div textarea {
|
||||
box-shadow: 0px 1px 0px rgba(var(--movim-font), 0.12);
|
||||
}
|
||||
|
||||
form>div>img,
|
||||
form>div>p {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
form>div .select {
|
||||
position: relative;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
form>div.compact>.select,
|
||||
form>div.compact>input:not([type=submit]),
|
||||
form>div.compact>textarea {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
/* Supporting text */
|
||||
ul.list li div span.supporting,
|
||||
form div>span.supporting {
|
||||
line-height: 2.25rem;
|
||||
font-size: 1.5rem;
|
||||
color: rgba(var(--movim-font), 0.60);
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Webkit hack */
|
||||
form>div input:not([type=submit]):-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 50px transparent inset;
|
||||
}
|
||||
|
||||
form>div input:not([type=submit]):-webkit-autofill:focus {
|
||||
box-shadow: none;
|
||||
-webkit-text-fill-color: rgba(var(--movim-font), 0.87);
|
||||
}
|
||||
|
||||
/* File */
|
||||
|
||||
input[type=file] {
|
||||
max-width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Checkbox element */
|
||||
|
||||
form>div .checkbox>input[type="checkbox"],
|
||||
form>div .radio>input[type="radio"] {
|
||||
display: inline;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
form>div .checkbox {
|
||||
position: relative;
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
margin-top: calc(50% - 2rem);
|
||||
direction: ltr;
|
||||
left: -1rem;
|
||||
}
|
||||
|
||||
form>div ul.list .control .checkbox {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0.3rem solid rgba(var(--movim-font), 0.2);
|
||||
background-color: rgba(var(--movim-font), 0.12);
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s ease;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]:before {
|
||||
border-radius: 4rem;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]:focus:before {
|
||||
outline: 3px solid var(--movim-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]+label {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
background-color: rgba(var(--movim-font), 0.2);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 2rem;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
transition: left 0.3s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]+label i {
|
||||
vertical-align: middle;
|
||||
color: rgba(var(--movim-font), 0.5);
|
||||
line-height: 1.75em;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
form>div .checkbox:hover>input[type="checkbox"]+label {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 0 1.75rem rgba(var(--movim-font), 0.05);
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]:checked+label {
|
||||
color: white;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
left: 1.25em;
|
||||
top: 0.25em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
form>div .checkbox>input[type="checkbox"]:checked+label i {
|
||||
color: var(--movim-accent);
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
|
||||
form>div .radio>input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 2rem;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
transition: box-shadow 0.1s ease;
|
||||
margin: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
form>div .radio>input[type="radio"]:focus+label {
|
||||
outline: 3px solid var(--movim-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
form>div .radio>input[type="radio"]+label:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(var(--movim-font), 0.1);
|
||||
box-shadow: 0 0 0 1.5rem rgba(var(--movim-font), 0.1);
|
||||
}
|
||||
|
||||
form>div .radio>input[type="radio"]:checked+label {
|
||||
box-shadow: inset 0 0 0 0.4rem rgb(var(--movim-background-main));
|
||||
|
||||
}
|
||||
|
||||
form>div .radio>input[type="radio"]:checked+label:hover {
|
||||
box-shadow: inset 0 0 0rem 0.4rem rgb(var(--movim-background-main)), 0 0 0 1.55rem rgba(var(--movim-font), 0.05);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
|
||||
form>div input:disabled,
|
||||
form>div input:disabled+label,
|
||||
form>div select:disabled,
|
||||
form>div select:disabled+label,
|
||||
form>div textarea:disabled,
|
||||
form>div textarea:disabled+label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Readonly */
|
||||
|
||||
form>div input[readonly],
|
||||
form>div textarea[readonly] {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
||||
.button.oppose {
|
||||
float: inline-end;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.button.inactive {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 3px solid var(--movim-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.button,
|
||||
input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
/* iOS */
|
||||
min-width: 5rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
margin: 0.75rem 0.25rem;
|
||||
border-radius: 3rem;
|
||||
padding: 0 2rem;
|
||||
border: 0;
|
||||
transition: background 0.3s ease,
|
||||
box-shadow 0.3s ease,
|
||||
border-radius 0.2s var(--standard-easing),
|
||||
filter 0.2s var(--standard-easing);
|
||||
background-image: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button.color {
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
.button.color:hover {
|
||||
box-shadow: var(--elevation-2);
|
||||
}
|
||||
|
||||
p>.button,
|
||||
p>input[type=button] {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.button.narrow {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.button:not(.color),
|
||||
input[type=button]:not(.color) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
input[type=button]:active {
|
||||
filter: saturate(0.8) brightness(0.9);
|
||||
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.23), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.button.flat,
|
||||
input[type=button].flat {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
a.button:link:hover,
|
||||
a.button:visited:hover,
|
||||
input[type=button]:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.button.flat:not(.color):hover,
|
||||
.button.flat:not(.color).on,
|
||||
input[type=button].flat:not(.color):hover {
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
input[type=button]:focus {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button.flat:not(.color):focus,
|
||||
input[type=button].flat:not(.color):focus {
|
||||
background-color: rgba(var(--movim-element-action), 0.4);
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
.button.action {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
min-height: 0rem;
|
||||
min-width: 0rem;
|
||||
line-height: 7rem;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
z-index: 2;
|
||||
font-size: 3.5rem;
|
||||
animation: zoom 0.3s;
|
||||
padding: 0;
|
||||
border-radius: 2.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button.action.small {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
body>nav.active~main .button.action,
|
||||
body>div.dialog:not(:empty)~main .button.action,
|
||||
body>div.drawer:not(:empty):not(.empty)~main .button.action {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.button.action {
|
||||
box-shadow: var(--elevation-3);
|
||||
}
|
||||
|
||||
.button.action:hover {
|
||||
box-shadow: var(--elevation-4);
|
||||
}
|
||||
|
||||
.button.action,
|
||||
.button.action>i {
|
||||
transition: all 0.4s ease 0s;
|
||||
}
|
||||
|
||||
.button.action.active>i {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
ul.list li div>.button {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
li.action div.action .button {
|
||||
margin: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button:not(.action) i {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.snackbar#status_websocket:not(.hide)~main>section#sidebar~* .button.action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
main>div:first-child:nth-last-child(2)+div .button.action {
|
||||
right: calc(75% - 3rem);
|
||||
}
|
||||
|
||||
*[dir="rtl"] main>div:first-child:nth-last-child(2)+div .button.action {
|
||||
right: auto;
|
||||
left: calc(75% - 3rem);
|
||||
}
|
||||
|
||||
section#sidebar~* .button.action {
|
||||
right: calc(50% - 21rem);
|
||||
}
|
||||
|
||||
*[dir="rtl"] section#sidebar~* .button.action {
|
||||
right: auto;
|
||||
left: calc(50% - 21rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1680px) {
|
||||
main>div:first-child:nth-last-child(2)+div .button.action {
|
||||
right: calc(63.75% + 2rem);
|
||||
}
|
||||
|
||||
section#sidebar~* .button.action {
|
||||
right: calc(42.5% - 17rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/* Grid */
|
||||
ul.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.grid > li {
|
||||
flex: 0 1 25%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(var(--movim-gray), 0.3);
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
ul.grid.third > li {
|
||||
flex: 0 1 33.33%;
|
||||
}
|
||||
|
||||
ul.grid.active > li:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
ul.grid.active > li i {
|
||||
font-size: 4rem;
|
||||
color: white;
|
||||
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
ul.grid.active > li span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
line-height: 2.5rem;
|
||||
border-radius: 0.3rem 0 0;
|
||||
}
|
||||
|
||||
ul.grid > li:after {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
header.big {
|
||||
background-size: cover, cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header.big span.primary.icon a i,
|
||||
header.big span.control.icon a i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.big.top {
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
padding-top: 15rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
/* Icon */
|
||||
|
||||
span.icon {
|
||||
font-size: 3rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
span.icon.spin,
|
||||
i.spin {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
span.icon.shake,
|
||||
i.shake {
|
||||
animation: shake 1s linear infinite;
|
||||
}
|
||||
|
||||
span.icon img {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
span.icon.r1 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
span.icon.r2 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
span.icon.r3 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
/*span.icon.top {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
line-height: 10rem;
|
||||
display: block;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span.icon.top.preview {
|
||||
height: 25rem;
|
||||
}*/
|
||||
|
||||
span.icon.primary.thumb,
|
||||
span.icon.control.thumb {
|
||||
width: 7rem;
|
||||
line-height: 7rem;
|
||||
margin-right: -1.5rem;
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
span.icon.primary.thumb {
|
||||
margin-left: -1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
span.primary.overflow {
|
||||
margin-left: -4.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
span.icon.bubble {
|
||||
border-radius: 5rem;
|
||||
font-size: 2.25rem;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
span.icon.bubble img:not(.emoji) {
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
span.icon.bubble.space:not(:has(img)),
|
||||
span.icon.bubble.space img:not(.emoji) {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
span.icon.bubble>i,
|
||||
span.icon.bubble>a>i {
|
||||
font-size: 3rem;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
ul.list li span.icon.small {
|
||||
height: 4rem;
|
||||
line-height: 3.5rem;
|
||||
font-size: 0;
|
||||
/* Only display the first letter */
|
||||
flex: 0 0 4rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
ul.list li span.icon.small img.emoji {
|
||||
width: 1.75rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
ul.list li span.icon.small:not(.bubble)>i {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span.icon.small.bubble:first-letter,
|
||||
span.icon.small.bubble>i,
|
||||
span.icon.small.bubble>a>i {
|
||||
font-size: 2.25rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
span.icon.bubble.status,
|
||||
span.icon.bubble.stories {
|
||||
border-radius: 0;
|
||||
mask-size: 100%;
|
||||
mask-origin: content-box;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
span.icon.bubble.stories {
|
||||
mask-origin: fill-box;
|
||||
background: linear-gradient(to top right, var(--p-orange), var(--p-pink));
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
span.icon.bubble.stories.seen {
|
||||
background: none;
|
||||
background-color: rgba(var(--movim-font), 0.25);
|
||||
}
|
||||
|
||||
span.icon.bubble.stories:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
|
||||
span.icon.bubble.status:not(.offline):not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask.svg);
|
||||
-webkit-mask-origin: unset;
|
||||
mask-origin: unset;
|
||||
}
|
||||
|
||||
span.icon.bubble.stories.composing,
|
||||
span.icon.bubble.stories[data-counter]:not(.composing):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_notifs_stories.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.stories:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_stories.svg);
|
||||
-webkit-mask-origin: unset;
|
||||
mask-origin: unset;
|
||||
}
|
||||
|
||||
span.icon.bubble.status.online.stories:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_stories_online.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.dnd:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_dnd.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.dnd.stories:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_dnd_stories.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.away:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_away.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.away.stories:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_away_stories.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.xa:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_xa.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.xa.stories:not(.composing):not([data-counter]):not(.location) {
|
||||
mask-image: url(../img/avatar_mask_xa_stories.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.location {
|
||||
mask-image: url(../img/avatar_mask_location.svg);
|
||||
}
|
||||
|
||||
span.icon.bubble.status.location.stories {
|
||||
mask-image: url(../img/avatar_mask_location_stories.svg);
|
||||
}
|
||||
|
||||
span.icon span.counter,
|
||||
span.icon[data-counter]:after,
|
||||
span.icon.composing:after,
|
||||
span.icon.status:after {
|
||||
content: '';
|
||||
display: block;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
right: calc(50% - 2.75rem);
|
||||
top: calc(50% + 0.5rem);
|
||||
position: absolute;
|
||||
transition: border-radius 0.25s var(--standard-easing);
|
||||
border-radius: 2em;
|
||||
background-color: rgb(var(--movim-element-action));
|
||||
box-shadow: var(--elevation-0);
|
||||
}
|
||||
|
||||
span.icon.status.offline:not([data-counter]):after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.icon span.counter,
|
||||
span.icon[data-counter]:after,
|
||||
span.icon.composing:after {
|
||||
padding: 0 0.25rem;
|
||||
min-width: 1.5rem;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
/* Counter */
|
||||
|
||||
span.icon[data-counter]:after {
|
||||
border-radius: 0.5rem;
|
||||
content: attr(data-counter);
|
||||
}
|
||||
|
||||
span.icon[data-counter].symbol:after {
|
||||
font-family: 'Material Symbols';
|
||||
}
|
||||
|
||||
/* Composing */
|
||||
|
||||
span.icon.composing:after {
|
||||
content: '…';
|
||||
line-height: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
border-radius: 0.5rem;
|
||||
animation: fadeText 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Weird bug */
|
||||
span.icon.small.status:after {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
span.icon.small span.counter,
|
||||
span.icon.small.composing:after {
|
||||
top: 2.25rem;
|
||||
}
|
||||
|
||||
span.icon.small.status:after {
|
||||
top: 2.4rem;
|
||||
min-width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
right: calc(50% - 2.1rem);
|
||||
}
|
||||
|
||||
main ul li .control>i {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Counter */
|
||||
|
||||
span.icon span.counter {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
span.icon span.counter:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.icon span.counter>i {
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
/* Text icon */
|
||||
i.icon-text {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0.25rem;
|
||||
line-height: 3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Tiny icon */
|
||||
p span.icon.tiny {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: text-top;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
p span.icon.tiny:not(:first-child) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
@@ -0,0 +1,815 @@
|
||||
ul.list>*>li,
|
||||
ul.list>li {
|
||||
clear: both;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
ul.list:not(.divided)>li {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
ul.list.compact>li:not(.subheader) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
ul.list.compact>li>div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.list.compact>li>span.chip {
|
||||
position: absolute;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
ul.list.controls>li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article header>ul.list li {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
ul.list li>* {
|
||||
order: 2;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
transition: background-color 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
|
||||
ul.list li:not(.subheader)>div {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
ul.list.thin li:not(.subheader)>div {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.list.middle li:not(.subheader)>div {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
ul.list.thick li:not(.subheader)>div {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Active list items */
|
||||
|
||||
ul.list.active>li:hover:not(.subheader),
|
||||
ul.list.active.all>li:hover,
|
||||
ul.list>li.active:hover,
|
||||
ul.list.active>li.active:not(.subheader),
|
||||
ul.tabs>li:hover {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul.list.active>li:hover:not(.subheader):not(.color),
|
||||
ul.list.active.all>li:hover:not(.color),
|
||||
ul.list>li.active:hover:not(.color),
|
||||
ul.list.active>li.active:not(.subheader):not(.color),
|
||||
ul.tabs>li:hover {
|
||||
background-color: rgba(var(--movim-element-action), 0.1);
|
||||
}
|
||||
|
||||
ul.list>li>span.active:hover {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul.list>li>span.bubble.active:hover {
|
||||
filter: grayscale(25%);
|
||||
}
|
||||
|
||||
ul.list>li>span:not(.bubble).active:hover,
|
||||
ul.list>li>div.bubble:not(.file):hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(var(--movim-element-action), 0.1);
|
||||
}
|
||||
|
||||
/* Clicked list items */
|
||||
|
||||
ul.list.active>li:active:not(.subheader):not(.color),
|
||||
ul.list.active.all>li:active:not(.color),
|
||||
ul.tabs>li:active:not(.color) {
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
}
|
||||
|
||||
|
||||
ul.list>li>span.bubble.active:active {
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
ul.list>li>span:not(.bubble).active:active,
|
||||
ul.list>li>div.bubble:not(.file):active {
|
||||
cursor: pointer;
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
/* Main elements */
|
||||
|
||||
ul.list li .control,
|
||||
ul.list li .primary {
|
||||
height: 5rem;
|
||||
line-height: 5rem;
|
||||
flex: 0 0 5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul.list li .primary:not(.bubble)[onclick] {
|
||||
flex: 0 0 6.5rem;
|
||||
margin-inline-start: -1.5rem;
|
||||
}
|
||||
|
||||
ul.list li.primary ul.list.compact>li .primary {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
ul.list li>span.primary {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
ul.list li>span.control {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
ul.list li.invite:not(.subheader)>span.primary+span.primary {
|
||||
margin-left: -2rem;
|
||||
}
|
||||
|
||||
ul.list:not(.navigation):not(.card) li>span.control:last-of-type:not(:has(>.checkbox)):not(.toggleable) {
|
||||
margin-inline-end: -1.5rem;
|
||||
}
|
||||
|
||||
header>ul.list li>span.control:last-of-type,
|
||||
nav>ul.list li>span.control:last-of-type,
|
||||
ul.list.controls li>span.control:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.list li>span.thumb {
|
||||
flex: 0 0 7rem;
|
||||
}
|
||||
|
||||
ul.list:not(.context_menu):not(.navigation) li:not(.subheader) .control:not(.bubble):not(.thumb),
|
||||
ul.list:not(.context_menu):not(.navigation) li:not(.subheader) .primary:not(.bubble):not(.thumb):not(.small) {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
ul.list:not(.navigation) li:not(.subheader) .control.bubble,
|
||||
ul.list:not(.navigation) li:not(.subheader) .primary.bubble:not(.small) {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
ul.list:not(.navigation) li:not(.subheader) .primary.stories.bubble {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
ul.list.thin:not(.navigation) li:not(.subheader) .control:not(.bubble):not(.thumb),
|
||||
ul.list.thin:not(.navigation) li:not(.subheader) .primary:not(.bubble):not(.thumb):not(.small) {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
ul.list.middle:not(.navigation) li:not(.subheader) .control:not(.bubble):not(.thumb),
|
||||
ul.list.middle:not(.navigation) li:not(.subheader) .primary:not(.bubble):not(.thumb):not(.small) {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
ul.list.thick:not(.navigation) li:not(.subheader) .control:not(.bubble):not(.thumb),
|
||||
ul.list.thick:not(.navigation) li:not(.subheader) .primary:not(.bubble):not(.thumb):not(.small) {
|
||||
padding: 1.75rem 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li .primary~*:not(.primary):not(.control):not(.bubble) {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
ul.list.compact li .primary~*:not(.primary):not(.control):not(.bubble) {
|
||||
margin-inline-start: 0.5rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
ul.list:not(.gallery) li:not(.story)>.control~*:not(.primary):not(.control):not(.bubble) {
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
ul.list li .primary>a,
|
||||
ul.list li .control>a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Safari fix */
|
||||
ul.list li .primary.bubble>a {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
ul.list li .primary.small.bubble>a {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
/* Truncated content */
|
||||
|
||||
ul.list li.subheader>div>p,
|
||||
ul.list li>div>span.supporting.line,
|
||||
ul.list li>div>p.line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul.list li>div>p.line.two {
|
||||
white-space: initial;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
ul.list li>div>p>span.second {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div>p>span.second.sticked {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul.list li>div>p>span.info,
|
||||
ul.list li>div.bubble:after {
|
||||
float: inline-end;
|
||||
font-size: 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
max-width: 70%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Size automagicaly the content */
|
||||
|
||||
ul.list li>div>p {
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ul.list li>div>p.active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.list>*>li>div>p:first-of-type,
|
||||
ul.list>li>div>p:first-of-type,
|
||||
ul.list>li>div>p.brief {
|
||||
line-height: 3rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
ul.list>*>li>div>p:not(:first-of-type):not(.brief),
|
||||
ul.list>li>div>p:not(:first-of-type):not(.brief) {
|
||||
line-height: 2.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
ul.list>*>li>div>p:not(.all),
|
||||
ul.list>li>div>p:not(.all) {
|
||||
max-height: 7.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ul.list>*>li>div>p:only-child,
|
||||
ul.list>li>div>p:only-child {
|
||||
line-height: 5.5rem;
|
||||
}
|
||||
|
||||
ul.list>*>li>div>p.all,
|
||||
ul.list>li>div>p.all {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
ul.list li:not(.subheader)>div:has(>p.brief:not(.line)) {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div>p.brief {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div>p.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.list li>div>p.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Subheader */
|
||||
|
||||
ul.list li.subheader {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul.list li.subheader>div>p {
|
||||
font-size: 1.75rem;
|
||||
line-height: 5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
ul.list li.subheader span.chip {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
ul.list li.subheader.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Search forms */
|
||||
|
||||
ul.list:has(>li.search) {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
ul.list>li.main form div:after,
|
||||
ul.list>li.comment form div:after,
|
||||
ul.list>li.search form div:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(var(--movim-background));
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: 3rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul.list>li.comment form div:after {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
ul.list>li.comment form div,
|
||||
ul.list>li.search form div {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
ul.list>li.main.edit form div:before,
|
||||
ul.list>li.comment form div:before,
|
||||
ul.list>li.search form div:before {
|
||||
font-family: 'Material Symbols';
|
||||
content: "\e8b6";
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
color: rgba(var(--movim-font), 0.5);
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
line-height: 6rem;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
ul.list>li.comment form div::before {
|
||||
content: "\e261";
|
||||
color: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul.list>li.search.searching form div:before {
|
||||
content: "\e863";
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
ul.list>li.comment form input,
|
||||
ul.list>li.search form input {
|
||||
margin-right: 2rem;
|
||||
margin-left: 5.5rem;
|
||||
box-shadow: none;
|
||||
padding: 1.75rem 0;
|
||||
line-height: 2rem;
|
||||
max-width: calc(100% - 7rem);
|
||||
}
|
||||
|
||||
ul.list>li.comment form input:focus,
|
||||
ul.list>li.search form input:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
ul.list>li.main form div:focus-within:after,
|
||||
ul.list>li.search form div:focus-within:after {
|
||||
box-shadow: var(--elevation-1);
|
||||
background-color: rgba(var(--movim-background), 0.8);
|
||||
}
|
||||
|
||||
ul.list>li.comment form div:focus-within::after {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
|
||||
ul.tabs {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(var(--movim-font), 0.12);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: 5.5rem;
|
||||
line-height: 5.5rem;
|
||||
font-size: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul.tabs.reversed {
|
||||
border-top: 1px solid rgba(var(--movim-font), 0.12);
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
ul.tabs:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.tabs.wide>li {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul.tabs.wide.two>li {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
ul.tabs:hover {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
ul.tabs>li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
ul.tabs.reversed>li {
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
ul.tabs>li>* {
|
||||
padding: 0 3rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.tabs>li>*:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.tabs>li>*>i {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
ul.tabs.narrow>li {
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
ul.tabs.narrow>li>* {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
ul.tabs>li.active {
|
||||
opacity: 1;
|
||||
font-variation-settings: 'FILL' 1;
|
||||
border-bottom-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
ul.tabs.reversed>li.active {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
/* Bubble */
|
||||
|
||||
ul.list li>div.bubble {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 1.75rem;
|
||||
max-width: calc(100% - 11.5rem);
|
||||
flex: 0 0 auto;
|
||||
margin: 0 1.5rem;
|
||||
padding: 0;
|
||||
min-height: 5rem;
|
||||
transition: transform 0.1s, background 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble div[dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file),
|
||||
ul.list li>div.bubble.file div.audio_player {
|
||||
padding: 1rem 1rem 1rem 1.5rem;
|
||||
border-radius: 0 1rem 1rem;
|
||||
line-height: 2.75rem;
|
||||
border-color: rgb(var(--movim-background-main));
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble.file div.audio_player {
|
||||
margin-bottom: 3rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble ul.card p:not(.line):not(:last-child) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble ul.card p:not(.line):last-child {
|
||||
white-space: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble>div>p {
|
||||
overflow: hidden;
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
min-width: 20rem;
|
||||
font-size: 1.75rem;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble>div>p i {
|
||||
vertical-align: middle;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file)>div>p:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file) p {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file) p:has(i.icon) {
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble p.retracted,
|
||||
ul.list li>div.bubble p.encrypted {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble p.previewable {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble p pre {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble span.resource {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul li:not(.oppose):not(.sequel) div.bubble div:first-child span.resource {
|
||||
display: block;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file),
|
||||
ul.list li>div.bubble.file div.audio_player {
|
||||
background-color: rgb(var(--movim-background));
|
||||
}
|
||||
|
||||
ul li.oppose div.bubble:not(.file),
|
||||
ul li.oppose div.bubble.file div.audio_player {
|
||||
background-color: rgba(var(--movim-background), 0.5);
|
||||
border-color: rgba(var(--movim-background), 0.5);
|
||||
border-radius: 1rem 0 1rem 1rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble p i.icon {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
ul li .quote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1.6rem;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
background-color: rgb(var(--movim-background));
|
||||
mask-image: url(../img/bubble_mask.svg);
|
||||
mask-size: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file):hover:before,
|
||||
ul li.oppose div.bubble:not(.file):hover:before {
|
||||
background-color: rgba(var(--movim-element-action), 0.1);
|
||||
}
|
||||
|
||||
ul.list li>div.bubble:not(.file):active:before,
|
||||
ul li.oppose div.bubble:not(.file):active:before {
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
}
|
||||
|
||||
ul li.oppose div.bubble:not(.file):before {
|
||||
left: initial;
|
||||
right: -1.6rem;
|
||||
background-color: rgba(var(--movim-background), 0.5);
|
||||
mask-image: url(../img/bubble_mask_oppose.svg);
|
||||
}
|
||||
|
||||
/* Date separator */
|
||||
|
||||
ul>li.date {
|
||||
min-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul>li.date>div>p:only-child {
|
||||
line-height: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
display: inline-block;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
ul>li.date:first-of-type>div>p:only-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
ul.list li.separator:not(.subheader):not(.date) {
|
||||
display: block;
|
||||
border-top: 0.15rem dashed 0.15rem dashed rgba(var(--movim-font), 0.5);
|
||||
margin-bottom: 0.7rem;
|
||||
margin-top: -0.7rem;
|
||||
}
|
||||
|
||||
/* Top controls list */
|
||||
|
||||
ul.list.controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
ul.list.controls>li {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.list.controls i {
|
||||
text-shadow: 0 0 3rem black;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
|
||||
.icon.tiny {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
header ul.context_menu {
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0.5rem;
|
||||
z-index: 3;
|
||||
box-shadow: var(--elevation-2);
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
transform: translateY(-5%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
min-width: 25rem;
|
||||
}
|
||||
|
||||
header ul.list.context_menu li {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
header ul.list.context_menu li.subheader {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
header ul.context_menu.shown {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Divided */
|
||||
|
||||
ul.list li.divided:after,
|
||||
*.divided:not(.spaced):not(li)>*:not(:last-child):not(.subheader):after,
|
||||
*.divided.spaced>*:not(:last-child):not(.subheader):after {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
ul.list li.divided.spaced:after,
|
||||
*.divided.spaced>*:not(:last-child):not(.subheader):after {
|
||||
width: calc(100% - 8.5rem);
|
||||
}
|
||||
|
||||
ul.list li span.control.divided:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(100% - 2rem);
|
||||
top: 1rem;
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
ul li img.preview {
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Common between Rooms and Space Rooms */
|
||||
|
||||
ul.rooms.list>li:has(ul) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul:has(li:nth-child(2)) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>span.icon,
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>div>p {
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>span.icon:first-child {
|
||||
line-height: 4.5rem;
|
||||
margin-right: 0;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>span.icon:nth-child(2) {
|
||||
margin: 0;
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>div>p>span.info {
|
||||
font-size: 2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul.rooms.list>li>ul>li:not(:first-child)>div>p>span.info.live {
|
||||
background-color: var(--p-red);
|
||||
color: white;
|
||||
padding: 0 1rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--elevation-4);
|
||||
line-height: 3.5rem;
|
||||
margin-top: 0.25rem;
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/* Menu */
|
||||
|
||||
body>nav>ul:not(:first-child) li p:first-of-type {
|
||||
height: 6rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
body>nav>ul.list {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body>nav>ul.list li {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
ul.oppose {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
ul.navigation li>span.primary i {
|
||||
transition: opacity 0.15s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
ul.navigation li.active>span.primary i {
|
||||
color: rgba(var(--movim-font), 0.8);
|
||||
}
|
||||
|
||||
ul.navigation li.active>span.primary i,
|
||||
ul.navigation li:not(.active):hover>span.primary>i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ul.navigation li.active>span.primary i {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
ul.list.active.navigation li:hover:not(.subheader),
|
||||
ul.list.active.navigation li.active:not(.subheader) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
ul.list.navigation li {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul.list.navigation li .primary {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
ul.list.active.navigation li:hover:not(.subheader):before,
|
||||
ul.list.active.navigation li.active:not(.subheader):before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 5.5rem;
|
||||
height: calc(100% - 1rem);
|
||||
background-color: rgba(var(--movim-element-action), 0.1);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
border-radius: 1.5rem;
|
||||
z-index: -1;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
ul.list.active.navigation li:active:not(.subheader):before,
|
||||
ul.list.active.navigation li.active:active:not(.subheader):before {
|
||||
background-color: rgba(var(--movim-element-action), 0.2);
|
||||
}
|
||||
|
||||
ul.navigation li {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
ul#bottomnavigation li:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) and (max-width: 1680px) {
|
||||
ul.navigation li:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
ul.list.active.navigation li:hover:not(.subheader):before,
|
||||
ul.list.active.navigation li.active:not(.subheader):before {
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/* Snackbar - Toast */
|
||||
|
||||
.snackbar,
|
||||
.toast {
|
||||
box-shadow: var(--elevation-3);
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
min-height: 6rem;
|
||||
width: 48rem;
|
||||
height: auto;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, transform 0.4s ease, box-shadow .3s cubic-bezier(.4, 0, .2, 1);
|
||||
background-color: rgb(var(--movim-gray));
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.snackbar ul.active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.snackbar:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: var(--elevation-2);
|
||||
}
|
||||
|
||||
.snackbar:hover:not(:active) {
|
||||
box-shadow: var(--elevation-4);
|
||||
}
|
||||
|
||||
.toast {
|
||||
padding: 2rem 3rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 10rem;
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
right: 1rem;
|
||||
border-radius: 2rem;
|
||||
opacity: 1;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.toast {
|
||||
left: calc(50% - 24rem);
|
||||
line-height: 2.5rem;
|
||||
border-radius: 1rem;
|
||||
bottom: 3rem;
|
||||
}
|
||||
|
||||
.snackbar:empty {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.toast:empty {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.snackbar#status_websocket {
|
||||
max-height: initial;
|
||||
}
|
||||
|
||||
.snackbar#status_websocket:not(.hide)~nav,
|
||||
.snackbar#status_websocket:not(.hide)~main {
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.snackbar#status_websocket:not(.hide)~div.dialog,
|
||||
.snackbar#status_websocket:not(.hide)~div.drawer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.snackbar#status_websocket:not(.connect) span.primary:nth-child(1),
|
||||
.snackbar#status_websocket.connect span.primary:nth-child(2),
|
||||
.snackbar#status_websocket:not(.connect) p:nth-child(3),
|
||||
.snackbar#status_websocket.connect p:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.toast {
|
||||
bottom: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
|
||||
.snackbar,
|
||||
.toast {
|
||||
left: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/* Webkit specific CSS for the scrollbars */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--movim-font), 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(var(--movim-font), 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -0,0 +1,692 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
list-style-type: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 51%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
body>* {
|
||||
display: block;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
body>script {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus-visible:not(:hover) {
|
||||
border-radius: 2px;
|
||||
outline: 3px solid var(--movim-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
a:link:hover,
|
||||
a:visited:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Skip Main */
|
||||
#skip_main {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
#skip_main:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
|
||||
body>nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 6.5rem;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
body>nav hr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
body>div.drawer:not(:empty)~main,
|
||||
body>div.drawer:not(:empty)~nav,
|
||||
body>div.drawer:not(:empty)~#visio,
|
||||
body>div.dialog:not(:empty)~main,
|
||||
body>div.dialog:not(:empty)~nav,
|
||||
body>div.dialog:not(:empty)~#visio,
|
||||
body>nav.active~main {
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body>nav.active~main {
|
||||
transform: translateX(6rem);
|
||||
}
|
||||
|
||||
body>nav li {
|
||||
/* Little hack for the navbar */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
body>nav {
|
||||
padding: 0;
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1680px) {
|
||||
|
||||
body>nav,
|
||||
body>nav:hover {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
body>nav~main,
|
||||
body>nav:hover~main {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
body>nav.active:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: linear-gradient(90deg, var(--movim-accent) 0, transparent 50%, var(--movim-accent) 100%);
|
||||
background-size: 200rem;
|
||||
width: 0;
|
||||
height: 0.25rem;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
body.loading:before {
|
||||
transition: width 4s ease-in-out, opacity 0.2s ease-in-out;
|
||||
animation: loadingblink 3s linear infinite;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.finished:before {
|
||||
transition: width 1s cubic-bezier(.68, 0, 0, 1), opacity 1s ease-in-out;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes loadingblink {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 200rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
main {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@media print {
|
||||
main {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
nav~main {
|
||||
width: calc(100% - 6.5rem);
|
||||
border-radius: 1rem 0 0 1rem;
|
||||
}
|
||||
|
||||
main>div {
|
||||
width: 92rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
main>div>* {
|
||||
max-width: 92rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
main>div.large {
|
||||
max-width: 130rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main>div.large>* {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
main>section#sidebar {
|
||||
width: 45rem;
|
||||
}
|
||||
|
||||
main>section#sidebar+div {
|
||||
width: 85rem;
|
||||
padding-inline-end: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Two blocks */
|
||||
main>div:first-child:nth-last-child(2) {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
main>div:first-child:nth-last-child(2)+div {
|
||||
width: 25%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
box-shadow: var(--elevation-2);
|
||||
background-color: rgb(var(--movim-background));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
nav.on_desktop~main,
|
||||
nav~main.enabled {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main.slide>div:first-child:nth-last-child(2),
|
||||
main.slide>div:first-child:nth-last-child(2)+div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.slide>div:first-child:nth-last-child(2)+div {
|
||||
max-width: calc(100vw - 6.5rem);
|
||||
}
|
||||
|
||||
main.slide>div:first-child:nth-last-child(2) {
|
||||
z-index: 1;
|
||||
box-shadow: var(--elevation-4);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
main.slide>div:first-child:nth-last-child(2).moving {
|
||||
transition: transform .45s var(--decelerate-easing);
|
||||
}
|
||||
|
||||
main.slide.enabled>div:first-child:nth-last-child(2) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
main.slide.enabled>div:first-child:nth-last-child(2)+div {
|
||||
margin-left: 6.5rem;
|
||||
}
|
||||
|
||||
main>section#sidebar+div {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
main>section#sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hr */
|
||||
|
||||
hr:not(.clear) {
|
||||
border-bottom: 1px solid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
hr.thick {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Spin */
|
||||
|
||||
.spin:empty {
|
||||
background-image: url(../img/cloud_spinner.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 33%;
|
||||
background-size: 9rem;
|
||||
min-height: 30rem;
|
||||
}
|
||||
|
||||
.spin:not(.list) {
|
||||
min-height: 80%;
|
||||
}
|
||||
|
||||
/* Background loading */
|
||||
.shimmer {
|
||||
background: linear-gradient(to right, rgba(var(--movim-font), 0), rgba(var(--movim-font), 0.05), rgba(var(--movim-font), 0));
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -800px 0
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 800px 0
|
||||
}
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
|
||||
img.avatar,
|
||||
span.avatar {
|
||||
margin: 0 auto;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
background-color: rgb(var(--movim-background-main));
|
||||
animation: fadeIn 0.2s;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
box-shadow: var(--elevation-1);
|
||||
max-width: 210px;
|
||||
}
|
||||
|
||||
span.avatar.icon {
|
||||
height: 25rem;
|
||||
width: 25rem;
|
||||
line-height: 25rem;
|
||||
}
|
||||
|
||||
img.avatar:not([src=""])+.placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
max-width: 55rem;
|
||||
margin: 0 auto;
|
||||
padding: 4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.placeholder>i:first-child {
|
||||
font-size: 14rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.placeholder h1 {
|
||||
opacity: 0.6;
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.placeholder h4 {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.placeholder p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder ul.list p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Display/hide */
|
||||
|
||||
.on_mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.on_mobile_after:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.on_mobile,
|
||||
.on_mobile_after:after {
|
||||
display: revert !important;
|
||||
}
|
||||
|
||||
.on_mobile.material-symbols {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.on_desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
.tag {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
|
||||
.faded>* {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.recessed {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fingerprint */
|
||||
.fingerprint {
|
||||
font-family: monospace;
|
||||
max-width: 44rem;
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.fingerprint.self {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
|
||||
div#spinner {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
margin: 50% 0;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
ul.list li.hide,
|
||||
.hide,
|
||||
.button.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Transparent images background */
|
||||
img.transparent {
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC),
|
||||
linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 15px 15px;
|
||||
}
|
||||
|
||||
/* Audio player */
|
||||
|
||||
.audio_player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.audio_player .button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.bubble .audio_player p {
|
||||
min-width: 10rem;
|
||||
text-align: center;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.audio_player input[type=range] {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.audio_player input[type=range] {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeText {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Enforce white for now as inherit is not applied correctly */
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
from {
|
||||
transform: scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingOpacity {
|
||||
from {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
from {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backgroundBlink {
|
||||
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
--standard-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
--accelerate-easing: cubic-bezier(0.3, 0.0, 0.8, 0.15);
|
||||
--decelerate-easing: cubic-bezier(0.05, 0.7, 0.1, 1.0);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/* Titles */
|
||||
|
||||
h1 { /* Display 1 */
|
||||
font-size: 4.25rem;
|
||||
line-height: 7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
article h1,
|
||||
h2 { /* Headline */
|
||||
font-size: 3rem;
|
||||
line-height: 4rem;
|
||||
padding: 1.5rem 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
article h2,
|
||||
h3 { /* Title */
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
article h3,
|
||||
h4, input, textarea, select { /* Headline */
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h4.gray {
|
||||
color: rgba(var(--movim-font), 0.54);
|
||||
}
|
||||
|
||||
small {
|
||||
color: rgba(var(--movim-font), 0.7);
|
||||
font-size: 0.75em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3 + small {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.snackbar, /* Body 2 */
|
||||
.toast {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
label, span.info { /* Caption */
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
span.info i:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
label, span.info b { /* Caption */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1.line,
|
||||
h2.line,
|
||||
h3.line,
|
||||
h4.line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
/* Typo */
|
||||
|
||||
article section ul li, /* Body 1 */
|
||||
ol li,
|
||||
p,
|
||||
dl dt,
|
||||
dl dd {
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
article section p {
|
||||
margin-bottom: 0.75rem;
|
||||
max-height: initial;
|
||||
color: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ul:not(.list):not(.navigation):not(.tabs):not(.grid) > li,
|
||||
ol:not(.list):not(.navigation):not(.tabs):not(.grid) > li {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
padding-left: 2rem;
|
||||
list-style-position: inside;
|
||||
min-height: 3rem;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
ul:not(.list):not(.tabs):not(.navigation):not(.grid) > li > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul:not(.list):not(.tabs):not(.navigation):not(.grid):not(.actions) > li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ul:not(.list):not(.tabs):not(.grid) > li > ul:not(.list):not(.tabs):not(.grid) > li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ul:not(.list):not(.tabs):not(.grid) > li > ul:not(.list):not(.tabs):not(.grid) > li > ul:not(.list):not(.tabs):not(.grid) > li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
ol:not(.list):not(.tabs):not(.grid) > li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p img.inline {
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
max-width: 3.5rem;
|
||||
margin-bottom: -0.7rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li p.code,
|
||||
code,
|
||||
pre,
|
||||
xmp {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
xmp {
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.6rem;
|
||||
background-color: rgb(var(--movim-gray));
|
||||
overflow-wrap:break-word;
|
||||
direction: ltr;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre,
|
||||
xmp {
|
||||
white-space:pre;
|
||||
}
|
||||
|
||||
code.block {
|
||||
display: block;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
pre::before,
|
||||
xmp::before {
|
||||
content: attr(class);
|
||||
display: block;
|
||||
float: right;
|
||||
background-color: rgba(var(--movim-gray), 0.5);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
pre:not([class])::before,
|
||||
xmp:not([class])::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
}
|
||||
q:before {
|
||||
content: open-quote;
|
||||
}
|
||||
q:after {
|
||||
content: close-quote;
|
||||
}
|
||||
|
||||
cite,
|
||||
blockquote {
|
||||
padding-left: 1.5rem;
|
||||
border-left: 0.5rem solid rgba(var(--movim-font), 0.2);
|
||||
font-style: italic;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Definition list */
|
||||
|
||||
dl dt,
|
||||
dl dd {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
dl di {
|
||||
border-bottom: 1px solid rgba(var(--movim-font), 0.12);
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
width: 25%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
text-align: left;
|
||||
width: 74%;
|
||||
}
|
||||
|
||||
*[dir="rtl"] dl dd {
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user