olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css variables

Browse Source
This commit is contained in:
Tim Wijma
2022-11-02 15:36:49 +01:00
parent 1a6582a18a
commit 2aefeb2075
3 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard_static/index.html
View File

@@ -94,9 +94,10 @@
</div> </div>
<div class="rightcol column"> <div class="rightcol column">
<div class="searchcontainer column"> <div class="searchcontainer column">
<input class="searchbar" type="text" placeholder="SEARCH CLUCCS..."> <input class="searchbar" type="text" placeholder="Search Cluccs">
<input class="blockedwords" type="text" placeholder="Enter blocked words (separated by comma)">
<div class="button sort-btn"> <div class="button sort-btn">
<span class="sortby">SORT BY <span class="material-symbols-outlined">arrow_drop_down</span></span> <span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
<div class="sort-dropdown"> <div class="sort-dropdown">
<ul class="sort-dropdown-list"> <ul class="sort-dropdown-list">
<li>Time</li> <li>Time</li>
@@ -106,11 +107,10 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="button">BLOCKED WORDS</div> <!-- <div class="button">BLOCKED WORDS</div> -->
<div class="button">POPULARITY FILTER</div>
</div> </div>
<div class="popchart column"> <div class="popchart column">
<span class="colheader chartheader">Sports Popularity Filter</span> <span class="colheader chartheader">Sports Popularity Chart</span>
</div> </div>
</div> </div>
</div> </div>

26
dashboard_static/style/style.css
View File

@@ -22,7 +22,7 @@ body {
.container { .container {
background-color: var(--main-bg); background-color: var(--main-bg);
color: white; color: var(--main-dark);
padding: 16px 48px; padding: 16px 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -68,7 +68,7 @@ body {
height: 30px; height: 30px;
padding: 4px; padding: 4px;
margin-right: 8px; margin-right: 8px;
border: 1px solid white; border: 1px solid var(--main-light);
border-radius: 100px; border-radius: 100px;
cursor: pointer; cursor: pointer;
} }
@@ -122,19 +122,19 @@ body {
} }
.tweet-nickname { .tweet-nickname {
color: white; color: var(--main-light);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.tweet-nickname:active { .tweet-nickname:active {
color: white; color: var(--main-light);
text-decoration: underline; text-decoration: underline;
font-weight: bold; font-weight: bold;
} }
.tweet-username { .tweet-username {
color: white; color: var(--main-light);
text-decoration: none; text-decoration: none;
opacity: 0.8; opacity: 0.8;
} }
@@ -217,13 +217,13 @@ body {
} }
.searchbar { .searchbar, .blockedwords {
width: 100%; width: 100%;
} }
.searchbar, .button { .searchbar, .button, .blockedwords {
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 22px;
border-radius: 50px; border-radius: 50px;
padding: 8px; padding: 8px;
margin: 4px 8px; margin: 4px 8px;
@@ -231,9 +231,9 @@ body {
} }
.button { .button {
color: black; color: var(--main-dark);
cursor: pointer; cursor: pointer;
background-color: white; background-color: var(--main-light);
border-radius: 30px; border-radius: 30px;
border: none; border: none;
} }
@@ -254,7 +254,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-left: -8px; margin-left: -8px;
background-color: white; background-color: var(--main-light);
border-radius: 0 0 16px 16px; border-radius: 0 0 16px 16px;
} }
@@ -264,10 +264,6 @@ body {
padding: 0 8px; padding: 0 8px;
} }
.sort-dropdown-list li:hover {
background-color: #dddddd;
}
.radius-bottom { .radius-bottom {
border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px; border-bottom-right-radius: 16px;