universe

Universe
git clone https://git.dasho.dev/universe.git
Log | Files | Refs | Submodules | README

comments.css (8797B)

      1 .addComments {
      2  display: block;
      3  width: 100%;
      4  font-size: 14px;
      5  padding: 0 10px;
      6  margin-top: 15px;
      7  margin-bottom: 10px;
      8 }
      9 
     10 .addComments > .title {
     11  font-size: 22px;
     12  margin-bottom: 15px;
     13  color: #444;
     14 }
     15 
     16 .addComments > form.add-comment {
     17  display: block;
     18  width: 100%;
     19 }
     20 
     21 .addComments > form.add-comment > textarea {
     22  display: block;
     23  width: 100%;
     24  min-height: 150px;
     25  padding: 10px;
     26  background: #fff;
     27  font-family: roboto, helvetica, arial, tahoma, verdana;
     28  max-width: 100%;
     29  min-width: 100%;
     30  font-size: 14px;
     31  color: #000;
     32  margin-bottom: 10px;
     33  line-height: 18px;
     34  border: 1px solid #fff;
     35 }
     36 
     37 .addComments > form.add-comment > textarea:focus,
     38 .addComments > form.add-comment > textarea:active {
     39  border-color: #9b59b6;
     40 }
     41 
     42 .addComments > form.add-comment > button[type="submit"] {
     43  display: inline-block;
     44  vertical-align: top;
     45  height: 40px;
     46  line-height: 40px;
     47  padding: 0 30px;
     48  margin-bottom: 0;
     49  margin-right: 15px;
     50 }
     51 
     52 .addComments > form.add-comment > a {
     53  display: inline-block;
     54  vertical-align: top;
     55  height: 40px;
     56  line-height: 40px;
     57  text-decoration: none;
     58 }
     59 
     60 .postComments {
     61  display: block;
     62  width: 100%;
     63  padding: 0 10px;
     64  margin-top: 20px;
     65 }
     66 
     67 .postComments > .comment {
     68  margin-bottom: 5px;
     69 }
     70 
     71 .postComments .comment {
     72  display: block;
     73  width: 100%;
     74  position: relative;
     75  font-size: 0;
     76  background: #fff;
     77  padding: 10px;
     78 }
     79 
     80 .postComments .comment:target > .commentContent > .commentBody {
     81  background-color: #ffffe0;
     82  padding: 5px;
     83 }
     84 
     85 .postComments .comment > input[type="checkbox"] {
     86  position: absolute;
     87  top: 10px;
     88  left: 10px;
     89  margin: 0;
     90  opacity: 0;
     91  padding: 0;
     92  width: 20px;
     93  height: 20px;
     94  cursor: pointer;
     95 }
     96 
     97 .postComments .comment > .comment {
     98  border-left: 1px dashed #999;
     99  padding-top: 20px;
    100  margin-bottom: 0;
    101  margin-left: 10px;
    102 }
    103 
    104 .postComments .comment > .comment > input[type="checkbox"] {
    105  top: 20px;
    106 }
    107 
    108 .postComments .comment > .toggle {
    109  display: inline-block;
    110  vertical-align: top;
    111  width: 20px;
    112  height: 20px;
    113  margin-right: 5px;
    114  font-size: 18px;
    115  line-height: 20px;
    116  text-align: center;
    117  color: #fff;
    118  background: #666;
    119  -webkit-border-radius: 3px;
    120  -moz-border-radius: 3px;
    121  border-radius: 3px;
    122 }
    123 
    124 .postComments .comment > .toggle:before {
    125  content: "-";
    126 }
    127 
    128 .postComments .comment > input[type="checkbox"]:hover ~ .toggle {
    129  background: #9b59b6;
    130 }
    131 
    132 .postComments .comment > input[type="checkbox"]:checked ~ .toggle:before {
    133  content: "+";
    134 }
    135 
    136 .postComments
    137  .comment
    138  > input[type="checkbox"]:checked
    139  ~ .commentContent
    140  > .commentBody {
    141  display: none;
    142 }
    143 
    144 .postComments
    145  .comment
    146  > input[type="checkbox"]:checked
    147  ~ .commentContent
    148  > .actions {
    149  display: none;
    150 }
    151 
    152 .postComments .comment > input[type="checkbox"]:checked ~ .comment {
    153  display: none;
    154 }
    155 
    156 .postComments .comment > form.voting {
    157  display: inline-block;
    158  vertical-align: top;
    159  width: 30px;
    160  margin-right: 5px;
    161 }
    162 
    163 .postComments .comment > form.voting > button:last-child,
    164 .postComments .comment > form.voting > a:last-child {
    165  margin-bottom: 0;
    166 }
    167 
    168 .postComments .comment > .commentContent {
    169  display: inline-block;
    170  vertical-align: top;
    171  width: calc(100% - 60px);
    172  font-size: 14px;
    173 }
    174 
    175 .postComments .comment > .commentContent > .top {
    176  display: block;
    177  width: 100%;
    178  margin-bottom: 5px;
    179 }
    180 
    181 .postComments .comment > .commentContent > .top > .username {
    182  display: inline-block;
    183  vertical-align: middle;
    184  font-size: 14px;
    185  text-decoration: none;
    186  color: #9b59b6;
    187  font-weight: bold;
    188  margin-right: 5px;
    189 }
    190 
    191 .postComments .comment > .commentContent > .top > .username > .flair {
    192  background-color: #efefef;
    193  color: #000;
    194  display: inline-block;
    195  font-size: 12px;
    196  padding: 0 5px;
    197  vertical-align: middle;
    198  margin-left: 3px;
    199  -webkit-border-radius: 3px;
    200  -moz-border-radius: 3px;
    201  border-radius: 3px;
    202  font-weight: normal;
    203  line-height: 16px;
    204 }
    205 
    206 .postComments .comment > .commentContent > .top > .votes {
    207  display: inline-block;
    208  vertical-align: middle;
    209  font-size: 12px;
    210  color: #999;
    211  margin-right: 5px;
    212 }
    213 
    214 .postComments .comment > .commentContent > .top > .timestamp {
    215  display: inline-block;
    216  vertical-align: middle;
    217  font-size: 12px;
    218  color: #999;
    219 }
    220 
    221 .postComments .comment > .commentContent > .commentBody {
    222  margin-bottom: 5px;
    223  font-size: 14px;
    224  line-height: 18px;
    225  padding: 5px 0;
    226  -webkit-border-radius: 3px;
    227  -moz-border-radius: 3px;
    228  border-radius: 3px;
    229  overflow-x: hidden;
    230 }
    231 
    232 .postComments .comment > .commentContent > .actions {
    233  display: block;
    234  vertical-align: top;
    235  width: 100%;
    236  font-size: 0;
    237  position: relative;
    238 }
    239 
    240 .postComments .comment > .commentContent > .actions > a,
    241 .postComments .comment > .commentContent > .actions > button,
    242 .postComments .comment > .commentContent > .actions > div {
    243  display: inline-block;
    244  vertical-align: top;
    245  color: #666;
    246  font-size: 12px;
    247  padding: 0;
    248  outline: 0;
    249  border: none;
    250  background: none;
    251  cursor: pointer;
    252  text-decoration: none;
    253  margin: 0 15px 0 0;
    254  line-height: 16px;
    255  position: relative;
    256 }
    257 
    258 .postComments .comment > .commentContent > .actions > a:hover,
    259 .postComments .comment > .commentContent > .actions > button:hover,
    260 .postComments .comment > .commentContent > .actions > div:hover {
    261  color: #9b59b6;
    262 }
    263 
    264 .postComments .comment > .commentContent > .actions > a.replyTxt,
    265 .postComments .comment > .commentContent > .actions > button.replyTxt,
    266 .postComments .comment > .commentContent > .actions > div.replyTxt {
    267  width: 30px;
    268  height: 16px;
    269 }
    270 
    271 .postComments .comment > .commentContent > .actions > a.approve,
    272 .postComments .comment > .commentContent > .actions > a.ignore,
    273 .postComments .comment > .commentContent > .actions > button.approve,
    274 .postComments .comment > .commentContent > .actions > button.ignore,
    275 .postComments .comment > .commentContent > .actions > div.approve,
    276 .postComments .comment > .commentContent > .actions > div.ignore {
    277  height: 18px;
    278  line-height: 18px;
    279  padding: 0 5px;
    280  background: #e74c3c;
    281  -webkit-border-radius: 3px;
    282  -moz-border-radius: 3px;
    283  border-radius: 3px;
    284  color: #fff;
    285 }
    286 
    287 .postComments .comment > .commentContent > .actions > a.approve,
    288 .postComments .comment > .commentContent > .actions > button.approve,
    289 .postComments .comment > .commentContent > .actions > div.approve {
    290  background: #2ecc71;
    291 }
    292 
    293 .postComments
    294  .comment
    295  > .commentContent
    296  > .actions
    297  > input[type="checkbox"][name="toggleReply"] {
    298  position: absolute;
    299  top: 0;
    300  left: 0;
    301  width: 30px;
    302  height: 16px;
    303  opacity: 0;
    304  margin: 0;
    305  padding: 0;
    306  cursor: pointer;
    307  z-index: 5;
    308 }
    309 
    310 .postComments
    311  .comment
    312  > .commentContent
    313  > .actions
    314  > input[type="checkbox"][name="toggleReply"]:hover
    315  ~ .replyTxt {
    316  color: #9b59b6;
    317 }
    318 
    319 .postComments
    320  .comment
    321  > .commentContent
    322  > .actions
    323  > input[type="checkbox"][name="toggleReply"]:checked
    324  ~ .replyBox {
    325  display: block;
    326 }
    327 
    328 .postComments .comment > .commentContent > .actions > .replyBox {
    329  display: none;
    330  width: 100%;
    331  margin-top: 15px;
    332  padding: 10px;
    333  background: #efefed;
    334  cursor: initial;
    335  color: #666;
    336  position: relative;
    337 }
    338 
    339 .postComments .comment > .commentContent > .actions > .replyBox > textarea {
    340  display: block;
    341  width: 100%;
    342  padding: 10px;
    343  font-family: roboto, helvetica, arial, tahoma, verdana;
    344  font-size: 14px;
    345  color: #000;
    346  line-height: 18px;
    347  height: calc(38px * 2);
    348  min-height: calc(38px * 2);
    349  min-width: 100%;
    350  max-width: 100%;
    351  max-height: 250px;
    352  border: 1px solid #efefed;
    353  margin-bottom: 10px;
    354 }
    355 
    356 .postComments
    357  .comment
    358  > .commentContent
    359  > .actions
    360  > .replyBox
    361  > textarea:focus,
    362 .postComments
    363  .comment
    364  > .commentContent
    365  > .actions
    366  > .replyBox
    367  > textarea:active {
    368  border-color: #9b59b6;
    369 }
    370 
    371 .postComments .comment > .commentContent > .actions > .replyBox > a {
    372  display: inline-block;
    373  vertical-align: middle;
    374  height: 30px;
    375  line-height: 30px;
    376  margin-left: 15px;
    377  text-decoration: none;
    378  color: #9b59b6;
    379  font-size: 14px;
    380 }
    381 
    382 .postComments .comment > .commentContent > .actions > .replyBox > button {
    383  margin-bottom: 0;
    384 }
    385 
    386 .postComments .comment > .commentContent > .actions > .replyBox:hover {
    387  color: #666;
    388 }
    389 
    390 .postComments .comment > .commentContent > .actions > .replyBox:before {
    391  content: "";
    392  position: absolute;
    393  bottom: 100%;
    394  left: 5px;
    395  width: 0;
    396  height: 0;
    397  border-style: solid;
    398  border-width: 0 10px 10px 10px;
    399  border-color: transparent transparent #efefed transparent;
    400 }