[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.

public/assets/css/base.css

@@ -88,16 +88,19 @@ a:link {
     outline: 0;
     color: var(--bg3);
 }
+
 a:visited {
     outline: 0;
     color: var(--bg3);
     margin: 0;
     padding: 0;
 }
+
 a:hover {
     color: var(--accent-blue);
     transition: all 0.8s ease;
 }
+
 a:focus {
     color: var(--accent-blue);
     transition: all 0.8s ease;
@@ -142,6 +145,7 @@ html {
     height: 100%;
     width: 100%;
 }
+
 #instance a {
     display: flex;
     color: var(--white);
@@ -157,20 +161,50 @@ html {
 .container {
     padding-top: calc(3 * var(--small-size) + var(--main-size));
     display: flex;
-      justify-content: center;
 }
+
 /* THE FOCUSED (middle) DIV */
 .content {
     order: 2;
-      flex-grow: 5;
     max-width: calc(100vw / 2);
+    margin-left: auto;
+    margin-right: auto;
 }
 
 /* EVERY SIDE PANEL DETAIL ELEMENT */
+.panel {
+    all: unset;
+}
+
 .panel[open] {
-      flex-grow: 1;
+    width: calc((100vw / 4) - var(--small-size));
     display: flex;
     flex-direction: column;
     padding: var(--small-size);
     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;
+    }
+}

public/assets/css/directory/actors.css

@@ -9,6 +9,7 @@
     border-radius: var(--unit-size);
     width: 100%;
 }
+
 .nav-content .timeline .actors > div:last-child {
     margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
 }

public/assets/css/directory/groups.css

@@ -13,6 +13,7 @@
     border-radius: var(--unit-size);
     width: 100%;
 }
+
 .nav-content .timeline .groups > div:last-child {
     margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
 }

public/assets/css/doc/doc.css

@@ -49,10 +49,12 @@
 .faq-nav a {
     color: #91B9D0;
 }
+
 .faq-nav a:hover {
     color: #F6F6F6;
     transition: all 0.8s ease;
 }
+
 .faq-nav a:focus {
     color: #F6F6F6;
     transition: all 0.8s ease;
@@ -66,6 +68,7 @@
     padding-top: var(--unit-size);
     border-radius: 0 0 var(--small-size) var(--small-size);
 }
+
 .markd-single {
     border-radius: var(--small-size) !important;
 }

public/assets/css/left/left.css

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

public/assets/css/poll/poll.css

@@ -50,7 +50,6 @@
 }
 
 
-
 /* FORMS ------------------------------*/
 .poll label {
     display: inline-block;

public/assets/css/replies/replies.css

@@ -2,15 +2,19 @@
     font-size: var(--medium-size);
     border: none !important;
 }
+
 .note {
     margin-bottom: 0 !important;
 }
+
 #save {
     display: flex;
 }
+
 #save div:nth-of-type(1) {
     padding: var(--unit-size);
 }
+
 #save div:nth-of-type(1) textarea {
     padding: var(--unit-size);
     border-radius: var(--unit-size);
@@ -19,4 +23,5 @@
     width: 100%;
     box-sizing: border-box;
 }
+
 #save div:nth-of-type(2)

public/assets/css/reset.css

@@ -1,13 +1,19 @@
 /* link underlines tend to make hypertext less readable,
    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 */
-ul,ol { list-style:none }
+ul, ol {
+    list-style: none
+}
 
 /* avoid browser default inconsistent heading font-sizes */
 /* 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  */
 /* 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 */
 /* form elements are oddly inconsistent, and not quite CSS emulatable. */
 /*  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? */
-a img,:link img,:visited img { border:none }
+a img, :link img, :visited img {
+    border: none
+}
 
 /* de-italicize address */
-address { font-style:normal }
+address {
+    font-style: normal
+}
 
 /* firefox focus outline */
-:focus {outline:none;}
+:focus {
-::-moz-focus-inner {border:0;}
+    outline: none;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
 
 /* details element arrow */
 details > summary {
     list-style: none;
 }
+
 details > summary::-webkit-details-marker {
     display: none;
 }
+
+/* have IE ignore the detail elements altogether */
+@supports not (-ms-ime-align: auto) {
+
+    details summary {
+        cursor: pointer;
+    }
+
+    details summary > * {
+        display: inline;
+    }
+}

public/assets/css/right/right.css

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

public/assets/css/security/security.css

@@ -8,6 +8,7 @@
     margin-right: 1%;
     margin-bottom: 1%;
 }
