sos/styles.css at main · pentiuhm/sos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@import "compass/css3";


button {
  outline:none;
  font-family:'helvetica neue' sans-serif; font-size:2em;
  color:hsla(350,0%,100%,1); text-shadow:-1px -1px 1px hsla(350,0%,0%,0.7), 1px 1px 1px hsla(350,0%,100%,0.3);
  display:block; margin:2em auto; padding:23px 37px 25px 35px;
  cursor:pointer;
  background-color:hsla(350,80%,10%,1);
  background-image:
    linear-gradient(273deg,hsla(350,80%,60%,1) 30%, hsla(350,80%,50%,1) 40%)
  ;
  border:none; border-radius:16px;
  box-shadow:
    inset 0px 0px 1px 1px hsla(350,80%,30%,0.9),
    inset 0px 0px 2px 3px hsla(350,80%,50%,0.9),
    inset 1px 1px 1px 4px hsla(350,80%,100%,0.8),
    inset 0px 0px 2px 7px hsla(350,80%,60%,0.8),
    inset 0px 0px 4px 10px hsla(350,80%,50%,0.9),
    8px 10px 2px 6px hsla(350,80%,20%,0.55),
    0px 0px 3px 2px hsla(350,80%,40%,0.9),
    0px 0px 2px 6px hsla(350,80%,50%,0.9),
    /*0px 0px 2px 3px hsla(350,80%,60%,0.9),*/
    -1px -1px 1px 6px hsla(350,80%,100%,0.9),
    /*0px 0px 2px 8px hsla(350,80%,60%,0.9),*/
    0px 0px 2px 11px hsla(350,80%,50%,0.9),
    0px 0px 1px 12px hsla(350,80%,40%,0.9),
    1px 3px 14px 14px hsla(350,80%,0%,0.4)
  ;
}
button:active {
  color:hsla(350,0%,85%,1); padding:26px 34px 22px 38px;
  background-image:
    linear-gradient(273deg,hsla(350,80%,50%,1) 50%, hsla(350,80%,55%,1) 60%)
  ;
  box-shadow:
    inset 3px 4px 3px 2px hsla(350,80%,20%,0.55),
    inset 0px 0px 1px 1px hsla(350,80%,30%,0.9),
    inset -1px -1px 2px 3px hsla(350,80%,50%,0.9),
    inset -2px -2px 1px 3px hsla(350,80%,100%,0.8),
    inset 0px 0px 2px 7px hsla(350,80%,60%,0.8),
    inset 0px 0px 3px 10px hsla(350,80%,50%,0.9),
    0px 0px 3px 2px hsla(350,80%,40%,0.9),
    0px 0px 2px 6px hsla(350,80%,50%,0.9),
    /*0px 0px 2px 3px hsla(350,80%,60%,0.9),*/
    -1px -1px 1px 6px hsla(350,80%,100%,0.9),
    /*0px 0px 2px 8px hsla(350,80%,60%,0.9),*/
    0px 0px 2px 11px hsla(350,80%,50%,0.9),
    0px 0px 1px 12px hsla(350,80%,40%,0.9),
    1px 3px 14px 14px hsla(350,80%,0%,0.4)
  ;
}