profile/style.less at master · HANT666/profile · 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
@charset "utf-8";
@import  "/api/mixin.less";
@font-default: Tahoma;
@color-backgrnd1: #00EE00;
@color-backgrnd2: #00A000;
@color-button: #008800;

html { // background: linear-gradient(to bottom, #00EE00, #00A000 50%, #00EE00 100%);
  .gradient(darken(@color-backgrnd1, 20%), @color-backgrnd2); background-attachment: fixed; }
body{ margin: 0; }
h1 { .font(22px, bold); text-align: left; }
h2 { .font(16px); text-align: left; }
h3 { .font(18px); border-bottom: 2px solid #ccc; text-align: left; padding-top: 10px; padding-bottom: 3px; }
header { padding-left: 30px; }
section { padding-left: 30px; padding-right: 30px; }
div { margin-left: auto; margin-right: auto; text-align: center; background-color: white;
  &.main { .round(20px); .edge(#999); margin: 50px auto; .size(50%, 100%); background-color: white; padding: 30px; text-align: left; }
  &.site-type { text-align: left; padding: 5px; margin-bottom: 2px; }
}
form {  }
label { display: block; font-size: 14pt; padding-bottom: 5px;
  &:hover { text-shadow: 1px 1px 15px grey; }
  &[data-required="true"]:after { content:'*'; color:red; }
}
span.description { display: block; .font(12px); padding-bottom: 5px; }
input[type="text"] { width: 33%; padding: 5px; margin: 2px; border: 1px solid #ccc; border-radius: 5px;
  &:hover { border: 1px solid green; }
  &:focus { border: 3px solid green; margin: 0px; }
}
input[type="submit"] { color:#fff; background:@color-button; border:1px solid @color-button - #222; padding:5px 12px; .round(3px); font-family: Arial, Helvetica, sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(@color-button + #151515), to(@color-button - #151515));
background: -moz-linear-gradient(top,  @color-button + #151515,  @color-button - #151515);
  &:hover { background:@color-button + #222; }
}
p{ .font(14px); }
#price-selector { text-align: center; position: relative; font-size: 0;
  label { .inline; .size(10%, 30px); color: silver; .animate; position: relative; .font(14px); margin: 0 1%; vertical-align: top;
    &:before { display: block; content: ''; .size(10px, 10px); background: lime; margin: 0 auto; }
    &:after { display: block; content: ''; .arrow(5px, lime, top); left: 50%; margin-left:-5px; top: -5px; }
    &:first-of-type { margin-left: 0; }
    &:last-of-type { margin-right: 0; }
    &:hover { color: black; }
  }
  input { display: none;
    &:checked + label { color: blue; width: 20%;
      &:before { background: red; }
      &:after { border-bottom-color: red; }
    }
    // &:checked + label ~ label { color: green; }
  }
  & > div { position: absolute; left: 6%; top: 0; right: 6%; height: 5px; background: lightcoral;
    & > div { position: absolute; width: 0; background: green; left: 0; bottom: 0; top: 0; .animate;
      &:after { display: block; content: ''; position: absolute; right: 0; .circle(10px); top: -2px; background: red; }
    }
  }
  #p1:checked ~ div > div { width: 10%;  }
  #p2:checked ~ div > div { width: 23.5%;  }
  #p3:checked ~ div > div { width: 37.5%;  }
  #p4:checked ~ div > div { width: 51%;  }
  #p5:checked ~ div > div { width: 64.5%;  }
  #p6:checked ~ div > div { width: 78%;  }
  #p7:checked ~ div > div { width: 92%;  }
}
#price-selector + input[type="text"] { position: relative; top: 0px;}