Revision 3412:a07474dc68c1,
2.5 KB
checked in by franck <carnet.franck.paul@…>, 9 years ago
(diff) |
Separate dashboard items boxes (usually official DC infos/links) from dashboard contents boxes (usually 3rd party plugins), get advantage of flexbox system to display all of them
|
Rev | Line | |
---|
[3355] | 1 | #dashboard-main { |
---|
[3398] | 2 | text-align: center; |
---|
[3355] | 3 | } |
---|
| 4 | |
---|
| 5 | |
---|
| 6 | /* raccourcis */ |
---|
| 7 | |
---|
| 8 | #icons { |
---|
[3398] | 9 | // overflow: hidden; |
---|
| 10 | // text-align: center; |
---|
| 11 | display: flex; |
---|
| 12 | flex-wrap: wrap; |
---|
| 13 | justify-content: center; |
---|
[3355] | 14 | } |
---|
| 15 | |
---|
| 16 | #icons p { |
---|
[3398] | 17 | width: 13em; |
---|
| 18 | text-align: center; |
---|
| 19 | margin: 1em 0 2em; |
---|
| 20 | // display: inline-block; |
---|
| 21 | // vertical-align: top; |
---|
[3355] | 22 | } |
---|
| 23 | |
---|
| 24 | #icons a, |
---|
| 25 | #icons a:link, |
---|
| 26 | #icons a:visited, |
---|
| 27 | #icons a:hover, |
---|
| 28 | #icons a:focus { |
---|
[3398] | 29 | border-bottom-width: 0; |
---|
| 30 | text-decoration: none; |
---|
[3355] | 31 | } |
---|
| 32 | |
---|
| 33 | #icons a span { |
---|
[3398] | 34 | border-bottom: 1px dotted #999; |
---|
| 35 | color: #333; |
---|
[3355] | 36 | } |
---|
| 37 | |
---|
| 38 | #icons a img { |
---|
[3398] | 39 | padding: 1.5em; |
---|
| 40 | background-color: #f9f9f9; |
---|
| 41 | border-radius: 8px; |
---|
| 42 | border: 1px solid #dadada; |
---|
| 43 | display: inline-block; |
---|
[3355] | 44 | } |
---|
| 45 | |
---|
| 46 | #icons a:focus img, |
---|
| 47 | #icons a:hover img { |
---|
[3398] | 48 | background: #bee74b; |
---|
| 49 | outline: 0; |
---|
| 50 | border-color: #dadada; |
---|
[3355] | 51 | } |
---|
| 52 | |
---|
| 53 | #icons a:focus { |
---|
[3398] | 54 | outline: 0; |
---|
| 55 | border-color: #fff; |
---|
[3355] | 56 | } |
---|
| 57 | |
---|
| 58 | #icons a:hover span, |
---|
| 59 | #icons a:focus span { |
---|
[3398] | 60 | border-bottom-style: solid; |
---|
[3355] | 61 | } |
---|
| 62 | |
---|
| 63 | #icons a:focus span { |
---|
[3398] | 64 | border: 2px solid #bee74b; |
---|
[3355] | 65 | } |
---|
| 66 | |
---|
| 67 | |
---|
| 68 | /* billet rapide */ |
---|
| 69 | |
---|
| 70 | #quick { |
---|
[3398] | 71 | padding: 1em; |
---|
| 72 | max-width: 976px; |
---|
| 73 | margin: 0 auto; |
---|
| 74 | background: #f5f5f5; |
---|
| 75 | box-shadow: 0 1px 2px rgba(0, 0, 0, .2); |
---|
| 76 | text-align: left; |
---|
[3355] | 77 | } |
---|
| 78 | |
---|
| 79 | #quick h3 { |
---|
[3398] | 80 | margin-bottom: 0.2em; |
---|
| 81 | font-size: 1.2em; |
---|
[3355] | 82 | } |
---|
| 83 | |
---|
| 84 | #quick p.qinfo { |
---|
[3398] | 85 | margin: -.7em -1em 1em; |
---|
| 86 | background: #D9EDF7 url(info.png) no-repeat .2em .2em; |
---|
| 87 | border: 1px solid #BCE8F1; |
---|
| 88 | padding: .2em 1em .1em 24px; |
---|
| 89 | color: #000; |
---|
[3355] | 90 | } |
---|
| 91 | |
---|
| 92 | #quick #new_cat, |
---|
| 93 | .q-cat, |
---|
| 94 | .q-cat label { |
---|
[3398] | 95 | display: inline-block; |
---|
| 96 | vertical-align: top; |
---|
| 97 | margin-right: 1em; |
---|
| 98 | margin-top: 0; |
---|
[3355] | 99 | } |
---|
| 100 | |
---|
| 101 | .q-cat label { |
---|
[3398] | 102 | margin-right: .3em; |
---|
[3355] | 103 | } |
---|
| 104 | |
---|
| 105 | #quick #new_cat { |
---|
[3398] | 106 | margin-bottom: 2em; |
---|
[3355] | 107 | } |
---|
| 108 | |
---|
| 109 | |
---|
| 110 | /* modules additionnels */ |
---|
| 111 | |
---|
| 112 | #dashboard-boxes { |
---|
[3398] | 113 | margin: 1em auto 1em; |
---|
| 114 | padding-top: 2em; |
---|
| 115 | display: flex; |
---|
| 116 | flex-wrap: wrap; |
---|
| 117 | justify-content: center; |
---|
[3355] | 118 | } |
---|
| 119 | |
---|
| 120 | .db-items, |
---|
| 121 | .db-contents { |
---|
[3398] | 122 | // display: inline-block; |
---|
| 123 | // text-align: center; |
---|
[3412] | 124 | display: flex; |
---|
| 125 | flex-wrap: wrap; |
---|
| 126 | justify-content: center; |
---|
| 127 | flex: 1 1 auto; |
---|
[3355] | 128 | } |
---|
| 129 | |
---|
| 130 | .no-js .outgoing img { |
---|
[3398] | 131 | display: none; |
---|
[3355] | 132 | } |
---|
| 133 | |
---|
| 134 | #dashboard-boxes .box { |
---|
[3398] | 135 | padding: 10px; |
---|
| 136 | border: 1px solid #ccc; |
---|
| 137 | border-radius: 3px; |
---|
| 138 | min-height: 200px; |
---|
| 139 | margin: 10px; |
---|
| 140 | text-align: left; |
---|
[3355] | 141 | } |
---|
| 142 | |
---|
| 143 | .dc-box { |
---|
[3398] | 144 | background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right; |
---|
[3355] | 145 | } |
---|
| 146 | |
---|
| 147 | .db-items img, |
---|
| 148 | .db-contents img { |
---|
[3398] | 149 | vertical-align: middle; |
---|
[3355] | 150 | } |
---|
| 151 | |
---|
| 152 | .db-items ul, |
---|
| 153 | .db-contents ul { |
---|
[3398] | 154 | display: block; |
---|
| 155 | padding-left: 1.5em; |
---|
| 156 | list-style: square; |
---|
[3355] | 157 | } |
---|
| 158 | |
---|
| 159 | .db-items li, |
---|
| 160 | .db-contents li { |
---|
[3398] | 161 | margin: 0.25em 0 0 0; |
---|
[3355] | 162 | } |
---|
| 163 | |
---|
| 164 | #news dt { |
---|
[3398] | 165 | font-weight: bold; |
---|
| 166 | margin: 0 0 0.4em 0; |
---|
[3355] | 167 | } |
---|
| 168 | |
---|
| 169 | #news dd { |
---|
[3398] | 170 | margin: 0 0 1em 0; |
---|
[3355] | 171 | } |
---|
| 172 | |
---|
| 173 | #news dd p { |
---|
[3398] | 174 | margin: 0.2em 0 0 0; |
---|
[3355] | 175 | } |
---|
| 176 | |
---|
| 177 | |
---|
| 178 | /* message de mise à jour */ |
---|
| 179 | |
---|
| 180 | #upg-notify ul { |
---|
[3398] | 181 | padding-left: 1.5em; |
---|
[3355] | 182 | } |
---|
| 183 | |
---|
| 184 | #upg-notify li { |
---|
[3398] | 185 | color: #fff; |
---|
[3355] | 186 | } |
---|
Note: See
TracBrowser
for help on using the repository browser.