tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
386 lines (339 loc) • 16.8 kB
CSS
/**
* Windows 98 Theme for Tanuki UI
* Recreates the classic Windows 98 interface with 3D beveled controls, retro typography, and nostalgic aesthetics
*/
:root {
/* Font Rendering - Force pixelated/jaggy fonts for authenticity */
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: unset;
font-smooth: never;
text-rendering: optimizeSpeed;
/* Base Colors - Classic Windows 98 */
--textColor: rgba(0, 0, 0, 1);
--accentColor: rgba(0, 0, 128, 1); /* Classic Windows Blue */
--cautionColor: rgba(255, 0, 0, 1); /* Classic Windows Red */
--windowBackgroundColor: rgba(192, 192, 192, 1); /* Classic Windows Gray */
--dividerColor: rgba(128, 128, 128, 1);
/* Typography System - Classic Windows Fonts */
--themeDefaultFontFamily: "MS Sans Serif", "Tahoma", "Arial", sans-serif;
--themeControlFontFamily: "MS Sans Serif", "Tahoma", "Arial", sans-serif;
--themeLabelFontFamily: "MS Sans Serif", "Tahoma", "Arial", sans-serif;
/* Text Font Definitions */
--textFont: 400 11px var(--themeDefaultFontFamily);
--labelFont: 400 11px var(--themeLabelFontFamily);
--titleFont: 700 12px var(--themeDefaultFontFamily);
--subtitleFont: 400 11px var(--themeDefaultFontFamily);
--captionFont: 400 8px var(--themeDefaultFontFamily);
/* Text Color Hierarchy */
--labelColor: rgba(0, 0, 0, 1);
--secondaryLabelColor: rgba(64, 64, 64, 1);
--tertiaryLabelColor: rgba(128, 128, 128, 1);
--quaternaryLabelColor: rgba(192, 192, 192, 1);
/* Windows 98 System Colors */
--systemBlueColor: rgba(0, 0, 128, 1);
--systemGreenColor: rgba(0, 128, 0, 1);
--systemRedColor: rgba(255, 0, 0, 1);
--systemOrangeColor: rgba(255, 165, 0, 1);
--systemYellowColor: rgba(255, 255, 0, 1);
--systemPurpleColor: rgba(128, 0, 128, 1);
--systemPinkColor: rgba(255, 192, 203, 1);
--systemTealColor: rgba(0, 128, 128, 1);
--systemIndigoColor: rgba(75, 0, 130, 1);
--systemBrownColor: rgba(165, 42, 42, 1);
--systemGrayColor: rgba(128, 128, 128, 1);
/* Background Colors */
--backgroundColor: rgba(192, 192, 192, 1); /* Control background */
--secondaryBackgroundColor: rgba(212, 208, 200, 1); /* Dialog background */
--tertiaryBackgroundColor: rgba(255, 255, 255, 1); /* Text input background */
/* Border and Separator Colors */
--separatorColor: rgba(128, 128, 128, 1);
--opaqueSeparatorColor: rgba(128, 128, 128, 1);
--linkColor: rgba(0, 0, 255, 1); /* Classic hyperlink blue */
--placeholderTextColor: rgba(128, 128, 128, 1);
/* Window Properties */
--windowBackdropFilter: none;
--windowBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
--windowBorderRadius: 0;
--windowPadding: 8px;
/* Control Base States */
--controlAccentColor: rgba(0, 0, 128, 1);
--controlBackground: rgba(192, 192, 192, 1);
--controlTextColor: rgba(0, 0, 0, 1);
--controlHoverBackground: rgba(192, 192, 192, 1);
--controlActiveBackground: rgba(192, 192, 192, 1);
--controlFocusBackground: rgba(192, 192, 192, 1);
--controlDisabledBackground: rgba(192, 192, 192, 1);
--disabledControlTextColor: rgba(128, 128, 128, 1);
/* Control Box Shadow (Classic 3D effect) */
--controlBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
--controlHoverBoxShadow: var(--controlBoxShadow);
--controlActiveBoxShadow: inset 1px 1px 0 rgba(0, 0, 0, 1), inset -1px -1px 0 rgba(223, 223, 223, 1),
inset 2px 2px 0 rgba(128, 128, 128, 1), inset -2px -2px 0 rgba(255, 255, 255, 1);
--controlFocusBoxShadow: var(--controlBoxShadow);
/* Control Properties */
--controlBorderRadius: 0;
--controlPadding: 1px 6px;
/* Primary Controls - Raised 3D Effect */
--controlBackground--primary: rgba(0, 0, 128, 1);
--controlTextColor--primary: rgba(255, 255, 255, 1);
--controlHoverBackground--primary: rgba(16, 16, 144, 1);
--controlFocusBackground--primary: rgba(0, 0, 112, 1);
--controlBoxShadow--primary: var(--controlBoxShadow);
/* Secondary Controls - Classic Button Style */
--controlBackground--secondary: rgba(192, 192, 192, 1);
--controlTextColor--secondary: rgba(0, 0, 0, 1);
--controlHoverBackground--secondary: rgba(192, 192, 192, 1);
--controlFocusBackground--secondary: rgba(192, 192, 192, 1);
--controlBoxShadow--secondary: var(--controlBoxShadow);
/* Input Elements */
--inputPadding: 2px 4px;
--inputFont: var(--textFont);
--inputBorder: none;
--inputBorderRadius: 0;
--inputBackground: rgba(255, 255, 255, 1);
--inputBoxShadow: inset 1px 1px 0 rgba(0, 0, 0, 1), inset -1px -1px 0 rgba(223, 223, 223, 1),
inset 2px 2px 0 rgba(128, 128, 128, 1), inset -2px -2px 0 rgba(255, 255, 255, 1);
--inputFocusBorder: none;
--inputFocusBoxShadow: inset 1px 1px 0 rgba(0, 0, 0, 1), inset -1px -1px 0 rgba(223, 223, 223, 1),
inset 2px 2px 0 rgba(128, 128, 128, 1), inset -2px -2px 0 rgba(255, 255, 255, 1), 0 0 0 1px rgba(0, 0, 0, 1);
/* Dialog Styles */
--dialogBackground: rgba(192, 192, 192, 1);
--dialogBorderRadius: 0;
--dialogBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1), 2px 2px 4px rgba(0, 0, 0, 0.5);
--dialogBackdrop: rgba(0, 0, 0, 0.25);
--dialogPadding: 8px;
/* Title Bar Styles */
--titleBarBackground: linear-gradient(90deg, rgba(0, 0, 128, 1) 0%, rgba(16, 132, 208, 1) 100%);
--titleBarInactiveBackground: rgba(128, 128, 128, 1);
--titleBarTextColor: rgba(255, 255, 255, 1);
--titleBarHeight: 18px;
--titleBarFont: 700 11px var(--themeDefaultFontFamily);
--titleBarPadding: 2px 4px;
/* Table Styles */
--tableBackgroundColor: rgba(255, 255, 255, 1);
--tableBorderColor: rgba(128, 128, 128, 1);
--tableHeaderTextColor: rgba(0, 0, 0, 1);
--tableHeaderBackgroundColor: rgba(192, 192, 192, 1);
--tableHeaderBorderColor: rgba(128, 128, 128, 1);
--tableHeaderFont: 700 11px var(--themeDefaultFontFamily);
--tableRowTextColor: rgba(0, 0, 0, 1);
--tableRowBackgroundColor: rgba(255, 255, 255, 1);
--tableRowBorderColor: rgba(192, 192, 192, 1);
--tableRowAlternateTextColor: rgba(0, 0, 0, 1);
--tableRowAlternateBackgroundColor: rgba(240, 240, 240, 1);
--tableRowAlternateBorderColor: rgba(192, 192, 192, 1);
--tableHoverBackground: rgba(0, 0, 128, 1);
--tableHoverTextColor: rgba(255, 255, 255, 1);
--tableCellPadding: 2px 4px;
--tableBorder: 1px solid rgba(128, 128, 128, 1);
/* Toolbar Styles */
--toolbarBackground: rgba(192, 192, 192, 1);
--toolbarHeight: 26px;
--toolbarPadding: 2px 4px;
--toolbarBorder: none;
--toolbarBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
/* Tab Bar Styles */
--tabBarBackground: rgba(192, 192, 192, 1);
--tabBarBoxShadow: none;
--tabBarLayout: horizontal;
/* Tab Item Styles */
--tabItemBackground: rgba(192, 192, 192, 1);
--tabItemTextColor: rgba(0, 0, 0, 1);
--tabItemFont: var(--textFont);
--tabItemPadding: 2px 8px;
--tabItemBorderRadius: 0;
--tabItemBoxShadow: inset -1px -1px 0 rgba(128, 128, 128, 1), inset 1px 1px 0 rgba(255, 255, 255, 1);
/* Tab Item States */
--tabItemBackground-hover: rgba(192, 192, 192, 1);
--tabItemTextColor-hover: rgba(0, 0, 0, 1);
--tabItemBoxShadow-hover: var(--tabItemBoxShadow);
--tabItemBackground-selected: rgba(192, 192, 192, 1);
--tabItemTextColor-selected: rgba(0, 0, 0, 1);
--tabItemFont-selected: var(--textFont);
--tabItemBoxShadow-selected: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
/* Sidebar Styles */
--sidebarBackground: rgba(192, 192, 192, 1);
--sidebarWidth: 150px;
--sidebarBorder: 1px solid rgba(128, 128, 128, 1);
/* Sidebar List Item */
--sidebarListItemPadding: 2px 4px;
--sidebarListItemHeight: 16px;
--sidebarListItemFont: var(--textFont);
--sidebarListItemBorderRadius: 0;
--sidebarListItemHoverBackground: rgba(0, 0, 128, 1);
--sidebarListItemHoverColor: rgba(255, 255, 255, 1);
--selectedSidebarListItemBackground: rgba(0, 0, 128, 1);
--selectedSidebarListItemTextColor: rgba(255, 255, 255, 1);
--selectedSidebarListItemMarker: rgba(255, 255, 255, 1);
/* Sidebar Section Title */
--sidebarSectionTitleFont: var(--labelFont);
--sidebarSectionTitleLetterSpacing: 0;
--sidebarSectionTitleMargin: 8px 0 4px 0;
--sidebarSectionTitlePadding: 0 4px;
--sidebarSectionTitleColor: var(--secondaryLabelColor);
--sidebarSectionTitleBackground: transparent;
--sidebarSectionTitleBorderRadius: 0;
--sidebarSectionTitleTextTransform: none;
/* Panel Styles */
--panelBackground: rgba(192, 192, 192, 1);
--panelBorder: 1px solid rgba(128, 128, 128, 1);
--panelHeaderBackground: rgba(192, 192, 192, 1);
--panelHeaderHeight: 20px;
--panelHeaderFont: 700 11px var(--themeDefaultFontFamily);
--panelHeaderPadding: 2px 4px;
--panelHeaderBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
/* Contextual Menu */
--contextualMenuBackground: rgba(192, 192, 192, 1);
--contextualMenuBorder: 1px solid rgba(0, 0, 0, 1);
--contextualMenuBorderRadius: 0;
--contextualMenuBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1), 2px 2px 4px rgba(0, 0, 0, 0.5);
--contextualMenuPadding: 2px;
--contextualMenuItemPadding: 4px 8px;
--contextualMenuItemFont: var(--textFont);
--contextualMenuItemHoverBackground: rgba(0, 0, 128, 1);
--contextualMenuItemHoverColor: rgba(255, 255, 255, 1);
--contextualMenuSeparatorColor: rgba(128, 128, 128, 1);
--contextualMenuSeparatorHeight: 1px;
/* Resizer */
--resizerColor: rgba(128, 128, 128, 1);
--resizerHoverColor: rgba(0, 0, 0, 1);
--resizerActiveColor: rgba(0, 0, 0, 1);
--resizerSize: 2px;
--resizerBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1);
/* Progress and Meter */
--progressBackground: rgba(255, 255, 255, 1);
--progressForeground: rgba(0, 0, 128, 1);
--progressBorderRadius: 0;
--progressHeight: 16px;
--progressBoxShadow: inset 1px 1px 0 rgba(0, 0, 0, 1), inset -1px -1px 0 rgba(223, 223, 223, 1),
inset 2px 2px 0 rgba(128, 128, 128, 1), inset -2px -2px 0 rgba(255, 255, 255, 1);
/* Selection Colors (Text and Content) */
--selectedTextColor: rgba(255, 255, 255, 1);
--textBackgroundColor: rgba(255, 255, 255, 1);
--selectedTextBackgroundColor: rgba(0, 0, 128, 1);
--unemphasizedSelectedTextColor: rgba(0, 0, 0, 1);
--unemphasizedSelectedTextBackgroundColor: rgba(212, 212, 212, 1);
--selectedContentBackgroundColor: rgba(0, 0, 128, 1);
--unemphasizedSelectedContentBackgroundColor: rgba(212, 212, 212, 1);
--selectedMenuItemTextColor: rgba(255, 255, 255, 1);
/* Focus Indicators */
--keyboardFocusIndicatorColor: rgba(0, 0, 0, 1);
--focusRingWidth: 1px;
--focusRingOffset: 1px;
--focusRingStyle: dotted;
/* Scrollbar Styles */
--scrollBarBackgroundColor: rgba(192, 192, 192, 1);
--scrollBarThumbColor: rgba(192, 192, 192, 1);
--activeScrollBarThumbColor: rgba(160, 160, 160, 1);
--scrollbarWidth: 16px;
--scrollbarThumbBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
--scrollbarButtonBackground: rgba(192, 192, 192, 1);
--scrollbarButtonBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
/* Checkbox and Radio Styles */
--checkboxSize: 13px;
--checkboxBackground: rgba(255, 255, 255, 1);
--checkboxBorder: 1px solid rgba(0, 0, 0, 1);
--checkboxBoxShadow: inset 1px 1px 0 rgba(128, 128, 128, 1), inset -1px -1px 0 rgba(255, 255, 255, 1);
--checkboxCheckedBackground: rgba(255, 255, 255, 1);
--checkboxCheckmarkColor: rgba(0, 0, 0, 1);
/* Additional System Colors */
--gridColor: rgba(128, 128, 128, 1);
--headerTextColor: rgba(0, 0, 0, 1);
--controlColor: rgba(0, 0, 0, 1);
--selectedControlColor: rgba(255, 255, 255, 1);
--selectedControlTextColor: rgba(0, 0, 0, 1);
--alternateSelectedControlTextColor: rgba(255, 255, 255, 1);
--scrubberTexturedBackgroundColor: rgba(192, 192, 192, 1);
--windowFrameTextColor: rgba(0, 0, 0, 1);
--underPageBackgroundColor: rgba(255, 255, 255, 1);
--findHighlightColor: rgba(255, 255, 0, 1);
--highlightColor: rgba(0, 0, 128, 1);
--shadowColor: rgba(0, 0, 0, 0.5);
/* Status Bar */
--statusBarBackground: rgba(192, 192, 192, 1);
--statusBarHeight: 22px;
--statusBarFont: var(--textFont);
--statusBarBorder: 1px solid rgba(128, 128, 128, 1);
--statusBarBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1);
/* Menu Bar */
--menuBarBackground: rgba(192, 192, 192, 1);
--menuBarHeight: 20px;
--menuBarFont: var(--textFont);
--menuBarItemPadding: 4px 8px;
--menuBarItemHoverBackground: rgba(0, 0, 128, 1);
--menuBarItemHoverColor: rgba(255, 255, 255, 1);
/* Gradients - Classic Windows 98 Style */
--primaryGradient: linear-gradient(90deg, rgba(0, 0, 128, 1) 0%, rgba(16, 132, 208, 1) 100%);
--titleBarGradient: linear-gradient(90deg, rgba(0, 0, 128, 1) 0%, rgba(16, 132, 208, 1) 100%);
--buttonGradient: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(192, 192, 192, 1) 100%);
/* Toolbar/Bar Items Variables */
--barItemsFontFamily: var(--themeDefaultFontFamily);
--barItemsTextColor: rgba(0, 0, 0, 1);
--barItemsLabelTextColor: rgba(0, 0, 0, 1);
--barItemsDisabledLabelTextColor: rgba(128, 128, 128, 1);
--barItemsDisabledLabelBackgroundColor: rgba(192, 192, 192, 1);
--barItemsBorderRadius: 0;
--barItemsControlMarkerBorderRadius: 0;
--barItemsControlPlaceholderTextColor: rgba(128, 128, 128, 1);
--barItemsControlMarkerBackgroundColor: rgba(255, 255, 255, 1);
--barItemsControlsBorder: 1px solid rgba(128, 128, 128, 1);
--barItemsSegmentControlBackground: rgba(192, 192, 192, 1);
--barItemsHoverSegmentControlBackground: rgba(160, 160, 160, 1);
--barItemsActiveSegmentControlBackground: rgba(0, 0, 128, 1);
--barItemsAccentColor: rgba(0, 0, 128, 1);
/* App Layout Variables */
--appMainToolbarHeight: 26px;
--appMainToolbarFloatingBackground: rgba(192, 192, 192, 1);
--scrolledAppMainToolbarBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1);
--appMainToolbarBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1);
/* Segment Control Variables */
--segmentControlBackgroundColor: rgba(192, 192, 192, 1);
--segmentControlPadding: 2px;
--segmentControlSegmentPadding: 4px 8px;
--segmentControlBoxShadow: inset 1px 1px 0 rgba(128, 128, 128, 1), inset -1px -1px 0 rgba(255, 255, 255, 1);
--segmentControlBackground: rgba(192, 192, 192, 1);
--segmentControlBorderRadius: 0;
--segmentControlIndicatorBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1);
/* SelectBox Variables */
--selectBoxSplitButtonWidth: 16px;
--selectBoxSplitButtonBorderColor: rgba(128, 128, 128, 1);
--selectBoxSplitButtonBorderWidth: 1px;
--selectBoxSplitButtonBackground: rgba(192, 192, 192, 1);
/* Window Controls */
--windowCloseButtonBackground: rgba(192, 192, 192, 1);
--windowExpandButtonBackground: rgba(192, 192, 192, 1);
--windowFullscreenButtonBackground: rgba(192, 192, 192, 1);
--windowButtonBoxShadow: inset -1px -1px 0 rgba(0, 0, 0, 1), inset 1px 1px 0 rgba(223, 223, 223, 1),
inset -2px -2px 0 rgba(128, 128, 128, 1), inset 2px 2px 0 rgba(255, 255, 255, 1);
/* Desktop Wallpaper Style Background */
--desktopBackground: rgba(0, 128, 128, 1); /* Classic teal desktop */
/* Animation Timing - Minimal animations for authenticity */
--animationDuration: 0ms;
--animationEasing: linear;
}
/* Apply jaggy font rendering to all text elements */
* {
-webkit-font-smoothing: none ;
-moz-osx-font-smoothing: unset ;
font-smooth: never ;
text-rendering: optimizeSpeed ;
}
/* Additional CSS to ensure bitmap-style fonts on all platforms */
@media screen {
* {
font-variant-ligatures: none;
font-feature-settings:
"liga" 0,
"kern" 0;
font-kerning: none;
}
}