OSOnWeb/window.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
:root {
    --red: #FF6259;
    --red-darker: #4D0000;
    --red-border: #E1463F;
    --yellow: #FFBE2F;
    --yellow-darker: #995700;
    --yellow-border: #DFA023;
    --green: #2AD043;
    --green-darker: #016400;
    --green-border: #1BAC2C;

    --window-grey-border-light-active: rgba(0,0,0,0.24);/*#A8A8A8;*/
    --window-grey-border-light-inactive: rgba(0,0,0,0.27);/*#A1A1A1;*/
    --window-grey-border-middle-active: rgba(0,0,0,0.44);/*#7D7D7D;*/
    --window-grey-border-middle-inactive: rgba(0,0,0,0.34);/*#939393;*/
    --window-grey-border-dark-active: rgba(0,0,0,0.63);/*#525252;*/
    --window-grey-border-dark-inactive: rgba(0,0,0,0.40);/*#868686;*/
}

#open-windows{
    @apply absolute inset-0
}
.window{
    width: 500px;
    border: .5px solid var(--window-grey-border-middle-active);
    @apply absolute rounded shadow-[0_25px_42px_0_rgba(0,0,0,.41),_0_10px_21px_0_rgba(0,0,0,.2)]
}
.window-buttons{
    @apply flex absolute left-0 top-0 mt-px mx-1 z-10
}
.window-buttons>*{
    border: .5px solid grey;
    @apply relative w-3 block h-3 rounded-full mx-1 my-1 cursor-default
}
.window-buttons .close{
    background: var(--red);
    border-color: var(--red-border);
}
.window-buttons .close:hover::after,.window-buttons .close:hover::before{
    content: "";
    width: 8px;
    bottom: 4.8px;
    left: 1.25px;
    background: var(--red-darker);
    @apply absolute block h-px
}
.window-buttons .close:hover::after{
    transform: rotate(45deg);
}
.window-buttons .close:hover::before{
    transform: rotate(-45deg);
}
.window-buttons .minimize{
    background: var(--yellow);
    border-color: var(--yellow-border);
}
.window-buttons .minimize:hover::after{
    content: "";
    width: 8px;
    top:4.8px;
    left: 1.25px;
    background: var(--yellow-darker);
    @apply absolute block h-px
}
.window-buttons .enlarge{
    background: var(--green);
    border-color: var(--green-border);
}
.window-buttons .enlarge:hover::after,.window-buttons .enlarge:hover::before{
    content: "";
    @apply w-0 h-0 absolute
}
.window-buttons .enlarge:hover::before{
    border-top: 4.5px solid var(--green-darker);
    border-left: 4.5px solid transparent;
    top: 2.5px;
    left: 4px;
    border-top-right-radius: .5px;
}
.window-buttons .enlarge:hover::after{
    border-bottom: 4.5px solid var(--green-darker);
    border-right: 4.5px solid transparent;
    top: 4px;
    left:2.5px;
    border-bottom-left-radius: .5px;
}