Skip to content
This repository

Adding other prefixes! #95

Closed
wants to merge 2 commits into from

3 participants

Divya Manian Max Goodman Jeff Sandberg
Divya Manian

Heyo

So, @pifantastic told me about this repo, and I was so thrilled that I could finally walk the talk instead of begging for beautiful gradients on Opera mobile.

reddit.css seems like it could have been generated from a scss file, but I am unable to find one, so I manually corrected the file itself. I also fixed the compact.scss instead of compact.css.

The scss seems to have angles for doing vertical gradient. The definition of where angles are calculated from will be changing soon in the spec, so I recommend switching to keywords (like top, bottom or top left, bottom right) especially for vertical or horizontal gradients.

Max Goodman
Owner

Awesome, thanks! I've forwarded this to our resident reddit mobile expert. :)

The open web thanks you!

Jeff Sandberg

Thank you for the effort, but I've already switched the sass file over to Compass, and I believe they have updated their built-in mixins to work properly.

These changes will be committed against the github repo in the near future.

Again, thanks for your time. I guess great minds just think alike

Max Goodman chromakode closed this June 13, 2011
Divya Manian

O cool! Is it already live? Coz http://i.reddit.com is still missing lovely gradients :/

Jeff Sandberg
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
7  r2/r2/public/static/css/compact.scss
@@ -9,9 +9,12 @@
9 9
 
10 10
 @mixin vertical_gradient($from, $to) { 
11 11
     background-color: ($from + $to) / 2;
12  
-    background: -moz-linear-gradient(-90deg, $from, $to);
13 12
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
14  
-    background: -khtml-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  13
+    background: -moz-linear-gradient(-90deg, $from, $to);
  14
+    background: -webkit-linear-gradient(top, $from, $to);
  15
+    background: -o-linear-gradient(top, $from, $to);
  16
+    background: -ms-linear-gradient(top, $from, $to);
  17
+    background: -khtml-linear-gradient(top, $from, $to);
15 18
 }
16 19
 @mixin box-shadow($shadow) {
17 20
     -webkit-box-shadow: $shadow;
30  r2/r2/public/static/css/reddit.css
@@ -103,7 +103,11 @@ label.disabled { color: gray; }
103 103
 .fancybutton {
104 104
     padding: 5px 10px;
105 105
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 89%)), to( hsl(210, 54%, 79%)));
  106
+    background: -webkit-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
106 107
     background: -moz-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  108
+    background: -o-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  109
+    background: -ms-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  110
+    background: linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
107 111
     background-color: #ADC9E6;
108 112
     border: 1px solid #5E96CF;
109 113
     -webkit-border-radius: 7px;
@@ -121,12 +125,20 @@ label.disabled { color: gray; }
121 125
 }
122 126
 .fancybutton:hover {
123 127
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 93%)), to( hsl(210, 54%, 89%)));
  128
+    background:-webkit-linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
124 129
     background:-moz-linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
  130
+    background:-o-linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
  131
+    background:-ms-linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
  132
+    background: linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
125 133
     background-color: #D4E3F2;
126 134
 }
127 135
 .fancybutton:focus, .fancybutton:active {
128 136
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, to( hsl(210, 54%, 89%)), from( hsl(210, 54%, 79%)));
  137
+    background: -webkit-linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
129 138
     background: -moz-linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
  139
+    background: -o-linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
  140
+    background: -ms-linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
  141
+    background: linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
130 142
     background-color: #D4E3F2;
131 143
     -webkit-box-shadow: inset 0px -1px 0px hsla(0,0%,100%,.7);
132 144
     -moz-box-shadow: inset 0px -1px 0px hsla(0,0%,100%, .7);
@@ -136,7 +148,11 @@ label.disabled { color: gray; }
136 148
 .fancybutton.disabled, 
137 149
 .fancybutton.disabled:active {
138 150
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 24%, 93%)), to( hsl(210, 24%, 89%)));
  151
+    background:-webkit-linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
139 152
     background:-moz-linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
  153
+    background:-o-linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
  154
+    background:-ms-linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
  155
+    background:linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
140 156
     background-color: #D4E3F2;
141 157
     border-color: #999;
142 158
     color: #999;
@@ -3618,7 +3634,11 @@ table.lined-table {
3618 3634
 }
3619 3635
 .ui-datepicker-header {
3620 3636
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 89%)), to( hsl(210, 54%, 79%)));
  3637
+    background: -webkit-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
3621 3638
     background: -moz-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  3639
+    background: -o-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  3640
+    background: -ms-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
  3641
+    background: linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
3622 3642
     background-color: #ADC9E6;
3623 3643
     border:  1px solid #5E96CF;
3624 3644
     color: #2E6399;
@@ -3711,7 +3731,11 @@ table.lined-table {
3711 3731
  {
3712 3732
     color:  white;;
3713 3733
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 65%)), to( hsl(210, 54%, 45%)));
  3734
+    background: -webkit-linear-gradient(top, hsl(210, 54%, 65%), hsl(210, 54%, 45%));
3714 3735
     background: -moz-linear-gradient(top, hsl(210, 54%, 65%), hsl(210, 54%, 45%));
  3736
+    background: -o-linear-gradient(top, hsl(210, 54%, 65%), hsl(210, 54%, 45%));
  3737
+    background: -ms-linear-gradient(top, hsl(210, 54%, 65%), hsl(210, 54%, 45%));
  3738
+    background: linear-gradient(top, hsl(210, 54%, 65%), hsl(210, 54%, 45%));
3715 3739
     background-color: #4F8AC9;
3716 3740
     -webkit-box-shadow: inset 0px 2px 3px hsla(0,0%,0%,.6);
3717 3741
     -moz-box-shadow: inset 0px 2px 3px hsla(0,0%,0%,.6);
@@ -3731,7 +3755,11 @@ table.lined-table {
3731 3755
 
3732 3756
 .ui-datepicker-inline .ui-datepicker-calendar td a.ui-state-active {
3733 3757
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(0, 54%, 75%)), to( hsl(0, 54%, 55%)));
  3758
+    background: -webkit-linear-gradient(top, hsl(0,54%,75%), hsl(0,54%,55%));
3734 3759
     background: -moz-linear-gradient(top, hsl(0,54%,75%), hsl(0,54%,55%));
  3760
+    background: -o-linear-gradient(top, hsl(0,54%,75%), hsl(0,54%,55%));
  3761
+    background: -ms-linear-gradient(top, hsl(0,54%,75%), hsl(0,54%,55%));
  3762
+    background: linear-gradient(top, hsl(0,54%,75%), hsl(0,54%,55%));
3735 3763
     background-color: #E19D9D;
3736 3764
 }
3737 3765
 
@@ -3923,8 +3951,8 @@ dd { margin-left: 20px;  }
3923 3951
 
3924 3952
 .calendar .blob.link:hover { 
3925 3953
     border: 1px solid red;
3926  
-    box-shadow: 2px 2px 2px #000;
3927 3954
     -moz-box-shadow: 2px 2px 2px #000;
  3955
+    box-shadow: 2px 2px 2px #000;
3928 3956
     z-index: 100; 
3929 3957
 }
3930 3958
 
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.