From 398d0eefcf3e455111a1c54a5109a560e24756a8 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Mon, 12 Jun 2023 13:19:19 +0300 Subject: [PATCH] wip only tailwind styling --- src/css/style.css | 2509 ------------------------------- src/index.css | 19 +- src/js/Main.tsx | 33 +- src/js/components/Footer.tsx | 2 +- src/js/components/Header.tsx | 99 +- src/js/components/Identicon.tsx | 4 +- src/js/components/Menu.tsx | 12 +- 7 files changed, 41 insertions(+), 2637 deletions(-) delete mode 100644 src/css/style.css diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index 08fa5b76..00000000 --- a/src/css/style.css +++ /dev/null @@ -1,2509 +0,0 @@ -:root { - --body-bg: #000000; - --blue: #1d9bf0; - --button-bg: #000000; - --button-bg-hover: #222222; - --button-border: 1px solid #ffffff; - --button-color: #ffffff; - --button-color-hover: #ffffff; - --button-primary-bg: #8e44ad; - --button-primary-bg-hover: #5a488b; - --button-primary-border: 0; - --button-primary-color: #fefffe; - --button-primary-color-hover: #fefffe; - --chat-active: #212428; - --chat-hover: #26292e; - --connecting-line-color: #333639; - --day-separator-bg: rgba(30, 32, 37, 0.85); - --day-separator-color: rgba(255, 255, 255, 0.88); - --dropdown-bg: rgba(0, 0, 0, 0.9); - --gallery-background: rgba(0, 0, 0, 0.8); - --green: #34ba7c; - --header-color: #000000; - --input-bg: #1f2327; - --input-placeholder: #ccc; - --input-text: #dbdcde; - --login-background: #000000; - --main-color: #000000; - --menu-bg: #000000; - --msg-border: none; - --msg-form-button-color: #ffffff; - --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8); - --non-string-value-color: #9e64fe; - --notify: #5e02f6; - --orange: #ffa600; - --our-msg-bg: #1d9bf0; - --our-msg-color: #ffffff; - --purple: #8e44ad; - --radio-button-background: #666; - --radio-button-checked-background: #33b7fe; - --red: #f81780; - --seen-indicator: rgba(255, 255, 255, 0.45); - --sidebar-bg: #000000; - --sidebar-color: #8d9197; - --muted-text-color: #8d9197; - --text-color: #ffffff; - --text-time: rgba(255, 255, 255, 0.45); - --warning-background: #fe5493; - --zebra-stripe-bg: #101214; -} - -[data-theme="light"] { - --body-bg: #ffffff; - --blue: #1D9BF0; - --button-bg: #ffffff; - --button-bg-hover: #eeeeee; - --button-border: 1px solid #CFD9DE; - --button-color: #000000; - --button-color-hover: #000000; - --chat-active: #f5f5f5; - --chat-hover: #f0f0f0; - --connecting-line-color: #cfd9dd; - --day-separator-bg: rgba(255, 255, 255, 0.85); - --day-separator-color: rgba(0, 0, 0, 0.88); - --dropdown-bg: rgba(255, 255, 255, 0.8); - --gallery-background: rgba(255, 255, 255, 0.8); - --green: #53B781; - --header-color: #ffffff; - --input-bg: #eeeeee; - --input-placeholder: #666; - --input-text: #000000; - --login-background: #ffffff; - --main-color: #f5f5f5; - --menu-bg: #ffffff; - --msg-border: none; - --msg-form-button-color: #000000; - --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8); - --non-string-value-color: #9e64fe; - --notify: #c8b1f0; - --our-msg-bg: #1d9bf0; - --our-msg-color: #ffffff; - --radio-button-background: #f5f5f5; - --radio-button-checked-background: #33b7fe; - --red: #f81780; - --seen-indicator: rgba(0, 0, 0, 0.45); - --sidebar-bg: #ffffff; - --sidebar-color: #8d9197; - --muted-text-color: #8d9197; - --text-color: #000000; - --text-time: rgba(0, 0, 0, 0.45); - --warning-background: #fe5493; - --zebra-stripe-bg: #f5f5f5; -} - -* { - box-sizing: border-box; - -webkit-tap-highlight-color: transparent; - overflow-wrap: anywhere; -} - -html { - height: 100%; - overflow: hidden; - -webkit-text-size-adjust: 100%; -} - -body { - font-size: 16px; - font-weight: 400; - color: var(--text-color); - font-family: Lato, sans-serif; - padding: 0; - margin: 0; - height: 100%; - overflow: hidden; - background-color: var(--body-bg); -} - -h1, -.application-list a.logo span { - font-family: Lato, Arial, sans-serif; -} - -h3 { - font-size: 20px; -} - -a { - text-decoration: none; - cursor: pointer; - color: var(--blue); -} - -*[contenteditable='true']:not(:focus) { - cursor: pointer; -} - -[placeholder]:empty::before { - content: attr(placeholder); - color: var(--text-time); -} - -[placeholder]:empty:focus::before { - content: ''; -} - -img { - -khtml-user-select: none; - -o-user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -input, textarea { - font-family: Lato, sans-serif; -} - -textarea { - width: 100%; - outline: none; - font-size: inherit; - padding: 10px; - border: 0; - border-radius: 6px; - border: var(--msg-border); - margin: 0 0 12px 0; - color: var(--text-color); - resize: none; -} - -input, -button { - padding: 15px; - outline: none; - border: 0; - font-size: 16px; - border-radius: 50px; -} - -input:not(:last-child), -button:not(:last-child) { - margin-right: 7px; -} - -[type='radio']:checked, -[type='radio']:not(:checked) { - position: absolute; - left: -9999px; -} -[type='radio']:checked + label, -[type='radio']:not(:checked) + label { - position: relative; - padding-left: 28px; - cursor: pointer; - line-height: 20px; - display: inline-block; -} -[type='radio']:checked + label:before, -[type='radio']:not(:checked) + label:before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 18px; - height: 18px; - border: 1px solid #ddd; - border-radius: 100%; - background: var(--radio-button-background); -} -[type='radio']:checked + label:after, -[type='radio']:not(:checked) + label:after { - content: ''; - width: 12px; - height: 12px; - background: var(--radio-button-checked-background); - position: absolute; - top: 4px; - left: 4px; - border-radius: 100%; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; -} -[type='radio']:not(:checked) + label:after { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); -} -[type='radio']:checked + label:after { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); -} - -.btn-group button, -.btn-group input { - margin-bottom: 15px; -} - -.btn-group { - margin-bottom: -15px; -} - -input, -label { - margin-right: 7px; -} - -input { - background: var(--input-bg); - color: var(--input-text); -} - -::placeholder { - color: var(--input-placeholder); -} - -img, -video { - max-width: 100%; - max-height: 95vh; -} - -.mar-left5 { - margin-left: 5px; -} - -.mar-top15 { - margin-top: 15px; -} - -textarea.new-msg { - border: 2px solid var(--purple); -} - -.msg-content iframe, -.msg-content video, -.message-form video { - width: 100%; - outline: none; - margin-bottom: 15px; - border-radius: 15px; - border: 1px solid var(--main-color); - margin-top: 5px; - height: 400px; - min-width: min(100%, 225px); -} - -.msg-content iframe.audio { - height: 80px; - box-sizing: content-box; -} - -.msg-content iframe.applemusic { - height: 175px; - box-sizing: content-box; -} - -.msg-content iframe.applepodcast-large { - height: 450px; - box-sizing: content-box; -} - -.msg-content iframe.applepodcast-small { - height: 175px; - box-sizing: content-box; -} - -.msg-content iframe.instagram { - width: 400px; - height: 600px; - max-height: 137vw; -} - -.msg-content iframe.soundcloud { - height: 175px; - box-sizing: content-box; -} - -.msg-content iframe.tiktok { - width: 325px; - height: 740px; - max-height: 137vw; -} - -.msg-content audio { - width: 100%; - outline: none; - margin-bottom: 15px; - border-radius: 15px; - border: 1px solid var(--main-color); - margin-top: 5px; - height: 50px; - min-width: min(100%, 225px); -} - -.hidden { - display: none; -} - -.footer { - border-top: 1px solid rgba(0, 0, 0, 0.08); -} - -.footer a { - flex: 1; - text-align: center; -} - -.nav a { - user-select: none; -} - -.application-list a.logo { - padding: 15px 30px; -} - -.nav .connected-peers small { - display: flex; - align-items: center; -} - -.connected-peers:hover small, -.connected-peers:focus small { - opacity: 0.8; -} - -.connected-peers:focus, -.connected-peers:active { - text-decoration: none; -} - -.connected-peers .icon { - margin-right: 5px; -} - -.connected-peers small { - color: var(--input-placeholder); -} - -.connected-peers.connected small { - color: var(--green); -} - -.positive { - color: var(--green); -} - -a.logo { - display: flex; - align-items: center; - transition: opacity 0.1s ease; -} - -a.logo:focus { - opacity: 0.75; -} - -a.logo img:not(:last-child) { - margin-right: 9px; -} - -.header { - -webkit-app-region: drag; -} - -.header a, -.header input { - -webkit-app-region: no-drag; -} - -.header-content a { - color: var(--msg-form-button-color); -} - -.header-content a.active { - color: var(--msg-form-button-color); -} - -.header .header-content > a:not(:first-child) { - margin-left: 15px; -} - -.nav .identicon img { - padding: 3px; -} - -.nav .identicon img { - border: 1px solid rgba(0, 0, 0, 0); -} - -.nav .active .identicon img { - border: 1px solid var(--text-color); -} - -.nav a.my-profile:focus .identicon img { - border: 1px solid var(--text-color); -} - -.nav a.my-profile { - margin-right: 15px; -} - -.nav .btn { - color: var(--text-color); - position: relative; -} - -.nav .btn:focus svg { - opacity: 0.75; -} - -.nav .btn .unseen-total { - position: absolute; - z-index: 1; -} - -.nav .btn.active svg { - opacity: 1; -} - -.search-box input { - padding: 8px 35px; - width: 200px; - margin: 0; -} - -.search-box label { - position: relative; - margin-right: 0; -} - -.search-box label:before { - content: ''; - position: absolute; - left: 10px; - top: 0; - bottom: 0; - width: 20px; - background: url("data:image/svg+xml,%3Csvg x='0px' y='0px' width='28.931px' height='28.932px' viewBox='0 0 28.931 28.932' style='enable-background:new 0 0 28.931 28.932;' xml:space='preserve'%3E%3Cpath fill='%23ccc' d='M23.7,22.5L18.2,17h-0.1c3.7-4.3,3.1-10.8-1.2-14.5S6.1-0.7,2.4,3.6s-3.1,10.8,1.2,14.5c3.8,3.3,9.5,3.3,13.3,0 c0,0,0,0,0,0.1l5.6,5.6c0.3,0.3,0.9,0.3,1.2,0c0,0,0,0,0,0C24.1,23.5,24.1,22.9,23.7,22.5C23.8,22.6,23.8,22.6,23.7,22.5z M10.3,18.9c-4.7,0-8.6-3.8-8.6-8.6s3.8-8.6,8.6-8.6s8.6,3.8,8.6,8.6S15,18.9,10.3,18.9z'/%3E%3C/svg%3E") - center / contain no-repeat; -} - -.search-box { - display: inline-block; -} - -.search-box input:placeholder-shown:not(:focus) { - text-align: center; -} - -.search-box .follow-someone { - color: var(--text-color); - text-align: center; -} - -.search-box .suggested { - color: var(--text-time); -} - -.nav .search-box-results { - z-index: 100; - position: fixed; - top: 50px; - left: calc(50% - 122px); - margin-top: 0; -} - -.search-box-results .result { - background-color: var(--button-bg); -} - -.search-box-results .result.selected { - background-color: var(--button-bg-hover); -} - -@media (max-width: 625px) { - .nav .search-box-results { - right: 0; - } -} - -@media (min-width: 1268px) { - .nav .search-box-results { - left: calc(50% - 49px); - } -} - -.search-box-results { - margin-top: 5px; -} - -.search-box a { - width: 280px; - padding: 5px; - background-color: var(--input-bg); - text-align: left; - display: flex; - align-items: center; - white-space: pre-wrap; -} - -.nav .search-box a { - margin: 0 auto; -} - -.search-box .identicon-container { - margin-right: 5px; -} - -.search-box a:first-of-type { - border-radius: 8px 8px 0 0; -} - -.search-box a:last-of-type { - border-radius: 0 0 8px 8px; -} - -.search-box a:only-of-type { - border-radius: 8px; -} - -#main-content { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.sidebar { - overflow-x: hidden; - display: flex; - flex-direction: column; - flex: 1 0 10em; - background: var(--sidebar-bg); -} - -.sidebar * { - user-select: none; -} - -.main { - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; - flex: 3 0 10em; -} - -.main > div { - overflow-y: auto; - display: flex; - flex-direction: column; -} - -/*----- Main------- */ - -.nav { - display: flex; - flex: 1; - background-color: var(--header-color); - max-height: 60px; - box-shadow: var(--nav-shadow); -} - -.nav .name { - min-height: 1.3em; -} - -.nav small { - display: inline-block; - min-height: 1em; -} - -.nav .header-content { - flex: 1; - padding: 0px 15px; - align-self: center; - display: flex; - flex-direction: row; - align-items: center; - max-width: 100%; - margin-top: 5px; -} - -header.footer .header-content { - padding: 0; -} - -.media-player audio::-webkit-media-controls-play-button, -.media-player audio::-webkit-media-controls-panel { - background-color: var(--main-color); - color: var(--text-color); -} - -.media-player { - display: flex; - align-items: center; - max-height: 55px; - justify-content: center; - background-color: var(--main-color); - border-top: 1px solid var(--border-color); -} - -.media-player .info p { - margin: 0; -} - -.media-player .info p:not(:last-of-type) { - margin-bottom: 3px; -} - -.media-player .info, -.media-player .cover { - margin-right: 15px; -} - -.media-player .info { - color: var(--text-color); -} - -.media-player .cover { - max-width: 40px; - max-height: 40px; -} - -.media-player .player { - display: flex; - flex: 1; - max-width: 600px; -} - -.media-player audio { - flex: 1; -} - -.media-player .close { - padding: 13px; - padding-right: 28px; - cursor: pointer; -} - -.media-player .close svg { - width: 13px; -} - -@media (max-width: 625px) { - .media-player { - font-size: 0.7em; - } - - .media-player .info, - .media-player .cover { - margin-right: 0px; - } -} - -.torrent { - text-align: center; - margin-bottom: 7px; -} - -.torrent .player svg { - width: 50px; - height: 50px; - margin-bottom: 10px; -} - -.torrent .cover img { - max-height: 40vh; -} - -.torrent audio, -.torrent video { - width: 100%; -} - -.torrent video { -} - -.torrent .details { - background: var(--main-color); -} - -.torrent .details .flex-row { - cursor: pointer; - text-align: left; -} - -.torrent .details .flex-row.active { - background: var(--notify); -} - -.flex-table { - display: flex; - flex-direction: column; -} - -.flex-table .flex-row { - font-size: 14px; - flex: 1; - display: flex; - flex-direction: row; -} - -.flex-table .flex-row:nth-child(odd) { - background-color: var(--zebra-stripe-bg); -} - -.flex-table .flex-cell { - padding: 10px; - flex: 1 1 auto; - min-width: 0; - word-break: break-all; -} - -.flex-table .flex-cell.no-flex { - flex: none; -} - -@media (max-width: 625px) { - .flex-table .flex-row { - /* flex-direction: column;*/ - } -} - -.nav #back-button { - padding: 13px 20px; - cursor: pointer; -} - -.main-view { - flex: 1; - padding: 10px 15px; - overflow-y: scroll; - overflow-x: hidden; - height: 100%; - background-color: var(--main-color); - min-width: 0; -} - -.main-view.public-messages-view { - padding: 0 15px; -} - -.msg .msg-content { - display: flex; - flex-direction: column; - margin-bottom: 4px; -} - -.msg:not(.standalone) .msg-content { - cursor: pointer; -} - -.msg.inline-quote .msg-content { - margin-top: 10px; - border: 1px solid var(--main-color); - padding: 12px !important; -} - -.msg-content .text { - font-family: Lato, sans-serif; - margin-top: 5px; - margin-bottom: 5px; - white-space: pre-wrap; -} - -.msg a { - color: var(--blue); -} - -.msg-identicon { - display: flex; - flex-direction: column; - margin-right: 15px; -} - -/* twitter-style line that connects reply to the replied post */ -.msg-identicon .line { - width: 2px; - background-color: var(--connecting-line-color); - margin: 4px 18px; - height: 100%; -} - -.msg-main { - display: flex; - flex: 1; - flex-direction: column; -} - -.msg-content { - padding: 6px 10px; - border-radius: 8px; - border: var(--msg-border); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - flex-wrap: wrap; -} - -.padding0 { - padding: 0 !important; -} - -.flex1 { - flex: 1; -} - -.quote .msg-content { - margin-bottom: 0; -} - -.msg.quote { - margin-bottom: 0; -} - -.public-messages-view .msg.quote .msg-content { - padding-bottom: 0; -} - -.public-messages-view .msg.quoting .msg-content { - padding-top: 0; -} - -.msg > div.msg-content > div.msg-sender, -.msg > div.msg-content > div.text, -.msg > div.msg-content > div.below-text -{ - margin-left: 1em; -} - - -.reply .msg-content, .quote .msg-content { - box-shadow: none; -} - -#profile { - display: flex; - flex-direction: column; - align-items: center; -} - -#profile .content { - width: 650px; - max-width: 100%; -} - -.view-area { - flex: 1; -} - -.desktop-non-mac .view-area { - border-top-left-radius: 4px; -} - -.participant-list { - width: 190px; - overflow-x: hidden; - overflow-y: auto; - background: var(--sidebar-bg); - transition: all 0.25s ease; - padding-top: 15px; - user-select: none; - margin-right: -190px; -} - -.participant-list.open { - margin-right: 0; -} - -.participant-list .text { - padding: 7px 15px; - display: flex; - align-items: center; - flex-direction: row; - color: var(--text-color); -} - -.participant-list .identicon-container { - margin-right: 15px; -} - -.windows-titlebar { - -webkit-app-region: drag; - height: 24px; - background-color: var(--menu-bg); - padding: none; - margin: 0px; - display: flex; - align-items: center; -} - -.windows-titlebar img { - margin-left: 7px; -} - -.windows-titlebar .title-bar-btns { - -webkit-app-region: no-drag; - position: fixed; - top: 0px; - right: 0px; -} - -.title-bar-btns button { - padding: 0; - background: var(--menu-bg); - border-radius: 0; - margin-right: 0; - height: 24px; - width: 24px; - color: var(--msg-form-button-color); -} - -.title-bar-btns button:hover { - padding: 0; - background: var(--chat-hover); -} - -.menu-new-post { - margin-left: 30px; - margin-top: 30px; -} - -.menu-new-post button { - margin-bottom: 10px; - height: 55px; - width: 55px; - padding: 0; -} - -.application-list { - z-index: 2; - width: 220px; - transition: all 0.25s ease; - background: var(--menu-bg); - color: var(--sidebar-color); -} - -.application-list .electron-padding { - height: 40px; -} - -.overlay { - transition: all 0.25s ease; - z-index: -1; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - background-color: #000; - opacity: 0; -} - -.application-list a { - padding: 0 15px; - display: flex; - align-items: center; - flex-direction: row; - color: var(--text-color); - justify-content: left; -} - -.application-list a.logo img:last-child, -.settings-list a.logo img:last-child { - margin-left: 5px; -} - -@media (min-width: 626px) and (max-width: 1268px) { - a.logo img:not(:last-child) { - margin-right: 0; - } - - .application-list a.logo span { - display: none; - } - - .application-list a { - justify-content: center; - } - - .menu-new-post { - margin-left: 0px; - text-align: center; - } - - .menu-new-post button { - margin-right: 0; - } -} - -@media (max-width: 1268px) { - .application-list { - width: 78px; - margin-left: 0; - } - - .application-list a { - padding: 15px; - } - - .application-list a.logo, - .settings-list a.logo { - padding: 15px; - } - - .application-list a.logo img:first-child { - width: 30px; - height: 30px; - } - - .application-list .text { - display: none; - } -} -@media (min-width: 626px) { - .settings-list { - background: var(--menu-bg); - } -} - -@media (max-width: 625px) { - .mobile-padding15 { - padding: 0 15px; - } - - .msg.full-width .img-container { - max-height: 70vh; - height: auto; - } - - .msg.full-width > .msg-content > .msg-main > .text > .img-container img, - .msg.full-width > .msg-content > .msg-main > .text > iframe, - .msg.full-width > .msg-content > .msg-main > .text > video { - border-radius: 0; - border: 0; - width: 100vw; - max-width: 100vw; - margin-left: -15px; - margin-right: -15px; - max-height: 70vh; - background-color: var(--body-bg); - height: auto; - } - - .application-list { - width: 250px; - margin-left: -250px; - position: fixed; - top: 0; - left: 0; - bottom: 0; - } - .settings-list { - flex: 1; - background: var(--body-bg); - } - - .participant-list, - .participant-list.open { - width: 250px; - margin-right: -250px; - position: fixed; - top: 0; - right: 0; - bottom: 0; - } - - .application-list a { - padding: 0; - } - - .application-list .text { - display: flex; - } - - .menu-visible-xs .application-list { - margin-left: 0; - } - - .menu-visible-xs .overlay { - opacity: 0.5; - z-index: 1; - } -} - -.application-list .icon .unseen, -.notifications-button .unseen { - position: absolute; - right: 5px; - bottom: 5px; -} - -.application-list .text { - flex: 1; - padding: 15px; - padding-left: 0; - font-family: Lato, sans-serif; -} - -.settings-list { - z-index: 1; - min-width: 220px; - - transition: all 0.25s ease; - color: var(--text-color); -} - -.settings-list .electron-padding { - height: 40px; -} - -.settings-list .text { - flex: 1; - padding: 15px; - padding-left: 0; -} - -a.msg { - color: var(--text-color); -} - -.public-messages-view .img-container img { - height: 400px; - min-width: min(100%, 225px); - width: auto; - max-width: 100%; - max-height: none; - object-fit: contain; - border-radius: 5px; - border: 1px solid var(--main-color); - overflow: hidden; - cursor: pointer; -} - -.public-messages-view .msg { - align-items: flex-start; - display: flex; - flex: 1; -} - -.public-messages-view .msg-sender { - display: flex; - align-items: center; -} - -.public-messages-view .msg-sender .msg-sender-link { - cursor: pointer; - display: flex; - align-items: center; -} - -.badge { - text-shadow: white 0 0 1px; - margin-left: 5px; -} - -.badge.third { - color: var(--text-color); -} - -.badge.second { - color: #F9A825; -} - -.badge.first { - color: var(--blue); -} - -.public-messages-view .msg-sender .msg-menu-btn { - text-align: right; - flex: 1; - user-select: none; -} - -.public-messages-view .msg .text, -.public-messages-view .msg-sender { - overflow-wrap: anywhere; -} - -.public-messages-view .msg .time { - margin-left: 15px; - margin-bottom: 2px; - overflow-wrap: anywhere; -} - -.public-messages-view .msg .time { - margin-bottom: 2px; - margin-left: 8px; -} - -.msg-content .msg-content { - border: 0; -} - -.public-messages-view .msg .msg-content { - max-width: none; - border-radius: 0; - width: 100%; - padding: 12px; - flex-direction: row; - display: flex; - flex: 1; -} - -.public-messages-view .msg:first-of-type .msg-content { - border-radius: 8px 8px 0 0; -} - -.public-messages-view .msg:last-of-type .msg-content { - border-radius: 0 0 8px 8px; -} - -.public-messages-view .msg:only-of-type .msg-content { - border-radius: 8px 8px 8px 8px; -} - -.dropbtn { - font-size: 24px; - cursor: pointer; - margin-top: -15px; - color: var(--muted-text-color); -} - -.emoji { - font-size: 1.3em; - line-height: 1em; -} - -.msg .emoji-only { - font-size: 3em; -} - -a.msgSenderName { - font-weight: 700; - color: var(--text-color); -} - -a.msgSenderName:hover { - text-decoration: none; -} - -a.msgSenderName:hover .display-name { - text-decoration: underline; -} - -a.msgSenderName:hover .user-name { - text-decoration: none; -} - -.display-name.generated { - color: var(--muted-text-color); - font-style: italic; -} - -.settings { - width: 800px; - align-self: center; -} - -#settings { - display: flex; - flex-direction: row; - height: 100%; - flex: 1; - padding: 0; -} - -#chat-view { - display: flex; - flex-direction: row; - height: 100%; - flex: 1; - padding: 0; -} - - -#chat-view #message-list { - max-width: 100%; - width: max(80%, 800px); - margin: 0 auto; - display: flex; - flex-direction: column; -} - -#chat-main { - display: flex; - flex-direction: column; - flex: 3; - max-width: 100%; - min-width: 0; -} - -.chat-list .seen-indicator { - margin-right: 5px; -} - -.seen { - /* omg, this fixes mess-up by iris-lib style */ - color: inherit; -} - -.seen-indicator { - color: var(--seen-indicator); - user-select: none; -} - -.seen-indicator svg { - width: 15px; -} - -.chat-list .seen-indicator svg { - width: 20px; -} - -.seen .seen-indicator { - color: #4fc3f7; -} - -.iris-non-string { - color: var(--non-string-value-color) !important; -} - -.iris-delivered-checkmark { - display: none; -} - -.seen .iris-delivered-checkmark, -.delivered .iris-delivered-checkmark { - display: initial; -} - -.msg.fixedTop { - position: sticky; - top: 0; - z-index: 1; - opacity: 0.8; -} - -.public-messages-view .msg.fixedTop:first-of-type .msg-content { - border-radius: 0 !important; -} - -.msg.their { - align-items: flex-start; -} - -.msg.their .msg-content, -.msg.our .msg-content { - max-width: 75%; -} - -.msg.their + .msg.our .msg-content, -.day-separator + .msg.our .msg-content, -.from-separator + .msg.our .msg-content { - margin-top: 15px; - border-radius: 8px 0px 8px 8px; -} - -.msg.their:first-of-type .msg-content { - border-radius: 0px 8px 8px 8px; -} - -.msg.our:first-of-type .msg-content { - border-radius: 8px 0px 8px 8px; -} - -.msgSenderName { - cursor: pointer; - margin-bottom: 2px; - display: inline-block; -} - -.from-separator { - display: none; -} - -.msg.our + .msg.their .msg-content, -.day-separator + .msg.their .msg-content, -.from-separator + .msg.their .msg-content { - margin-top: 15px; - border-radius: 0px 8px 8px 8px; -} - -.msg.our { - align-items: flex-end; -} - -.msg.our .msg-content { - background-color: var(--our-msg-bg); - color: var(--our-msg-color); - border: 0; -} - -.msg.our a { - color: var(--our-msg-color); - text-decoration: underline; -} - -.msg.our a:hover { - color: var(--our-msg-color); - text-decoration: none; -} - -.msg.standalone.quote.quoting { - margin-bottom: 4px; -} - -.btn, -.msg-btn { - user-select: none; -} - -.msg .msg-btn { - margin-top: 5px; - margin-right: 5px; - color: var(--text-time); -} - -.msg-btn svg { - display: block; - width: 19px; -} - -.msg .likes .identicon-container { - margin-right: 5px; - margin-bottom: 5px; - float: left; -} - -.msg .likes { - margin: 5px 0; -} - -/* transition for btn colors */ - -.msg-btn { - transition: color 0.2s; -} - -.msg .like-btn.liked, .msg .like-btn:hover { - color: var(--purple); -} - -.msg .zap-btn:hover, .msg .zap-btn.zapped { - color: var(--orange); -} - -.msg .reply-btn:hover { - color: var(--blue); -} - -.msg .repost-btn.reposted, .msg .repost-btn:hover { - color: var(--green); -} - -.msg .time { - align-text: right; -} - -.msg .time a { - color: var(--text-time); -} - -.day-separator { - display: inline-block; - border-radius: 8px; - background-color: var(--day-separator-bg); - padding: 6px 10px; - margin-top: 15px; - margin-left: auto; - margin-right: auto; - text-transform: uppercase; - font-size: 13px; - color: var(--day-separator-color); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - user-select: none; -} - -.day-separator:first-of-type { - margin-top: 0; -} - -#login { - padding: 15px; - display: flex; - overflow-y: auto; - color: var(--text-color); - background-color: var(--login-background); - user-select: none; - -webkit-user-select: none; - -webkit-app-region: drag; -} - -.fullscreen { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 1000; -} - -#login ::-webkit-input-placeholder { - text-align: center; -} - -#login :-moz-placeholder { - /* Firefox 18- */ - text-align: center; -} - -#login ::-moz-placeholder { - /* Firefox 19+ */ - text-align: center; -} - -#login :-ms-input-placeholder { - text-align: center; -} - -#login a { - color: var(--text-color); -} - -#login a:hover { - color: var(--text-color); -} - -#login-content { - margin: auto; - text-align: center; -} - -.attachment-preview { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - overflow: hidden; -} - -.attachment-preview.gallery { - overflow-y: auto; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - padding: 30px; - background-color: var(--gallery-background); -} - -.attachment-preview img { - display: block; - margin-bottom: 15px; - user-select: none; -} - -.attachment-preview button { - display: block; - margin-bottom: 10px; -} - -hr { - width: 100%; -} - -.centered-container { - display: flex; - flex: 1; - max-width: 650px; - flex-direction: column; - margin: 15px auto 15px auto; -} - -.chat-message-form { - flex: 1; - flex-direction: row; - max-height: 70px; - background-color: var(--header-color); - padding: 10px 15px; -} - -.chat-message-form form { - display: flex; -} - -.chat-message-form input { - flex: 1; - width: auto; - margin: 0; -} - -#message-list .msg { - display: flex; - flex-direction: column; -} - -.message-form button, -.message-form button:hover, -.message-form button:active, -.message-form button:focus { - flex: none; - color: var(--msg-form-button-color); - background-color: transparent; - font-size: 30px; - padding: 5px; - border: 0; -} - -.chat-message-form button { - display: flex; - align-items: center; - padding: 5px 10px !important; -} - -/*----- Sidebar------- */ - -.user-info { - width: 100%; - flex: 1; - display: flex; - flex-direction: row; - align-self: center; - align-items: flex-start; - max-height: 60px; - overflow-y: hidden; - overflow-x: hidden; - padding: 10px 0 10px 15px; - background-color: var(--header-color); - cursor: pointer; -} - -.user-settings { - height: 100%; - display: flex; - align-items: center; - padding: 15px; -} - -.has-picture .iris-identicon { - display: none; -} - -.iris-identicon img { - border: none !important; -} - -.identicon img { - border-radius: 50%; -} - -.chat-list { - flex: 1; - overflow-y: auto; -} - -#welcome { - text-align: center; - display: block; -} - -.chat-item { - padding: 0px 10px 0px 15px; - overflow: hidden; - cursor: pointer; - display: flex; - flex-direction: row; - height: 72px; - align-items: stretch; - margin-top: -1px; - position: relative; -} -.chat-new-item { - overflow-x: hidden; - cursor: pointer; - flex-direction: row; - display: flex; - height: 72px; - position: relative; - - background: var(--chat-hover); -} - -.chat-new-item-inner { - padding: 0px 10px 0px 15px; - align-items: center; - flex-direction: row; - display: flex; - margin-top: -1px; -} -.chat-new-item:hover { - background-color: var(--body-bg); -} - -.chat-item .identicon-container, -.chat-new-item .identicon-container { - flex: none; - align-self: center; - margin-right: 15px !important; -} - -.chat-item .text, -.chat-new-item .text { - padding-right: 5px; - padding-top: 16px; - line-height: 20px; -} - -.chat-item .text, -.nav .text, -.chat-new-item .text { - flex: 1; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.nav .text { - text-align: center; -} - -.chat-item .latest-time, -.chat-new-item-qrcode { - float: right; -} - -.unseen { - display: inline-block; - border-radius: 1.1em; - padding: 0.3em 0.4em; - min-width: 0.8em; - background-color: var(--red); - color: white; - text-align: center; - font-size: 14px; - line-height: 1em; -} - -.chat-item .unseen { - float: right; -} - -.reposted { - display: flex; -} - -.reposted svg { - width: 19px; - margin-right: 10px; -} - -small, -.text-muted { - font-size: 14px; - color: var(--muted-text-color); -} - -.chat-item.active-item, -.chat-item.active-item:hover { - background: var(--chat-active); -} - -.chat-item:hover, -.chat-item:focus { - background: var(--chat-hover); - outline: none; -} - -.chat-item.new, -.chat-item.public-messages { - align-items: center; -} - -.chat-item.new, -.chat-new-item { - border-bottom: 1px solid var(--chat-hover); -} - -.chat-item.public-messages { -} - -.chat-item.new svg, -.chat-new-item svg { - color: var(--muted-text-color); -} - -#new-chat input { - width: 200px; -} - -#scroll-down-btn { - cursor: pointer; - color: var(--muted-text-color); - display: flex; - align-items: center; - justify-content: center; - position: absolute; - right: 205px; - width: 42px; - height: 42px; - bottom: 85px; - opacity: 0.9; - border-radius: 50%; - background-color: var(--sidebar-bg); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); -} - -@media (max-width: 625px) { - #scroll-down-btn { - right: 15px; - bottom: 65px; - } -} - -#scroll-down-btn svg { - width: 33%; - height: 33%; - margin-top: 3px; -} - -#not-seen-by-them { - padding: 10px 15px; - background-color: var(--notify); -} - -#not-seen-by-them button { - background: white; - color: #262626; -} - -#not-seen-by-them button:hover, -#not-seen-by-them button:active, -#not-seen-by-them button:focus { - background: #ccc; -} - -#enable-notifications-prompt { - background: var(--notify); - padding: 22px 15px; - cursor: pointer; - overflow-y: hidden; - display: none; -} - -#enable-notifications-prompt .title { - margin-bottom: 5px; -} - -#enable-notifications-prompt a { - color: var(--text); - text-decoration: none; - color: var(--text-color); -} - -#enable-notifications-prompt:hover a, -#enable-notifications-prompt:focus a { - text-decoration: underline; -} - -.picker.profile-picture { - cursor: pointer; -} - -.picker.profile-picture:hover { - opacity: 0.8; -} - -.picker.profile-picture { - max-height: 400px; -} - -@media (max-width: 625px) { - .profile-picture-picker.open { - position: fixed; - z-index: 10; - background: rgba(0, 0, 0, 0.85); - left: 0; - right: 0; - top: 0; - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } -} - -#profile-picture-preview-container { - max-width: 100%; -} - -#private-key-qr { - margin-top: 15px; -} - -#chatlink-qr-video { - display: none; -} - -.profile-header { - display: flex; - flex-direction: row; - justify-items: center; - margin-bottom: 15px; -} - -.profile-banner { - height: 250px; - min-height: 250px; - align-self: stretch; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - margin-top: -15px; - margin-left: -15px; - margin-right: -15px; -} - -@media (max-width: 625px) { - .profile-banner { - min-height: 200px; - margin-left: 0; - margin-right: 0; - } -} - -button { - cursor: pointer; -} - -.message-form .public-messages-view .msg .msg-content, -.message-form textarea.new-msg { - margin-right: auto; - margin-left: auto; - display: block; - height: 3em; -} -form.public button[type='submit'] { - height: 47px; - width: 47px; - margin-right: 5px; - border-radius: 5px; - background-color: var(--button-primary-bg); - color: #FFF;; -} - -form.public button[type='submit'] span { - display: inline; - font-size: 0.6em; -} - -form.public button[type='submit'] { - float: right; - right: 0; - clear: both; -} - -form.public button[type='submit'] span { - display: none; -} - -form.public button:last-of-type { - padding-top: 3px; - margin-right: 0; -} - -form.public button svg { - width: 1em; - height: 1em; -} - -form.public button.attach-file-btn svg { - height: 0.9em; -} - -form.public div { - position: relative; -} - -form.public { - width: 100%; - margin-bottom: 12px; - margin-left: auto; - margin-right: auto; -} - -.msg form.public { - margin-bottom: 0; -} - -.quote .retrieving { - height: 90px; -} - -.retrieving { - padding: 5px; -} - -.retrieving .text { - opacity: 0; - transition: opacity 1s; - flex: 1; -} - -.retrieving .text.visible { - opacity: 1; -} - -.retrieving button { - padding: 5px 15px; -} - -.profile-header-stuff { - display: flex; - flex-direction: column; -} - -.profile-header-stuff .profile-about { - margin-bottom: 15px; - flex: 1; -} - -.msg-feed .tabs { - margin-bottom: 4px; -} - -.msg-feed .tabs a:not(.active):hover { - background-color: var(--chat-hover); -} - -.feed-container > p button { - margin-right: 5px; - margin-bottom: 5px; - padding: 5px 20px; -} - -.profile-header-stuff { - padding-left: 15px; - flex: 2; -} - -.follow-count a { - display: inline-block; - margin-bottom: 15px; - text-align: center; -} - -.follow-count a:not(:last-child) { - margin-right: 15px; -} - -.follow-count span { - font-size: 1.2em; -} - -.follow, -.block { - min-width: 120px; - transition: background-color 0.1s ease; - padding: 5px 20px; -} - -.public-messages-view .msg .notification-msg { - display: flex; - flex-direction: column; - align-items: center; - padding: 15px; - cursor: default; - user-select: none; -} - -.public-messages-view .msg .notification-msg.colored { - background: var(--notify); - cursor: pointer; -} - -.block.blocked, -.follow.following { - background-color: var(--button-bg-hover); -} - -.block.blocked { - background-color: var(--warning-background); -} - -.block.blocked:hover { - background-color: var(--notify); -} - -.follow.following:hover { - color: var(--red); - border-color: var(--red); -} - -.block .hover, -.follow .hover { - display: none; -} - -.block.blocked:hover .hover, -.follow.following:hover .hover { - display: inline; -} - -.block.blocked:hover .nonhover, -.follow.following:hover .nonhover { - display: none; -} - -.profile-link-container { - margin-bottom: 15px; - display: flex; - align-items: center; -} - -.profile-link-container .profile-link { - display: flex; - flex: 1; - align-items: center; -} - -.profile-link .identicon-container { - margin-right: 15px; -} - -.qr-container img, -.qr-container canvas { - border: 5px solid white; -} - -/* Places where emojis may appear */ -.user-name, -.name, -input[type='text'] { - line-height: 1.3em; -} - -.profile-picture-container { - display: flex; - align-items: center; - flex: 1; - padding: 15px; - overflow: hidden; -} - -.profile-picture { - border-radius: 50%; - cursor: pointer; - max-width: min(100%, 300px); - max-height: min(30vw, 300px); - border: 5px solid var(--body-bg); - background-color: var(--body-bg); -} - -.online-indicator { - display: inline-block; - width: 16px; - height: 16px; - border-radius: 50%; - position: absolute; - bottom: 10px; - border: 3px solid var(--sidebar-bg); - background-color: #999999; -} - -.chat-item .online-indicator { - left: 50px; -} - -.participant-list .online-indicator { - right: -3px; - bottom: -3px; - z-index: 1; -} - -.participant-list small { - text-transform: uppercase; - padding: 7px 15px; -} - -.online > .online-indicator, -.active > .online-indicator { - background-color: #f6a539; -} - -.active > .online-indicator { - background-color: #80bf5f; -} - -.chat-item .typing-indicator { - color: #05b246; -} - -.copy-button { - min-width: 82px; -} - -.peer button { - margin-left: 5px; -} - -.add-friend { - background-color: hsla(194, 55%, 87%, 1); -} - -.add-friend:hover, -.add-friend:active, -.add-friend:focus { - background-color: hsla(194, 55%, 80%, 1); -} - -.round-borders { - border-radius: 50%; -} - -.feed-settings { - margin: 0 0 15px 0; -} - -.language-selector { - margin-left: 5px; -} - -.explorer-row { - border-radius: 3px; - padding: 3px; -} - -.explorer-row:nth-child(odd) { - background-color: var(--zebra-stripe-bg); -} - -.explorer-row svg { - margin-right: 5px; - cursor: pointer; -} - -.explorer-row .val { - padding-left: 17px; -} - -.explorer-tools a { - margin-right: 30px; -} - -/* Tooltip container */ -.tooltip { - position: relative; - display: inline-block; -} - -/* Tooltip text */ -.tooltip .tooltiptext { - visibility: hidden; - min-width: 120px; - background-color: var(--day-separator-bg); - color: var(--day-separator-color); - text-align: center; - padding: 5px 15px; - border-radius: 6px; - - /* Position the tooltip text */ - position: absolute; - z-index: 1; - right: 0; - top: 100%; - margin-left: -60px; - - /* Fade in tooltip */ - opacity: 0; - transition: opacity 0.3s; -} - -.tooltip .tooltiptext.right { - left: 0; - right: auto; - margin-left: 0; - margin-right: -60px; - min-width: 150px; -} - -.ReactVirtualized__Grid { - outline: none; -} - -/* Needs to be visible for tooltip */ -@media (min-width: 626px) { - .ReactVirtualized__Grid, - .ReactVirtualized__Grid__innerScrollContainer { - overflow: visible !important; - } -} - -/* Tooltip arrow */ -/* -.tooltip .tooltiptext::after { - content: ""; - position: absolute; - top: -10px; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: rgb(25,25,25) transparent transparent transparent; -}*/ - -/* Show the tooltip text when you mouse over the tooltip container */ -@media (hover: hover) { - .tooltip:hover .tooltiptext { - visibility: visible; - opacity: 1; - } -} - -@media (max-width: 625px) { - .centered-container { - margin: 0 auto 0 auto; - } - .notification-msg { - border-radius: 0 !important; - } - .hidden-xs { - display: none !important; - } - .visible-xs-block { - display: block !important; - } - .visible-xs-inline-block { - display: inline-block !important; - } - .visible-xs-flex { - display: flex; - } - .feed-settings { - margin: 0 15px 15px 15px; - display: flex; - } - .feed-container > p button { - margin-right: 0; - margin-left: 5px; - } - .feed-settings button { - flex: 1; - text-align: center; - } - #profile { - padding: 0; - } - #profile .content, - .main-view.public-messages-view { - padding: 0; - } - .main-view.public-messages-view .centered-container > h3 { - padding-left: 15px; - } - - .msg-btn-icon svg { - width: 13px; - height: 13px; - } - - #current-profile-picture { - max-width: none !important; - max-height: none !important; - width: 100%; - } - - div:not([class*="msg-content"]) > form.public { - width: 94%; - } - - div:not([class*="msg-content"]) > form.public button[type='submit'] { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - div:not([class*="msg-content"]) > form.public button[type='submit'] span { - display: inline; - } - - div:not([class*="msg-content"]) > form.public button[type='submit'] svg { - display: none; - } - /* form.public div { - margin: 0 10px; - } */ - .nav .search-box input { - width: 90%; - } - .nav { - max-height: 50px; - } - footer.nav { - max-height: calc(50px + env(safe-area-inset-bottom)); - padding-bottom: env(safe-area-inset-bottom); - } - .nav .text { - text-align: right; - } - .mobile-menu-icon { - padding-right: 15px; - } - .chat-message-form { - padding-top: 0; - padding-right: 0; - padding-bottom: calc(10px + env(safe-area-inset-bottom)); - max-height: calc(50px + env(safe-area-inset-bottom)); - } - .chat-message-form form { - align-items: center; - } - .chat-message-form input { - padding: 8px 15px; - height: 35px; - } - .chat-message-form button { - padding: 5px 10px; - } - .profile-picture-container .identicon-container * { - max-width: 80px; - max-height: 80px; - text-align: center; - } - .side-padding-xs { - padding: 5px 0 0 5px; - } - .thumbnail-item { - width: 100%; - margin-left: 15px; - } - - .profile-header { - margin-bottom: 0; - } - - .public-messages-view .msg:first-of-type .msg-content, - .public-messages-view .msg:last-of-type .msg-content, - .public-messages-view .msg:only-of-type .msg-content{ - border-radius: 0; - } - - .public-messages-view .msg .msg .msg-content { - border-radius: 8px; - } - - .msg-content iframe, - .msg-content video, - .message-form video, - .public-messages-view video, - .public-messages-view .img-container { - height: 300px; - } -} - -@media (min-width: 626px) { - .visible-xs-block, - .visible-xs-inline-block, - .visible-xs-flex { - display: none !important; - } -} diff --git a/src/index.css b/src/index.css index 05c9de84..c38f5e3c 100644 --- a/src/index.css +++ b/src/index.css @@ -14,6 +14,23 @@ @apply rounded-full; } +* { + font-family: 'Lato', sans-serif; +} + .btn { - text-transform: none; + @apply capitalize; +} + +input[type='text'], +input[type='number'] { + @apply rounded-full; +} + +iframe { + @apply rounded-sm my-4 w-full; +} + +img, video { + user-select: none; } \ No newline at end of file diff --git a/src/js/Main.tsx b/src/js/Main.tsx index fe0b448c..b2a132df 100644 --- a/src/js/Main.tsx +++ b/src/js/Main.tsx @@ -30,7 +30,6 @@ import localState from './LocalState'; import '@fontsource/lato/400.css'; import '@fontsource/lato/700.css'; -import '../css/style.css'; import '../css/cropper.min.css'; type Props = Record; @@ -117,29 +116,8 @@ class Main extends Component { }; return ( -
- {isDesktopNonMac ? ( -
- iris -
- - - -
-
- ) : null} -
+
+
{s.loggedIn ? : null} {title} @@ -152,7 +130,7 @@ class Main extends Component {
this.onClickOverlay()}>
-
+
this.handleRoute(e)}> @@ -181,9 +159,10 @@ class Main extends Component {
+ +
- -
)} - {!!Key.getPubKey() && this.renderMobileSearchButton(chatting)}
); } - renderMobileSearchButton(chatting) { - return !chatting ? ( -
{ - // also synchronously make element visible so it can be focused - document.querySelector('.mobile-search-visible')?.classList.remove('hidden-xs', 'hidden'); - document - .querySelector('.mobile-search-hidden') - ?.classList.remove('visible-xs-inline-block'); - document.querySelector('.mobile-search-hidden')?.classList.add('hidden'); - const input = document.querySelector('.search-box input'); - if (input) { - setTimeout(() => { - (input as HTMLInputElement).focus(); - }, 0); - } - this.setState({ showMobileSearch: true }); - }} - > - {Icons.search} -
- ) : ( - '' - ); - } - renderMyProfile() { const key = Key.getPubKey(); const npub = Key.toNostrBech32Address(key, 'npub'); @@ -247,15 +186,6 @@ export default class Header extends Component { ); } - renderLogo() { - return ( - - - iris - - ); - } - renderLoginBtns() { return (