diff --git a/.gitattributes b/.gitattributes index 7273afe43..eb0c94757 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,11 +1,10 @@ *.ex diff=elixir *.exs diff=elixir +priv/static/instance/static.css diff=css + # Most of js/css files included in the repo are minified bundles, # and we don't want to search/diff those as text files. *.js binary *.js.map binary *.css binary - -priv/static/instance/static.css diff=css -priv/static/static-fe/static-fe.css diff=css diff --git a/lib/pleroma/web/router.ex b/lib/pleroma/web/router.ex index 9f7c94c53..3d89cd4ff 100644 --- a/lib/pleroma/web/router.ex +++ b/lib/pleroma/web/router.ex @@ -716,15 +716,6 @@ defmodule Pleroma.Web.Router do get("/users/:nickname/feed", Feed.UserController, :feed, as: :user_feed) end - scope "/", Pleroma.Web do - # Note: html format is supported only if static FE is enabled - pipe_through([:accepts_html_xml, :static_fe]) - - # Profile pages for static-fe - get("/users/:nickname/with_replies", Feed.UserController, :user_feed) - get("/users/:nickname/media", Feed.UserController, :user_feed) - end - scope "/", Pleroma.Web do pipe_through(:accepts_html) get("/notice/:id/embed_player", OStatus.OStatusController, :notice_player) @@ -759,8 +750,7 @@ defmodule Pleroma.Web.Router do end scope "/", Pleroma.Web.ActivityPub do - # Note: html format is supported only if static FE is enabled - pipe_through([:activitypub_client, :accepts_html_xml_json, :static_fe]) + pipe_through([:activitypub_client]) get("/api/ap/whoami", ActivityPubController, :whoami) get("/users/:nickname/inbox", ActivityPubController, :read_inbox) diff --git a/lib/pleroma/web/static_fe/static_fe_controller.ex b/lib/pleroma/web/static_fe/static_fe_controller.ex index 1ee0aa096..97c41c6f9 100644 --- a/lib/pleroma/web/static_fe/static_fe_controller.ex +++ b/lib/pleroma/web/static_fe/static_fe_controller.ex @@ -10,7 +10,6 @@ defmodule Pleroma.Web.StaticFE.StaticFEController do alias Pleroma.User alias Pleroma.Web.ActivityPub.ActivityPub alias Pleroma.Web.ActivityPub.Visibility - alias Pleroma.Web.CommonAPI alias Pleroma.Web.Metadata alias Pleroma.Web.Router.Helpers @@ -46,7 +45,7 @@ def show(%{assigns: %{notice_id: notice_id}} = conn, _params) do end end - def show(%{assigns: %{username_or_id: username_or_id, tab: tab}} = conn, params) do + def show(%{assigns: %{username_or_id: username_or_id}} = conn, params) do with {_, %User{local: true} = user} <- {:fetch_user, User.get_cached_by_nickname_or_id(username_or_id)}, {_, :visible} <- {:visibility, User.visible_for(user, _reading_user = nil)} do @@ -57,25 +56,10 @@ def show(%{assigns: %{username_or_id: username_or_id, tab: tab}} = conn, params) |> Map.take(@page_keys) |> Map.new(fn {k, v} -> {String.to_existing_atom(k), v} end) - params = case tab do - "posts" -> - Map.put(params, :exclude_replies, true) - "media" -> - Map.put(params, :only_media, true) - _ -> params - end - - - timeline = case tab do - tab when tab in ["posts", "with_replies", "media"] -> - user - |> ActivityPub.fetch_user_activities(_reading_user = nil, params) - |> Enum.map(&represent/1) - "following" -> - User.get_friends(user) - "followers" -> - User.get_followers(user) - end + timeline = + user + |> ActivityPub.fetch_user_activities(_reading_user = nil, params) + |> Enum.map(&represent/1) prev_page_id = (params["min_id"] || params["max_id"]) && @@ -176,11 +160,7 @@ defp represent(%Activity{object: %Object{data: data}} = activity, selected) do sensitive: data["sensitive"], selected: selected, counts: get_counts(activity), - id: activity.id, - visibility: Visibility.get_visibility(activity.object), - reply_to: data["inReplyTo"], - reply_to_user: data["inReplyTo"] && CommonAPI.get_user(hd(data["to"])), - edited_at: data["updated"] + id: activity.id } end @@ -188,14 +168,7 @@ defp assign_id(%{path_info: ["notice", notice_id]} = conn, _opts), do: assign(conn, :notice_id, notice_id) defp assign_id(%{path_info: ["users", user_id]} = conn, _opts), - do: conn - |> assign(:username_or_id, user_id) - |> assign(:tab, "posts") - - defp assign_id(%{path_info: ["users", user_id, tab]} = conn, _opts), - do: conn - |> assign(:username_or_id, user_id) - |> assign(:tab, tab) + do: assign(conn, :username_or_id, user_id) defp assign_id(%{path_info: ["objects", object_id]} = conn, _opts), do: assign(conn, :object_id, object_id) diff --git a/lib/pleroma/web/static_fe/static_fe_view.ex b/lib/pleroma/web/static_fe/static_fe_view.ex index e2013d697..8e23a79a3 100644 --- a/lib/pleroma/web/static_fe/static_fe_view.ex +++ b/lib/pleroma/web/static_fe/static_fe_view.ex @@ -22,39 +22,17 @@ def fetch_media_type(%{"mediaType" => mediaType}) do Utils.fetch_media_type(@media_types, mediaType) end - def time_ago(date) do - {:ok, date, _} = DateTime.from_iso8601(date) - {:ok, now} = DateTime.now("Etc/UTC") - - years = now.year - date.year - months = now.month - date.month - days = now.day - date.day - hours = now.hour - date.hour - minutes = now.minute - date.minute - seconds = now.second - date.second - cond do - years > 0 -> ngettext("1 year ago", "%{count} years ago", years) - months > 0 -> ngettext("1 month ago", "%{count} months ago", months) - days > 6 -> ngettext("1 week ago", "%{count} weeks ago", trunc(days / 7)) - days > 0 -> ngettext("1 day ago", "%{count} days ago", days) - hours > 0 -> ngettext("1 hour ago", "%{count} hours ago", hours) - minutes > 0 -> ngettext("1 minute ago", "%{count} minutes ago", minutes) - seconds > 0 -> ngettext("1 second ago", "%{count} seconds ago", seconds) - true -> gettext("now") - end - end - def format_date(date) do {:ok, date, _} = DateTime.from_iso8601(date) Strftime.strftime!(date, "%Y/%m/%d %l:%M:%S %p UTC") end - def instance_name, do: Pleroma.Config.get([:instance, :name], "Akkoma") + def instance_name, do: Pleroma.Config.get([:instance, :name], "Pleroma") def open_content? do Pleroma.Config.get( [:frontend_configurations, :collapse_message_with_subjects], - false + true ) end end diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex index 3d55393f0..e6adb526b 100644 --- a/lib/pleroma/web/templates/layout/static_fe.html.eex +++ b/lib/pleroma/web/templates/layout/static_fe.html.eex @@ -6,39 +6,10 @@ <%= Pleroma.Config.get([:instance, :name]) %> <%= Phoenix.HTML.raw(assigns[:meta] || "") %> - -
-
-
-
- <%= @inner_content %> -
-
-
-
- <%= gettext("About %{instance}", instance: Pleroma.Config.get([:instance, :name])) %> -
-
- <%= raw render_html("/static/terms-of-service.html") %> -
-
-
+ <%= @inner_content %>
- - diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex index 7146eebc8..4853e7f4b 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex @@ -1,15 +1,8 @@ - - <%= if @nsfw do %> -
-
<%= gettext("Hover to show content") %>
-
- <% end %> - <%= case @mediaType do %> - <% "audio" -> %> - - <% "video" -> %> - - <% _ -> %> - <%= @name %> - <% end %> - +<%= case @mediaType do %> +<% "audio" -> %> + +<% "video" -> %> + +<% _ -> %> +<%= @name %> +<% end %> diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex index 36ffe7b5d..df0244795 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex @@ -1,110 +1,41 @@ -
id="selected" <% end %>> -
- -
- <%= @user.nickname %> -
+
id="selected" <% end %>> +

