Page MenuHomePhorge
Files F85629398

No OneTemporary
Actions

Size
18 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex
index e33bada85..99ab0ddad 100644
--- a/lib/pleroma/web/templates/layout/app.html.eex
+++ b/lib/pleroma/web/templates/layout/app.html.eex
@@ -1,20 +1,22 @@
<!DOCTYPE html>
<html lang="<%= Pleroma.Web.Gettext.language_tag() %>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<title><%= Pleroma.Config.get([:instance, :name]) %></title>
<link rel="stylesheet" href="/instance/static.css">
</head>
<body>
<div class="instance-header">
<a class="instance-header__content" href="/">
<img class="instance-header__thumbnail" src="<%= Pleroma.Config.get([:instance, :instance_thumbnail]) %>">
<h1 class="instance-header__title"><%= Pleroma.Config.get([:instance, :name]) %></h1>
</a>
</div>
- <div class="container">
- <%= @inner_content %>
+ <div class="contents">
+ <div class="panel">
+ <%= @inner_content %>
+ </div>
</div>
</body>
</html>
diff --git a/lib/pleroma/web/templates/o_auth/o_auth/_scopes.html.eex b/lib/pleroma/web/templates/o_auth/o_auth/_scopes.html.eex
index 310bf2358..fb34b551d 100644
--- a/lib/pleroma/web/templates/o_auth/o_auth/_scopes.html.eex
+++ b/lib/pleroma/web/templates/o_auth/o_auth/_scopes.html.eex
@@ -1,19 +1,28 @@
<div class="scopes-input">
<%= label @form, :scope, Gettext.dpgettext("static_pages", "oauth scopes message", "The following permissions will be granted") %>
<div class="scopes">
<%= for scope <- @available_scopes do %>
<% # Note: using hidden input with `unchecked_value` in order to distinguish user's empty selection from `scope` param being omitted %>
<%= if scope in @scopes do %>
<div class="scope">
- <%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %>
- <%= label @form, :"scope_#{scope}", String.capitalize(scope) %>
+ <span class="checkbox">
+ <%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %>
+ <%= label @form, :"scope_#{scope}", "" %>
+ </span>
<%= if scope in @scopes && scope do %>
- <code><%= scope %></code> <%= :"Elixir.Gettext".dgettext(Gettext, "oauth_scopes", scope) %>
+ <dl>
+ <dt>
+ <%= :"Elixir.Gettext".dgettext(Gettext, "oauth_scopes", scope) %>
+ </dt>
+ <dd>
+ <code><%= scope %></code>
+ </dd>
+ </dl>
<% end %>
</div>
<% else %>
<%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %>
<% end %>
<% end %>
</div>
</div>
diff --git a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
index 6bc8eb602..aadddf1f4 100644
--- a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
+++ b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
@@ -1,67 +1,72 @@
<%= if Phoenix.Flash.get(@flash, :info) do %>
<p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
<% end %>
<%= if Phoenix.Flash.get(@flash, :error) do %>
<p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
<% end %>
<%= form_for @conn, Routes.o_auth_path(@conn, :authorize), [as: "authorization"], fn f -> %>
<%= if @user do %>
- <div class="account-header">
- <div class="account-header__banner" style="background-image: url('<%= Pleroma.User.banner_url(@user) %>')"></div>
- <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div>
- <div class="account-header__meta">
- <div class="account-header__display-name"><%= @user.name %></div>
- <div class="account-header__nickname">@<%= Pleroma.User.full_nickname(@user.nickname) %></div>
- </div>
+<div class="account-header">
+ <div class="account-header_container">
+ <img class="account-header__banner" src="<%= Pleroma.User.banner_url(@user) %>">
+ <div class="account-header__overlay"></div>
+ </div>
+ <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div>
+ <div class="account-header__meta">
+ <div class="account-header__display-name"><%= @user.name %></div>
+ <div class="account-header__nickname">@<%= Pleroma.User.full_nickname(@user.nickname) %></div>
</div>
+</div>
<% end %>
-<div class="container__content">
+<div class="panel-body">
<%= if @app do %>
<p><%= raw Gettext.dpgettext("static_pages", "oauth authorize message", "Application <strong>%{client_name}</strong> is requesting access to your account.", client_name: safe_to_string(html_escape(@app.client_name))) %></p>
<%= render Phoenix.Controller.view_module(@conn), "_scopes.html", Map.merge(assigns, %{form: f}) %>
<% end %>
<%= if @user do %>
<div class="actions">
<a class="button button--cancel" href="/">
<%= Gettext.dpgettext("static_pages", "oauth authorize cancel button", "Cancel") %>
</a>
- <%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button--approve" %>
+ <%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button button--approve" %>
</div>
<% else %>
<%= if @params["registration"] in ["true", true] do %>
<h3><%= Gettext.dpgettext("static_pages", "oauth register page title", "This is the first time you visit! Please enter your Pleroma handle.") %></h3>
<p><%= Gettext.dpgettext("static_pages", "oauth register nickname unchangeable warning", "Choose carefully! You won't be able to change this later. You will be able to change your display name, though.") %></p>
<div class="input">
<%= label f, :nickname, Gettext.dpgettext("static_pages", "oauth register nickname prompt", "Pleroma Handle") %>
<%= text_input f, :nickname, placeholder: "lain", autocomplete: "username" %>
</div>
<%= hidden_input f, :name, value: @params["name"] %>
<%= hidden_input f, :password, value: @params["password"] %>
<br>
<% else %>
<div class="input">
<%= label f, :name, Gettext.dpgettext("static_pages", "oauth login username prompt", "Username") %>
<%= text_input f, :name %>
</div>
<div class="input">
<%= label f, :password, Gettext.dpgettext("static_pages", "oauth login password prompt", "Password") %>
<%= password_input f, :password %>
</div>
- <%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In") %>
+ <div class="actions">
+ <%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In"), class: "button button--approve" %>
+ </div>
<% end %>
<% end %>
</div>
<%= hidden_input f, :client_id, value: @client_id %>
<%= hidden_input f, :response_type, value: @response_type %>
<%= hidden_input f, :redirect_uri, value: @redirect_uri %>
<%= hidden_input f, :state, value: @state %>
<% end %>
<%= if Pleroma.Config.oauth_consumer_enabled?() do %>
<%= render Phoenix.Controller.view_module(@conn), Pleroma.Web.Auth.WrapperAuthenticator.oauth_consumer_template(), assigns %>
<% end %>
diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css
index 48c74c125..32f56d510 100644
--- a/priv/static/instance/static.css
+++ b/priv/static/instance/static.css
@@ -1,298 +1,325 @@
* {
box-sizing: border-box;
}
:root {
- --brand-color: #d8a070;
- --background-color: #121a24;
- --foreground-color: #182230;
- --primary-text-color: #b9b9ba;
- --muted-text-color: #89898a;
+ font-size: 16px;
+
+ --bg: rgba(18, 26, 36, 1);
+ --fg: rgba(24, 34, 48, 1);
+ --text: rgba(185, 185, 186, 1);
+ --link: rgba(216, 160, 112, 1);
+ --accent: rgba(216, 160, 112, 1);
+ --cRed: rgba(211, 16, 20, 1);
+ --cBlue: rgba(0, 149, 255, 1);
+ --cGreen: rgba(15, 160, 15, 1);
+ --cOrange: rgba(255, 165, 0, 1);
+ --font: sans-serif;
+ --monoFont: monospace;
+ --wallpaper: rgba(14, 21, 29, 1);
+ --selectionBackground: rgba(216, 160, 112, 1);
+ --selectionText: rgba(0, 0, 0, 1);
+ --badgeNotification: rgba(211, 16, 20, 1);
}
body {
- background-color: var(--background-color);
+ background-color: var(--wallpaper);
font-family: sans-serif;
- color: var(--primary-text-color);
+ color: var(--text);
padding: 0;
margin: 0;
-}
-
-.instance-header {
- height: 60px;
- padding: 10px;
- background: var(--foreground-color);
- box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
-}
-
-.instance-header__content {
display: flex;
- align-items: center;
- max-width: 400px;
- margin: 0 auto;
+ flex-direction: column;
+ align-items: stretch;
}
-.instance-header__thumbnail {
- max-width: 40px;
- border-radius: 4px;
- margin-right: 12px;
+a {
+ color: var(--link);
+ text-decoration: none;
}
-.instance-header__title {
- font-size: 16px;
- font-weight: bold;
+.button {
+ width: 100%;
+ background-color: #1c2a3a;
color: var(--primary-text-color);
-}
-
-.container {
- max-width: 400px;
- background-color: var(--foreground-color);
border-radius: 4px;
- overflow: hidden;
- margin: 35px auto;
- box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
- padding: 0em 1em 0em 1em;
-}
-
-.container__content {
- padding: 0 20px;
-}
-
-h1 {
- margin: 0;
- font-size: 24px;
- text-align: center;
+ border: none;
+ padding: 0 1em;
+ line-height: 2;
+ margin-top: 2em;
+ font-size: 1em;
+ cursor: pointer;
+ box-shadow:
+ 0 0 2px 0 black,
+ 0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 -1px 0 0 rgba(0, 0, 0, 0.2) inset;
}
-h2 {
- color: var(--primary-text-color);
- font-weight: normal;
- font-size: 18px;
- margin-bottom: 20px;
+.button:hover {
+ box-shadow:
+ 0 0 1px 2px rgba(185, 185, 186, 0.4),
+ 0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 -1px 0 0 rgba(0, 0, 0, 0.2) inset;
}
-a {
- color: var(--brand-color);
- text-decoration: none;
+.button:active {
+ transform: translate(1px, 1px);
+ box-shadow:
+ 0 0 2px 0 black,
+ 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
}
-form {
- width: 100%;
+.button:hover:active {
+ box-shadow:
+ 0 0 1px 2px rgba(185, 185, 186, 0.4),
+ 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
}
.input {
- color: var(--muted-text-color);
+ color: var(--text);
display: flex;
flex-direction: column;
}
-input {
+.alert-danger {
+ width: 100%;
+ background-color: #931014;
+ border: 1px solid #a06060;
+ border-radius: 4px;
padding: 10px;
- margin-top: 5px;
- margin-bottom: 10px;
- background-color: var(--background-color);
- color: var(--primary-text-color);
- border: 0;
- transition-property: border-bottom;
- transition-duration: 0.35s;
- border-bottom: 2px solid #2a384a;
- font-size: 14px;
- width: inherit;
- box-sizing: border-box;
-}
-
-.scopes-input {
- display: flex;
- flex-direction: column;
- margin: 1em 0;
- color: var(--muted-text-color);
+ margin-top: 20px;
+ font-weight: 500;
+ font-size: 16px;
}
-.scopes-input label:first-child {
- height: 2em;
+.alert-info {
+ width: 100%;
+ border-radius: 4px;
+ border: 1px solid #7d796a;
+ padding: 10px;
+ margin-top: 20px;
+ font-weight: 500;
+ font-size: 16px;
}
-.scopes {
+.instance-header {
display: flex;
- flex-wrap: wrap;
- color: var(--primary-text-color);
+ height: 3.5rem;
+ padding: 0 1em;
+ background: var(--fg);
+ box-shadow:
+ 0 1px 4px 0 rgba(0, 0, 0, 0.4),
+ 0 2px 7px 0 rgba(0, 0, 0, 0.3);
+ justify-content: center;
+ align-self: stretch;
+ margin-bottom: 1rem;
}
-.scope {
+.instance-header__content {
+ line-height: 3.5rem;
display: flex;
- flex-basis: 100%;
- height: 2em;
+ flex: 1 1 45em;
+ max-width: 45em;
align-items: center;
}
-.scope:before {
- color: var(--primary-text-color);
- content: "✔\fe0e";
- margin-left: 1em;
- margin-right: 1em;
+.instance-header__thumbnail {
+ max-width: 3.5em;
+ border-radius: 0.25em;
+ margin-right: 0.75em;
}
-[type="checkbox"] + label {
- display: none;
- cursor: pointer;
- margin: 0.5em;
+.instance-header__title {
+ font-weight: bold;
+ color: var(--text);
+ font-size: 1rem;
}
-[type="checkbox"] {
- display: none;
+.contents {
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
}
-[type="checkbox"] + label:before {
- cursor: pointer;
- display: inline-block;
- color: white;
- background-color: var(--background-color);
- border: 4px solid var(--background-color);
- box-shadow: 0px 0px 1px 0 var(--brand-color);
- width: 1.2em;
- height: 1.2em;
- margin-right: 1.0em;
- content: "";
- transition-property: background-color;
- transition-duration: 0.35s;
- color: var(--background-color);
- margin-bottom: -0.2em;
- border-radius: 2px;
+.panel {
+ color: var(--text);
+ background-color: var(--bg);
+ position: relative;
+ max-width: 45em;
+ border-radius: 0.5em;
+ overflow: hidden;
+ margin: 0;
+ box-shadow:
+ 0 0 3px 0 rgba(0, 0, 0, 0.5),
+ 0 4px 6px 3px rgba(0, 0, 0, 0.3);
+ padding: 0;
+ flex: 1 1 45em;
}
-[type="checkbox"]:checked + label:before {
- background-color: var(--brand-color);
+.button {
+ width: auto;
}
-input:focus {
- outline: none;
- border-bottom: 2px solid var(--brand-color);
+.panel-body {
+ padding: 0 1em 1em;
+ background-color: var(--bg);
}
.actions {
display: flex;
justify-content: flex-end;
}
-.actions button,
-.actions a.button {
- width: auto;
- margin-left: 10px;
+.actions .button {
+ margin-left: 0.5em;
}
-a.button,
-button {
+.account-header {
+ position: relative;
+ display: flex;
+ align-items: end;
width: 100%;
- background-color: #1c2a3a;
- color: var(--primary-text-color);
- border-radius: 4px;
- border: none;
- padding: 10px 16px;
- margin-top: 20px;
- margin-bottom: 20px;
- text-transform: uppercase;
- font-size: 16px;
- box-shadow: 0px 0px 2px 0px black,
- 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
- 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+ aspect-ratio: 3;
+ gap: 1em;
+ padding: 0 1em;
}
-a.button:hover,
-button:hover {
- cursor: pointer;
- box-shadow: 0px 0px 0px 1px var(--brand-color),
- 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
- 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+.account-header_container {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ mask: linear-gradient(to top,transparent 0,white 5em) bottom no-repeat;
}
-.alert-danger {
+.account-header__overlay,
+.account-header__banner {
+ position: absolute;
width: 100%;
- background-color: #931014;
- border: 1px solid #a06060;
- border-radius: 4px;
- padding: 10px;
- margin-top: 20px;
- font-weight: 500;
- font-size: 16px;
+ inset: 0;
}
-.alert-info {
- width: 100%;
- border-radius: 4px;
- border: 1px solid #7d796a;
- padding: 10px;
- margin-top: 20px;
- font-weight: 500;
- font-size: 16px;
+.account-header__overlay {
+ background-color: rgba(18, 26, 36, 0.5);
+ z-index: -1;
}
.account-header__banner {
+ z-index: -2;
+ object-fit: cover;
width: 100%;
- height: 112px;
- background-size: cover;
- background-position: center;
}
.account-header__avatar {
- width: 94px;
- height: 94px;
+ width: 6em;
+ height: 6em;
+ flex: 0 0 6em;
+ z-index: 1;
background-size: cover;
background-position: center;
- margin: -47px 10px 0;
- border: 6px solid var(--foreground-color);
- border-radius: 999px;
}
.account-header__meta {
- padding: 6px 20px 17px;
+ z-index: 1;
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ min-width: 10em;
+ font-size: 125%;
}
+.account-header__nickname,
.account-header__display-name {
- font-size: 20px;
+ font-size: 1.25em;
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+
+.acocunt-header__display-name {
font-weight: bold;
}
.account-header__nickname {
- font-size: 14px;
- color: var(--muted-text-color);
+ font-size: 0.75em;
+ color: var(--link);
}
-@media all and (max-width: 420px) {
- .container {
- margin: 0 auto;
- border-radius: 0;
- }
+input {
+ display: inline-block;
+ background-color: var(--background);
+ outline: none;
+ color: var(--text);
+ line-height: 2;
+ border-radius: 0.5em;
+ box-shadow: var(--shadow);
+ border: none;
+ padding: 0 0.5em;
+}
- .scope {
- flex-basis: 0%;
- }
+input[type="checkbox"] {
+ display: none;
+}
- .scope:before {
- content: "";
- margin-left: 0em;
- margin-right: 1em;
- }
+input, label, label::before {
+ --background: rgba(15, 21, 30, 1);
+ --shadow:
+ 0 0 2px 0 rgba(0, 0, 0, 1),
+ 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 1px 0 0 rgba(0, 0, 0, 0.2) inset,
+ 0 0 2px 0 rgba(0, 0, 0, 0.15) inset,
+ 1px 0 1px 1px rgba(185, 185, 186, 0.15),
+ -1px 0 1px 1px rgba(185, 185, 186, 0.15);
+ --shadowHover:
+ 0 0 4px 0 rgba(185, 185, 186, 0.5),
+ 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset,
+ 0 1px 0 0 rgba(0, 0, 0, 0.2) inset,
+ 0 0 2px 0 rgba(0, 0, 0, 0.15) inset,
+ 1px 0 1px 1px rgba(185, 185, 186, 0.15),
+ -1px 0 1px 1px rgba(185, 185, 186, 0.15);
+}
- .scope:first-child:before {
- margin-left: 1em;
- content: "✔\fe0e";
- }
- .scope:after {
- content: ",";
- }
+label[type="checkbox"]::before {
+ content: ""
+}
- .scope:last-child:after {
- content: "";
- }
+input[type="checkbox"]:checked + label::before {
+ content: "✓"
}
-.form-row {
- display: flex;
+
+label {
+ padding: 1em;
+ display: inline-block;
}
-.form-row > label {
- line-height: 47px;
- flex: 1;
+
+input[type="checkbox"] + label::before {
+ content: "";
+
+ box-shadow:
+ min-width: 1em;
+ min-height: 1em;
+ text-align: center;
+ box-shadow: var(--shadow);
+}
+
+label:hover::before {
+ box-shadow: var(--shadowHover);
}
-.form-row > input {
- flex: 2;
+
+.scope {
+ display: flex;
+ align-items: center;
+
+ dl {
+ margin: 0.75em;
+
+ display: flex;
+ flex-direction: column;
+
+ dt, dd {
+ margin: 0;
+ }
+ }
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Aug 8, 8:14 PM (1 d, 18 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1723943
Default Alt Text
(18 KB)

Event Timeline