System-End/identity-vault
1
0
Fork 0
mirror of https://github.com/System-End/identity-vault.git synced 2026-04-19 20:55:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

red/green approve/deny buttons!

Browse source
This commit is contained in:
24c02 2025-11-26 17:59:33 -05:00
parent d608d376df
commit 074517059d
2 changed files with 139 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
app/frontend/stylesheets/snippets/buttons.scss
View file

@ -79,6 +79,7 @@ input[type="button"],
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: #fcfcfc linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.02) 100%) !important;
border-color: rgba(0, 0, 0, 0.15) !important;
box-shadow:
@ -97,6 +98,7 @@ input[type="button"],
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
@ -107,10 +109,64 @@ input[type="button"],
inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
}
// Override for delete variant on secondary
&.delete {
background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
border: 1px solid #991b1b !important;
color: #ffffff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border: 1px solid #b91c1c !important;
color: #ffffff !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border-color: #991b1b !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
border-color: #dc2626 !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
}
}
// Danger button variant (skeumorphic style)
&.danger {
// Danger/Delete button variant (skeumorphic style)
&.danger,
&.delete {
background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
border: 1px solid #991b1b !important;
color: white !important;
@ -119,19 +175,98 @@ input[type="button"],
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border: 1px solid #b91c1c !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border-color: #991b1b !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
border-color: #dc2626 !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
}
// Approve button variant (green skeumorphic style)
&.approve {
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
border: 1px solid #166534 !important;
color: #ffffff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
border: 1px solid #15803d !important;
color: #ffffff !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
border-color: #166534 !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important;
border-color: #16a34a !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
}
}

4
app/views/doorkeeper/authorizations/new.html.erb
View file

@ -89,7 +89,7 @@
<%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
<%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
<%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
<%= submit_tag t('.deny'), class: "secondary" %>
<%= submit_tag t('.deny'), class: "secondary delete" %>
<% end %>
<%= form_tag oauth_authorization_path, method: :post do %>
@ -101,7 +101,7 @@
<%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
<%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
<%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
<%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "ready ? authLabel : `Wait ${countdown}s...`" %>
<%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "ready ? authLabel : `Wait ${countdown}s...`", class: "approve" %>
<% end %>
</div>
</div>