cssx/main.css at main · galulex/cssx · 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
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";


[data-toggle=tooltip], [tooltip] {
  position: relative;
  --tooltip-x: --clientX;
  --tooltip-y: --clientY;
  --delay: 1.5s;
  /* --top: calc((var(--tooltip-y) - 50%) * 2); */
  /* --left: calc((var(--tooltip-x) - 50%) * 10); */
  --tmp: clamp(10px, 20px, 30px);
  --is-top: calc((var(--tooltip-y) - 50) / sqrt((var(--tooltip-y) - 50)*(var(--tooltip-y) - 50)));
  --is-left: calc((var(--tooltip-x) - 50) / sqrt((var(--tooltip-x) - 50)*(var(--tooltip-x) - 50)));
  /* --top: calc(var(--is-top) * 100%); */
  /* --left: calc(var(--is-left) * 100%); */
  /* --top: clamp(-100%, calc(var(--tooltip-y) - 50%), 100%); */
  --element-fixed-top: max(var(--element-bottom) * 1px, var(--event-y) * 1px);
  /* --fixed-left: calc(var(--event-x) * 1px); */
  --element-fixed-left: max(var(--element-right) * 1px, var(--event-x) * 1px);
  --fixed-top: min(var(--element-fixed-top) + 20px, var(--window-inner-height) * 1px - 100px);
  --top: max(0, var(--is-top) * 100%);

  &:after {
    isolation: isolate;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    overflow: hidden;
    visibility: visible;
    pointer-events: none;
    /* top: 50%; */
    /* left: 50%; */
    top: calc(var(--tooltip--clientY)*1px + 10px);
    left: calc(var(--tooltip--clientX)*1px + 10px);
    /* right: 0; */
    /* bottom: 0; */
    content: attr(tooltip) !important;
    color: white;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 5px 3px 5px;
    /* translate: calc(-50% + var(--left)) calc(-50% + var(--top)); */
    /* translate: 0 -50%; */
    /* transform: translate(0, 0); */
    line-height: normal;
    scale: 0 1;
    width: fit-content;

    /* clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
    transition:
      visibility 1s 3s,
      opacity .3s,
      left .3s,
      top 0s,
      translate .3s,
      scale .3s;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2), inset 0px 0px 1px rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    text-shadow: 0.2px 0px 1px white;
    backdrop-filter: blur(10px);
    z-index: 100000;
  }

  &:hover:after {
    /* visibility: hidden; */
    opacity: 1;
    /* color: transparent; */
    /* background: transparent; */
    scale: 1;
    box-shadow: none;
    /* translate: calc(var(--left) - 50%) calc(var(--top) - 100%); */
    /* animation: enableTransition 1s forwards; */
    /* left: var(--left); */
    /* top: var(--top); */
    /* right: 100px; */
    /* transition: */
    /*   visibility 1s 3s, */
    /*   opacity .3s, */
    /*   translate .3s, */
    /*   top .3s, */
    /*   left .1s .3s, */
    /*   scale .5s; */
  }
}

@keyframes enableTransition {
  50% {
    background: red;
    transition:
      visibility 1s 3s,
      opacity .3s,
      top .1s 3s,
      translate 0s,
      scale .5s;
  }
}

label[for=name_input]:after {
  content: ' ' var(--name_input--value);
}

input[type=text] {
  transition: all .2s;
  width: calc(var(--range_input--target_value) * 1%);
  font-size: calc(var(--range_input--target_value) * 1px);
}

h1:after {
  content: ' ' var(--email_input--target_value_2S);
}

body {
  background: var(--bg_input--target_value);
}

input[type=color]:after {
  content: 'Color: ' var(--bg-input--target_value_2S);
}

button#btn {
  position: fixed;
  transition: all 10ms;
  min-width: max-content;
  left: calc(var(--btn--clientX) * 1px);
  top: calc(var(--btn--clientY) * 1px);
  translate: -50% -50%;
}

pre {
  max-width: 100vw;
}