diff options
Diffstat (limited to 'public/css/style.css')
| -rwxr-xr-x | public/css/style.css | 239 |
1 files changed, 239 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css new file mode 100755 index 0000000..97838d6 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,239 @@ +/* +body, html { + min-height: 100vh; +} +*/ + +@media (max-width: 576px) { + #container { + height: auto !important; + } +} + +@media (min-width: 577px) { + #sidebar { + border-right: 2px solid #e0e0e0; + min-height: 100vh; + } + body { + background: #f5f5f5; /* Old browsers */ + background: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 50%, #ffffff 51%, #ffffff 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ + } +} + +#content { + display: flex; + min-height: 100vh; + flex-direction: column; +} +#bodyContainer { + flex: 1; +} + +#footerContainer { + border-top: 1px solid #e0e0e0; + text-align: center; + padding: 5px 0; +} + +#sidebar { + background: #f5f5f5; + border-bottom: 2px solid #e0e0e0; +} + +#sidebar>h1 { + font-family: "Raleway", serif; + font-weight: 900; + text-align: center; + letter-spacing: -0.5px; +} + +#content { + background: #ffffff; + box-shadow: -8px 0 6px -6px rgba(0,0,0,0.3); +} + +#genericEventImageContainer { + height:150px; + border-radius: 5px; +} + +#genericEventImageContainer:before { + content: ''; + background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 75%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); + position: absolute; + width: 97%; + height: 150px; +} + +#eventImageContainer { + height:300px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-radius: 5px; +} + +#eventImageContainer:before { + content: ''; + background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 85%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); + position: absolute; + width: 100%; + height: 300px; +} + +#eventName { + padding: 0 0 0 10px; + width: 100%; + display: flex; + justify-content: space-between; +} + +#eventPrivacy { + text-transform:capitalize; +} + +#eventFromNow { + padding-left: 25px; +} + +#eventFromNow::first-letter { + text-transform:capitalize; +} + +/* +.location, .eventLink { + display: flex; + width: 100%; + justify-content: space-between; +} +*/ + +.attendeesList { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.attendeesList > li { + height: 80px; + width: 80px; + border: 4px solid #0ea130; + border-radius: 50%; + margin-right: 5px; + margin-bottom: 5px; + background: #57b76d; + color: white; + font-size: 0.95em; + font-weight: bold; + overflow: hidden; + display: inline-block; + line-height: 67px; + text-align: center; +} + +.expand { + -webkit-transition: height 0.2s; + -moz-transition: height 0.2s; + transition: height 0.2s; +} + +.eventInformation { + margin-left: 1.6em; +} + +.eventInformation > li { +/* line-height: 2.1em;*/ + margin-bottom: 0.8em; +} + +.eventInformation > li > .eventInformationAction { + margin-left: 5px; +} + +.commentContainer { + background: #fafafa; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #dfdfdf; +} + +.replyContainer { + display: none; + background: #efefef; + padding: 10px; + border-radius: 0 0 5px 5px; + border-bottom: 1px solid #d2d2d2; + border-left: 1px solid #d2d2d2; + border-right: 1px solid #d2d2d2; + width: 95%; + margin: -10px auto 10px auto; +} + +.repliesContainer { + font-size: smaller; + padding-left:20px; +} + +/* IMAGE UPLOAD FORM */ + + +#image-preview { + width: 100%; + height: 200px; + position: relative; + overflow: hidden; + background-color: #ffffff; + color: #ecf0f1; + border-radius: 5px; + border: 1px dashed #ced4da; +} +#image-preview input { + line-height: 200px; + font-size: 200px; + position: absolute; + opacity: 0; + z-index: 10; +} +#image-preview label { + position: absolute; + z-index: 5; + opacity: 0.8; + cursor: pointer; + background-color: #ced4da; + color: #555; + width: 200px; + height: 50px; + font-size: 20px; + line-height: 50px; + text-transform: uppercase; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + text-align: center; + border-radius: 5px; +} + +.datepickers-container { + z-index: 1600 !important; /* has to be larger than 1050 */ +} + +#newEventFormContainer, +#importEventFormContainer { + display: none; +} + +#icsImportLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #6c757d; +} |