+
 form {
     font-size: var(--medium-size);
     background-color: var(--bg2);
@@ -15,18 +16,20 @@ form {
     border-radius: var(--unit-size);
     border: solid 2px var(--accent-low);
 }
+
 label {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     width: 100%;
 }
+
 button {
     margin-top: var(--unit-size);
 }
+
 input[type=text],
 input[type=password],
-input[type=email]
+input[type=email] {
-{
     margin-top: calc(var(--unit-size) * 0.5);
     background-color: var(--bg1);
     color: var(--fg);
@@ -37,16 +40,20 @@ input[type=email]
     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;
@@ -58,6 +65,7 @@ form button[type=submit] {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }
+
 form button[type=submit]:focus,
 form button[type=submit]:hover {
     border-radius: var(--unit-size);

public/assets/css/settings/settings.css

@@ -80,6 +80,7 @@
     width: 100%;
     border-radius: 0 0 var(--small-size) var(--small-size);
 }
+
 .form-single {
     order: 2;
     padding: calc(2 * var(--unit-size));
@@ -87,6 +88,7 @@
     width: 100%;
     border-radius: var(--small-size);
 }
+
 .form label,
 .form-single label {
     font-size: var(--medium-size);
@@ -168,6 +170,7 @@ button[type=submit] {
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
 }
+
 select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -194,10 +197,12 @@ select {
     display: block;
     max-width: 100%;
 }
+
 #img-container {
     margin: var(--main-size) auto;
     max-width: 60%;
 }
+
 .cropper-view-box,
 .cropper-face {
     border-radius: 50%;
@@ -208,9 +213,11 @@ select {
 ul input[type=radio] + label {
     color: var(--accent);
 }
+
 ul input[type=radio]:checked + label {
     color: var(--fg);
 }
+
 ul input[type=radio]:focus + label {
     color: var(--fg);
 }
@@ -219,6 +226,7 @@ ul input[type=radio]:focus + label {
 ul input[type=radio]:not(:checked) + label + div {
     display: none;
 }
+
 ul input[type=radio]:checked + label + div {
     display: flex;
 }
@@ -239,6 +247,7 @@ input[type=radio] {
     width: 100%;
     font-size: var(--medium-size);
 }
+
 #form-tabs ul {
     display: flex;
     flex-wrap: wrap;
@@ -247,6 +256,7 @@ input[type=radio] {
     justify-content: space-evenly;
     width: 100%;
 }
+
 #form-tabs ul label {
     order: 1;
     flex: 0;
@@ -269,9 +279,11 @@ input[type=radio] {
     border-radius: 0 0 var(--unit-size) var(--unit-size);
     font-size: var(--unit-size);
 }
+
 #form-tabs ul .form form {
     width: 100%;
 }
+
 #form-tabs ul .form form div label {
     margin-bottom: calc(var(--unit-size) * 0.5);
 }
@@ -287,6 +299,7 @@ input[type=radio] {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }
+
 .secondary button[type=submit]:focus,
 .secondary button[type=submit]:hover {
     border-radius: var(--unit-size);

public/assets/fonts/inter/inter.css

@@ -6,6 +6,7 @@
     src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
     url("Inter-Thin.woff?v=3.19") format("woff");
 }
+
 @font-face {
     font-family: 'Inter';
     font-style: italic;
@@ -23,6 +24,7 @@
     src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
     url("Inter-ExtraLight.woff?v=3.19") format("woff");
 }
+
 @font-face {
     font-family: 'Inter';
     font-style: italic;
@@ -40,6 +42,7 @@
     src: url("Inter-Light.woff2?v=3.19") format("woff2"),
     url("Inter-Light.woff?v=3.19") format("woff");
 }
+
 @font-face {
     font-family: 'Inter';
     font-style: italic;
@@ -57,6 +60,7 @@
     src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
     url("Inter-Regular.woff?v=3.19") format("woff");
 }
+
 @font-face {
     font-family: 'Inter';
     font-style: italic;
@@ -74,6 +78,7 @@
     src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
     url("Inter-Medium.woff?v=3.19") format("woff");
 }
+
 @font-face {
     font-family: 'Inter';
     font-style: italic;
@@ -91,6 +96,7 @@
     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;
@@ -108,6 +114,7 @@
     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;
@@ -125,6 +132,7 @@
     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;
@@ -142,6 +150,7 @@
     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;
@@ -168,6 +177,7 @@ Usage:
     font-named-instance: 'Regular';
     src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
 }
+
 @font-face {
     font-family: 'Inter var';
     font-weight: 100 900;

templates/sidepanel/left/left.html.twig

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