12 |
13 | > Browser extension that improves [Overcast](https://overcast.fm) user interface
14 |
15 | I'm a happy user of Overcast, but I didn't like how UI has a very small width and all long episode names are shrunk, which made me guess if the episode I was opening is the one I was looking for. So, inspired by [Refined GitHub](https://github.com/sindresorhus/refined-github), I made this extension that overwrites some of the stylesheets on Overcast's website that fixes that and some other minor issues. Learn more what it changes below.
16 |
17 | ## Install
18 |
19 | Install it from [Chrome Web Store](https://chrome.google.com/webstore/detail/refined-overcast/oconjghjmgcochfckhnjecjohibjohdb).
20 |
21 | ## What's Changed?
22 |
23 | Right now this extension mainly extends page width and adjusts spacing and font sizes of the interface elements. [There are more ideas](https://github.com/vadimdemedes/refined-overcast/issues) for this project, feel free to help out!
24 |
25 | - Extend page width and make content fill all that space
26 | - Hide "All Episodes" section on homepage, since list of podcasts is what I care about the most
27 | - Add margin between podcast rows on homepage, so that logos aren't right near each other
28 | - Increase font size of podcast names to make them look proportional to logo size
29 | - Make "Delete" button bolder by adding a red background
30 |
31 | ### Home page
32 |
33 |
34 |
35 |
36 | Before
37 |
38 |
39 | After
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | ### Podcast page
54 |
55 |
56 |
57 |
58 | Before
59 |
60 |
61 | After
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | max-width: 960px !important;
3 | }
4 |
5 | /* Make content fill all available space */
6 | .pure-g .pure-u-1-5:empty {
7 | display: none;
8 | }
9 |
10 | .pure-g .pure-u-1 {
11 | width: 100% !important;
12 | }
13 |
14 | /* Hide "All Episodes" section on homepage */
15 | h2:first-child, .episodecell {
16 | display: none !important;
17 | }
18 |
19 | /* Remove large top margin from "Podcasts" section */
20 | .episodecell + h2, h2.centertext {
21 | margin-top: 0 !important;
22 | }
23 |
24 | /* Add margin between podcast rows in "Podcasts" section */
25 | .feedcell {
26 | margin-bottom: 0.5rem;
27 | }
28 |
29 | /* Increase font size of podcast names in "Podcasts" section */
30 | .feedcell .title {
31 | font-size: 1.25rem;
32 | }
33 |
34 | /* Reduce size of podcast logo in player */
35 | .fullart_container {
36 | max-width: 16rem;
37 | margin: 0 auto 2.5rem;
38 | margin-top: 2.5rem !important;
39 | }
40 |
41 | /* Make "Delete" button more visible and bold */
42 | .destructivebutton {
43 | background: #fc1b0f !important;
44 | color: #fff !important;
45 | }
46 |
47 | /* Align "Delete" button with podcast title */
48 | #deletepodcastform {
49 | margin-top: 0 !important;
50 | }
51 |
52 | #deletepodcastform + h2 {
53 | line-height: 2.375rem;
54 | }
55 |
56 | /* Fix player appearance after we widened the page */
57 | #progressbar, #playcontrols_container, #speedcontrols {
58 | width: 37.5rem !important;
59 | margin-left: auto !important;
60 | margin-right: auto !important;
61 | }
62 |
--------------------------------------------------------------------------------
4 | 
46 | 
49 | 
68 | 
71 |