eliseuamaro
/
gnu-social
forked from GNUsocial/gnu-social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TWIG][CSS] Panels are now animated when shown, main content width as well as panel's is now correctly configured. WIP: displaying side panels by default when space is available, "details" element state cannot be manipulated through CSS only, need a better solution.

This commit is contained in:
Eliseu Amaro 2021-07-20 19:30:49 +01:00 committed by Hugo Sales
parent 2084ae350e
commit b899c9fb2a
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
18 changed files with 850 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
public/assets/css/base.css
View File

@ -1,176 +1,210 @@
:root { :root {
/* FONTS */ /* FONTS */
--display-font: 'Manrope-ExtraBold', sans-serif; --display-font: 'Manrope-ExtraBold', sans-serif;
--main-font: 'Inter', sans-serif; --main-font: 'Inter', sans-serif;
/* UNITS /* UNITS
* unit size - every element should be a multiplier of this * unit size - every element should be a multiplier of this
* main size - used for headers and icons * main size - used for headers and icons
* medium size - same as above, except that the element in question is contained in something else * medium size - same as above, except that the element in question is contained in something else
* small size - used in common text, borders * small size - used in common text, borders
*/ */
--unit-size: 0.5rem; --unit-size: 0.5rem;
--main-size: 1.5rem; --main-size: 1.5rem;
--medium-size: 1.125rem; --medium-size: 1.125rem;
--small-size: 1rem; --small-size: 1rem;
/* colours and shadows */ /* colours and shadows */
--black: #040506; --black: #040506;
--bg1: #383E51; --bg1: #383E51;
--bg2: #434A60; --bg2: #434A60;
--bg3: #5C6684; --bg3: #5C6684;
--white: #EEDFD4; --white: #EEDFD4;
--accent-blue: #8E8DBE; --accent-blue: #8E8DBE;
--accent-red: #FF6666; --accent-red: #FF6666;
--accent-green: #2EC4B6; --accent-green: #2EC4B6;
--shadow: 0px 0px 16px 0px #383E51; --shadow: 0px 0px 16px 0px #383E51;
} }
/* TYPOGRAPHY */ /* TYPOGRAPHY */
html { html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
h1 { h1 {
font-family: var(--display-font); font-family: var(--display-font);
font-size: var(--main-size); font-size: var(--main-size);
font-weight: 900; font-weight: 900;
opacity: 1.00; opacity: 1.00;
letter-spacing: -0.40px; letter-spacing: -0.40px;
word-spacing: 4.00px; word-spacing: 4.00px;
} }
h2 { h2 {
font-family: var(--display-font); font-family: var(--display-font);
font-size: var(--medium-size); font-size: var(--medium-size);
font-weight: 800; font-weight: 800;
letter-spacing: -0.75px; letter-spacing: -0.75px;
word-spacing: 3.00px; word-spacing: 3.00px;
text-transform: none; text-transform: none;
} }
h3 { h3 {
font-family: var(--display-font); font-family: var(--display-font);
font-size: var(--medium-size); font-size: var(--medium-size);
font-weight: 600; font-weight: 600;
line-height: 1.00; line-height: 1.00;
letter-spacing: -0.20px; letter-spacing: -0.20px;
word-spacing: 1.00px; word-spacing: 1.00px;
text-transform: none; text-transform: none;
} }
p { p {
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--small-size); font-size: var(--small-size);
font-weight: 400; font-weight: 400;
letter-spacing: -0.30px; letter-spacing: -0.30px;
word-spacing: -0.10px; word-spacing: -0.10px;
text-transform: none; text-transform: none;
} }
ul { ul {
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
li { li {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a:link { a:link {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
color: var(--bg3); color: var(--bg3);
} }
a:visited { a:visited {
outline: 0; outline: 0;
color: var(--bg3); color: var(--bg3);
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a:hover { a:hover {
color: var(--accent-blue); color: var(--accent-blue);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
a:focus { a:focus {
color: var(--accent-blue); color: var(--accent-blue);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/* DEFAULTS */ /* DEFAULTS */
body, body,
html { html {
height: 100%; height: 100%;
width: auto; width: auto;
color: var(--white); color: var(--white);
/* BLENDING BANDING IN FIREFOX */ /* BLENDING BANDING IN FIREFOX */
background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)), background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
background-blend-mode: multiply; background-blend-mode: multiply;
background-attachment: fixed; background-attachment: fixed;
} }
#header { #header {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
height: calc(5 * var(--unit-size)); height: calc(5 * var(--unit-size));
padding: var(--small-size); padding: var(--small-size);
background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)), background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
background-blend-mode: multiply; background-blend-mode: multiply;
background-attachment: fixed; background-attachment: fixed;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
#instance { #instance {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#instance a { #instance a {
display: flex; display: flex;
color: var(--white); color: var(--white);
font-size: var(--main-size); font-size: var(--main-size);
} }
.icon-logo { .icon-logo {
margin-right: var(--small-size); margin-right: var(--small-size);
fill: var(--white); fill: var(--white);
} }
/* CONTAINS ALL ELEMENTS BESIDES HEADER */ /* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container { .container {
padding-top: calc(3 * var(--small-size) + var(--main-size)); padding-top: calc(3 * var(--small-size) + var(--main-size));
display: flex; display: flex;
justify-content: center;
} }
/* THE FOCUSED (middle) DIV */ /* THE FOCUSED (middle) DIV */
.content { .content {
order: 2; order: 2;
flex-grow: 5; max-width: calc(100vw / 2);
max-width: calc(100vw/2); margin-left: auto;
margin-right: auto;
} }
/* EVERY SIDE PANEL DETAIL ELEMENT */ /* EVERY SIDE PANEL DETAIL ELEMENT */
.panel {
all: unset;
}
.panel[open] { .panel[open] {
flex-grow: 1; width: calc((100vw / 4) - var(--small-size));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--small-size); padding: var(--small-size);
box-sizing: border-box; box-sizing: border-box;
}
/*
[data-foo]::before {
open: attr(data-foo) "close";
}
*/
.content {
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
}
details[open] > div {
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: unset;
transform: none;
}
} }

12
public/assets/css/cover/cover.css
View File

@ -1,26 +1,26 @@
.cover{ .cover {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top:0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.cover-img{ .cover-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.no-cover{ .no-cover {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--bg2); background-color: var(--bg2);
} }
.profile{ .profile {
position:relative; position: relative;
background-color: transparent !important; background-color: transparent !important;
} }

382
public/assets/css/cropperjs/cropper.css
View File

@ -9,27 +9,27 @@
*/ */
.cropper-container { .cropper-container {
direction: ltr; direction: ltr;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
position: relative; position: relative;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.cropper-container img { .cropper-container img {
display: block; display: block;
height: 100%; height: 100%;
image-orientation: 0deg; image-orientation: 0deg;
max-height: none !important; max-height: none !important;
max-width: none !important; max-width: none !important;
min-height: 0 !important; min-height: 0 !important;
min-width: 0 !important; min-width: 0 !important;
width: 100%; width: 100%;
} }
.cropper-wrap-box, .cropper-wrap-box,
@ -37,268 +37,268 @@
.cropper-drag-box, .cropper-drag-box,
.cropper-crop-box, .cropper-crop-box,
.cropper-modal { .cropper-modal {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
.cropper-wrap-box, .cropper-wrap-box,
.cropper-canvas { .cropper-canvas {
overflow: hidden; overflow: hidden;
} }
.cropper-drag-box { .cropper-drag-box {
background-color: #fff; background-color: #fff;
opacity: 0; opacity: 0;
} }
.cropper-modal { .cropper-modal {
background-color: #000; background-color: #000;
opacity: 0.5; opacity: 0.5;
} }
.cropper-view-box { .cropper-view-box {
display: block; display: block;
height: 100%; height: 100%;
outline: 1px solid #39f; outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75); outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
.cropper-dashed { .cropper-dashed {
border: 0 dashed #eee; border: 0 dashed #eee;
display: block; display: block;
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
} }
.cropper-dashed.dashed-h { .cropper-dashed.dashed-h {
border-bottom-width: 1px; border-bottom-width: 1px;
border-top-width: 1px; border-top-width: 1px;
height: calc(100% / 3); height: calc(100% / 3);
left: 0; left: 0;
top: calc(100% / 3); top: calc(100% / 3);
width: 100%; width: 100%;
} }
.cropper-dashed.dashed-v { .cropper-dashed.dashed-v {
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; border-right-width: 1px;
height: 100%; height: 100%;
left: calc(100% / 3); left: calc(100% / 3);
top: 0; top: 0;
width: calc(100% / 3); width: calc(100% / 3);
} }
.cropper-center { .cropper-center {
display: block; display: block;
height: 0; height: 0;
left: 50%; left: 50%;
opacity: 0.75; opacity: 0.75;
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 0; width: 0;
} }
.cropper-center::before, .cropper-center::before,
.cropper-center::after { .cropper-center::after {
background-color: #eee; background-color: #eee;
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;
} }
.cropper-center::before { .cropper-center::before {
height: 1px; height: 1px;
left: -3px; left: -3px;
top: 0; top: 0;
width: 7px; width: 7px;
} }
.cropper-center::after { .cropper-center::after {
height: 7px; height: 7px;
left: 0; left: 0;
top: -3px; top: -3px;
width: 1px; width: 1px;
} }
.cropper-face, .cropper-face,
.cropper-line, .cropper-line,
.cropper-point { .cropper-point {
display: block; display: block;
height: 100%; height: 100%;
opacity: 0.1; opacity: 0.1;
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
.cropper-face { .cropper-face {
background-color: #fff; background-color: #fff;
left: 0; left: 0;
top: 0; top: 0;
} }
.cropper-line { .cropper-line {
background-color: #39f; background-color: #39f;
} }
.cropper-line.line-e { .cropper-line.line-e {
cursor: ew-resize; cursor: ew-resize;
right: -3px; right: -3px;
top: 0; top: 0;
width: 5px; width: 5px;
} }
.cropper-line.line-n { .cropper-line.line-n {
cursor: ns-resize; cursor: ns-resize;
height: 5px; height: 5px;
left: 0; left: 0;
top: -3px; top: -3px;
} }
.cropper-line.line-w { .cropper-line.line-w {
cursor: ew-resize; cursor: ew-resize;
left: -3px; left: -3px;
top: 0; top: 0;
width: 5px; width: 5px;
} }
.cropper-line.line-s { .cropper-line.line-s {
bottom: -3px; bottom: -3px;
cursor: ns-resize; cursor: ns-resize;
height: 5px; height: 5px;
left: 0; left: 0;
} }
.cropper-point { .cropper-point {
background-color: #39f; background-color: #39f;
height: 5px;
opacity: 0.75;
width: 5px;
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
height: 5px; height: 5px;
opacity: 0.75; opacity: 0.75;
width: 5px; width: 5px;
} }
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
height: 5px;
opacity: 0.75;
width: 5px;
}
} }
.cropper-point.point-se::before { .cropper-point.point-se::before {
background-color: #39f; background-color: #39f;
bottom: -50%; bottom: -50%;
content: ' '; content: ' ';
display: block; display: block;
height: 200%; height: 200%;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: -50%; right: -50%;
width: 200%; width: 200%;
} }
.cropper-invisible { .cropper-invisible {
opacity: 0; opacity: 0;
} }
.cropper-bg { .cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
} }
.cropper-hide { .cropper-hide {
display: block; display: block;
height: 0; height: 0;
position: absolute; position: absolute;
width: 0; width: 0;
} }
.cropper-hidden { .cropper-hidden {
display: none !important; display: none !important;
} }
.cropper-move { .cropper-move {
cursor: move; cursor: move;
} }
.cropper-crop { .cropper-crop {
cursor: crosshair; cursor: crosshair;
} }
.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face, .cropper-disabled .cropper-face,
.cropper-disabled .cropper-line, .cropper-disabled .cropper-line,
.cropper-disabled .cropper-point { .cropper-disabled .cropper-point {
cursor: not-allowed; cursor: not-allowed;
} }

13
public/assets/css/directory/actors.css
View File

@ -1,19 +1,20 @@
/*actors stream*/ /*actors stream*/
.actors{ .actors {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.nav-content .timeline .actors > div { .nav-content .timeline .actors > div {
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
width: 100%; width: 100%;
} }
.nav-content .timeline .actors > div:last-child { .nav-content .timeline .actors > div:last-child {
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
} }
.actor{ .actor {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
@ -33,13 +34,13 @@
justify-content: space-between; justify-content: space-between;
} }
.actor-info{ .actor-info {
order: 3; order: 3;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.actor-bio{ .actor-bio {
order: 3; order: 3;
word-break: break-word; word-break: break-word;
padding: var(--small-size); padding: var(--small-size);

13
public/assets/css/directory/groups.css
View File

@ -1,5 +1,5 @@
/*groups stream*/ /*groups stream*/
.groups{ .groups {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -9,15 +9,16 @@
} }
.nav-content .timeline .groups > div { .nav-content .timeline .groups > div {
margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); margin: var(--unit-size) var(--unit-size) 0 var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
width: 100%; width: 100%;
} }
.nav-content .timeline .groups > div:last-child { .nav-content .timeline .groups > div:last-child {
margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
} }
.group{ .group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
@ -37,13 +38,13 @@
justify-content: space-between; justify-content: space-between;
} }
.group-info{ .group-info {
order: 3; order: 3;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.group-description{ .group-description {
order: 3; order: 3;
word-break: break-word; word-break: break-word;
padding: var(--small-size); padding: var(--small-size);

105
public/assets/css/doc/doc.css
View File

@ -1,86 +1,89 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(4 * var(--main-size)); margin-top: calc(4 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: calc(var(--nav-size) + var(--unit-size)); margin-left: calc(var(--nav-size) + var(--unit-size));
margin-right: calc(var(--nav-size) + var(--unit-size)); margin-right: calc(var(--nav-size) + var(--unit-size));
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
border-radius: var(--small-size); border-radius: var(--small-size);
} }
.faq-nav { .faq-nav {
order: 1; order: 1;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
background-color: var(--bg1); background-color: var(--bg1);
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--small-size) var(--small-size) 0 0; border-radius: var(--small-size) var(--small-size) 0 0;
} }
.faq-nav ul { .faq-nav ul {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(2 * var(--side-margin)); margin-left: calc(2 * var(--side-margin));
margin-right: calc(2 * var(--side-margin)); margin-right: calc(2 * var(--side-margin));
padding: 0; padding: 0;
} }
.faq-nav li { .faq-nav li {
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700; font-weight: 700;
} }
.active { .active {
color: #F6F6F6 !important; color: #F6F6F6 !important;
font-weight: 700; font-weight: 700;
} }
.faq-nav a { .faq-nav a {
color: #91B9D0; color: #91B9D0;
} }
.faq-nav a:hover { .faq-nav a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.faq-nav a:focus { .faq-nav a:focus {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.markd { .markd {
order: 2; order: 2;
background-color: var(--bg2); background-color: var(--bg2);
font-size: var(--medium-size); font-size: var(--medium-size);
padding: calc(3*var(--unit-size)); padding: calc(3 * var(--unit-size));
padding-top: var(--unit-size); padding-top: var(--unit-size);
border-radius: 0 0 var(--small-size) var(--small-size); border-radius: 0 0 var(--small-size) var(--small-size);
} }
.markd-single { .markd-single {
border-radius: var(--small-size) !important; border-radius: var(--small-size) !important;
} }
.markd h2 { .markd h2 {
margin-top: var(--unit-size); margin-top: var(--unit-size);
} }
.markd p { .markd p {
margin-top: var(--unit-size); margin-top: var(--unit-size);
margin-left: calc(0.5 * var(--unit-size)); margin-left: calc(0.5 * var(--unit-size));
} }
.markd ul { .markd ul {
list-style-type: disc; list-style-type: disc;
margin-left: calc(2 * var(--unit-size)); margin-left: calc(2 * var(--unit-size));
margin-top: var(--unit-size); margin-top: var(--unit-size);
} }

6
public/assets/css/left/left.css
View File

@ -11,23 +11,23 @@
stroke-width: 0; stroke-width: 0;
vertical-align: middle; vertical-align: middle;
} }
.icon-avatar { .icon-avatar {
width: var(--main-size); width: var(--main-size);
height: auto; height: auto;
} }
#left-container > div {
opacity: 0;
}
#left-container[open] > div { #left-container[open] > div {
opacity: 100%; opacity: 100%;
} }
#left-container[open] { #left-container[open] {
order: 1; order: 1;
border-right: solid 1px var(--bg2); border-right: solid 1px var(--bg2);
} }
#left-panel { #left-panel {
position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

4
public/assets/css/network/simple_stream.css
View File

@ -1,8 +1,8 @@
.simple-stream .nav-content{ .simple-stream .nav-content {
border: none; border: none;
box-shadow: none; box-shadow: none;
} }
.simple-stream .main-nav li{ .simple-stream .main-nav li {
width: auto; width: auto;
} }

37
public/assets/css/poll/poll.css
View File

@ -1,36 +1,36 @@
.poll .poll-question{ .poll .poll-question {
font-weight: 700; font-weight: 700;
} }
.poll #pollresponse_Options{ .poll #pollresponse_Options {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#pollresponse > * > label{ #pollresponse > * > label {
vertical-align:top; vertical-align: top;
display: none; display: none;
} }
.poll .form-single , .poll .form-single,
.create-poll-notice .form-single{ .create-poll-notice .form-single {
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: var(--small-size); border-radius: var(--small-size);
} }
.poll .result{ .poll .result {
display:flex; display: flex;
padding-top: var(--unit-size) ; padding-top: var(--unit-size);
} }
.poll .result-vote{ .poll .result-vote {
font-weight: 650; font-weight: 650;
padding-left: var(--unit-size); padding-left: var(--unit-size);
} }
.create-poll-notice{ .create-poll-notice {
padding: var(--unit-size); padding: var(--unit-size);
width: 100%; width: 100%;
} }
@ -40,27 +40,26 @@
color: var(--fg); color: var(--fg);
} }
#post_poll_visibility > *{ #post_poll_visibility > * {
padding-right: var(--unit-size); padding-right: var(--unit-size);
} }
#post_poll > *{ #post_poll > * {
padding: calc(var(--unit-size) * 0.2); padding: calc(var(--unit-size) * 0.2);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
.poll label { .poll label {
display: inline-block; display: inline-block;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
width: 100%; width: 100%;
padding: 0.5em 0.1em; padding: 0.5em 0.1em;
} }
.poll input[type=text], .poll input[type=text],
.create-poll-notice input[type=text]{ .create-poll-notice input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: var(--bg2); background-color: var(--bg2);
@ -74,8 +73,8 @@
} }
.poll button[type=submit] , .poll button[type=submit],
.create-poll-notice button[type=submit]{ .create-poll-notice button[type=submit] {
background: var(--bg1); background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: var(--fg); color: var(--fg);

6
public/assets/css/profilecolor/profilecolor.css
View File

@ -1,13 +1,13 @@
.pcolor{ .pcolor {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top:0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.profile-color{ .profile-color {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;

27
public/assets/css/replies/replies.css
View File

@ -1,22 +1,27 @@
.main { .main {
font-size: var(--medium-size); font-size: var(--medium-size);
border: none !important; border: none !important;
} }
.note { .note {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
#save { #save {
display: flex; display: flex;
} }
#save div:nth-of-type(1) { #save div:nth-of-type(1) {
padding: var(--unit-size); padding: var(--unit-size);
} }
#save div:nth-of-type(1) textarea { #save div:nth-of-type(1) textarea {
padding: var(--unit-size); padding: var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
background-color: var(--bg1); background-color: var(--bg1);
font-size: var(--unit-size); font-size: var(--unit-size);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
#save div:nth-of-type(2) #save div:nth-of-type(2)

49
public/assets/css/reset.css
View File

@ -1,13 +1,19 @@
/* link underlines tend to make hypertext less readable, /* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */ because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none } :link, :visited {
text-decoration: none
}
/* no list-markers by default, since lists are used more often for semantics */ /* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none } ul, ol {
list-style: none
}
/* avoid browser default inconsistent heading font-sizes */ /* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */ /* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } h1, h2, h3, h4, h5, h6, pre, code {
font-size: 1em;
}
/* remove the inconsistent (among browsers) default ul,ol padding or margin */ /* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with /* the default spacing on headings does not match nor align with
@ -15,23 +21,48 @@ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* zero out the spacing around pre, form, body, html, p, blockquote as well */ /* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */ /* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */ /* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,textarea ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
{ margin:0; padding:0; border:none; } margin: 0;
padding: 0;
border: none;
}
/* whoever thought blue linked image borders were a good idea? */ /* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none } a img, :link img, :visited img {
border: none
}
/* de-italicize address */ /* de-italicize address */
address { font-style:normal } address {
font-style: normal
}
/* firefox focus outline */ /* firefox focus outline */
:focus {outline:none;} :focus {
::-moz-focus-inner {border:0;} outline: none;
}
::-moz-focus-inner {
border: 0;
}
/* details element arrow */ /* details element arrow */
details > summary { details > summary {
list-style: none; list-style: none;
} }
details > summary::-webkit-details-marker { details > summary::-webkit-details-marker {
display: none; display: none;
}
/* have IE ignore the detail elements altogether */
@supports not (-ms-ime-align: auto) {
details summary {
cursor: pointer;
}
details summary > * {
display: inline;
}
} }

3
public/assets/css/right/right.css
View File

@ -15,15 +15,18 @@
#right-container > div { #right-container > div {
opacity: 0; opacity: 0;
} }
#right-container[open] > div { #right-container[open] > div {
opacity: 100%; opacity: 100%;
} }
#right-container[open] { #right-container[open] {
order: 3; order: 3;
border-left: solid 1px var(--bg2); border-left: solid 1px var(--bg2);
} }
#right-panel { #right-panel {
position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

