|
|
1行目: |
1行目: |
| #body {
| |
| width: 598px;
| |
| margin: 0;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| border: 1px solid rgb(239, 243, 244);
| |
| color: rgb(15, 20, 25);
| |
| font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
| |
| font-size: 15px;
| |
| line-height: 20px;
| |
| }
| |
|
| |
|
| .svg {
| |
| display: flex;
| |
| width: 18.75px;
| |
| height: 18.75px;
| |
| justify-content: center;
| |
| align-items: center;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #header {
| |
| padding: 5.5px 0;
| |
| }
| |
|
| |
| #first_elem_in_header {
| |
| position: absolute;
| |
| display: flex;
| |
| width: 598px;
| |
| height: 47.5px;
| |
| padding-left: 8px;
| |
| background-color: rgb(255, 255, 255);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #go_back_button_wrapper {
| |
| display: flex;
| |
| width: 34px;
| |
| height: 34px;
| |
| margin-right: 30px;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
|
| |
| #go_back_button {
| |
| width: 20px;
| |
| height: 20px;
| |
| }
| |
|
| |
| #header_account {
| |
| height: 27px;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #header_posts_count {
| |
| height: 16px;
| |
| color: rgb(83, 100, 113);
| |
| font-size: 13px;
| |
| }
| |
|
| |
| #header_pic {
| |
| width: 100%;
| |
| height: 198.333px;
| |
| background-color: rgb(207, 217, 222);
| |
| }
| |
|
| |
| #header_profile {
| |
| position: relative;
| |
| width: 100%;
| |
| margin-top: 12px;
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| #profile_pic_wrapper {
| |
| position: absolute;
| |
| top: -82.75px;
| |
| left: 16px;
| |
| width: 145.5px;
| |
| height: 145.5px;
| |
| border-radius: 50%;
| |
| background-color: rgb(255, 255, 255);
| |
| z-index: 2;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #profile_pic {
| |
| position: absolute;
| |
| top: 6px;
| |
| left: 6px;
| |
| width: 133.5px;
| |
| height: 133.5px;
| |
| border-radius: 50%;
| |
| z-index: -1;
| |
| }
| |
|
| |
| #profile_buttons_wrapper_outer {
| |
| position: relative;
| |
| margin: 0 auto;
| |
| padding-left: 16px;
| |
| width: 566px;
| |
| height: 68.6px
| |
| }
| |
|
| |
| #profile_buttons_wrapper {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| display: flex;
| |
| width: 138px;
| |
| height: 48px;
| |
| margin-right: 16px;
| |
| }
| |
|
| |
| #more_options_button {
| |
| position: relative;
| |
| display: flex;
| |
| width: 34px;
| |
| min-width: 34px;
| |
| height: 34px;
| |
| margin-top: 12px;
| |
| border: 1px solid rgb(239, 243, 244);
| |
| border-radius: 50%;
| |
| justify-content: center;
| |
| align-items: center;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #more_options_svg {
| |
| display: inline;
| |
| text-align: center;
| |
| vertical-align: middle;
| |
| }
| |
|
| |
| #follow_button {
| |
| position: relative;
| |
| display: flex;
| |
| margin: 12px 16px;
| |
| width: 94px;
| |
| min-width: 94px;
| |
| height: 36px;
| |
| border-radius: 9999px;
| |
| background-color: rgb(15, 20, 25);
| |
| color: rgb(255, 255, 255);
| |
| font-weight: 700;
| |
| justify-content: center;
| |
| align-items: center;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| #profile_account_screen_wrapper {
| |
| width: 566px;
| |
| height: 52.5px;
| |
| margin-top: 4px;
| |
| margin-bottom: 12px;
| |
| padding-left: 16px;
| |
| }
| |
|
| |
| #profile_account {
| |
| height: 27px;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #profile_screen {
| |
| height: 20px;
| |
| color: rgb(83, 100, 113);
| |
| }
| |
|
| |
| #profile_bio {
| |
| margin-bottom: 12px;
| |
| padding-left: 16px;
| |
| }
| |
|
| |
| #profile_since_when {
| |
| display: flex;
| |
| margin-bottom: 12px;
| |
| padding-left: 16px;
| |
| }
| |
|
| |
| #since_when_svg {
| |
| margin-right: 4px;
| |
| cursor: default;
| |
| }
| |
|
| |
| #since_when_text {
| |
| color: rgb(83, 100, 113);
| |
| }
| |
|
| |
| #profile_following_followers_count_wrappers_wrapper {
| |
| display: flex;
| |
| color: rgb(83, 100, 113);
| |
| padding-left: 16px;
| |
| }
| |
|
| |
| #following_count_wrapper {
| |
| margin-right: 20px;
| |
| }
| |
|
| |
| #following_count,
| |
| #followers_count {
| |
| font-weight: 700;
| |
| color: rgb(15, 20, 25);
| |
| }
| |
|
| |
| #followers_i_know {
| |
| height: 20px;
| |
| margin-top: 12px;
| |
| margin-left: 16px;
| |
| font-size: 13px;
| |
| color: rgb(83, 100, 113);
| |
| }
| |
|
| |
| #navigation {
| |
| display: flex;
| |
| width: 100%;
| |
| height: 53px;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #navigation_posts,
| |
| #navigation_replies,
| |
| #navigation_media,
| |
| #navigation_likes {
| |
| display: flex;
| |
| height: 100%;
| |
| color: rgb(83, 100, 113);
| |
| margin: 0 16px;
| |
| justify-content: center;
| |
| align-items: flex-end;
| |
| }
| |
|
| |
| #navigation_posts {
| |
| width: 117.5px;
| |
| color: rgb(15, 20, 25);
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #navigation_replies {
| |
| width: 102.5px;
| |
| }
| |
|
| |
| #navigation_media {
| |
| width: 132.5px;
| |
| }
| |
|
| |
| #navigation_likes {
| |
| width: 117.5px;
| |
| }
| |
|
| |
| #navigation_border {
| |
| position: absolute;
| |
| top: 323px;
| |
| left: 45.5px;
| |
| width: 56px;
| |
| height: 4px;
| |
| border-radius: 9999px;
| |
| background-color: rgb(29, 155, 240);
| |
| }
| |
|
| |
| .posts {
| |
| position: relative;
| |
| display: flex;
| |
| padding: 12px;
| |
| padding-bottom: 0px;
| |
| border-top: 1px solid rgb(239, 243, 244);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .second_elems_in_post {
| |
| width: 100%;
| |
| }
| |
|
| |
| .posts_info {
| |
| margin-left: 12px;
| |
| }
| |
|
| |
| .posts_author_account {
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .posts_author_screen,
| |
| .posts_screen_date_separator,
| |
| .posts_date {
| |
| margin-left: 4px;
| |
| color: rgb(83, 100, 113);
| |
| }
| |
|
| |
| .posts_text {
| |
| margin: 6px 12px;
| |
| }
| |
|
| |
| .posts_icons_wrapper {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| width: 100%;
| |
| height: 34.75px;
| |
| }
| |
|
| |
| .icon_wrappers {
| |
| display: flex;
| |
| width: 40.0333px;
| |
| height: 34.75px;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
|
| |
| .replies_icons_path {
| |
| width: 16.0333px;
| |
| height: 15.4167px;
| |
| }
| |
|
| |
| .reposts_icons_path {
| |
| width: 18.65px;
| |
| height: 12.7167px
| |
| }
| |
|
| |
| .likes_icons_path {
| |
| width: 15.6833px;
| |
| height: 13.8167px;
| |
| }
| |
|
| |
| .views_icons_path {
| |
| width: 12.5167px;
| |
| height: 14.0833px;
| |
| }
| |
|
| |
| .share_icons_path {
| |
| width: 14.0834px;
| |
| height: 14.4px;
| |
| }
| |