/* Reset and base styles with high specificity */ .brg-wrapper, .brg-wrapper *, .brg-wrapper *::before, .brg-wrapper *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; line-height: 1.5!important; } .brg-wrapper { --brg-primary: #4150F6 !important; --brg-primary-light: #6B77F8 !important; --brg-primary-dark: #3040D6 !important; --brg-bg: #FFFFFF !important; --brg-surface: #F8F9FC !important; --brg-border: #E2E8F0 !important; --brg-text: #1E293B !important; --brg-text-muted: #64748B !important; --brg-shadow: 0 4px 20px rgba(65, 80, 246, 0.08) !important; --brg-shadow-lg: 0 8px 32px rgba(65, 80, 246, 0.12) !important; --brg-radius: 16px !important; --brg-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; max-width: 1280px !important; min-height: auto !important; margin: 0 auto !important; padding: 24px !important; overflow: hidden !important; } .brg-header { text-align: center !important; margin-bottom: 20px !important; } .brg-title { font-size: 22px !important; font-weight: 700 !important; color: var(--brg-text) !important; margin-bottom: 4px !important; letter-spacing: -0.02em !important; } .brg-title span { color: var(--brg-primary) !important; } .brg-subtitle { font-size: 13px !important; color: var(--brg-text-muted) !important; font-weight: 400 !important; } .brg-content { display: grid !important; grid-template-columns: 1fr 1.2fr 1fr !important; gap: 24px !important; align-items: start !important; } .brg-controls-left, .brg-controls-right { display: flex !important; flex-direction: column !important; gap: 16px !important; } .brg-slider-group { background: var(--brg-surface) !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid var(--brg-border) !important; transition: var(--brg-transition) !important; } .brg-slider-group:hover { border-color: var(--brg-primary-light) !important; box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.08) !important; } .brg-slider-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; } .brg-slider-label { font-size: 12px !important; font-weight: 600 !important; color: var(--brg-text) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .brg-slider-value { font-size: 13px !important; font-weight: 600 !important; color: var(--brg-primary) !important; background: rgba(65, 80, 246, 0.1) !important; padding: 3px 10px !important; border-radius: 20px !important; min-width: 52px !important; text-align: center !important; } .brg-slider { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 6px !important; background: var(--brg-border) !important; border-radius: 3px !important; outline: none !important; cursor: pointer !important; transition: var(--brg-transition) !important; } .brg-slider::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; background: var(--brg-primary) !important; border-radius: 50% !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(65, 80, 246, 0.4) !important; transition: var(--brg-transition) !important; border: 3px solid white !important; } .brg-slider::-webkit-slider-thumb:hover { transform: scale(1.15) !important; box-shadow: 0 4px 12px rgba(65, 80, 246, 0.5) !important; } .brg-slider::-moz-range-thumb { width: 18px !important; height: 18px !important; background: var(--brg-primary) !important; border-radius: 50% !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(65, 80, 246, 0.4) !important; border: 3px solid white !important; } .brg-preview-section { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; } .brg-preview-container { width: 100% !important; aspect-ratio: 1 !important; max-width: 220px !important; max-height: 220px !important; background: linear-gradient(135deg, var(--brg-surface) 0%, #EEF1FF 100%) !important; border-radius: var(--brg-radius) !important; padding: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--brg-border) !important; } .brg-preview-box { width: 100% !important; height: 100% !important; background: linear-gradient(135deg, var(--brg-primary) 0%, var(--brg-primary-light) 100%) !important; transition: border-radius 0.15s ease-out !important; box-shadow: var(--brg-shadow-lg) !important; position: relative !important; overflow: hidden !important; } .brg-preview-box::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%) !important; pointer-events: none !important; } .brg-code-section { background: var(--brg-surface) !important; border-radius: 12px !important; border: 1px solid var(--brg-border) !important; overflow: hidden !important; } .brg-code-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 14px !important; background: linear-gradient(to right, var(--brg-primary), var(--brg-primary-light)) !important; } .brg-code-title { font-size: 12px !important; font-weight: 600 !important; color: white !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .brg-copy-btn { display: flex !important; align-items: center !important; gap: 6px !important; background: rgba(255, 255, 255, 0.2) !important; color: white !important; border: none !important; padding: 6px 12px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: var(--brg-transition) !important; backdrop-filter: blur(4px) !important; } .brg-copy-btn:hover { background: rgba(255, 255, 255, 0.35) !important; transform: translateY(-1px) !important; } .brg-copy-btn:active { transform: translateY(0) !important; } .brg-copy-btn.brg-copied { background: rgba(34, 197, 94, 0.9) !important; } .brg-copy-icon { width: 14px !important; height: 14px !important; } .brg-code-content { padding: 14px !important; max-height: 180px !important; overflow-y: auto !important; } .brg-code-content::-webkit-scrollbar { width: 6px !important; } .brg-code-content::-webkit-scrollbar-track { background: transparent !important; } .brg-code-content::-webkit-scrollbar-thumb { background: var(--brg-border) !important; border-radius: 3px !important; } .brg-code { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important; font-size: 12px !important; line-height: 1.7 !important; color: var(--brg-text) !important; white-space: pre-wrap !important; word-break: break-all !important; } .brg-code .brg-property { color: var(--brg-primary) !important; } .brg-code .brg-value { color: #059669 !important; } .brg-actions { display: flex !important; gap: 10px !important; margin-top: 8px !important; } .brg-btn { flex: 1 !important; padding: 10px 16px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: var(--brg-transition) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-width: fit-content; } .brg-btn-primary { background: linear-gradient(135deg, var(--brg-primary) 0%, var(--brg-primary-light) 100%) !important; color: white !important; box-shadow: 0 4px 14px rgba(65, 80, 246, 0.35) !important; } .brg-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(65, 80, 246, 0.45) !important; } .brg-btn-secondary { background: var(--brg-bg) !important; color: var(--brg-text) !important; border: 1px solid var(--brg-border) !important; } .brg-btn-secondary:hover { border-color: var(--brg-primary) !important; color: var(--brg-primary) !important; background: rgba(65, 80, 246, 0.05) !important; } /* Corner indicators */ .brg-corner-indicator { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; } .brg-corner-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--brg-primary) !important; } .brg-corner-dot.brg-top-left { border-radius: 50% 0 0 0 !important; } .brg-corner-dot.brg-top-right { border-radius: 0 50% 0 0 !important; } .brg-corner-dot.brg-bottom-right { border-radius: 0 0 50% 0 !important; } .brg-corner-dot.brg-bottom-left { border-radius: 0 0 0 50% !important; } /* Responsive styles */ @media screen and (max-width: 900px) { .brg-wrapper { max-height: none !important; padding: 20px !important; } .brg-content { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; } .brg-preview-section { grid-column: 1 / -1 !important; grid-row: 1 !important; } .brg-preview-container { max-width: 180px !important; max-height: 180px !important; } } @media screen and (max-width: 600px) { .brg-wrapper { padding: 16px !important; border-radius: 12px !important; } .brg-content { grid-template-columns: 1fr !important; gap: 16px !important; } .brg-preview-section { order: 1 !important; } .brg-controls-left { order: 2 !important; } .brg-controls-right { order: 3 !important; } .brg-title { font-size: 18px !important; } .brg-subtitle { font-size: 12px !important; } .brg-preview-container { max-width: 160px !important; max-height: 160px !important; } .brg-slider-group { padding: 12px 14px !important; } .brg-actions { flex-direction: column !important; } .brg-code-content { max-height: 150px !important; } } /* Toast notification */ .brg-toast { position: fixed !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) translateY(100px) !important; background: var(--brg-text) !important; color: white !important; padding: 12px 24px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; opacity: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 9999 !important; pointer-events: none !important; } .brg-toast.brg-show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } .jnews_inline_related_post_wrapper.right { display: none; } CSS Border Radius Generator - CSS Rounded Corners Create beautiful css rounded corners for your UI elements Top Left 20px Bottom Left 20px CSS Code Copy Reset Copy CSS Top Right 20px Bottom Right 20px ✓ CSS copied to clipboard!