+ + -

-
-
-
-
-

- <%= raw Formatter.emojify(@user.name, @user.emoji) %> -

- -
-
- - - - <%= if @visibility == "public" do %> - - - - <% else %> - <%= if @visibility == "unlisted" do %> - - - - <% end %> - <% end %> -
-
- <%= if @reply_to do %> -
- - - - - <%= gettext("Reply to") %> - - - - @<%= @reply_to_user.nickname %> - - -
- <% end %> - <%= if @edited_at do %> -
- <%= gettext("Edited %{timeago}", timeago: time_ago(@edited_at)) %> -
- <% end %> -
-
- <%= if @title != "" do %> - <%= raw @title %> +

+ <%= render("_user_card.html", %{user: @user}) %> +
+ <%= if @title != "" do %>
open<% end %>> - <%= gettext("Show content") %> - <% end %> -
- <%= raw @content %> - <%= if length(@attachment) > 0 do %> -
- <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %> - <%= render("_attachment.html", %{name: name, url: url["href"], - mediaType: fetch_media_type(url), nsfw: @sensitive}) %> - <% end %> -
- <% end %> -
- <%= if @title != "" do %> + <%= raw @title %> +
<%= raw @content %>
+ <% else %> +
<%= raw @content %>
+ <% end %> + <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %> + <%= if @sensitive do %> +
+ <%= Gettext.gettext("sensitive media") %> +
+ <%= render("_attachment.html", %{name: name, url: url["href"], + mediaType: fetch_media_type(url)}) %> +
+
+ <% else %> + <%= render("_attachment.html", %{name: name, url: url["href"], + mediaType: fetch_media_type(url)}) %> <% end %> -
- -
-
- - - - <%= @counts.replies %> -
-
- - - - <%= @counts.announces %> -
-
- - - - <%= @counts.likes %> -
-
+ <% end %>
+ <%= if @selected do %> +
+
<%= Gettext.gettext("replies") %>
<%= @counts.replies %>
+
<%= Gettext.gettext("announces") %>
<%= @counts.announces %>
+
<%= Gettext.gettext("likes") %>
<%= @counts.likes %>
+
+ <% end %>
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex index dc8717ea0..977b894d3 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex @@ -1,21 +1,11 @@ -
-
- -
- <%= @user.nickname %> -
- -
-
-
- <%= raw Formatter.emojify(@user.name, @user.emoji) %> +
+ +
+
- -
+ + <%= raw Formatter.emojify(@user.name, @user.emoji) %> + <%= @user.nickname %> + +
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex index b825c85e7..2acd84828 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex @@ -1,8 +1,11 @@ -
-
- <%= gettext("Conversation") %> +
+

