.feed { padding: 0px 20px 50px; max-width: 1000px; margin: auto; } .feed__title { font-size: 20px; font-weight: 600; padding: 40px 20px; color: #333; } .add-feed { display: inline-block; vertical-align: top; text-decoration: none; color: inherit; margin: 20px 0; } .add-feed__image { display: inline-block; vertical-align: middle; width: 50px; height: 50px; border-radius: 3px; overflow: hidden; margin-right: 15px; } .add-feed__image img { width: 100%; height: 100%; } .add-feed__text { display: inline-block; vertical-align: middle; color: #2c9cdc; font-size: 13px; } .feed-item { position: relative; color: #333; padding: 15px 20px 33px 85px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #fff; } .feed-item + .feed-item { border-top: 1px solid #F3F3F3; } .feed-item:first-child { border-top-right-radius: 2px; border-top-left-radius: 2px; } .feed-item:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } .feed-item__avatar { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } .feed-item__avatar img { width: 100%; height: auto; } .feed-item_editor { padding: 20px 20px 20px 85px; } .feed-item__bar { font-size: 13px; line-height: 1.7; color: #999; } .feed-item__bar span { display: inline-block; margin-right: 4px; } .feed-item__author { font-size: 14px; color: #333; font-weight: 600; } .feed-item__text { font-size: 14px; line-height: 1.5; margin-bottom: 20px; } .feed-item__text:last-child { margin-bottom: 0; } .feed-item__text_big { font-size: 18px; margin-bottom: 28px; } .feed-item__title { font-size: 22px; line-height: 1.4; margin-bottom: 20px; } .feed-item__title:last-child { margin-bottom: 0; } .feed-item__link { display: inline-block; text-decoration: none; color: #2c9cdc; font-size: 14px; } .feed-item__img { margin-bottom: 31px; } .feed-item__img:last-child { margin-bottom: 0; } .feed-item__img img { width: auto; height: auto; max-width: 100%; border-radius: 5px; } .feed-item-insert { max-width: 636px; height: 120px; border-radius: 8px; overflow: hidden; border: 1px solid #f3f3f3; cursor: pointer; transition: all .15s; } .feed-item-insert:hover { border-color: #ddd; } .feed-item-insert.show { height: auto; } .feed-item-insert.show .feed-item-insert__img { display: none; } .feed-item-insert.show .feed-item-insert__desc { margin-left: 0; } .feed-item-insert.show .feed-item-insert__hidden { display: block; } .feed-item-insert__hidden { display: none; } .feed-item-insert__img { display: inline-block; width: 120px; height: 120px; overflow: hidden; float: left; } .feed-item-insert__img img { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .feed-item-insert__desc { margin-left: 120px; padding: 8px 20px 13px; } .feed-item-insert__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .feed-item-insert__text { font-size: 14px; line-height: 1.4; margin-bottom: 9px; max-height: 60px; overflow: hidden; } .feed-item-insert__link { color: #999; font-size: 14px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .feed-editor__field { position: relative; } .feed-editor__textarea { font-family: 'Open Sans', sans-serif; width: 100%; max-width: 100%; resize: none; border: 1px solid #2c9cdc; background: #F2FAFD; border-radius: 3px; max-height: 100px; height: 100px; font-size: 15px; padding: 12px; margin: 0; } .feed-editor__textarea:focus { max-height: 100px; height: 100px; } .feed-editor__textarea::-webkit-input-placeholder { color: #2c9cdc; } .feed-editor__textarea::-moz-placeholder { color: #2c9cdc; } .feed-editor__textarea:-moz-placeholder { color: #2c9cdc; } .feed-editor__textarea:-ms-input-placeholder { color: #2c9cdc; } .feed-editor__textarea:focus::-webkit-input-placeholder { color: #ceedff; } .feed-editor__textarea:focus::-moz-placeholder { color: #ceedff; } .feed-editor__textarea:focus:-moz-placeholder { color: #ceedff; } .feed-editor__textarea:focus:-ms-input-placeholder { color: #ceedff; } .feed-editor__panel { margin-top: 13px; } .feed-editor__btn { position: relative; cursor: pointer; display: inline-block; vertical-align: top; width: 36px; height: 36px; line-height: 32px; border-radius: 3px; text-align: center; border: 1px solid transparent; transition: border .15s; } .feed-editor__btn i { font-size: 20px; vertical-align: middle; color: #2c9cdc; } .feed-editor__btn.active { border: 1px solid #eee; } .feed-editor__btn:hover { border: 1px solid #eee; } .feed-editor__popup-min { display: none; width: 40px; position: absolute; right: -45px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1); background: #fff; border-radius: 3px; z-index: 1; } .feed-editor__popup-min .item { cursor: pointer; text-align: center; line-height: 36px; } .feed-editor__popup-min .item:first-child { border-radius: 3px 3px 0 0; } .feed-editor__popup-min .item:last-child { border-radius: 0 0 3px 3px; } .feed-editor__popup-min .item + .item { border-top: 1px solid #eee; } .feed-editor__popup-min .item:hover { background: #f8f8f8; } .size-15 { font-size: 15px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .feed-editor__right { float: right; } .feed-editor__popup-linked { display: none; height: 75px; padding: 10px 10px 20px; width: 200px; position: absolute; bottom: -80px; left: -20px; box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1); background: #fff; border-radius: 3px; z-index: 1; } .feed-editor__popup-linked .feed-editor__input { width: 100%; height: 28px; outline: none; border: 1px solid #f2f2f2; border-radius: 3px; padding: 0 10px; } .feed-editor__popup-linked .feed-editor__popup-link { display: inline-block; margin-top: 10px; font-size: 14px; text-decoration: none; color: #2c9cdc; } .feed-editor__symbols { display: inline-block; vertical-align: top; line-height: 36px; margin-right: 15px; font-size: 15px; color: #999; } .feed-editor__btn_square { display: inline-block; vertical-align: top; width: auto; padding: 0 20px; background: #ff8e41; color: #fff; font-size: 14px; height: 35px; line-height: 35px; border: none; } .feed-editor__btn_square:hover { border: none; } .feed-editor__group { position: relative; display: inline-block; vertical-align: top; } .feed-editor__upload { display: none; } .feed-editor__upload.show { display: block; margin-top: -3px; padding: 10px; border: 1px solid #dbf2ff; border-top: none; border-radius: 0 0 3px 3px; } .upload-photo { position: relative; display: inline-block; margin-right: 10px; width: 100px; height: 100px; border-radius: 3px; overflow: hidden; } .upload-photo .upload-close { cursor: pointer; position: absolute; top: 3px; right: 3px; color: #fff; text-shadow: 0 0 2px #000; font-size: 14px; } .upload-photo img { vertical-align: top; width: 100%; height: 100%; } .feed-editor__input-file { display: none; } .feed-editor__label { display: block; width: 34px; height: 34px; line-height: 32px; border-radius: 3px; vertical-align: top; cursor: pointer; } .feed_svg { position: relative; width: 20px; height: 20px; } .feed_svg_camera { top: 8px; } .feed_svg_youtube { top: 6px; width: 22px; height: 24px; } .feed_svg_link { top: 6px; width: 16px; height: 16px; } .feed_svg_fz { top: 7px; width: 22px; height: 22px; } @media screen and (max-width: 500px) { .feed-item__avatar { position: static; display: inline-block; vertical-align: top; width: 35px; height: 35px; margin-right: 10px; float: left; margin-bottom: 15px; } .feed-item__bar { position: relative; margin-bottom: 15px; } .feed-item__author, .feed-item__time { line-height: 1.4; margin-left: 35px; display: block !important; } .feed-item__author { position: relative; top: -2px; } .feed-item { padding-left: 20px; } .feed-item-insert { height: auto; } .feed-item-insert__img { float: none; width: 100%; } .feed-item-insert__desc { margin-left: 0; } .feed-editor__right { float: none; margin-top: 10px; text-align: left; } .feed-editor__symbols { float: right; } }