Commit 49f00a17 authored by Zéfling's avatar Zéfling 🎨
Browse files

Change styles

parent bb2a2cc4
......@@ -3,10 +3,12 @@
<nav>
<ul>
<li>
<a routerLink="/tweets">Tweets</a>
<a routerLink="/tweets"
routerLinkActive="active-link">Tweets</a>
</li>
<li>
<a routerLink="/moments">Moments</a>
<a routerLink="/moments"
routerLinkActive="active-link">Moments</a>
</li>
</ul>
<div *ngIf="multi">
......
......@@ -5,6 +5,21 @@ body {
font-family: Arial, Helvetica, sans-serif;
}
a {
color : var(--item-color);
text-decoration: none;
&:hover {
color : var(--item-color-hover);
text-decoration: underline;
}
&.active-link{
color : var(--item-color-selected);
}
}
footer,
header {
ul {
......@@ -15,8 +30,7 @@ header {
li {
padding: 3px;
border: 1px solid var(--panel-bd-color);
background-color: var(--panel-bg-color);
margin: 0 3px;
}
}
}
......@@ -24,6 +38,10 @@ header {
nav {
display: flex;
justify-content: space-between;
background: #D7D7D7;
box-shadow: 0 0 7px 3px rgba(0,0,0, .5);
margin-bottom: 8px;
padding: 3px;
}
footer li {
......
......@@ -33,7 +33,7 @@
display: flex;
flex-direction: column-reverse;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
box-shadow: var(--panel-shadow);
padding: 5px;
margin: 5px;
......@@ -61,6 +61,10 @@
align-items: end;
background-color: var(--item-bd-empty-color);
transition: background-color .4s;
&:hover span {
background-color: var(--item-color-hover);
}
}
span {
......@@ -81,6 +85,10 @@
.selected {
background-color: var(--item-bd-hover-color);
span {
background-color: var(--item-color-selected);
}
}
.disabled {
......@@ -108,20 +116,20 @@
.tweet {
display: block;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
margin: 5px;
padding: 5px;
box-shadow: var(--panel-shadow);
margin: 5px 5px 12px 5px;
}
.tweet-text {
padding: 5px;
white-space: pre-wrap;
}
.tweet-infos {
border-bottom: 1px solid rgb(194, 194, 194);
padding-bottom: 3px;
margin-bottom: 3px;
font-size: 85%;
background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0, 0, 0, 0.025));
margin:0 0 3px 0;
padding: 5px;
time::before {
content: ' - ';
......@@ -134,12 +142,19 @@
align-content: center;
justify-content: center;
align-items: center;
padding: 5px;
img {
max-width: calc(25% - 20px);
height: auto;
margin: 3px;
box-shadow: 2px 2px 4px rgba(0,0,0, .5);
transition: all .4s;
cursor: pointer;
&:hover {
box-shadow: 2px 2px 4px rgba(0,0,0, .9);
}
}
video {
......@@ -150,10 +165,10 @@
}
.tweet-actions {
border-top: 1px solid rgb(194, 194, 194);
padding-top: 3px;
margin-top: 3px;
font-size: 85%;
background: rgba(0,0,0,.1);
margin: 3px 0 0 0;
padding: 5px;
text-align: right;
}
......@@ -161,15 +176,15 @@
grid-area: e;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
box-shadow: var(--panel-shadow);
position: relative;
margin: 5px;
padding: 3px;
text-align: center;
input {
margin: 2px;
padding: 2px 5px;
width: calc(100% - 4px);
width: 100%;
display: block;
}
}
......@@ -177,8 +192,9 @@
.month-calendar {
grid-area: f;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
box-shadow: var(--panel-shadow);
margin: 5px;
padding: 3px;
table {
width: 100%;
......@@ -196,21 +212,33 @@
}
td:not(.current) {
color: #AAA;
color: #CBCBCB;
}
td.with-tweets {
background: #AAA;
background: #D2D2D2;
cursor: pointer;
}
}
a {
display: block;
height: 18px;
}
}
.filter {
grid-area: g;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
box-shadow: var(--panel-shadow);
margin: 5px;
padding: 3px;
}
}
\ No newline at end of file
.month-calendar,
.filter {
& > div {
background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0, 0, 0, 0.025));
margin: -5px -5px 3px -5px;
padding: 5px;
}
}
......@@ -3,10 +3,13 @@
:root{
--panel-bg-color: rgb(237, 237, 237);
--panel-bd-color: rgb(188, 188, 188);
--panel-shadow : 0 0 6px -1px rgba(0,0,0, 0.5);
--item-bd-color: rgb(0, 0, 0, .1);
--item-bd-empty-color: rgb(0, 0, 0, .05);
--item-bd-disable-color: rgb(0, 0, 0, .01);
--item-bd-hover-color: rgb(0, 0, 0, .2);
--item-color: rgb(165, 113, 154);
--item-color: #1a38dd;
--item-color-hover: #12570e;
--item-color-selected: #be14f3
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment