1001 lines
23 KiB
Sass
1001 lines
23 KiB
Sass
// Mobile Calendar App Styles
|
|
// Clean, beautiful design for calendar events
|
|
|
|
:root
|
|
--primary-color: #007AFF
|
|
--secondary-color: #5856D6
|
|
--success-color: #34C759
|
|
--danger-color: #FF3B30
|
|
--warning-color: #FF9500
|
|
--background-color: #f8f9fa
|
|
--surface-color: #ffffff
|
|
--border-color: #e1e5e9
|
|
--text-primary: #1d1d1f
|
|
--text-secondary: #6e6e73
|
|
--text-muted: #8e8e93
|
|
--shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1)
|
|
--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15)
|
|
--border-radius: 12px
|
|
--border-radius-small: 8px
|
|
--spacing-xs: 4px
|
|
--spacing-sm: 8px
|
|
--spacing-md: 16px
|
|
--spacing-lg: 24px
|
|
--spacing-xl: 32px
|
|
|
|
*
|
|
margin: 0
|
|
padding: 0
|
|
box-sizing: border-box
|
|
|
|
body
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
|
|
background-color: var(--background-color)
|
|
color: var(--text-primary)
|
|
line-height: 1.5
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
|
|
.app
|
|
min-height: 100vh
|
|
display: flex
|
|
flex-direction: column
|
|
max-width: 100vw
|
|
overflow-x: hidden
|
|
|
|
&.calendar-app
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
|
|
|
.main
|
|
background: transparent
|
|
|
|
// Header
|
|
.header
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%)
|
|
backdrop-filter: blur(20px)
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
|
|
padding: var(--spacing-sm) var(--spacing-md)
|
|
position: sticky
|
|
top: 0
|
|
z-index: 100
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius)
|
|
|
|
.header-content
|
|
display: flex
|
|
flex-direction: column
|
|
gap: var(--spacing-md)
|
|
max-width: 600px
|
|
margin: 0 auto
|
|
|
|
h1
|
|
font-size: 1.5rem
|
|
font-weight: 700
|
|
color: var(--text-primary)
|
|
display: flex
|
|
align-items: center
|
|
gap: var(--spacing-sm)
|
|
justify-content: center
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
|
|
|
|
svg
|
|
color: var(--primary-color)
|
|
font-size: 1.25rem
|
|
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3))
|
|
|
|
.month-navigation
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: var(--spacing-md)
|
|
|
|
.current-month
|
|
font-size: 1.125rem
|
|
font-weight: 600
|
|
color: var(--text-primary)
|
|
margin: 0
|
|
min-width: 140px
|
|
text-align: center
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
|
|
|
|
.btn-icon
|
|
width: 44px
|
|
height: 44px
|
|
border-radius: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
|
|
border: none
|
|
color: white
|
|
transition: all 0.3s ease
|
|
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3)
|
|
|
|
&:hover
|
|
transform: translateY(-2px) scale(1.05)
|
|
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4)
|
|
|
|
&:active
|
|
transform: translateY(0) scale(0.95)
|
|
|
|
.view-controls
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
gap: var(--spacing-md)
|
|
padding-top: var(--spacing-sm)
|
|
border-top: 1px solid rgba(255, 255, 255, 0.3)
|
|
|
|
.view-type-toggle
|
|
display: flex
|
|
gap: 4px
|
|
background: rgba(255, 255, 255, 0.7)
|
|
padding: 4px
|
|
border-radius: var(--border-radius)
|
|
backdrop-filter: blur(10px)
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
|
|
|
|
.btn
|
|
padding: var(--spacing-xs) var(--spacing-md)
|
|
border-radius: var(--border-radius-small)
|
|
font-size: 0.875rem
|
|
font-weight: 600
|
|
transition: all 0.3s ease
|
|
border: none
|
|
|
|
&.btn-primary
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
|
|
color: white
|
|
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3)
|
|
|
|
&.btn-secondary
|
|
background: transparent
|
|
color: var(--text-secondary)
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.5)
|
|
color: var(--text-primary)
|
|
|
|
.user-select
|
|
padding: var(--spacing-sm) var(--spacing-md)
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
border-radius: var(--border-radius)
|
|
background: rgba(255, 255, 255, 0.7)
|
|
backdrop-filter: blur(10px)
|
|
font-size: 0.875rem
|
|
font-weight: 500
|
|
min-width: 120px
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
|
|
transition: all 0.3s ease
|
|
|
|
&:focus
|
|
outline: none
|
|
border-color: var(--primary-color)
|
|
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2)
|
|
background: rgba(255, 255, 255, 0.9)
|
|
|
|
// Main Content
|
|
.main
|
|
flex: 1
|
|
padding: var(--spacing-md)
|
|
max-width: 600px
|
|
margin: 0 auto
|
|
width: 100%
|
|
padding-bottom: 100px // Space for FAB
|
|
|
|
// Error Message
|
|
.error-message
|
|
background: linear-gradient(135deg, var(--danger-color) 0%, #dc3545 100%)
|
|
color: white
|
|
padding: var(--spacing-md) var(--spacing-lg)
|
|
border-radius: var(--border-radius)
|
|
margin-bottom: var(--spacing-md)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
font-weight: 500
|
|
box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3)
|
|
backdrop-filter: blur(10px)
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
animation: slideInFromTop 0.3s ease
|
|
|
|
button
|
|
background: rgba(255, 255, 255, 0.2)
|
|
border: none
|
|
color: white
|
|
font-size: 1.25rem
|
|
cursor: pointer
|
|
padding: 0
|
|
width: 28px
|
|
height: 28px
|
|
border-radius: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
transition: all 0.3s ease
|
|
backdrop-filter: blur(10px)
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.3)
|
|
transform: scale(1.1)
|
|
|
|
@keyframes slideInFromTop
|
|
from
|
|
opacity: 0
|
|
transform: translateY(-10px)
|
|
to
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
// Loading State
|
|
.loading
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
height: 60vh
|
|
color: var(--text-secondary)
|
|
|
|
.loading-icon
|
|
font-size: 3.5rem
|
|
color: var(--primary-color)
|
|
margin-bottom: var(--spacing-lg)
|
|
animation: pulse-glow 2s infinite
|
|
filter: drop-shadow(0 0 20px rgba(0, 122, 255, 0.3))
|
|
|
|
p
|
|
font-size: 1.125rem
|
|
font-weight: 600
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
|
|
|
|
@keyframes pulse-glow
|
|
0%, 100%
|
|
opacity: 1
|
|
transform: scale(1)
|
|
50%
|
|
opacity: 0.7
|
|
transform: scale(1.05)
|
|
|
|
@keyframes pulse
|
|
0%, 100%
|
|
opacity: 1
|
|
50%
|
|
opacity: 0.5
|
|
|
|
@keyframes pulse-today
|
|
0%, 100%
|
|
transform: scale(1)
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)
|
|
50%
|
|
transform: scale(1.05)
|
|
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0)
|
|
|
|
// Calendar Content
|
|
.calendar-content
|
|
display: flex
|
|
flex-direction: column
|
|
gap: var(--spacing-lg)
|
|
|
|
// Empty State
|
|
.empty-state
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
padding: var(--spacing-xl)
|
|
background: var(--surface-color)
|
|
border-radius: var(--border-radius)
|
|
box-shadow: var(--shadow-light)
|
|
text-align: center
|
|
border: 2px dashed var(--border-color)
|
|
transition: all 0.3s ease
|
|
|
|
&:hover
|
|
border-color: var(--primary-color)
|
|
box-shadow: var(--shadow-medium)
|
|
|
|
svg
|
|
font-size: 3rem
|
|
margin-bottom: var(--spacing-md)
|
|
color: var(--primary-color)
|
|
opacity: 0.5
|
|
animation: float 3s ease-in-out infinite
|
|
|
|
p
|
|
font-size: 1.1rem
|
|
font-weight: 600
|
|
color: var(--text-primary)
|
|
margin-bottom: var(--spacing-sm)
|
|
|
|
small
|
|
color: var(--text-secondary)
|
|
line-height: 1.4
|
|
|
|
@keyframes float
|
|
0%, 100%
|
|
transform: translateY(0)
|
|
50%
|
|
transform: translateY(-10px)
|
|
|
|
// Events List
|
|
.events-list
|
|
display: flex
|
|
flex-direction: column
|
|
gap: var(--spacing-lg)
|
|
|
|
.day-section
|
|
background: var(--surface-color)
|
|
border-radius: var(--border-radius)
|
|
box-shadow: var(--shadow-light)
|
|
overflow: hidden
|
|
transition: all 0.3s ease
|
|
border: 2px solid transparent
|
|
|
|
&:hover
|
|
box-shadow: var(--shadow-medium)
|
|
transform: translateY(-2px)
|
|
|
|
&.today
|
|
border-color: var(--primary-color)
|
|
box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2)
|
|
|
|
.day-header
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%)
|
|
|
|
.day-number
|
|
background: rgba(255, 255, 255, 0.2)
|
|
color: white
|
|
animation: pulse-today 2s infinite
|
|
|
|
&.other-month
|
|
opacity: 0.7
|
|
|
|
.day-header
|
|
background: linear-gradient(135deg, var(--text-muted) 0%, #6c757d 100%)
|
|
|
|
.day-header
|
|
background: linear-gradient(135deg, var(--secondary-color) 0%, #4c46a6 100%)
|
|
color: white
|
|
padding: var(--spacing-md) var(--spacing-lg)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat
|
|
opacity: 0.3
|
|
|
|
.day-info
|
|
display: flex
|
|
align-items: center
|
|
gap: var(--spacing-md)
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.day-number
|
|
background: rgba(255, 255, 255, 0.15)
|
|
border: 2px solid rgba(255, 255, 255, 0.3)
|
|
border-radius: 50%
|
|
width: 64px
|
|
height: 64px
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
font-size: 1.75rem
|
|
font-weight: 700
|
|
color: white
|
|
transition: all 0.3s ease
|
|
backdrop-filter: blur(10px)
|
|
|
|
.day-details
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 2px
|
|
|
|
.day-name
|
|
font-size: 1.125rem
|
|
font-weight: 600
|
|
text-transform: capitalize
|
|
letter-spacing: 0.5px
|
|
|
|
.month-indicator
|
|
font-size: 0.75rem
|
|
opacity: 0.9
|
|
font-weight: 400
|
|
|
|
.event-count
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 2px
|
|
background: rgba(255, 255, 255, 0.15)
|
|
padding: var(--spacing-sm) var(--spacing-md)
|
|
border-radius: var(--border-radius-small)
|
|
backdrop-filter: blur(10px)
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.count-number
|
|
font-size: 1.25rem
|
|
font-weight: 700
|
|
line-height: 1
|
|
|
|
.count-label
|
|
font-size: 0.625rem
|
|
font-weight: 500
|
|
opacity: 0.9
|
|
text-transform: uppercase
|
|
letter-spacing: 0.5px
|
|
|
|
.day-events
|
|
padding: var(--spacing-md)
|
|
display: flex
|
|
flex-direction: column
|
|
gap: var(--spacing-sm)
|
|
background: linear-gradient(to bottom, rgba(248, 249, 250, 0.5), rgba(255, 255, 255, 1))
|
|
|
|
// Calendar Event
|
|
.calendar-event
|
|
background: var(--surface-color)
|
|
border: 1px solid var(--border-color)
|
|
border-left: 4px solid var(--primary-color)
|
|
border-radius: var(--border-radius-small)
|
|
padding: var(--spacing-md)
|
|
display: flex
|
|
align-items: flex-start
|
|
justify-content: space-between
|
|
gap: var(--spacing-md)
|
|
transition: all 0.3s ease
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 4px
|
|
height: 100%
|
|
background: linear-gradient(to bottom, var(--primary-color), rgba(0, 122, 255, 0.3))
|
|
transition: width 0.3s ease
|
|
|
|
&:hover
|
|
box-shadow: var(--shadow-medium)
|
|
transform: translateY(-2px)
|
|
border-color: transparent
|
|
|
|
&::before
|
|
width: 8px
|
|
|
|
&.birthday-event
|
|
background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(255, 182, 193, 0.15) 100%)
|
|
border-left: 4px solid #ff6b9d
|
|
|
|
&::before
|
|
background: linear-gradient(to bottom, #ff6b9d, rgba(255, 107, 157, 0.3))
|
|
|
|
&:hover
|
|
background: linear-gradient(135deg, rgba(255, 107, 157, 0.15) 0%, rgba(255, 182, 193, 0.2) 100%)
|
|
box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3)
|
|
|
|
.event-content
|
|
flex: 1
|
|
min-width: 0
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.event-text
|
|
font-weight: 500
|
|
color: var(--text-primary)
|
|
font-size: 1rem
|
|
margin-bottom: var(--spacing-xs)
|
|
word-break: break-word
|
|
line-height: 1.4
|
|
display: flex
|
|
align-items: center
|
|
gap: var(--spacing-xs)
|
|
flex-wrap: wrap
|
|
|
|
.birthday-icon
|
|
color: #ff6b9d
|
|
font-size: 1.1rem
|
|
animation: birthday-bounce 2s infinite
|
|
filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.3))
|
|
|
|
.birthday-label
|
|
background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
|
|
color: white
|
|
font-size: 0.625rem
|
|
font-weight: 600
|
|
padding: 2px 6px
|
|
border-radius: 8px
|
|
text-transform: uppercase
|
|
letter-spacing: 0.5px
|
|
margin-left: auto
|
|
box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3)
|
|
|
|
.event-user
|
|
font-size: 0.875rem
|
|
font-weight: 600
|
|
opacity: 0.8
|
|
display: flex
|
|
align-items: center
|
|
gap: var(--spacing-xs)
|
|
|
|
&::before
|
|
content: ''
|
|
width: 8px
|
|
height: 8px
|
|
border-radius: 50%
|
|
background: currentColor
|
|
opacity: 0.6
|
|
|
|
.event-source
|
|
font-size: 0.75rem
|
|
opacity: 0.7
|
|
font-style: italic
|
|
|
|
.read-only-indicator
|
|
font-size: 0.75rem
|
|
opacity: 0.7
|
|
font-style: italic
|
|
color: var(--text-muted)
|
|
|
|
.event-actions
|
|
display: flex
|
|
gap: var(--spacing-xs)
|
|
flex-shrink: 0
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.birthday-indicator
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
width: 36px
|
|
height: 36px
|
|
border-radius: 50%
|
|
background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
|
|
color: white
|
|
box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
|
|
animation: birthday-glow 3s infinite
|
|
|
|
.gift-icon
|
|
font-size: 0.875rem
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
|
|
|
|
.read-only-indicator
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
width: 36px
|
|
height: 36px
|
|
border-radius: 50%
|
|
background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%)
|
|
color: white
|
|
opacity: 0.7
|
|
|
|
.read-only-text
|
|
font-size: 0.875rem
|
|
|
|
.edit-form
|
|
width: 100%
|
|
display: flex
|
|
flex-direction: column
|
|
gap: var(--spacing-sm)
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.form-group
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
label
|
|
font-size: 0.875rem
|
|
font-weight: 500
|
|
color: var(--text-secondary)
|
|
margin-bottom: var(--spacing-xs)
|
|
|
|
input, select
|
|
width: 100%
|
|
padding: var(--spacing-sm)
|
|
border: 1px solid var(--border-color)
|
|
border-radius: var(--border-radius-small)
|
|
font-size: 0.875rem
|
|
background: var(--surface-color)
|
|
transition: all 0.2s ease
|
|
|
|
&:focus
|
|
outline: none
|
|
border-color: var(--primary-color)
|
|
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1)
|
|
|
|
.edit-actions
|
|
display: flex
|
|
gap: var(--spacing-sm)
|
|
justify-content: flex-end
|
|
margin-top: var(--spacing-sm)
|
|
|
|
@keyframes birthday-bounce
|
|
0%, 100%
|
|
transform: translateY(0) scale(1)
|
|
50%
|
|
transform: translateY(-2px) scale(1.1)
|
|
|
|
@keyframes birthday-glow
|
|
0%, 100%
|
|
box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
|
|
50%
|
|
box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6)
|
|
|
|
// Buttons
|
|
.btn
|
|
border: none
|
|
border-radius: var(--border-radius)
|
|
padding: var(--spacing-sm) var(--spacing-md)
|
|
font-size: 0.875rem
|
|
font-weight: 600
|
|
cursor: pointer
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: var(--spacing-xs)
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
|
text-decoration: none
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: -100%
|
|
width: 100%
|
|
height: 100%
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
|
|
transition: left 0.5s ease
|
|
|
|
&:hover::before
|
|
left: 100%
|
|
|
|
&:disabled
|
|
opacity: 0.5
|
|
cursor: not-allowed
|
|
transform: none !important
|
|
|
|
&:hover::before
|
|
left: -100%
|
|
|
|
&.btn-primary
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%)
|
|
color: white
|
|
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3)
|
|
|
|
&:hover:not(:disabled)
|
|
transform: translateY(-2px)
|
|
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4)
|
|
|
|
&:active:not(:disabled)
|
|
transform: translateY(0)
|
|
|
|
&.btn-secondary
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%)
|
|
color: var(--text-primary)
|
|
border: 1px solid rgba(0, 0, 0, 0.1)
|
|
backdrop-filter: blur(10px)
|
|
|
|
&:hover:not(:disabled)
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 242, 245, 1) 100%)
|
|
transform: translateY(-1px)
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
|
|
|
|
&.btn-danger
|
|
background: linear-gradient(135deg, var(--danger-color) 0%, #dc3545 100%)
|
|
color: white
|
|
box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3)
|
|
|
|
&:hover:not(:disabled)
|
|
transform: translateY(-2px)
|
|
box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4)
|
|
|
|
&.btn-small
|
|
padding: var(--spacing-xs)
|
|
font-size: 0.75rem
|
|
width: 36px
|
|
height: 36px
|
|
border-radius: 50%
|
|
|
|
svg
|
|
font-size: 0.875rem
|
|
|
|
svg
|
|
font-size: 1rem
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))
|
|
|
|
// Add Form Overlay
|
|
.add-form-overlay
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background: rgba(0, 0, 0, 0.6)
|
|
backdrop-filter: blur(8px)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
z-index: 1000
|
|
padding: var(--spacing-md)
|
|
animation: fadeIn 0.3s ease
|
|
|
|
.add-form
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%)
|
|
backdrop-filter: blur(20px)
|
|
border-radius: var(--border-radius)
|
|
padding: var(--spacing-xl)
|
|
width: 100%
|
|
max-width: 420px
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2)
|
|
max-height: 80vh
|
|
overflow-y: auto
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
animation: slideIn 0.3s ease
|
|
|
|
h3
|
|
font-size: 1.375rem
|
|
font-weight: 700
|
|
margin-bottom: var(--spacing-lg)
|
|
color: var(--text-primary)
|
|
text-align: center
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
|
|
|
|
.form-group
|
|
display: flex
|
|
flex-direction: column
|
|
margin-bottom: var(--spacing-lg)
|
|
|
|
label
|
|
font-size: 0.875rem
|
|
font-weight: 600
|
|
color: var(--text-secondary)
|
|
margin-bottom: var(--spacing-sm)
|
|
text-transform: uppercase
|
|
letter-spacing: 0.5px
|
|
|
|
input, select
|
|
width: 100%
|
|
padding: var(--spacing-md)
|
|
border: 2px solid rgba(255, 255, 255, 0.3)
|
|
border-radius: var(--border-radius)
|
|
font-size: 1rem
|
|
background: rgba(255, 255, 255, 0.7)
|
|
backdrop-filter: blur(10px)
|
|
transition: all 0.3s ease
|
|
font-weight: 500
|
|
|
|
&:focus
|
|
outline: none
|
|
border-color: var(--primary-color)
|
|
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15)
|
|
background: rgba(255, 255, 255, 0.9)
|
|
|
|
&::placeholder
|
|
color: var(--text-muted)
|
|
font-weight: 400
|
|
|
|
.form-actions
|
|
display: flex
|
|
gap: var(--spacing-md)
|
|
justify-content: flex-end
|
|
margin-top: var(--spacing-xl)
|
|
|
|
// Floating Action Button
|
|
.fab-container
|
|
position: fixed
|
|
bottom: var(--spacing-lg)
|
|
right: var(--spacing-lg)
|
|
z-index: 100
|
|
|
|
.fab
|
|
width: 64px
|
|
height: 64px
|
|
border-radius: 50%
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%)
|
|
color: white
|
|
border: none
|
|
cursor: pointer
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
font-size: 1.5rem
|
|
box-shadow: 0 8px 32px rgba(0, 122, 255, 0.4)
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%)
|
|
transform: translateX(-100%)
|
|
transition: transform 0.6s ease
|
|
|
|
&:hover
|
|
transform: translateY(-4px) scale(1.1)
|
|
box-shadow: 0 12px 40px rgba(0, 122, 255, 0.5)
|
|
|
|
&::before
|
|
transform: translateX(100%)
|
|
|
|
&:active
|
|
transform: translateY(-2px) scale(1.05)
|
|
|
|
svg
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
|
|
|
|
@keyframes fadeIn
|
|
from
|
|
opacity: 0
|
|
to
|
|
opacity: 1
|
|
|
|
@keyframes slideIn
|
|
from
|
|
opacity: 0
|
|
transform: translateY(20px) scale(0.95)
|
|
to
|
|
opacity: 1
|
|
transform: translateY(0) scale(1)
|
|
|
|
// Responsive Design
|
|
@media (max-width: 480px)
|
|
.main
|
|
padding: var(--spacing-sm)
|
|
|
|
.header
|
|
padding: var(--spacing-xs) var(--spacing-sm)
|
|
border-radius: 0
|
|
|
|
.header-content
|
|
gap: var(--spacing-sm)
|
|
|
|
h1
|
|
font-size: 1.25rem
|
|
|
|
.month-navigation
|
|
.current-month
|
|
font-size: 1rem
|
|
min-width: 120px
|
|
|
|
.btn-icon
|
|
width: 40px
|
|
height: 40px
|
|
|
|
.view-controls
|
|
flex-direction: column
|
|
gap: var(--spacing-sm)
|
|
align-items: stretch
|
|
|
|
.view-type-toggle
|
|
justify-content: center
|
|
|
|
.user-select
|
|
width: 100%
|
|
|
|
.day-section
|
|
.day-header
|
|
padding: var(--spacing-sm) var(--spacing-md)
|
|
|
|
.day-info
|
|
gap: var(--spacing-sm)
|
|
|
|
.day-number
|
|
width: 52px
|
|
height: 52px
|
|
font-size: 1.375rem
|
|
|
|
.day-details
|
|
.day-name
|
|
font-size: 0.9rem
|
|
|
|
.month-indicator
|
|
font-size: 0.65rem
|
|
|
|
.event-count
|
|
padding: var(--spacing-xs) var(--spacing-sm)
|
|
|
|
.count-number
|
|
font-size: 1rem
|
|
|
|
.count-label
|
|
font-size: 0.5rem
|
|
|
|
.day-events
|
|
padding: var(--spacing-sm)
|
|
|
|
.calendar-event
|
|
padding: var(--spacing-sm)
|
|
flex-direction: column
|
|
align-items: stretch
|
|
gap: var(--spacing-sm)
|
|
|
|
.event-content
|
|
.event-text
|
|
font-size: 0.9rem
|
|
|
|
.birthday-icon
|
|
font-size: 1rem
|
|
|
|
.birthday-label
|
|
font-size: 0.5rem
|
|
padding: 1px 4px
|
|
|
|
.event-user
|
|
font-size: 0.8rem
|
|
|
|
.event-source
|
|
font-size: 0.7rem
|
|
|
|
.event-actions
|
|
justify-content: flex-end
|
|
margin-top: var(--spacing-xs)
|
|
|
|
.birthday-indicator
|
|
width: 32px
|
|
height: 32px
|
|
|
|
.gift-icon
|
|
font-size: 0.75rem
|
|
|
|
.btn-small
|
|
width: 32px
|
|
height: 32px
|
|
|
|
.add-form-overlay
|
|
padding: var(--spacing-sm)
|
|
|
|
.add-form
|
|
padding: var(--spacing-lg)
|
|
max-height: 90vh
|
|
|
|
h3
|
|
font-size: 1.25rem
|
|
|
|
.form-group
|
|
margin-bottom: var(--spacing-md)
|
|
|
|
input, select
|
|
padding: var(--spacing-sm)
|
|
|
|
.fab-container
|
|
bottom: var(--spacing-md)
|
|
right: var(--spacing-md)
|
|
|
|
.fab
|
|
width: 56px
|
|
height: 56px
|
|
font-size: 1.25rem
|
|
|
|
.empty-state
|
|
padding: var(--spacing-lg)
|
|
|
|
svg
|
|
font-size: 2.5rem
|
|
|
|
p
|
|
font-size: 1rem
|