1- /**
2- * Any CSS included here will be global. The classic template
3- * bundles Infima by default. Infima is a CSS framework designed to
4- * work well for content-centric websites.
5- */
6-
71: root {
82 /* set hex colors here pls */
93 --aubergine : # 4a154b ;
10-
114 /* aubergine-active is used in light mode.
125 use something like #853c8c if you use as a link vs black text ( 3:1 contr) */
136 --aubergine-active : # 7c3085 ;
14-
15- /* aubergine-light is used in dark mode. #b681b5 is another one. i just made both up */
16- --aubergine-light : # ce70cc ;
17-
187 /* horchata is that beige color we use a lot */
198 --horchata : # f4ede4 ;
20-
21- /* slack-blue is 36C5F0. used for dark-mode links */
22- --slack-link : # 36c5f0 ;
23- --slack-blue : # 36c5f0 ;
9+ /* cloud blue from slack.dev. used for dark-mode links */
10+ --slack-cloud-blue : # 1ab9ff ;
2411 /* slack marketing color for links 1264A3. used for light-mode links */
2512 --slack-dark-blue : # 1264a3 ;
26-
27- --grey : # 868686 ;
28- --white : # FFFFFF ;
13+ --dim : # eef2f6 ;
2914}
3015
3116/* resets striped tables that hurt me eyes */
3217table tr : nth-child (even) {
3318 background-color : inherit;
3419}
3520
36- p a {
37- text-decoration : underline;
38- color : var (--slack-link );
21+ /* changing the links to blue for accessibility */
22+ p a , . markdown a {
23+ color : var (--slack-cloud-blue );
3924}
4025
41- .markdown a {
42- color : var (--slack-link );
43- text-decoration : underline;
26+ a : hover {
27+ color : var (--slack-cloud-blue );
4428}
4529
4630/* adjusting for light and dark modes */
4731[data-theme = "light" ] {
32+ --docusaurus-highlighted-code-line-bg : var (--dim );
4833 --ifm-color-primary : var (--aubergine-active );
4934 --ifm-footer-background-color : var (--horchata );
50- --slack-link : var (--slack-dark-blue );
35+ --ifm-footer-color : black;
36+ --slack-cloud-blue : var (--slack-dark-blue );
37+ --ifm-table-stripe-background : var (--horchata );
5138}
5239
5340[data-theme = "dark" ] {
54- --ifm-color-primary : var (--aubergine-light );
55- --ifm-navbar-background-color : var (--aubergine );
56- --ifm-footer-background-color : var (--aubergine );
57- --slack-link : var (--slack-blue );
58- }
59-
60- html [data-theme = "dark" ] {
6141 --docusaurus-highlighted-code-line-bg : rgb (0 0 0 / 30% );
42+ --ifm-color-primary : var (--slack-cloud-blue );
43+ --ifm-navbar-background-color : var (--aubergine ) !important ;
44+ --ifm-footer-background-color : var (--aubergine ) !important ;
45+ --ifm-footer-color : white;
6246}
6347
64- /* bolding Toc for contrast */
48+ /* bolding ToC for contrast */
6549.table-of-contents__link--active {
6650 font-weight : bold;
6751}
6852
69- /* only uncomment for home page -- colors white space on v tall screens */
70- /* .main-wrapper {
71- background: var(--horchata);
72- } */
53+ /* removing ToC line */
54+ .table-of-contents__left-border {
55+ border-left : none !important ;
56+ }
57+
58+ /* increasing name of SDK in sidebar */
59+ .sidebar-title {
60+ font-size : 1.25em ; /* Adjust the size as needed */
61+ font-weight : bold;
62+ color : # 000 ;
63+ }
64+
65+ /* removing sidebar line and adding space to match ToC */
66+ .theme-doc-sidebar-container {
67+ border-right : none !important ;
68+ margin-right : 2rem ;
69+ }
7370
7471/* announcement bar up top */
7572div [class ^= "announcementBar_" ] {
@@ -78,17 +75,7 @@ div[class^="announcementBar_"] {
7875 background : var (--horchata );
7976}
8077
81- /* navbar */
82-
83- .sidebar-item-overview a {
84- font-size : 1.2em ; /* Adjust size as needed */
85- font-weight : bold;
86- }
87-
88- html [data-theme = 'light' ] .sidebar-item-overview a {
89- --ifm-menu-color : # 000 ;
90- }
91-
78+ /* navbar github link */
9279.navbar-github-link {
9380 width : 32px ;
9481 height : 32px ;
@@ -116,8 +103,55 @@ html[data-theme="dark"] .navbar-github-link::before {
116103 no-repeat;
117104}
118105
119- .sidebar-title {
120- font-size : 1.25em ; /* Adjust the size as needed */
121- font-weight : bold;
122- color : # 000 ;
106+ /* Delineate tab blocks */
107+ .tabs-container {
108+ border : 1px solid var (--ifm-color-primary ); /* Adjust the color and thickness as needed */
109+ border-radius : 5px ; /* To give rounded corners */
110+ padding : 0.5em ; /* To add spacing inside the tab */
111+ }
112+
113+ /* Docs code bubbles */
114+ [data-theme = "light" ] {
115+ --code-link-background : # CFE9FE ;
116+ --code-link-text : rgb (21 , 50 , 59 );
117+
118+ --method-link-background : # CDEFC4 ;
119+ --method-link-text : rgb (0 , 41 , 0 );
120+
121+ --scope-link-background : # FBF3E0 ;
122+ --scope-link-text : rgb (63 , 46 , 0 );
123+
124+ --event-link-background : # FDDDE3 ;
125+ --event-link-text : rgb (74 , 21 , 75 );
126+ }
127+
128+ [data-theme = "dark" ] {
129+ --code-link-text : white;
130+ --method-link-text : white;
131+ --scope-link-text : white;
132+ --event-link-text : white;
133+ --code-link-background : # 1AB9FF50 ;
134+ --method-link-background : # 41B65850 ;
135+ --scope-link-background : # FCC00350 ;
136+ --event-link-background : # E3066A50 ;
137+ }
138+
139+ a code {
140+ background-color : var (--code-link-background );
141+ color : var (--code-link-text );
142+ }
143+
144+ a [href ^= "https://api.slack.com/methods" ] > code {
145+ background-color : var (--method-link-background );
146+ color : var (--method-link-text );
147+ }
148+
149+ a [href ^= "https://api.slack.com/scopes" ] > code {
150+ background-color : var (--scope-link-background );
151+ color : var (--scope-link-text );
152+ }
153+
154+ a [href ^= "https://api.slack.com/events" ] > code {
155+ background-color : var (--event-link-background );
156+ color : var (--event-link-text );
123157}
0 commit comments