diff --git a/Cargo.lock b/Cargo.lock index 1081db0..47064c2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -743,14 +743,12 @@ dependencies = [ "serde_json", "sha3", "thiserror", - "urlencoding", "wasm-bindgen", "wasm-bindgen-futures", "wasm-bindgen-test", "wasm-logger", "web-sys", "yew", - "yew-router", ] [[package]] @@ -1469,7 +1467,6 @@ version = "0.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f" dependencies = [ - "futures-channel", "gloo-events 0.2.0", "js-sys", "wasm-bindgen", @@ -1617,8 +1614,6 @@ version = "0.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994" dependencies = [ - "futures-channel", - "futures-core", "js-sys", "wasm-bindgen", ] @@ -2871,12 +2866,6 @@ dependencies = [ "windows-sys 0.52.0", ] -[[package]] -name = "route-recognizer" -version = "0.3.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746" - [[package]] name = "rust_decimal" version = "1.37.2" @@ -4321,36 +4310,6 @@ dependencies = [ "syn 2.0.103", ] -[[package]] -name = "yew-router" -version = "0.18.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4ca1d5052c96e6762b4d6209a8aded597758d442e6c479995faf0c7b5538e0c6" -dependencies = [ - "gloo 0.10.0", - "js-sys", - "route-recognizer", - "serde", - "serde_urlencoded", - "tracing", - "urlencoding", - "wasm-bindgen", - "web-sys", - "yew", - "yew-router-macro", -] - -[[package]] -name = "yew-router-macro" -version = "0.18.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "42bfd190a07ca8cfde7cd4c52b3ac463803dc07323db8c34daa697e86365978c" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.103", -] - [[package]] name = "yoke" version = "0.8.0" diff --git a/src/app/Cargo.toml b/src/app/Cargo.toml index 954a488..16710e4 100644 --- a/src/app/Cargo.toml +++ b/src/app/Cargo.toml @@ -11,7 +11,6 @@ heromodels = { path = "/Users/timurgordon/code/git.ourworld.tf/herocode/db/herom circle_client_ws = { path = "../client_ws" } futures = "0.3" -yew-router = "0.18" yew = { version = "0.21", features = ["csr"] } wasm-bindgen = "0.2" log = "0.4" @@ -38,7 +37,6 @@ secp256k1 = { workspace = true, features = ["rand", "recovery", "hashes"] } hex = "0.4" sha3 = "0.10" gloo-storage = "0.3" -urlencoding = "2.1" thiserror = "1.0" [dev-dependencies] diff --git a/src/app/index.html b/src/app/index.html index 972b827..79e465f 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -9,14 +9,7 @@ - - - - - - - diff --git a/src/app/src/auth/auth_manager.rs b/src/app/src/auth/auth_manager.rs index cdcd3dc..93110c8 100644 --- a/src/app/src/auth/auth_manager.rs +++ b/src/app/src/auth/auth_manager.rs @@ -122,6 +122,7 @@ impl AuthManager { } /// Check if an email is available for authentication + #[allow(dead_code)] pub fn is_email_available(&self, email: &str) -> bool { is_email_available(email) } @@ -244,6 +245,7 @@ impl AuthManager { } /// Get current authentication method if authenticated + #[allow(dead_code)] pub fn get_auth_method(&self) -> Option { match &*self.state.borrow() { AuthState::Authenticated { method, .. } => Some(method.clone()), @@ -252,6 +254,7 @@ impl AuthManager { } /// Get current public key if authenticated + #[allow(dead_code)] pub fn get_public_key(&self) -> Option { match &*self.state.borrow() { AuthState::Authenticated { public_key, .. } => Some(public_key.clone()), @@ -260,6 +263,7 @@ impl AuthManager { } /// Validate current authentication state + #[allow(dead_code)] pub fn validate_current_auth(&self) -> AuthResult<()> { match &*self.state.borrow() { AuthState::Authenticated { private_key, .. } => { diff --git a/src/app/src/auth/email_store.rs b/src/app/src/auth/email_store.rs index 5d3c972..8409db0 100644 --- a/src/app/src/auth/email_store.rs +++ b/src/app/src/auth/email_store.rs @@ -94,12 +94,14 @@ pub fn get_available_emails() -> Vec { } /// Check if an email address is available in the store +#[allow(dead_code)] pub fn is_email_available(email: &str) -> bool { get_email_key_mappings().contains_key(email) } /// Add a new email-key mapping (for runtime additions) /// Note: This will only persist for the current session +#[allow(dead_code)] pub fn add_email_key_mapping(email: String, private_key: String) -> AuthResult<()> { // Validate the private key first let public_key = derive_public_key(&private_key)?; diff --git a/src/app/src/auth/types.rs b/src/app/src/auth/types.rs index ec22f75..b40ccd9 100644 --- a/src/app/src/auth/types.rs +++ b/src/app/src/auth/types.rs @@ -24,9 +24,11 @@ pub enum AuthError { EmailNotFound(String), #[error("Generic error: {0}")] + #[allow(dead_code)] Generic(String), #[error("Not authenticated")] + #[allow(dead_code)] NotAuthenticated, } diff --git a/src/app/src/components/book_viewer.rs b/src/app/src/components/book_viewer.rs index a0e2e87..541bd7f 100644 --- a/src/app/src/components/book_viewer.rs +++ b/src/app/src/components/book_viewer.rs @@ -8,6 +8,7 @@ pub struct BookViewerProps { } pub enum BookViewerMsg { + #[allow(dead_code)] GoToPage(usize), NextPage, PrevPage, @@ -130,6 +131,7 @@ impl BookViewer { html! {
{ for html_content }
} } + #[allow(dead_code)] pub fn render_toc(&self, ctx: &Context, toc: &[TocEntry]) -> Html { html! {
    diff --git a/src/app/src/components/chat.rs b/src/app/src/components/chat.rs index f158241..a406652 100644 --- a/src/app/src/components/chat.rs +++ b/src/app/src/components/chat.rs @@ -20,6 +20,7 @@ pub struct ChatMessage { pub enum ChatSender { User, Assistant, + #[allow(dead_code)] System, } @@ -88,8 +89,11 @@ pub enum ChatMsg { UpdateDescription(String), SendMessage, AddResponse(ChatResponse), + #[allow(dead_code)] NewConversation, + #[allow(dead_code)] SelectConversation(u32), + #[allow(dead_code)] LoadConversation(u32), } @@ -493,11 +497,13 @@ impl ChatInterface { summaries } + #[allow(dead_code)] pub fn new_conversation(&mut self) -> u32 { self.create_new_conversation(); self.active_conversation_id.unwrap() } + #[allow(dead_code)] pub fn select_conversation(&mut self, conversation_id: u32) -> bool { if self.conversations.contains_key(&conversation_id) { self.active_conversation_id = Some(conversation_id); @@ -507,6 +513,7 @@ impl ChatInterface { } } + #[allow(dead_code)] pub fn get_conversations(&self) -> Vec { self.get_conversation_summaries() } diff --git a/src/app/src/components/circles_view.rs b/src/app/src/components/circles_view.rs index a8f642e..90a2990 100644 --- a/src/app/src/components/circles_view.rs +++ b/src/app/src/components/circles_view.rs @@ -14,6 +14,7 @@ struct RotationState { } enum RotationAction { + #[allow(dead_code)] Rotate(i32), } diff --git a/src/app/src/components/customize_view.rs b/src/app/src/components/customize_view.rs index 90b75c0..6604d51 100644 --- a/src/app/src/components/customize_view.rs +++ b/src/app/src/components/customize_view.rs @@ -199,14 +199,14 @@ fn render_setting_control( setting_def: ThemeSettingDefinition, current_value: String, circle_ws_url: String, - app_callback: Callback, + _app_callback: Callback, ) -> Html { let setting_key = setting_def.key.clone(); let on_value_change = { - let circle_ws_url_clone = circle_ws_url.clone(); - let setting_key_clone = setting_key.clone(); - Callback::from(move |new_value: String| { + let _circle_ws_url_clone = circle_ws_url.clone(); + let _setting_key_clone = setting_key.clone(); + Callback::from(move |_new_value: String| { // Emit a message to app.rs to update the theme // AppMsg should have a variant like UpdateCircleTheme(circle_id, theme_key, new_value) // TODO: Update this to use WebSocket URL instead of u32 ID diff --git a/src/app/src/components/inspector_interact_tab.rs b/src/app/src/components/inspector_interact_tab.rs index 8011f78..f14e827 100644 --- a/src/app/src/components/inspector_interact_tab.rs +++ b/src/app/src/components/inspector_interact_tab.rs @@ -22,6 +22,7 @@ pub struct InspectorInteractTabProps { } #[derive(Clone, Debug)] +#[allow(dead_code)] pub struct CircleInfo { pub name: String, pub ws_url: String, diff --git a/src/app/src/components/intelligence_view.rs b/src/app/src/components/intelligence_view.rs index 1f6cadf..31cd45a 100644 --- a/src/app/src/components/intelligence_view.rs +++ b/src/app/src/components/intelligence_view.rs @@ -26,6 +26,7 @@ pub enum IntelligenceMsg { ScriptExecuted(Result), } +#[allow(dead_code)] pub struct IntelligenceView { current_input: String, active_conversation_id: Option, @@ -269,6 +270,7 @@ impl IntelligenceView { } } + #[allow(dead_code)] fn fetch_intelligence_data(&mut self, ws_url: &str) { let script = r#" let intelligence = get_intelligence(); diff --git a/src/app/src/components/library_view.rs b/src/app/src/components/library_view.rs index cd0098d..0d96b0f 100644 --- a/src/app/src/components/library_view.rs +++ b/src/app/src/components/library_view.rs @@ -29,6 +29,7 @@ pub struct DisplayLibraryCollection { pub title: String, pub description: Option, pub items: Vec>, + #[allow(dead_code)] pub ws_url: String, pub collection_key: String, } @@ -265,7 +266,7 @@ impl LibraryView { e.stop_propagation(); Msg::SelectCollection(idx) }); - let item_count = collection.items.len(); + let _item_count = collection.items.len(); html! {

    { &collection.title }

    @@ -394,7 +395,7 @@ async fn get_collections(ws_urls: &[String]) -> HashMap { let mut result = HashMap::new(); for (ws_url, collections_vec) in collections_arrays { - for (index, collection) in collections_vec.into_iter().enumerate() { + for (_index, collection) in collections_vec.into_iter().enumerate() { // Use a unique key combining ws_url and collection index/id let key = format!("{}_{}", ws_url, collection.base_data.id); result.insert(key, collection); diff --git a/src/app/src/components/login_component.rs b/src/app/src/components/login_component.rs index 9783ede..ac59414 100644 --- a/src/app/src/components/login_component.rs +++ b/src/app/src/components/login_component.rs @@ -22,7 +22,7 @@ pub struct LoginProps { /// Login method selection #[derive(Debug, Clone, PartialEq)] -enum LoginMethod { +pub(crate) enum LoginMethod { Email, PrivateKey, CreateKey, diff --git a/src/app/src/components/network_animation_view.rs b/src/app/src/components/network_animation_view.rs index 43cfdc2..2ee668a 100644 --- a/src/app/src/components/network_animation_view.rs +++ b/src/app/src/components/network_animation_view.rs @@ -70,7 +70,7 @@ impl NetworkAnimationView { ]; for (i, (id, circle_data)) in all_circles.iter().enumerate() { - if let Some((x, y, region)) = server_positions.get(i % server_positions.len()) { + if let Some((x, y, _region)) = server_positions.get(i % server_positions.len()) { nodes.insert( *id, ServerNode { diff --git a/src/app/src/components/publishing_view.rs b/src/app/src/components/publishing_view.rs index f4388bb..4264ca1 100644 --- a/src/app/src/components/publishing_view.rs +++ b/src/app/src/components/publishing_view.rs @@ -39,14 +39,17 @@ pub enum PublishingMsg { SwitchView(PublishingViewEnum), SwitchPublicationTab(PublishingPublicationTab), CreateNewPublication, - TriggerDeployment(u32), // publication_id - DeletePublication(u32), // publication_id - SavePublicationSettings(u32), // publication_id - FetchPublications(String), // ws_url + TriggerDeployment(u32), // publication_id + DeletePublication(u32), // publication_id + SavePublicationSettings(u32), // publication_id + #[allow(dead_code)] + FetchPublications(String), // ws_url + #[allow(dead_code)] PublicationsReceived(String, Vec), // ws_url, publications ActionCompleted(Result), } +#[allow(dead_code)] pub struct PublishingView { current_view: PublishingViewEnum, active_publication_tab: PublishingPublicationTab, diff --git a/src/app/src/components/sidebar_layout.rs b/src/app/src/components/sidebar_layout.rs index 442d8f0..d681349 100644 --- a/src/app/src/components/sidebar_layout.rs +++ b/src/app/src/components/sidebar_layout.rs @@ -12,7 +12,7 @@ pub struct SidebarLayoutProps { pub fn sidebar_layout(props: &SidebarLayoutProps) -> Html { let on_background_click_handler = { let on_background_click = props.on_background_click.clone(); - Callback::from(move |e: MouseEvent| { + Callback::from(move |_e: MouseEvent| { if let Some(callback) = &on_background_click { callback.emit(()); } diff --git a/src/app/src/rhai_executor.rs b/src/app/src/rhai_executor.rs index f88b114..f7c4120 100644 --- a/src/app/src/rhai_executor.rs +++ b/src/app/src/rhai_executor.rs @@ -1,13 +1,13 @@ use circle_client_ws::CircleWsClientBuilder; -use engine::{ - create_heromodels_engine, eval_script, - mock_db::{create_mock_db, seed_mock_db}, -}; +use engine::{create_heromodels_engine, eval_script}; +use heromodels::db::hero::OurDB; use rhai::Engine; +use std::sync::Arc; // Since we're in a WASM environment, we need to handle the database differently // We'll create a mock database that works in WASM +#[allow(dead_code)] pub struct RhaiExecutor { engine: Engine, } @@ -15,12 +15,10 @@ pub struct RhaiExecutor { impl RhaiExecutor { pub fn new() -> Self { // Create a mock database for the engine - let db = create_mock_db(); - seed_mock_db(db.clone()); + let db = OurDB::new("app.db", true).expect("Failed to create database"); // Create the heromodels engine with all the registered functions - let engine = create_heromodels_engine(db); - + let engine = create_heromodels_engine(Arc::new(db)); Self { engine } } @@ -57,6 +55,7 @@ pub struct ScriptResponse { } // For local execution (self circle) +#[allow(dead_code)] pub fn execute_rhai_script_local(script: &str) -> ScriptResponse { let executor = RhaiExecutor::new(); @@ -123,6 +122,7 @@ pub async fn execute_rhai_script_remote( } // Broadcast script to all WebSocket URLs and return all responses +#[allow(dead_code)] pub async fn broadcast_rhai_script(script: &str, ws_urls: &[String]) -> Vec { let mut responses = Vec::new(); diff --git a/src/app/src/ws_manager.rs b/src/app/src/ws_manager.rs index cc3f0c7..7847782 100644 --- a/src/app/src/ws_manager.rs +++ b/src/app/src/ws_manager.rs @@ -17,6 +17,7 @@ pub type CircleWsManager = WsManager; /// Manages multiple WebSocket connections to servers /// Generic over the data type T that will be fetched and deserialized #[derive(Clone)] +#[allow(dead_code)] pub struct WsManager where T: DeserializeOwned + Clone + 'static, @@ -29,6 +30,7 @@ where auth_manager: Option, } +#[allow(dead_code)] impl WsManager where T: DeserializeOwned + Clone + 'static, @@ -315,6 +317,7 @@ where } /// Fetch data from a single WebSocket server with authentication +#[allow(dead_code)] pub async fn fetch_data_from_ws_url_with_auth( ws_url: &str, script: &str, @@ -359,6 +362,7 @@ where } /// Fetch data from multiple WebSocket servers with authentication +#[allow(dead_code)] pub async fn fetch_data_from_ws_urls_with_auth( ws_urls: &[String], script: String, diff --git a/src/app/static/css/calendar_view.css b/src/app/static/css/calendar_view.css deleted file mode 100644 index 3560586..0000000 --- a/src/app/static/css/calendar_view.css +++ /dev/null @@ -1,676 +0,0 @@ -/* Calendar View - Game-like Minimalistic Design */ -/* :root variables moved to common.css or are view-specific if necessary */ - -.calendar-view-container { - /* Extends .view-container from common.css */ - /* Specific height and margins for calendar view */ - height: calc(100vh - 120px); /* Overrides common.css if different */ - margin: 100px 40px 60px 40px; /* Specific margins */ - /* background: transparent; */ /* Should inherit from body or be set if needed */ - /* color: var(--text-primary); */ /* Inherits from common.css */ - /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; */ /* Uses font from common.css */ - /* display, flex-direction, overflow are covered by .view-container */ -} - -/* Header */ -.calendar-header { - /* Extends .view-header from common.css */ - /* .view-header provides: display, justify-content, align-items, padding-bottom, border-bottom, margin-bottom */ - /* Original margin-bottom: 24px; padding: 0 8px; */ - /* common.css .view-header has margin-bottom: var(--spacing-md) (16px) and padding-bottom for border */ - /* If specific padding for calendar-header itself is needed beyond what .view-header provides, add here */ -} - -.calendar-navigation { - display: flex; - align-items: center; - gap: 16px; -} - -.nav-btn { - display: flex; - align-items: center; - justify-content: center; - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-primary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 12px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable (8px) */ - cursor: pointer; - font-size: 14px; /* Specific font size */ - font-weight: 500; - transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) ease; /* Align transition properties */ - min-width: 44px; /* Specific size */ - height: 44px; /* Specific size */ -} - -.nav-btn:hover { - background: var(--surface-medium); /* Common.css variable for hover */ - border-color: var(--primary-accent); /* Common.css variable for primary interaction */ - transform: translateY(-1px); /* Specific transform */ -} - -.today-btn { - padding: 12px 20px; - min-width: auto; -} - -.calendar-title { - /* Extends .view-title from common.css */ - /* .view-title provides: font-size, font-weight, color */ - /* Original font-size: 24px; font-weight: 600; color: var(--text-primary); */ - /* common.css .view-title has font-size: 1.8em; color: var(--primary-accent) */ - /* If var(--text-primary) is desired over var(--primary-accent) for this title: */ - color: var(--text-primary); -} - -.calendar-view-switcher { - display: flex; - gap: 8px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: 12px; - padding: 6px; -} - -.view-btn { - background: transparent; - color: var(--text-secondary); /* Common.css variable */ - border: none; - padding: 12px 16px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable (8px) */ - cursor: pointer; - font-size: 14px; /* Specific font size */ - font-weight: 500; - transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, transform var(--transition-speed) ease; /* Align transition properties */ - position: relative; - overflow: hidden; /* For shimmer effect */ -} - -.view-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); - transition: left 0.5s ease; -} - -.view-btn:hover::before { - left: 100%; -} - -.view-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable for hover */ - transform: translateY(-1px); /* Specific transform */ -} - -.view-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color for active/primary state, common pattern */ - box-shadow: 0 0 20px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Use common variable and alpha mix for glow */ -} - -.calendar-actions { - display: flex; - gap: 12px; -} - -.action-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Use common spacing variable */ - background: var(--surface-dark); /* Use common.css variable */ - color: var(--text-primary); /* Consistent with common.css */ - border: 1px solid var(--border-color); /* Use common.css variable */ - padding: 12px 20px; /* Specific padding for this view's action buttons */ - border-radius: var(--border-radius-medium); /* Use common.css variable (8px) */ - cursor: pointer; - font-size: 14px; /* Specific font size */ - font-weight: 500; - transition: all 0.2s ease; /* Consider aligning with var(--transition-speed) if appropriate */ - position: relative; - overflow: hidden; -} - -.action-btn.primary { - background: var(--primary-accent); /* Use common.css variable */ - border-color: var(--primary-accent); /* Use common.css variable */ - color: var(--bg-dark); /* Text color for primary button, from common.css .button-primary */ - box-shadow: 0 0 15px color-mix(in srgb, var(--primary-accent) 20%, transparent); /* Use common.css variable in shadow */ -} - -.action-btn:hover { - /* Specific hover effect for this view's action buttons */ - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* This shadow is specific */ - /* Consider standardizing hover background if possible, e.g., var(--surface-medium) */ - background: var(--surface-medium); /* Example: align hover bg with common */ - border-color: var(--primary-accent); /* Example: align hover border with common */ -} - -.action-btn.primary:hover { - /* Specific hover effect for primary action buttons */ - box-shadow: 0 4px 25px color-mix(in srgb, var(--primary-accent) 40%, transparent); /* Use common.css variable in shadow */ - /* background for .primary.hover from common.css .button-primary:hover is color-mix(in srgb, var(--primary-accent) 85%, white) */ - background: color-mix(in srgb, var(--primary-accent) 85%, white); -} - -/* Content Area */ -.calendar-content { - flex: 1; - overflow: hidden; - border-radius: 12px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ -} - -/* Month View */ -.month-view { - height: 100%; - padding: 20px; -} - -.month-grid { - height: 100%; - display: flex; - flex-direction: column; -} - -.weekday-headers { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 1px; - margin-bottom: 1px; -} - -.weekday-header { - padding: 16px 8px; - text-align: center; - font-size: 12px; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; - background: var(--surface-light); /* Common.css variable */ -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: repeat(6, 1fr); - gap: 1px; - flex: 1; - background: var(--border-color); /* Common.css variable */ -} - -.calendar-day { - background: var(--surface-light); /* Common.css variable */ - padding: 12px 8px; - display: flex; - flex-direction: column; - cursor: pointer; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.calendar-day:hover { - background: var(--surface-medium); /* Common.css variable */ - transform: scale(1.02); -} - -.calendar-day.other-month { - opacity: 0.4; -} - -.calendar-day.today { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - box-shadow: 0 0 20px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.calendar-day.today .day-number { - color: var(--bg-dark); /* Text color on primary accent */ - font-weight: 700; -} - -.day-number { - font-size: 14px; - font-weight: 600; - color: var(--text-primary); - margin-bottom: 4px; -} - -.day-events { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; -} - -.event-dot { - padding: 2px 6px; - border-radius: 4px; - font-size: 10px; - font-weight: 500; - color: white; - cursor: pointer; - transition: all 0.2s ease; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.event-dot:hover { - transform: scale(1.05); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.event-title { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.more-events { - font-size: 10px; - color: var(--text-muted); - font-weight: 500; - padding: 2px 4px; - text-align: center; -} - -/* Week View */ -.week-view { - height: 100%; - display: flex; - flex-direction: column; - padding: 20px; -} - -.week-header { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 1px; - margin-bottom: 16px; -} - -.week-day-header { - padding: 16px 8px; - text-align: center; - background: var(--surface-light); /* Common.css variable */ - border-radius: 8px; - transition: all 0.2s ease; -} - -.week-day-header.today { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - box-shadow: 0 0 15px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.day-name { - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 4px; -} - -.day-number { - font-size: 18px; - font-weight: 700; -} - -.week-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 12px; - flex: 1; -} - -.week-day-column { - display: flex; - flex-direction: column; - gap: 8px; - padding: 8px; - background: var(--surface-light); /* Common.css variable */ - border-radius: 8px; - overflow-y: auto; -} - -/* Day View */ -.day-view { - height: 100%; - padding: 20px; - overflow-y: auto; -} - -.day-schedule { - display: flex; - flex-direction: column; -} - -.time-slots { - display: flex; - flex-direction: column; -} - -.time-slot { - display: flex; - min-height: 60px; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.time-label { - width: 80px; - padding: 8px 16px; - font-size: 12px; - font-weight: 500; - color: var(--text-secondary); - background: var(--surface-light); /* Common.css variable */ - display: flex; - align-items: flex-start; - justify-content: flex-end; -} - -.time-content { - flex: 1; - padding: 8px 16px; - display: flex; - flex-direction: column; - gap: 4px; -} - -/* Agenda View */ -.agenda-view { - height: 100%; - padding: 20px; - overflow-y: auto; -} - -.agenda-list { - display: flex; - flex-direction: column; - gap: 12px; -} - -.agenda-item { - display: flex; - align-items: center; - gap: 16px; - padding: 16px; - background: var(--surface-light); /* Common.css variable */ - border-radius: 12px; - cursor: pointer; - transition: all 0.2s ease; - border-left: 4px solid transparent; -} - -.agenda-item:hover { - background: var(--surface-medium); /* Common.css variable */ - transform: translateX(4px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); -} - -.agenda-date { - display: flex; - flex-direction: column; - align-items: center; - min-width: 60px; - padding: 8px; - background: var(--surface-dark); /* Common.css variable */ - border-radius: 8px; -} - -.date-day { - font-size: 20px; - font-weight: 700; - color: var(--text-primary); - line-height: 1; -} - -.date-month { - font-size: 12px; - font-weight: 500; - color: var(--text-secondary); - text-transform: uppercase; -} - -.agenda-event-indicator { - width: 4px; - height: 40px; - border-radius: 2px; - flex-shrink: 0; -} - -.agenda-event-details { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; -} - -.agenda-event-title { - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.agenda-event-time { - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -.agenda-event-description { - font-size: 14px; - color: var(--text-secondary); - line-height: 1.4; -} - -.agenda-event-location { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - color: var(--text-muted); -} - -.agenda-event-location i { - font-size: 10px; -} - -.agenda-event-type { - padding: 6px 12px; - border-radius: 16px; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-secondary); -} - -/* Event Blocks */ -.event-block { - padding: 8px 12px; - background: var(--surface-light); /* Common.css variable */ - border-radius: 6px; - border-left: 4px solid var(--primary-accent); /* Common.css variable */ - cursor: pointer; - transition: all 0.2s ease; - margin-bottom: 4px; -} - -.event-block:hover { - background: var(--surface-medium); /* Common.css variable */ - transform: translateX(2px); - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); -} - -.event-block .event-title { - font-size: 13px; - font-weight: 600; - color: var(--text-primary); - margin-bottom: 2px; -} - -.event-block .event-location { - font-size: 11px; - color: var(--text-muted); -} - -/* Event Type Styles */ -.event-meeting { - border-left-color: var(--primary-accent) !important; /* Mapped to common primary */ -} - -.event-deadline { - border-left-color: #ef4444 !important; /* Literal color (original var(--error)) */ -} - -.event-milestone { - border-left-color: #10b981 !important; /* Literal color (original var(--success)) */ -} - -.event-social { - border-left-color: #8b5cf6 !important; /* Literal color (original var(--accent)) */ -} - -.event-workshop { - border-left-color: #f59e0b !important; /* Literal color (original var(--warning)) */ -} - -.event-conference { - border-left-color: #06b6d4 !important; /* Literal color (original var(--info)) */ -} - -.event-personal { - border-left-color: #6b7280 !important; /* Literal color (original var(--secondary)) */ -} - -/* Agenda Event Type Colors */ -.agenda-event-type.event-meeting { - background: var(--primary-accent); /* Mapped to common primary */ - color: var(--bg-dark); /* Text on primary accent */ -} - -.agenda-event-type.event-deadline { - background: #ef4444; /* Literal color */ - color: white; -} - -.agenda-event-type.event-milestone { - background: #10b981; /* Literal color */ - color: white; -} - -.agenda-event-type.event-social { - background: #8b5cf6; /* Literal color */ - color: white; -} - -.agenda-event-type.event-workshop { - background: #f59e0b; /* Literal color */ - color: var(--bg-dark); /* Text on amber/orange */ -} - -.agenda-event-type.event-conference { - background: #06b6d4; /* Literal color */ - color: var(--bg-dark); /* Text on cyan */ -} - -.agenda-event-type.event-personal { - background: #6b7280; /* Literal color */ - color: white; /* Text on gray */ -} - -/* Scrollbar styling is now handled globally by common.css */ - -/* Responsive design */ -@media (max-width: 768px) { - .calendar-view-container { - margin: 20px; - height: calc(100vh - 80px); - } - - .calendar-header { - flex-direction: column; - gap: 16px; - align-items: stretch; - } - - .calendar-navigation { - justify-content: center; - } - - .calendar-title { - text-align: center; - font-size: 20px; - } - - .calendar-view-switcher { - justify-content: center; - } - - .weekday-header, - .week-day-header { - padding: 12px 4px; - font-size: 11px; - } - - .calendar-day { - padding: 8px 4px; - } - - .day-number { - font-size: 12px; - } - - .event-dot { - font-size: 9px; - padding: 1px 4px; - } - - .week-grid { - grid-template-columns: 1fr; - gap: 8px; - } - - .agenda-item { - flex-direction: column; - align-items: flex-start; - gap: 12px; - } - - .agenda-date { - align-self: flex-start; - } -} - -@media (max-width: 480px) { - .calendar-view-switcher { - flex-wrap: wrap; - } - - .view-btn { - flex: 1; - min-width: 0; - justify-content: center; - } - - .calendar-grid { - grid-template-rows: repeat(6, minmax(80px, 1fr)); - } - - .time-label { - width: 60px; - font-size: 10px; - } -} \ No newline at end of file diff --git a/src/app/static/css/members_view.css b/src/app/static/css/members_view.css deleted file mode 100644 index 60c5c5f..0000000 --- a/src/app/static/css/members_view.css +++ /dev/null @@ -1,125 +0,0 @@ -.members-view .view-title { /* Assuming h1 in component is styled this way */ - color: var(--primary-accent); /* Common.css variable */ - text-align: center; - margin-bottom: var(--spacing-xl); /* Was 30px */ - font-size: 2em; -} - -.member-ripples-container { /* Default flex layout */ - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 35px; /* Increased gap for circular elements */ - padding: 20px 0; /* Add some vertical padding to the container */ -} - -.member-ripples-container.geometric-layout { /* For 1-4 members */ - position: relative; /* Context for absolute positioning */ - min-height: 400px; /* Ensure container has space for positioned items */ - /* Override flex properties if they were set directly on the class before */ - display: block; /* Or whatever is appropriate to override flex if needed */ - flex-wrap: nowrap; /* Override */ - justify-content: initial; /* Override */ - gap: 0; /* Override */ - padding: 0; /* Override or adjust as needed */ -} - -/* Styles for .member-ripple when inside .geometric-layout */ -.member-ripples-container.geometric-layout .member-ripple { - position: absolute; - /* left, top, and transform will be set by inline styles from Rust */ - /* Other .member-ripple styles (size, border-radius, etc.) still apply */ -} - -/* End of rules for .member-ripples-container and its variants */ - -.member-ripple { /* Renamed from .member-card */ - background-color: var(--surface-dark); /* Common.css variable */ - width: 180px; - height: 180px; - border-radius: 50%; /* Circular shape */ - padding: var(--spacing-md); /* Was 15px */ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - box-shadow: var(--shadow-medium); /* Common.css variable, was 0 5px 15px rgba(0,0,0,0.35) */ - border: 2px solid var(--border-color); /* Common.css variable */ - transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; /* Common.css variable */ - position: relative; /* For potential future ripple pseudo-elements */ -} - -.member-ripple:hover { - transform: scale(1.05); - box-shadow: 0 0 25px color-mix(in srgb, var(--primary-accent) 40%, transparent); /* Glow with common primary */ -} - -.member-avatar { - position: relative; /* For status indicator positioning */ - width: 90px; /* Slightly smaller to give more space for text */ - height: 90px; /* Keep square */ - margin-bottom: 10px; /* Adjusted margin for flex layout */ - border-radius: 50%; - overflow: hidden; /* Ensures image stays within circle */ - border: 3px solid var(--primary-accent); /* Common.css variable */ -} - -.member-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.status-indicator { /* No changes needed for status indicator position relative to avatar */ - position: absolute; - bottom: 5px; /* Relative to avatar */ - right: 5px; /* Relative to avatar */ - width: 18px; /* Slightly smaller to fit smaller avatar */ - height: 18px; - border-radius: 50%; - border: 2px solid var(--surface-dark); /* Common.css variable, for contrast */ -} - -.status-online { - background-color: #4CAF50; /* Green */ -} - -.status-away { - background-color: #FFC107; /* Amber */ -} - -.status-offline { - background-color: #757575; /* Grey */ -} - -.member-info { /* Added to ensure text is constrained if needed */ - max-width: 90%; /* Prevent text overflow if names are too long */ -} - -.member-info h3 { - margin: 5px 0 2px 0; /* Adjusted margins */ - color: var(--text-primary); /* Common.css variable */ - font-size: 1.0em; /* Slightly smaller */ - line-height: 1.2; - word-break: break-word; /* Prevent long names from breaking layout */ -} - -.member-info .member-role { - font-size: 0.8em; /* Slightly smaller */ - color: var(--text-secondary); /* Common.css variable */ - font-style: italic; - line-height: 1.1; - word-break: break-word; -} - -.members-view .empty-state { - text-align: center; - padding: 50px; - color: var(--text-secondary); /* Common.css variable */ -} - -.members-view .empty-state p { - margin-bottom: 10px; - font-size: 1.1em; -} diff --git a/src/app/static/css/projects_view.css b/src/app/static/css/projects_view.css deleted file mode 100644 index 3e12ab0..0000000 --- a/src/app/static/css/projects_view.css +++ /dev/null @@ -1,977 +0,0 @@ -/* Projects View - Game-like Minimalistic Design */ -/* :root variables moved to common.css or are view-specific if necessary */ - -.projects-view-container { - /* Extends .view-container from common.css */ - height: calc(100vh - 120px); /* Specific height */ - margin: 100px 40px 60px 40px; /* Specific margins */ - /* font-family will be inherited from common.css body */ - /* Other .view-container properties are inherited or set by common.css */ -} - -/* Header */ -.projects-header { - /* Extends .view-header from common.css */ - /* .view-header provides: display, justify-content, align-items, padding-bottom, border-bottom, margin-bottom */ - /* Original margin-bottom: 24px (var(--spacing-lg)); padding: 0 8px (var(--spacing-sm) on sides) */ - /* common.css .view-header has margin-bottom: var(--spacing-md) (16px). Override if 24px is needed. */ - margin-bottom: var(--spacing-lg); /* Explicitly use 24px equivalent */ - padding: 0 var(--spacing-sm); /* Explicitly use 8px equivalent for side padding */ -} - -.projects-tabs { - display: flex; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Was 12px */ - padding: 6px; /* Specific padding */ -} - -.tab-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: transparent; - color: var(--text-secondary); /* Common.css variable */ - border: none; - padding: 12px 16px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.tab-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); - transition: left 0.5s ease; -} - -.tab-btn:hover::before { - left: 100%; -} - -.tab-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable for hover */ - transform: translateY(-1px); -} - -.tab-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - box-shadow: 0 0 20px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.tab-btn i { - font-size: 16px; -} - -.projects-actions { - display: flex; - gap: 12px; -} - -.action-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-primary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 12px 20px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.action-btn.primary { - background: var(--primary-accent); /* Common.css variable */ - border-color: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color for primary button */ - box-shadow: 0 0 15px color-mix(in srgb, var(--primary-accent) 20%, transparent); /* Glow with common primary */ -} - -.action-btn:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Specific shadow */ - background: var(--surface-medium); /* Example: align hover bg with common */ - border-color: var(--primary-accent); /* Example: align hover border with common */ -} - -.action-btn.primary:hover { - box-shadow: 0 4px 25px color-mix(in srgb, var(--primary-accent) 40%, transparent); /* Glow with common primary */ - background: color-mix(in srgb, var(--primary-accent) 85%, white); /* Common primary button hover */ -} - -/* Content Area */ -.projects-content { - flex: 1; - overflow: hidden; - border-radius: 12px; -} - -/* Kanban Board */ -.kanban-board { - display: flex; - gap: 20px; - height: 100%; - overflow-x: auto; - padding: 8px; -} - -.kanban-column { - min-width: 300px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - display: flex; - flex-direction: column; - overflow: hidden; -} - -.column-header { - padding: 16px 20px; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ - display: flex; - justify-content: space-between; - align-items: center; - background: var(--surface-light); /* Common.css variable */ -} - -.column-header h3 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.task-count { - background: var(--surface-medium); /* Common.css variable */ - color: var(--text-secondary); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-large); /* Common.css variable */ - font-size: 12px; - font-weight: 600; -} - -.column-content { - flex: 1; - padding: 16px; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 12px; -} - -/* Task Cards */ -.task-card { - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ - cursor: pointer; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.task-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); - opacity: 0; - transition: opacity 0.2s ease; -} - -.task-card:hover::before { - opacity: 1; -} - -.task-card:hover { - transform: translateY(-2px); - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.task-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; -} - -.task-priority { - width: 8px; - height: 8px; - border-radius: 50%; -} - -.task-id { - font-size: 11px; - color: var(--text-muted); - font-weight: 600; - text-transform: uppercase; -} - -.task-title { - margin: 0 0 8px 0; - font-size: 14px; - font-weight: 600; - color: var(--text-primary); - line-height: 1.3; -} - -.task-description { - margin: 0 0 12px 0; - font-size: 12px; - color: var(--text-secondary); - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.task-footer { - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; -} - -.task-assignee { - width: 24px; - height: 24px; - border-radius: 50%; - overflow: hidden; - border: 2px solid var(--border-color); /* Common.css variable */ -} - -.task-assignee img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.task-assignee.unassigned { - background: var(--surface-medium); /* Common.css variable */ - display: flex; - align-items: center; - justify-content: center; - color: var(--text-muted); - font-size: 10px; -} - -.story-points { - background: #06b6d4; /* Literal info color */ - color: var(--bg-dark); /* Text on cyan */ - padding: 2px 6px; - border-radius: 4px; - font-size: 11px; - font-weight: 600; -} - -.task-tags { - display: flex; - gap: 4px; -} - -.tag { - background: var(--surface-medium); /* Common.css variable */ - color: var(--text-muted); /* Common.css variable */ - padding: 2px 6px; - border-radius: 4px; - font-size: 10px; - font-weight: 500; -} - -.add-task-placeholder { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-sm); /* Was 8px */ - padding: var(--spacing-md); /* Was 16px */ - border: 2px dashed var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - color: var(--text-muted); /* Common.css variable */ - cursor: pointer; - transition: all 0.2s ease; - margin-top: auto; -} - -.add-task-placeholder:hover { - border-color: var(--primary-accent); /* Common.css variable */ - color: var(--primary-accent); /* Common.css variable */ - background: color-mix(in srgb, var(--primary-accent) 5%, transparent); /* Use common primary with alpha */ -} - -/* Epics View */ -.epics-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.epics-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 20px; -} - -.epic-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - overflow: hidden; - transition: all 0.2s ease; - cursor: pointer; -} - -.epic-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); -} - -.epic-header { - padding: 20px; - color: white; - position: relative; - overflow: hidden; -} - -.epic-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); -} - -.epic-header h3 { - margin: 0 0 8px 0; - font-size: 18px; - font-weight: 700; - position: relative; - z-index: 1; -} - -.epic-status { - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - opacity: 0.9; - position: relative; - z-index: 1; -} - -.epic-content { - padding: 20px; -} - -.epic-description { - margin: 0 0 16px 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.5; -} - -.epic-progress { - margin-bottom: 16px; -} - -.progress-bar { - width: 100%; - height: 6px; - background: var(--surface-medium); /* Common.css variable */ - border-radius: var(--border-radius-small); /* Common.css variable */ - overflow: hidden; - margin-bottom: 8px; -} - -.progress-fill { - height: 100%; - border-radius: 3px; - transition: width 0.3s ease; -} - -.progress-text { - font-size: 12px; - color: var(--text-muted); - font-weight: 500; -} - -.epic-footer { - display: flex; - justify-content: space-between; - align-items: center; -} - -.epic-owner { - display: flex; - align-items: center; - gap: 8px; -} - -.epic-owner img, -.avatar-placeholder { - width: 24px; - height: 24px; - border-radius: 50%; - border: 2px solid var(--border-color); /* Common.css variable */ -} - -.avatar-placeholder { - background: var(--surface-medium); /* Common.css variable */ - display: flex; - align-items: center; - justify-content: center; - color: var(--text-muted); - font-size: 10px; -} - -.epic-owner span { - font-size: 12px; - color: var(--text-secondary); - font-weight: 500; -} - -.epic-date { - font-size: 12px; - color: var(--text-muted); - font-weight: 500; -} - -/* Sprints View */ -.sprints-view { - height: 100%; - overflow-y: auto; - padding: 8px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.sprint-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.sprint-card:hover { - transform: translateY(-2px); - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.sprint-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 16px; -} - -.sprint-info h3 { - margin: 0 0 4px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.sprint-goal { - margin: 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.4; -} - -.sprint-badge { - background: var(--surface-medium); /* Common.css variable */ - color: var(--text-secondary); /* Common.css variable */ - padding: 6px 12px; - border-radius: 16px; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; -} - -.sprint-badge.active { - background: #10b981; /* Literal success color */ - color: white; - box-shadow: 0 0 15px color-mix(in srgb, #10b981 30%, transparent); /* Glow with literal success */ -} - -.sprint-metrics { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 16px; - margin-bottom: 16px; -} - -.metric { - text-align: center; -} - -.metric-value { - display: block; - font-size: 24px; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 4px; -} - -.metric-label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.sprint-progress { - margin-bottom: 16px; -} - -.sprint-dates { - display: flex; - justify-content: center; - align-items: center; - gap: 12px; - font-size: 12px; - color: var(--text-muted); - font-weight: 500; -} - -/* Roadmap View */ -.roadmap-view { - height: 100%; - overflow-y: auto; - padding: 8px 40px; -} - -.roadmap-timeline { - position: relative; - padding-left: 40px; -} - -.roadmap-timeline::before { - content: ''; - position: absolute; - left: 20px; - top: 0; - bottom: 0; - width: 2px; - background: var(--border-color); /* Common.css variable */ -} - -.roadmap-item { - position: relative; - margin-bottom: 32px; - padding-left: 40px; -} - -.roadmap-marker { - position: absolute; - left: -28px; - top: 8px; - width: 16px; - height: 16px; - border-radius: 50%; - border: 4px solid var(--surface-dark); /* Common.css variable */ - box-shadow: 0 0 0 2px var(--border-color); /* Common.css variable */ -} - -.roadmap-content { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; -} - -.roadmap-content:hover { - transform: translateX(8px); - border-color: var(--primary-accent); /* Common.css variable */ -} - -.roadmap-content h4 { - margin: 0 0 8px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.roadmap-content p { - margin: 0 0 16px 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.5; -} - -.roadmap-progress { - display: flex; - align-items: center; - gap: 12px; -} - -.roadmap-progress .progress-bar { - flex: 1; -} - -.roadmap-progress span { - font-size: 12px; - color: var(--text-muted); - font-weight: 600; -} - -/* Analytics View */ -.analytics-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.analytics-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; -} - -.analytics-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ - display: flex; - align-items: center; - gap: 16px; - transition: all 0.2s ease; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.analytics-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); - opacity: 0; - transition: opacity 0.2s ease; -} - -.analytics-card:hover::before { - opacity: 1; -} - -.analytics-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); -} - -.card-icon { - width: 48px; - height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - color: white; - position: relative; - z-index: 1; -} - -.card-icon.tasks { background: var(--primary-accent); } /* Common.css variable */ -.card-icon.completed { background: #10b981; } /* Literal success color */ -.card-icon.progress { background: #f59e0b; } /* Literal warning color */ -.card-icon.epics { background: #8b5cf6; } /* Literal accent color */ -.card-icon.sprints { background: #06b6d4; } /* Literal info color */ -/* Text color for .card-icon.progress should be var(--bg-dark) for contrast */ -.card-icon.progress { color: var(--bg-dark); } -.card-icon.sprints { color: var(--bg-dark); } /* Text on cyan */ - -.card-content h3 { - margin: 0 0 4px 0; - font-size: 28px; - font-weight: 700; - color: var(--text-primary); -} - -.card-content p { - margin: 0; - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -/* Gantt View */ -.gantt-view { - height: 100%; - display: flex; - flex-direction: column; - overflow: hidden; /* Allow internal scrolling for chart */ - padding: 8px; -} - -.gantt-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; - padding: 0 8px; -} - -.gantt-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.gantt-controls { - display: flex; - gap: 8px; -} - -.gantt-zoom-btn { - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-secondary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 8px 12px; - border-radius: var(--border-radius-medium); /* Was 6px */ - cursor: pointer; - font-size: 13px; - font-weight: 500; - transition: all 0.2s ease; -} - -.gantt-zoom-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable */ - border-color: var(--primary-accent); /* Common.css variable */ -} - -.gantt-zoom-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text on primary accent */ - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 0 10px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.gantt-chart { - flex: 1; - overflow-x: auto; /* Horizontal scroll for timeline */ - overflow-y: auto; /* Vertical scroll for rows */ - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ -} - -.gantt-timeline { - position: relative; - min-width: 1200px; /* Ensure there's enough space for a year view, adjust as needed */ -} - -.timeline-header { - position: sticky; - top: 0; - background: var(--surface-light); /* Common.css variable */ - z-index: 10; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ - padding-bottom: var(--spacing-sm); /* Was 8px */ - margin-bottom: 8px; -} - -.timeline-months { - display: flex; - white-space: nowrap; -} - -.timeline-month { - flex: 1 0 auto; /* Allow shrinking but prefer base size */ - min-width: 80px; /* Approximate width for a month, adjust as needed */ - text-align: center; - padding: 8px 0; - color: var(--text-secondary); /* Common.css variable */ - font-size: 12px; - font-weight: 500; - border-right: 1px solid var(--border-color); /* Common.css variable */ -} - -.timeline-month:last-child { - border-right: none; -} - -.gantt-rows { - position: relative; -} - -.gantt-row { - display: flex; - align-items: stretch; /* Make label and timeline same height */ - border-bottom: 1px solid var(--border-color); /* Common.css variable */ - transition: background-color var(--transition-speed) ease; -} - -.gantt-row:last-child { - border-bottom: none; -} - -.gantt-row:hover { - background-color: var(--surface-medium); /* Common.css variable */ -} - -.gantt-row-label { - width: 250px; /* Fixed width for labels */ - padding: 12px 16px; - border-right: 1px solid var(--border-color); /* Common.css variable */ - background-color: var(--surface-light); /* Common.css variable */ - flex-shrink: 0; /* Prevent label from shrinking */ - display: flex; - flex-direction: column; - justify-content: center; -} - -.epic-info h4 { - margin: 0 0 4px 0; - font-size: 14px; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.epic-progress-text { - font-size: 11px; - color: var(--text-muted); - font-weight: 500; -} - -.gantt-row-timeline { - flex: 1; - position: relative; - padding: 12px 0; /* Vertical padding for bars */ - min-height: 40px; /* Ensure row has some height for the bar */ -} - -.gantt-bar { - position: absolute; - height: 24px; /* Height of the bar */ - top: 50%; - transform: translateY(-50%); - border-radius: var(--border-radius-small); /* Common.css variable */ - background-color: var(--primary-accent); /* Default bar color, Common.css variable */ - box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Specific shadow */ - display: flex; - align-items: center; - overflow: hidden; - transition: all 0.2s ease; -} - -.gantt-bar:hover { - opacity: 1 !important; /* Ensure hover is visible */ - transform: translateY(-50%) scale(1.02); -} - -.gantt-progress { - height: 100%; - background-color: #10b981; /* Literal success color */ - border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); /* Common.css variable */ - opacity: 0.7; - transition: width 0.3s ease; -} - -.gantt-bar .gantt-progress[style*="width: 100%"] { - border-radius: var(--border-radius-small); /* Common.css variable */ -} - - -/* Scrollbar styling is now handled globally by common.css */ - -/* Responsive design */ -@media (max-width: 768px) { - .projects-view-container { - margin: 20px; - height: calc(100vh - 80px); - } - - .projects-header { - flex-direction: column; - gap: 16px; - align-items: stretch; - } - - .projects-tabs { - justify-content: center; - } - - .kanban-board { - flex-direction: column; - gap: 16px; - } - - .kanban-column { - min-width: auto; - max-height: 400px; - } - - .epics-grid { - grid-template-columns: 1fr; - } - - .sprint-metrics { - grid-template-columns: repeat(2, 1fr); - } - - .analytics-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 480px) { - .projects-tabs { - flex-wrap: wrap; - } - - .tab-btn { - flex: 1; - min-width: 0; - justify-content: center; - } - - .tab-btn span { - display: none; - } - - .sprint-metrics, - .analytics-grid { - grid-template-columns: 1fr; - } -} \ No newline at end of file diff --git a/src/app/static/css/publishing_view.css b/src/app/static/css/publishing_view.css deleted file mode 100644 index bf78ec6..0000000 --- a/src/app/static/css/publishing_view.css +++ /dev/null @@ -1,1477 +0,0 @@ -/* Publishing View - Modern Game-like Design */ -/* :root variables moved to common.css or are view-specific if necessary */ - -.publishing-view-container { - /* Extends .view-container from common.css */ - height: calc(100vh - 120px); /* Specific height */ - margin: 100px 40px 60px 40px; /* Specific margins */ - /* font-family will be inherited from common.css body */ - /* Other .view-container properties are inherited or set by common.css */ -} - -/* Header */ -.publishing-header { - /* Extends .view-header from common.css */ - margin-bottom: var(--spacing-lg); /* Was 24px */ - padding: 0 var(--spacing-sm); /* Was 0 8px */ -} - -.publishing-tabs { - display: flex; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Was 12px */ - padding: 6px; /* Specific padding */ -} - -.tab-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: transparent; - color: var(--text-secondary); /* Common.css variable */ - border: none; - padding: 12px 16px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.tab-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); - transition: left 0.5s ease; -} - -.tab-btn:hover::before { - left: 100%; -} - -.tab-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable for hover */ - transform: translateY(-1px); -} - -.tab-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - box-shadow: 0 0 20px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.tab-btn i { - font-size: 16px; -} - -.publishing-actions { - display: flex; - gap: 12px; -} - -.action-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-primary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 12px 20px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.action-btn.primary { - background: var(--primary-accent); /* Common.css variable */ - border-color: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color for primary button */ - box-shadow: 0 0 15px color-mix(in srgb, var(--primary-accent) 20%, transparent); /* Glow with common primary */ -} - -.action-btn:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Specific shadow */ - background: var(--surface-medium); /* Example: align hover bg with common */ - border-color: var(--primary-accent); /* Example: align hover border with common */ -} - -.action-btn.primary:hover { - box-shadow: 0 4px 25px color-mix(in srgb, var(--primary-accent) 40%, transparent); /* Glow with common primary */ - background: color-mix(in srgb, var(--primary-accent) 85%, white); /* Common primary button hover */ -} - -/* Breadcrumb */ -.publication-breadcrumb { - display: flex; - align-items: center; - gap: 12px; -} - -.back-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-secondary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 8px 12px; - border-radius: var(--border-radius-medium); /* Was 6px */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; -} - -.back-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable for hover */ - border-color: var(--primary-accent); /* Common.css variable */ -} - -.breadcrumb-separator { - color: var(--text-muted); - font-size: 16px; -} - -.publication-tabs { - display: flex; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Was 12px */ - padding: 6px; /* Specific padding */ -} - -/* Content Area */ -.publishing-content { - flex: 1; - overflow: hidden; - border-radius: 12px; -} - -/* Publications View */ -.publications-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.publications-grid { - display: flex; /* Changed from grid to flex */ - flex-direction: column; /* Arrange items in a column */ - gap: 20px; /* Keep the gap between rows */ -} - -.publication-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - cursor: pointer; - transition: all 0.2s ease; - position: relative; - overflow: hidden; - display: flex; /* Make card a flex container for cells */ - justify-content: space-between; /* Distribute space between cells */ - align-items: flex-start; /* Align items to the top of the cells */ -} - -.publication-cell-info { - flex: 3; /* Title and description */ - padding-right: 15px; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 200px; - justify-content: center; -} - -.publication-cell-category { - flex: 1.5; - padding-left: 15px; - padding-right: 15px; - border-left: 1px solid var(--border-color); /* Common.css variable */ - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; /* Align icon and text to start */ - min-width: 150px; -} - -.publication-cell-asset-link { - flex: 2.5; - padding-left: 15px; - padding-right: 15px; - border-left: 1px solid var(--border-color); /* Common.css variable */ - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - min-width: 200px; -} - -.publication-cell-stats { - flex: 1; /* Placeholder for future stats */ - padding-left: 15px; - padding-right: 15px; - border-left: 1px solid var(--border-color); /* Common.css variable */ - display: flex; - flex-direction: column; - justify-content: center; - min-width: 100px; /* Smallest cell for now */ -} - -.publication-cell-deployment { - flex: 2; - padding-left: 15px; - border-left: 1px solid var(--border-color); /* Common.css variable */ - display: flex; - flex-direction: column; - gap: 8px; - justify-content: center; - min-width: 180px; -} - -/* Styles for content within the new asset/link cell */ -.publication-asset-display { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.9em; -} - -.publication-asset-display i { - color: var(--text-muted); -} - -.publication-asset-display a { - color: var(--primary); - text-decoration: none; - word-break: break-all; -} - -.publication-asset-display a:hover { - text-decoration: underline; -} - -/* Adjustments for items within cells */ -.publication-name { - font-size: 1.1em; - font-weight: 600; - color: var(--text-primary); - margin-bottom: 4px; -} - -.publication-description { - font-size: 0.9em; - color: var(--text-secondary); - line-height: 1.4; - /* Existing line-clamp styles will apply */ -} - -.publication-type-display { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.85em; - color: var(--text-muted); -} - -.publication-type-display i { - font-size: 1.1em; /* Slightly larger icon for type */ - margin-right: 2px; /* Ensure space between icon and text */ -} - -.publication-owner { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.85em; - margin-top: auto; /* Pushes owner to bottom of info cell if space allows */ -} - -.owner-avatar { - width: 24px; - height: 24px; - border-radius: 50%; - object-fit: cover; -} - -.publication-url-display { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.9em; - word-break: break-all; /* Prevent long URLs from breaking layout */ -} - -.publication-url-display i { - color: var(--text-muted); -} - -.publication-url-display a { - color: var(--primary); - text-decoration: none; -} -.publication-url-display a:hover { - text-decoration: underline; -} - - -.metric-item { - font-size: 0.9em; -} - -.metric-item .metric-value { - font-weight: 600; - color: var(--text-primary); -} - -.metric-item .metric-label { - color: var(--text-secondary); - margin-left: 6px; -} - -.publication-status-display { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.9em; - font-weight: 500; -} - -.status-indicator { - width: 10px; - height: 10px; - border-radius: 50%; -} - -.deployment-detail-item { - font-size: 0.85em; - color: var(--text-secondary); - width: 100%; -} - -.deployment-detail-item .detail-label { - font-weight: 500; - color: var(--text-muted); - margin-right: 6px; -} - -/* Remove or adjust old specific styles if they conflict */ -.publication-header, -.publication-content, -.publication-metrics, -.publication-footer { - /* These were top-level sections, now content is in cells */ - /* We can remove them or ensure they don't conflict */ - /* For now, let's assume they are not needed as direct children of publication-card */ - margin-bottom: 0; /* Reset any margins */ - padding: 0; /* Reset any padding */ -} - -.publication-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); - opacity: 0; - transition: opacity 0.2s ease; -} - -.publication-card:hover::before { - opacity: 1; -} - -.publication-card:hover { - transform: translateY(-4px); - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Specific shadow */ -} - -.publication-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.publication-type { - display: flex; - align-items: center; - gap: 8px; - color: var(--text-secondary); - font-size: 12px; - font-weight: 500; - text-transform: uppercase; -} - -.publication-type i { - font-size: 14px; -} - -.publication-status { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; -} - -.status-indicator { - width: 8px; - height: 8px; - border-radius: 50%; -} - -.publication-content { - margin-bottom: 16px; -} - -.publication-name { - margin: 0 0 8px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.publication-description { - margin: 0 0 12px 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.5; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - line-clamp: 2; /* Standard property for future compatibility */ -} - -.publication-url { - display: flex; - align-items: center; - gap: 8px; - margin-top: 8px; -} - -.publication-url i { - font-size: 12px; - color: var(--text-muted); -} - -.publication-url a { - color: var(--primary-accent); /* Common.css variable */ - text-decoration: none; - font-size: 13px; - font-weight: 500; -} - -.publication-url a:hover { - text-decoration: underline; -} - -.publication-metrics { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - margin-bottom: 16px; - padding: 12px 0; - border-top: 1px solid var(--border-color); /* Common.css variable */ - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.metric { - text-align: center; -} - -.metric-value { - display: block; - font-size: 16px; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 2px; -} - -.metric-label { - font-size: 11px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.publication-footer { - display: flex; - justify-content: space-between; - align-items: center; -} - -.publication-owner { - display: flex; - align-items: center; - gap: 8px; -} - -.publication-owner img, -.avatar-placeholder { - width: 24px; - height: 24px; - border-radius: 50%; - border: 2px solid var(--border-color); /* Common.css variable */ -} - -.avatar-placeholder { - background: var(--surface-medium); /* Common.css variable */ - display: flex; - align-items: center; - justify-content: center; - color: var(--text-muted); - font-size: 10px; -} - -.publication-owner span { - font-size: 12px; - color: var(--text-secondary); - font-weight: 500; -} - -.last-deployed { - font-size: 12px; - color: var(--text-muted); - font-weight: 500; -} - -/* Add Publication Card */ -.add-publication-card { - background: var(--surface-dark); /* Common.css variable */ - border: 2px dashed var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: 40px 20px; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -.add-publication-card:hover { - border-color: var(--primary-accent); /* Common.css variable */ - background: color-mix(in srgb, var(--primary-accent) 5%, transparent); /* Use common primary with alpha */ -} - -.add-publication-content { - text-align: center; - color: var(--text-muted); -} - -.add-publication-content i { - font-size: 32px; - margin-bottom: 12px; - color: var(--text-muted); -} - -.add-publication-content h3 { - margin: 0 0 8px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-secondary); -} - -.add-publication-content p { - margin: 0; - font-size: 14px; - color: var(--text-muted); -} - -.add-publication-card:hover .add-publication-content i, -.add-publication-card:hover .add-publication-content h3 { - color: var(--primary-accent); /* Common.css variable */ -} - -/* Analytics View */ -.analytics-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.analytics-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-bottom: 32px; -} - -.analytics-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ - display: flex; - align-items: center; - gap: 16px; - transition: all 0.2s ease; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.analytics-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); - opacity: 0; - transition: opacity 0.2s ease; -} - -.analytics-card:hover::before { - opacity: 1; -} - -.analytics-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); -} - -.card-icon { - width: 48px; - height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - color: white; - position: relative; - z-index: 1; -} - -.card-icon.publications { background: var(--primary-accent); } /* Common.css variable */ -.card-icon.deployed { background: #10b981; } /* Literal success color */ -.card-icon.visitors { background: #06b6d4; color: var(--bg-dark); } /* Literal info color, text adjusted */ -.card-icon.uptime { background: #8b5cf6; } /* Literal accent color */ - -.card-content h3 { - margin: 0 0 4px 0; - font-size: 28px; - font-weight: 700; - color: var(--text-primary); -} - -.card-content p { - margin: 0; - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -.analytics-charts { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; -} - -.chart-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ -} - -.chart-card h3 { - margin: 0 0 16px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.type-distribution, -.status-distribution { - display: flex; - flex-direction: column; - gap: 12px; -} - -.type-item, -.status-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.type-item:last-child, -.status-item:last-child { - border-bottom: none; -} - -.type-name, -.status-name { - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -.type-count, -.status-count { - font-size: 14px; - color: var(--text-primary); - font-weight: 600; -} - -.status-item { - align-items: center; -} - -.status-item .status-indicator { - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 8px; -} - -/* Deployments View */ -.deployments-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.deployments-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.deployment-item { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - display: flex; - align-items: center; - gap: 16px; - transition: all 0.2s ease; - cursor: pointer; -} - -.deployment-item:hover { - transform: translateY(-2px); - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.deployment-status { - display: flex; - align-items: center; -} - -.deployment-status .status-indicator { - width: 12px; - height: 12px; - border-radius: 50%; -} - -.deployment-content { - flex: 1; -} - -.deployment-header { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 8px; -} - -.deployment-header h4 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.deployment-branch { - background: var(--surface-medium); /* Common.css variable */ - color: var(--text-secondary); /* Common.css variable */ - padding: 2px 8px; - border-radius: 12px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; -} - -.commit-message { - margin: 0 0 8px 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.4; -} - -.deployment-meta { - display: flex; - gap: 16px; - font-size: 12px; - color: var(--text-muted); -} - -.commit-hash { - font-family: 'Monaco', 'Menlo', monospace; - background: var(--surface-medium); /* Common.css variable */ - padding: 2px 6px; - border-radius: var(--border-radius-small); /* Common.css variable */ -} - -.deployment-actions { - display: flex; - align-items: center; -} - -.deploy-link { - color: var(--primary-accent); /* Common.css variable */ - font-size: 16px; - text-decoration: none; - padding: 8px; - border-radius: 6px; - transition: all 0.2s ease; -} - -.deploy-link:hover { - background: color-mix(in srgb, var(--primary-accent) 10%, transparent); /* Use common primary with alpha */ - transform: scale(1.1); -} -/* Publication Overview */ -.publication-overview { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.overview-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; -} - -.overview-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ -} - -.overview-card h3 { - margin: 0 0 16px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.detail-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.detail-item:last-child { - border-bottom: none; -} - -.detail-item .label { - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -.detail-item .value { - font-size: 14px; - color: var(--text-primary); - font-weight: 500; -} - -.detail-item .value a { - color: var(--primary-accent); /* Common.css variable */ - text-decoration: none; -} - -.detail-item .value a:hover { - text-decoration: underline; -} - -.metrics-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 16px; -} - -/* Publication Analytics */ -.publication-analytics { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.card-icon.size { background: #6b7280; } /* Literal secondary color */ -.card-icon.build { background: #f59e0b; color: var(--bg-dark); } /* Literal warning color, text adjusted */ - -/* Publication Deployments */ -.publication-deployments { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.deployments-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; -} - -.deployments-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.empty-state { - text-align: center; - padding: 60px 20px; - color: var(--text-muted); -} - -.empty-state i { - font-size: 48px; - margin-bottom: 16px; - opacity: 0.5; -} - -.empty-state h4 { - margin: 0 0 8px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-secondary); -} - -.empty-state p { - margin: 0; - font-size: 14px; - line-height: 1.5; -} - -/* Publication Settings */ -.publication-settings { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.danger-actions { - display: flex; - gap: 12px; -} - -.action-btn.danger { - background: #ef4444; /* Literal error color */ - border-color: #ef4444; /* Literal error color */ - color: white; -} - -.action-btn.danger:hover { - background: #dc2626; /* Darker red, keep literal */ - border-color: #dc2626; /* Darker red, keep literal */ - box-shadow: 0 4px 25px color-mix(in srgb, #ef4444 40%, transparent); /* Glow with error color */ -} - -/* Error Message */ -.error-message { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - text-align: center; - color: var(--text-muted); -} - -.error-message h2 { - margin: 0 0 16px 0; - font-size: 24px; - font-weight: 600; - color: var(--text-secondary); -} - -/* Expanded Publication Card */ -.expanded-publication-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); - animation: expandCard 0.3s ease-out; -} - -@keyframes expandCard { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - -.expanded-card-header { - padding: var(--spacing-lg); /* Was 24px */ - border-bottom: 1px solid var(--border-color); /* Common.css variable */ - background: var(--surface-light); /* Common.css variable */ - flex-shrink: 0; -} - -.expanded-header-top { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.expanded-card-title { - margin: 16px 0; -} - -.expanded-card-title h2 { - margin: 0 0 8px 0; - font-size: 24px; - font-weight: 700; - color: var(--text-primary); -} - -.expanded-description { - margin: 0 0 12px 0; - font-size: 16px; - color: var(--text-secondary); - line-height: 1.5; -} - -.expanded-card-tabs { - display: flex; - gap: var(--spacing-sm); /* Was 8px */ - margin-top: 16px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: 6px; /* Specific padding */ -} - -.expanded-card-content { - flex: 1; - overflow-y: auto; - padding: 24px; - min-height: 0; -} - -/* Expanded Overview */ -.expanded-overview { - height: 100%; -} - -.overview-sections { - display: flex; - flex-direction: column; - gap: 32px; -} - -.overview-section h3 { - margin: 0 0 16px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -/* Live Metrics */ -.live-metrics { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; -} - -.metric-card { - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - display: flex; - align-items: center; - gap: 16px; - transition: all 0.2s ease; -} - -.metric-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); -} - -.metric-icon { - width: 48px; - height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - color: white; -} - -.metric-icon.visitors { background: #06b6d4; color: var(--bg-dark); } /* Literal info, text adjusted */ -.metric-icon.uptime { background: #10b981; } /* Literal success */ -.metric-icon.performance { background: var(--primary-accent); } /* Common primary */ -.metric-icon.size { background: #6b7280; } /* Literal secondary */ - -.metric-info { - flex: 1; -} - -.metric-value { - display: block; - font-size: 24px; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 4px; -} - -.metric-label { - display: block; - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; - margin-bottom: 4px; -} - -.metric-trend { - font-size: 12px; - font-weight: 600; -} - -.metric-trend.positive { - color: #10b981; /* Literal success */ -} - -.metric-trend.negative { - color: #ef4444; /* Literal error */ -} - -.metric-trend.neutral { - color: var(--text-muted); -} - -/* Recent Deployments */ -.recent-deployments { - display: flex; - flex-direction: column; - gap: 12px; -} - -.compact-deployment { - display: flex; - align-items: center; - gap: 12px; - padding: 12px; - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - transition: all var(--transition-speed) ease; -} - -.compact-deployment:hover { - border-color: var(--primary-accent); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable */ -} - -.compact-deployment .deployment-status .status-indicator { - width: 8px; - height: 8px; - border-radius: 50%; -} - -.compact-deployment .deployment-info { - flex: 1; -} - -.compact-deployment .commit-message { - font-size: 14px; - color: var(--text-primary); - font-weight: 500; - margin-bottom: 4px; -} - -.compact-deployment .deployment-meta { - display: flex; - gap: 12px; - font-size: 12px; - color: var(--text-muted); -} - -.compact-deployment .commit-hash { - font-family: 'Monaco', 'Menlo', monospace; - background: var(--surface-medium); /* Common.css variable */ - padding: 2px 4px; - border-radius: var(--border-radius-small); /* Common.css variable */ -} - -.no-deployments { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 40px; - color: var(--text-muted); - font-size: 14px; -} - -.no-deployments i { - font-size: 24px; - opacity: 0.5; -} - -/* Configuration Summary */ -.config-summary { - display: flex; - flex-direction: column; - gap: 12px; -} - -.config-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 16px; - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ -} - -.config-label { - font-size: 14px; - color: var(--text-secondary); - font-weight: 500; -} - -.config-value { - font-size: 14px; - color: var(--text-primary); - font-weight: 500; - font-family: 'Monaco', 'Menlo', monospace; -} - -/* Settings View */ -.settings-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.settings-section { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ - margin-bottom: var(--spacing-lg); /* Was 20px */ -} - -.settings-section h3 { - margin: 0 0 20px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.settings-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} - -.setting-item { - display: flex; - flex-direction: column; - gap: 8px; -} - -.setting-item label { - font-size: 14px; - font-weight: 500; - color: var(--text-secondary); -} - -.setting-item input, -.setting-item select { - background: var(--bg-light); /* Align with common.css .input-base */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - padding: 12px; /* Specific padding, common.css input-base is var(--spacing-sm) (8px) */ - color: var(--text-primary); - font-size: 14px; - transition: all 0.2s ease; -} - -.setting-item input:focus, -.setting-item select:focus { - outline: none; - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Common input focus shadow */ -} - -.setting-item input[type="checkbox"] { - width: auto; - margin: 0; -} - -/* Scrollbar styling is now handled globally by common.css */ - -/* Responsive design */ -@media (max-width: 768px) { - .publishing-view-container { - margin: 20px; - height: calc(100vh - 80px); - } - - .publishing-header { - flex-direction: column; - gap: 16px; - align-items: stretch; - } - - .publishing-tabs { - justify-content: center; - } - - .publications-grid { - grid-template-columns: 1fr; - } - - .analytics-grid { - grid-template-columns: repeat(2, 1fr); - } - - .analytics-charts { - grid-template-columns: 1fr; - } - - .settings-grid { - grid-template-columns: 1fr; - } -} - -@media (max-width: 480px) { - .publishing-tabs { - flex-wrap: wrap; - } - - .tab-btn { - flex: 1; - min-width: 0; - justify-content: center; - } - - .tab-btn span { - display: none; - } - - .analytics-grid { - grid-template-columns: 1fr; - } - - .publication-metrics { - grid-template-columns: 1fr; - } - - .deployment-header { - flex-direction: column; - align-items: flex-start; - gap: 4px; - } - - .deployment-meta { - flex-direction: column; - gap: 4px; - } -} - -/* Publication Source Details */ -.source-detail { - display: flex; - align-items: center; - gap: 8px; /* Space between icon and text */ - font-size: 0.9em; - color: var(--text-secondary); - margin-top: 8px; /* Space above the source detail line */ -} - -.source-detail i { /* Styling for Font Awesome icons */ - color: var(--secondary); /* Use secondary accent color for icons */ - font-size: 1.1em; -} - -.source-detail span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; /* Prevent long text from breaking layout */ -} - -/* Specific source types */ -.static-asset-source { - /* Future specific styles */ -} - -.static-folder-source { - /* Future specific styles */ -} - -.code-repository-source .repo-type { - font-style: italic; - color: var(--text-secondary); - margin-left: 4px; -} - -.external-link-source a { - color: var(--primary); - text-decoration: none; -} - -.external-link-source a:hover { - text-decoration: underline; -} - -.not-applicable-source { - opacity: 0.7; -} \ No newline at end of file diff --git a/src/app/static/css/timeline_view.css b/src/app/static/css/timeline_view.css deleted file mode 100644 index 4e2cc33..0000000 --- a/src/app/static/css/timeline_view.css +++ /dev/null @@ -1,320 +0,0 @@ -/* Timeline View - Ultra Minimalistic Design */ -/* :root variables moved to common.css or are view-specific if necessary */ - -.timeline-view-container { - /* Extends .view-container from common.css but with flex-direction: row */ - flex-direction: row; /* Specific direction for this view */ - height: calc(100vh - 120px); /* Specific height */ - margin: 60px 40px 60px 40px; /* Specific margins */ - gap: var(--spacing-lg); /* Was 24px */ - /* font-family will be inherited from common.css body */ - /* Other .view-container properties are inherited or set by common.css */ -} - -.timeline-sidebar { - width: 280px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 24px */ - overflow-y: auto; - flex-shrink: 0; -} - -.timeline-sidebar h4 { - margin: 0 0 16px 0; - font-size: 14px; - color: var(--text-primary); - font-weight: 600; - letter-spacing: 0.5px; - text-transform: uppercase; -} - -.sidebar-section { - margin-bottom: 32px; -} - -.sidebar-section:last-child { - margin-bottom: 0; -} - -.filter-options, -.time-range-options { - display: flex; - flex-direction: column; - gap: 8px; -} - -.filter-btn { - background: transparent; - color: var(--text-secondary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 12px 16px; - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - text-align: left; -} - -.filter-btn:hover { - background: var(--surface-medium); /* Common.css variable for hover */ - color: var(--text-primary); /* Common.css variable */ - border-color: var(--primary-accent); /* Common interaction color */ -} - -.filter-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - border-color: var(--primary-accent); /* Common.css variable */ -} - -.timeline-content { - flex: 1; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - overflow-y: auto; - padding: var(--spacing-lg); /* Was 24px */ -} - -.timeline-feed { - display: flex; - flex-direction: column; - gap: 32px; -} - -.timeline-day-group { - display: flex; - flex-direction: column; -} - -.timeline-date-header { - margin-bottom: 20px; - padding-bottom: 12px; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.timeline-date-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.timeline-day-actions { - display: flex; - flex-direction: column; - gap: 20px; - position: relative; -} - -.timeline-day-actions::before { - content: ''; - position: absolute; - left: 32px; - top: 0; - bottom: 0; - width: 2px; - background: var(--border-color); /* Common.css variable */ -} - -.timeline-action { - display: flex; - gap: 16px; - position: relative; - padding-left: 8px; -} - -.timeline-action-avatar { - position: relative; - flex-shrink: 0; -} - -.timeline-action-avatar img { - width: 48px; - height: 48px; - border-radius: 50%; - border: 2px solid var(--border-color); /* Common.css variable */ -} - -.timeline-action-icon { - position: absolute; - bottom: -4px; - right: -4px; - width: 24px; - height: 24px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - border: 2px solid var(--surface-dark); /* Common.css variable */ -} - -.timeline-action-icon i { - font-size: 10px; - color: white; -} - -.timeline-action-content { - flex: 1; - background: var(--surface-medium); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ - transition: all 0.2s ease; -} - -.timeline-action-content:hover { - border-color: var(--primary-accent); /* Common interaction color */ -} - -.timeline-action-header { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; - margin-bottom: 8px; - font-size: 14px; - line-height: 1.4; -} - -.timeline-actor-name { - font-weight: 600; - color: var(--text-primary); -} - -.timeline-action-title { - color: var(--text-secondary); -} - -.timeline-circle-name { - color: var(--text-muted); - font-size: 13px; -} - -.timeline-action-description { - margin: 12px 0; - font-size: 14px; - line-height: 1.5; - color: var(--text-secondary); -} - -.timeline-action-target { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - margin: 12px 0; - padding: 8px 12px; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - font-size: 13px; - color: var(--text-secondary); -} - -.timeline-action-target i { - color: var(--text-muted); - font-size: 12px; -} - -.timeline-action-footer { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid var(--border-color); /* Common.css variable */ -} - -.timeline-timestamp { - font-size: 12px; - color: var(--text-muted); - font-weight: 500; -} - -.timeline-metadata { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.metadata-tag { - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-muted); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-small); /* Common.css variable */ - font-size: 11px; - font-weight: 500; - border: 1px solid var(--border-color); /* Common.css variable */ -} - -.empty-state { - text-align: center; - color: var(--text-secondary); - font-size: 14px; - margin-top: 40px; -} - -/* Action type color variations */ -.timeline-action-icon.primary { - background-color: var(--primary-accent); /* Common.css variable */ -} - -.timeline-action-icon.secondary { - background-color: #6b7280; /* Literal secondary color */ -} - -.timeline-action-icon.success { - background-color: #10b981; /* Literal success color */ -} - -.timeline-action-icon.warning { - background-color: #f59e0b; /* Literal warning color */ -} -.timeline-action-icon.warning i { color: var(--bg-dark); } /* Adjust icon color for contrast */ - -.timeline-action-icon.info { - background-color: #06b6d4; /* Literal info color */ -} -.timeline-action-icon.info i { color: var(--bg-dark); } /* Adjust icon color for contrast */ - -.timeline-action-icon.accent { - background-color: #8b5cf6; /* Literal accent color */ -} - -/* Scrollbar styling is now handled globally by common.css */ - -/* Responsive design */ -@media (max-width: 768px) { - .timeline-view-container { - flex-direction: column; - margin: 20px; - height: calc(100vh - 80px); - } - - .timeline-sidebar { - width: 100%; - height: auto; - max-height: 200px; - } - - .timeline-day-actions::before { - left: 24px; - } - - .timeline-action-avatar img { - width: 40px; - height: 40px; - } - - .timeline-action-icon { - width: 20px; - height: 20px; - } - - .timeline-action-icon i { - font-size: 8px; - } -} \ No newline at end of file diff --git a/src/app/static/css/treasury_view.css b/src/app/static/css/treasury_view.css deleted file mode 100644 index 51df87f..0000000 --- a/src/app/static/css/treasury_view.css +++ /dev/null @@ -1,1652 +0,0 @@ -/* Treasury View - Financial Management Design */ -/* :root variables moved to common.css or are view-specific if necessary (e.g. --gold, --silver will be literal) */ - -.treasury-view-container { - /* Extends .view-container from common.css */ - height: calc(100vh - 120px); /* Specific height */ - margin: 100px 40px 60px 40px; /* Specific margins */ - /* font-family will be inherited from common.css body */ - /* Other .view-container properties are inherited or set by common.css */ -} - -/* Header */ -.treasury-header { - /* Extends .view-header from common.css */ - margin-bottom: var(--spacing-lg); /* Was 24px */ - padding: 0 var(--spacing-sm); /* Was 0 8px */ -} - -.treasury-tabs { - display: flex; - gap: 6px; /* Specific smaller gap for more tabs */ - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Was 12px */ - padding: 6px; /* Specific padding */ - overflow-x: auto; -} - -.tab-btn { - display: flex; - align-items: center; - gap: 6px; /* Specific smaller gap */ - background: transparent; - color: var(--text-secondary); /* Common.css variable */ - border: none; - padding: 10px 14px; /* Specific padding for smaller tabs */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 13px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; - white-space: nowrap; - min-width: fit-content; -} - -.tab-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); - transition: left 0.5s ease; -} - -.tab-btn:hover::before { - left: 100%; -} - -.tab-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable for hover */ - transform: translateY(-1px); -} - -.tab-btn.active { - background: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color on primary accent */ - box-shadow: 0 0 20px color-mix(in srgb, var(--primary-accent) 30%, transparent); /* Glow with common primary */ -} - -.tab-btn i { - font-size: 14px; -} - -.treasury-actions { - display: flex; - gap: 12px; -} - -.action-btn { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-dark); /* Common.css variable */ - color: var(--text-primary); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - padding: 12px 20px; /* Specific padding */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: all 0.2s ease; - position: relative; - overflow: hidden; -} - -.action-btn.primary { - background: var(--primary-accent); /* Common.css variable */ - border-color: var(--primary-accent); /* Common.css variable */ - color: var(--bg-dark); /* Text color for primary button */ - box-shadow: 0 0 15px color-mix(in srgb, var(--primary-accent) 20%, transparent); /* Glow with common primary */ -} - -.action-btn:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Specific shadow */ - background: var(--surface-medium); /* Example: align hover bg with common */ - border-color: var(--primary-accent); /* Example: align hover border with common */ -} - -.action-btn.primary:hover { - box-shadow: 0 4px 25px color-mix(in srgb, var(--primary-accent) 40%, transparent); /* Glow with common primary */ - background: color-mix(in srgb, var(--primary-accent) 85%, white); /* Common primary button hover */ -} - -/* Content Area */ -.treasury-content { - flex: 1; - overflow: hidden; - border-radius: 12px; -} - -/* Shareholders View */ -.shareholders-view { - height: 100%; - overflow: hidden; - padding: 8px; -} - -.shareholders-content { - display: flex; - gap: 24px; - height: 100%; -} - -.shareholders-list { - flex: 2; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.shareholders-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; - padding: 0 8px; -} - -.shareholders-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.shareholders-count { - font-size: 12px; - color: var(--text-muted); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-large); /* Common.css variable */ - text-transform: uppercase; - font-weight: 500; -} - -.shareholders-table { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 12px; -} - -.shareholder-row { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.shareholder-row::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); - opacity: 0; - transition: opacity 0.2s ease; -} - -.shareholder-row:hover::before { - opacity: 1; -} - -.shareholder-row:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Specific shadow */ - border-color: #ffd700; /* Literal gold */ -} - -.shareholder-main { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.shareholder-info { - display: flex; - align-items: center; - gap: 12px; -} - -.shareholder-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - border: 2px solid var(--border-color); /* Common.css variable */ -} - -.shareholder-avatar.placeholder { - background: var(--surface-medium); /* Common.css variable */ - display: flex; - align-items: center; - justify-content: center; - color: var(--text-muted); - font-size: 18px; -} - -.shareholder-details h4 { - margin: 0 0 4px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.shareholder-type { - font-size: 12px; - color: var(--text-secondary); - text-transform: uppercase; - font-weight: 500; -} - -.shareholder-equity { - text-align: center; -} - -.equity-percentage { - font-size: 24px; - font-weight: 700; - color: #ffd700; /* Literal gold */ - display: block; - margin-bottom: 4px; -} - -.equity-label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.shareholder-shares { - display: flex; - gap: 24px; -} - -.shares-info { - text-align: center; -} - -.shares-owned, -.shares-vested { - font-size: 16px; - font-weight: 600; - color: var(--text-primary); - display: block; - margin-bottom: 4px; -} - -.shares-label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.valuation-panel { - flex: 1; - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - display: flex; - flex-direction: column; - overflow: hidden; -} - -.valuation-header { - margin-bottom: 20px; - text-align: center; -} - -.valuation-header h3 { - margin: 0 0 12px 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.total-valuation { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; -} - -.valuation-amount { - font-size: 32px; - font-weight: 700; - color: #ffd700; /* Literal gold */ -} - -.valuation-label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.valuation-components { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 16px; -} - -.valuation-component { - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.valuation-component:hover { - border-color: #ffd700; /* Literal gold */ - transform: translateY(-1px); -} - -.component-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 8px; -} - -.component-info h4 { - margin: 0 0 4px 0; - font-size: 14px; - font-weight: 600; - color: var(--text-primary); -} - -.component-type { - font-size: 11px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.component-value { - text-align: right; -} - -.component-value .value { - font-size: 16px; - font-weight: 700; - color: #ffd700; /* Literal gold */ - display: block; - margin-bottom: 2px; -} - -.component-value .percentage { - font-size: 12px; - color: var(--text-secondary); - font-weight: 500; -} - -.component-description { - margin: 8px 0 12px 0; - font-size: 12px; - color: var(--text-secondary); - line-height: 1.4; -} - -.component-progress { - margin-bottom: 8px; -} - -.component-updated { - font-size: 11px; - color: var(--text-muted); - text-align: center; -} - -.metric { - text-align: center; -} - -.metric-label { - display: block; - font-size: 12px; - color: var(--text-muted); - margin-bottom: 4px; - text-transform: uppercase; - font-weight: 500; -} - -.metric-value { - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.vesting-progress { - margin-top: 16px; -} - -.progress-label { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; - font-size: 12px; - color: var(--text-secondary); -} - -.progress-bar { - width: 100%; - height: 6px; - background: var(--surface-medium); /* Common.css variable */ - border-radius: var(--border-radius-small); /* Common.css variable */ - overflow: hidden; -} - -.progress-fill { - height: 100%; - background: #10b981; /* Literal success color */ - border-radius: var(--border-radius-small); /* Common.css variable */ - transition: width 0.3s ease; -} - -/* Convertibles View */ -.convertibles-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.convertibles-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.convertible-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.convertible-card:hover { - transform: translateY(-2px); - border-color: #8b5cf6; /* Literal accent color */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.convertible-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.convertible-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.convertible-amount .amount { - font-size: 20px; - font-weight: 700; - color: #8b5cf6; /* Literal accent color */ -} - -.convertible-details { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 12px; -} - -.detail-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - border-bottom: 1px solid var(--border-color); /* Common.css variable */ -} - -.detail-row:last-child { - border-bottom: none; -} - -.detail-row .label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.detail-row .value { - font-size: 14px; - color: var(--text-primary); - font-weight: 600; -} - -/* Loans View */ -.loans-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.loans-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.loan-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.loan-card:hover { - transform: translateY(-2px); - border-color: #f59e0b; /* Literal warning color */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.loan-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.loan-parties { - display: flex; - align-items: center; - gap: 16px; -} - -.party { - display: flex; - flex-direction: column; - gap: 4px; -} - -.party .label { - font-size: 10px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.party .name { - font-size: 14px; - color: var(--text-primary); - font-weight: 600; -} - -.loan-parties i { - color: var(--text-muted); -} - -.status-badge { - padding: 4px 8px; - border-radius: 12px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; -} - -.status-badge.active { - background: #10b981; /* Literal success color */ - color: white; -} - -.status-badge.pending { - background: #f59e0b; /* Literal warning color */ - color: var(--bg-dark); /* Text on warning */ -} - -.status-badge.repaid { - background: #06b6d4; /* Literal info color */ - color: var(--bg-dark); /* Text on info */ -} - -.status-badge.defaulted { - background: #ef4444; /* Literal error color */ - color: white; -} - -.loan-metrics { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 16px; - margin-bottom: 16px; -} - -.loan-progress { - margin-top: 16px; -} - -/* Combined Treasury View */ -.combined-treasury-view { - height: 100%; - overflow: hidden; - padding: 8px; - display: flex; - flex-direction: column; - gap: 20px; -} - -.treasury-overview { - flex-shrink: 0; -} - -.overview-cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; -} - -.overview-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - display: flex; - align-items: center; - gap: 16px; - transition: all 0.2s ease; - cursor: pointer; -} - -.overview-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); -} - -.overview-card.total { - border-color: #ffd700; /* Literal gold */ -} - -.overview-card.total:hover { - border-color: #ffd700; /* Literal gold */ - box-shadow: 0 4px 25px rgba(255, 215, 0, 0.3); /* Specific shadow */ -} - -.overview-card.assets:hover { - border-color: #10b981; /* Literal success */ -} - -.overview-card.crypto:hover { - border-color: #f59e0b; /* Literal warning */ -} - -.overview-card.transactions:hover { - border-color: #06b6d4; /* Literal info */ -} - -.card-icon { - width: 48px; - height: 48px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - flex-shrink: 0; -} - -.overview-card.total .card-icon { - background: rgba(255, 215, 0, 0.1); - color: #ffd700; /* Literal gold */ -} - -.overview-card.assets .card-icon { - background: rgba(16, 185, 129, 0.1); - color: #10b981; /* Literal success */ -} - -.overview-card.crypto .card-icon { - background: rgba(245, 158, 11, 0.1); - color: #f59e0b; /* Literal warning */ -} - -.overview-card.transactions .card-icon { - background: rgba(6, 182, 212, 0.1); - color: #06b6d4; /* Literal info */ -} - -.card-content h3 { - margin: 0 0 4px 0; - font-size: 24px; - font-weight: 700; - color: var(--text-primary); -} - -.card-content p { - margin: 0; - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.treasury-sections { - flex: 1; - display: flex; - gap: 20px; - overflow: hidden; -} - -.treasury-left { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; - overflow: hidden; -} - -.treasury-right { - flex: 1; - overflow: hidden; -} - -.section { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - display: flex; - flex-direction: column; - overflow: hidden; -} - -.section-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; - flex-shrink: 0; -} - -.section-header h3 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.section-count { - font-size: 12px; - color: var(--text-muted); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-large); /* Common.css variable */ - text-transform: uppercase; - font-weight: 500; -} - -.assets-list, -.crypto-list, -.transactions-list { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 12px; -} - -.asset-item, -.crypto-item { - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.asset-item:hover { - border-color: #10b981; /* Literal success */ - transform: translateY(-1px); -} - -.crypto-item:hover { - border-color: #f59e0b; /* Literal warning */ - transform: translateY(-1px); -} - -.asset-info, -.crypto-info { - margin-bottom: 8px; -} - -.asset-info h4, -.crypto-info h4 { - margin: 0 0 4px 0; - font-size: 14px; - font-weight: 600; - color: var(--text-primary); -} - -.asset-type, -.blockchain { - font-size: 11px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.asset-value, -.crypto-balance { - display: flex; - justify-content: space-between; - align-items: center; -} - -.asset-value .value, -.crypto-balance .usd-value { - font-size: 16px; - font-weight: 700; - color: #ffd700; /* Literal gold */ -} - -.asset-value .quantity, -.crypto-balance .token-balance { - font-size: 12px; - color: var(--text-secondary); -} - -.wallet-address-short { - margin-top: 8px; - text-align: center; -} - -.wallet-address-short .address { - font-size: 11px; - color: var(--text-muted); /* Common.css variable */ - font-family: 'Courier New', monospace; - background: var(--surface-medium); /* Common.css variable */ - padding: 2px 6px; - border-radius: var(--border-radius-small); /* Common.css variable */ -} - -.transaction-item { - background: var(--surface-light); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-medium); /* Common.css variable */ - padding: 12px; - display: flex; - align-items: center; - gap: 12px; - transition: all 0.2s ease; - cursor: pointer; -} - -.transaction-item:hover { - border-color: var(--primary-accent); /* Common.css variable */ - transform: translateY(-1px); -} - -.transaction-icon { - width: 32px; - height: 32px; - border-radius: 50%; - background: var(--surface-medium); /* Common.css variable */ - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - color: var(--text-secondary); - flex-shrink: 0; -} - -.transaction-details { - flex: 1; - min-width: 0; -} - -.transaction-details h4 { - margin: 0 0 2px 0; - font-size: 13px; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.transaction-category, -.transaction-date { - font-size: 11px; - color: var(--text-muted); - margin-right: 8px; -} - -.transaction-amount { - text-align: right; - flex-shrink: 0; -} - -.transaction-amount .amount { - font-size: 14px; - font-weight: 700; - display: block; - margin-bottom: 2px; -} - -.transaction-amount .status { - font-size: 10px; - text-transform: uppercase; - font-weight: 500; -} - -/* Combined Financing View */ -.financing-view { - height: 100%; - overflow: hidden; - padding: 8px; - display: flex; - flex-direction: column; - gap: 20px; -} - -.financing-overview { - flex-shrink: 0; -} - -.financing-overview .overview-cards { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 16px; -} - -.overview-card.convertibles .card-icon { - background: rgba(139, 92, 246, 0.1); - color: var(--accent); -} - -.overview-card.convertibles:hover { - border-color: var(--accent); -} - -.overview-card.loans .card-icon { - background: rgba(245, 158, 11, 0.1); - color: var(--warning); -} - -.overview-card.loans:hover { - border-color: var(--warning); -} - -.overview-card.outstanding .card-icon { - background: rgba(239, 68, 68, 0.1); - color: var(--error); -} - -.overview-card.outstanding:hover { - border-color: var(--error); -} - -.financing-sections { - flex: 1; - display: flex; - gap: 20px; - overflow: hidden; -} - -.financing-left, -.financing-right { - flex: 1; - overflow: hidden; -} - -.convertible-item, -.loan-item { - background: var(--surface-elevated); - border: 1px solid var(--border); - border-radius: 8px; - padding: 16px; - transition: all 0.2s ease; - cursor: pointer; - margin-bottom: 12px; -} - -.convertible-item:hover { - border-color: var(--accent); - transform: translateY(-1px); -} - -.loan-item:hover { - border-color: var(--warning); - transform: translateY(-1px); -} - -.convertible-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 12px; -} - -.convertible-info h4 { - margin: 0 0 4px 0; - font-size: 14px; - font-weight: 600; - color: var(--text-primary); -} - -.convertible-date { - font-size: 11px; - color: var(--text-muted); -} - -.convertible-amount .amount { - font-size: 16px; - font-weight: 700; - color: var(--accent); -} - -.convertible-details { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - margin-bottom: 12px; -} - -.detail-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 0; -} - -.detail-item .label { - font-size: 11px; - color: var(--text-muted); - font-weight: 500; -} - -.detail-item .value { - font-size: 12px; - color: var(--text-primary); - font-weight: 600; -} - -.conversion-trigger { - background: var(--hover); - padding: 8px; - border-radius: 6px; - border-left: 3px solid var(--accent); -} - -.trigger-label { - font-size: 10px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; - display: block; - margin-bottom: 4px; -} - -.trigger-text { - font-size: 12px; - color: var(--text-secondary); - line-height: 1.3; -} - -.loan-header { - margin-bottom: 12px; -} - -.loan-parties { - display: flex; - justify-content: space-between; - align-items: center; -} - -.party-info { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; -} - -.party-info .lender { - color: var(--text-primary); - font-weight: 600; -} - -.party-info .borrower { - color: var(--text-secondary); - font-weight: 500; -} - -.party-info i { - color: var(--text-muted); - font-size: 10px; -} - -.loan-amounts { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - margin-bottom: 12px; -} - -.amount-item { - text-align: center; -} - -.amount-label { - font-size: 10px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; - display: block; - margin-bottom: 4px; -} - -.amount-value { - font-size: 14px; - font-weight: 700; - color: var(--text-primary); -} - -.amount-value.outstanding { - color: var(--error); -} - -.loan-terms { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; - margin-bottom: 12px; -} - -.term-item { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 11px; -} - -.term-label { - color: var(--text-muted); - font-weight: 500; -} - -.term-value { - color: var(--text-primary); - font-weight: 600; -} - -/* Budget View */ -.budget-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.budget-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.budget-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.budget-card:hover { - transform: translateY(-2px); - border-color: #06b6d4; /* Literal info color */ - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.budget-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} - -.budget-header h4 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.budget-period { - font-size: 12px; - color: var(--text-muted); /* Common.css variable */ - background: var(--surface-medium); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-large); /* Common.css variable */ -} - -.budget-description { - margin: 0 0 16px 0; - font-size: 14px; - color: var(--text-secondary); - line-height: 1.5; -} - -.budget-metrics { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 16px; - margin-bottom: 16px; -} - -.budget-progress { - margin-top: 16px; -} - -/* Transactions View */ -.transactions-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.transactions-list { - display: flex; - flex-direction: column; - gap: 12px; -} - -.transaction-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-md); /* Was 16px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.transaction-card:hover { - transform: translateY(-1px); - border-color: var(--primary-accent); /* Common.css variable */ - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Specific shadow */ -} - -.transaction-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} - -.transaction-info h4 { - margin: 0 0 4px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.transaction-category { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.transaction-amount .amount { - font-size: 18px; - font-weight: 700; -} - -.amount.income { - color: #10b981; /* Literal success color */ -} - -.amount.expense { - color: #ef4444; /* Literal error color */ -} - -.amount.investment { - color: #06b6d4; /* Literal info color */ -} - -.amount.distribution { - color: #f59e0b; /* Literal warning color */ -} - -.amount.transfer { - color: var(--text-primary); -} - -.transaction-details { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; -} - -.status.completed { - color: #10b981; /* Literal success color */ -} - -.status.pending { - color: #f59e0b; /* Literal warning color */ -} - -.status.failed { - color: #ef4444; /* Literal error color */ -} - -.status.cancelled { - color: var(--text-muted); -} - -/* Liquidity Pool View */ -.liquidity-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.pools-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 20px; -} - -.pool-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.pool-card:hover { - transform: translateY(-4px); - border-color: #8b5cf6; /* Literal accent color */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Specific shadow */ -} - -.pool-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.pool-header h4 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: var(--text-primary); -} - -.pool-pair { - display: flex; - align-items: center; - gap: 8px; -} - -.token { - background: var(--surface-medium); /* Common.css variable */ - color: var(--text-primary); /* Common.css variable */ - padding: 4px 8px; - border-radius: var(--border-radius-large); /* Common.css variable */ - font-size: 12px; - font-weight: 600; -} - -.separator { - color: var(--text-muted); - font-weight: 600; -} - -.pool-metrics { - display: flex; - flex-direction: column; - gap: 12px; -} - -.metric-value.apy { - color: var(--success); -} - -/* Crypto Wallet View */ -.crypto-view { - height: 100%; - overflow-y: auto; - padding: 8px; -} - -.crypto-summary { - margin-bottom: 24px; -} - -.wallets-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 20px; -} - -.wallet-card { - background: var(--surface-dark); /* Common.css variable */ - border: 1px solid var(--border-color); /* Common.css variable */ - border-radius: var(--border-radius-large); /* Common.css variable */ - padding: var(--spacing-lg); /* Was 20px */ - transition: all 0.2s ease; - cursor: pointer; -} - -.wallet-card:hover { - transform: translateY(-4px); - border-color: #f59e0b; /* Literal warning color */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Specific shadow */ -} - -.wallet-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.wallet-info h4 { - margin: 0 0 4px 0; - font-size: 16px; - font-weight: 600; - color: var(--text-primary); -} - -.blockchain { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.usd-value { - font-size: 18px; - font-weight: 700; - color: #f59e0b; /* Literal warning color */ -} - -.wallet-balance { - margin-bottom: 16px; -} - -.balance { - font-size: 20px; - font-weight: 600; - color: var(--text-primary); - font-family: 'Courier New', monospace; -} - -.wallet-address { - display: flex; - align-items: center; - gap: var(--spacing-sm); /* Was 8px */ - background: var(--surface-medium); /* Common.css variable */ - padding: 8px 12px; - border-radius: var(--border-radius-medium); /* Common.css variable */ -} - -.address-label { - font-size: 12px; - color: var(--text-muted); - text-transform: uppercase; - font-weight: 500; -} - -.address { - font-size: 12px; - color: var(--text-secondary); - font-family: 'Courier New', monospace; - flex: 1; -} - -.copy-btn { - background: transparent; - border: none; - color: var(--text-muted); - cursor: pointer; - padding: 4px; - border-radius: 4px; - transition: all 0.2s ease; -} - -.copy-btn:hover { - color: var(--text-primary); /* Common.css variable */ - background: var(--surface-dark); /* Common.css variable */ -} - -/* Scrollbar styling is now handled globally by common.css */ - -/* Responsive design */ -@media (max-width: 768px) { - .treasury-view-container { - margin: 20px; - height: calc(100vh - 80px); - } - - .treasury-header { - flex-direction: column; - gap: 16px; - align-items: stretch; - } - - .treasury-tabs { - justify-content: flex-start; - overflow-x: auto; - } - - .shareholders-content { - flex-direction: column; - gap: 16px; - } - - .shareholders-list, - .valuation-panel { - flex: none; - } - - .shareholder-main { - flex-direction: column; - align-items: flex-start; - gap: 16px; - } - - .shareholder-shares { - gap: 16px; - } - - .overview-cards { - grid-template-columns: repeat(2, 1fr); - } - - .financing-overview .overview-cards { - grid-template-columns: 1fr; - } - - .treasury-sections, - .financing-sections { - flex-direction: column; - gap: 16px; - } - - .treasury-left, - .treasury-right, - .financing-left, - .financing-right { - flex: none; - } - - .convertible-details, - .loan-amounts, - .loan-terms { - grid-template-columns: 1fr; - } - - .pools-grid, - .wallets-grid { - grid-template-columns: 1fr; - } - - .budget-metrics, - .loan-metrics { - grid-template-columns: 1fr; - } - - .transaction-details { - grid-template-columns: 1fr; - } - - .convertible-details { - grid-template-columns: 1fr; - } -} - -@media (max-width: 480px) { - .treasury-tabs { - flex-wrap: wrap; - } - - .tab-btn { - flex: 1; - min-width: 0; - justify-content: center; - } - - .tab-btn span { - display: none; - } - - .treasury-header { - align-items: center; - } -} \ No newline at end of file diff --git a/src/client_ws/src/lib.rs b/src/client_ws/src/lib.rs index 17ee926..a5f9b48 100644 --- a/src/client_ws/src/lib.rs +++ b/src/client_ws/src/lib.rs @@ -16,9 +16,7 @@ pub use auth::{AuthCredentials, AuthError, AuthResult}; // Platform-specific WebSocket imports and spawn function #[cfg(target_arch = "wasm32")] use { - gloo_net::websocket::{ - futures::WebSocket, Message as GlooWsMessage, WebSocketError as GlooWebSocketError, - }, + gloo_net::websocket::{futures::WebSocket, Message as GlooWsMessage}, wasm_bindgen_futures::spawn_local, }; diff --git a/src/server_ws/.DS_Store b/src/server_ws/.DS_Store index 85e20dd..a88eacd 100644 Binary files a/src/server_ws/.DS_Store and b/src/server_ws/.DS_Store differ