frontend/css/tutorial.scss at master · Postiles/frontend · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
#tutorial_container {
    background: #024d61;
    width: 100%;
    height: 100%;
    color: whitesmoke;
    font-family: Play;

    .arrow {
        position: absolute;
        top: 50%;
        margin-top: -80px;
        cursor: pointer;
        width: 0;
        height: 0;
        opacity: 0.2;

        &:hover {
            opacity: 0.5;
        }
    }

    .left_arrow {
        display: none;
        left: 150px;
        border-top: 60px solid transparent;
        border-right: 45px solid whitesmoke;
        border-bottom: 60px solid transparent;
    }

    .right_arrow {
        right: 150px;
        border-top: 60px solid transparent;
        border-left: 45px solid whitesmoke;
        border-bottom: 60px solid transparent;
    }

    .slideshow {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0 auto;
        margin-top: -300px;
        margin-left: -400px;
        width: 800px;
        overflow: hidden;

        .view_list {
            width: 5600px;

            .view_item {
                float: left;
                width: 800px;
                text-align: center;
                .title {
                    font-family: PlayBold;
                    font-size: 30pt;
                }

                .picture {
                    margin: 20px auto;
                    width: 640px;
                    height: 400px;

                    img {
                        width: inherit;
                        height: inherit;
                    }
                }

                .description {
                    font-size: 14pt;
                    color: rgba(244, 244, 244, 0.7);

                    .highlight {
                        margin: 10px;
                        color: whitesmoke;
                    }
                }
            }
        }
    }

    .bottom_container {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: 260px;
        margin-left: -75px;

        .dot_container {
            width: 150px;

            .dot {
                float: left;
                margin-left: 8px;
                width: 12px;
                height: 12px;
                background: whitesmoke;
                opacity: 0.4;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
 		// XXX: goog-stylesheet
                //-o-border-radius: 6px;
                //-ms-border-radius: 6px;
                cursor: pointer;

                &:first-child {
                    opacity: 1;
                }
            }
        }
    }

    .skip_button {
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 10pt;
        color: whitesmoke;
        cursor: pointer;

        &:hover {
            background: rgba(255, 255, 255, 0.4);
        }
    }
}