diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 5478554449..edda392e71 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -114,8 +114,8 @@ a:hover {
transition: all 0.4s ease;
}
-summary:hover > *,
-summary:focus > * {
+summary:hover > svg,
+summary:focus > svg {
border-radius: var(--unit-size);
background: var(--white);
fill: var(--bg1);
@@ -123,8 +123,8 @@ summary:focus > * {
}
hr {
- all: unset;
display: block;
+ border: none;
height: 2px;
background-image: linear-gradient(to right, var(--bg1), transparent 90%);
}
@@ -196,6 +196,7 @@ html {
.content {
margin: var(--main-size);
margin-left: calc(2 * var(--main-size));
+ margin-right: calc(2 * var(--main-size));
display: flex;
flex-direction: column;
width: calc(3 * (100% / 5));
@@ -253,30 +254,69 @@ html {
border-radius: var(--unit-size);
background-color: #00000033;
}
+
.note-attachments > div figure {
margin: 0;
padding: var(--small-size);
}
+
figcaption a:link {
font-size: var(--small-size);
color: var(--white);
}
-/* EVERY SIDE PANEL DETAIL ELEMENT */
-.panel {
- all: unset;
- width: calc(1 * (100%/5));
+/* MEDIA QUERIES */
+@media (min-width: 1200px) {
+ .panel aside {
+ position: fixed;
+ display: flex !important;
+ flex-direction: column;
+ padding: var(--small-size);
+ box-sizing: border-box;
+
+ font-size: var(--main-size);
+ width: calc(100vw / 5);
+ height: calc(100vh - (3 * var(--small-size) + var(--main-size)));
+ animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
+ }
+
+ .panel[open] aside {
+ display: none !important;
+ }
}
-.panel[open] {
- height: 100%;
+@media (max-width: 1200px) {
+ .content {
+ margin: var(--main-size);
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .panel aside {
+ display: none !important;
+ }
+
+ .panel[open] aside {
+ 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==);
+ background-blend-mode: multiply;
+ background-attachment: fixed;
+
+ position: fixed;
+ display: flex !important;
+ flex-direction: column;
+ padding: var(--small-size);
+ box-sizing: border-box;
+
+ font-size: var(--main-size);
+ width: 100%;
+ height: calc(100vh - (3 * var(--small-size) + var(--main-size)));
+ animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
+ }
}
/* ANIMATIONS */
-details[open] > div {
- animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
-}
-
@keyframes fadeIn {
0% {
opacity: 0;
@@ -287,12 +327,4 @@ details[open] > div {
opacity: unset;
transform: none;
}
-}
-
-/* MEDIA QUERIES */
-@media (min-width: 900px) {
-
-}
-@media (max-width: 900px) {
-
}
\ No newline at end of file
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index d4899c46de..36a651140e 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -17,28 +17,9 @@
height: auto;
}
-#left-container[open] {
- height: calc(100vh - (3 * var(--small-size) + var(--main-size)));
- width: calc(100vw / 5);
-}
-
-#left-container[open] > div {
- opacity: 100%;
-}
-
-#left-container[open] a {
- tab-index: 0;
-}
-
#left-panel {
- position: fixed;
- display: flex;
- flex-direction: column;
- font-size: var(--main-size);
- width: inherit;
- height: inherit;
- padding: var(--small-size);
- box-sizing: border-box;
+ top: inherit;
+ left: 0;
}
/* PROFILE */
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index 7bb6d352bd..441a5349ac 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -12,20 +12,10 @@
vertical-align: middle;
}
-#right-container[open] > div {
- opacity: 100%;
-}
-
-#right-container[open] {
- width: calc(100vw / 5);
-}
-
#right-panel {
font-size: var(--main-size);
- width: inherit;
- height: inherit;
- padding: var(--small-size);
- box-sizing: border-box;
+ top: inherit;
+ right: 0;
}
.create-notice {
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 7283f80922..8a1b9790b6 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -43,8 +43,9 @@
{{ icon('person', 'icon icon-left') | raw }}
+ {{ block("leftpanel", "stdgrid.html.twig") }}
- {{ block("leftpanel", "stdgrid.html.twig") }}
+
{{ icon('notes', 'icon icon-right') | raw }}
+ {{ block("rightpanel", "stdgrid.html.twig") }}
- {{ block("rightpanel", "stdgrid.html.twig") }}