diff --git a/styles/default.css b/styles/default.css index c414452..ea4323f 100644 --- a/styles/default.css +++ b/styles/default.css @@ -28,12 +28,23 @@ a color: #000; } +input, +textarea +{ + background-color: #eee; +} + +textarea +{ + font-family: Arial, Helvetica, sans-serif; +} + .centreColumn { position: relative; width: 800px; - min-height: calc(100vh - 116px - 100px); + min-height: calc(100vh - 100px - 100px); margin-right: auto; margin-left: auto; padding-top: 100px; @@ -126,7 +137,7 @@ a .footerContainer { width: 100%; - height: 60px; + height: 80px; } .centreFooterContainer @@ -215,48 +226,100 @@ a color: #fffa; } -.createForm input, -.createForm textarea -{ - width: 100%; -} - .createForm .title, -.createForm .author +.createForm .author, +.createForm .titleAuthorSeparator { - font-size: 18pt; - line-height: 25px; + font-size: 16pt; + line-height: 30px; - display: block; + display: inline-block; + box-sizing: border-box; width: 100%; + padding-right: 7px; + padding-left: 7px; border: 0; +} + +.createForm .title +{ + float: left; + + width: calc(70% - 50px); + border-bottom: 5px solid #000; } .createForm .author { - width: 100%; + float: right; + + width: 30%; color: #000; + border-bottom: 5px solid #000; +} + +.createForm .titleAuthorSeparator +{ + width: 50px; + + text-align: center; } .createForm .tags { + font-size: 20pt; + line-height: 25px; + width: 100%; - color: #000; + background-color: #eee; } .createForm .content { + font-size: 12pt; + + width: calc(100% - 20px); + height: calc(100vh - 387px - 100px); + min-height: 400px; + margin: 0; + margin-bottom: 10px; + padding: 10px; + resize: vertical; color: #000; + border: 0; } -.createForm .submit +.createForm .buttonContainer { - color: #000; + width: 100%; + height: 60px; +} + +.createForm button +{ + font-size: 16pt; + font-weight: bold; + + display: inline-block; + float: right; + + max-width: 100%; + height: calc(100% - 20px); + margin-bottom: 20px; + margin-left: 15px; + padding-right: 15px; + padding-left: 15px; + + cursor: pointer; + + color: #fff; + border: 0; + background-color: #000; } diff --git a/styles/ng-tags-input.css b/styles/ng-tags-input.css index 9952d89..65e650a 100644 --- a/styles/ng-tags-input.css +++ b/styles/ng-tags-input.css @@ -2,6 +2,7 @@ tags-input { display: block; } + tags-input *, tags-input *:before, tags-input *:after @@ -10,6 +11,7 @@ tags-input *:after -moz-box-sizing: border-box; box-sizing: border-box; } + tags-input .host { position: relative; @@ -17,7 +19,10 @@ tags-input .host height: 100%; margin-top: 5px; margin-bottom: 5px; + + border-bottom: 5px solid #000; } + tags-input .host:active { outline: none; @@ -32,14 +37,15 @@ tags-input .tags cursor: text; word-wrap: break-word; + /* border: 1px solid darkgray; */ - border: 1px solid darkgray; background-color: #fff; /* box-shadow: 1px 1px 1px 0 lightgray inset; */ -moz-appearance: textfield; -webkit-appearance: textfield; } + /* tags-input .tags.focused { outline: none; @@ -47,6 +53,7 @@ tags-input .tags -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6); box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6); } */ + tags-input .tags .tag-list { margin: 0; @@ -54,9 +61,10 @@ tags-input .tags .tag-list list-style-type: none; } + tags-input .tags .tag-item { - font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 25px; display: inline-block; @@ -73,11 +81,13 @@ tags-input .tags .tag-item background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */ background-color: #000; } + tags-input .tags .tag-item.selected { /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */ } + tags-input .tags .tag-item .remove-button { font: bold 16px Arial, sans-serif; @@ -92,127 +102,37 @@ tags-input .tags .tag-item .remove-button border: none; background: none; } + tags-input .tags .tag-item .remove-button:active { color: #f00; } + tags-input .tags .input { - font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; float: left; height: 26px; margin: 2px; padding: 0; + padding-right: 5px; padding-left: 5px; border: 0; + /* border-bottom: 5px solid #000; */ outline: none; } + tags-input .tags .input.invalid-tag { color: #f00; } + tags-input .tags .input::-ms-clear { display: none; } -tags-input.ng-invalid .tags -{ - -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); - -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); - box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6); -} -tags-input[disabled] .host:focus -{ - outline: none; -} -tags-input[disabled] .tags -{ - cursor: default; - - background-color: #eee; -} -tags-input[disabled] .tags .tag-item -{ - opacity: .65; - background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%); - background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%); -} -tags-input[disabled] .tags .tag-item .remove-button -{ - cursor: default; -} -tags-input[disabled] .tags .tag-item .remove-button:active -{ - color: #585858; -} -tags-input[disabled] .tags .input -{ - cursor: default; - - background-color: #eee; -} - -tags-input .autocomplete -{ - position: absolute; - z-index: 999; - - width: 100%; - margin-top: 5px; - padding: 5px 0; - - border: 1px solid rgba(0, 0, 0, .2); - background-color: #fff; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); - box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -} -tags-input .autocomplete .suggestion-list -{ - position: relative; - - overflow-y: auto; - - max-height: 280px; - margin: 0; - padding: 0; - - list-style-type: none; -} -tags-input .autocomplete .suggestion-item -{ - font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; - - overflow: hidden; - - padding: 5px 10px; - - cursor: pointer; - white-space: nowrap; - text-overflow: ellipsis; - - color: #000; - background-color: #fff; -} -tags-input .autocomplete .suggestion-item.selected -{ - color: #fff; - background-color: #0097cf; -} -tags-input .autocomplete .suggestion-item.selected em -{ - color: #fff; - background-color: #0097cf; -} -tags-input .autocomplete .suggestion-item em -{ - font: normal bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; - - color: #000; - background-color: #fff; -} /*# sourceMappingURL=ng-tags-input.css.map */ diff --git a/views/create.html b/views/create.html index 24d604b..b3eacc5 100644 --- a/views/create.html +++ b/views/create.html @@ -1,8 +1,10 @@

Create a new post

- -
- +
+ + by + +

+ placeholder="Add tags">
- +
- +
+ + +