3,314
回編集
編集の要約なし |
編集の要約なし |
||
1行目: | 1行目: | ||
#body { | |||
width: 598px; | |||
margin: 0; | |||
margin-left: auto; | |||
margin-right: auto; | |||
color: rgb(15, 20, 25); | |||
font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |||
font-size: 15px; | |||
line-height: 20px; | |||
} | |||
#header { | |||
padding: 5.5px 0; | |||
} | |||
#first_elem_in_header { | |||
position: absolute; | |||
display: flex; | |||
width: 598px; | |||
height: 47.5px; | |||
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; | |||
} | |||
#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%; | |||
} | |||
#profile_buttons_wrapper_outer { | |||
position: relative; | |||
margin: 0 auto; | |||
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-radius: 50%; | |||
justify-content: center; | |||
align-items: center; | |||
cursor: pointer; | |||
} | |||
#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; | |||
} | |||
#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; | |||
} | |||
#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: 343px; | |||
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; | |||
} | |||
.posts_prof_pics { | |||
width: 40px; | |||
height: 40px; | |||
border-radius: 50%; | |||
} | |||
.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; | |||
} |
回編集