├── .gitignore
├── logo.jpg
├── README.md
└── alerts
    └── shares
        └── gray-slide-in
            ├── example.gif
            ├── README.md
            └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelhelmick/facebook-gaming-styles/master/logo.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ![logo](logo.jpg)
2 | 
3 | This repository will be a resource for styles for alerts (and possibly overlays, etc. soon!).
4 | 


--------------------------------------------------------------------------------
/alerts/shares/gray-slide-in/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelhelmick/facebook-gaming-styles/master/alerts/shares/gray-slide-in/example.gif


--------------------------------------------------------------------------------
/alerts/shares/gray-slide-in/README.md:
--------------------------------------------------------------------------------
 1 | # Instructions
 2 | 
 3 | - Open OBS
 4 | - Add a Browser source with the following options:
 5 |     - URL: https://www.facebook.com/gaming/streamer/alertlist/?star_alerts=false&share_alerts=true&charitable_donation_alerts=false&star_sounds=false&supporter_alerts=false&clip_alerts=false
 6 |     - Width: 330px
 7 |     - Height: 600px
 8 |     - FPS: 60
 9 |     - Custom CSS: (Copy and paste the contents of [style.css](style.css) into this field)
10 | 
11 | # Example
12 | > The red background is just so you can see the border, the actual background will be transparent.
13 | 
14 | ![example](example.gif)
15 | 


--------------------------------------------------------------------------------
/alerts/shares/gray-slide-in/style.css:
--------------------------------------------------------------------------------
 1 | @keyframes slide {
 2 |     0% {
 3 |         right: -1000px;
 4 |     }
 5 |     100% {
 6 |         right: 0px;
 7 |     }
 8 | }
 9 | 
10 | body {
11 |     background-color: transparent;
12 |     margin: 0px auto;
13 |     overflow: hidden;
14 | }
15 | 
16 | ._4-u2 {
17 |     border: none;
18 | }
19 | 
20 | ._25zq {
21 |     background: transparent;
22 | }
23 | 
24 | ._4-u3 {
25 |     border: none;
26 | }
27 | 
28 | ._25zr {
29 |     display: none;
30 | }
31 | 
32 | ._4-u2>._4-u3 {
33 |     border: none;
34 | }
35 | 
36 | ._2l6l {
37 |     display: none;
38 | }
39 | 
40 | ._4-u8 {
41 |     background: transparent;
42 | }
43 | 
44 | ._2l6k {
45 |     display: none;
46 | }
47 | 
48 | ._2l6j {
49 |     color: #fff;
50 |     font-size: 15px;
51 |     font-weight: lighter;
52 | }
53 | 
54 | ._2l6h {
55 |     width: 20px;
56 |     height: 20px;
57 | }
58 | 
59 | ._2l6n {
60 |     display: none;
61 | }
62 | 
63 | ._2l6d:first-child {
64 |     width: 325px !important;
65 |     position: relative;
66 |     animation: slide 1s;
67 | }
68 | 
69 | ._2l6e {
70 |     display: flex;
71 |     flex-direction: column;
72 |     justify-content: center;
73 |     font-size: 14px;
74 |     padding: 12px;
75 |     border: 1px solid #fff;
76 |     border-top: 0px;
77 |     background: #333;
78 |     height: 30px;
79 | }
80 | 
81 | ._2l6d:first-child>._2l6e {
82 |     border-top: 1px solid #fff;
83 | }
84 | 
85 | ._2l6d {
86 |     margin: 0;
87 |     width: 300px;
88 |     float: right;
89 |     clear: both;
90 | }
91 | 


--------------------------------------------------------------------------------