GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues 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 95c81cc741
commit 9519891b92
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
11 changed files with 427 additions and 331 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;
}
} }

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);

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;
} }

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;
} }

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

@ -1,66 +1,81 @@
form { .content {
width: 50%;
margin-left: auto;
margin-right: auto;
padding: var(--main-size);
background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
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;
border-radius: var(--unit-size);
}
fieldset {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
margin-top: calc(4 * var(--main-size));
font-family: var(--display-font); justify-content: center;
font-size: var(--main-size); align-items: center;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 1%;
} }
fieldset legend { form {
margin-bottom: var(--main-size); font-size: var(--medium-size);
} background-color: var(--bg2);
padding: calc(2 * var(--unit-size));
br { border-radius: var(--unit-size);
margin-bottom: var(--unit-size); border: solid 2px var(--accent-low);
} }
label { label {
font-family: var(--display-font); font-family: 'Montserrat', sans-serif;
font-size: var(--medium-size); font-weight: 700;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
background: var(--white) !important;
color: var(--bg1) !important;
transition: all 0.4s ease;
}
input[type="text"],
input[type="password"],
input[type="email"] {
all: unset;
background: var(--translucent);
padding: var(--unit-size) var(--small-size);
box-sizing: border-box;
border-radius: var(--unit-size);
font-size: var(--medium-size);
width: 100%; width: 100%;
} }
button { button {
font-family: var(--display-font); margin-top: var(--unit-size);
font-size: var(--medium-size);
align-self: flex-end;
padding: var(--unit-size) var(--small-size);
} }
fieldset div:last-child { input[type=text],
text-align: end; input[type=password],
} input[type=email] {
margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg1);
color: var(--fg);
border-style: none;
padding: calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--unit-size);
margin-bottom: var(--unit-size);
width: calc(100% - var(--unit-size));
}
.active {
color: var(--fg) !important;
font-weight: 700;
}
input {
filter: none;
}
form input[type="checkbox"] {
position: unset !important;
}
form button[type=submit] {
background: var(--bg1);
padding: 0.3em 1em;
color: var(--fg);
border-style: solid;
border-color: var(--accent);
border-radius: var(--unit-size);
border-width: 2px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
form button[type=submit]:focus,
form button[type=submit]:hover {
border-radius: var(--unit-size);
box-shadow: 0 0 8px var(--accent);
}
#login-notes {
margin: 0;
}
#login-main {
border: 0;
}

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'>