From 915f1dfcdb4c9bd7bb3dcd9c046135d6ee6d46d9 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Thu, 13 Aug 2020 23:32:41 +0100 Subject: [PATCH] [UI] Complete base CSS overhaul and new theme --- public/assets/css/base.css | 70 ++++++++--------- public/assets/css/base_mid.css | 125 ++++++++++++++++++++++------- public/assets/css/base_small.css | 130 ++++++++++++++++++++++++------- templates/base.html.twig | 3 - 4 files changed, 230 insertions(+), 98 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 65ef0bd56c..c71719fd5e 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -1,23 +1,34 @@ :root { + /* fonts */ --head-font: 'Montserrat', sans-serif; --main-font: 'Open Sans', sans-serif; + + /* font and margin sizes */ --main-size: 1.25em; --medium-size: 0.8em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 2em; - --nav-size: 15em; + --nav-size: 14em; + + /* colours and shadows */ + --fg: #eceff4; + --accent: #81a1c1; + --bg1: #2e3440; + --bg2: #3b4252; + --bg3: #4c566a; + --bg4: #2e344075; + --bg5: #2e344090; + --shadow: 0px 0px 90px 0px rgba(46,52,64,0.95); } +/* DEFAULTS */ body, html { - background: #2E3945; - background: -moz-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: -webkit-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: linear-gradient(80deg, #2E3945 0%, #61778C 100%); + background: var(--bg3); background-attachment: fixed; background-size: cover; - color: #F6F6F6; + color: var(--fg); font-family: var(--main-font); font-size: var(--main-size); margin: 0; @@ -39,20 +50,20 @@ li { a:link { text-decoration: none; outline: 0; - color: #F6F6F6; + color: var(--fg); } a:visited { outline: 0; - color: #F6F6F6; + color: var(--fg); margin: 0; padding: 0; } a:hover { - color: #F6F6F6; + color: var(--fg); transition: all 0.8s ease; } a:focus { - color: #F6F6F6; + color: var(--fg); transition: all 0.8s ease; } @@ -61,21 +72,14 @@ b { font-weight: 800; } -#container { - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} - -/*-------------------------------------*/ -/* HEADER -----------------------------*/ +/* HEADER */ #header { position: fixed; top: 0; left: 0; right: 0; - background-color: #272E36; - box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); + background-color: var(--bg1); + box-shadow: var(--shadow); padding: var(--main-size); height: var(--main-size); } @@ -126,27 +130,22 @@ b { order: 2; } -#search { - order: 3; - width: var(--unit-size); - height: var(--unit-size); +/* left panel z-index fix */ +.form { + position: relative; + z-index: 0; } - -.icon-search { - stroke-width: 0; - stroke: currentColor; - fill: currentColor; - align-self: center; +#header { + z-index: 1; } - /* RIGHT PANEL */ #right-panel { - order: 4; + order: 3; } .arrow { - border: solid white; + border: solid var(--fg); border-width: 0 3px 3px 0; display: inline-block; padding: 0.3em; @@ -162,8 +161,9 @@ b { width: var(--nav-size); height: calc(100vh - (3 * var(--unit-size))); position: fixed; - background-color: rgba(0, 0, 0, 0.40); + background-color: var(--bg2); margin-top: calc(3 * var(--main-size)); + z-index: 0; } .right-panel input[type=checkbox] { @@ -181,7 +181,7 @@ b { } .arrow label { display: block; - cursor: pointer + cursor: pointer; } #toggle-right { position: absolute; diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index 1555f45c12..698470bfee 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -1,23 +1,34 @@ :root { + /* fonts */ --head-font: 'Montserrat', sans-serif; --main-font: 'Open Sans', sans-serif; + + /* font and margin sizes */ --main-size: 1.2em; --medium-size: 0.85em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 5em; --nav-size: 15em; + + /* colours and shadows */ + --fg: #eceff4; + --accent: #81a1c1; + --bg1: #2e3440; + --bg2: #3b4252; + --bg3: #4c566a; + --bg4: #2e344075; + --bg5: #2e344090; + --shadow: 0px 0px 90px 0px rgba(46,52,64,0.95); } +/* DEFAULTS */ body, html { - background: #2E3945; - background: -moz-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: -webkit-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: linear-gradient(80deg, #2E3945 0%, #61778C 100%); + background: var(--bg3); background-attachment: fixed; background-size: cover; - color: #F6F6F6; + color: var(--fg); font-family: var(--main-font); font-size: var(--main-size); margin: 0; @@ -39,18 +50,22 @@ li { a:link { text-decoration: none; outline: 0; - color: #F6F6F6; + color: var(--fg); margin: 0; padding: 0; } a:visited { outline: 0; - color: #F6F6F6; + color: var(--fg); margin: 0; padding: 0; } +a:hover { + color: var(--fg); + transition: all 0.8s ease; +} a:focus { - color: #F6F6F6; + color: var(--fg); transition: all 0.8s ease; } @@ -59,15 +74,14 @@ b { font-weight: 800; } -/*-------------------------------------*/ -/* HEADER -----------------------------*/ +/* HEADER */ #header { position: fixed; top: 0; left: 0; right: 0; - background-color: #272E36; - box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); + background-color: var(--bg1); + box-shadow: var(--shadow); padding: var(--main-size); height: var(--main-size); } @@ -92,7 +106,7 @@ b { .icon-menu label { width: var(--unit-size); height: 2px; - background: #F6F6F6; + background: var(--fg); transition: all .5s ease-in-out; } .icon-menu label::before, @@ -101,7 +115,7 @@ b { position: absolute; width: var(--unit-size); height: 2px; - background: #F6F6F6; + background: var(--fg); transition: all .5s ease-in-out; } .icon-menu label::before { @@ -147,22 +161,6 @@ b { order: 1; } -#search { - order: 3; -} - -.icon-search { - margin: 0; - padding: 0; - display: inline-block; - width: var(--unit-size); - height: var(--unit-size); - stroke-width: 0; - stroke: currentColor; - fill: currentColor; - align-self: center; -} - /* left panel z-index fix */ .form { position: relative; @@ -170,4 +168,71 @@ b { } #header { z-index: 1; +} + + +/* RIGHT PANEL */ +#right-panel { + order: 3; +} + +.arrow { + border: solid var(--fg); + border-width: 0 3px 3px 0; + display: inline-block; + padding: 0.3em; +} +.right { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +.rss { + display: flex; + flex-direction: column; + width: var(--nav-size); + height: calc(100vh - (3 * var(--unit-size))); + position: fixed; + background-color: var(--bg3); + margin-top: calc(3 * var(--main-size)); +} + +.right-panel input[type=checkbox] { + transform: scale(3); + -ms-transform: scale(3); + -webkit-transform: scale(3); + padding: 3em; +} + +/* untoggled */ +.rss { + right: -100%; + top: 0; + transition: 0.3s ease; +} +.arrow label { + display: block; + cursor: pointer +} +#toggle-right { + position: absolute; + z-index: 2; + cursor: pointer; + opacity: 0; +} +#toggle-right:not(:checked)+.arrow { + transform: rotate(135deg); + transition: 0.3s ease; +} + +/* toggled */ +#toggle-right:checked~.rss { + display: flex; + right: 0; + top: 0; + transition: 0.3s ease; +} +#toggle-right:checked+.arrow { + transform: rotate(-45deg); + transition: 0.3s ease; } \ No newline at end of file diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index 1e4264bfe1..8984e57255 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -1,23 +1,34 @@ :root { + /* fonts */ --head-font: 'Montserrat', sans-serif; --main-font: 'Open Sans', sans-serif; + + /* font and margin sizes */ --main-size: 1.2em; --medium-size: 0.85em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 2em; --nav-size: 100%; + + /* colours and shadows */ + --fg: #eceff4; + --accent: #81a1c1; + --bg1: #2e3440; + --bg2: #3b4252; + --bg3: #4c566a; + --bg4: #2e344075; + --bg5: #2e344090; + --shadow: 0px 0px 90px 0px rgba(46,52,64,0.95); } +/* DEFAULTS */ body, html { - background: #2E3945; - background: -moz-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: -webkit-linear-gradient(80deg, #2E3945 0%, #61778C 100%); - background: linear-gradient(80deg, #2E3945 0%, #61778C 100%); + background: var(--bg3); background-attachment: fixed; background-size: cover; - color: #F6F6F6; + color: var(--fg); font-family: var(--main-font); font-size: var(--main-size); margin: 0; @@ -39,18 +50,22 @@ li { a:link { text-decoration: none; outline: 0; - color: #F6F6F6; + color: var(--fg); margin: 0; padding: 0; } a:visited { outline: 0; - color: #F6F6F6; + color: var(--fg); margin: 0; padding: 0; } +a:hover { + color: var(--fg); + transition: all 0.8s ease; +} a:focus { - color: #F6F6F6; + color: var(--fg); transition: all 0.8s ease; } @@ -59,15 +74,14 @@ b { font-weight: 800; } -/*-------------------------------------*/ -/* HEADER -----------------------------*/ +/* HEADER */ #header { position: fixed; top: 0; left: 0; right: 0; - background-color: #272E36; - box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); + background-color: var(--bg1); + box-shadow: var(--shadow); padding: var(--main-size); height: var(--main-size); } @@ -75,20 +89,24 @@ b { #top { display: flex; justify-content: space-between; + align-items: center; flex-wrap: wrap; width: 100%; - align-items: center; } .icon-menu { position: relative; + display: flex; + align-items: center; width: var(--unit-size); height: var(--unit-size); + cursor: pointer; + transition: all .5s ease-in-out; } .icon-menu label { width: var(--unit-size); height: 2px; - background: #F6F6F6; + background: var(--fg); transition: all .5s ease-in-out; } .icon-menu label::before, @@ -97,7 +115,7 @@ b { position: absolute; width: var(--unit-size); height: 2px; - background: #F6F6F6; + background: var(--fg); transition: all .5s ease-in-out; } .icon-menu label::before { @@ -143,21 +161,6 @@ b { order: 1; } -#search { - order: 3; -} - -.icon-search { - margin: 0; - padding: 0; - display: inline-block; - width: var(--unit-size); - height: var(--unit-size); - stroke-width: 0; - stroke: currentColor; - fill: currentColor; -} - /* left panel z-index fix */ .form { position: relative; @@ -165,4 +168,71 @@ b { } #header { z-index: 1; +} + + +/* RIGHT PANEL */ +#right-panel { + order: 3; +} + +.arrow { + border: solid var(--fg); + border-width: 0 3px 3px 0; + display: inline-block; + padding: 0.3em; +} +.right { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +.rss { + display: flex; + flex-direction: column; + width: var(--nav-size); + height: calc(100vh - (3 * var(--unit-size))); + position: fixed; + background-color: var(--bg1); + margin-top: calc(3 * var(--main-size)); +} + +.right-panel input[type=checkbox] { + transform: scale(3); + -ms-transform: scale(3); + -webkit-transform: scale(3); + padding: 3em; +} + +/* untoggled */ +.rss { + right: -100%; + top: 0; + transition: 0.3s ease; +} +.arrow label { + display: block; + cursor: pointer +} +#toggle-right { + position: absolute; + z-index: 2; + cursor: pointer; + opacity: 0; +} +#toggle-right:not(:checked)+.arrow { + transform: rotate(135deg); + transition: 0.3s ease; +} + +/* toggled */ +#toggle-right:checked~.rss { + display: flex; + right: 0; + top: 0; + transition: 0.3s ease; +} +#toggle-right:checked+.arrow { + transform: rotate(-45deg); + transition: 0.3s ease; } \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index b1ef9fa2a7..aba581a4e0 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -63,9 +63,6 @@ GNU social - - -