<%= link instance_name(), to: "/" %>

+
+ +
+
+ <%= for activity <- @activities do %> + <%= render("_notice.html", activity) %> + <% end %>
- <%= for activity <- @activities do %> - <%= render("_notice.html", activity) %> - <% end %> -
+ diff --git a/lib/pleroma/web/templates/static_fe/static_fe/error.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/error.html.eex index a9dbbf427..d98a1eba7 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/error.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/error.html.eex @@ -1,8 +1,7 @@ -
-
- <%= gettext("Error") %> -
-
- <%= @message %> -
-
+
+

<%= gettext("Oops") %>

+
+ +
+

<%= @message %>

+
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex index ce3a0652f..a14ca305e 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex @@ -1,127 +1,31 @@ -
-
-
- -
-
-
<%= gettext("Posts") %>
- <%= @user.note_count %> -
-
-
<%= gettext("Following") %>
- <%= if @user.hide_follows_count do gettext("Hidden") else @user.following_count end %> -
-
-
<%= gettext("Followers") %>
- <%= if @user.hide_followers_count do gettext("Hidden") else @user.follower_count end %> -
-
- <%= raw @user.bio %> -
- -
- - - - - - - <%= unless @user.hide_follows do %> - - - - <% end %> - <%= unless @user.hide_followers do %> - - - - <% end %> - - - -
- <%= if @prev_page_id do %> - <%= link gettext("Show newer"), to: "?min_id=" <> @prev_page_id, class: "load-posts" %> - <% end %> -
- <%= if @tab in ["posts", "with_replies", "media"] do %> - <%= for activity <- @timeline do %> - <%= render("_notice.html", Map.put(activity, :selected, false)) %> - <% end %> - <% else %> - <%= for user <- @timeline do %> - <%= render("_user_card.html", %{user: user}) %> - <% end %> - <% end %> -
- <%= if @next_page_id do %> - <%= link gettext("Show older"), to: "?max_id=" <> @next_page_id, class: "load-posts" %> - <% end %> -
+
+

