css: split css into shape and color files

paveyry · Aug 22, 2019 · 76122b9 · 76122b9
1 parent 9c534a8
commit 76122b9
Show file tree

Hide file tree

Showing 3 changed files with 472 additions and 85 deletions.
diff --git a/css/color_slack.css b/css/color_slack.css
@@ -0,0 +1,108 @@
+/* Sidebar color */
+.X9KLPc {
+    background-color: #4d394b;
+}
+
+/* Sidebar elemtents bg color when hovering */
+.PL5Wwe:focus:not(.dQ2Tsf),
+.PL5Wwe:hover:not(.dQ2Tsf),
+.tuKyod .LoYJxb {
+    background-color: #3e313c;
+}
+
+/* Sidebar elements text color for chans with unread messages */
+.PL5Wwe.H7du2 .t5F5nf {
+    color: #fff;
+}
+
+/* Channel name color in sidebar */
+.t5F5nf {
+    color: rgb(202, 196, 201);
+}
+
+
+/* Sidebar "recent" or "starred" section names color */
+.aOHsTc {
+    color: rgb(202, 196, 201);
+}
+
+/* Sidebar Search section text color */
+.HLTcjb {
+    color: rgb(202, 196, 201);
+}
+.D3DXDc {
+    fill: rgb(202, 196, 201) !important;
+}
+
+/* Sidebar search button hovering bg color */
+.GbZFNe:focus, .GbZFNe:hover {
+    background-color: #3e313c;
+}
+
+/* Search Menu bg color */
+.yoV6yd {
+    background-color: #4d394b;
+}
+
+/* Search menu text color */
+.Uk0Bfe .zHQkBf, .Uk0Bfe .snByac, .dQ2Tsf .NXfF8b, .dQ2Tsf .ZTmjQb {
+    color: #000;
+}
+
+.ndJi5d {
+    rgba(0,0,0,0.38);
+}
+
+/* Search menu elements colors when hovering */
+.dQ2Tsf[aria-selected="true"], .PL5Wwe:hover > .dQ2Tsf {
+    background-color: #eee;
+    color: #fff
+}
+
+/* Search menu people list mail color */
+.dQ2Tsf[aria-selected="true"] .Kfe2Ub, .PL5Wwe:hover > .dQ2Tsf .Kfe2Ub {
+    color: #000;
+}
+
+/* Top left corner section (with title) background color */
+.Riuhhf {
+    background-color: #4d394b;
+}
+
+/* Chat top left logo text color */
+#XMLID_8_-Clipped{
+    opacity: 0.8 !important;
+    fill: #fff !important;
+}
+
+/* Time and menu buttons and clock for channels inactive and active colors */
+.sFuxxd {
+    color: rgb(202, 196, 201);
+}
+.PL5Wwe.H7du2 .sFuxxd {
+    color: #fff;
+}
+.DQy0Rb {
+    fill: rgb(202, 196, 201) !important;
+}
+.PL5Wwe.H7du2 .DQy0Rb {
+    fill: #fff !important;
+}
+.QeRfYe {
+    fill: rgb(202, 196, 201) !important;
+}
+.PL5Wwe.H7du2 .QeRfYe {
+    fill: #fff !important;
+}
+
+/* Make code snippets have slack colors */
+.FMTudf {
+    border: 1px solid #e0e0e0;
+    background: #f9f9f9;
+}
+
+/* Make inline pre have slack colors */
+.U8d2H {
+    background-color: #f7f7f9;
+    color: #d72b3f;
+}
diff --git a/css/shape.css b/css/shape.css
@@ -0,0 +1,263 @@
+/* Specify size for thread links */
+.threadlink {
+    font-size: 8px;
+}
+
+/* Reduce left and right margins in the chat area */
+.BEjUKc .cFc9ae {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: auto;
+    max-width:none;
+}
+.Bl2pUd {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+/* Reduce height of header bar */
+.DWzK6d, .gb_Uf > .gb_g, .gb_Uf, .Jrbdv {
+    height: 45px;
+}
+
+/* Reduce whitespace around New conversation button */
+.RnpT2b {
+    margin: 4px 0 4px 0;
+    min-height: 0px;
+}
+.IEIJqd {
+    padding-top: 0;
+}
+
+/* Allow messages to display full-width */
+.bzJiD .jGyvbd .QIJiHb, .bzJiD .jGyvbd .zX644e {
+    max-width: none;
+}
+
+/* Reduce top and bottom padding around date */
+.mCOR5e {
+    padding: 10px 0 0px 0;
+}
+
+/* Reduce right margin in sidebar */
+.n5yyEc {
+    margin-right: 4px;
+}
+
+/* Sidebar "recent" or "starred" section names text size */
+.aOHsTc {
+    font-size: 16px;
+    margin-left: 16px;
+}
+
+/* Search Menu shape and dimensions */
+.yoV6yd {
+    margin-top: -4px;
+    width: 100%;
+    border-radius: 0px;
+    -moz-border-radius: 0px
+}
+
+/* Search Menu "frequent" section text color and size */
+.wAR34c {
+    font-size: 16px;
+}
+
+/* Padding height between messages in a thread */
+.nF6pT {
+    padding-top: 4px;
+}
+
+/* Margins around Unread label */
+.YQsadf {
+    min-height: 20px;
+}
+
+/* Sidebar "recent" or "starred" section title padding height */
+.wJNchb, .nFzS9e {
+    margin-top: 10px;
+}
+
+/* Draw white line between the sidebar sections and reduce padding */
+.PL5Wwe + .wJNchb, .teTAFe:not(.fXx9Lc) + .vHL80e .aOHsTc {
+    border-top: solid 1px #e0e0e0;
+    padding-top: 6px;
+}
+
+/* Sidebar channels elements height */
+.LoYJxb {
+    height: 26px;
+}
+
+
+/* Vertically align triple dots buttons on
+channels in sidebar with the new height */
+.MhXXcc {
+    line-height: 26px;
+}
+.gsrV1e {
+    height: 22px;
+    width: 22px;
+}
+.QeRfYe .Lw7GHd {
+    margin: 2px 6px 0 6px;
+}
+
+/* Big emojis size */
+.Zc1Emd.NM3Nfc {
+    font-size: 24px;
+}
+
+/* Inline emojis size */
+img {
+    border: none;
+    font-size: 1.3em !important;
+}
+
+/* Reduce top margin in thread block */
+.dsoUjb {
+    padding: 8px 0;
+}
+
+/* Reduce size of reply button */
+.dCMjy {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+    margin-right: 36px;
+}
+
+/* Reduce space around blue NEW alert */
+.k1lILc {
+    padding: 5px 0 0;
+}
+.k1lILc + .ajCeRb {
+    padding-top: 5px;
+}
+
+/* Reduce space between thread blocks */
+.cZICLc {
+    margin-top: 6px;
+}
+
+/* Increase boldness of usenames in conversations */
+.Z4BnXb {
+    font-weight: 900;
+}
+
+/* Make code snippets look like slack's */
+.FMTudf {
+    font-family: Monaco,Menlo,Consolas,"Courier New",monospace !important;
+    font-size: .75rem;
+    margin: 1px 0;
+    padding: 3px 10px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+/* Reduce the height of collapsed message row */
+.zh742e {
+    padding-top: 0;
+}
+
+/* Reduce margin around reaction emojis */
+.SFMExc, .FIgEvc {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* Reduce margin around link previews */
+.V5MAMb {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* Reduce size of youtube previews */
+.uXftcc, .CXTVff {
+    height: 240px;
+    background-size: auto 240px;
+}
+.uXftcc {
+    width: 320px;
+}
+
+/* Reduce size of youtube videos */
+.uXftcc > .gntfhc, .CXTVff > .gntfhc {
+    height: 240px;
+    width: auto;
+}
+
+/* Reduce margin below lowest message in thread */
+.jGyvbd > .nF6pT:last-child, .zh742e:last-child {
+    padding-bottom: 10px;
+}
+
+/* Make inline pre look like slack's */
+.U8d2H {
+    font-family: Monaco,Menlo,Consolas,"Courier New",monospace !important;
+    margin: 0px;
+    padding: 1px 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+/* Reduce sidebar width */
+.X9KLPc, .Riuhhf {
+    width: 280px
+}
+
+/* Reduce margin above "Starred" label */
+.aOHsTc {
+    margin-top: 5px;
+}
+
+/* Fix emojis dimensions */
+.iiJ4W {
+    height: auto;
+    width: auto;
+    max-height: 1.2em;
+    max-width: 1.2em;
+    min-width: auto;
+}
+
+/* Reduce size of New conv button */
+.SfqTBc {
+    padding: 4px 18px 4px 12px;
+    min-height: 30px;
+}
+
+/* Reduce height of link and file previews */
+.Pj9rof { /* global block */
+    height: 140px;
+    width: 500px;
+}
+.tHcB6b { /* image container */
+    height: 100px;
+}
+.rNTKFb { /* image (for files) */
+    height: 100px;
+}
+.kmatHb { /* text */
+    font-size: 12px;
+    line-height: 13px;
+}
+.SXFjfb { /* text container */
+    height: 40px;
+    padding-top: 3px;
+    padding-left: 15px;
+}
+.VEWZeb { /* icon next to text */
+    height: 16px;
+    margin-right: 0px;
+    margin-top: 2px;
+}
+.SXFjfb.DoYruc { /* text when there is also a link */
+    padding-top: 3px;
+}
+.rNTKFb.Tvakkc, .tHcB6b .wU0G2b, .rNTKFb.Tvakkc + .bBukm /* image (for links) */ {
+    height: 100px !important;
+    width: auto !important;
+}