caesarcipher/cip.css at master · Apoorv13/caesarcipher · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
@import compass


@import url( http://fonts.googleapis.com/css?family=Lato:300 )

html, body

  font-family: 'Lato', sans-serif
  background: #d8d8d8 url( http://cl.ly/image/0S3B1J3v471I/tex.png )
  height: 100%

.container

  text-align: center
  position: absolute
  margin-top: -90px
  width: 100%
  top: 50%

  hgroup

    font-weight: 300
    text-transform: uppercase
    text-shadow: 0
    margin-bottom: 40px

    h1

      letter-spacing: -1px
      line-height: 1
      font-size: 36px
      color: rgba(0,0,0,0.6)

    h2

      letter-spacing: -1px
      color: rgba(0,0,0,0.5)
      font-size: 16px

    a
      text-decoration: none
      color: rgba(2,111,140,0.8)

  .toggle

    display: inline-block
    margin: 10px

.toggle

  $size: 40px
  $pad: 6px

  border-radius: $size
  box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.7)
  background: linear-gradient( #c3c3c3, #e5e5e5 )
  position: relative
  padding: $pad
  height: $size
  width: $size

  .button

    transition: box-shadow 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px 1px rgba(255,255,255,0.5), 0 3px 3px rgba(0,0,0,0.5)
    background: linear-gradient( #e7e7e7 0%, #d8d8d8 48%, #cccccc 52%, #b4b4b4 100% )
    position: relative
    border-radius: $size
    height: $size
    width: $size

  input

    position: absolute
    cursor: pointer
    opacity: 0
    z-index: 1
    height: $size + $pad
    width: $size + $pad
    left: 0
    top: 0

    &:checked ~ .button

      box-shadow: 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5)

#cipher
  max-width: 90%
  margin-left: auto
  margin-right: auto
  textarea
    width: 100%

#commands
  text-align: center
  margin: 10px auto 20px
  p
    color: red
  button
    color: yellow
    background-color: red
    border-color: red