← Back to branch summary

~mmach/netext73/webkit2gtk

« back to all changes in this revision

Viewing changes to Source/WebInspectorUI/UserInterface/Views/ColorSquare.css

  • Committer: mmach
  • Date: 2023-06-16 17:21:37 UTC
  • Revision ID: netbit73@gmail.com-20230616172137-2rqx6yr96ga9g3kp
1

Show diffs side-by-side

added added

removed removed

Lines of Context:
Source/WebInspectorUI/UserInterface/Views/ColorSquare.css
 
1
/*
 
2
 * Copyright (C) 2019 Apple Inc. All rights reserved.
 
3
 *
 
4
 * Redistribution and use in source and binary forms, with or without
 
5
 * modification, are permitted provided that the following conditions
 
6
 * are met:
 
7
 * 1. Redistributions of source code must retain the above copyright
 
8
 *    notice, this list of conditions and the following disclaimer.
 
9
 * 2. Redistributions in binary form must reproduce the above copyright
 
10
 *    notice, this list of conditions and the following disclaimer in the
 
11
 *    documentation and/or other materials provided with the distribution.
 
12
 *
 
13
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 
14
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 
15
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 
16
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 
17
 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 
18
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 
19
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 
20
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 
21
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 
22
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 
23
 * THE POSSIBILITY OF SUCH DAMAGE.
 
24
 */
 
25
 
 
26
.color-square {
 
27
    position: relative;
 
28
    outline: 0.5px solid hsl(0, 0%, 70%);
 
29
 
 
30
    --stroke-opacity: 0.8;
 
31
}
 
32
 
 
33
.color-square > .saturation-gradient {
 
34
    background-image: linear-gradient(to right, white, hsla(0, 0%, 100%, 0));
 
35
}
 
36
 
 
37
.color-square > .lightness-gradient {
 
38
    background-image: linear-gradient(to top, black, hsla(0, 0%, 0%, 0));
 
39
}
 
40
 
 
41
.color-square > .fill {
 
42
    position: absolute;
 
43
    top: 0;
 
44
    left: 0;
 
45
    right: 0;
 
46
    bottom: 0;
 
47
}
 
48
 
 
49
.color-square > .crosshair {
 
50
    position: absolute;
 
51
    top: calc(-1 * (var(--crosshair-size) + var(--border-width)) / 2);
 
52
    left: calc(-1 * (var(--crosshair-size) + var(--border-width)) / 2);
 
53
    width: var(--crosshair-size);
 
54
    height: var(--crosshair-size);
 
55
    border: var(--border-width) solid white;
 
56
    box-shadow: 0 0 2px black;
 
57
    border-radius: 3px;
 
58
    pointer-events: none;
 
59
    z-index: 9;
 
60
 
 
61
    --border-width: 1px;
 
62
    --crosshair-size: 7px;
 
63
}
 
64
 
 
65
.color-square > .svg-root {
 
66
    position: absolute;
 
67
    top: 0;
 
68
    left: 0;
 
69
    width: 100%;
 
70
    height: 100%;
 
71
    pointer-events: none;
 
72
}
 
73
 
 
74
.color-square > .svg-root > .srgb-edge {
 
75
    fill: none;
 
76
    stroke: white;
 
77
    stroke-width: 0.5px;
 
78
    stroke-opacity: var(--stroke-opacity);
 
79
}
 
80
 
 
81
.color-square > .srgb-label {
 
82
    position: absolute;
 
83
    padding-right: 5px;
 
84
    color: hsla(0, 0%, 100%, var(--stroke-opacity));
 
85
    font-size: 10px;
 
86
}
 
87
 
 
88
.color-square > .srgb-label:hover {
 
89
    color: white;
 
90
}
 
91
 
 
92
.color-square > .srgb-label:hover + .svg-root > .srgb-edge {
 
93
    stroke-width: 1px;
 
94
}
 
95
 
 
96
@media (-webkit-device-pixel-ratio: 1) {
 
97
    .color-square > .srgb-edge {
 
98
        stroke-width: 1px;
 
99
        stroke-opacity: var(--stroke-opacity) / 2;
 
100
    }
 
101
}