diff --git a/public/css/style.css b/public/css/style.css deleted file mode 100644 index 505e8d3..0000000 --- a/public/css/style.css +++ /dev/null @@ -1,1380 +0,0 @@ -body { - background-color: #121212; - color: #f8f8f2; - margin: 0; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 14px; - line-height: 1.3; -} - -* { - outline: unset; -} - -#posts { - background-color: #161616; -} - -#user { - background-color: #242424; - width: 100%; - padding: 5pt; -} - -#user > h1 { - color: #ffffff; -} - -h1 { - margin: 0; - display: inline; -} - -h2 { - margin: 0; - font-weight: normal; -} - -h3 { - margin-bottom: 0; - font-weight: normal; -} - -h4 { - margin: 0; -} - -a { - color: #ff6c60; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -button { - background-color: #121212; - color: #f8f8f2; - border: 1px solid #ff6c6091; - padding: 3px 6px; - font-size: 14px; - cursor: pointer; - float: right; -} - -button:hover { - border-color: #ff6c60; -} - -button:active { - border-color: #ff9f97; -} - -.status-el { - overflow-wrap: break-word; - border-left-width: 0; - min-width: 0; - padding: .75em; - display: flex; -} - -.status-body { - flex: 1; - min-width: 0; - margin-left: 58px; -} - -.tweet-header { - padding: 0; - vertical-align: bottom; - flex-basis: 100%; - margin-bottom: .2em; -} - -.tweet-header a { - display: inline-block; - word-break: break-all; - max-width: 100%; -} - -.tweet-name-row { - padding: 0; - display: flex; - justify-content: space-between; -} - -.fullname-and-username { - display: flex; - min-width: 0; -} - -.fullname { - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 2; - max-width: 80%; - white-space: nowrap; - font-size: 14px; - font-weight: 700; - color: #f8f8f2; -} - -.username { - min-width: 1.6em; - margin-left: .4em; - white-space: nowrap; - word-wrap: normal; - overflow: hidden; - text-overflow: ellipsis; -} - -.verified-icon { - color: #fff; - background-color: #1da1f2; - border-radius: 50%; - flex-shrink: 0; - margin: 2px 0 3px 3px; - padding-top: 2px; - height: 12px; - width: 14px; - font-size: 8px; - display: inline-block; - text-align: center; - vertical-align: middle; -} - -.tweet-date { - display: flex; - flex-shrink: 0; - margin-left: 4px; -} - -.replying-to { - color: hsla(240,1%,73%,.9); - margin: -2px 0 4px 0; -} - -.status-el .status-content { - font-family: sans-serif; - line-height: 1.4em; -} - -.status-content.media-body { - flex: 1; - padding: 0; - white-space: pre-wrap; -} - -.container, .item { - display: flex; -} - -.container { - flex-wrap: wrap; - margin: 0; -} - -#content { - box-sizing: border-box; - padding-top: 50px; - margin: auto; - min-height: 100vh; - background-color: rgba(0,0,0,.15); -} - -nav { - z-index: 1000; - background-color: #1f1f1f; - color: hsla(240,1%,73%,.5); - box-shadow: 0 0 4px rgba(0,0,0,.6); -} - -.nav-bar { - padding: 0; - width: 100%; - align-items: center; - position: fixed; - height: 50px; -} - -.nav-bar .inner-nav { - margin: auto; - box-sizing: border-box; - padding-left: 10px; - padding-right: 10px; - display: flex; - align-items: center; - flex-basis: 920px; - height: 50px; -} - -.item { - flex: 1; - line-height: 50px; - height: 50px; - overflow: hidden; - flex-wrap: wrap; -} - -.item.right { - text-align: right; - justify-content: flex-end; -} - -.site-name { - font-weight: 600; -} - -.site-name:hover { - color: #ffaca0; - text-decoration: unset; -} - -.site-logo { - display: block; - width: 35px; - height: 35px; -} - -.item.right a { - padding-left: 4px; -} - -.item.right a:hover { - color: #ffaca0; - text-decoration: unset; -} - -.attachments { - margin-top: .35em; - display: flex; - flex-direction: row; - width: 100%; - max-height: 600px; - border-radius: 7px; - overflow: hidden; - flex-flow: column; - background-color: #0f0f0f; - align-items: center; -} - -.gallery-row { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - overflow: hidden; - flex-grow: 1; - max-height: 379.5px; - max-width: 533px; -} - -.gallery-row .attachment, .gallery-row .attachments { - margin: 0 .25em 0 0; - flex-grow: 1; - box-sizing: border-box; - min-width: 2em; -} - -.gallery-row .attachment:last-child, .gallery-row .attachments:last-child, .video-container { - margin: 0; - max-height: 530px; -} - -.attachments .attachment { - position: relative; - line-height: 0; - border-color: #222; - overflow: hidden; -} - -.gallery-row .still-image, .attachments .image-attachment { - width: 100%; -} - -.gallery-video { - display: flex; - overflow: hidden; -} - -video, .video-container img { - height: 100%; - width: 100%; -} - -.media-gif { - display: inline-block; - background-color: unset; -} - -.video-overlay { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 1; - background-color: #0000009d; -} - -.video-overlay p { - position: relative; - z-index: 0; - text-align: center; - top: calc(50% - 20px); - font-size: 20px; - line-height: 1.3; - margin: 0 20px; -} - -.video-overlay div { - position: relative; - z-index: 0; - top: calc(50% - 20px); - margin: 0 auto; - width: 40px; - height: 40px; -} - -.video-overlay form { - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - display: flex; -} - -.video-overlay button { - padding: 5px 8px; - font-size: 16px; -} - -.still-image { - max-height: 379.5px; - max-width: 533px; - justify-content: center; -} - -.still-image img { - object-fit: cover; - max-width: 100%; - max-height: 379.5px; - border-color: #222; - flex-basis: 300px; -} - -.image { - display: inline-block; -} - -.single-image { - display: inline-block; - width: unset; -} - -.avatar { - float: left; - margin-top: 3px; - margin-left: -58px; - position: absolute; - width: 48px; - height: 48px; - border-radius: 50%; -} - -.tweet-avatar { - display: contents !important; -} - -.retweet { - margin-top: -5px !important; -} - -.retweet, .pinned, .tweet-stats { - align-content: center; - color: hsla(240,1%,73%,.7); - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - font-size: 14px; - font-weight: 600; - line-height: 22px; - margin: 0; - max-width: 85%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.tweet-stats { - margin-bottom: -3px; -} - -.tweet-stat { - padding-top: 5px; - padding-right: 8px; -} - -.show-more { - background-color: #161616; - text-align: center; - padding: .75em 0; - display: block; -} - -.show-more.status-el { - border-bottom: 1px solid #3e3e35; -} - -.show-more a { - background-color: #242424; - display: inline-block; - height: 2em; - padding: 0 2em; - line-height: 2em; -} - -.show-more a:hover { - background-color: #282828; -} - -.show-thread { - display: block; -} - -.multi-header { - background-color: #161616; - text-align: center; - padding: 10px; - display: block; - font-weight: bold; - margin-bottom: 5px; -} - -.multi-timeline { - max-width: 600px; - margin: 0 auto; -} - -.profile-tabs { - max-width: 900px; - margin: 0 auto; - float: none; - border-radius: 0; - position: relative; - width: auto; -} - -.timeline-tab { - float: right; - padding: 0; - box-sizing: border-box; - display: inline-block; - font-size: 14px; - margin: 0; - text-align: left; - vertical-align: top; -} - -.profile-tabs > .timeline-tab { - width: 68% !important; -} - -.profile-tab { - padding: 0 4px 0 0; - box-sizing: border-box; - display: inline-block; - font-size: 14px; - margin: 0; - text-align: left; - vertical-align: top; - max-width: 32%; - top: 50px; -} - -.profile-banner { - padding-bottom: 4px; -} - -.profile-banner a { - display: inherit; - line-height: 0; -} - -.profile-banner img { - width: 100%; -} - -.profile-banner-color { - width: 100%; - padding-bottom: 25%; -} - -.profile-card { - flex-wrap: wrap; - background: #161616; - padding: 12px; - display: flex; -} - -.profile-card-info { - width: 100%; - overflow: auto; - overflow-wrap: break-word; -} - -.profile-card-tabs-name { - overflow: auto; - overflow-wrap: break-word; - max-width: 100%; -} - -.profile-card-username, .profile-card-fullname { - color: #f8f8f2; -} - -.profile-card-fullname { - font-size: 16px; - text-shadow: none; - text-overflow: ellipsis; - max-width: 100%; - font-weight: bold; - overflow-wrap: break-word; -} - -.profile-card-username { - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - display: block; -} - -.profile-card-avatar { - display: block; - width: 100%; - padding-bottom: 6px; - margin-right: 4px; -} - -.profile-card-avatar img { - display: block; - width: calc(100% - 8px); - height: 100%; - margin: 0; - border: 4px solid #282828; - background: #040404; -} - -.profile-card-extra { - display: contents; - flex: 100%; - margin-top: 6px; -} - -.profile-bio { - overflow: hidden; - overflow-wrap: break-word; - width: 100%; - margin: 4px -6px 6px 0px; -} - -.profile-bio p { - margin: 0; -} - -.profile-location, .profile-website, .profile-joindate { - color: #f8f8f2cf; - margin: 2px 0px; - width: 100%; -} - -.profile-description { - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - word-wrap: break-word; -} - -.photo-rail-card { - float: left; - background: #161616; - border-radius: 0 0 4px 4px; - width: 100%; - margin: 5px 0; -} - -.photo-rail-header { - padding: 5px 12px 0px 12px; -} - -.photo-rail-header-mobile { - padding: 5px 12px 0px 12px; - display: none; -} - -#photo-rail-toggle { - display: none; -} - -.photo-rail-label { - width: 100%; - float: unset; - color: #ff6c60; - display: flex; - justify-content: space-between; -} - -#photo-rail-toggle:checked ~ .photo-rail-grid { - max-height: 600px; - padding-bottom: 12px; -} - -.photo-rail-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 3px 3px; - padding: 5px 12px 12px 12px; -} - -.photo-rail-grid a { - position: relative; - border-radius: 5px; -} - -.photo-rail-grid a:before { - content: ""; - display: block; - padding-top: 100%; -} - -.photo-rail-grid img { - height: 100%; - width: 100%; - border-radius: 4px; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - -.tab { - align-items: center; - display: flex; - flex-wrap: wrap; - list-style: none; - margin: 0 0 5px 0; - background-color: #161616; - padding: 0; -} - -.tab .tab-item { - margin-top: 0; -} - -.tab-item { - flex: 1 1 0; - text-align: center; -} - -.tab .tab-item a.active, .tab .tab-item.active a { - border-bottom-color: #ff6c60; - color: #ff6c60; -} - -.tab .tab-item a { - border-bottom: .1rem solid transparent; - color: inherit; - display: block; - padding: 8px 0; - text-decoration: none; - font-weight: bold; -} - -.conversation { - max-width: 610px; - margin: 0 auto; - float: none; - border-radius: 0; - position: relative; - width: 100%; - background-color: #0f0f0f !important; -} - -.main-thread { - margin-bottom: 20px; - background-color: #161616; -} - -.main-tweet .status-content { - font-size: 22px; - line-height: 30px; - letter-spacing: .01em; -} - -.reply { - background-color: #161616; - margin-bottom: 10px; -} - -.more-replies { - padding-top: 0.3em; -} - -.more-replies-text { - display: block; - margin-left: 58px; - padding: 7px 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.thread-line .status-el::before { - background: #8a3731; - content: ''; - position: relative; - width: 3px; - min-width: 3px; - left: 26px; - border-radius: 2px; - margin-left: -3px; - top: 56px; - margin-bottom: 37px; -} - -.thread-line .unavailable::before { - top: 48px; - margin-bottom: 28px; -} - -.thread-last .status-el::before { - background: unset; - min-width: unset; - width: 0; - margin: 0; -} - -.thread-line .more-replies::before { - content: '...'; - background: unset; - color: #ad433b; - font-weight: bold; - font-size: 22px; - line-height: 0.25em; - left: 1.2em; - width: 5px; - top: 2px; - margin-bottom: 0px; - margin-left: -5px; -} - -.panel { - margin: auto; - font-size: 130%; -} - -.error-panel { - background-color: #420a05 !important; -} - -.error-panel, .search-panel > form { - padding: 12px; - border-radius: 4px; - display: flex; - background: #222222; - box-shadow: 0 0 15px rgba(0,0,0,.2); - margin: auto; - margin-top: -50px; -} - -.search-panel > form > button { - font-size: 14px; - line-height: 24px; - display: block; - border: 0; - border-radius: 4px; - background: #2f2f2f; - color: #f8f8f2; - outline: 0; - text-decoration: none; - text-align: center; - box-sizing: border-box; - cursor: pointer; - font-weight: bold; - width: 37px; - height: 32px; - padding: 0; -} - -.search-panel > form > input { - box-sizing: border-box; - font-size: 16px; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - background: #131419; - color: #f8f8f2; - border: 1px solid #0a0b0e; - border-radius: 4px; - padding: 4px; - margin-right: 8px; -} - -.profile-card-extra-links { - margin-top: 8px; - font-size: 14px; - width: 100%; -} - -.profile-statlist { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - width: 100%; - justify-content: space-between; -} - -.profile-statlist > li { - display: table-cell; - text-align: center; -} - -.profile-stat-header { - font-weight: bold; -} - -.profile-stat-num { - display: block; -} - -.timeline-tweet { - border-bottom: 1px solid #3e3e35; -} - -.timeline-footer, .timeline-header { - background-color: #161616; - padding: 6px 0px; -} - -.timeline-protected { - text-align: center; -} - -.timeline-protected p { - margin: 8px 0px; -} - -.timeline-none, .timeline-protected h2 { - color: #ff6c60; - font-size: 21px; - font-weight: 600; -} - -.timeline-end { - background-color: #161616; - text-align: center; - font-size: 16px; - color: #ff6c60; - font-weight: 600; -} - -.unavailable-box { - width: 100%; - height: 100%; - padding: 12px; - border: solid 1px #404040; - border-radius: 10px; - background-color: #121212; -} - -.unavailable-quote { - padding: 6px; -} - -.quote { - margin-top: 10px; - border: solid 1px #404040; - border-radius: 10px; - background-color: #121212; - overflow: auto; - padding: 6px; - position: relative; -} - -.quote:hover { - border-color: #808080; -} - -.quote.unavailable:hover { - border-color: #404040; -} - -.quote-link { - height: 100%; - width: 100%; - left: 0; - top: 0; - position: absolute; -} - -.quote-text { - overflow: hidden; - white-space: pre-wrap; - word-wrap: break-word; -} - -.quote-media-container { - display: flex; - flex-direction: column; - align-items: center; - overflow: hidden; - max-height: 102px; - width: 102px; - float: left; - margin-right: 7px; - border-radius: 7px; - position: relative; -} - -.quote-media { - display: flex; - justify-content: center; - pointer-events: none; -} - -.quote-media img { - width: 100%; - height: 100%; - align-self: center; -} - -.quote-badge { - left: 0px; - bottom: 0; - position: absolute; - z-index: 1; - align-self: flex-end; -} - -.quote-badge-text { - margin: 4px; - background: rgba(0, 0, 0, 0.66); - border-radius: 4px; - color: #fffffff0; - padding: 1px 3px; - font-size: 12px; - font-weight: bold; -} - -.quote-sensitive { - background: #353535; - width: 102px; - height: 102px; - border-radius: 12px; - display: flex; - justify-content: center; - align-items: center; -} - -.quote-sensitive-icon { - font-size: 40px; - color: #909090; -} - -.card { - margin: 5px 0; -} - -.card-container { - border-radius: 10px; - border-width: 1px; - border-style: solid; - border-color: #404040; - background-color: #121212; - overflow: hidden; - color: inherit; - display: flex; - text-decoration: none !important; -} - -.card-container:hover { - border-color: #808080; -} - -.card-container .attachments { - margin: 0; - border-radius: 0; -} - -.large .card-container { - display: block; -} - -.card-content { - padding: 0.5em; -} - -.card-title { - overflow: hidden; - text-overflow: ellipsis; - font-weight: bold; - font-size: 1.15em; -} - -.card-description { - margin: 0.3em 0; -} - -.card-destination { - color: hsla(240,1%,73%,.9); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; -} - -.card-content-container { - color: unset; - overflow: auto; -} - -.card-content-container:hover { - text-decoration: none; -} - -.card-image-container { - width: 98px; - flex-shrink: 0; - position: relative; - overflow: hidden; -} - -.large .card-image-container { - width: unset; -} - -.card-image-container:before { - content: ""; - display: block; - padding-top: 100%; -} - -.large .card-image-container:before { - display: none; -} - -.card-image { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: white; -} - -.large .card-image { - position: unset; - border-style: solid; - border-color: #404040; - border-width: 0; - border-bottom-width: 1px; -} - -.card-image img { - width: 100%; - height: 100%; - display: block; - object-fit: cover; -} - -.card-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - opacity: 0.8; -} - -.overlay-circle { - border-radius: 50%; - background-color: #404040; - width: 40px; - height: 40px; - align-items: center; - display: flex; - border-width: 5px; - border-color: #d8574d; - border-style: solid; -} - -.overlay-triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 12px 0 12px 17px; - border-color: transparent transparent transparent #d8574d; - margin-left: 14px; -} - -.card-overlay:hover .overlay-circle, -.video-overlay:hover .overlay-circle { - border-color: #ff6c60; -} - -.card-overlay:hover .overlay-triangle, -.video-overlay:hover .overlay-triangle { - border-color: transparent transparent transparent #ff6c60; -} - -.poll-meter { - overflow: hidden; - position: relative; - margin: 6px 0; - height: 26px; - background: #0f0f0f; - border-radius: 5px; - display: flex; - align-items: center; -} - -.poll-choice-bar { - height: 100%; - position: absolute; - background: #383838; -} - -.leader .poll-choice-bar { - background: #8a3731; -} - -.poll-choice-value { - position: relative; - font-weight: bold; - margin-left: 5px; - margin-right: 6px; - min-width: 30px; - text-align: right; -} - -.poll-choice-option { - position: relative; -} - -.poll-info { - color: #868687; -} - -.preferences-container { - max-width: 600px; - margin: 0 auto; - width: 100%; - margin-top: 10px; -} - -.preferences { - background-color: #1f1f1f; - padding: 5px 15px 15px 15px; -} - -.preferences input[type="text"] { - max-width: 120px; - background-color: #121212; - padding: 1px 4px; - color: #f8f8f2; - margin: 0; - border: 1px solid #ff6c6091; - border-radius: 0px; - position: absolute; - right: 0; - font-size: 14px; -} - -.preferences input[type="text"]:hover { - border-color: #ff6c60; -} - -.preferences button { - margin-top: 6px; -} - -fieldset { - margin: .35em 0 .75em; - border: 0; -} - -legend { - width: 100%; - padding: .6em 0 .3em 0; - margin: 0; - border: 0; - font-size: 16px; - border-bottom: 1px solid #3e3e35; - margin-bottom: 8px; -} - -.pref-input { - position: relative; - margin-bottom: 6px; -} - -.pref-input label { - padding-right: 135px; -} - -.pref-reset { - float: left; -} - -.icon-container { - display: inline; -} - -.icon-button button { - color: #ff6c60; - text-decoration: none; - border: none; - float: none; - padding: unset; - padding-left: 4px; -} - -.icon-button button:hover { - color: #ffaca0; -} - -.checkbox-container { - display: block; - position: relative; - margin-bottom: 5px; - cursor: pointer; - user-select: none; - padding-right: 22px; -} - -.checkbox-container input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -.checkbox { - position: absolute; - top: 1px; - right: 0; - height: 17px; - width: 17px; - background-color: #121212; - border: 1px solid #ff6c6091; -} - -.checkbox-container:hover input ~ .checkbox { - border-color: #ff6c60; -} - -.checkbox-container:active input ~ .checkbox { - border-color: #ff9f97; -} - -.checkbox:after { - content: ""; - position: absolute; - display: none; -} - -.checkbox-container input:checked ~ .checkbox:after { - display: block; -} - -.checkbox-container .checkbox:after { - left: 2px; - bottom: 0px; - font-size: 13px; - font-family: "fontello"; - content: '\e803'; -} - -.about-page { - max-width: 600px; - margin: 0 auto; - width: 100%; - margin-top: 10px; - background-color: #1f1f1f; - padding: 8px 15px; - align-self: start; -} - -.about-list { - padding-left: 1.3em; -} - -@media (max-width: 600px) { - .profile-tabs { - width: 100vw; - } - - .profile-tab { - width: 100%; - max-width: unset; - position: initial !important; - padding: 0; - } - - .profile-tabs > .timeline-tab { - width: 100% !important; - } - - .profile-card-info { - display: flex; - } - - .profile-card-tabs-name { - overflow: auto; - overflow-wrap: break-word; - } - - .profile-card-avatar { - height: 60px; - width: unset; - } - - .profile-card-avatar img { - border-width: 2px; - width: unset; - } - - .photo-rail-header { - display: none; - } - - .photo-rail-header-mobile { - display: block; - } - - .photo-rail-grid { - max-height: 0px; - padding-bottom: 0; - overflow: hidden; - transition: padding-bottom 0.4s ease-in; - transition: max-height 0.4s; - } - - .quote-media-container { - width: 70px; - max-height: 70px; - } - - .preferences-container { - max-width: 95vw; - } -}