OSOnWeb/dock.css at master · TVke/OSOnWeb · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@keyframes load {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-20%);
    }
}

.dock {
    transition: all .5s ease;
    padding: 5px 8px 0;
    @apply flex mx-auto relative
}

.dock ul {
    @apply flex mx-auto
}

.dock-hide {
    transform: translateY(100px);
}

.dock::after {
    content: "";
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.14);
    background: rgba(240, 240, 240, 0.2);
    @apply rounded-t absolute inset-0 border border-b-0  backdrop-blur-[30px] backdrop-saturate-[1.5] h-28
}

.dock li {
    @apply z-10 relative
}

.dock .vr {
    background: rgba(50, 50, 50, 0.4);
    @apply relative z-10 block w-px mx-4 my-2
}

.dock figure {
    @apply relative
}

.dock figcaption {
    opacity: 0;
    top: -41px;
    @apply block absolute py-1 px-3 rounded mx-auto text-center bg-[#f0f0f0] text-black shadow font-thin text-xs pointer-events-none
}

.dock figure img {
    @apply block w-24
}

.dock ul:first-child li.activate {
    animation: load .4s infinite alternate cubic-bezier(.2, .5, .5, .5);
}

.dock ul:first-child li.active {
    transform: translateY(0);
}

.dock li.click img, .dock li.options img {
    filter: brightness(0.5);
}

.dock li::after {
    content: "";
    top: 5px;
    @apply rounded block w-1 h-1 mx-auto relative z-10 bg-[#333] inset-shadow-sm opacity-0
}

.dock li, .dock li::after, .dock figcaption, .dock .menu, .arrow {
    transition: all .3s ease-out;
}

.dock ul:first-child li.active::after,
.dock li.hover figcaption,
.dock li.hover figure .arrow,
.dock li.options .menu,
.dock li.options .arrow {
    @apply opacity-100
}

.dock ul:first-child li:nth-child(2).active::after {
    @apply opacity-0
}

.dock .menu {
    bottom: 127px;
    left: 30px;
    @apply block absolute rounded font-light text-xs bg-[#f0f0f0] pt-px shadow-lg opacity-0 pointer-events-none
}

.dock li.options .menu {
    @apply../imgpointer-events-auto
}

.dock .menu p {
    cursor: default;
    white-space: nowrap;
    @apply block py-0.5 px-4 my-0.75
}

.dock .menu p.sub-menu {
    display: flex;
}

.dock .menu p.sub-menu::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-top: 5px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 9px solid #434343;
    margin-top: 2px;
    @apply ml-3 -mr-2
}

.dock .menu p.hover {
    @apply bg-blue-500 text-white
}

.dock .menu p.hover.sub-menu::after {
    border-left-color: white;
}

.dock .menu p.disabled {
    @apply text-[#BDBDBD]
}

.dock .menu p.disabled.hover {
    @apply bg-transparent text-[#BDBDBD]
}

.dock .menu hr {
    height: 2px;
    margin: 2px 0;
    @apply block bg-[#E6E6E6]
}

.arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgb(240, 240, 240);
    top: -20px;
    @apply block w-0 h-0 absolute mx-auto inset-x-0 opacity-0
}