Commit 71c38ab0 authored by Jordan Grossemy's avatar Jordan Grossemy
Browse files

Réseaux sociaux : homepages X et LinkedIn adaptées au thème clair/sombre 

Habillage pilote par variables CSS (--x-*, --li-*) surchargees selon
data-theme : X clair/sombre, LinkedIn clair/sombre.

Co-Authored-By: Claude (RCA)
parent 2250f91c

apps/web/src/styles.css

+88 −47
Original line number Diff line number Diff line
@@ -1685,32 +1685,55 @@ textarea { 
}



/* ---------- X (Twitter) ---------- */

/* Habillage pilote par variables : sombre par defaut, clair sous data-theme=light. */

.x-home {

  --x-bg: #000;

  --x-fg: #e7e9ea;

  --x-border: #2f3336;

  --x-muted: #71767b;

  --x-card: #16181c;

  --x-hover: #0a0a0a;

  --x-search: #202327;

  --x-post-bg: #eff3f4;

  --x-post-fg: #0f1419;



  display: grid;

  grid-template-columns: 260px minmax(0, 600px) 330px;

  justify-content: center;

  gap: 0;

  background: #000;

  color: #e7e9ea;

  background: var(--x-bg);

  color: var(--x-fg);

  border-radius: 14px;

  overflow: hidden;

  min-height: 640px;

}



:root[data-theme='light'] .x-home {

  --x-bg: #ffffff;

  --x-fg: #0f1419;

  --x-border: #eff3f4;

  --x-muted: #536471;

  --x-card: #f7f9f9;

  --x-hover: #f2f5f5;

  --x-search: #eff3f4;

  --x-post-bg: #0f1419;

  --x-post-fg: #ffffff;

}



.x-nav {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  padding: 10px 12px;

  border-right: 1px solid #2f3336;

  border-right: 1px solid var(--x-border);

}



.x-logo {

  font-size: 28px;

  font-weight: 900;

  padding: 6px 14px;

  color: #fff;

  color: var(--x-fg);

}



