From 2af133dfe7b643c1376edea7e453d2c78df717e9 Mon Sep 17 00:00:00 2001 From: zelfroster Date: Wed, 5 Apr 2023 01:06:38 +0530 Subject: [PATCH] refactor: migrate entire css code to scss --- webui-src/app/_reset.scss | 124 ----- webui-src/app/mail/mail_util.js | 2 +- webui-src/app/main.sass | 12 - webui-src/app/scss/abstracts/_functions.scss | 4 + webui-src/app/scss/abstracts/_index.scss | 3 + webui-src/app/scss/abstracts/_mixins.scss | 20 + webui-src/app/scss/abstracts/_variables.scss | 22 + webui-src/app/scss/base/_base.scss | 149 ++++++ webui-src/app/scss/base/_index.scss | 2 + webui-src/app/scss/base/_reset.scss | 79 +++ webui-src/app/scss/components/_buttons.scss | 12 + webui-src/app/scss/components/_index.scss | 3 + webui-src/app/scss/components/_navbar.scss | 127 +++++ .../app/scss/components/_progress-bar.scss | 23 + .../{_chat.sass => scss/extras/_chat.scss} | 0 .../extras/_green-black.scss} | 0 .../{orange.scss => scss/extras/_orange.scss} | 0 webui-src/app/scss/layouts/_index.scss | 3 + .../app/scss/layouts/_modal-container.scss | 28 + .../scss/layouts/_notification-container.scss | 8 + webui-src/app/scss/layouts/_widget.scss | 17 + webui-src/app/scss/main.scss | 17 + .../board.css => scss/pages/_board.scss} | 0 .../channel.css => scss/pages/_channel.scss} | 0 .../{chat/chat.css => scss/pages/_chat.scss} | 0 .../config.css => scss/pages/_config.scss} | 0 .../files.css => scss/pages/_files.scss} | 0 .../forums.css => scss/pages/_forums.scss} | 0 webui-src/app/scss/pages/_home.scss | 52 ++ webui-src/app/scss/pages/_index.scss | 11 + webui-src/app/scss/pages/_login.scss | 43 ++ .../{mail/mail.css => scss/pages/_mail.scss} | 4 +- .../network.css => scss/pages/_network.scss} | 0 .../people.css => scss/pages/_people.scss} | 2 +- webui-src/app/theme.css | 486 ------------------ 35 files changed, 627 insertions(+), 626 deletions(-) delete mode 100644 webui-src/app/_reset.scss delete mode 100644 webui-src/app/main.sass create mode 100644 webui-src/app/scss/abstracts/_functions.scss create mode 100644 webui-src/app/scss/abstracts/_index.scss create mode 100644 webui-src/app/scss/abstracts/_mixins.scss create mode 100644 webui-src/app/scss/abstracts/_variables.scss create mode 100644 webui-src/app/scss/base/_base.scss create mode 100644 webui-src/app/scss/base/_index.scss create mode 100644 webui-src/app/scss/base/_reset.scss create mode 100644 webui-src/app/scss/components/_buttons.scss create mode 100644 webui-src/app/scss/components/_index.scss create mode 100644 webui-src/app/scss/components/_navbar.scss create mode 100644 webui-src/app/scss/components/_progress-bar.scss rename webui-src/app/{_chat.sass => scss/extras/_chat.scss} (100%) rename webui-src/app/{green-black.scss => scss/extras/_green-black.scss} (100%) rename webui-src/app/{orange.scss => scss/extras/_orange.scss} (100%) create mode 100644 webui-src/app/scss/layouts/_index.scss create mode 100644 webui-src/app/scss/layouts/_modal-container.scss create mode 100644 webui-src/app/scss/layouts/_notification-container.scss create mode 100644 webui-src/app/scss/layouts/_widget.scss create mode 100644 webui-src/app/scss/main.scss rename webui-src/app/{boards/board.css => scss/pages/_board.scss} (100%) rename webui-src/app/{channels/channel.css => scss/pages/_channel.scss} (100%) rename webui-src/app/{chat/chat.css => scss/pages/_chat.scss} (100%) rename webui-src/app/{config/config.css => scss/pages/_config.scss} (100%) rename webui-src/app/{files/files.css => scss/pages/_files.scss} (100%) rename webui-src/app/{forums/forums.css => scss/pages/_forums.scss} (100%) create mode 100644 webui-src/app/scss/pages/_home.scss create mode 100644 webui-src/app/scss/pages/_index.scss create mode 100644 webui-src/app/scss/pages/_login.scss rename webui-src/app/{mail/mail.css => scss/pages/_mail.scss} (98%) rename webui-src/app/{network/network.css => scss/pages/_network.scss} (100%) rename webui-src/app/{people/people.css => scss/pages/_people.scss} (97%) delete mode 100644 webui-src/app/theme.css diff --git a/webui-src/app/_reset.scss b/webui-src/app/_reset.scss deleted file mode 100644 index 4e96ea0..0000000 --- a/webui-src/app/_reset.scss +++ /dev/null @@ -1,124 +0,0 @@ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js index 9c7419d..14d7ec0 100644 --- a/webui-src/app/mail/mail_util.js +++ b/webui-src/app/mail/mail_util.js @@ -208,7 +208,7 @@ const MessageView = () => { m('button[id=show-less][style="display: none;"]', { onclick: () => { document.querySelector('#show-more').style.display = 'block'; - document.querySelector('#truncate').style.height = '1rem'; + document.querySelector('#truncate').style.height = '22px'; document.querySelector('#show-less').style.display = 'none'; } }, 'Show Less'), diff --git a/webui-src/app/main.sass b/webui-src/app/main.sass deleted file mode 100644 index 663bb02..0000000 --- a/webui-src/app/main.sass +++ /dev/null @@ -1,12 +0,0 @@ -/*@import "reset" */ - -html, body, #main - height: 100% - - -/*body */ -/* font-family: "Sans-serif" */ - - -@import "chat" -@import "green-black" diff --git a/webui-src/app/scss/abstracts/_functions.scss b/webui-src/app/scss/abstracts/_functions.scss new file mode 100644 index 0000000..e3e612d --- /dev/null +++ b/webui-src/app/scss/abstracts/_functions.scss @@ -0,0 +1,4 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass mixins. +// ----------------------------------------------------------------------------- + diff --git a/webui-src/app/scss/abstracts/_index.scss b/webui-src/app/scss/abstracts/_index.scss new file mode 100644 index 0000000..5b4129c --- /dev/null +++ b/webui-src/app/scss/abstracts/_index.scss @@ -0,0 +1,3 @@ +@forward "variables"; +@forward "mixins"; +@forward "functions"; diff --git a/webui-src/app/scss/abstracts/_mixins.scss b/webui-src/app/scss/abstracts/_mixins.scss new file mode 100644 index 0000000..ac15d2b --- /dev/null +++ b/webui-src/app/scss/abstracts/_mixins.scss @@ -0,0 +1,20 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass mixins. +// ----------------------------------------------------------------------------- + +/// Button Mixin +@mixin button($bg-color) { + color: white; + background: $bg-color; + font-size: 1.2em; + padding: 5px 10px; + border: 0; + border-radius: 5px; + cursor: pointer; + box-shadow: inset -3px -3px 0 darken($color: $bg-color, $amount: 20); + + &:active { + outline: none; + box-shadow: inset 3px 3px 0 darken($color: $bg-color, $amount: 20); + } +} diff --git a/webui-src/app/scss/abstracts/_variables.scss b/webui-src/app/scss/abstracts/_variables.scss new file mode 100644 index 0000000..8013013 --- /dev/null +++ b/webui-src/app/scss/abstracts/_variables.scss @@ -0,0 +1,22 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass variables. +// ----------------------------------------------------------------------------- + + +//---------------------------------- Colors ----------------------------------// +/// Primary color +$primary-color: #019DFF !default; + +/// Primary light color +$primary-light-color: #9BDAFF !default; + +/// Light red +$red-color: #FF3A4A !default; + +/// Dark +$dark-color: #14141B !default; + +/// Light +$light-color: #EEF3F6 !default; + + diff --git a/webui-src/app/scss/base/_base.scss b/webui-src/app/scss/base/_base.scss new file mode 100644 index 0000000..10e5adc --- /dev/null +++ b/webui-src/app/scss/base/_base.scss @@ -0,0 +1,149 @@ +/****************************** +General site-wide rules +******************************/ + +#main { + height: 100vh; +} + +/* Main base div for tabs used by m.route */ +.content { + height: 100%; + overflow: hidden; +} + +/* Main tab content */ +#tab-content { + height: 100%; + background-color: #eef3f6; + overflow: auto; +} +/* Individual tab pages */ +.tab-page { + animation: fadein 0.5s; +} + +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + box-sizing: border-box; + background: white; + max-width: 100%; + font-size: 1.2em; + font-weight: 400; + border: 1px solid #ccc; + border-radius: 5px; + padding: 0.5em; + /* Disable chromium's focused element hinting*/ + outline: none; +} +input:focus { + border: 1px solid #3ba4d7; + box-shadow: inset 0 0 5px #ccc; +} +input.stretched { + width: 90%; +} +input.small { + max-width: 70%; + font-size: 1em; + padding: 0.1em; +} +input.searchbar { + display: block; + margin: 0.9em 0 0 0.9em; +} + +table { + padding: 20px; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + text-align: center; + color: #333; + font-size: 1.2em; +} +table th { + font-weight: 100; + font-size: 1.3em; + color: black; + border-bottom: 2px solid #eee; +} +table tr { + border-bottom: 1px solid #eee; +} + +h3 { + font-size: 2em; + font-weight: 100; + color: #444; +} +hr { + margin-left: 0; + color: #aaa; +} + +.grid-2col { + display: grid; + grid-template-columns: auto auto; + grid-row-gap: 16px; + justify-content: start; +} +.grid-2col input[type='checkbox'] { + margin-top: 20px; +} + +.error { + color: red; +} + +.tooltip { + color: #333; + /*display: inline-block;*/ + position: relative; +} +.tooltiptext { + visibility: hidden; + position: absolute; + top: 100%; + left: 50%; + min-width: 250px; + margin-left: -120px; + z-index: 1; + color: #ccc; + background-color: #333; + font-size: 0.9em; + text-align: center; + padding: 5px 0; + border-radius: 5px; +} +.tooltip:hover .tooltiptext { + visibility: visible; + animation: fadein 0.5s; +} + +/****************************** +Animations +******************************/ + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.fadein { + animation: fadein 0.5s; +} + +@keyframes swipe-from-left { + from { + margin-left: 100%; + } + to { + margin-left: 0; + } +} diff --git a/webui-src/app/scss/base/_index.scss b/webui-src/app/scss/base/_index.scss new file mode 100644 index 0000000..9117807 --- /dev/null +++ b/webui-src/app/scss/base/_index.scss @@ -0,0 +1,2 @@ +@forward "reset"; +@forward "base"; diff --git a/webui-src/app/scss/base/_reset.scss b/webui-src/app/scss/base/_reset.scss new file mode 100644 index 0000000..51722c6 --- /dev/null +++ b/webui-src/app/scss/base/_reset.scss @@ -0,0 +1,79 @@ +html { + font-size: 100%; + box-sizing: border-box; +} + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: inherit; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; + padding: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role="list"], +ol[role="list"] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; + font-family: Arial, Helvetica, sans-serif; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations and transitions for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/webui-src/app/scss/components/_buttons.scss b/webui-src/app/scss/components/_buttons.scss new file mode 100644 index 0000000..19a68cd --- /dev/null +++ b/webui-src/app/scss/components/_buttons.scss @@ -0,0 +1,12 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide button styles. +// ----------------------------------------------------------------------------- +@use "../abstracts" as *; + +button { + @include button($primary-color); +} +button.red { + @include button($red-color); +} + diff --git a/webui-src/app/scss/components/_index.scss b/webui-src/app/scss/components/_index.scss new file mode 100644 index 0000000..a1d7ed0 --- /dev/null +++ b/webui-src/app/scss/components/_index.scss @@ -0,0 +1,3 @@ +@forward "buttons"; +@forward "navbar"; +@forward "progress-bar"; diff --git a/webui-src/app/scss/components/_navbar.scss b/webui-src/app/scss/components/_navbar.scss new file mode 100644 index 0000000..eec6952 --- /dev/null +++ b/webui-src/app/scss/components/_navbar.scss @@ -0,0 +1,127 @@ +/* Navbar */ +.nav-logo { + width: 130px; + padding: 1.2rem 0; + display: flex; + gap: 0.3rem; + align-items: center; +} +.nav-logo img { + width: 1.6rem; +} +.nav-logo h4 { + color: white; + align-self: end; +} +nav.tab-menu { + border-right: 4px solid #3ba4d7; + background-color: #14141B; + box-shadow: 0 5px 5px #aaa; + float: left; + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + padding: 8px 6px; + margin-right: 0rem; +} +.tab-menu-item { + width: 10rem; + border-radius: 6px; + display: flex; + align-items: center; +} +a.tab-menu-item { + margin: 4px; + padding: 10px; + text-align: center; + text-decoration: none; + color: #ccc; + font-size: 0.875em; + /* CSS capitalization is magical! */ + text-transform: capitalize; + transition: all 300ms; + /* To vertically stack child nodes */ + display: inline-flex; + flex-direction: row; +} +.tab-menu-item:hover { + background-color: #FFFFFF15; +} + +.tab-menu-item.selected-tab-item { + color: #99DEFF; + background-color: #89BEFA20; + font-weight: medium; +} +.sidebar { + height: 30%; + width: 200px; + background-color: white; +} +.sidebar a { + text-decoration: none; + text-transform: capitalize; + padding: 1em; + cursor: pointer; + display: block; + font-size: 0.95em; + color: #999; +} +.sidebar a:hover { + color: #222; +} +.sidebar .selected-sidebar-link { + font-weight: bold; + color: #222; + border-left: 5px solid #3ba4d7; + animation: expand-left-border 0.1s; +} +.sidebarquickview { + height: 30%; + width: 200px; + top: 300px; + background-color: white; +} +.sidebarquickview a { + text-decoration: none; + text-transform: capitalize; + padding: 1em; + cursor: pointer; + display: block; + font-size: 0.95em; + color: #999; +} +.sidebarquickview a:hover { + color: #222; +} +.sidebarquickview .selected-sidebarquickview-link { + font-weight: bold; + color: #222; + border-left: 5px solid #3ba4d7; + animation: expand-left-border 0.1s; +} +/* Content adjacent to sidebar */ +.node-panel { + position: relative; + bottom: 155px; + margin-left: 200px; + animation: fadein 0.5s; +} + +i.sidenav-icon { + width: 2.5rem; + height: 1.4rem; + display: grid; + place-items: center; + padding-right: 0.5rem; +} + +@keyframes expand-left-border { + from { + border-left: 0; + } + to { + border-left: 5px solid #3ba4d7; + } +} diff --git a/webui-src/app/scss/components/_progress-bar.scss b/webui-src/app/scss/components/_progress-bar.scss new file mode 100644 index 0000000..29408b9 --- /dev/null +++ b/webui-src/app/scss/components/_progress-bar.scss @@ -0,0 +1,23 @@ +.progressbar { + width: 100%; + border-radius: 500px; + background-color: #eef3f6; + position: relative; + text-align: left; +} +.progressbar:before { + position: absolute; + text-align: center; + left: 0; + right: 0; +} +.progress-status { + display: inline-block; + height: 100%; + padding: 5px; + border-radius: 500px; + color: #000; + background-color: #3ba4d7; + text-align: center; +} + diff --git a/webui-src/app/_chat.sass b/webui-src/app/scss/extras/_chat.scss similarity index 100% rename from webui-src/app/_chat.sass rename to webui-src/app/scss/extras/_chat.scss diff --git a/webui-src/app/green-black.scss b/webui-src/app/scss/extras/_green-black.scss similarity index 100% rename from webui-src/app/green-black.scss rename to webui-src/app/scss/extras/_green-black.scss diff --git a/webui-src/app/orange.scss b/webui-src/app/scss/extras/_orange.scss similarity index 100% rename from webui-src/app/orange.scss rename to webui-src/app/scss/extras/_orange.scss diff --git a/webui-src/app/scss/layouts/_index.scss b/webui-src/app/scss/layouts/_index.scss new file mode 100644 index 0000000..060833d --- /dev/null +++ b/webui-src/app/scss/layouts/_index.scss @@ -0,0 +1,3 @@ +@forward "widget"; +@forward "modal-container"; +@forward "notification-container"; diff --git a/webui-src/app/scss/layouts/_modal-container.scss b/webui-src/app/scss/layouts/_modal-container.scss new file mode 100644 index 0000000..bd44e31 --- /dev/null +++ b/webui-src/app/scss/layouts/_modal-container.scss @@ -0,0 +1,28 @@ +#modal-container { + display: none; + position: fixed; + z-index: 1; + height: 100%; + top: 0; + left: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); +} + +.modal-content { + position: absolute; + color: #555; + width: 40%; + /*height: 40%;*/ + min-height: 250px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 2em; + border-radius: 20px; + animation: fadein 0.5s; +} +.modal-content > button { + float: right; +} diff --git a/webui-src/app/scss/layouts/_notification-container.scss b/webui-src/app/scss/layouts/_notification-container.scss new file mode 100644 index 0000000..11c36f0 --- /dev/null +++ b/webui-src/app/scss/layouts/_notification-container.scss @@ -0,0 +1,8 @@ +#notification-container { + position: absolute; + bottom: 0; + right: 0; +} +#notification-container .notification { +} + diff --git a/webui-src/app/scss/layouts/_widget.scss b/webui-src/app/scss/layouts/_widget.scss new file mode 100644 index 0000000..635ab4d --- /dev/null +++ b/webui-src/app/scss/layouts/_widget.scss @@ -0,0 +1,17 @@ +.widget { + margin: 1em; + padding: 1em; + border-radius: 10px; + background-color: white; +} +.widget > p { + font-size: 0.9em; + color: #666; +} +.widget .tooltip { + float: right; +} +.widget-half { + max-width: 50%; +} + diff --git a/webui-src/app/scss/main.scss b/webui-src/app/scss/main.scss new file mode 100644 index 0000000..2a9f14c --- /dev/null +++ b/webui-src/app/scss/main.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// 1. Configuration and helpers +@use "abstracts"; + +// 2. Base stuff +@use "base"; + +// 3. Components +@use "components"; + +// 4. Layout-related sections +@use "layouts"; + +// 5. Page-specific styles +@use "pages"; + diff --git a/webui-src/app/boards/board.css b/webui-src/app/scss/pages/_board.scss similarity index 100% rename from webui-src/app/boards/board.css rename to webui-src/app/scss/pages/_board.scss diff --git a/webui-src/app/channels/channel.css b/webui-src/app/scss/pages/_channel.scss similarity index 100% rename from webui-src/app/channels/channel.css rename to webui-src/app/scss/pages/_channel.scss diff --git a/webui-src/app/chat/chat.css b/webui-src/app/scss/pages/_chat.scss similarity index 100% rename from webui-src/app/chat/chat.css rename to webui-src/app/scss/pages/_chat.scss diff --git a/webui-src/app/config/config.css b/webui-src/app/scss/pages/_config.scss similarity index 100% rename from webui-src/app/config/config.css rename to webui-src/app/scss/pages/_config.scss diff --git a/webui-src/app/files/files.css b/webui-src/app/scss/pages/_files.scss similarity index 100% rename from webui-src/app/files/files.css rename to webui-src/app/scss/pages/_files.scss diff --git a/webui-src/app/forums/forums.css b/webui-src/app/scss/pages/_forums.scss similarity index 100% rename from webui-src/app/forums/forums.css rename to webui-src/app/scss/pages/_forums.scss diff --git a/webui-src/app/scss/pages/_home.scss b/webui-src/app/scss/pages/_home.scss new file mode 100644 index 0000000..4781c67 --- /dev/null +++ b/webui-src/app/scss/pages/_home.scss @@ -0,0 +1,52 @@ +.certificate { + margin: auto; + display: flex; + align-items: flex-start; + flex-direction: column; + align-items: center; + margin-top: 20px; +} +.textArea { + box-sizing: none; + background: transparent; + font-size: 1.1rem; + border-radius: 5px; + border: none; + resize: none; +} +.logo { + display: flex; + max-width: 500px; + justify-content: center; + align-items: center; +} +.retroshareText > h3 { + margin-right: 3px; +} +.webhelp { + background: whitesmoke; + font-size: 0.8rem; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + color: black; + border-radius: 5px; + border: 1px solid black; + padding: 10px 14px; + cursor: pointer; +} +.webhelp > i { + font-size: 1.2rem; +} +.webhelp > p { + font-weight: 600; +} +.retroshareID { + display: flex; + justify-self: start; + align-items: center; + font-size: 1.2rem; + font-family: monospace; +} diff --git a/webui-src/app/scss/pages/_index.scss b/webui-src/app/scss/pages/_index.scss new file mode 100644 index 0000000..9e3bdd9 --- /dev/null +++ b/webui-src/app/scss/pages/_index.scss @@ -0,0 +1,11 @@ +@forward "login"; +@forward "home"; +@forward "network"; +@forward "people"; +@forward "chat"; +@forward "mail"; +@forward "files"; +@forward "channel"; +@forward "forums"; +@forward "board"; +@forward "config"; diff --git a/webui-src/app/scss/pages/_login.scss b/webui-src/app/scss/pages/_login.scss new file mode 100644 index 0000000..1639ee7 --- /dev/null +++ b/webui-src/app/scss/pages/_login.scss @@ -0,0 +1,43 @@ +/* Login */ +.login-page { + background-image: linear-gradient(-45deg, #0e76a7, #7bccff); + height: 100%; + animation: fadein 0.5s; +} +.login-container { + background-color: white; + box-shadow: 3px 3px 5px #444; + margin: auto; + position: relative; + top: 100px; + max-width: 400px; + max-height: 500px; + border-radius: 5px; + + display: flex; + align-items: flex-start; + flex-direction: column; + align-items: center; +} + +.extra > label, +.extra > br, +.extra > input { + margin-bottom: 0; +} + +.login-container * { + margin-bottom: 15px; +} +.login-container > img { + margin-top: 15px; + margin-bottom: 30px; +} + +.login-container extra { + margin: 0; +} +.login-container > a { + text-decoration: underline; + cursor: pointer; +} diff --git a/webui-src/app/mail/mail.css b/webui-src/app/scss/pages/_mail.scss similarity index 98% rename from webui-src/app/mail/mail.css rename to webui-src/app/scss/pages/_mail.scss index 3d1348a..da97201 100644 --- a/webui-src/app/mail/mail.css +++ b/webui-src/app/scss/pages/_mail.scss @@ -68,7 +68,7 @@ input.star-check:checked + label.star-check { .truncate { display: flex; width: 65vw; - height: 1rem; + height: 22px; flex-wrap: wrap; gap: 4px; overflow: hidden; @@ -111,7 +111,7 @@ iframe.msg { } .mail-node-panel { position: relative; - bottom: 680px; + bottom: 755px; margin-left: 200px; animation: fadein 0.5s; } diff --git a/webui-src/app/network/network.css b/webui-src/app/scss/pages/_network.scss similarity index 100% rename from webui-src/app/network/network.css rename to webui-src/app/scss/pages/_network.scss diff --git a/webui-src/app/people/people.css b/webui-src/app/scss/pages/_people.scss similarity index 97% rename from webui-src/app/people/people.css rename to webui-src/app/scss/pages/_people.scss index f87c2d5..0da2d50 100644 --- a/webui-src/app/people/people.css +++ b/webui-src/app/scss/pages/_people.scss @@ -19,7 +19,7 @@ .defaultAvatar { width: 50px; - height: max-content; + height: 50px; aspect-ratio: 1; background: lightsteelblue; border-radius: 50%; diff --git a/webui-src/app/theme.css b/webui-src/app/theme.css deleted file mode 100644 index d4f4403..0000000 --- a/webui-src/app/theme.css +++ /dev/null @@ -1,486 +0,0 @@ -/****************************** -General site-wide rules -******************************/ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* Main base div for tabs used by m.route */ -.content { - height: 100%; - overflow: hidden; -} - -/* Main tab content */ -#tab-content { - height: 100%; - background-color: #eef3f6; - overflow: auto; -} -/* Individual tab pages */ -.tab-page { - /* This is required since main content's overflow is hidden - and bottom elements will not be entirely visible. */ - margin-bottom: 200px; - animation: fadein 0.5s; -} - -input[type='text'], -input[type='password'], -input[type='number'], -textarea { - box-sizing: border-box; - background: white; - max-width: 100%; - font-size: 1.2em; - font-weight: 400; - border: 1px solid #ccc; - border-radius: 5px; - padding: 0.5em; - /* Disable chromium's focused element hinting*/ - outline: none; -} -input:focus { - border: 1px solid #3ba4d7; - box-shadow: inset 0 0 5px #ccc; -} -input.stretched { - width: 90%; -} -input.small { - max-width: 70%; - font-size: 1em; - padding: 0.1em; -} -input.searchbar { - display: block; - margin: 0.9em 0 0 0.9em; -} - -button { - color: white; - background: #2699ed; - font-size: 1.2em; - padding: 5px 10px; - border: 0; - border-radius: 5px; - box-shadow: inset -3px -3px 0 #0d69ac; - cursor: pointer; -} -button:active { - outline: none; - box-shadow: inset 3px 3px 0 #0d69ac; -} -button.red { - background: #bd0909; - box-shadow: inset -3px -3px 0 #830000; -} - -table { - padding: 20px; - table-layout: fixed; - width: 100%; - border-collapse: collapse; - text-align: center; - color: #333; - font-size: 1.2em; -} -table th { - font-weight: 100; - font-size: 1.3em; - color: black; - border-bottom: 2px solid #eee; -} -table tr { - border-bottom: 1px solid #eee; -} - -h3 { - font-size: 2em; - font-weight: 100; - color: #444; - padding: 0; - margin: 0; -} -hr { - margin-left: 0; - color: #aaa; -} - -.widget { - margin: 1em; - padding: 1em; - border-radius: 10px; - background-color: white; -} -.widget > p { - margin: 0; - font-size: 0.9em; - color: #666; -} -.widget .tooltip { - float: right; -} -.widget-half { - max-width: 50%; -} -.certificate { - margin: auto; - display: flex; - align-items: flex-start; - flex-direction: column; - align-items: center; - margin-top: 20px; -} -.certificate > p { - margin: 0; - padding: 0; -} -.textArea { - box-sizing: none; - background: transparent; - font-size: 1.1rem; - border-radius: 5px; - border: none; - resize: none; -} - -.logo { - display: flex; - max-width: 500px; - justify-content: center; - align-items: center; -} -.retroshareText > h3 { - margin-right: 3px; -} -.webhelp { - background: whitesmoke; - font-size: 0.8rem; - border-radius: 5px; - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; - color: black; - border-radius: 5px; - border: 1px solid black; - padding: 10px 14px; - cursor: pointer; -} -.webhelp > i { - font-size: 1.2rem; -} -.webhelp > p { - margin-bottom: -4px; - font-weight: 600; -} -.retroshareID { - display: flex; - justify-self: start; - align-items: center; - font-size: 1.2rem; -} -.grid-2col { - display: grid; - grid-template-columns: auto auto; - grid-row-gap: 16px; - justify-content: start; -} -.grid-2col input[type='checkbox'] { - margin-top: 20px; -} - -.error { - color: red; -} - -.progressbar { - width: 100%; - border-radius: 500px; - background-color: #eef3f6; - position: relative; - text-align: left; -} -.progressbar:before { - position: absolute; - text-align: center; - left: 0; - right: 0; -} -.progress-status { - display: inline-block; - height: 100%; - padding: 5px; - border-radius: 500px; - color: #000; - background-color: #3ba4d7; - text-align: center; -} - -.tooltip { - color: #333; - /*display: inline-block;*/ - position: relative; -} -.tooltiptext { - visibility: hidden; - position: absolute; - top: 100%; - left: 50%; - min-width: 250px; - margin-left: -120px; - z-index: 1; - color: #ccc; - background-color: #333; - font-size: 0.9em; - text-align: center; - padding: 5px 0; - border-radius: 5px; -} -.tooltip:hover .tooltiptext { - visibility: visible; - animation: fadein 0.5s; -} - -#modal-container { - display: none; - position: fixed; - z-index: 1; - height: 100%; - top: 0; - left: 0; - width: 100%; - background-color: rgba(0, 0, 0, 0.2); -} - -.modal-content { - position: absolute; - color: #555; - width: 40%; - /*height: 40%;*/ - min-height: 250px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - padding: 2em; - border-radius: 20px; - animation: fadein 0.5s; -} -.modal-content > button { - float: right; -} - -#notification-container { - position: absolute; - bottom: 0; - right: 0; -} -#notification-container .notification { -} - -/****************************** -Animations -******************************/ - -@keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -.fadein { - animation: fadein 0.5s; -} - -@keyframes swipe-from-left { - from { - margin-left: 100%; - } - to { - margin-left: 0; - } -} - -@keyframes expand-left-border { - from { - border-left: 0; - } - to { - border-left: 5px solid #3ba4d7; - } -} - -/****************************** -Target specific sections -******************************/ - -/* Login */ -.login-page { - background-image: linear-gradient(-45deg, #0e76a7, #7bccff); - height: 100%; - animation: fadein 0.5s; -} -.login-container { - background-color: white; - box-shadow: 3px 3px 5px #444; - margin: auto; - position: relative; - top: 100px; - max-width: 400px; - max-height: 500px; - border-radius: 5px; - - display: flex; - align-items: flex-start; - flex-direction: column; - align-items: center; -} - -.extra > label, -.extra > br, -.extra > input { - margin-bottom: 0; -} - -.login-container * { - margin-bottom: 15px; -} -.login-container > img { - margin-top: 15px; - margin-bottom: 30px; -} - -.login-container extra { - margin: 0; -} -.login-container > a { - text-decoration: underline; - cursor: pointer; -} - -/* Navbar */ -.nav-logo { - width: 130px; - padding: 1.2rem 0; - display: flex; - gap: 0.3rem; - align-items: center; -} -.nav-logo img { - width: 1.6rem; -} -.nav-logo h4 { - margin: 0; - color: white; - align-self: end; -} -nav.tab-menu { - border-right: 4px solid #3ba4d7; - background-color: #14141B; - box-shadow: 0 5px 5px #aaa; - float: left; - display: flex; - flex-direction: column; - align-items: center; - height: 100%; - padding: 8px 6px; - margin-right: 0rem; -} -.tab-menu-item { - width: 10rem; - border-radius: 6px; - display: flex; - align-items: center; -} -a.tab-menu-item { - margin: 4px; - padding: 10px; - text-align: center; - text-decoration: none; - color: #ccc; - font-size: 0.875em; - /* CSS capitalization is magical! */ - text-transform: capitalize; - transition: all 300ms; - /* To vertically stack child nodes */ - display: inline-flex; - flex-direction: row; -} -.tab-menu-item:hover { - background-color: #FFFFFF15; -} - -.tab-menu-item.selected-tab-item { - color: #99DEFF; - background-color: #89BEFA20; - font-weight: medium; -} -.sidebar { - height: 30%; - width: 200px; - background-color: white; -} -.sidebar a { - text-decoration: none; - text-transform: capitalize; - padding: 1em; - cursor: pointer; - display: block; - font-size: 0.95em; - color: #999; -} -.sidebar a:hover { - color: #222; -} -.sidebar .selected-sidebar-link { - font-weight: bold; - color: #222; - border-left: 5px solid #3ba4d7; - animation: expand-left-border 0.1s; -} -.sidebarquickview { - height: 30%; - width: 200px; - top: 300px; - background-color: white; -} -.sidebarquickview a { - text-decoration: none; - text-transform: capitalize; - padding: 1em; - cursor: pointer; - display: block; - font-size: 0.95em; - color: #999; -} -.sidebarquickview a:hover { - color: #222; -} -.sidebarquickview .selected-sidebarquickview-link { - font-weight: bold; - color: #222; - border-left: 5px solid #3ba4d7; - animation: expand-left-border 0.1s; -} -/* Content adjacent to sidebar */ -.node-panel { - position: relative; - /* bottom: 650px; */ - margin-left: 200px; - animation: fadein 0.5s; -} - -i.sidenav-icon { - width: 2.5rem; - height: 1.4rem; - display: grid; - place-items: center; - padding-right: 0.5rem; -}