diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 76aa808c13..44219c7ffc 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -1,176 +1,210 @@ :root { - /* FONTS */ - --display-font: 'Manrope-ExtraBold', sans-serif; - --main-font: 'Inter', sans-serif; + /* FONTS */ + --display-font: 'Manrope-ExtraBold', sans-serif; + --main-font: 'Inter', sans-serif; - /* UNITS - * unit size - every element should be a multiplier of this - * main size - used for headers and icons - * medium size - same as above, except that the element in question is contained in something else - * small size - used in common text, borders - */ - --unit-size: 0.5rem; - --main-size: 1.5rem; - --medium-size: 1.125rem; - --small-size: 1rem; + /* UNITS + * unit size - every element should be a multiplier of this + * main size - used for headers and icons + * medium size - same as above, except that the element in question is contained in something else + * small size - used in common text, borders + */ + --unit-size: 0.5rem; + --main-size: 1.5rem; + --medium-size: 1.125rem; + --small-size: 1rem; - /* colours and shadows */ - --black: #040506; - --bg1: #383E51; - --bg2: #434A60; - --bg3: #5C6684; - --white: #EEDFD4; + /* colours and shadows */ + --black: #040506; + --bg1: #383E51; + --bg2: #434A60; + --bg3: #5C6684; + --white: #EEDFD4; - --accent-blue: #8E8DBE; - --accent-red: #FF6666; - --accent-green: #2EC4B6; + --accent-blue: #8E8DBE; + --accent-red: #FF6666; + --accent-green: #2EC4B6; - --shadow: 0px 0px 16px 0px #383E51; + --shadow: 0px 0px 16px 0px #383E51; } /* TYPOGRAPHY */ html { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } h1 { - font-family: var(--display-font); - font-size: var(--main-size); - font-weight: 900; - opacity: 1.00; - letter-spacing: -0.40px; - word-spacing: 4.00px; + font-family: var(--display-font); + font-size: var(--main-size); + font-weight: 900; + opacity: 1.00; + letter-spacing: -0.40px; + word-spacing: 4.00px; } h2 { - font-family: var(--display-font); - font-size: var(--medium-size); - font-weight: 800; - letter-spacing: -0.75px; - word-spacing: 3.00px; - text-transform: none; + font-family: var(--display-font); + font-size: var(--medium-size); + font-weight: 800; + letter-spacing: -0.75px; + word-spacing: 3.00px; + text-transform: none; } h3 { - font-family: var(--display-font); - font-size: var(--medium-size); - font-weight: 600; - line-height: 1.00; - letter-spacing: -0.20px; - word-spacing: 1.00px; - text-transform: none; + font-family: var(--display-font); + font-size: var(--medium-size); + font-weight: 600; + line-height: 1.00; + letter-spacing: -0.20px; + word-spacing: 1.00px; + text-transform: none; } p { - font-family: var(--main-font); - font-size: var(--small-size); - font-weight: 400; - letter-spacing: -0.30px; - word-spacing: -0.10px; - text-transform: none; + font-family: var(--main-font); + font-size: var(--small-size); + font-weight: 400; + letter-spacing: -0.30px; + word-spacing: -0.10px; + text-transform: none; } ul { - text-decoration: none; - margin: 0; - padding: 0; - list-style: none; + text-decoration: none; + margin: 0; + padding: 0; + list-style: none; } li { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } a:link { - text-decoration: none; - outline: 0; - color: var(--bg3); + text-decoration: none; + outline: 0; + color: var(--bg3); } + a:visited { - outline: 0; - color: var(--bg3); - margin: 0; - padding: 0; + outline: 0; + color: var(--bg3); + margin: 0; + padding: 0; } + a:hover { - color: var(--accent-blue); - transition: all 0.8s ease; + color: var(--accent-blue); + transition: all 0.8s ease; } + a:focus { - color: var(--accent-blue); - transition: all 0.8s ease; + color: var(--accent-blue); + transition: all 0.8s ease; } /* DEFAULTS */ body, html { - height: 100%; - width: auto; - color: var(--white); + height: 100%; + width: auto; + color: var(--white); - /* BLENDING BANDING IN FIREFOX */ - 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; + /* BLENDING BANDING IN FIREFOX */ + 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; } #header { - display: flex; - justify-content: center; - position: fixed; - pointer-events: none; + display: flex; + justify-content: center; + position: fixed; + pointer-events: none; - width: 100%; - height: calc(5 * var(--unit-size)); - padding: var(--small-size); + width: 100%; + height: calc(5 * var(--unit-size)); + padding: var(--small-size); - 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==); - background-blend-mode: multiply; - background-attachment: fixed; - box-shadow: var(--shadow); + 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==); + background-blend-mode: multiply; + background-attachment: fixed; + box-shadow: var(--shadow); } #instance { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; } + #instance a { - display: flex; - color: var(--white); - font-size: var(--main-size); + display: flex; + color: var(--white); + font-size: var(--main-size); } .icon-logo { - margin-right: var(--small-size); - fill: var(--white); + margin-right: var(--small-size); + fill: var(--white); } /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .container { - padding-top: calc(3 * var(--small-size) + var(--main-size)); - display: flex; - justify-content: center; + padding-top: calc(3 * var(--small-size) + var(--main-size)); + display: flex; } + /* THE FOCUSED (middle) DIV */ .content { - order: 2; - flex-grow: 5; - max-width: calc(100vw/2); + order: 2; + max-width: calc(100vw / 2); + margin-left: auto; + margin-right: auto; } /* EVERY SIDE PANEL DETAIL ELEMENT */ +.panel { + all: unset; +} + .panel[open] { - flex-grow: 1; - display: flex; - flex-direction: column; - padding: var(--small-size); - box-sizing: border-box; + 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; + } } \ No newline at end of file diff --git a/public/assets/css/cover/cover.css b/public/assets/css/cover/cover.css index 97cb9b1d8b..34e2508f23 100644 --- a/public/assets/css/cover/cover.css +++ b/public/assets/css/cover/cover.css @@ -1,26 +1,26 @@ -.cover{ +.cover { width: 100%; height: 100%; position: absolute; - top:0; + top: 0; left: 0; z-index: -1; } -.cover-img{ +.cover-img { width: 100%; height: 100%; object-fit: cover; } -.no-cover{ +.no-cover { width: 100%; height: 100%; background-color: var(--bg2); } -.profile{ - position:relative; +.profile { + position: relative; background-color: transparent !important; } diff --git a/public/assets/css/cropperjs/cropper.css b/public/assets/css/cropperjs/cropper.css index cc32e6ac05..5d9187d5c7 100644 --- a/public/assets/css/cropperjs/cropper.css +++ b/public/assets/css/cropperjs/cropper.css @@ -9,27 +9,27 @@ */ .cropper-container { - direction: ltr; - font-size: 0; - line-height: 0; - position: relative; - -ms-touch-action: none; - touch-action: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .cropper-container img { - display: block; - height: 100%; - image-orientation: 0deg; - max-height: none !important; - max-width: none !important; - min-height: 0 !important; - min-width: 0 !important; - width: 100%; + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; } .cropper-wrap-box, @@ -37,268 +37,268 @@ .cropper-drag-box, .cropper-crop-box, .cropper-modal { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } .cropper-wrap-box, .cropper-canvas { - overflow: hidden; + overflow: hidden; } .cropper-drag-box { - background-color: #fff; - opacity: 0; + background-color: #fff; + opacity: 0; } .cropper-modal { - background-color: #000; - opacity: 0.5; + background-color: #000; + opacity: 0.5; } .cropper-view-box { - display: block; - height: 100%; - outline: 1px solid #39f; - outline-color: rgba(51, 153, 255, 0.75); - overflow: hidden; - width: 100%; + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; } .cropper-dashed { - border: 0 dashed #eee; - display: block; - opacity: 0.5; - position: absolute; + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; } .cropper-dashed.dashed-h { - border-bottom-width: 1px; - border-top-width: 1px; - height: calc(100% / 3); - left: 0; - top: calc(100% / 3); - width: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; } .cropper-dashed.dashed-v { - border-left-width: 1px; - border-right-width: 1px; - height: 100%; - left: calc(100% / 3); - top: 0; - width: calc(100% / 3); + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); } .cropper-center { - display: block; - height: 0; - left: 50%; - opacity: 0.75; - position: absolute; - top: 50%; - width: 0; + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; } .cropper-center::before, .cropper-center::after { - background-color: #eee; - content: ' '; - display: block; - position: absolute; + background-color: #eee; + content: ' '; + display: block; + position: absolute; } .cropper-center::before { - height: 1px; - left: -3px; - top: 0; - width: 7px; + height: 1px; + left: -3px; + top: 0; + width: 7px; } .cropper-center::after { - height: 7px; - left: 0; - top: -3px; - width: 1px; + height: 7px; + left: 0; + top: -3px; + width: 1px; } .cropper-face, .cropper-line, .cropper-point { - display: block; - height: 100%; - opacity: 0.1; - position: absolute; - width: 100%; + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; } .cropper-face { - background-color: #fff; - left: 0; - top: 0; + background-color: #fff; + left: 0; + top: 0; } .cropper-line { - background-color: #39f; + background-color: #39f; } .cropper-line.line-e { - cursor: ew-resize; - right: -3px; - top: 0; - width: 5px; + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; } .cropper-line.line-n { - cursor: ns-resize; - height: 5px; - left: 0; - top: -3px; + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; } .cropper-line.line-w { - cursor: ew-resize; - left: -3px; - top: 0; - width: 5px; + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; } .cropper-line.line-s { - bottom: -3px; - cursor: ns-resize; - height: 5px; - left: 0; + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; } .cropper-point { - 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 { + 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; + opacity: 0.75; + width: 5px; + } } .cropper-point.point-se::before { - background-color: #39f; - bottom: -50%; - content: ' '; - display: block; - height: 200%; - opacity: 0; - position: absolute; - right: -50%; - width: 200%; + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; } .cropper-invisible { - opacity: 0; + opacity: 0; } .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 { - display: block; - height: 0; - position: absolute; - width: 0; + display: block; + height: 0; + position: absolute; + width: 0; } .cropper-hidden { - display: none !important; + display: none !important; } .cropper-move { - cursor: move; + cursor: move; } .cropper-crop { - cursor: crosshair; + cursor: crosshair; } .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { - cursor: not-allowed; + cursor: not-allowed; } diff --git a/public/assets/css/directory/actors.css b/public/assets/css/directory/actors.css index 354339a0d6..09ab42f46b 100644 --- a/public/assets/css/directory/actors.css +++ b/public/assets/css/directory/actors.css @@ -1,19 +1,20 @@ /*actors stream*/ -.actors{ +.actors { display: flex; flex-wrap: wrap; } .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); width: 100%; } + .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; flex-wrap: wrap; border: solid 2px var(--accent-low); @@ -33,13 +34,13 @@ justify-content: space-between; } -.actor-info{ +.actor-info { order: 3; display: flex; flex-wrap: wrap; } -.actor-bio{ +.actor-bio { order: 3; word-break: break-word; padding: var(--small-size); diff --git a/public/assets/css/directory/groups.css b/public/assets/css/directory/groups.css index 09ae5cb10c..bdc1fa6a50 100644 --- a/public/assets/css/directory/groups.css +++ b/public/assets/css/directory/groups.css @@ -1,5 +1,5 @@ /*groups stream*/ -.groups{ +.groups { display: flex; flex-wrap: wrap; } @@ -9,15 +9,16 @@ } .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); width: 100%; } + .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; flex-wrap: wrap; border: solid 2px var(--accent-low); @@ -37,13 +38,13 @@ justify-content: space-between; } -.group-info{ +.group-info { order: 3; display: flex; flex-wrap: wrap; } -.group-description{ +.group-description { order: 3; word-break: break-word; padding: var(--small-size); diff --git a/public/assets/css/doc/doc.css b/public/assets/css/doc/doc.css index bdf3e6563b..0f779cfbf5 100644 --- a/public/assets/css/doc/doc.css +++ b/public/assets/css/doc/doc.css @@ -1,86 +1,89 @@ .content { - display: flex; - flex-wrap: wrap; - margin-top: calc(4 * var(--main-size)); - justify-content: center; - align-items: center; - margin-left: calc(var(--nav-size) + var(--unit-size)); - margin-right: calc(var(--nav-size) + var(--unit-size)); - margin-bottom: var(--unit-size); - border: solid 2px var(--accent-low); - border-radius: var(--small-size); + display: flex; + flex-wrap: wrap; + margin-top: calc(4 * var(--main-size)); + justify-content: center; + align-items: center; + margin-left: calc(var(--nav-size) + var(--unit-size)); + margin-right: calc(var(--nav-size) + var(--unit-size)); + margin-bottom: var(--unit-size); + border: solid 2px var(--accent-low); + border-radius: var(--small-size); } .faq-nav { - order: 1; - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - flex: 1; - background-color: var(--bg1); - padding: var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - border-radius: var(--small-size) var(--small-size) 0 0; + order: 1; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + flex: 1; + background-color: var(--bg1); + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); + border-radius: var(--small-size) var(--small-size) 0 0; } .faq-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(2 * var(--side-margin)); - margin-right: calc(2 * var(--side-margin)); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: calc(2 * var(--side-margin)); + margin-right: calc(2 * var(--side-margin)); + padding: 0; } .faq-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; - font-weight: 700; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; } .active { - color: #F6F6F6 !important; - font-weight: 700; + color: #F6F6F6 !important; + font-weight: 700; } .faq-nav a { - color: #91B9D0; + color: #91B9D0; } + .faq-nav a:hover { - color: #F6F6F6; - transition: all 0.8s ease; + color: #F6F6F6; + transition: all 0.8s ease; } + .faq-nav a:focus { - color: #F6F6F6; - transition: all 0.8s ease; + color: #F6F6F6; + transition: all 0.8s ease; } .markd { - order: 2; - background-color: var(--bg2); - font-size: var(--medium-size); - padding: calc(3*var(--unit-size)); - padding-top: var(--unit-size); - border-radius: 0 0 var(--small-size) var(--small-size); + order: 2; + background-color: var(--bg2); + font-size: var(--medium-size); + padding: calc(3 * var(--unit-size)); + padding-top: var(--unit-size); + border-radius: 0 0 var(--small-size) var(--small-size); } + .markd-single { - border-radius: var(--small-size) !important; + border-radius: var(--small-size) !important; } .markd h2 { - margin-top: var(--unit-size); + margin-top: var(--unit-size); } .markd p { - margin-top: var(--unit-size); - margin-left: calc(0.5 * var(--unit-size)); + margin-top: var(--unit-size); + margin-left: calc(0.5 * var(--unit-size)); } .markd ul { - list-style-type: disc; - margin-left: calc(2 * var(--unit-size)); - margin-top: var(--unit-size); + list-style-type: disc; + margin-left: calc(2 * var(--unit-size)); + margin-top: var(--unit-size); } diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 5d18131da9..1361777a1e 100644 --- a/public/assets/css/left/left.css +++ b/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; } \ No newline at end of file diff --git a/public/assets/css/network/simple_stream.css b/public/assets/css/network/simple_stream.css index 2a170deaad..285ce5800e 100644 --- a/public/assets/css/network/simple_stream.css +++ b/public/assets/css/network/simple_stream.css @@ -1,8 +1,8 @@ -.simple-stream .nav-content{ +.simple-stream .nav-content { border: none; box-shadow: none; } -.simple-stream .main-nav li{ +.simple-stream .main-nav li { width: auto; } \ No newline at end of file diff --git a/public/assets/css/poll/poll.css b/public/assets/css/poll/poll.css index 267858ba74..b47a391bc7 100644 --- a/public/assets/css/poll/poll.css +++ b/public/assets/css/poll/poll.css @@ -1,36 +1,36 @@ -.poll .poll-question{ +.poll .poll-question { font-weight: 700; } -.poll #pollresponse_Options{ - display:flex; +.poll #pollresponse_Options { + display: flex; flex-direction: column; } -#pollresponse > * > label{ - vertical-align:top; +#pollresponse > * > label { + vertical-align: top; display: none; } -.poll .form-single , -.create-poll-notice .form-single{ +.poll .form-single, +.create-poll-notice .form-single { height: 100%; width: 100%; border-radius: var(--small-size); } -.poll .result{ - display:flex; - padding-top: var(--unit-size) ; +.poll .result { + display: flex; + padding-top: var(--unit-size); } -.poll .result-vote{ +.poll .result-vote { font-weight: 650; padding-left: var(--unit-size); } -.create-poll-notice{ +.create-poll-notice { padding: var(--unit-size); width: 100%; } @@ -40,27 +40,26 @@ color: var(--fg); } -#post_poll_visibility > *{ +#post_poll_visibility > * { padding-right: var(--unit-size); } -#post_poll > *{ +#post_poll > * { padding: calc(var(--unit-size) * 0.2); } - /* FORMS ------------------------------*/ .poll label { display: inline-block; font-family: 'Montserrat', sans-serif; width: 100%; - padding: 0.5em 0.1em; + padding: 0.5em 0.1em; } .poll input[type=text], -.create-poll-notice input[type=text]{ +.create-poll-notice input[type=text] { margin-top: calc(var(--unit-size) * 0.5); width: calc(100% - var(--unit-size)); background-color: var(--bg2); @@ -74,8 +73,8 @@ } -.poll button[type=submit] , -.create-poll-notice button[type=submit]{ +.poll button[type=submit], +.create-poll-notice button[type=submit] { background: var(--bg1); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); color: var(--fg); diff --git a/public/assets/css/profilecolor/profilecolor.css b/public/assets/css/profilecolor/profilecolor.css index b4c67e00c0..920478f021 100644 --- a/public/assets/css/profilecolor/profilecolor.css +++ b/public/assets/css/profilecolor/profilecolor.css @@ -1,13 +1,13 @@ -.pcolor{ +.pcolor { width: 100%; height: 100%; position: absolute; - top:0; + top: 0; left: 0; z-index: -1; } -.profile-color{ +.profile-color { width: 100%; height: 100%; background-color: transparent; diff --git a/public/assets/css/replies/replies.css b/public/assets/css/replies/replies.css index 340e440ca7..dbea2b7a15 100644 --- a/public/assets/css/replies/replies.css +++ b/public/assets/css/replies/replies.css @@ -1,22 +1,27 @@ .main { - font-size: var(--medium-size); - border: none !important; + font-size: var(--medium-size); + border: none !important; } + .note { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } + #save { - display: flex; + display: flex; } + #save div:nth-of-type(1) { - padding: var(--unit-size); + padding: var(--unit-size); } + #save div:nth-of-type(1) textarea { - padding: var(--unit-size); - border-radius: var(--unit-size); - background-color: var(--bg1); - font-size: var(--unit-size); - width: 100%; - box-sizing: border-box; + padding: var(--unit-size); + border-radius: var(--unit-size); + background-color: var(--bg1); + font-size: var(--unit-size); + width: 100%; + box-sizing: border-box; } + #save div:nth-of-type(2) diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 7da7777022..7f9b159b24 100644 --- a/public/assets/css/reset.css +++ b/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 -{ margin:0; padding:0; border:none; } +ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea { + 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;} -::-moz-focus-inner {border:0;} +:focus { + 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; + } } \ No newline at end of file diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 9387a0f6d6..4be686b23d 100644 --- a/public/assets/css/right/right.css +++ b/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; } \ No newline at end of file diff --git a/public/assets/css/security/security.css b/public/assets/css/security/security.css index 6a4de341b2..35937d4bac 100644 --- a/public/assets/css/security/security.css +++ b/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); diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index fe2fef4939..fbd36f71fd 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -1,294 +1,307 @@ .content { - display: flex; - flex-wrap: wrap; - margin-top: calc(4 * var(--main-size)); - justify-content: center; - align-items: center; - margin-left: var(--nav-size); - margin-right: var(--nav-size); - margin-bottom: var(--unit-size); + display: flex; + flex-wrap: wrap; + margin-top: calc(4 * var(--main-size)); + justify-content: center; + align-items: center; + margin-left: var(--nav-size); + margin-right: var(--nav-size); + margin-bottom: var(--unit-size); } .main { - width: 100%; - margin-left: var(--unit-size); - margin-right: var(--unit-size); - box-shadow: var(--shadow); - border-radius: var(--small-size); - border: solid 2px var(--accent-low); - background-color: var(--bg3); + width: 100%; + margin-left: var(--unit-size); + margin-right: var(--unit-size); + box-shadow: var(--shadow); + border-radius: var(--small-size); + border: solid 2px var(--accent-low); + background-color: var(--bg3); } .set-nav { - order: 1; - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - flex: 1; - background-color: var(--bg1); - padding: var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - border-radius: var(--small-size) var(--small-size) 0 0; + order: 1; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + flex: 1; + background-color: var(--bg1); + padding: var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); + border-radius: var(--small-size) var(--small-size) 0 0; } .set-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(2 * var(--side-margin)); - margin-right: calc(2 * var(--side-margin)); - padding: 0; + display: flex; + align-items: stretch; + justify-content: space-evenly; + width: 100%; + margin-left: calc(2 * var(--side-margin)); + margin-right: calc(2 * var(--side-margin)); + padding: 0; } .set-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; - font-weight: 700; + display: block; + flex: 0 1 auto; + list-style-type: none; + font-weight: 700; } .set-nav a { - color: var(--accent); + color: var(--accent); } .set-nav a:hover { - color: var(--fg); - transition: all 0.8s ease; + color: var(--fg); + transition: all 0.8s ease; } .active { - color: var(--fg) !important; - font-weight: 700; + color: var(--fg) !important; + font-weight: 700; } .secondary { - display: flex; - flex-wrap: wrap; - background-color: var(--bg3); - margin: var(--unit-size); - border: solid 2px var(--accent-low); - border-radius: var(--small-size); - box-shadow: var(--shadow); + display: flex; + flex-wrap: wrap; + background-color: var(--bg3); + margin: var(--unit-size); + border: solid 2px var(--accent-low); + border-radius: var(--small-size); + box-shadow: var(--shadow); } .form { - order: 3; - padding: calc(2*var(--unit-size)); - height: 100%; - width: 100%; - border-radius: 0 0 var(--small-size) var(--small-size); + order: 3; + padding: calc(2 * var(--unit-size)); + height: 100%; + width: 100%; + border-radius: 0 0 var(--small-size) var(--small-size); } + .form-single { - order: 2; - padding: calc(2*var(--unit-size)); - height: 100%; - width: 100%; - border-radius: var(--small-size); + order: 2; + padding: calc(2 * var(--unit-size)); + height: 100%; + width: 100%; + border-radius: var(--small-size); } + .form label, .form-single label { - font-size: var(--medium-size); + font-size: var(--medium-size); } /* FORMS ------------------------------*/ label { - display: inline-block; - font-family: 'Montserrat', sans-serif; - font-weight: 700; - width: 100%; + display: inline-block; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + width: 100%; } input[type=text] { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); + margin-top: calc(var(--unit-size) * 0.5); + width: calc(100% - var(--unit-size)); + background-color: var(--bg2); + box-shadow: var(--shadow); + border: solid 2px var(--accent-low); + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); + color: var(--fg); + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); } .form input[type=checkbox] { - float: left; - margin-right: calc(var(--unit-size) * 0.5); - margin-top: calc(var(--unit-size) * 0.2); + float: left; + margin-right: calc(var(--unit-size) * 0.5); + margin-top: calc(var(--unit-size) * 0.2); } button[type=submit] { - background: var(--bg1); - padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); - color: var(--fg); - border-style: solid; - border-color: var(--accent); - border-radius: var(--unit-size); - border-width: 2px; - font-family: 'Montserrat', sans-serif; - font-size: var(--small-size); - font-weight: 700; + background: var(--bg1); + padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); + color: var(--fg); + border-style: solid; + border-color: var(--accent); + border-radius: var(--unit-size); + border-width: 2px; + font-family: 'Montserrat', sans-serif; + font-size: var(--small-size); + font-weight: 700; } #save_bio { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - height: calc(10 * var(--unit-size)); - box-shadow: var(--shadow); - background-color: var(--bg2); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); - word-wrap: break-word; - resize: vertical; + margin-top: calc(var(--unit-size) * 0.5); + width: calc(100% - var(--unit-size)); + height: calc(10 * var(--unit-size)); + box-shadow: var(--shadow); + background-color: var(--bg2); + border: solid 2px var(--accent-low); + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); + color: var(--fg); + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); + word-wrap: break-word; + resize: vertical; } #save_phone_number { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); + margin-top: calc(var(--unit-size) * 0.5); + width: calc(100% - var(--unit-size)); + background-color: var(--bg2); + box-shadow: var(--shadow); + border: solid 2px var(--accent-low); + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); + color: var(--fg); + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); } -#save_language{ - margin-top: calc(var(--unit-size) * 0.5); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); +#save_language { + margin-top: calc(var(--unit-size) * 0.5); + background-color: var(--bg2); + box-shadow: var(--shadow); + border: solid 2px var(--accent-low); + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); + color: var(--fg); + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); } + select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: url("../../icons/drop.svg"); - background-size: var(--main-size); - background-position: 95% 50%; - background-repeat: no-repeat; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("../../icons/drop.svg"); + background-size: var(--main-size); + background-position: 95% 50%; + background-repeat: no-repeat; } .help-text { - font-size: var(--medium-size); - font-style: italic; - color: var(--fg); - margin-bottom: var(--unit-size); + font-size: var(--medium-size); + font-style: italic; + color: var(--fg); + margin-bottom: var(--unit-size); } .form-single input[type=checkbox] { - margin-left: var(--unit-size); + margin-left: var(--unit-size); } /* JS CROPPING */ #img-cropped { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } + #img-container { - margin: var(--main-size) auto; - max-width: 60%; + margin: var(--main-size) auto; + max-width: 60%; } + .cropper-view-box, .cropper-face { - border-radius: 50%; + border-radius: 50%; } /* NOTIFICATIONS TABS */ /* visual feedback */ ul input[type=radio] + label { - color: var(--accent); + color: var(--accent); } + ul input[type=radio]:checked + label { - color: var(--fg); + color: var(--fg); } + ul input[type=radio]:focus + label { - color: var(--fg); + color: var(--fg); } /* show/hide each tab */ ul input[type=radio]:not(:checked) + label + div { - display: none; + display: none; } + ul input[type=radio]:checked + label + div { - display: flex; + display: flex; } /* hide radio buttons */ input[type=radio] { - position: absolute; - z-index: 1; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); + position: absolute; + z-index: 1; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } #form-tabs { - order: 2; - width: 100%; - font-size: var(--medium-size); + order: 2; + width: 100%; + font-size: var(--medium-size); } + #form-tabs ul { - display: flex; - flex-wrap: wrap; - border-radius: 0 0 var(--unit-size) var(--unit-size); - background-color: var(--bg1); - justify-content: space-evenly; - width: 100%; + display: flex; + flex-wrap: wrap; + border-radius: 0 0 var(--unit-size) var(--unit-size); + background-color: var(--bg1); + justify-content: space-evenly; + width: 100%; } + #form-tabs ul label { - order: 1; - flex: 0; + order: 1; + flex: 0; } #tabs { - padding: var(--medium-size); - text-transform: capitalize; + padding: var(--medium-size); + text-transform: capitalize; } #form-tabs ul .form { - order: 2; - padding: calc(2*var(--unit-size)); - background-color: var(--bg3) !important; - height: 100%; - margin-left: 0; - margin-right: 0; - margin-top: 0; - box-shadow: none; - border-radius: 0 0 var(--unit-size) var(--unit-size); - font-size: var(--unit-size); + order: 2; + padding: calc(2 * var(--unit-size)); + background-color: var(--bg3) !important; + height: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + box-shadow: none; + 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 { + width: 100%; } + #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] { - background: var(--bg1); - padding: 0.6em 1.2em; - 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; + background: var(--bg1); + padding: 0.6em 1.2em; + 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; } + .secondary button[type=submit]:focus, .secondary button[type=submit]:hover { - border-radius: var(--unit-size); - box-shadow: 0 0 8px var(--accent); + border-radius: var(--unit-size); + box-shadow: 0 0 8px var(--accent); } \ No newline at end of file diff --git a/public/assets/fonts/inter/inter.css b/public/assets/fonts/inter/inter.css index f450010124..9718343664 100644 --- a/public/assets/fonts/inter/inter.css +++ b/public/assets/fonts/inter/inter.css @@ -1,154 +1,163 @@ @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 100; - font-display: swap; - 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; - 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-family: 'Inter'; + font-style: normal; + font-weight: 100; + font-display: swap; + 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: normal; - font-weight: 200; - font-display: swap; - 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; - 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-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-family: 'Inter'; - font-style: normal; - font-weight: 300; - font-display: swap; - 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; - 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-family: 'Inter'; + font-style: normal; + font-weight: 200; + font-display: swap; + 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: normal; - font-weight: 400; - font-display: swap; - 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; - 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-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-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - 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; - 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-family: 'Inter'; + font-style: normal; + font-weight: 300; + font-display: swap; + 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: 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-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-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-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + 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: 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-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-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-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + 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; - 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"); + 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-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-family: 'Inter var'; - font-weight: 100 900; - font-display: swap; - font-style: normal; - font-named-instance: 'Regular'; - src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + 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; - font-display: swap; - font-style: italic; - font-named-instance: 'Italic'; - src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); } @@ -192,9 +202,9 @@ explicitly, e.g. */ @font-face { - font-family: 'Inter var experimental'; - font-weight: 100 900; - font-display: swap; - font-style: oblique 0deg 10deg; - src: url("Inter.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url("Inter.var.woff2?v=3.19") format("woff2"); } diff --git a/public/assets/fonts/manrope/manrope.css b/public/assets/fonts/manrope/manrope.css index ea1de49de8..3a45583087 100644 --- a/public/assets/fonts/manrope/manrope.css +++ b/public/assets/fonts/manrope/manrope.css @@ -1,13 +1,13 @@ @font-face { font-family: 'Manrope'; - font-style: normal; + font-style: normal; src: url(Manrope-Regular.woff2), url(Manrope-Regular.woff); } @font-face { font-family: 'Manrope-ExtraBold'; - font-style: normal; + font-style: normal; src: url(Manrope-ExtraBold.woff2), url(Manrope-ExtraBold.woff2); } \ No newline at end of file diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index dfc267c8d1..36a052eb8c 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,4 +1,5 @@
+ {{ icon('menu', 'icon icon-left') | raw }} {% if app.user %}