-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
122 lines (88 loc) · 6.36 KB
/
style.css
File metadata and controls
122 lines (88 loc) · 6.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
html {font-family: 'Ruda'; font-size: 35px; }
html, body {height: 100%; }
li {margin: 3%; margin-left: auto;}
p {font-size: 0.9em; }
/* ui/ux junk drawer */
.clickable {cursor: pointer; }
.hidden {display: none;}
.visible {display: initial;}
.center {text-align: center; }
/* angularjs animations */
.ng_fade.ng-enter,
.ng_fade_in.ng-enter {transition: 0.5s linear all; opacity:0;}
.ng_fade.ng-enter.ng-enter-active,
.ng_fade_in.ng-enter-active { opacity:1;}
.ng_fade.ng-leave {transition: 0.5s linear all; opacity:1;}
.ng_fade.ng-leave.ng-leave-active {opacity:0;}
/*
mobile styles start here!
*/
.title_splash {display: flex; flex-direction: column; align-items: center; height: 25%; justify-content: center; background-repeat: no-repeat; background-size: 100%; font-family: 'Poiret One'; position: relative; }
.title_splash::after { content: ""; background: url('/media/title_splash.jpg'); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-repeat: no-repeat; background-size: 100%; }
.title_splash_title_text {font-size: 2.5em; color: #fff; text-shadow: 0.01em 0.05em #000; font-weight: bold; text-transform: uppercase; }
.title_splash_subtitle {font-size: 2em; color: #fff; text-shadow: 0.01em 0.05em #000; font-weight: bold; text-transform: uppercase; }
.logo_banner {display: flex; justify-content: center;}
.logo_banner img {}
.nav_bar {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; background: linear-gradient(to bottom, #fff 90%, #000); }
.nav_button {font-size: 1.1em; padding: 2%; color: #666; background-color: #ddd; margin: 1%; margin-bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; font-family: 'Poiret One'; text-transform: uppercase; background: linear-gradient(to bottom, #ddd 90%, #000); border-top: 0.2em solid #ddd; }
.nav_button.active {background: none; background-color: #fff; border: 0.2em solid #000; border-bottom: 0; margin-bottom: 0; color: #000; font-weight: bold; margin-bottom: -2px; transition: 0.5s; }
.tab {width: 95%; margin: 0 auto; padding-bottom: 10%; }
.footer {position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: row; justify-content: space-between; font-size: 0.6em; padding: 1%; border-top: 1px solid #ddd; background: url('/media/COLOURBOX11504476.jpg'); background-size: 145%; z-index: 10; }
.rsvp_form_container {width: 95%; min-height: 50%; display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0 auto; position: relative; }
.rsvp_form_container::before {content: ""; background: url('/media/COLOURBOX11504476.jpg'); opacity: 0.5; top: 0; left: 0; right: 0; bottom: 0; position: absolute; background-size: 95%; }
.rsvp_form_sheet {z-index: 1}
.rsvp_form_sheet p {margin: 2%; margin-bottom: 5%; }
.rsvp_form_sheet h2 {margin-left: 5%; font-family: 'Poiret One'; text-transform: uppercase; }
.rsvp_form_sheet input[type="number"] {width: auto; }
.rsvp_form_sheet input[type="radio"] { display: none; }
.rsvp_form_sheet label {padding: 2%; background-color: #ccc; color: #fff; transition: 0.5s; border-radius: 5px; font-size: 0.9em; margin: 1%; text-transform: capitalize; }
.rsvp_form_sheet input[type="radio"]:checked+label {color: #000; background-color: #BA8D3C; font-weight: bold; }
.rsvp_form_nav {font-size: 1em; margin: 1%; border: 0; padding: 2%; background-color: #eea; background: radial-gradient(#01BAB4,#05A49F); }
.rsvp_form_nav_container {display: flex; flex-direction: row; justify-content: flex-end; padding: 3%; z-index: 1; }
.rsvp_form_step_container {width: auto; margin: 0 auto; padding: 3%; }
.step { height: 1em; width: 1em; margin: 0 0.5em; background-color: #ccc; border: none; border-radius: 50%; display: inline-block; opacity: 0.5;}
.step.active {background-color: #000;}
.rm_guest {position: absolute; right: 5%; border-radius: 10px; border: 0.1em solid #ccc; background-color: #ddd; color: #bbb; background: radial-gradient(#fff, #ddd); padding: 1%; padding-left: 2%; padding-right: 2%; }
.rsvp_guest_name,
.rsvp_guest_email {font-size: 1.5em; text-align: center; width: 90%; border: 0; text-align: left; padding: 1%; padding-left: 3%; margin: 2%; font-family: 'Poiret One'; }
.rsvp_guest {display: block; margin: 2%; border-radius: 5px; background-color: #fff; padding: 1%; border: 1px solid #aaa; }
.guest_list_review {width: 95%; background-color: #fff; border-radius: 5px; border: 1px solid #ccc; margin: 0 auto; border-collapse: collapse;}
.guest_list_review th {border-bottom: 1px solid #333; padding: 1%; }
.guest_list_review td {border-left: 1px solid #999; padding: 1%; text-transform: capitalize;}
.rsvp_error {background-color: #FF9999; padding: 1%; border: 1px solid #fff; font-size: 1em; }
.rsvp_submit {font-weight: bold; }
/* I hate modals! */
.modal {z-index: 100; background-color: #000; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: 0.5s; }
.modal_content {margin: 0 auto; margin-top: 5%; width: 85%; height: 90%; background-color: #fff; border: 0.2em solid #000; border-radius: 1px; padding: 2%; }
.modal_content.rsvp_success {display: flex; flex-direction: column; justify-content: center; align-items: center; }
img.rsvp_success {width: 90%; border: 0.2em solid #01BAB4; border-right-color: #05A49F; border-bottom-color: #05A49F; }
/* content */
iframe {max-height: 200vh; width: 90%; display: block; margin: 0 auto; }
.std_preview {width: 90%; margin: 0 auto; display: block; }
/*
tablet breakpoint
*/
@media only screen and (min-width: 700px) and (max-resolution: 3dppx) {
html {font-size: 30px; }
.title_splash {height: 30%; }
.nav_button {margin-bottom: 0.1%; }
.nav_button.active {margin-bottom: -1px; }
.footer {font-size: 0.5em; }
img.rsvp_success {width: 50%; }
}
/*
wide res desktop breakpoint
*/
@media only screen and (min-width: 1050px) and (orientation: landscape) {
html {font-size: 11pt; }
body {width: 700px; margin: 0 auto; }
.footer {padding: 0.5%; padding-left: 25%; padding-right: 25%; font-size: 0.7em; }
.nav_button.active {margin-bottom: 0; }
.bottom_spacer {height: 50px; }
img.rsvp_success {width: 25%; }
.modal_content {margin-top: 2%; height: 87%;}
}
/* last chance styles and overrides only below */
/* color */
.gradient_gold {background: radial-gradient(#F5E5B2, #E7CC7D, #BA8D3C);}
.gold_border {border: 0.1em solid #AB995D; border-right-color: #9B995D; border-bottom-color: #9B995D}