12
public/assets/css/security/security.css
View File

@ -8,6 +8,7 @@
margin-right: 1%; margin-right: 1%;
margin-bottom: 1%; margin-bottom: 1%;
} }
form { form {
font-size: var(--medium-size); font-size: var(--medium-size);
background-color: var(--bg2); background-color: var(--bg2);
@ -15,18 +16,20 @@ form {
border-radius: var(--unit-size); border-radius: var(--unit-size);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
} }
label { label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
} }
button { button {
margin-top: var(--unit-size); margin-top: var(--unit-size);
} }
input[type=text], input[type=text],
input[type=password], input[type=password],
input[type=email] input[type=email] {
{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg1); background-color: var(--bg1);
color: var(--fg); color: var(--fg);
@ -37,16 +40,20 @@ input[type=email]
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
} }
.active { .active {
color: var(--fg) !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
input { input {
filter: none; filter: none;
} }
form input[type="checkbox"] { form input[type="checkbox"] {
position: unset !important; position: unset !important;
} }
form button[type=submit] { form button[type=submit] {
background: var(--bg1); background: var(--bg1);
padding: 0.3em 1em; padding: 0.3em 1em;
@ -58,6 +65,7 @@ form button[type=submit] {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
} }
form button[type=submit]:focus, form button[type=submit]:focus,
form button[type=submit]:hover { form button[type=submit]:hover {
border-radius: var(--unit-size); border-radius: var(--unit-size);

375
public/assets/css/settings/settings.css
View File

@ -1,294 +1,307 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(4 * var(--main-size)); margin-top: calc(4 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: var(--nav-size); margin-left: var(--nav-size);
margin-right: var(--nav-size); margin-right: var(--nav-size);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.main { .main {
width: 100%; width: 100%;
margin-left: var(--unit-size); margin-left: var(--unit-size);
margin-right: var(--unit-size); margin-right: var(--unit-size);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--small-size); border-radius: var(--small-size);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
background-color: var(--bg3); background-color: var(--bg3);
} }
.set-nav { .set-nav {
order: 1; order: 1;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
background-color: var(--bg1); background-color: var(--bg1);
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--small-size) var(--small-size) 0 0; border-radius: var(--small-size) var(--small-size) 0 0;
} }
.set-nav ul { .set-nav ul {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
margin-left: calc(2 * var(--side-margin)); margin-left: calc(2 * var(--side-margin));
margin-right: calc(2 * var(--side-margin)); margin-right: calc(2 * var(--side-margin));
padding: 0; padding: 0;
} }
.set-nav li { .set-nav li {
display: block; display: block;
flex: 0 1 auto; flex: 0 1 auto;
list-style-type: none; list-style-type: none;
font-weight: 700; font-weight: 700;
} }
.set-nav a { .set-nav a {
color: var(--accent); color: var(--accent);
} }
.set-nav a:hover { .set-nav a:hover {
color: var(--fg); color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.active { .active {
color: var(--fg) !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.secondary { .secondary {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background-color: var(--bg3); background-color: var(--bg3);
margin: var(--unit-size); margin: var(--unit-size);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
border-radius: var(--small-size); border-radius: var(--small-size);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.form { .form {
order: 3; order: 3;
padding: calc(2*var(--unit-size)); padding: calc(2 * var(--unit-size));
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 0 0 var(--small-size) var(--small-size); border-radius: 0 0 var(--small-size) var(--small-size);
} }
.form-single { .form-single {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: calc(2 * var(--unit-size));
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: var(--small-size); border-radius: var(--small-size);
} }
.form label, .form label,
.form-single label { .form-single label {
font-size: var(--medium-size); font-size: var(--medium-size);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { label {
display: inline-block; display: inline-block;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
} }
input[type=text] { input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: var(--bg2); background-color: var(--bg2);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
.form input[type=checkbox] { .form input[type=checkbox] {
float: left; float: left;
margin-right: calc(var(--unit-size) * 0.5); margin-right: calc(var(--unit-size) * 0.5);
margin-top: calc(var(--unit-size) * 0.2); margin-top: calc(var(--unit-size) * 0.2);
} }
button[type=submit] { button[type=submit] {
background: var(--bg1); background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: var(--fg); color: var(--fg);
border-style: solid; border-style: solid;
border-color: var(--accent); border-color: var(--accent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border-width: 2px; border-width: 2px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-size: var(--small-size); font-size: var(--small-size);
font-weight: 700; font-weight: 700;
} }
#save_bio { #save_bio {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
height: calc(10 * var(--unit-size)); height: calc(10 * var(--unit-size));
box-shadow: var(--shadow); box-shadow: var(--shadow);
background-color: var(--bg2); background-color: var(--bg2);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
word-wrap: break-word; word-wrap: break-word;
resize: vertical; resize: vertical;
} }
#save_phone_number { #save_phone_number {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: var(--bg2); background-color: var(--bg2);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#save_language{ #save_language {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg2); background-color: var(--bg2);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: solid 2px var(--accent-low); border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background-image: url("../../icons/drop.svg"); background-image: url("../../icons/drop.svg");
background-size: var(--main-size); background-size: var(--main-size);
background-position: 95% 50%; background-position: 95% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.help-text { .help-text {
font-size: var(--medium-size); font-size: var(--medium-size);
font-style: italic; font-style: italic;
color: var(--fg); color: var(--fg);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.form-single input[type=checkbox] { .form-single input[type=checkbox] {
margin-left: var(--unit-size); margin-left: var(--unit-size);
} }
/* JS CROPPING */ /* JS CROPPING */
#img-cropped { #img-cropped {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
#img-container { #img-container {
margin: var(--main-size) auto; margin: var(--main-size) auto;
max-width: 60%; max-width: 60%;
} }
.cropper-view-box, .cropper-view-box,
.cropper-face { .cropper-face {
border-radius: 50%; border-radius: 50%;
} }
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
color: var(--accent); color: var(--accent);
} }
ul input[type=radio]:checked + label { ul input[type=radio]:checked + label {
color: var(--fg); color: var(--fg);
} }
ul input[type=radio]:focus + label { ul input[type=radio]:focus + label {
color: var(--fg); color: var(--fg);
} }
/* show/hide each tab */ /* show/hide each tab */
ul input[type=radio]:not(:checked) + label + div { ul input[type=radio]:not(:checked) + label + div {
display: none; display: none;
} }
ul input[type=radio]:checked + label + div { ul input[type=radio]:checked + label + div {
display: flex; display: flex;
} }
/* hide radio buttons */ /* hide radio buttons */
input[type=radio] { input[type=radio] {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
height: 1px; height: 1px;
width: 1px; width: 1px;
overflow: hidden; overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
} }
#form-tabs { #form-tabs {
order: 2; order: 2;
width: 100%; width: 100%;
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form-tabs ul { #form-tabs ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg1); background-color: var(--bg1);
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
#form-tabs ul label { #form-tabs ul label {
order: 1; order: 1;
flex: 0; flex: 0;
} }
#tabs { #tabs {
padding: var(--medium-size); padding: var(--medium-size);
text-transform: capitalize; text-transform: capitalize;
} }
#form-tabs ul .form { #form-tabs ul .form {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: calc(2 * var(--unit-size));
background-color: var(--bg3) !important; background-color: var(--bg3) !important;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
box-shadow: none; box-shadow: none;
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size); font-size: var(--unit-size);
} }
#form-tabs ul .form form{
width: 100%; #form-tabs ul .form form {
width: 100%;
} }
#form-tabs ul .form form div label { #form-tabs ul .form form div label {
margin-bottom: calc(var(--unit-size) * 0.5); margin-bottom: calc(var(--unit-size) * 0.5);
} }
.secondary button[type=submit] { .secondary button[type=submit] {
background: var(--bg1); background: var(--bg1);
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
color: var(--fg); color: var(--fg);
border-style: solid; border-style: solid;
border-color: var(--accent); border-color: var(--accent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border-width: 2px; border-width: 2px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
} }
.secondary button[type=submit]:focus, .secondary button[type=submit]:focus,
.secondary button[type=submit]:hover { .secondary button[type=submit]:hover {
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: 0 0 8px var(--accent); box-shadow: 0 0 8px var(--accent);
} }

292
public/assets/fonts/inter/inter.css
View File

@ -1,154 +1,163 @@
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; font-display: swap;
src: url("Inter-Thin.woff2?v=3.19") format("woff2"), src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
url("Inter-Thin.woff?v=3.19") format("woff"); url("Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
url("Inter-ThinItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: italic;
font-weight: 200; font-weight: 100;
font-display: swap; font-display: swap;
src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"), src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLight.woff?v=3.19") format("woff"); url("Inter-ThinItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 200;
font-display: swap; font-display: swap;
src: url("Inter-Light.woff2?v=3.19") format("woff2"), src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
url("Inter-Light.woff?v=3.19") format("woff"); url("Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
url("Inter-LightItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: italic;
font-weight: 400; font-weight: 200;
font-display: swap; font-display: swap;
src: url("Inter-Regular.woff2?v=3.19") format("woff2"), src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
url("Inter-Regular.woff?v=3.19") format("woff"); url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
url("Inter-Italic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 300;
font-display: swap; font-display: swap;
src: url("Inter-Medium.woff2?v=3.19") format("woff2"), src: url("Inter-Light.woff2?v=3.19") format("woff2"),
url("Inter-Medium.woff?v=3.19") format("woff"); url("Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
url("Inter-MediumItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: italic;
font-weight: 600; font-weight: 300;
font-display: swap; font-display: swap;
src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"), src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
url("Inter-SemiBold.woff?v=3.19") format("woff"); url("Inter-LightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 400;
font-display: swap; font-display: swap;
src: url("Inter-Bold.woff2?v=3.19") format("woff2"), src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
url("Inter-Bold.woff?v=3.19") format("woff"); url("Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-BoldItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: italic;
font-weight: 800; font-weight: 400;
font-display: swap; font-display: swap;
src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"), src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBold.woff?v=3.19") format("woff"); url("Inter-Italic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 500;
font-display: swap; font-display: swap;
src: url("Inter-Black.woff2?v=3.19") format("woff2"), src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
url("Inter-Black.woff?v=3.19") format("woff"); url("Inter-Medium.woff?v=3.19") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 500;
font-display: swap; font-display: swap;
src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"), src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
url("Inter-BlackItalic.woff?v=3.19") format("woff"); url("Inter-MediumItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
url("Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
url("Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-BoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("Inter-Black.woff2?v=3.19") format("woff2"),
url("Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
url("Inter-BlackItalic.woff?v=3.19") format("woff");
} }
/* ------------------------------------------------------- /* -------------------------------------------------------
@ -161,20 +170,21 @@ Usage:
} }
*/ */
@font-face { @font-face {
font-family: 'Inter var'; font-family: 'Inter var';
font-weight: 100 900; font-weight: 100 900;
font-display: swap; font-display: swap;
font-style: normal; font-style: normal;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
} }
@font-face { @font-face {
font-family: 'Inter var'; font-family: 'Inter var';
font-weight: 100 900; font-weight: 100 900;
font-display: swap; font-display: swap;
font-style: italic; font-style: italic;
font-named-instance: 'Italic'; font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
} }
@ -192,9 +202,9 @@ explicitly, e.g.
*/ */
@font-face { @font-face {
font-family: 'Inter var experimental'; font-family: 'Inter var experimental';
font-weight: 100 900; font-weight: 100 900;
font-display: swap; font-display: swap;
font-style: oblique 0deg 10deg; font-style: oblique 0deg 10deg;
src: url("Inter.var.woff2?v=3.19") format("woff2"); src: url("Inter.var.woff2?v=3.19") format("woff2");
} }

4
public/assets/fonts/manrope/manrope.css
View File

@ -1,13 +1,13 @@
@font-face { @font-face {
font-family: 'Manrope'; font-family: 'Manrope';
font-style: normal; font-style: normal;
src: url(Manrope-Regular.woff2), src: url(Manrope-Regular.woff2),
url(Manrope-Regular.woff); url(Manrope-Regular.woff);
} }
@font-face { @font-face {
font-family: 'Manrope-ExtraBold'; font-family: 'Manrope-ExtraBold';
font-style: normal; font-style: normal;
src: url(Manrope-ExtraBold.woff2), src: url(Manrope-ExtraBold.woff2),
url(Manrope-ExtraBold.woff2); url(Manrope-ExtraBold.woff2);
} }

1
templates/sidepanel/left/left.html.twig
View File

@ -1,4 +1,5 @@
<details class="panel" id="left-container"> <details class="panel" id="left-container">
<summary>{{ icon('menu', 'icon icon-left') | raw }}</summary> <summary>{{ icon('menu', 'icon icon-left') | raw }}</summary>
{% if app.user %} {% if app.user %}
<div id='left-panel'> <div id='left-panel'>