diff options
Diffstat (limited to 'src/app/components/feed/feed.component.css')
| -rw-r--r-- | src/app/components/feed/feed.component.css | 176 |
1 files changed, 12 insertions, 164 deletions
diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index cb155c6..295a379 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,179 +1,27 @@ -#feed-page { - height: 100%; - max-width: 40em; - box-sizing: border-box; - border: .5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; -} - -@media screen and (max-width: 750px) { - #profile-bar { - display: none !important; - } - #top-bar-profile-pic { - display: initial; - } -} -@media screen and (min-width: 750px) { - #profile-bar { - display: initial; - } - #top-bar-profile-pic { - display: none !important; - } -} - -/* Content */ - -#feed-content { - flex: 1; - display: flex; - flex-direction: column; -} - -/* Profile bar */ - -#profile-bar { - width: 20%; - height: fit-content; - display: flex; - flex-direction: column; - align-items: center; - - box-sizing: border-box; - background-color: var(--bg-color); - - margin-right: .5em; - padding-bottom: 1em; - padding: .5em; - border-radius: .6em; -} - -#profile-bar-profile-pic { - width: 7em; - height: 7em; - box-sizing: border-box; - padding: .5em; -} - -#profile-bar-name { - text-align: center; -} - -#profile-bar-username { - margin: .5em 0; -} - -#profile-bar > #profile-info { - display: flex; - flex-direction: column; - align-items: center; -} - -/* Top bar */ - -#top-bar { - display: flex; - flex-direction: column; - width: 98%; - margin: 0 auto; - margin-bottom: .5em; - box-sizing: border-box; -} - -#top-bar-profile-pic { - height: 2.5em; - width: 2.5em; - margin-right: .5em; -} - -#top-bar-profile-pic > img { - height: inherit; - width: inherit; -} - -#top-bar-open-chat { - /* Until implemented */ +section:empty { display: none; } -#main-content { - display: flex; -} - -/* Create post */ - -#create-post-form { - width: 100%; - position: relative; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -#form-inputs { - display: flex; -} - -#top-bar-create-post { - flex: 1; - font-size: inherit; +#create-post { width: 100%; - height: 100%; - margin: 0 auto; - box-sizing: border-box; - border: 2px solid var(--bg-color); - border-radius: .6em; -} - -#file-upload { - font-size: inherit; - color: transparent; - width: 1.5em; - height: 1.5em; + margin-top: 1em; } -#file-upload:hover { - cursor: pointer; +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; } -#file-upload::-webkit-file-upload-button { - visibility: hidden; +.file-button { + position: relative; } -#attachment-img { - height: 1.5em; - width: 1.5em; +.file-button > img { position: absolute; - right: .4em; pointer-events: none; } -/* Posts */ - -#no-posts-msg { - width: 100%; - margin-top: 1em; - color: gray; - text-align: center; -} - -/* Elements, that act as buttons */ - -#profile-bar > #profile-info:hover, -#top-bar-profile-pic:hover { - cursor: pointer; -} - -/* Can't copy text from */ - -#profile-bar, -.vote { - -webkit-user-select: none; /* Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+/Edge */ - user-select: none; /* Standard */ +.file-button > input { + font-size: inherit; + color: transparent; } |