.x-nav-item {
@@ -1719,7 +1742,7 @@ textarea { 
  gap: 16px;

  background: transparent;

  border: none;

  color: #e7e9ea;

  color: var(--x-fg);

  font: inherit;

  font-size: 19px;

  padding: 10px 16px;
@@ -1730,7 +1753,7 @@ textarea { 
}



.x-nav-item:hover {

  background: #181818;

  background: var(--x-hover);

}



.x-nav-item .x-ic {
@@ -1740,8 +1763,8 @@ textarea { 
}



.x-post-btn {

  background: #eff3f4;

  color: #0f1419;

  background: var(--x-post-bg);

  color: var(--x-post-fg);

  border: none;

  border-radius: 30px;

  font: inherit;
@@ -1787,7 +1810,7 @@ textarea { 
}



.x-center {

  border-right: 1px solid #2f3336;

  border-right: 1px solid var(--x-border);

  min-width: 0;

}
@@ -1795,16 +1818,15 @@ textarea { 
  display: flex;

  position: sticky;

  top: 0;

  backdrop-filter: blur(6px);

  background: rgba(0, 0, 0, 0.65);

  border-bottom: 1px solid #2f3336;

  background: var(--x-bg);

  border-bottom: 1px solid var(--x-border);

}



.x-tabs button {

  flex: 1;

  background: transparent;

  border: none;

  color: #71767b;

  color: var(--x-muted);

  font: inherit;

  font-weight: 600;

  padding: 15px;
@@ -1812,7 +1834,7 @@ textarea { 
}



.x-tabs button.active {

  color: #e7e9ea;

  color: var(--x-fg);

  box-shadow: inset 0 -4px 0 #1d9bf0;

}
@@ -1821,7 +1843,7 @@ textarea { 
  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  border-bottom: 1px solid #2f3336;

  border-bottom: 1px solid var(--x-border);

}



.x-composer .pav {
@@ -1838,38 +1860,38 @@ textarea { 
.x-composer-in {

  flex: 1;

  font-size: 18px;

  color: #71767b;

  color: var(--x-muted);

}



.x-empty {

  padding: 28px 16px;

  color: #71767b;

  color: var(--x-muted);

}



/* Fil X : tweets a plat (separateurs), pas de carte arrondie. */

.x-feed .post.net-X {

  border: none;

  border-bottom: 1px solid #2f3336;

  border-bottom: 1px solid var(--x-border);

  border-radius: 0;

  background: transparent;

  color: #e7e9ea;

  color: var(--x-fg);

  padding: 12px 16px;

}



.x-feed .post.net-X:hover {

  background: #080808;

  background: var(--x-hover);

}



.x-feed .post.net-X .pn {

  color: #e7e9ea;

  color: var(--x-fg);

}



.x-feed .post.net-X .muted {

  color: #71767b;

  color: var(--x-muted);

}



.x-feed .post.net-X .x-actions {

  color: #71767b;

  color: var(--x-muted);

  max-width: 100%;

}
@@ -1881,15 +1903,15 @@ textarea { 
}



.x-search {

  background: #202327;

  color: #71767b;

  background: var(--x-search);

  color: var(--x-muted);

  border-radius: 30px;

  padding: 11px 16px;

  font-size: 14px;

}



.x-card {

  background: #16181c;

  background: var(--x-card);

  border-radius: 16px;

  padding: 14px 16px;

}
@@ -1903,7 +1925,7 @@ textarea { 
.x-card .muted,

.x-nav .muted,

.x-me .muted {

  color: #71767b;

  color: var(--x-muted);

}



.x-subscribe {
@@ -1957,8 +1979,8 @@ textarea { 
}



.x-follow {

  background: #eff3f4;

  color: #0f1419;

  background: var(--x-post-bg);

  color: var(--x-post-fg);

  border: none;

  border-radius: 30px;

  padding: 6px 16px;
@@ -1967,20 +1989,39 @@ textarea { 
}



/* ---------- LinkedIn ---------- */

/* Habillage pilote par variables : clair par defaut, sombre sous data-theme=dark. */

.li-home {

  background: #f4f2ee;

  --li-bg: #f4f2ee;

  --li-card: #ffffff;

  --li-border: #e8e8e8;

  --li-fg: #000000d9;

  --li-muted: #00000099;

  --li-nav: #ffffff;

  --li-search: #edf3f8;



  background: var(--li-bg);

  border-radius: 14px;

  overflow: hidden;

  min-height: 640px;

  color: #000000d9;

  color: var(--li-fg);

}



:root[data-theme='dark'] .li-home {

  --li-bg: #12161a;

  --li-card: #1b2127;

  --li-border: #38434f;

  --li-fg: #e9e6df;

  --li-muted: #a7b0b9;

  --li-nav: #1b2127;

  --li-search: #2b3339;

}



.li-topnav {

  display: flex;

  align-items: center;

  gap: 12px;

  background: #fff;

  border-bottom: 1px solid #e8e8e8;

  background: var(--li-nav);

  border-bottom: 1px solid var(--li-border);

  padding: 8px 16px;

  position: sticky;

  top: 0;
@@ -2001,10 +2042,10 @@ textarea { 
}



.li-search {

  background: #edf3f8;

  background: var(--li-search);

  border-radius: 6px;

  padding: 8px 12px;

  color: #666;

  color: var(--li-muted);

  font-size: 13px;

  width: 240px;

}
@@ -2022,7 +2063,7 @@ textarea { 
  gap: 2px;

  background: transparent;

  border: none;

  color: #666;

  color: var(--li-muted);

  font: inherit;

  font-size: 11px;

  padding: 4px 12px;
@@ -2046,8 +2087,8 @@ textarea { 
.li-composer,

.li-news,

.li-feed .post.net-LINKEDIN {

  background: #fff;

  border: 1px solid #e8e8e8;

  background: var(--li-card);

  border: 1px solid var(--li-border);

  border-radius: 10px;

}
@@ -2066,7 +2107,7 @@ textarea { 
  width: 64px;

  height: 64px;

  border-radius: 50%;

  border: 3px solid #fff;

  border: 3px solid var(--li-card);

  color: #fff;

  display: grid;

  place-items: center;
@@ -2132,18 +2173,18 @@ textarea { 


.li-composer-in {

  flex: 1;

  border: 1px solid #b0b0b0;

  border: 1px solid var(--li-border);

  border-radius: 30px;

  padding: 12px 16px;

  color: #666;

  color: var(--li-muted);

  font-size: 14px;

}



.li-composer-actions {

  display: flex;

  justify-content: space-around;

  background: #fff;

  border: 1px solid #e8e8e8;

  background: var(--li-card);

  border: 1px solid var(--li-border);

  border-radius: 10px;

  padding: 8px;

  font-size: 13px;
@@ -2157,16 +2198,16 @@ textarea { 
}



.li-feed .post.net-LINKEDIN {

  color: #000000d9;

  color: var(--li-fg);

  padding: 14px 16px;

}



.li-feed .post.net-LINKEDIN .muted {

  color: #00000099;

  color: var(--li-muted);

}



.li-feed .post.net-LINKEDIN .li-reactions {

  border-color: #e8e8e8;

  border-color: var(--li-border);

}



.li-news {
@@ -2189,7 +2230,7 @@ textarea { 
}



.li-dot {

  color: #666;

  color: var(--li-muted);

}



.li-foot {