<%= link instance_name(), to: "/" %>

- +

+
+ + + +
+ <%= raw Formatter.emojify(@user.name, @user.emoji) %> | + <%= link "@#{@user.nickname}@#{Endpoint.host()}", to: (@user.uri || @user.ap_id) %> +

+

<%= raw @user.bio %>

+
+ +
+
+ <%= for activity <- @timeline do %> + <%= render("_notice.html", Map.put(activity, :selected, false)) %> + <% end %> +

+ <%= if @prev_page_id do %> + <%= link "«", to: "?min_id=" <> @prev_page_id %> + <% end %> + <%= if @prev_page_id && @next_page_id, do: " | " %> + <%= if @next_page_id do %> + <%= link "»", to: "?max_id=" <> @next_page_id %> + <% end %> +

+
+
diff --git a/lib/pleroma/web/views/layout_view.ex b/lib/pleroma/web/views/layout_view.ex index baf5f27df..3161bb1ae 100644 --- a/lib/pleroma/web/views/layout_view.ex +++ b/lib/pleroma/web/views/layout_view.ex @@ -4,11 +4,4 @@ defmodule Pleroma.Web.LayoutView do use Pleroma.Web, :view - import Phoenix.HTML - - def render_html(file) do - case :httpc.request(Pleroma.Web.Endpoint.url <> file) do - {:ok, {{_, 200, _}, _headers, body}} -> body - end - end end diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css index 5ed81cbcd..89e9f4877 100644 --- a/priv/static/static-fe/static-fe.css +++ b/priv/static/static-fe/static-fe.css @@ -1,258 +1,59 @@ -/* pleroma-light and pleroma-dark themes from pleroma-fe */ -:root { - --icon: rgba(100, 103, 108, 1); - --wallpaper: rgba(11, 16, 23, 1); - --alertNeutral: rgba(185, 185, 186, 0.5); - --alertNeutralText: rgba(255, 255, 255, 1); - --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7); - --loadPostsSelected: rgba(23, 34, 46, 1); - --loadPostsSelectedText: rgba(185, 185, 186, 1); - --profileBg: rgba(7, 12, 17, 1); - --profileTint: rgba(15, 22, 30, 0.5); - --btnText: rgba(185, 185, 186, 1); - --btn: rgba(21, 30, 43, 1); - --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - --btnHoverShadow: 0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - --lightText: rgba(236, 236, 236, 1); - --panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5) , 0px 4px 6px 3px rgba(0, 0, 0, 0.3); - --panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - --topBar: rgba(21, 30, 43, 1); - --topBarText: rgba(159, 159, 161, 1); - --topBarShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4) , 0px 2px 7px 0px rgba(0, 0, 0, 0.3); - --underlay: rgba(9, 14, 20, 0.6); - --background: rgba(15, 22, 30, 1); - --faint: rgba(185, 185, 186, 0.5); - --selectedPost: rgba(23, 34, 46, 1); - --link: rgba(226, 177, 136, 1); - --text: rgba(185, 185, 186, 1); - --border: rgba(26, 37, 53, 1); -} -@media (prefers-color-scheme: light) { - :root { - --icon: rgba(145, 155, 167, 1); - --wallpaper: rgba(248, 250, 252, 1); - --alertNeutral: rgba(48, 64, 85, 0.5); - --alertNeutralText: rgba(0, 0, 0, 1); - --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7); - --loadPostsSelected: rgba(224, 233, 240, 1); - --loadPostsSelectedText: rgba(48, 64, 85, 1); - --profileBg: rgba(128, 137, 146, 1); - --profileTint: rgba(242, 246, 249, 0.5); - --btnText: rgba(48, 64, 85, 1); - --btn: rgba(214, 223, 237, 1); - --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2) , 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - --btnHoverShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2) , 0px 0px 1px 2px rgba(255, 195, 159, 1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - --lightText: rgba(11, 14, 19, 1); - --panelShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5) , 0px 3px 6px 1px rgba(0, 0, 0, 0.2); - --panelHeaderShadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.3); - --topBar: rgba(214, 223, 237, 1); - --topBarText: rgba(48, 64, 85, 1); - --topBarShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6); - --underlay: rgba(93, 96, 134, 0.4); - --background: rgba(242, 246, 249, 1); - --faint: rgba(48, 64, 85, 0.5); - --selectedPost: rgba(224, 233, 240, 1); - --link: rgba(245, 91, 27, 1); - --text: rgba(48, 64, 85, 1); - --border: rgba(216, 230, 249, 1); - } -} - -html { - height: 100%; - overflow-y: auto; -} - body { - overflow: auto; - margin: 0; - height: 100%; + background-color: #282c37; font-family: sans-serif; - color: var(--text); + color: white; } -.background-image { - position: fixed; - height: 100%; - top: 3.5em; - z-index: -1000; - left: 0; - right: -20px; - background-size: cover; - background-repeat: no-repeat; - background-color: var(--wallpaper); - background-image: var(--background-image); - background-position: 50%; +main { + margin: 50px auto; + max-width: 960px; + padding: 40px; + background-color: #313543; + border-radius: 4px; } -a { - text-decoration: none; - color: var(--link); +header { + margin: 50px auto; + max-width: 960px; + padding: 40px; + background-color: #313543; + border-radius: 4px; } -nav { - position: sticky; - top: 0; - width: 100%; - height: 3.5em; - background-color: var(--topBar); - box-shadow: var(--topBarShadow); - z-index: 2000; -} - -.inner-nav { - padding: 0 1.2em; - margin: auto; - max-width: 1110px; -} - -.inner-nav a { - line-height: 3.5em; - color: var(--topBarText); -} - -.inner-nav img { - height: 28px; - vertical-align: middle; - padding-right: 5px -} - -body > .container { - display: grid; - grid-template-columns: minmax(25em, 45em) 25em; - grid-template-areas: "content sidebar"; - height: calc(100vh - 3.5em); - justify-content: center; -} - -.underlay { - grid-column-start: 1; - grid-column-end: span 2; - grid-row-start: 1; - grid-row-end: 1; - background-color: var(--underlay); - z-index: -1000; -} - -.column { +.activity { + border-radius: 4px; padding: 1em; - margin: -0.5em; + padding-bottom: 2em; + margin-bottom: 1em; } -.panel { - background-color: var(--background); - border-radius: 3px; - box-shadow: var(--panelShadow); +.avatar { + cursor: pointer; } -.panel-heading { - background-color: var(--topBar); - font-size: 1.3em; - padding: 0.6em; - border-radius: 3px 3px 0 0; - box-shadow: var(--panelHeaderShadow); +.avatar img { + float: left; + border-radius: 4px; + margin-right: 4px; } -.about-content { - padding: 0.6em; -} - -.main { - grid-area: content; - position: relative; -} - -.sidebar { - grid-area: sidebar; - padding-left: 0.5em; -} - -.status-container, -.user-card { - display: flex; - padding: 0.75em; -} - -.left-side { - margin-right: 0.75em; -} - -.right-side { - flex: 1; - min-width: 0; -} - -.status-heading { - margin-bottom: 0.5em; - line-height: 1.3; -} - -.status-heading a { - display: inline-block; - word-break: break-all; -} - -.heading-left { - display: flex; -} - -.heading-right { - display: flex; - align-items: center; -} - -.heading-name-row .account-name { - min-width: 1.6em; - margin-right: 0.4em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1 1 0; -} - -.heading-name-row .username { - white-space: nowrap; - overflow: hidden; - max-width: 85%; - font-weight: bold; - flex-shrink: 1; - margin: 0; - margin-right: 0.4em; - text-overflow: ellipsis; -} - -.heading-name-row { - display: flex; - justify-content: space-between; -} - -.heading-edited-row, -.heading-reply-row { - font-size: 0.85em; - margin-top: 0.2em; -} - -.reply-to-link { - color: var(--faint); -} -.reply-to-link:hover { - text-decoration: underline; +.activity-content img, video, audio { + padding: 1em; + max-width: 800px; + max-height: 800px; } #selected { - background-color: var(--selectedPost); + background-color: #1b2735; } -.timeago { - color: var(--faint); +.counts dt, .counts dd { + float: left; + margin-left: 1em; } -#selected .timeago { - color: var(--text); -} - -.timeago :hover { - text-decoration: underline; +a { + color: white; } .h-card { @@ -268,308 +69,116 @@ header a:hover, .h-card a:hover { text-decoration: underline; } -.attachments { - margin-top: 0.5em; - flex-direction: row; - display: flex; - flex-wrap: nowrap; - align-content: stretch; -} - -.attachment { - border: 1px solid var(--border); - border-radius: 3px; - display: flex; - flex-grow: 1; - justify-content: center; - position: relative; - min-width: 0; -} - -.attachment > * { - width: 100%; - object-fit: contain; -} - -.attachment:not(:last-child) { - margin-right: 0.5em; -} - -.nsfw-banner { - position: absolute; - height: 100%; - display: flex; - align-items: center; -} -.nsfw-banner div { - width: 100%; - text-align: center; -} - -.nsfw-banner:not(:hover) { - background-color: var(--background); -} -.nsfw-banner:hover div { - display: none; -} - -.status-actions { - position: relative; - width: 100%; - display: flex; - margin-top: 0.75em; -} -.status-actions > * { - max-width: 4em; - flex: 1; - display: flex; -} - -.status-summary { +.display-name { + padding-top: 4px; display: block; - font-style: italic; - padding-bottom: 0.5em; - margin-bottom: 0.5em; - border-style: solid; - border-width: 0 0 1px 0; - border-color: var(--border, #222); -} - -summary { - text-align: center; - color: var(--link); - cursor: pointer; -} - -status-body { - word-wrap: break-word; - word-break: break-word; - line-height: 1.4; -} - -.user-info { - padding: 0.5em 26px; -} - -.user-info .container { - padding: 18px 0 6px 0; - display: flex; - align-items: flex-start; - max-height: 56px; -} - -.user-info a { - color: var(--lightText); -} - -.user-info .avatar img { - height: 56px; - width: 56px; -} - -.avatar img { - border-radius: 3px; - box-shadow: var(--avatarShadow); -} - -.user-summary { - display: block; - margin-left: 0.6em; - text-align: left; text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 0; - z-index: 1; - line-height: 2em; - color: var(--lightText); + overflow: hidden; + color: white; } -.button-default { - user-select: none; - color: var(--btnText); - background-color: var(--btn); - border: none; - border-radius: 4px; - box-shadow: var(--btnShadow); - font-size: 1em; - min-height: 2em; +/* keep emoji from being hilariously huge */ +.display-name img { + max-height: 1em; + max-width: 1em; } -.button-default:hover { - box-shadow: var(--btnHoverShadow); - cursor: pointer; -} - -.user-bio { - text-align: center; +.display-name .nickname { + padding-top: 4px; display: block; - line-height: 1.3; - padding: 1em; +} + +.nickname:hover { + text-decoration: none; +} + +.pull-right { + float: right; +} + +.collapse { + margin: 0; + width: auto; +} + +h1 { margin: 0; } -.user-banner { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: linear-gradient(to bottom, var(--profileTint), var(--profileTint)), - var(--user-banner); - background-size: cover; - background-color: var(--profileBg); - -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat, - linear-gradient(to top, white, white); - -webkit-mask-composite: xor; - -webkit-mask-size: 100% 60%; - z-index: -2; +h2 { + color: #9baec8; + font-weight: normal; + font-size: 20px; + margin-bottom: 40px; } -.user-header { - position: relative; - z-index: 1; -} - -.user-role { - color: var(--alertNeutralText); - background-color: var(--alertNeutral); - margin: 0 0.35em; - padding: 0 0.25em; - border-radius: 2px; -} - -.user-profile-fields { - margin: 0 0.5em; -} - -.user-profile-field { - display: flex; - margin: 0.25em; - border: 1px solid var(--border, #222); - border-radius: 3px; - line-height: 1.3; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.user-profile-field dt { - padding: 0.5em 1.5em; - box-sizing: border-box; - flex: 0 1 30%; - font-weight: 500; - color: var(--lightText); - border-right: 1px solid var(--border); - text-align: right; -} - -.user-profile-field dd { - padding: 0.5em 1.5em; - box-sizing: border-box; - flex: 1 1 30%; - margin: 0 0 0 0.25em; -} - -.user-counts { - display: flex; - line-height: 1em; - padding: 0.5em 1.5em 0 1.5em; - text-align: center; - justify-content: space-between; - color: var(--lightText); - flex-wrap: wrap; -} - -.user-count { - flex: 1 0 auto; - padding: 0.5em 0; - margin: 0 0.5em; -} - -.user-count h5 { - font-size: 1em; - font-weight: bolder; - margin: 0 0 0.25em; -} - -.tab-switcher { - display: flex; - padding-top: 5px; - overflow-x: auto; - overflow-y: hidden; - border-bottom: 1px solid var(--border); -} - -.tab-switcher::before, -.tab-switcher::after { - flex: 1 1 auto; - content: ''; -} - -.tab { - flex: 0 0 auto; - padding: 6px 1em; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.tab.active { - background: transparent; -} - -.profile .status-container { - border-bottom: 1px solid var(--border); -} - -.bottom-line { - display: flex; -} - -.load-posts { - display: block; - box-sizing: border-box; - height: 3.5em; - line-height: 3.5em; - padding: 0 1em; +form { width: 100%; - text-align: center; } -.load-posts:hover { - background-color: var(--loadPostsSelected); - color: var(--loadPostsSelectedText); +input { + box-sizing: border-box; + width: 100%; + padding: 10px; + margin-top: 20px; + background-color: rgba(0,0,0,.1); + color: white; + border: 0; + border-bottom: 2px solid #9baec8; + font-size: 14px; } - -.fa-icon { - height: 0.875em; - margin: 0 0.3em; - fill: var(--icon); +input:focus { + border-bottom: 2px solid #4b8ed8; } -.status-actions .fa-icon { - height: 1.1em; +input[type="checkbox"] { + width: auto; } -.user-summary .fa-icon { - margin-left: 0.5em; +button { + box-sizing: border-box; + width: 100%; + color: white; + background-color: #419bdd; + border-radius: 4px; + border: none; + padding: 10px; + margin-top: 30px; + text-transform: uppercase; + font-weight: 500; + font-size: 16px; } -.reply-to-link .fa-icon { - transform: scale(-1, 1); +.alert-danger { + box-sizing: border-box; + width: 100%; + color: #D8000C; + background-color: #FFD2D2; + border-radius: 4px; + border: none; + padding: 10px; + margin-top: 20px; + font-weight: 500; + font-size: 16px; } -@media (max-width: 800px) { - body > .container { - display: block; - } - - .column { - padding: 0; - margin: 0; - } - - .sidebar { - display: none; - } +.alert-info { + box-sizing: border-box; + width: 100%; + color: #00529B; + background-color: #BDE5F8; + border-radius: 4px; + border: none; + padding: 10px; + margin-top: 20px; + font-weight: 500; + font-size: 16px; +} + +img.emoji { + width: 32px; + height: 32px; + padding: 0; + vertical-align: middle; }