From e78377bfba21dad11c6f15f4685448d2dfec376c Mon Sep 17 00:00:00 2001 From: Chris Sainty Date: Mon, 13 May 2019 00:27:52 +0100 Subject: [PATCH 1/4] WIP: Converted rooms list to fly out menu. Refactored message component styling for improved mobile experience --- .../wwwroot/css/blazord.gitter.css | 857 ++++++++++++++++++ .../wwwroot/css/blazord.gitter.min.css | 3 + src/Blazor.Gitter.Client/wwwroot/index.html | 8 +- .../Blazor.Gitter.Core.csproj | 8 +- .../Components/Shared/AppState.cs | 10 +- .../Components/Shared/ChatRoomList.razor | 2 +- .../Components/Shared/ChatRoomList.razor.cs | 5 + .../Components/Shared/IAppState.cs | 2 + .../Components/Shared/MainLayout.razor | 5 +- .../Components/Shared/MainLayout.razor.cs | 20 +- .../Components/Shared/Message.razor | 78 +- .../Components/Shared/Message.razor.cs | 12 +- .../Components/Shared/Navbar.razor | 28 +- .../Components/Shared/Navbar.razor.cs | 13 +- src/Blazor.Gitter.Core/compilerconfig.json | 10 +- src/Blazor.Gitter.Core/content/css/_base.scss | 10 +- .../content/css/_chatroom.scss | 37 +- .../content/css/_layout.scss | 33 +- .../content/css/{loader.scss => _loader.scss} | 8 +- .../content/css/_login.scss | 6 +- .../content/css/_navbar.scss | 4 + .../content/css/blazor.gitter.scss | 1 + src/Blazor.Gitter.Server/Pages/_Host.cshtml | 18 +- .../wwwroot/css/blazord.gitter.css | 857 ++++++++++++++++++ .../wwwroot/css/blazord.gitter.min.css | 3 + 25 files changed, 1929 insertions(+), 109 deletions(-) create mode 100644 src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css create mode 100644 src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css rename src/Blazor.Gitter.Core/content/css/{loader.scss => _loader.scss} (93%) create mode 100644 src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css create mode 100644 src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css new file mode 100644 index 0000000..ca87ed5 --- /dev/null +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css @@ -0,0 +1,857 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +/* Colours */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; } + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; } + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; } + +/* Colours */ +*, +*:after, +*:before { + box-sizing: inherit; } + +html { + box-sizing: border-box; + font-size: 62.5%; + height: 100%; + width: 100%; } + +body { + color: #F0F2F3; + height: 100%; + width: 100%; + background-color: #2D2D2D; + font-family: "Poppins", sans-serif; + font-size: 1.6em; + font-weight: 300; + letter-spacing: 0.01em; + line-height: 2; } + +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + text-transform: uppercase; } + +a { + text-decoration: none; + color: #FF6600; } + a:hover { + color: #e65c00; } + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #212222; } + +::-webkit-scrollbar { + width: 12px; + background-color: #212222; } + +::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #969696; } + +body { + scrollbar-face-color: #969696; + scrollbar-track-color: #212222; } + +app { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; } + +.wrapper { + display: flex; + flex-direction: row; + height: 100%; } + +.wrapper__left-menu { + display: flex; + position: fixed; + flex-direction: column; + width: 300px; + height: 100%; + background-color: #212222; + padding-top: 1rem; + padding-bottom: 56px; + overflow-y: auto; + z-index: 2; + transform: translateX(-300px); + transition: all .4s ease-in-out; } + +.wrapper__left-menu--active { + transform: translateX(0); } + +.wrapper__left-menu-footer { + padding: 1rem; } + +.menu-icon { + position: fixed; + display: flex; + top: 5px; + left: 10px; + align-items: center; + justify-content: center; + border-radius: 50%; + z-index: 1; + cursor: pointer; + padding: 12px; + background-color: #DADAE3; } + +.wrapper__content { + display: flex; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + overflow-y: auto; } + +/* Colours */ +.loader-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; } + .loader-container .loader, + .loader-container .loader:after { + border-radius: 50%; + width: 10em; + height: 10em; } + .loader-container .loader { + margin: 10px; + font-size: 1rem; + position: relative; + border-top: 1.1em solid #626263; + border-right: 1.1em solid #626263; + border-bottom: 1.1em solid #626263; + border-left: 1.1em solid #FF6600; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; } + .loader-container .loader-logo { + display: flex; + align-items: center; + font-size: 4rem; + text-decoration: none; + font-weight: 300; + color: #F0F2F3; } + .loader-container .loader-logo span { + font-weight: 600; + color: #FF6600; + text-transform: uppercase; } + .loader-container .loader-platform { + color: #626263; } + +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.navbar { + display: flex; + flex-direction: row; + background-color: #0B0B0B; + padding: 1rem; + justify-content: space-between; } + +.navbar__menu { + cursor: pointer; } + +.navbar__brand { + text-decoration: none; } + +.navbar__logo { + color: #F0F2F3; + font-size: 1.8rem; } + .navbar__logo span { + color: #FF6600; + text-transform: uppercase; + font-weight: 600; } + +.navbar__mode { + color: #626263; } + +.navbar__user { + line-height: 0; } + .navbar__user img { + width: 32px; + border-radius: .5rem; } + +.login { + display: flex; + flex-direction: column; + border-radius: .5rem; } + +.login__heading { + margin: 0 0 3rem 0; + font-weight: 300; + line-height: initial; } + +.login__input { + margin-bottom: 2rem; + line-height: 3rem; + padding: 1rem; + border-radius: .5rem; + border: none; } + +.login__buttons { + display: flex; + flex-direction: column; + justify-content: space-between; } + +.login__button { + flex: 1; + margin-bottom: 1rem; + padding: 1.5rem 2rem; + border-radius: .5rem; + border: none; + cursor: pointer; } + +.login__button--primary { + background-color: #FF6600; + color: #F0F2F3; } + .login__button--primary:hover { + background-color: #e65c00; } + +.login__button--secondary { + color: #FF6600; + border: 1px solid #FF6600; + background-color: transparent; + margin-right: 0; } + .login__button--secondary:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room-list { + padding: 1rem; } + +.chat-room-list__heading { + margin-top: 0; } + +.chat-room-list__list { + list-style: none; + padding: 0; + margin: 0; } + +.chat-room-list__list-item { + padding: 1rem 0; } + +.chat-room-list__link { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1.4rem; } + .chat-room-list__link img { + width: 35px; + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room-list__unread-items { + margin-left: 1rem; + width: 33px; + text-align: center; + color: white; + border-radius: 2rem; + border: 2px solid #ff6600; } + +.chat-room { + display: flex; + flex-direction: row; + flex: 1; + max-width: 100%; + height: 100%; } + +.chat-room__content { + display: flex; + flex: 1; + flex-direction: column; + position: relative; + height: 100%; + overflow-y: auto; } + +.chat-room__search { + display: flex; + position: fixed; + flex-direction: column; + width: 300px; + z-index: 2; + padding: 1.5rem 2rem 2rem 2rem; + height: 100%; + overflow-y: auto; + transform: translateX(-300px); + transition: all .4s ease-in-out; } + +.chat-room__search--active { + transform: translateX(0); } + +.chat-room__search-heading { + margin-top: 0; } + +.chat-room__search-form { + display: flex; } + +.chat-room__search-box { + flex: 1; + margin-bottom: 2rem; + line-height: 3rem; + padding: 1rem; + border-radius: .5rem; + border: none; } + +.chat-room__clear-search-button, .chat-room__cancel-search-button { + margin-bottom: 1rem; + padding: 1.5rem 2rem; + border-radius: .5rem; + border: none; + cursor: pointer; + color: #FF6600; + border: 1px solid #FF6600; + background-color: transparent; } + .chat-room__clear-search-button:hover, .chat-room__cancel-search-button:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room__search-loader { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; } + .chat-room__search-loader .loader, + .chat-room__search-loader .loader:after { + border-radius: 50%; + width: 5em; + height: 5em; } + .chat-room__search-loader .loader { + margin: 10px; + font-size: 10px; + position: relative; + border-top: 1.1em solid #626263; + border-right: 1.1em solid #626263; + border-bottom: 1.1em solid #626263; + border-left: 1.1em solid #FF6600; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; } + .chat-room__search-loader .loader-logo { + display: flex; + align-items: center; + font-size: 2.5rem; + text-decoration: none; + font-weight: 300; + color: #F0F2F3; } + .chat-room__search-loader .loader-logo span { + font-weight: 600; + color: #FF6600; + text-transform: uppercase; } + +.chat-room__title { + position: sticky; + top: 0; + width: 100%; + display: flex; + display: none; + align-items: center; + flex-direction: row; + padding: 1rem; + background-color: #212222; } + +.chat-room__logo { + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room__heading { + margin: 0 1rem 0 0; } + +.chat-room__topic { + color: #626263; + font-size: 1.4rem; } + +.chat-room-messages { + overflow-y: auto; } + +.chat-room-messages__message-container { + display: flex; + flex-direction: row; + padding: 1rem; + border-bottom: 1px solid #3a3a3a; } + +.chat-room-messages__message-container--unread { + border-right: 4px solid #2ecc71; + background-color: rgba(46, 204, 113, 0.08); } + +.chat-room-messages__message-container--mention { + border-right: 4px solid #FF6600; + background-color: rgba(255, 102, 0, 0.08); } + +.chat-room-messages__avatar { + margin-right: 1rem; + border-radius: .5rem; + width: 28px; + height: 28px; } + +.chat-room-messages__message-meta-container { + display: flex; + flex-direction: column; + flex: 1; } + +.chat-room-messages__message-meta { + display: flex; + margin-bottom: 1rem; + flex-wrap: wrap; + justify-content: space-between; } + +.chat-room-messages__author { + display: flex; + flex-direction: column; } + +.chat-room-messages__display-name { + margin: 0 1rem 0 0; + color: #969696; + font-weight: 600; + line-height: 1; + margin-bottom: .5rem; + text-transform: none; } + +.chat-room-messages__username { + margin-right: 1rem; + color: #626263; + line-height: 1; } + +.chat-room-messages__timestamp { + color: #626263; + line-height: 1; + margin-left: auto; } + +.chat-room-messages__actions { + color: #969696; + font-weight: 600; + display: flex; } + .chat-room-messages__actions button { + border-radius: .5rem; + cursor: pointer; + color: #FF6600; + border: none; + background-color: transparent; } + .chat-room-messages__actions button:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room-messages__message, .chat-room-messages__status { + font-size: 1.4rem; + word-break: break-word; } + .chat-room-messages__message blockquote, .chat-room-messages__status blockquote { + display: block; + border-left: 4px solid #969696; + margin: 0; + padding: .1rem 2rem; + background: #212222; + font-weight: 100; + font-style: italic; + border-radius: .5rem; + color: #969696; } + +.chat-room-messages__status { + color: #969696; + font-style: italic; } + +.chat-room-messages--paused { + overflow-y: auto; } + +.chat-room-messages--paused::after { + content: "Paused"; + position: absolute; + display: flex; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + font-size: xx-large; + background-color: #212222; + opacity: 0.7; + color: #FF6600; } + +.chat-room__send-message-form { + position: sticky; + bottom: 0; + padding: 0; + background-color: #212222; + display: flex; + align-items: center; } + +.chat-room__send-message-avatar { + display: none; + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room__send-message, .chat-room__send-message--sh-2, .chat-room__send-message--sh-3, .chat-room__send-message--sh-4, .chat-room__send-message--sh-5, .chat-room__send-message--sh-6, .chat-room__send-message--sh-7, .chat-room__send-message--sh-8, .chat-room__send-message--sh-9, .chat-room__send-message--sh-10 { + flex: 1; + background-color: #212222; + padding: 1rem; + box-shadow: none; + border: 0; + outline: none; + border-radius: .5rem; + color: #F0F2F3; + transition: height 0.3s ease-out; } + +.chat-room__send-message--sh-2 { + min-height: 5.44rem; } + +.chat-room__send-message--sh-3 { + min-height: 7.44rem; } + +.chat-room__send-message--sh-4 { + min-height: 9.44rem; } + +.chat-room__send-message--sh-5 { + min-height: 11.44rem; } + +.chat-room__send-message--sh-6 { + min-height: 13.44rem; } + +.chat-room__send-message--sh-7 { + min-height: 15.44rem; } + +.chat-room__send-message--sh-8 { + min-height: 17.44rem; } + +.chat-room__send-message--sh-9 { + min-height: 19.44rem; } + +.chat-room__send-message--sh-10 { + min-height: 21.44rem; } + +.chat-room__send-button { + border: none; + background-color: #FF6600; + padding: 1.5rem 2rem; + border-radius: .5rem; + cursor: pointer; + color: #F0F2F3; } + .chat-room__send-button:hover { + background-color: #e65c00; } diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css new file mode 100644 index 0000000..ab4154a --- /dev/null +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css @@ -0,0 +1,3 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:100%;background-color:#212222;padding-top:1rem;padding-bottom:56px;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search{display:flex;position:fixed;flex-direction:column;width:300px;z-index:2;padding:1.5rem 2rem 2rem 2rem;height:100%;overflow-y:auto;transform:translateX(-300px);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0);}.chat-room__search-heading{margin-top:0;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room-messages--paused{overflow-y:auto;}.chat-room-messages--paused::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file diff --git a/src/Blazor.Gitter.Client/wwwroot/index.html b/src/Blazor.Gitter.Client/wwwroot/index.html index 95d6f91..16ac059 100644 --- a/src/Blazor.Gitter.Client/wwwroot/index.html +++ b/src/Blazor.Gitter.Client/wwwroot/index.html @@ -5,7 +5,8 @@ Blazored Gitter - Client Side - + + @@ -14,7 +15,10 @@
+
+ Client-side Blazor
diff --git a/src/Blazor.Gitter.Core/Blazor.Gitter.Core.csproj b/src/Blazor.Gitter.Core/Blazor.Gitter.Core.csproj index ba596bd..15c69ab 100644 --- a/src/Blazor.Gitter.Core/Blazor.Gitter.Core.csproj +++ b/src/Blazor.Gitter.Core/Blazor.Gitter.Core.csproj @@ -29,11 +29,11 @@ - + @@ -44,15 +44,17 @@ - + + + PreserveNewest - + PreserveNewest diff --git a/src/Blazor.Gitter.Core/Components/Shared/AppState.cs b/src/Blazor.Gitter.Core/Components/Shared/AppState.cs index 6487d12..c2a5278 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/AppState.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/AppState.cs @@ -1,7 +1,6 @@ using Blazor.Gitter.Library; using Blazored.LocalStorage; using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; using System; using System.Collections.Generic; using System.Diagnostics; @@ -63,6 +62,10 @@ public class AppState : IAppState, IDisposable /// Attach to this to be notified that a message has been edited /// public event EventHandler GotMessageUpdate; + /// + /// Attach to this to be notified that the menu has been toggled + /// + public event EventHandler MenuToggled; public AppState( ILocalStorageService localStorage, @@ -162,6 +165,11 @@ private void RaiseGotMessageUpdateEvent(IChatMessage message) GotMessageUpdate?.Invoke(this, message); } + public void ToggleMenu() + { + MenuToggled?.Invoke(this, null); + } + public bool HasApiKey => !string.IsNullOrWhiteSpace(apiKey); public string GetApiKey() { diff --git a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor index 89200bb..2b09b7a 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor +++ b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor @@ -11,7 +11,7 @@ @foreach (IChatRoom Room in State.GetMyRooms().OrderByDescending(r => r.LastAccessTime)) { -
  • +
  • @Room.Name diff --git a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor.cs b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor.cs index f2abdb3..b7500e4 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor.cs @@ -30,6 +30,11 @@ protected override void OnInit() } } + protected void ToggleMenu() + { + State.ToggleMenu(); + } + private void State_GotChatUser(object sender, EventArgs e) { Invoke(StateHasChanged); diff --git a/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs b/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs index 3ba4859..0bcdeb7 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs @@ -16,10 +16,12 @@ public interface IAppState event EventHandler ActivityResumed; event EventHandler TimeoutChanged; event EventHandler GotMessageUpdate; + event EventHandler MenuToggled; bool HasApiKey { get; } bool HasChatRooms { get; } bool HasChatUser { get; } bool Initialised { get; } + void ToggleMenu(); string GetApiKey(); List GetMyRooms(); IChatRoom GetRoom(string RoomId); diff --git a/src/Blazor.Gitter.Core/Components/Shared/MainLayout.razor b/src/Blazor.Gitter.Core/Components/Shared/MainLayout.razor index 1977071..a0e5b9a 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/MainLayout.razor +++ b/src/Blazor.Gitter.Core/Components/Shared/MainLayout.razor @@ -5,7 +5,10 @@
    -
    diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css new file mode 100644 index 0000000..ca87ed5 --- /dev/null +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css @@ -0,0 +1,857 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +/* Colours */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; } + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; } + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; } + +/* Colours */ +*, +*:after, +*:before { + box-sizing: inherit; } + +html { + box-sizing: border-box; + font-size: 62.5%; + height: 100%; + width: 100%; } + +body { + color: #F0F2F3; + height: 100%; + width: 100%; + background-color: #2D2D2D; + font-family: "Poppins", sans-serif; + font-size: 1.6em; + font-weight: 300; + letter-spacing: 0.01em; + line-height: 2; } + +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + text-transform: uppercase; } + +a { + text-decoration: none; + color: #FF6600; } + a:hover { + color: #e65c00; } + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #212222; } + +::-webkit-scrollbar { + width: 12px; + background-color: #212222; } + +::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #969696; } + +body { + scrollbar-face-color: #969696; + scrollbar-track-color: #212222; } + +app { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; } + +.wrapper { + display: flex; + flex-direction: row; + height: 100%; } + +.wrapper__left-menu { + display: flex; + position: fixed; + flex-direction: column; + width: 300px; + height: 100%; + background-color: #212222; + padding-top: 1rem; + padding-bottom: 56px; + overflow-y: auto; + z-index: 2; + transform: translateX(-300px); + transition: all .4s ease-in-out; } + +.wrapper__left-menu--active { + transform: translateX(0); } + +.wrapper__left-menu-footer { + padding: 1rem; } + +.menu-icon { + position: fixed; + display: flex; + top: 5px; + left: 10px; + align-items: center; + justify-content: center; + border-radius: 50%; + z-index: 1; + cursor: pointer; + padding: 12px; + background-color: #DADAE3; } + +.wrapper__content { + display: flex; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + overflow-y: auto; } + +/* Colours */ +.loader-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; } + .loader-container .loader, + .loader-container .loader:after { + border-radius: 50%; + width: 10em; + height: 10em; } + .loader-container .loader { + margin: 10px; + font-size: 1rem; + position: relative; + border-top: 1.1em solid #626263; + border-right: 1.1em solid #626263; + border-bottom: 1.1em solid #626263; + border-left: 1.1em solid #FF6600; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; } + .loader-container .loader-logo { + display: flex; + align-items: center; + font-size: 4rem; + text-decoration: none; + font-weight: 300; + color: #F0F2F3; } + .loader-container .loader-logo span { + font-weight: 600; + color: #FF6600; + text-transform: uppercase; } + .loader-container .loader-platform { + color: #626263; } + +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.navbar { + display: flex; + flex-direction: row; + background-color: #0B0B0B; + padding: 1rem; + justify-content: space-between; } + +.navbar__menu { + cursor: pointer; } + +.navbar__brand { + text-decoration: none; } + +.navbar__logo { + color: #F0F2F3; + font-size: 1.8rem; } + .navbar__logo span { + color: #FF6600; + text-transform: uppercase; + font-weight: 600; } + +.navbar__mode { + color: #626263; } + +.navbar__user { + line-height: 0; } + .navbar__user img { + width: 32px; + border-radius: .5rem; } + +.login { + display: flex; + flex-direction: column; + border-radius: .5rem; } + +.login__heading { + margin: 0 0 3rem 0; + font-weight: 300; + line-height: initial; } + +.login__input { + margin-bottom: 2rem; + line-height: 3rem; + padding: 1rem; + border-radius: .5rem; + border: none; } + +.login__buttons { + display: flex; + flex-direction: column; + justify-content: space-between; } + +.login__button { + flex: 1; + margin-bottom: 1rem; + padding: 1.5rem 2rem; + border-radius: .5rem; + border: none; + cursor: pointer; } + +.login__button--primary { + background-color: #FF6600; + color: #F0F2F3; } + .login__button--primary:hover { + background-color: #e65c00; } + +.login__button--secondary { + color: #FF6600; + border: 1px solid #FF6600; + background-color: transparent; + margin-right: 0; } + .login__button--secondary:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room-list { + padding: 1rem; } + +.chat-room-list__heading { + margin-top: 0; } + +.chat-room-list__list { + list-style: none; + padding: 0; + margin: 0; } + +.chat-room-list__list-item { + padding: 1rem 0; } + +.chat-room-list__link { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1.4rem; } + .chat-room-list__link img { + width: 35px; + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room-list__unread-items { + margin-left: 1rem; + width: 33px; + text-align: center; + color: white; + border-radius: 2rem; + border: 2px solid #ff6600; } + +.chat-room { + display: flex; + flex-direction: row; + flex: 1; + max-width: 100%; + height: 100%; } + +.chat-room__content { + display: flex; + flex: 1; + flex-direction: column; + position: relative; + height: 100%; + overflow-y: auto; } + +.chat-room__search { + display: flex; + position: fixed; + flex-direction: column; + width: 300px; + z-index: 2; + padding: 1.5rem 2rem 2rem 2rem; + height: 100%; + overflow-y: auto; + transform: translateX(-300px); + transition: all .4s ease-in-out; } + +.chat-room__search--active { + transform: translateX(0); } + +.chat-room__search-heading { + margin-top: 0; } + +.chat-room__search-form { + display: flex; } + +.chat-room__search-box { + flex: 1; + margin-bottom: 2rem; + line-height: 3rem; + padding: 1rem; + border-radius: .5rem; + border: none; } + +.chat-room__clear-search-button, .chat-room__cancel-search-button { + margin-bottom: 1rem; + padding: 1.5rem 2rem; + border-radius: .5rem; + border: none; + cursor: pointer; + color: #FF6600; + border: 1px solid #FF6600; + background-color: transparent; } + .chat-room__clear-search-button:hover, .chat-room__cancel-search-button:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room__search-loader { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; } + .chat-room__search-loader .loader, + .chat-room__search-loader .loader:after { + border-radius: 50%; + width: 5em; + height: 5em; } + .chat-room__search-loader .loader { + margin: 10px; + font-size: 10px; + position: relative; + border-top: 1.1em solid #626263; + border-right: 1.1em solid #626263; + border-bottom: 1.1em solid #626263; + border-left: 1.1em solid #FF6600; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; } + .chat-room__search-loader .loader-logo { + display: flex; + align-items: center; + font-size: 2.5rem; + text-decoration: none; + font-weight: 300; + color: #F0F2F3; } + .chat-room__search-loader .loader-logo span { + font-weight: 600; + color: #FF6600; + text-transform: uppercase; } + +.chat-room__title { + position: sticky; + top: 0; + width: 100%; + display: flex; + display: none; + align-items: center; + flex-direction: row; + padding: 1rem; + background-color: #212222; } + +.chat-room__logo { + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room__heading { + margin: 0 1rem 0 0; } + +.chat-room__topic { + color: #626263; + font-size: 1.4rem; } + +.chat-room-messages { + overflow-y: auto; } + +.chat-room-messages__message-container { + display: flex; + flex-direction: row; + padding: 1rem; + border-bottom: 1px solid #3a3a3a; } + +.chat-room-messages__message-container--unread { + border-right: 4px solid #2ecc71; + background-color: rgba(46, 204, 113, 0.08); } + +.chat-room-messages__message-container--mention { + border-right: 4px solid #FF6600; + background-color: rgba(255, 102, 0, 0.08); } + +.chat-room-messages__avatar { + margin-right: 1rem; + border-radius: .5rem; + width: 28px; + height: 28px; } + +.chat-room-messages__message-meta-container { + display: flex; + flex-direction: column; + flex: 1; } + +.chat-room-messages__message-meta { + display: flex; + margin-bottom: 1rem; + flex-wrap: wrap; + justify-content: space-between; } + +.chat-room-messages__author { + display: flex; + flex-direction: column; } + +.chat-room-messages__display-name { + margin: 0 1rem 0 0; + color: #969696; + font-weight: 600; + line-height: 1; + margin-bottom: .5rem; + text-transform: none; } + +.chat-room-messages__username { + margin-right: 1rem; + color: #626263; + line-height: 1; } + +.chat-room-messages__timestamp { + color: #626263; + line-height: 1; + margin-left: auto; } + +.chat-room-messages__actions { + color: #969696; + font-weight: 600; + display: flex; } + .chat-room-messages__actions button { + border-radius: .5rem; + cursor: pointer; + color: #FF6600; + border: none; + background-color: transparent; } + .chat-room-messages__actions button:hover { + color: #e65c00; + border-color: #e65c00; } + +.chat-room-messages__message, .chat-room-messages__status { + font-size: 1.4rem; + word-break: break-word; } + .chat-room-messages__message blockquote, .chat-room-messages__status blockquote { + display: block; + border-left: 4px solid #969696; + margin: 0; + padding: .1rem 2rem; + background: #212222; + font-weight: 100; + font-style: italic; + border-radius: .5rem; + color: #969696; } + +.chat-room-messages__status { + color: #969696; + font-style: italic; } + +.chat-room-messages--paused { + overflow-y: auto; } + +.chat-room-messages--paused::after { + content: "Paused"; + position: absolute; + display: flex; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + font-size: xx-large; + background-color: #212222; + opacity: 0.7; + color: #FF6600; } + +.chat-room__send-message-form { + position: sticky; + bottom: 0; + padding: 0; + background-color: #212222; + display: flex; + align-items: center; } + +.chat-room__send-message-avatar { + display: none; + margin-right: 1rem; + border-radius: .5rem; } + +.chat-room__send-message, .chat-room__send-message--sh-2, .chat-room__send-message--sh-3, .chat-room__send-message--sh-4, .chat-room__send-message--sh-5, .chat-room__send-message--sh-6, .chat-room__send-message--sh-7, .chat-room__send-message--sh-8, .chat-room__send-message--sh-9, .chat-room__send-message--sh-10 { + flex: 1; + background-color: #212222; + padding: 1rem; + box-shadow: none; + border: 0; + outline: none; + border-radius: .5rem; + color: #F0F2F3; + transition: height 0.3s ease-out; } + +.chat-room__send-message--sh-2 { + min-height: 5.44rem; } + +.chat-room__send-message--sh-3 { + min-height: 7.44rem; } + +.chat-room__send-message--sh-4 { + min-height: 9.44rem; } + +.chat-room__send-message--sh-5 { + min-height: 11.44rem; } + +.chat-room__send-message--sh-6 { + min-height: 13.44rem; } + +.chat-room__send-message--sh-7 { + min-height: 15.44rem; } + +.chat-room__send-message--sh-8 { + min-height: 17.44rem; } + +.chat-room__send-message--sh-9 { + min-height: 19.44rem; } + +.chat-room__send-message--sh-10 { + min-height: 21.44rem; } + +.chat-room__send-button { + border: none; + background-color: #FF6600; + padding: 1.5rem 2rem; + border-radius: .5rem; + cursor: pointer; + color: #F0F2F3; } + .chat-room__send-button:hover { + background-color: #e65c00; } diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css new file mode 100644 index 0000000..ab4154a --- /dev/null +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css @@ -0,0 +1,3 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:100%;background-color:#212222;padding-top:1rem;padding-bottom:56px;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search{display:flex;position:fixed;flex-direction:column;width:300px;z-index:2;padding:1.5rem 2rem 2rem 2rem;height:100%;overflow-y:auto;transform:translateX(-300px);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0);}.chat-room__search-heading{margin-top:0;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room-messages--paused{overflow-y:auto;}.chat-room-messages--paused::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file From 51caf6501d1473f027a56f0b269ae3962db3cc45 Mon Sep 17 00:00:00 2001 From: Chris Sainty Date: Sat, 18 May 2019 14:40:48 +0100 Subject: [PATCH 2/4] Final tweaks --- .../wwwroot/css/blazord.gitter.css | 86 ++++++++++++------- .../wwwroot/css/blazord.gitter.min.css | 2 +- .../Components/Pages/Room.razor | 5 +- .../Components/Pages/Room.razor.cs | 15 ++++ .../Components/Shared/AppState.cs | 8 ++ .../Components/Shared/ChatRoomList.razor | 2 +- .../Components/Shared/IAppState.cs | 2 + .../Components/Shared/RoomMessages.razor | 4 +- .../Components/Shared/RoomMessages.razor.cs | 2 +- .../Components/Shared/RoomSearch.razor | 80 +++++++++-------- .../Components/Shared/RoomSearch.razor.cs | 6 ++ src/Blazor.Gitter.Core/content/css/_base.scss | 5 ++ .../content/css/_chatroom.scss | 79 +++++++++++------ .../content/css/_layout.scss | 3 +- .../content/css/_loader.scss | 5 +- .../content/css/_navbar.scss | 1 + .../wwwroot/css/blazord.gitter.css | 86 ++++++++++++------- .../wwwroot/css/blazord.gitter.min.css | 2 +- 18 files changed, 262 insertions(+), 131 deletions(-) diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css index ca87ed5..e20438e 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css @@ -340,6 +340,10 @@ a { a:hover { color: #e65c00; } +pre { + white-space: pre-wrap; + word-wrap: break-word; } + ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; @@ -374,10 +378,9 @@ app { position: fixed; flex-direction: column; width: 300px; - height: 100%; + height: calc(100% - 56px); background-color: #212222; padding-top: 1rem; - padding-bottom: 56px; overflow-y: auto; z-index: 2; transform: translateX(-300px); @@ -416,8 +419,8 @@ app { flex-direction: column; align-items: center; justify-content: center; - width: 100vw; - height: 100vh; } + width: 100%; + height: 100%; } .loader-container .loader, .loader-container .loader:after { border-radius: 50%; @@ -441,6 +444,7 @@ app { align-items: center; font-size: 4rem; text-decoration: none; + text-align: center; font-weight: 300; color: #F0F2F3; } .loader-container .loader-logo span { @@ -474,7 +478,8 @@ app { justify-content: space-between; } .navbar__menu { - cursor: pointer; } + cursor: pointer; + font-size: 1.8rem; } .navbar__brand { text-decoration: none; } @@ -588,23 +593,47 @@ app { height: 100%; overflow-y: auto; } +.chat-room__search-button { + position: fixed; + top: 70px; + right: 20px; + background: #000; + border-radius: 4rem; + width: 5rem; + height: 5rem; + text-align: center; + border: 2px solid #ff6600; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } + .chat-room__search { display: flex; position: fixed; + right: 0; + background-color: #212222; flex-direction: column; width: 300px; z-index: 2; - padding: 1.5rem 2rem 2rem 2rem; - height: 100%; + height: calc(100% - 56px); overflow-y: auto; - transform: translateX(-300px); + transform: translateX(100%); transition: all .4s ease-in-out; } .chat-room__search--active { - transform: translateX(0); } + transform: translateX(0%); } + +.chat-room__search-controls { + padding: 1.5rem 2rem; } .chat-room__search-heading { margin-top: 0; } + .chat-room__search-heading i { + float: right; + padding-top: 1rem; + color: #ff6600; + cursor: pointer; } .chat-room__search-form { display: flex; } @@ -619,7 +648,8 @@ app { .chat-room__clear-search-button, .chat-room__cancel-search-button { margin-bottom: 1rem; - padding: 1.5rem 2rem; + padding: 1rem 1rem; + width: 100%; border-radius: .5rem; border: none; cursor: pointer; @@ -690,7 +720,23 @@ app { font-size: 1.4rem; } .chat-room-messages { - overflow-y: auto; } + overflow-y: auto; + height: 100%; } + +.chat-room-messages--paused ::after { + content: "Paused"; + position: absolute; + display: flex; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + font-size: xx-large; + background-color: #212222; + opacity: 0.7; + color: #FF6600; } .chat-room-messages__message-container { display: flex; @@ -777,24 +823,6 @@ app { color: #969696; font-style: italic; } -.chat-room-messages--paused { - overflow-y: auto; } - -.chat-room-messages--paused::after { - content: "Paused"; - position: absolute; - display: flex; - left: 0; - right: 0; - top: 0; - bottom: 0; - align-items: center; - justify-content: center; - font-size: xx-large; - background-color: #212222; - opacity: 0.7; - color: #FF6600; } - .chat-room__send-message-form { position: sticky; bottom: 0; diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css index ab4154a..2e0ebbf 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:100%;background-color:#212222;padding-top:1rem;padding-bottom:56px;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search{display:flex;position:fixed;flex-direction:column;width:300px;z-index:2;padding:1.5rem 2rem 2rem 2rem;height:100%;overflow-y:auto;transform:translateX(-300px);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0);}.chat-room__search-heading{margin-top:0;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room-messages--paused{overflow-y:auto;}.chat-room-messages--paused::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file diff --git a/src/Blazor.Gitter.Core/Components/Pages/Room.razor b/src/Blazor.Gitter.Core/Components/Pages/Room.razor index b979327..d2c0a11 100644 --- a/src/Blazor.Gitter.Core/Components/Pages/Room.razor +++ b/src/Blazor.Gitter.Core/Components/Pages/Room.razor @@ -16,11 +16,14 @@ else {
    +
    + +
    -
    diff --git a/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs b/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs index 86d4ace..04f40ce 100644 --- a/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs +++ b/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs @@ -21,6 +21,8 @@ public class RoomModel : ComponentBase internal bool KeepWatching = true; protected bool IsLoading = true ; + protected bool SearchIsOpen; + protected string SearchCss = ""; protected override async Task OnInitAsync() { @@ -28,6 +30,7 @@ protected override async Task OnInitAsync() if (!State.HasChatRooms) { State.GotChatRooms += State_GotChatRooms; + State.SearchMenuToggled += State_ToggleSearchMenu; } else { @@ -62,6 +65,18 @@ protected override void OnParametersSet() } } + protected void ToggleSearchMenu() + { + State.ToggleSearchMenu(); + } + + protected void State_ToggleSearchMenu(object sender, EventArgs e) + { + SearchIsOpen = !SearchIsOpen; + SearchCss = SearchIsOpen ? "chat-room__search--active" : ""; + StateHasChanged(); + } + private void LoadRoom() { ThisRoom = State.GetRoom(RoomId); diff --git a/src/Blazor.Gitter.Core/Components/Shared/AppState.cs b/src/Blazor.Gitter.Core/Components/Shared/AppState.cs index c2a5278..fcb7664 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/AppState.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/AppState.cs @@ -66,6 +66,10 @@ public class AppState : IAppState, IDisposable /// Attach to this to be notified that the menu has been toggled /// public event EventHandler MenuToggled; + /// + /// Attach to this to be notified that the search menu has been toggled + /// + public event EventHandler SearchMenuToggled; public AppState( ILocalStorageService localStorage, @@ -169,6 +173,10 @@ public void ToggleMenu() { MenuToggled?.Invoke(this, null); } + public void ToggleSearchMenu() + { + SearchMenuToggled?.Invoke(this, null); + } public bool HasApiKey => !string.IsNullOrWhiteSpace(apiKey); public string GetApiKey() diff --git a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor index 2b09b7a..3850aaa 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor +++ b/src/Blazor.Gitter.Core/Components/Shared/ChatRoomList.razor @@ -4,7 +4,7 @@ @if (State?.HasChatRooms ?? false) {
      -
    • +
    • Home diff --git a/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs b/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs index 0bcdeb7..648e2ae 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/IAppState.cs @@ -17,11 +17,13 @@ public interface IAppState event EventHandler TimeoutChanged; event EventHandler GotMessageUpdate; event EventHandler MenuToggled; + event EventHandler SearchMenuToggled; bool HasApiKey { get; } bool HasChatRooms { get; } bool HasChatUser { get; } bool Initialised { get; } void ToggleMenu(); + void ToggleSearchMenu(); string GetApiKey(); List GetMyRooms(); IChatRoom GetRoom(string RoomId); diff --git a/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor b/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor index aee0736..53a4c2e 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor +++ b/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor @@ -1,11 +1,11 @@ @inherits RoomMessagesBase -
      +
      @if (LoadingMessages) {
      } diff --git a/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor.cs b/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor.cs index 301d8cd..88d2368 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/RoomMessages.razor.cs @@ -28,7 +28,7 @@ public class RoomMessagesBase : ComponentBase, IDisposable bool IsFetchingOlder = false; bool NoMoreOldMessages = false; bool FirstLoad = true; - internal bool Paused = true; + internal bool Paused = false; CancellationTokenSource tokenSource; System.Timers.Timer RoomWatcher; IChatRoom LastRoom; diff --git a/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor b/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor index c57edf0..207c84f 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor +++ b/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor @@ -2,51 +2,57 @@ @if (Searching) { -

      - Searching... - @if (SearchResult?.Count > 0) - { - ( @SearchResult.Count ) - } -

      -
      - -
      - +
      +

      + Searching... + @if (SearchResult?.Count > 0) + { + ( @SearchResult.Count ) + } + +

      +
      + +
      + +
      } else { -

      - Search - @if (SearchResult?.Count > 0) - { - ( @SearchResult.Count ) - } -

      -
      - -
      - +
      +

      + Search + @if (SearchResult?.Count > 0) + { + ( @SearchResult.Count ) + } + +

      +
      + +
      + +
      } @if (Searching && SearchResult == null) { -
      -
      - -
      +
      +
      + +
      } else { - @if (SearchResult is object) - { -
      - @foreach (var message in SearchResult) - { - - } -
      - } + @if (SearchResult is object) + { +
      + @foreach (var message in SearchResult) + { + + } +
      + } } diff --git a/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor.cs b/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor.cs index 251c2eb..3223fc7 100644 --- a/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor.cs +++ b/src/Blazor.Gitter.Core/Components/Shared/RoomSearch.razor.cs @@ -11,6 +11,7 @@ namespace Blazor.Gitter.Core.Components.Shared public class RoomSearchBase : ComponentBase { [Inject] IChatApi GitterApi { get; set; } + [Inject] IAppState State { get; set; } [Parameter] internal IChatRoom ChatRoom { get; set; } [Parameter] internal string UserId { get; set; } @@ -73,5 +74,10 @@ internal Task CancelSearch(UIMouseEventArgs args) Searching = false; return Task.CompletedTask; } + + internal void CloseSearchMenu() + { + State.ToggleSearchMenu(); + } } } diff --git a/src/Blazor.Gitter.Core/content/css/_base.scss b/src/Blazor.Gitter.Core/content/css/_base.scss index 833ffa0..1288f86 100644 --- a/src/Blazor.Gitter.Core/content/css/_base.scss +++ b/src/Blazor.Gitter.Core/content/css/_base.scss @@ -39,4 +39,9 @@ a { } } +pre { + white-space: pre-wrap; + word-wrap: break-word; +} + @include scrollbars(); diff --git a/src/Blazor.Gitter.Core/content/css/_chatroom.scss b/src/Blazor.Gitter.Core/content/css/_chatroom.scss index 6e1754a..513801a 100644 --- a/src/Blazor.Gitter.Core/content/css/_chatroom.scss +++ b/src/Blazor.Gitter.Core/content/css/_chatroom.scss @@ -15,25 +15,53 @@ overflow-y: auto; } +.chat-room__search-button { + position: fixed; + top: 70px; + right: 20px; + background: #000; + border-radius: 4rem; + width: 5rem; + height: 5rem; + text-align: center; + border: 2px solid #ff6600; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + .chat-room__search { display: flex; position: fixed; + right: 0; + background-color: $background-darker; flex-direction: column; width: 300px; z-index: 2; - padding: 1.5rem 2rem 2rem 2rem; - height: 100%; + height: calc(100% - 56px); overflow-y: auto; - transform: translateX(-300px); + transform: translateX(100%); transition: all .4s ease-in-out; } .chat-room__search--active { - transform: translateX(0); + transform: translateX(0%); +} + +.chat-room__search-controls { + padding: 1.5rem 2rem; } .chat-room__search-heading { margin-top: 0; + + i { + float: right; + padding-top: 1rem; + color: #ff6600; + cursor: pointer; + } } .chat-room__search-form { @@ -51,7 +79,8 @@ .chat-room__clear-search-button, .chat-room__cancel-search-button { margin-bottom: 1rem; - padding: 1.5rem 2rem; + padding: 1rem 1rem; + width: 100%; border-radius: .5rem; border: none; cursor: pointer; @@ -143,6 +172,26 @@ .chat-room-messages { overflow-y: auto; + height: 100%; +} + +.chat-room-messages--paused { + + ::after { + content: "Paused"; + position: absolute; + display: flex; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + font-size: xx-large; + background-color: $background-darker; + opacity: 0.7; + color: $accent; + } } .chat-room-messages__list { @@ -253,26 +302,6 @@ font-style: italic; } -.chat-room-messages--paused { - overflow-y: auto; -} - -.chat-room-messages--paused::after { - content: "Paused"; - position: absolute; - display: flex; - left: 0; - right: 0; - top: 0; - bottom: 0; - align-items: center; - justify-content: center; - font-size: xx-large; - background-color: $background-darker; - opacity: 0.7; - color: $accent; -} - .chat-room__send-message-form { position: sticky; bottom: 0; diff --git a/src/Blazor.Gitter.Core/content/css/_layout.scss b/src/Blazor.Gitter.Core/content/css/_layout.scss index 96ec44a..5746c85 100644 --- a/src/Blazor.Gitter.Core/content/css/_layout.scss +++ b/src/Blazor.Gitter.Core/content/css/_layout.scss @@ -16,10 +16,9 @@ position: fixed; flex-direction: column; width: 300px; - height: 100%; + height: calc(100% - 56px); background-color: $background-darker; padding-top: 1rem; - padding-bottom: 56px; overflow-y: auto; z-index: 2; transform: translateX(-300px); diff --git a/src/Blazor.Gitter.Core/content/css/_loader.scss b/src/Blazor.Gitter.Core/content/css/_loader.scss index 4e6e0d0..3287f76 100644 --- a/src/Blazor.Gitter.Core/content/css/_loader.scss +++ b/src/Blazor.Gitter.Core/content/css/_loader.scss @@ -5,8 +5,8 @@ flex-direction: column; align-items: center; justify-content: center; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; .loader, .loader:after { @@ -35,6 +35,7 @@ align-items: center; font-size: 4rem; text-decoration: none; + text-align: center; font-weight: $font-weight-light; color: $text; diff --git a/src/Blazor.Gitter.Core/content/css/_navbar.scss b/src/Blazor.Gitter.Core/content/css/_navbar.scss index c88a8e1..b3c0465 100644 --- a/src/Blazor.Gitter.Core/content/css/_navbar.scss +++ b/src/Blazor.Gitter.Core/content/css/_navbar.scss @@ -8,6 +8,7 @@ .navbar__menu { cursor: pointer; + font-size: 1.8rem; } .navbar__brand { diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css index ca87ed5..e20438e 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css @@ -340,6 +340,10 @@ a { a:hover { color: #e65c00; } +pre { + white-space: pre-wrap; + word-wrap: break-word; } + ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; @@ -374,10 +378,9 @@ app { position: fixed; flex-direction: column; width: 300px; - height: 100%; + height: calc(100% - 56px); background-color: #212222; padding-top: 1rem; - padding-bottom: 56px; overflow-y: auto; z-index: 2; transform: translateX(-300px); @@ -416,8 +419,8 @@ app { flex-direction: column; align-items: center; justify-content: center; - width: 100vw; - height: 100vh; } + width: 100%; + height: 100%; } .loader-container .loader, .loader-container .loader:after { border-radius: 50%; @@ -441,6 +444,7 @@ app { align-items: center; font-size: 4rem; text-decoration: none; + text-align: center; font-weight: 300; color: #F0F2F3; } .loader-container .loader-logo span { @@ -474,7 +478,8 @@ app { justify-content: space-between; } .navbar__menu { - cursor: pointer; } + cursor: pointer; + font-size: 1.8rem; } .navbar__brand { text-decoration: none; } @@ -588,23 +593,47 @@ app { height: 100%; overflow-y: auto; } +.chat-room__search-button { + position: fixed; + top: 70px; + right: 20px; + background: #000; + border-radius: 4rem; + width: 5rem; + height: 5rem; + text-align: center; + border: 2px solid #ff6600; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } + .chat-room__search { display: flex; position: fixed; + right: 0; + background-color: #212222; flex-direction: column; width: 300px; z-index: 2; - padding: 1.5rem 2rem 2rem 2rem; - height: 100%; + height: calc(100% - 56px); overflow-y: auto; - transform: translateX(-300px); + transform: translateX(100%); transition: all .4s ease-in-out; } .chat-room__search--active { - transform: translateX(0); } + transform: translateX(0%); } + +.chat-room__search-controls { + padding: 1.5rem 2rem; } .chat-room__search-heading { margin-top: 0; } + .chat-room__search-heading i { + float: right; + padding-top: 1rem; + color: #ff6600; + cursor: pointer; } .chat-room__search-form { display: flex; } @@ -619,7 +648,8 @@ app { .chat-room__clear-search-button, .chat-room__cancel-search-button { margin-bottom: 1rem; - padding: 1.5rem 2rem; + padding: 1rem 1rem; + width: 100%; border-radius: .5rem; border: none; cursor: pointer; @@ -690,7 +720,23 @@ app { font-size: 1.4rem; } .chat-room-messages { - overflow-y: auto; } + overflow-y: auto; + height: 100%; } + +.chat-room-messages--paused ::after { + content: "Paused"; + position: absolute; + display: flex; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + font-size: xx-large; + background-color: #212222; + opacity: 0.7; + color: #FF6600; } .chat-room-messages__message-container { display: flex; @@ -777,24 +823,6 @@ app { color: #969696; font-style: italic; } -.chat-room-messages--paused { - overflow-y: auto; } - -.chat-room-messages--paused::after { - content: "Paused"; - position: absolute; - display: flex; - left: 0; - right: 0; - top: 0; - bottom: 0; - align-items: center; - justify-content: center; - font-size: xx-large; - background-color: #212222; - opacity: 0.7; - color: #FF6600; } - .chat-room__send-message-form { position: sticky; bottom: 0; diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css index ab4154a..2e0ebbf 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:100%;background-color:#212222;padding-top:1rem;padding-bottom:56px;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search{display:flex;position:fixed;flex-direction:column;width:300px;z-index:2;padding:1.5rem 2rem 2rem 2rem;height:100%;overflow-y:auto;transform:translateX(-300px);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0);}.chat-room__search-heading{margin-top:0;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room-messages--paused{overflow-y:auto;}.chat-room-messages--paused::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file From d242ede9dd466ca8e20ee2763bdae2ae64bbafee Mon Sep 17 00:00:00 2001 From: Chris Sainty Date: Sun, 19 May 2019 12:34:41 +0100 Subject: [PATCH 3/4] Fixes for Edge layout issues --- .../wwwroot/css/blazord.gitter.css | 13 ++++++++++++- .../wwwroot/css/blazord.gitter.min.css | 2 +- .../Components/Pages/Room.razor.cs | 1 + src/Blazor.Gitter.Core/content/css/_chatroom.scss | 8 ++++++++ src/Blazor.Gitter.Core/content/css/_layout.scss | 1 + src/Blazor.Gitter.Core/content/css/_navbar.scss | 2 ++ .../wwwroot/css/blazord.gitter.css | 13 ++++++++++++- .../wwwroot/css/blazord.gitter.min.css | 2 +- 8 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css index e20438e..f368bca 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css @@ -370,6 +370,7 @@ app { .wrapper { display: flex; + padding-top: 56px; flex-direction: row; height: 100%; } @@ -471,6 +472,8 @@ app { transform: rotate(360deg); } } .navbar { + position: absolute; + width: 100%; display: flex; flex-direction: row; background-color: #0B0B0B; @@ -640,6 +643,7 @@ app { .chat-room__search-box { flex: 1; + width: 100%; margin-bottom: 2rem; line-height: 3rem; padding: 1rem; @@ -807,7 +811,14 @@ app { .chat-room-messages__message, .chat-room-messages__status { font-size: 1.4rem; - word-break: break-word; } + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } .chat-room-messages__message blockquote, .chat-room-messages__status blockquote { display: block; border-left: 4px solid #969696; diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css index 2e0ebbf..761561a 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file diff --git a/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs b/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs index 04f40ce..53fe331 100644 --- a/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs +++ b/src/Blazor.Gitter.Core/Components/Pages/Room.razor.cs @@ -75,6 +75,7 @@ protected void State_ToggleSearchMenu(object sender, EventArgs e) SearchIsOpen = !SearchIsOpen; SearchCss = SearchIsOpen ? "chat-room__search--active" : ""; StateHasChanged(); + Console.WriteLine("Search Opened"); } private void LoadRoom() diff --git a/src/Blazor.Gitter.Core/content/css/_chatroom.scss b/src/Blazor.Gitter.Core/content/css/_chatroom.scss index 513801a..d5a929e 100644 --- a/src/Blazor.Gitter.Core/content/css/_chatroom.scss +++ b/src/Blazor.Gitter.Core/content/css/_chatroom.scss @@ -70,6 +70,7 @@ .chat-room__search-box { flex: 1; + width: 100%; margin-bottom: 2rem; line-height: 3rem; padding: 1rem; @@ -281,7 +282,14 @@ .chat-room-messages__message { font-size: $font-size-small; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; blockquote { display: block; diff --git a/src/Blazor.Gitter.Core/content/css/_layout.scss b/src/Blazor.Gitter.Core/content/css/_layout.scss index 5746c85..e0aa407 100644 --- a/src/Blazor.Gitter.Core/content/css/_layout.scss +++ b/src/Blazor.Gitter.Core/content/css/_layout.scss @@ -7,6 +7,7 @@ .wrapper { display: flex; + padding-top: 56px; flex-direction: row; height: 100%; } diff --git a/src/Blazor.Gitter.Core/content/css/_navbar.scss b/src/Blazor.Gitter.Core/content/css/_navbar.scss index b3c0465..f668cea 100644 --- a/src/Blazor.Gitter.Core/content/css/_navbar.scss +++ b/src/Blazor.Gitter.Core/content/css/_navbar.scss @@ -1,4 +1,6 @@ .navbar { + position: absolute; + width: 100%; display: flex; flex-direction: row; background-color: $background-darkest; diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css index e20438e..f368bca 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css @@ -370,6 +370,7 @@ app { .wrapper { display: flex; + padding-top: 56px; flex-direction: row; height: 100%; } @@ -471,6 +472,8 @@ app { transform: rotate(360deg); } } .navbar { + position: absolute; + width: 100%; display: flex; flex-direction: row; background-color: #0B0B0B; @@ -640,6 +643,7 @@ app { .chat-room__search-box { flex: 1; + width: 100%; margin-bottom: 2rem; line-height: 3rem; padding: 1rem; @@ -807,7 +811,14 @@ app { .chat-room-messages__message, .chat-room-messages__status { font-size: 1.4rem; - word-break: break-word; } + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } .chat-room-messages__message blockquote, .chat-room-messages__status blockquote { display: block; border-left: 4px solid #969696; diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css index 2e0ebbf..761561a 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;word-break:break-word;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file From d5b0cb662c2e29e2dbad03c7cf0465787d285a0f Mon Sep 17 00:00:00 2001 From: Chris Sainty Date: Sun, 19 May 2019 12:49:24 +0100 Subject: [PATCH 4/4] Fixes for Search button issues --- src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css | 1 + src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css | 2 +- src/Blazor.Gitter.Core/Components/Pages/Room.razor | 4 +--- src/Blazor.Gitter.Core/content/css/_chatroom.scss | 1 + src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css | 1 + src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css index f368bca..cb92e97 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.css @@ -600,6 +600,7 @@ app { position: fixed; top: 70px; right: 20px; + color: #FF6600; background: #000; border-radius: 4rem; width: 5rem; diff --git a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css index 761561a..4727ebd 100644 --- a/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Client/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;color:#f60;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file diff --git a/src/Blazor.Gitter.Core/Components/Pages/Room.razor b/src/Blazor.Gitter.Core/Components/Pages/Room.razor index d2c0a11..e76bce3 100644 --- a/src/Blazor.Gitter.Core/Components/Pages/Room.razor +++ b/src/Blazor.Gitter.Core/Components/Pages/Room.razor @@ -16,9 +16,7 @@ else {
      -
      - -
      + diff --git a/src/Blazor.Gitter.Core/content/css/_chatroom.scss b/src/Blazor.Gitter.Core/content/css/_chatroom.scss index d5a929e..b4304d5 100644 --- a/src/Blazor.Gitter.Core/content/css/_chatroom.scss +++ b/src/Blazor.Gitter.Core/content/css/_chatroom.scss @@ -19,6 +19,7 @@ position: fixed; top: 70px; right: 20px; + color: $accent; background: #000; border-radius: 4rem; width: 5rem; diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css index f368bca..cb92e97 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.css @@ -600,6 +600,7 @@ app { position: fixed; top: 70px; right: 20px; + color: #FF6600; background: #000; border-radius: 4rem; width: 5rem; diff --git a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css index 761561a..4727ebd 100644 --- a/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css +++ b/src/Blazor.Gitter.Server/wwwroot/css/blazord.gitter.min.css @@ -1,3 +1,3 @@ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}*,*:after,*:before{box-sizing:inherit;}html{box-sizing:border-box;font-size:62.5%;height:100%;width:100%;}body{color:#f0f2f3;height:100%;width:100%;background-color:#2d2d2d;font-family:"Poppins",sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:2;}h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;}a{text-decoration:none;color:#f60;}a:hover{color:#e65c00;}pre{white-space:pre-wrap;word-wrap:break-word;}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#212222;}::-webkit-scrollbar{width:12px;background-color:#212222;}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#969696;}body{scrollbar-face-color:#969696;scrollbar-track-color:#212222;}app{display:flex;flex-direction:column;width:100vw;height:100vh;}.wrapper{display:flex;padding-top:56px;flex-direction:row;height:100%;}.wrapper__left-menu{display:flex;position:fixed;flex-direction:column;width:300px;height:calc(100% - 56px);background-color:#212222;padding-top:1rem;overflow-y:auto;z-index:2;transform:translateX(-300px);transition:all .4s ease-in-out;}.wrapper__left-menu--active{transform:translateX(0);}.wrapper__left-menu-footer{padding:1rem;}.menu-icon{position:fixed;display:flex;top:5px;left:10px;align-items:center;justify-content:center;border-radius:50%;z-index:1;cursor:pointer;padding:12px;background-color:#dadae3;}.wrapper__content{display:flex;width:100%;height:100%;justify-content:center;align-items:center;overflow-y:auto;}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.loader-container .loader,.loader-container .loader:after{border-radius:50%;width:10em;height:10em;}.loader-container .loader{margin:10px;font-size:1rem;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.loader-container .loader-logo{display:flex;align-items:center;font-size:4rem;text-decoration:none;text-align:center;font-weight:300;color:#f0f2f3;}.loader-container .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.loader-container .loader-platform{color:#626263;}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navbar{position:absolute;width:100%;display:flex;flex-direction:row;background-color:#0b0b0b;padding:1rem;justify-content:space-between;}.navbar__menu{cursor:pointer;font-size:1.8rem;}.navbar__brand{text-decoration:none;}.navbar__logo{color:#f0f2f3;font-size:1.8rem;}.navbar__logo span{color:#f60;text-transform:uppercase;font-weight:600;}.navbar__mode{color:#626263;}.navbar__user{line-height:0;}.navbar__user img{width:32px;border-radius:.5rem;}.login{display:flex;flex-direction:column;border-radius:.5rem;}.login__heading{margin:0 0 3rem 0;font-weight:300;line-height:initial;}.login__input{margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.login__buttons{display:flex;flex-direction:column;justify-content:space-between;}.login__button{flex:1;margin-bottom:1rem;padding:1.5rem 2rem;border-radius:.5rem;border:none;cursor:pointer;}.login__button--primary{background-color:#f60;color:#f0f2f3;}.login__button--primary:hover{background-color:#e65c00;}.login__button--secondary{color:#f60;border:1px solid #f60;background-color:transparent;margin-right:0;}.login__button--secondary:hover{color:#e65c00;border-color:#e65c00;}.chat-room-list{padding:1rem;}.chat-room-list__heading{margin-top:0;}.chat-room-list__list{list-style:none;padding:0;margin:0;}.chat-room-list__list-item{padding:1rem 0;}.chat-room-list__link{display:flex;flex-direction:row;align-items:center;font-size:1.4rem;}.chat-room-list__link img{width:35px;margin-right:1rem;border-radius:.5rem;}.chat-room-list__unread-items{margin-left:1rem;width:33px;text-align:center;color:#fff;border-radius:2rem;border:2px solid #f60;}.chat-room{display:flex;flex-direction:row;flex:1;max-width:100%;height:100%;}.chat-room__content{display:flex;flex:1;flex-direction:column;position:relative;height:100%;overflow-y:auto;}.chat-room__search-button{position:fixed;top:70px;right:20px;color:#f60;background:#000;border-radius:4rem;width:5rem;height:5rem;text-align:center;border:2px solid #f60;display:flex;align-items:center;justify-content:center;cursor:pointer;}.chat-room__search{display:flex;position:fixed;right:0;background-color:#212222;flex-direction:column;width:300px;z-index:2;height:calc(100% - 56px);overflow-y:auto;transform:translateX(100%);transition:all .4s ease-in-out;}.chat-room__search--active{transform:translateX(0%);}.chat-room__search-controls{padding:1.5rem 2rem;}.chat-room__search-heading{margin-top:0;}.chat-room__search-heading i{float:right;padding-top:1rem;color:#f60;cursor:pointer;}.chat-room__search-form{display:flex;}.chat-room__search-box{flex:1;width:100%;margin-bottom:2rem;line-height:3rem;padding:1rem;border-radius:.5rem;border:none;}.chat-room__clear-search-button,.chat-room__cancel-search-button{margin-bottom:1rem;padding:1rem 1rem;width:100%;border-radius:.5rem;border:none;cursor:pointer;color:#f60;border:1px solid #f60;background-color:transparent;}.chat-room__clear-search-button:hover,.chat-room__cancel-search-button:hover{color:#e65c00;border-color:#e65c00;}.chat-room__search-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}.chat-room__search-loader .loader,.chat-room__search-loader .loader:after{border-radius:50%;width:5em;height:5em;}.chat-room__search-loader .loader{margin:10px;font-size:10px;position:relative;border-top:1.1em solid #626263;border-right:1.1em solid #626263;border-bottom:1.1em solid #626263;border-left:1.1em solid #f60;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}.chat-room__search-loader .loader-logo{display:flex;align-items:center;font-size:2.5rem;text-decoration:none;font-weight:300;color:#f0f2f3;}.chat-room__search-loader .loader-logo span{font-weight:600;color:#f60;text-transform:uppercase;}.chat-room__title{position:sticky;top:0;width:100%;display:flex;display:none;align-items:center;flex-direction:row;padding:1rem;background-color:#212222;}.chat-room__logo{margin-right:1rem;border-radius:.5rem;}.chat-room__heading{margin:0 1rem 0 0;}.chat-room__topic{color:#626263;font-size:1.4rem;}.chat-room-messages{overflow-y:auto;height:100%;}.chat-room-messages--paused ::after{content:"Paused";position:absolute;display:flex;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;font-size:xx-large;background-color:#212222;opacity:.7;color:#f60;}.chat-room-messages__message-container{display:flex;flex-direction:row;padding:1rem;border-bottom:1px solid #3a3a3a;}.chat-room-messages__message-container--unread{border-right:4px solid #2ecc71;background-color:rgba(46,204,113,.08);}.chat-room-messages__message-container--mention{border-right:4px solid #f60;background-color:rgba(255,102,0,.08);}.chat-room-messages__avatar{margin-right:1rem;border-radius:.5rem;width:28px;height:28px;}.chat-room-messages__message-meta-container{display:flex;flex-direction:column;flex:1;}.chat-room-messages__message-meta{display:flex;margin-bottom:1rem;flex-wrap:wrap;justify-content:space-between;}.chat-room-messages__author{display:flex;flex-direction:column;}.chat-room-messages__display-name{margin:0 1rem 0 0;color:#969696;font-weight:600;line-height:1;margin-bottom:.5rem;text-transform:none;}.chat-room-messages__username{margin-right:1rem;color:#626263;line-height:1;}.chat-room-messages__timestamp{color:#626263;line-height:1;margin-left:auto;}.chat-room-messages__actions{color:#969696;font-weight:600;display:flex;}.chat-room-messages__actions button{border-radius:.5rem;cursor:pointer;color:#f60;border:none;background-color:transparent;}.chat-room-messages__actions button:hover{color:#e65c00;border-color:#e65c00;}.chat-room-messages__message,.chat-room-messages__status{font-size:1.4rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}.chat-room-messages__message blockquote,.chat-room-messages__status blockquote{display:block;border-left:4px solid #969696;margin:0;padding:.1rem 2rem;background:#212222;font-weight:100;font-style:italic;border-radius:.5rem;color:#969696;}.chat-room-messages__status{color:#969696;font-style:italic;}.chat-room__send-message-form{position:sticky;bottom:0;padding:0;background-color:#212222;display:flex;align-items:center;}.chat-room__send-message-avatar{display:none;margin-right:1rem;border-radius:.5rem;}.chat-room__send-message,.chat-room__send-message--sh-2,.chat-room__send-message--sh-3,.chat-room__send-message--sh-4,.chat-room__send-message--sh-5,.chat-room__send-message--sh-6,.chat-room__send-message--sh-7,.chat-room__send-message--sh-8,.chat-room__send-message--sh-9,.chat-room__send-message--sh-10{flex:1;background-color:#212222;padding:1rem;box-shadow:none;border:0;outline:none;border-radius:.5rem;color:#f0f2f3;transition:height .3s ease-out;}.chat-room__send-message--sh-2{min-height:5.44rem;}.chat-room__send-message--sh-3{min-height:7.44rem;}.chat-room__send-message--sh-4{min-height:9.44rem;}.chat-room__send-message--sh-5{min-height:11.44rem;}.chat-room__send-message--sh-6{min-height:13.44rem;}.chat-room__send-message--sh-7{min-height:15.44rem;}.chat-room__send-message--sh-8{min-height:17.44rem;}.chat-room__send-message--sh-9{min-height:19.44rem;}.chat-room__send-message--sh-10{min-height:21.44rem;}.chat-room__send-button{border:none;background-color:#f60;padding:1.5rem 2rem;border-radius:.5rem;cursor:pointer;color:#f0f2f3;}.chat-room__send-button:hover{background-color:#e65c00;} \ No newline at end of file