Spaces:
Sleeping
Sleeping
/* Modern color scheme */ | |
:root { | |
--primary: #0066cc; | |
--secondary: #3385ff; | |
--accent: #66a3ff; | |
--background: #f7f9fc; | |
--surface: #ffffff; | |
--text-primary: #2c3e50; | |
--text-secondary: #546e7a; | |
--text-tertiary: #78909c; | |
--success: #34c759; | |
--warning: #ff9500; | |
--error: #ff3b30; | |
--neutral-100: #f8f9fa; | |
--neutral-200: #e9ecef; | |
--neutral-300: #dee2e6; | |
--neutral-400: #ced4da; | |
} | |
body { | |
font-family: 'Inter', system-ui, sans-serif; | |
background: var(--background); | |
color: var(--text-primary); | |
line-height: 1.5; | |
} | |
/* ν둬ννΈ μ λ ₯μ°½ */ | |
.ant-input-textarea textarea { | |
height: 300px ; | |
max-height: 300px ; | |
min-height: 300px ; | |
resize: none ; | |
border: 2px solid var(--neutral-200); | |
border-radius: 12px; | |
padding: 1rem; | |
} | |
/* iframe 컨ν μ΄λ */ | |
.html_content { | |
height: 800px ; | |
max-height: 800px ; | |
min-height: 800px ; | |
border-radius: 12px; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
background: var(--surface); | |
} | |
/* iframe μ체 */ | |
iframe { | |
height: 800px ; | |
max-height: 800px ; | |
min-height: 800px ; | |
width: 100% ; | |
border: none ; | |
} | |
.left_header { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
background: linear-gradient(135deg, var(--surface), var(--neutral-100)); | |
backdrop-filter: blur(10px); | |
border-radius: 24px; | |
padding: 2rem; | |
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); | |
border: 1px solid var(--neutral-200); | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.left_header img { | |
width: 180px; | |
margin-bottom: 1rem; | |
border-radius: 12px; | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
} | |
.left_header h1 { | |
margin: 0.5rem 0; | |
font-weight: 600; | |
color: var(--text-primary); | |
} | |
.render_header { | |
height: 30px; | |
width: 100%; | |
padding: 5px 16px; | |
background-color: var(--neutral-100); | |
margin-top: 50px; | |
border-radius: 8px 8px 0 0; | |
} | |
.header_btn { | |
display: inline-block; | |
height: 10px; | |
width: 10px; | |
border-radius: 50%; | |
margin-right: 4px; | |
} | |
.render_header > .header_btn:nth-child(1) { | |
background-color: var(--error); | |
} | |
.render_header > .header_btn:nth-child(2) { | |
background-color: var(--warning); | |
} | |
.render_header > .header_btn:nth-child(3) { | |
background-color: var(--success); | |
} | |
.setting-buttons { | |
position: sticky; | |
top: 1rem; | |
right: 0; | |
z-index: 1000; | |
display: flex; | |
gap: 8px; | |
padding: 12px; | |
background: rgba(255, 255, 255, 0.9); | |
backdrop-filter: blur(8px); | |
border-radius: 12px; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
border: 1px solid var(--neutral-200); | |
} | |
.ant-btn { | |
flex: 1; | |
min-width: 80px; | |
border-radius: 8px; | |
font-weight: 500; | |
transition: all 0.3s; | |
height: 40px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.ant-btn-primary { | |
background: linear-gradient(to right, var(--primary), var(--secondary)); | |
border: none; | |
color: white; | |
} | |
.ant-btn-primary:hover { | |
transform: translateY(-2px); | |
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3); | |
} | |
.ant-btn-default { | |
background: var(--surface); | |
border: 1px solid var(--primary); | |
color: var(--primary); | |
} | |
.ant-btn-default:hover { | |
color: var(--secondary); | |
border-color: var(--secondary); | |
transform: translateY(-2px); | |
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1); | |
} | |
.ant-btn-default[title="Code μ€ν"] { | |
background-color: var(--success); | |
color: white; | |
border: none; | |
} | |
.ant-btn-default[title="Code μ€ν"]:hover { | |
background-color: #40d869; | |
} | |
/* μ€ν¬λ‘€λ° μ€μ */ | |
::-webkit-scrollbar { | |
width: 8px; | |
height: 8px; | |
} | |
::-webkit-scrollbar-track { | |
background: var(--neutral-100); | |
} | |
::-webkit-scrollbar-thumb { | |
background: var(--neutral-300); | |
border-radius: 4px; | |
} | |
::-webkit-scrollbar-thumb:hover { | |
background: var(--neutral-400); | |
} | |
/* Drawer customization */ | |
.ant-drawer-content-wrapper { | |
border-radius: 16px 0 0 16px; | |
} | |
.ant-drawer-header { | |
background: var(--primary); | |
color: white; | |
border-radius: 16px 0 0 0; | |
} | |
.ant-drawer-title { | |
color: white; | |
font-weight: 500; | |
} | |
.ant-drawer-close { | |
color: white; | |
} | |
.ant-drawer-body { | |
background: var(--surface); | |
} | |
/* μ λ ₯μ°½ ν¬μ»€μ€ μ€νμΌ */ | |
.ant-input-textarea textarea:focus { | |
border-color: var(--accent); | |
box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2); | |
} | |
/* Responsive adjustments */ | |
@media (max-width: 768px) { | |
.left_header { | |
padding: 1rem; | |
} | |
.setting-buttons { | |
flex-wrap: wrap; | |
} | |
.ant-btn { | |
min-width: 60px; | |
font-size: 0.9rem; | |
} | |
/* λͺ¨λ°μΌμμμ λμ΄ μ€μ */ | |
.ant-input-textarea textarea { | |
height: 300px ; | |
min-height: 300px ; | |
max-height: 300px ; | |
} | |
.html_content, | |
iframe { | |
height: 800px ; | |
min-height: 800px ; | |
max-height: 800px ; | |
} | |
} | |
footer, .footer, div[class*="footer"], #footer { | |
display: none ; | |
} |