rework even more css

This commit is contained in:
Echo
2025-06-27 11:43:04 -04:00
parent 042464d59f
commit e53ced0a03
9 changed files with 64 additions and 189 deletions

View File

@@ -1,37 +1,22 @@
/*
* This is a manifest file that'll be compiled into application.css.
*
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
* depending on specificity.
*
* Consider organizing styles into separate files for maintainability.
*/
/* Phantom Sans Font Faces */
@font-face {
font-family: 'Phantom Sans';
src: url('/fonts/Regular.woff2') format('woff2'),
url('/fonts/Regular.woff') format('woff');
font-family: "Phantom Sans";
src: url("/fonts/Regular.woff2") format("woff2"), url("/fonts/Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Phantom Sans';
src: url('/fonts/Italic.woff2') format('woff2'),
url('/fonts/Italic.woff') format('woff');
font-family: "Phantom Sans";
src: url("/fonts/Italic.woff2") format("woff2"), url("/fonts/Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Phantom Sans';
src: url('/fonts/Bold.woff2') format('woff2'),
url('/fonts/Bold.woff') format('woff');
font-family: "Phantom Sans";
src: url("/fonts/Bold.woff2") format("woff2"), url("/fonts/Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
@@ -40,48 +25,31 @@
@import "https://uchu.style/color.css";
@import "settings.css";
body, html {
font-family: 'Phantom Sans', 'Segoe UI', sans-serif;
body,
html {
font-family: "Phantom Sans", "Segoe UI", sans-serif;
}
*, *::before, *::after {
*,
*::before,
*::after {
font-family: inherit;
}
code, pre, kbd, samp {
code,
pre,
kbd,
samp {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}
/* Force dark mode for all elements */
*, *::before, *::after {
color-scheme: dark;
}
/* Ensure forms and inputs respect dark mode */
input, textarea, select {
input,
textarea,
select {
color-scheme: dark;
}
/* colors */
:root {
--muted-color: var(--uchu-gray);
--black: rgb(42, 42, 42);
--smoke: rgb(242, 242, 242);
/* Force dark mode colors */
color-scheme: dark;
}
:root.development {
--primary-color: var(--color-green);
}
:root.production {
--primary-color: var(--color-primary);
}
.admin-tool {
border-radius: 5px;
border: 1px dashed hsl(24.9, 100%, 67.8%);
@@ -109,7 +77,6 @@ input, textarea, select {
}
.auto-scroll {
/* flash a little bit yellow & leave a little bit of a border */
animation: flash 1s ease-in-out;
border: 2px solid var(--uchu-yellow);
border-radius: 5px;
@@ -128,5 +95,3 @@ select {
background-color: transparent;
}
}

View File

@@ -1,69 +0,0 @@
/* Admin and Dev Tool styles */
.admin-tool {
border-radius: 5px;
border: 1px dashed var(--uchu-orange);
position: relative;
transition: all 0.2s ease;
}
.admin-tool::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--uchu-orange);
opacity: 0.1;
z-index: -1;
border-radius: 4px;
}
.dev-tool {
border-radius: 5px;
border: 1px dashed var(--uchu-green);
position: relative;
transition: all 0.2s ease;
}
.dev-tool::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--uchu-green);
opacity: 0.1;
z-index: -1;
border-radius: 4px;
}
.admin-tool::before {
opacity: 1;
background-color: rgba(255, 166, 0, 0.02); /* Orange with very low opacity */
}
.dev-tool::before {
opacity: 1;
background-color: rgba(0, 255, 0, 0.02); /* Green with very low opacity */
}
/* Improve text contrast in dark mode */
.admin-tool,
.dev-tool {
background-color: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.9);
}
/* Make links more visible */
.admin-tool a,
.dev-tool a {
color: var(--uchu-yellow);
}
.admin-tool a:hover,
.dev-tool a:hover {
color: var(--uchu-orange);
}

View File

@@ -15,6 +15,10 @@
--color-secondary: #8492A6;
}
:root.development {
--color-primary: var(--color-green);
}
/* for some reason tailwind just does not want to work, so lets make sure it does */
.bg-darker { background-color: var(--color-darker) !important; }
.bg-dark { background-color: var(--color-dark) !important; }

View File

@@ -19,7 +19,7 @@
%>
<% if mini_leaderboard_entries&.any? %>
<div class="bg-elevated rounded-xl border border-red p-4 shadow-lg">
<div class="bg-elevated rounded-xl border border-primary p-4 shadow-lg">
<p class="text-xs italic text-muted mb-4">
<% if leaderboard.respond_to?(:scope_name) %>
<strong>Showing others in <%= link_to "your timezone", my_settings_path(anchor: "user_timezone"), data: { turbo: false }, class: "text-accent hover:text-cyan-400 transition-colors" %></strong>
@@ -37,7 +37,7 @@
is_separator_needed = show_user_separately && idx == 3 && actual_rank > 3
%>
<div class="flex items-center p-3 rounded-lg bg-dark transition-colors duration-200 <%= 'bg-dark border border-red' if entry.user_id == current_user&.id %>">
<div class="flex items-center p-3 rounded-lg bg-dark transition-colors duration-200 <%= 'bg-dark border border-primary' if entry.user_id == current_user&.id %>">
<% rank_emoji = case actual_rank
when 0 then "🥇"
when 1 then "🥈"

View File

@@ -1,4 +1,4 @@
<div class="bg-elevated rounded-xl border border-red p-4 shadow-lg">
<div class="bg-elevated rounded-xl border border-primary p-4 shadow-lg">
<p class="text-xs italic text-muted mb-4 opacity-70">
This leaderboard is in <%= Leaderboard::GLOBAL_TIMEZONE %>.
<% if current_user && timezone_difference_in_seconds(Leaderboard::GLOBAL_TIMEZONE, current_user.timezone) != 0 %>

View File

@@ -31,7 +31,7 @@
</div>
<% if current_user && current_user.github_uid.blank? %>
<div class="bg-dark border border-red rounded-lg p-4 mb-6">
<div class="bg-dark border border-primary rounded-lg p-4 mb-6">
<%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-red-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
</div>
<% end %>
@@ -59,7 +59,7 @@
</div>
</div>
<div class="bg-elevated rounded-xl border border-red overflow-hidden">
<div class="bg-elevated rounded-xl border border-primary overflow-hidden">
<% if @entries&.any? %>
<div class="divide-y divide-gray-800">
<% @entries.each_with_index do |entry, index| %>
@@ -101,7 +101,7 @@
<%= short_time_detailed entry.total_seconds %>
</div>
<% admin_tool do %>
<select class="ml-4 bg-dark border border-red rounded px-2 py-1 text-sm text-white"
<select class="ml-4 bg-dark border border-primary rounded px-2 py-1 text-sm text-white"
data-controller="trust-level"
data-trust-level-target="select"
data-user-id="<%= entry.user.id %>"
@@ -116,7 +116,7 @@
<% end %>
</div>
<% unless @user_on_leaderboard && @untracked_entries != 0 %>
<div class="px-4 py-3 text-sm text-muted border-t border-red">
<div class="px-4 py-3 text-sm text-muted border-t border-primary">
Don't see yourself on the leaderboard? You're probably one of the
<%= pluralize(@untracked_entries, "user") %>
who haven't
@@ -124,7 +124,7 @@
</div>
<% end %>
<% if @leaderboard.finished_generating? && @leaderboard.persisted? %>
<div class="px-4 py-2 text-xs italic text-muted border-t border-red">
<div class="px-4 py-2 text-xs italic text-muted border-t border-primary">
Generated in <%= @leaderboard.finished_generating_at - @leaderboard.created_at %> seconds
</div>
<% end %>

View File

@@ -25,86 +25,86 @@
<div>
<div class="space-y-1 text-lg">
<div>
<%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Home
<% end %>
</div>
<div>
<%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Leaderboards
<% end %>
</div>
<% unless current_user %>
<div>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Docs
<% end %>
</div>
<% end %>
<% if current_user %>
<div>
<%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Projects
<% end %>
</div>
<div>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Docs
<% end %>
</div>
<% admin_tool(nil, "div") do %>
<%= link_to my_mailing_address_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailing_address_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_mailing_address_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailing_address_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Mailing Address
<% end %>
<% end %>
<div>
<%= link_to my_mailroom_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailroom_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_mailroom_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailroom_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Mailroom
<% end %>
</div>
<div>
<%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Settings
<% end %>
</div>
<div>
<%= link_to signout_path, class: "block px-2 py-1 rounded-lg transition hover:bg-[#23272a] hover:text-primary", data: { turbo_method: :delete, action: "click->nav#clickLink" } do %>
<%= link_to signout_path, class: "block px-2 py-1 rounded-lg transition hover:bg-[#23272a]", data: { turbo_method: :delete, action: "click->nav#clickLink" } do %>
Logout
<% end %>
</div>
<% end %>
<% dev_tool(nil, "div") do %>
<%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Letter Opener
<% end %>
<% end %>
<% dev_tool(nil, "div") do %>
<%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Mailers
<% end %>
<% end %>
<% admin_tool(nil, "div") do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Review Timeline
<% end %>
<% end %>
<% admin_tool(nil, "div") do %>
<%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Ahoy Captain
<% end %>
<% end %>
<% admin_tool(nil, "div") do %>
<%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
GoodJob
<% end %>
<% end %>
<% admin_tool(nil, "div") do %>
<%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
OAuth2 apps
<% end %>
<% end %>
<% admin_tool(nil, "div") do %>
<%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
<%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
Feature Flags
<% end %>
<% end %>

View File

@@ -11,7 +11,7 @@
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">🚀</span>
@@ -23,7 +23,7 @@
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">🌍</span>
@@ -39,14 +39,14 @@
<%= f.select :timezone,
TZInfo::Timezone.all.map(&:identifier).sort,
{ include_blank: @user.timezone.blank? },
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" } %>
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<p class="text-xs text-gray-400">This affects how your activity graph and other time-based features are displayed.</p>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
<% end %>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">⚙️</span>
@@ -62,13 +62,13 @@
<%= f.select :hackatime_extension_text_type,
User.hackatime_extension_text_types.keys.map { |key| [key.humanize, key] },
{},
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" } %>
{ class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
<% end %>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">💬</span>
@@ -118,7 +118,7 @@
</div>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">🔒</span>
@@ -140,7 +140,7 @@
<% end %>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">🏆</span>
@@ -151,7 +151,7 @@
<%= render "timezone_leaderboard_toggle", user: @user %>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">🔗</span>
@@ -199,14 +199,14 @@
<%= email_field_tag :email, nil,
placeholder: "Add another email address",
required: true,
class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary text-sm" %>
class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary text-sm" %>
<%= submit_tag "Add Email", class: "w-full px-3 py-2 bg-primary hover:bg-primary/80 text-white text-sm font-medium rounded transition-colors duration-200" %>
<% end %>
</div>
</div>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">📊</span>
@@ -223,7 +223,7 @@
<div>
<label class="block text-sm font-medium text-gray-200 mb-2">Theme</label>
<select name="theme" id="theme-select" onchange="up1(this.value)"
class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary">
class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary">
<% GithubReadmeStats.themes.each do |theme| %>
<option value="<%= theme %>"><%= theme.humanize %></option>
<% end %>
@@ -244,7 +244,7 @@
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-200">Project</label>
<select name="project" id="project-select" onchange="up2(this.value)"
class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary">
class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary">
<% @projects.each do |project| %>
<option value="<%= project %>"><%= project %></option>
<% end %>
@@ -279,7 +279,7 @@
</script>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 space-y-6">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 space-y-6">
<div>
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
@@ -322,7 +322,7 @@
</div>
</div>
<div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-red-600/10 rounded">
<span class="text-2xl">📝</span>
@@ -374,11 +374,11 @@
<div class="grid grid-cols-1 gap-4">
<div>
<%= f.label :endpoint_url, class: "block text-sm font-medium text-gray-200 mb-2" %>
<%= f.url_field :endpoint_url, value: "https://wakatime.com/api/v1", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" %>
<%= f.url_field :endpoint_url, value: "https://wakatime.com/api/v1", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" %>
</div>
<div>
<%= f.label :encrypted_api_key, "WakaTime API Key", class: "block text-sm font-medium text-gray-200 mb-2" %>
<%= f.password_field :encrypted_api_key, placeholder: "Enter your WakaTime API key", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" %>
<%= f.password_field :encrypted_api_key, placeholder: "Enter your WakaTime API key", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" %>
</div>
</div>
<%= f.submit "Add Mirror", class: "px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>

View File

@@ -1,25 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*',
],
theme: {
extend: {
colors: {
'darker': '#121217',
'dark': '#17171D',
'darkless': '#252429',
'red': '#EC3750',
'orange': '#FF8C37',
'yellow': '#F1C40F',
'green': '#33D6A6',
'cyan': '#5BC0DE',
'blue': '#338EDA',
'purple': '#A633D6',
'primary': '#EC3750',
'secondary': '#8492A6'
}
},
},
plugins: [],
}