WebGAL/packages/webgal/public/game/template/UI/Title/title.scss at 8133b08e6eaf912e0b408d322890960d38de90c4 · OpenWebGAL/WebGAL · 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
.Title_main {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 13;
}

.Title_buttonList {
  font-family: "思源宋体", serif;
  display: flex;
  position: absolute;
  left: 0;
  min-width: 25%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column;
  transition: background 0.75s;
  padding-left: 120px;
}

.Title_button {
  font-weight: bold;
  text-align: left;
  flex: 0 1 auto;
  cursor: pointer;
  padding: 0.7em 0;
  margin: 18px 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  transform: none;
  overflow: visible;
  text-shadow: none;

  &:hover {
    transform: translate3d(0, -3px, 0) scale(1.02);
    padding: 0.7em 0;
    filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12))
      drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07))
      drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05));
  }
}

.Title_button_text {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.08em 0.55em 0.12em 0.35em;
  font-size: 200%;
  font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  letter-spacing: 0.16em;
  line-height: 1.2;
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.Title_button_text_placeholder {
  position: relative;
  display: inline-block;
  color: transparent;
  white-space: nowrap;
}

.Title_button_text_outer {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  z-index: 2;
  text-shadow:
    0 3px 10px rgba(7, 12, 20, 0.22),
    0 1px 3px rgba(7, 12, 20, 0.16);
}

.Title_button_text_inner {
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7);
  z-index: 1;
}

.Title_backup_background {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 13;
  background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%);
}

.Title_button_disabled {
  cursor: not-allowed !important;
  opacity: 0.45;
}