used to make the spacing more good */ .interactions__dummy { flex-grow: 5; } .interactions__like-icon { cursor: pointer; &.liked, &:hover { filter: invert(20%) sepia(97%) saturate(4383%) hue-rotate(321deg) brightness(101%) contrast(95%); } } /* Make the buttons slightly smaller */ .button { margin: 0; font-size: 0.8em; } } /****************************************************** * Conversation thread / tweet detail ******************************************************/ .tweet-detail { & :first-child > .tweet { /* The tweet at the top of a thread should have some top-padding */ padding-top: 1em; } } /** * Focused tweets */ .focused-tweet { & > .tweet { border-bottom: 1px solid var(--color-twitter-off-white-dark); padding-bottom: 0.5em; } /* Make font bigger in focused tweets, unless it's in a quoted tweet */ .text { font-size: 1.4em; } .tweet__quoted-tweet .text { font-size: unset; } } .reply-chain > :last-child > .tweet { /* Last tweet in a reply chain should have bottom-padding */ padding-bottom: 1em; border-bottom: 1px solid var(--color-twitter-off-white-dark); } /** * Threaded conversation string (visual thread indicator) module */ .string-box { width: 3em; margin-right: 0.5em; flex-grow: 0; flex-shrink: 0; /* Make the .string take up 100% of vertical space */ flex-direction: column; align-self: stretch; /* Only show it in parent threads and reply chains */ display: none; .thread-parent-tweet &, .reply-chain & { /* Not if it's in a quoted tweet */ &:not(.tweet__quoted-tweet &) { display: flex; /* Show it */ } } .string { width: 2px; flex-grow: 1; margin: auto; background-color: var(--color-twitter-off-white-dark); /* All parent tweets, and all but the last reply */ display: none; .thread-parent-tweet &, .reply-chain > :not(:last-child) & { display: revert; } } } /****************************************************** * Timeline ******************************************************/ /** * Show more button and EOF indicator module */ .show-more { text-align: center; font-size: 1.2em; padding: 1em 0; .show-more__eof-label { color: var(--color-twitter-text-gray); } .show-more__button { padding: 0em 0.8em; display: inline-block; border: 2px solid var(--color-twitter-blue); color: var(--color-twitter-text-gray); font-size: 0.9em; &:not(:hover):not(:active) { /* TODO: maybe this should be a reusable button style */ background-color: var(--color-twitter-blue-extra-light); } } } /****************************************************** * Navigation and base page ******************************************************/ /** * Nav-sidebar module */ .nav-sidebar { .nav-sidebar__buttons { display: flex; flex-direction: column; align-items: flex-start; padding: 0 2em; } /* Enable positioning the notifications indicator relative to this */ .labelled-icon { position: relative; } .nav-sidebar__notifications-count { position: absolute; left: 0.3em; top: 0.3em; background-color: var(--color-twitter-blue); min-width: 1em; line-height: 1em; /* height: 1.2em; */ border-radius: 1em; font-size: 0.7em; color: white; text-align: center; padding: 0.2em; } #logged-in-user-info { font-size: 0.8em; margin-top: 1em; display: flex; flex-direction: column; align-items: center; } .button .author-info { pointer-events: none; } } /** * Search bar module */ .search-bar { .search-bar__back-button { flex-grow: 0; border-radius: 50%; border: 2px solid black; width: 2em; position: relative; height: 2em; box-sizing: border-box; cursor: pointer; & img { color: rgb(239, 243, 244); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .search-bar__form { margin-left: 1em; flex-grow: 1; display: flex; } .search-bar__input { flex-grow: 1; } } /****************************************************** * User feeds ******************************************************/ /** * User-feed header module */ .user-header { border-bottom: 1px solid var(--color-outline-gray); .user-header__profile-banner-image { width: 100%; } .user-header__info-container { padding: 2em; } .user-header__bio { margin: 1.5em 0; } /* Special settings for profile images in user headers */ .author-info { font-size: 1.3em; padding: 1em; } .profile-image__image { width: 8em; height: 8em; } } /** * Followers + followees module */ .followers-followees { margin-top: 1em; gap: 4em; .followers-followees__count { font-weight: bold; } & label { color: var(--color-twitter-text-gray); cursor: unset; } .spacer { flex-grow: 1; } } /** * Pinned tweet mini-module */ .pinned-tweet__pin-container { margin: 0.5em 0em 0em 3em; z-index: 1; /* Otherwise it disappears behind the tweet background color on mouse-over */ position: relative; /* z-index is ignored if `position` is "static" */ width: fit-content; .pinned-tweet__pin-icon { filter: invert(43%) saturate(30%); width: 1em; height: auto; } } /****************************************************** * Search page ******************************************************/ /** * Search page sort-order module */ .sort-order { padding: 1em 1em 1em 3em; border-bottom: 1px solid var(--color-outline-gray); .sort-order__label { font-weight: bold; } .sort-order__dropdown { text-transform: capitalize; margin: 0 1em; } } /****************************************************** * Login page ******************************************************/ /** * Login form module */ .login-form { .login-form__field-container { padding: 0.5em 0; } .login-form__submit-container { text-align: right; } .login-form__error-label { color: #C0392B; font-weight: bold; & + input { border-color: #C0392B; border-width: 2px; } } .login-form__input { width: 100%; border-radius: 0.5em; padding: 0.5em 0.6em; flex-grow:; } & input[type="submit"] { padding: 1em; } } .choose-session { margin-top: 2em; .choose-session__form-contents { padding-top: 1em; gap: 3em; } .choose-session__dropdown { flex-grow: 1; } } /****************************************************** * Lists pages ******************************************************/ .list-of-lists { border-color: var(--color-twitter-off-white-dark); border-top-style: double; border-width: 4px; } /** * List preview module */ .list-preview { padding: 0.5em 1em; border-color: var(--color-twitter-off-white-dark); border-bottom-style: solid; border-width: 1px; .list-preview__info-container{ display: flex; align-items: center; font-size: 1.5em; cursor: pointer; } .list-preview__num-users { margin-left: 1em; color: var(--color-twitter-text-gray); } .list-preview__first-N-profile-images { display: flex; align-items: flex-end; margin-left: 1.5em; .profile-image { /* Make profile images in the list preview stack up on each other */ margin-right: -1.2em; } .ellipsis { /* Counteract the above; the ellipsis should be spaced normally */ margin-left: 1.5em; } } } /****************************************************** * Bookmarks pages ******************************************************/ .bookmarks-feed-header { border-bottom: 1px solid var(--color-outline-gray); } .add-users-container { padding: 1em; text-align: center; } /****************************************************** * DMs / Messages ******************************************************/ /** * Chat list entry module */ .chat-list-entry { border-bottom: 1px solid var(--color-outline-gray); padding: 1em 1em 0 1em; box-sizing: border-box; cursor: pointer; &.chat-list-entry--active-chat { color: var(--color-twitter-blue); border-left: 0.2em solid var(--color-twitter-blue); background-color: var(--color-twitter-off-white); .profile-image__image { box-shadow: 0 0 1em 0em var(--color-twitter-blue); } } .chat-list-entry__header { display: flex; align-items: center; justify-content: space-between; } .chat-list-entry__preview-and-unread-container { justify-content: space-between; } .chat-list-entry__message-preview { font-size: 0.9em; color: var(--color-twitter-text-gray); padding: 0 1em; border-left: 1px solid var(--color-outline-gray); .chat-list-entry--unread & { font-weight: bold; } } .chat-list-entry__unread-indicator { display: none; background-color: var(--color-twitter-blue); height: 0.5em; width: 0.5em; border-radius: 50%; flex: auto 0 0; /* Otherwise it gets squished if the message preview is long */ .chat-list-entry--unread & { display: revert; } } .chat-list-entry__preview-no-text { font-style: italic; } .posted-at__text { margin: 0; } } /** * Groupchat info module (like Author Info but for group chats) */ .groupchat-info { .groupchat-info__display-name { padding: 0.6em; font-style: italic; font-weight: bold; /* TODO: redundancy check `.author-info__display-name` */ white-space: nowrap; cursor: default; /* TODO: redundancy check `.author-info` */ } } .chat-header { border-bottom: 1px solid var(--color-outline-gray); padding: 0.5em; display: flex; justify-content: space-around; background-color: var(--color-twitter-off-white); } .groupchat-participants-list { position: absolute; background-color: white; top: 4.2em; /* TODO: wtf is this number */ left: 0; right: 0; bottom: 0; overflow-y: scroll; display: none; &.unhidden { display: revert; } } /** * DM message module */ .dm-message { display: flex; flex-direction: column; margin: 1em 0; /** * Compact mode: * margin: 0.5em 0; */ /* When a replying-to box is clicked, it scrolls that message into view and highlights it for a second */ transition: background-color 2s ease; &.highlighted { background-color: var(--color-twitter-off-white-dark); transition: background-color 0.5s ease; } .dm-message__row { align-items: stretch; .our-message & { flex-direction: row-reverse; } .dm-message__emoji-button-container { display: flex; flex-direction: column; justify-content: center; } } .dm-message__sender-profile-img { display: flex; align-items: flex-end; } .dm-message__sender-profile-img a { line-height: 0; /* TODO: This is redundant with ".author-info a" rule above */ } .dm-message__contents { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; margin: 0 0.5em; .our-message & { align-items: flex-end; } } .dm-message__replying-to { background-color: #f0f0f0f0; border-radius: 1em 1em 1em 0em; padding: 0.5em 1.2em 2em 1.2em; margin: 0 0 -2em 0.2em; font-size: 0.9em; .our-message & { border-radius: 1em 1em 0em 1em; margin: 0 0.2em -2em; } .replying-to-message { cursor: pointer; } } .dm-message__replying-to-label { font-size: 0.8em; color: var(--color-twitter-text-gray); & img.svg-icon { width: 1em; } } .dm-message__tweet-preview { border-radius: 1em; overflow: hidden; /* TODO: redundancy check-- why is this necessary? check .rounded-gray-outline */ border: 1px solid var(--color-outline-gray); max-width: 100%; } .dm-message__embedded-image, .dm-message__embedded-video { max-width: 100%; height: auto; /* preserve aspect ratio */ cursor: pointer; } .dm-message__text-content { display: inline-block; padding: 1em; background-color: #ddd; border-radius: 1em; margin: 0; /** * Compact mode: * display: inline-block; padding: 0.5em 1em; background-color: #ddd; border-radius: 1em; margin: auto; min-height: 2em; display: flex; flex-direction: column; justify-content: space-around; */ .our-message & { background-color: var(--color-twitter-blue-light); } } .sent-at { flex-grow: 1; min-width: 5em; width: fit-content; .sent-at__text { float: right; color: var(--color-twitter-text-gray); font-size: 0.875em; white-space: nowrap; } } .sent-at__text { margin: 0 4.5em; } .dm-message__reactions { display: flex; padding: 0 4em; cursor: default; .our-message & { flex-direction: row-reverse; } } &.our-message { align-items: flex-end; } } /** * Messages page DM composer module */ .dm-composer { padding-top: 0.5em; border-top: 1px solid var(--color-outline-gray); & form { display: flex; gap: 1em; padding: 0.5em 1em; align-items: center; } [role="textbox"] { flex-grow: 1; border: 1px solid #ccc; font-family: inherit; font-size: inherit; padding: 1px 6px; max-height: 10em; min-height: 3em; overflow-wrap: anywhere; overflow-y: auto; /* scrollbar only if needed */ border: 2px solid var(--color-outline-gray); border-radius: 0.5em; } & input[type="submit"] { flex-shrink: 0; flex-grow: 0; height: 3em; width: 6em; } }