Commit 857ffb47b775934f802dde6feb96b6f343fdf760
extract lots of global.css into named mcss
mix irving committed on 9/18/2017, 6:34:44 AMParent: 23773bc1942c218dddfed2ed303a71256b50710e
Files changed
| app/styles/css/global.js | changed |
| app/styles/mcss/markdown.mcss | changed |
| app/styles/mcss/lightbox.mcss | added |
| app/styles/mcss/search-highlights.mcss | added |
| app/styles/css/global.js | ||
|---|---|---|
| @@ -16,50 +16,8 @@ | ||
| 16 | 16 … | line-height: 1.4; |
| 17 | 17 … | color: #222; |
| 18 | 18 … | } |
| 19 | 19 … | |
| 20 | -blockquote { | |
| 21 | - border-left: 2px #ccc solid; | |
| 22 | - color: #666; | |
| 23 | - padding-left: .6rem; | |
| 24 | - margin-left: .6rem; | |
| 25 | - font-size: .85rem; | |
| 26 | -} | |
| 27 | - | |
| 28 | -blockquote p:last-child { | |
| 29 | - margin-bottom: .35ex; | |
| 30 | -} | |
| 31 | - | |
| 32 | -pre { | |
| 33 | - background-color: #f5f5f5; | |
| 34 | - padding: .3rem; | |
| 35 | - color: #444; | |
| 36 | -} | |
| 37 | - | |
| 38 | -.emoji { | |
| 39 | - height: 1.2em; | |
| 40 | - width: 1.2em; | |
| 41 | - vertical-align: middle; | |
| 42 | - margin-top: -0.2em; | |
| 43 | -} | |
| 44 | - | |
| 45 | -p, ul, ol { | |
| 46 | - margin-top: .35em; | |
| 47 | -} | |
| 48 | - | |
| 49 | -h1, h2, h3, h4, h5, h6 { | |
| 50 | - margin: 0; | |
| 51 | -} | |
| 52 | -h1, h2 { | |
| 53 | - margin-bottom: .5em | |
| 54 | -} | |
| 55 | -h1 { font-size: 1.4rem; } | |
| 56 | -h2 { font-size: 1.2em; } | |
| 57 | -h3 { font-size: 1.15rem; } | |
| 58 | -h4 { font-size: 1.12rem; } | |
| 59 | -h5 { font-size: 1.1rem; } | |
| 60 | -h6 { font-size: 1rem; } | |
| 61 | - | |
| 62 | 20 … | * { |
| 63 | 21 … | word-break: break-word; |
| 64 | 22 … | } |
| 65 | 23 … | |
| @@ -67,43 +25,25 @@ | ||
| 67 | 25 … | color: #0088cc; |
| 68 | 26 … | text-decoration: none; |
| 69 | 27 … | } |
| 70 | 28 … | |
| 71 | -a:hover, | |
| 72 | -a:focus { | |
| 29 … | +a:hover, a:focus { | |
| 73 | 30 … | color: #005580; |
| 74 | 31 … | text-decoration: underline; |
| 75 | 32 … | } |
| 76 | 33 … | |
| 77 | -pre { | |
| 78 | - white-space: pre-wrap; | |
| 79 | - word-wrap: break-word; | |
| 34 … | +input:focus, .compose:focus { | |
| 35 … | + outline: none; | |
| 36 … | + border-color: #0088cc; | |
| 37 … | + box-shadow: 0 0 4px #0088cc; | |
| 80 | 38 … | } |
| 81 | 39 … | |
| 82 | -p { | |
| 83 | - margin-top: .35ex; | |
| 84 | -} | |
| 85 | - | |
| 86 | -hr { | |
| 87 | - border: solid #eee; | |
| 88 | - clear: both; | |
| 89 | - border-width: 1px 0 0; | |
| 90 | - height: 0; | |
| 91 | - margin-bottom: .9em; | |
| 92 | -} | |
| 93 | - | |
| 94 | 40 … | input, textarea { |
| 95 | 41 … | border: none; |
| 96 | 42 … | border-radius: .2em; |
| 97 | 43 … | font-family: sans-serif; |
| 98 | 44 … | } |
| 99 | 45 … | |
| 100 | -input:focus, .compose:focus, button:focus { | |
| 101 | - outline: none; | |
| 102 | - border-color: #0088cc; | |
| 103 | - box-shadow: 0 0 4px #0088cc; | |
| 104 | -} | |
| 105 | - | |
| 106 | 46 … | textarea { |
| 107 | 47 … | padding: .5em; |
| 108 | 48 … | font-size: 1em; |
| 109 | 49 … | } |
| @@ -124,34 +64,15 @@ | ||
| 124 | 64 … | text-transform: uppercase; |
| 125 | 65 … | font-weight: bold; |
| 126 | 66 … | font-size: .7em; |
| 127 | 67 … | } |
| 128 | - | |
| 68 … | +button:focus { | |
| 69 … | + outline: none; | |
| 70 … | + border-color: #0088cc; | |
| 71 … | + box-shadow: 0 0 4px #0088cc; | |
| 72 … | +} | |
| 129 | 73 … | button:hover { |
| 130 | 74 … | background: #ccc; |
| 131 | 75 … | border: 1px solid #bbb; |
| 132 | 76 … | } |
| 133 | 77 … | |
| 134 | -/* TextNodeSearcher highlights */ | |
| 135 | - | |
| 136 | -highlight { | |
| 137 | - background: #ff8; | |
| 138 | -} | |
| 139 | - | |
| 140 | -/* lightbox - used in message-confirm */ | |
| 141 | - | |
| 142 | -div.lightbox { | |
| 143 | - position: fixed; | |
| 144 | - left: 0px; | |
| 145 | - right: 0px; | |
| 146 | - top: 50px; | |
| 147 | - overflow: auto; | |
| 148 | - width: 780px; | |
| 149 | - max-width: 100%; | |
| 150 | - padding: 25px; | |
| 151 | - margin: auto; | |
| 152 | - z-index: 2; | |
| 153 | - background: #f5f5f5; | |
| 154 | - border: 1px solid #eee; | |
| 155 | - border-radius: .2em; | |
| 156 | -} | |
| 157 | 78 … | ` |
| app/styles/mcss/markdown.mcss | |||
|---|---|---|---|
| @@ -1,9 +1,52 @@ | |||
| 1 | 1 … | Markdown { | |
| 2 | 2 … | ||
| 3 | - ul { | ||
| 3 … | + p, ul, ol { | ||
| 4 … | + } | ||
| 5 … | + | ||
| 6 … | + hr { | ||
| 7 … | + height: 0 | ||
| 8 … | + border: solid #ddd | ||
| 9 … | + border-width: 1px 0 0 | ||
| 10 … | + clear: both | ||
| 11 … | + margin-bottom: .9em | ||
| 12 … | + white-space: pre-wrap | ||
| 13 … | + word-wrap: break-word | ||
| 14 … | + } | ||
| 15 … | + | ||
| 16 … | + pre { | ||
| 17 … | + background-color: #f5f5f5 | ||
| 18 … | + color: #c121dc | ||
| 19 … | + padding: .3rem | ||
| 20 … | + code { | ||
| 21 … | + border: none | ||
| 22 … | + } | ||
| 23 … | + } | ||
| 24 … | + (code) { | ||
| 25 … | + background-color: #f5f5f5 | ||
| 26 … | + color: #c121dc | ||
| 27 … | + padding: 0.1rem .2rem | ||
| 28 … | + border: 1px solid #e6e6e6 | ||
| 29 … | + border-radius: 2px | ||
| 30 … | + } | ||
| 31 … | + | ||
| 32 … | + blockquote { | ||
| 33 … | + color: #666 | ||
| 34 … | + font-style: italic | ||
| 35 … | + font-size: 1rem | ||
| 36 … | + | ||
| 37 … | + p { | ||
| 38 … | + :last-child { | ||
| 39 … | + margin-bottom: .35ex | ||
| 40 … | + } | ||
| 41 … | + } | ||
| 42 … | + } | ||
| 43 … | + | ||
| 44 … | + ul, ol { | ||
| 4 | 45 … | padding-left: 1rem | |
| 5 | - (ul) { | ||
| 46 … | + margin-top: .35rem | ||
| 47 … | + | ||
| 48 … | + (ul, ol) { | ||
| 6 | 49 … | padding-left: 1.5rem | |
| 7 | 50 … | } | |
| 8 | 51 … | ||
| 9 | 52 … | } | |
| @@ -14,6 +57,27 @@ | |||
| 14 | 57 … | list-style-type: none | |
| 15 | 58 … | } | |
| 16 | 59 … | } | |
| 17 | 60 … | ||
| 18 | -} | ||
| 19 | 61 … | ||
| 62 … | + (img.emoji) { | ||
| 63 … | + height: 1.2em | ||
| 64 … | + width: 1.2em | ||
| 65 … | + vertical-align: middle | ||
| 66 … | + margin-top: -0.2em | ||
| 67 … | + } | ||
| 68 … | + | ||
| 69 … | + | ||
| 70 … | + h1, h2, h3, h4, h5, h6 { | ||
| 71 … | + margin: 0 | ||
| 72 … | + } | ||
| 73 … | + h1, h2 { | ||
| 74 … | + margin-bottom: .5em | ||
| 75 … | + } | ||
| 76 … | + h1 { font-size: 1.4rem } | ||
| 77 … | + h2 { font-size: 1.2em } | ||
| 78 … | + h3 { font-size: 1.15rem } | ||
| 79 … | + h4 { font-size: 1.12rem } | ||
| 80 … | + h5 { font-size: 1.1rem } | ||
| 81 … | + h6 { font-size: 1rem } | ||
| 82 … | + } | ||
| 83 … | + | ||
| app/styles/mcss/lightbox.mcss | ||
|---|---|---|
| @@ -1,0 +1,20 @@ | ||
| 1 … | +/* lightbox - used in message-confirm */ | |
| 2 … | + | |
| 3 … | +body { | |
| 4 … | + div.lightbox { | |
| 5 … | + position: fixed | |
| 6 … | + left: 0px | |
| 7 … | + right: 0px | |
| 8 … | + top: 50px | |
| 9 … | + overflow: auto | |
| 10 … | + width: 780px | |
| 11 … | + max-width: 100% | |
| 12 … | + padding: 25px | |
| 13 … | + margin: auto | |
| 14 … | + z-index: 2 | |
| 15 … | + background: #f5f5f5 | |
| 16 … | + border: 1px solid #eee | |
| 17 … | + border-radius: .2em | |
| 18 … | + } | |
| 19 … | +} | |
| 20 … | + | |
Built with git-ssb-web