BrowserBox-Demo/desktop-icons.css at boss · BrowserBox/BrowserBox-Demo · 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
/* desktop-icons.css */

.desktop.dragging-icon {
    /* user-select: none; */ /* Already handled by .no-select in your main CSS */
}

.desktop-icon.is-positioned {
    /* Styles applied by JS:
    position: absolute;
    margin: 0;
    */
}

/* --- NEW FOR MARQUEE --- */
.marquee-select-box {
    position: absolute;
    border: 1px dotted white; /* var(--theme-color-active-titlebar); */
    mix-blend-mode: difference;
    /* background-color: rgba(0, 0, 128, 0.2); /* Consider a variable if theme changes drastically */
    z-index: 1000;
    pointer-events: none; /* Crucial: allows events to pass through to icons underneath */
}

/* Ensure desktop icons have a base z-index if they are positioned.
   This helps with layering relative to the marquee. */
.desktop-icon {
    position: relative; /* Needed for z-index to apply on static elements if not already absolute */
    z-index: 1;
}

.desktop-icon.renaming span {
    display: none;
}

.desktop-icon-rename-input {
    display: block;
    width: 71px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 2px inset #808080;
    background: #ffffff;
    color: #000000;
    font-family: "MS Sans Serif", "Tahoma", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    padding: 1px 2px;
}

.desktop-icon.folder-drop-target {
    background: transparent;
}

.desktop-icon.folder-drop-target span {
    background: #000080;
    color: #ffffff;
}

.desktop-slice-canvas {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
}

.desktop-slice-canvas-positioned {
    display: block;
    position: relative;
    padding: 0;
}

.desktop-slice-canvas-spacer {
    pointer-events: none;
}

.desktop-slice-empty-message {
    width: 100%;
    padding: 12px 8px;
    color: #555555;
    font-size: 11px;
    box-sizing: border-box;
}

.desktop-slice-icon {
    width: 75px;
    text-align: center;
    color: #000000;
    cursor: default;
    user-select: none;
    padding: 4px;
    box-sizing: border-box;
}

.desktop-slice-icon img {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto 5px auto;
}

.desktop-slice-icon span {
    display: inline-block;
    max-width: 75px;
    width: min-content;
    border: 1px solid transparent;
    padding: 1px 2px;
    color: inherit;
}

.desktop-slice-icon.selected span {
    background: #000080;
    color: #ffffff;
    border: 1px dotted #ffffff;
}

.desktop-slice-icon.dragging {
    opacity: 0.45;
}

.desktop-slice-drag-ghost {
    width: 75px;
}

.folder-viewer-list.folder-drop-target {
    outline: none;
    background: transparent !important;
}

.folder-viewer-item.folder-drop-target {
    background: transparent;
}

.folder-viewer-item.folder-drop-target span {
    background: #000080;
    color: #ffffff;
}

.folder-viewer-item.dragging {
    opacity: 0.5;
}