store
3 months ago
GenerateBgImage.js
3 months ago
_breakpoints.scss
1 week ago
block-duplicate-helper.js
3 months ago
capitalize.js
3 months ago
color-code-to-class.js
3 months ago
color-slug-to-color-code.js
3 months ago
common.scss
1 week ago
convert-to-grid.js
3 months ago
default-color-palette.js
3 months ago
delete-from-array.js
3 months ago
depModules.js
3 months ago
disable-links.js
2 months ago
empty-string-to-undefined.js
3 months ago
example-data.js
3 months ago
fixBrokenUnicode.js
3 months ago
font-awesome-new.js
1 week ago
font-awesome-version.js
3 months ago
font-awesome.js
3 months ago
formatNumCol.js
3 months ago
gradient-slug-to-gradient-code.js
3 months ago
heading-level-utils.js
3 months ago
hex-to-rgba.js
3 months ago
horizontal-scroll-controls.js
3 months ago
icon-label.js
2 months ago
is-excludes-blocks.js
3 months ago
is-gradient-style.js
3 months ago
is-hex-color.js
3 months ago
is-not-json.js
3 months ago
is-parent-reusable-block.js
1 month ago
merge-colors.js
3 months ago
multi-array-flaten.js
3 months ago
removeProperty.js
3 months ago
replaceClientId.js
3 months ago
sanitizeSlug.js
3 months ago
settings-page-url.js
2 months ago
strip-html.js
3 months ago
taxonomy-utils.js
3 months ago
to-number.js
3 months ago
to-preset-spacing-var.js
3 months ago
unit-options.js
3 months ago
wrap-unwrap.js
3 months ago
common.scss
1648 lines
| 1 | @use 'utils/breakpoints' as *; |
| 2 | |
| 3 | :root { |
| 4 | --vk-margin-elem:2rem; |
| 5 | } |
| 6 | |
| 7 | .text-nowrap { |
| 8 | white-space: nowrap; |
| 9 | } |
| 10 | |
| 11 | /*-------------------------------------------*/ |
| 12 | /* core/column をコンテンツ� |
| 13 | の半分のインナーブロックにする .is-vk-content-width-half 対応 |
| 14 | /*-------------------------------------------*/ |
| 15 | // front / editor 両方に適用 |
| 16 | .is-vk-content-width-half { |
| 17 | // TT5などテーマによっては border-box 指定がなくてレイアウトが崩れるため |
| 18 | box-sizing: border-box; |
| 19 | } |
| 20 | :where(:not(.is-vk-row-reverse)) > :first-child.is-vk-content-width-half, |
| 21 | :where(.is-vk-row-reverse) > :nth-child(2).is-vk-content-width-half { |
| 22 | // 100svh では編集画面でパネルの� |
| 23 | などを含んでしまうため100%を使用 |
| 24 | padding-left:calc( ( 100% - var(--wp--style--global--content-size) ) / 2 ) !important; |
| 25 | } |
| 26 | :where(:not(.is-vk-row-reverse)) > :nth-child(2).is-vk-content-width-half, |
| 27 | :where(.is-vk-row-reverse) > :first-child.is-vk-content-width-half { |
| 28 | padding-right:calc( ( 100% - var(--wp--style--global--content-size) ) / 2 ) !important; |
| 29 | } |
| 30 | // カラムの� |
| 31 | に 50% 指定がない場合にも� |
| 32 | がバラけないように対応 |
| 33 | .wp-block-columns:has(.is-vk-content-width-half) { |
| 34 | & > :where(.wp-block-column) { |
| 35 | max-width: 50%; |
| 36 | } |
| 37 | } |
| 38 | // 782px は WP コア準拠の独自しきい値のため� |
| 39 | �有変数化はしない（$xs 等の5値とは無関係）。 |
| 40 | // 782px is an ad-hoc WP-core-aligned threshold, not one of the shared $xs..$xl values. |
| 41 | @media (width < 782px) { |
| 42 | // モバイルで縦積みの場合のみ打ち消し |
| 43 | .wp-block-columns:where(:not(.is-not-stacked-on-mobile)){ |
| 44 | // 各カラムのスタイルでPC用で中央側に padding を指定するのが一般的なため、!importantをつけないと上書きできない |
| 45 | .is-vk-content-width-half{ |
| 46 | padding-left:0 !important; |
| 47 | padding-right:0 !important; |
| 48 | &.is-layout-flow > * { |
| 49 | // .is-layout-flow でも左右ベタ付けにならずにコンテンツ� |
| 50 | に抑える（.is-layout-constrainedと同じ挙動にする）ため |
| 51 | max-width: var(--wp--style--global--content-size); |
| 52 | margin-left: auto !important; |
| 53 | margin-right: auto !important; |
| 54 | } |
| 55 | } |
| 56 | .has-global-padding .is-vk-content-width-half { |
| 57 | padding-right: var(--wp--style--root--padding-right) !important; |
| 58 | padding-left: var(--wp--style--root--padding-left) !important; |
| 59 | } |
| 60 | &:has(.is-vk-content-width-half) { |
| 61 | & > :where(.wp-block-column) { |
| 62 | max-width: 100%; |
| 63 | } |
| 64 | } |
| 65 | } |
| 66 | } |
| 67 | |
| 68 | /*-------------------------------------------*/ |
| 69 | /* 蛍� |
| 70 | �マーカー |
| 71 | /*-------------------------------------------*/ |
| 72 | @mixin vk-highlighter-gradient($direction: null) { |
| 73 | @if $direction == null { |
| 74 | background-image: linear-gradient(transparent 60%, var(--vk-highlighter-color) 0); |
| 75 | } @else { |
| 76 | background-image: linear-gradient(#{$direction}, transparent 60%, var(--vk-highlighter-color) 0); |
| 77 | } |
| 78 | } |
| 79 | |
| 80 | .vk_highlighter, |
| 81 | [class*="--vk-highlighter"]*="--vk-highlighter""] { |
| 82 | @include vk-highlighter-gradient(); |
| 83 | } |
| 84 | [style*="vertical-rl"]*="vertical-rl""] .vk_highlighter, |
| 85 | [style*="vertical-rl"]*="vertical-rl""] [class*="--vk-highlighter"]*="--vk-highlighter""] { |
| 86 | @include vk-highlighter-gradient(to left); |
| 87 | } |
| 88 | [style*="vertical-lr"]*="vertical-lr""] .vk_highlighter, |
| 89 | [style*="vertical-lr"]*="vertical-lr""] [class*="--vk-highlighter"]*="--vk-highlighter""] { |
| 90 | @include vk-highlighter-gradient(to right); |
| 91 | } |
| 92 | |
| 93 | /*-------------------------------------------*/ |
| 94 | /* 余白（レスポンシブスペーサー,� |
| 95 | �通余白で使用） |
| 96 | /*-------------------------------------------*/ |
| 97 | :root { |
| 98 | --vk-margin-xxs : 0.375rem; |
| 99 | --vk-margin-xs : 0.75rem; |
| 100 | --vk-margin-sm : 1.5rem; |
| 101 | --vk-margin-md : 2.4rem; |
| 102 | --vk-margin-lg : 4rem; |
| 103 | --vk-margin-xl : 6rem; |
| 104 | --vk-margin-xxl : 9rem; |
| 105 | } |
| 106 | .vk_block{ |
| 107 | &-margin-0 { |
| 108 | &--margin-top { |
| 109 | margin-top: 0 !important; |
| 110 | & > table { //テーマ側でtableにmargin-bottom や margin-top の余白がついている場合、完� |
| 111 | �に0にならないので� |
| 112 | 要 |
| 113 | margin-top:0; |
| 114 | } |
| 115 | } |
| 116 | &--margin-bottom { |
| 117 | margin-bottom: 0 !important; |
| 118 | & > table { //テーマ側でtableにmargin-bottom や margin-top の余白がついている場合、完� |
| 119 | �に0にならないので� |
| 120 | 要 |
| 121 | margin-bottom:0; |
| 122 | } |
| 123 | } |
| 124 | } |
| 125 | &-margin-xxs { |
| 126 | margin-top: var(--vk-margin-xxs); /* 旧バージョンでdeprecatedが走ってない状� |
| 127 | �のfallback */ |
| 128 | &--margin-top { |
| 129 | margin-top: var(--vk-margin-xxs) !important; |
| 130 | } |
| 131 | &--margin-bottom { |
| 132 | margin-bottom: var(--vk-margin-xxs) !important; |
| 133 | } |
| 134 | &--height { |
| 135 | height: var(--vk-margin-xxs); |
| 136 | } |
| 137 | } |
| 138 | &-margin-xs { |
| 139 | margin-top: var(--vk-margin-xs); /* 旧バージョンでdeprecatedが走ってない状� |
| 140 | �のfallback */ |
| 141 | &--margin-top { |
| 142 | margin-top: var(--vk-margin-xs) !important; |
| 143 | } |
| 144 | &--margin-bottom { |
| 145 | margin-bottom: var(--vk-margin-xs) !important; |
| 146 | } |
| 147 | &--height { |
| 148 | height: var(--vk-margin-xs); |
| 149 | } |
| 150 | } |
| 151 | &-margin-sm { |
| 152 | margin-top: var(--vk-margin-sm); /* 旧バージョンでdeprecatedが走ってない状� |
| 153 | �のfallback */ |
| 154 | &--margin-top { |
| 155 | margin-top: var(--vk-margin-sm) !important; |
| 156 | } |
| 157 | &--margin-bottom { |
| 158 | margin-bottom: var(--vk-margin-sm) !important; |
| 159 | } |
| 160 | &--height { |
| 161 | height: var(--vk-margin-sm); |
| 162 | } |
| 163 | } |
| 164 | &-margin-md { |
| 165 | margin-top: var(--vk-margin-md); /* 旧バージョンでdeprecatedが走ってない状� |
| 166 | �のfallback */ |
| 167 | &--margin-top { |
| 168 | margin-top: var(--vk-margin-md) !important; |
| 169 | } |
| 170 | &--margin-bottom { |
| 171 | margin-bottom: var(--vk-margin-md) !important; |
| 172 | } |
| 173 | &--height { |
| 174 | height: var(--vk-margin-md); |
| 175 | } |
| 176 | } |
| 177 | &-margin-lg { |
| 178 | margin-top: var(--vk-margin-lg); /* 旧バージョンでdeprecatedが走ってない状� |
| 179 | �のfallback */ |
| 180 | &--margin-top { |
| 181 | margin-top: var(--vk-margin-lg) !important; |
| 182 | } |
| 183 | &--margin-bottom { |
| 184 | margin-bottom: var(--vk-margin-lg) !important; |
| 185 | } |
| 186 | &--height { |
| 187 | height: var(--vk-margin-lg); |
| 188 | } |
| 189 | } |
| 190 | &-margin-xl { |
| 191 | margin-top: var(--vk-margin-xl); /* 旧バージョンでdeprecatedが走ってない状� |
| 192 | �のfallback */ |
| 193 | &--margin-top { |
| 194 | margin-top: var(--vk-margin-xl) !important; |
| 195 | } |
| 196 | &--margin-bottom { |
| 197 | margin-bottom: var(--vk-margin-xl) !important; |
| 198 | } |
| 199 | &--height { |
| 200 | height: var(--vk-margin-xl); |
| 201 | } |
| 202 | } |
| 203 | &-margin-xxl { |
| 204 | margin-top: var(--vk-margin-xxl); /* 旧バージョンでdeprecatedが走ってない状� |
| 205 | �のfallback */ |
| 206 | &--margin-top { |
| 207 | margin-top: var(--vk-margin-xxl) !important; |
| 208 | } |
| 209 | &--margin-bottom { |
| 210 | margin-bottom: var(--vk-margin-xxl) !important; |
| 211 | } |
| 212 | &--height { |
| 213 | height: var(--vk-margin-xxl); |
| 214 | } |
| 215 | } |
| 216 | } |
| 217 | |
| 218 | /*-------------------------------------------*/ |
| 219 | /* パレット設定 |
| 220 | /*-------------------------------------------*/ |
| 221 | $stylePalette: ( |
| 222 | is-style-vk-arrow-mark: "\f138", |
| 223 | is-style-vk-triangle-mark: "\f0da", |
| 224 | is-style-vk-check-mark: "\f00c", |
| 225 | is-style-vk-check-circle-mark: "\f058", |
| 226 | is-style-vk-check-square-mark: "\f14a", |
| 227 | is-style-vk-handpoint-mark: "\f0a4", |
| 228 | is-style-vk-pencil-mark: "\f303", |
| 229 | is-style-vk-smile-mark: "\f118", |
| 230 | is-style-vk-frown-mark: "\f119", |
| 231 | is-style-vk-circle-mark: "\f111", |
| 232 | is-style-vk-times-mark: "\f00d", |
| 233 | ); |
| 234 | |
| 235 | $colorPalette: ( |
| 236 | (pale-pink, #f78da7), |
| 237 | (vivid-red, #cf2e2e), |
| 238 | (luminous-vivid-orange, #ff6900), |
| 239 | (luminous-vivid-amber, #fcb900), |
| 240 | (light-green-cyan, #7bdcb5), |
| 241 | (vivid-green-cyan, #00d084), |
| 242 | (pale-cyan-blue, #8ed1fc), |
| 243 | (vivid-cyan-blue, #0693e3), |
| 244 | (vivid-purple, #9b51e0), |
| 245 | (very-light-gray, #eee), |
| 246 | (cyan-bluish-gray, #abb8c3), |
| 247 | (very-dark-gray, #313131), |
| 248 | (white, #ffffff), |
| 249 | (color-primary, var(--wp--preset--color--vk-color-primary)), |
| 250 | (color-primary-dark, var(--wp--preset--color--vk-color-primary-dark)), |
| 251 | (color-primary-vivid, var(--wp--preset--color--vk-color-primary-vivid)), |
| 252 | (color-custom-1, var(--wp--preset--color--vk-color-custom-1)), |
| 253 | (color-custom-2, var(--wp--preset--color--vk-color-custom-2)), |
| 254 | (color-custom-3, var(--wp--preset--color--vk-color-custom-3)), |
| 255 | (color-custom-4, var(--wp--preset--color--vk-color-custom-4)), |
| 256 | (color-custom-5, var(--wp--preset--color--vk-color-custom-5)) |
| 257 | ); |
| 258 | |
| 259 | /*-------------------------------------------*/ |
| 260 | /* カラー設定 |
| 261 | /*-------------------------------------------*/ |
| 262 | @each $colorClass, $color in $colorPalette { |
| 263 | :root { |
| 264 | // 一般的なカラー設定 |
| 265 | .vk-has-#{"#{$colorClass}"}-background-color, |
| 266 | .has-vk-#{"#{$colorClass}"}-background-color { |
| 267 | @if $colorClass == color-primary { |
| 268 | // color-primaryに関する特殊処理 |
| 269 | background-color: var(--wp--preset--color--vk-color-primary, #337ab7); |
| 270 | } @else { |
| 271 | background-color: #{$color}; |
| 272 | } |
| 273 | } |
| 274 | |
| 275 | .vk-has-#{"#{$colorClass}"}-color, |
| 276 | .has-vk-#{"#{$colorClass}"}-color { |
| 277 | @if $colorClass == color-primary { |
| 278 | // color-primaryに関する特殊処理 |
| 279 | color: var(--wp--preset--color--vk-color-primary, #337ab7); |
| 280 | } @else { |
| 281 | color: #{$color}; |
| 282 | } |
| 283 | } |
| 284 | } |
| 285 | } |
| 286 | |
| 287 | /*-------------------------------------------*/ |
| 288 | /* リストデザイン |
| 289 | /*-------------------------------------------*/ |
| 290 | @mixin mark-before { |
| 291 | font-family: "Font Awesome 5 Free"; |
| 292 | font-weight: 900; |
| 293 | position: absolute; |
| 294 | } |
| 295 | |
| 296 | .wp-block-list { |
| 297 | &.is-style { |
| 298 | &-default, |
| 299 | &-vk-arrow-mark, |
| 300 | &-vk-triangle-mark, |
| 301 | &-vk-check-mark, |
| 302 | &-vk-check-circle-mark, |
| 303 | &-vk-check-square-mark, |
| 304 | &-vk-handpoint-mark, |
| 305 | &-vk-pencil-mark, |
| 306 | &-vk-smile-mark, |
| 307 | &-vk-frown-mark, |
| 308 | &-vk-circle-mark, |
| 309 | &-vk-times-mark, |
| 310 | &-vk-numbered-circle-mark, |
| 311 | &-vk-numbered-square-mark { |
| 312 | padding-inline-start: 2em; |
| 313 | &:not(.has-text-color), |
| 314 | &:not(.has-link-color) { |
| 315 | color: inherit; |
| 316 | } |
| 317 | &:where(:not(.is-style-default)) { |
| 318 | line-height: calc( 1rem * 1.65 ); |
| 319 | li { |
| 320 | list-style: none; |
| 321 | position: relative; |
| 322 | margin-top:0; |
| 323 | margin-left: 0; |
| 324 | margin:calc( 1rem * 0.8 ) 0; |
| 325 | } |
| 326 | } |
| 327 | } |
| 328 | } |
| 329 | |
| 330 | &.is-style-vk-numbered-circle-mark { |
| 331 | counter-reset: number; |
| 332 | list-style-type: none; |
| 333 | |
| 334 | li { |
| 335 | --vk-numbered-marker-leading: 0px; |
| 336 | position: relative; |
| 337 | list-style: none; |
| 338 | padding-left: .5em; |
| 339 | &:before { |
| 340 | position: absolute; |
| 341 | left: 0; |
| 342 | top: var( --vk-numbered-marker-leading, 0 ); |
| 343 | counter-increment: number; |
| 344 | content: counter(number); |
| 345 | margin-left: -1.8em; |
| 346 | background: #222; |
| 347 | color: #fff; |
| 348 | text-indent: 0; |
| 349 | display: inline-block; |
| 350 | font-weight: bold; |
| 351 | border-radius: 50%; |
| 352 | font-size: calc( 1rem * 1 ); |
| 353 | line-height: calc( 1rem * 1.8 ); |
| 354 | width: 26px; |
| 355 | height: 26px; |
| 356 | text-align: center; |
| 357 | } |
| 358 | |
| 359 | ul, |
| 360 | ol { |
| 361 | counter-reset: num_inner; |
| 362 | content: counter(num_inner); |
| 363 | |
| 364 | li { |
| 365 | &:before { |
| 366 | counter-increment: num_inner; |
| 367 | content: counter(num_inner); |
| 368 | } |
| 369 | } |
| 370 | } |
| 371 | } |
| 372 | } |
| 373 | |
| 374 | &.is-style-vk-numbered-square-mark { |
| 375 | counter-reset: number; |
| 376 | list-style-type: none; |
| 377 | |
| 378 | li { |
| 379 | --vk-numbered-marker-leading: 0px; |
| 380 | position: relative; |
| 381 | list-style: none; |
| 382 | padding-left: .5em; |
| 383 | &:before { |
| 384 | position: absolute; |
| 385 | left: -0.3em; |
| 386 | top: var( --vk-numbered-marker-leading, 0 ); |
| 387 | counter-increment: number; |
| 388 | content: counter(number); |
| 389 | margin-left: -25px; |
| 390 | background: #222; |
| 391 | color: #fff; |
| 392 | text-indent: 0; |
| 393 | display: inline-block; |
| 394 | font-weight: bold; |
| 395 | font-size: calc( 1rem * 1 ); |
| 396 | line-height: calc( 1rem * 1.8 ); |
| 397 | width: 26px; |
| 398 | height: 26px; |
| 399 | text-align: center; |
| 400 | border-radius: 2px; |
| 401 | } |
| 402 | |
| 403 | ul, |
| 404 | ol { |
| 405 | counter-reset: num_inner; |
| 406 | content: counter(num_inner); |
| 407 | |
| 408 | li { |
| 409 | &:before { |
| 410 | counter-increment: num_inner; |
| 411 | content: counter(num_inner); |
| 412 | } |
| 413 | } |
| 414 | } |
| 415 | } |
| 416 | } |
| 417 | |
| 418 | &.is-style-vk-numbered-circle-mark, |
| 419 | &.is-style-vk-numbered-square-mark { |
| 420 | --vk-numbered-default-line-height-length: calc( 1rem * 1.65 ); |
| 421 | |
| 422 | li { |
| 423 | --vk-numbered-marker-leading: max( |
| 424 | calc( |
| 425 | ( |
| 426 | var( --vk-numbered-line-height-length, var( --vk-numbered-default-line-height-length ) ) |
| 427 | - var( --vk-numbered-default-line-height-length ) |
| 428 | ) / 2 |
| 429 | ), |
| 430 | 0px |
| 431 | ); |
| 432 | } |
| 433 | |
| 434 | &.fa-lg { |
| 435 | li::before { |
| 436 | left: -0.8em; |
| 437 | } |
| 438 | } |
| 439 | |
| 440 | &.fa-2x { |
| 441 | li { |
| 442 | line-height: 1.25em; |
| 443 | } |
| 444 | |
| 445 | li::before { |
| 446 | left: -1.1em; |
| 447 | } |
| 448 | } |
| 449 | |
| 450 | &.fa-3x { |
| 451 | li { |
| 452 | line-height: 1.25em; |
| 453 | } |
| 454 | |
| 455 | li::before { |
| 456 | left: -1.4em; |
| 457 | } |
| 458 | } |
| 459 | |
| 460 | &.fa-4x { |
| 461 | li { |
| 462 | line-height: 1.25em; |
| 463 | } |
| 464 | |
| 465 | li::before { |
| 466 | left: -1.5em; |
| 467 | } |
| 468 | } |
| 469 | |
| 470 | &.fa-5x { |
| 471 | li { |
| 472 | line-height: 1.25em; |
| 473 | } |
| 474 | |
| 475 | li::before { |
| 476 | left: -1.6em; |
| 477 | } |
| 478 | } |
| 479 | } |
| 480 | |
| 481 | @each $styleClass, $faCode in $stylePalette { |
| 482 | &.#{$styleClass} { |
| 483 | li { |
| 484 | &::before { |
| 485 | @include mark-before; |
| 486 | content: $faCode; |
| 487 | left: -1.5em; |
| 488 | } |
| 489 | } |
| 490 | } |
| 491 | &.is-style-vk-default { |
| 492 | li { |
| 493 | &::before { |
| 494 | font-size: 22px; |
| 495 | line-height: 1.1em; |
| 496 | } |
| 497 | } |
| 498 | } |
| 499 | } |
| 500 | |
| 501 | // Use FA Regular weight for hollow circle look on Circle style |
| 502 | &.is-style-vk-circle-mark { |
| 503 | li::before { |
| 504 | font-weight: 400; |
| 505 | } |
| 506 | } |
| 507 | |
| 508 | @each $colorClass, $color in $colorPalette { |
| 509 | &.vk-has-#{"#{$colorClass}"}-color, |
| 510 | &.has-vk-#{"#{$colorClass}"}-color { |
| 511 | li::marker { |
| 512 | color: $color; |
| 513 | } |
| 514 | li::before { |
| 515 | color: $color; |
| 516 | } |
| 517 | } |
| 518 | |
| 519 | &.is-style-vk-numbered-circle-mark, |
| 520 | &.is-style-vk-numbered-square-mark { |
| 521 | &.vk-has-#{"#{$colorClass}"}-color, |
| 522 | &.has-vk-#{"#{$colorClass}"}-color { |
| 523 | li::before { |
| 524 | color: #fff; |
| 525 | background-color: $color; |
| 526 | } |
| 527 | } |
| 528 | } |
| 529 | |
| 530 | } |
| 531 | } |
| 532 | //ul,ol |
| 533 | |
| 534 | /*-------------------------------------------*/ |
| 535 | /* グループブロック デザイン |
| 536 | /*-------------------------------------------*/ |
| 537 | |
| 538 | @mixin pad-mag { |
| 539 | padding: 1.8em; |
| 540 | margin-top: var( --vk-margin-elem ); |
| 541 | margin-bottom: var( --vk-margin-elem ); |
| 542 | } |
| 543 | @mixin inner-item-pad-mag { |
| 544 | h2, |
| 545 | h3, |
| 546 | h4, |
| 547 | h5, |
| 548 | h6 { |
| 549 | margin-bottom: 1rem; |
| 550 | } |
| 551 | ul, |
| 552 | ol { |
| 553 | margin-top: 0; |
| 554 | li:last-child { |
| 555 | margin-bottom: 0; |
| 556 | } |
| 557 | } |
| 558 | } |
| 559 | |
| 560 | .wp-block-group { |
| 561 | h3:first-child, |
| 562 | h4:first-child { |
| 563 | margin-top: 0; |
| 564 | } |
| 565 | |
| 566 | /* *:last-child で指定するとブロックエディタでカラムの中にいれた時に枠の外にはみ出す */ |
| 567 | p, |
| 568 | ul, |
| 569 | ol, |
| 570 | dl, |
| 571 | table, |
| 572 | .wp-block-columns { |
| 573 | &:last-child { |
| 574 | margin-bottom: 0; |
| 575 | } |
| 576 | } |
| 577 | |
| 578 | @each $colorClass, $color in $colorPalette { |
| 579 | // 線の色パネル用（vk-has-*）→ テキスト色は変えない |
| 580 | &.vk-has-#{"#{$colorClass}"}-color { |
| 581 | color: inherit; |
| 582 | border-color: $color; |
| 583 | .wp-block-group__inner-container { |
| 584 | color: inherit; |
| 585 | border-color: $color; |
| 586 | } |
| 587 | } |
| 588 | // テキスト色用（has-vk-*）→ :rootルールに任せる |
| 589 | &.has-vk-#{"#{$colorClass}"}-color { |
| 590 | border-color: $color; |
| 591 | .wp-block-group__inner-container { |
| 592 | border-color: $color; |
| 593 | } |
| 594 | } |
| 595 | } |
| 596 | } //.wp-block-group |
| 597 | .is-style-vk-group { |
| 598 | &-solid { |
| 599 | border: solid 3px; |
| 600 | @include pad-mag; |
| 601 | @include inner-item-pad-mag; |
| 602 | } |
| 603 | &-solid-roundcorner { |
| 604 | border: solid 3px; |
| 605 | border-radius: 8px; |
| 606 | @include pad-mag; |
| 607 | @include inner-item-pad-mag; |
| 608 | } |
| 609 | &-dotted { |
| 610 | border: dotted 1px; |
| 611 | @include pad-mag; |
| 612 | @include inner-item-pad-mag; |
| 613 | } |
| 614 | &-dashed { |
| 615 | border: dashed 2px; |
| 616 | @include pad-mag; |
| 617 | @include inner-item-pad-mag; |
| 618 | } |
| 619 | &-double { |
| 620 | border: double 5px; |
| 621 | @include pad-mag; |
| 622 | @include inner-item-pad-mag; |
| 623 | } |
| 624 | &-stitch { |
| 625 | position: relative; |
| 626 | margin: 1em auto; |
| 627 | padding: 2.3em; |
| 628 | border-radius: 8px; |
| 629 | &::before { |
| 630 | content: ""; |
| 631 | position: absolute; |
| 632 | top: .5em; |
| 633 | left: .5em; |
| 634 | width: calc(100% - 1em); |
| 635 | height: calc(100% - 1em); |
| 636 | border: dashed 2px; |
| 637 | border-color: inherit; |
| 638 | border-radius: 8px; |
| 639 | pointer-events: none; |
| 640 | } |
| 641 | //@include inner-item-pad-mag; |
| 642 | // thema.jsonでは .wp-block-group__inner-container がつかないためコメントアウト |
| 643 | //.wp-block-group__inner-container { |
| 644 | // border: dashed 2px; |
| 645 | // border-radius: 8px; |
| 646 | // padding: 1.8em; |
| 647 | // } |
| 648 | } |
| 649 | &-top-bottom-border { |
| 650 | border-top: solid 1px; |
| 651 | border-bottom: solid 1px; |
| 652 | @include pad-mag; |
| 653 | @include inner-item-pad-mag; |
| 654 | padding-left: 0; |
| 655 | padding-right: 0; |
| 656 | } |
| 657 | &-shadow { |
| 658 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); |
| 659 | @include pad-mag; |
| 660 | @include inner-item-pad-mag; |
| 661 | } |
| 662 | &-alert-info { |
| 663 | background-color: #d9edf7; |
| 664 | color: #31708f; |
| 665 | border-radius: 3px; |
| 666 | border: 1px solid #bce8f1; |
| 667 | @include pad-mag; |
| 668 | @include inner-item-pad-mag; |
| 669 | } |
| 670 | &-alert-success { |
| 671 | background-color: #dff0d8; |
| 672 | color: #3c763d; |
| 673 | border-radius: 3px; |
| 674 | border: 1px solid #d6e9c6; |
| 675 | @include pad-mag; |
| 676 | @include inner-item-pad-mag; |
| 677 | } |
| 678 | &-alert-warning { |
| 679 | background-color: #fcf8e3; |
| 680 | color: #8a6d3b; |
| 681 | border-radius: 3px; |
| 682 | border: 1px solid #faebcc; |
| 683 | @include pad-mag; |
| 684 | @include inner-item-pad-mag; |
| 685 | } |
| 686 | &-alert-danger { |
| 687 | background-color: #f2dede; |
| 688 | color: #a94442; |
| 689 | border-radius: 3px; |
| 690 | border: 1px solid #ebccd1; |
| 691 | @include pad-mag; |
| 692 | @include inner-item-pad-mag; |
| 693 | } |
| 694 | } |
| 695 | |
| 696 | |
| 697 | /*-------------------------------------------*/ |
| 698 | /* Group Block |
| 699 | /*-------------------------------------------*/ |
| 700 | .editor-styles-wrapper .wp-block-group { |
| 701 | // これがないとコアに勝手にwidthが左右1em余白をあけられる |
| 702 | // → だがしかし Grid Column 2 で中の要素が勝手に小さくされるので一旦コメントアウト |
| 703 | .wp-block{ |
| 704 | // width:auto; |
| 705 | } |
| 706 | } |
| 707 | |
| 708 | /*-------------------------------------------*/ |
| 709 | /* YouTube |
| 710 | /*-------------------------------------------*/ |
| 711 | .wp-block-embed { |
| 712 | &-youtube { |
| 713 | iframe { |
| 714 | width: 100%; |
| 715 | } |
| 716 | } |
| 717 | } |
| 718 | |
| 719 | .has-text-align-right { |
| 720 | text-align: right; |
| 721 | } |
| 722 | .has-text-align-left { |
| 723 | text-align: left; |
| 724 | } |
| 725 | .has-text-align-center { |
| 726 | text-align: center; |
| 727 | } |
| 728 | |
| 729 | /*-------------------------------------------*/ |
| 730 | /* ソーシャルアイコン |
| 731 | /*-------------------------------------------*/ |
| 732 | .wp-block-social-links{ |
| 733 | flex-wrap: wrap; |
| 734 | } |
| 735 | |
| 736 | /*-------------------------------------------*/ |
| 737 | /* Swiper |
| 738 | /*-------------------------------------------*/ |
| 739 | :root { |
| 740 | --vk-color-background-white-translucent:rgba(255, 255, 255, 0.5); |
| 741 | } |
| 742 | |
| 743 | // Painted size of the navigation buttons. The pagination's side clearance is derived from |
| 744 | // it, so the arrow size and the space reserved for it can never drift apart. |
| 745 | //ナビゲーションボタンの描画サイズ。ページネーションの左右クリアランスをここから算出するため、 |
| 746 | //矢印のサイズと確保する余白がずれることがない。 |
| 747 | $swiper-nav-size: 2.4rem; |
| 748 | |
| 749 | // Distance every overlay control (arrows, pause/play button) keeps from the edge of the slider. |
| 750 | // Kept in one place so the controls cannot drift apart when one of them is touched. It is |
| 751 | // exposed as --vk-slider-edge-offset so a theme or user CSS can move every control at once: |
| 752 | // the arrows, the pause/play button, the space the pagination leaves for the arrows and the |
| 753 | // pagination's own distance from the bottom edge all follow the same value. |
| 754 | // The variable is declared nowhere, only read with a fallback, so it can be set on any |
| 755 | // ancestor — inheritance is the point here, unlike the pagination variables further down, |
| 756 | // which are deliberately scoped so they cannot reach a nested slider. It applies to the Post |
| 757 | // List Slider (Pro) too, since both blocks share these rules. |
| 758 | // It has to be a length (10px, 1rem …). A unitless value such as 10 would make the clearance |
| 759 | // calc() invalid at computed-value time, which is what the @property registration below |
| 760 | // guards against — a var() fallback alone does not cover an invalid value. Note that a |
| 761 | // unitless 0 is a valid <length>, so it is honoured as 0px rather than falling back; the |
| 762 | // clamp on the value below is what keeps a negative value from reopening the hole this offset |
| 763 | // exists to close (a negative clearance clamps padding to 0, letting the arrow's hit area |
| 764 | // swallow the first bullet's taps again). |
| 765 | // Raising it eats horizontal space on narrow screens, so the number of bullets that fit on |
| 766 | // one line falls as the value rises; the bullets wrap onto a second row once that number |
| 767 | // drops below the slide count. Where that happens therefore depends on how many slides the |
| 768 | // slider has, not on a fixed threshold value. |
| 769 | //スライダー上に重ねるコントロール（矢印・停止/再生ボタン）が端から空ける距離。 |
| 770 | //片方だけ触って静かにずれることが無いよう 1 箇所にまとめる。テーマやユーザー CSS から |
| 771 | //まとめて動かせるよう --vk-slider-edge-offset として� |
| 772 | �開し、矢印・停止/再生ボタン・ |
| 773 | //ページネーションが矢印のために空ける左右の余白・ページネーション自身の下端からの距離が、 |
| 774 | //すべて同じ値に追従する。変数はどこにも宣言せずフォールバック付きで |
| 775 | //参� |
| 776 | �するだけなので、任意の祖� |
| 777 | �要素で指定できる。これらのルールは投稿リストスライダー（Pro）と |
| 778 | //� |
| 779 | �通のため、Pro にも同じように効く（後述のページネーション用の変数は� |
| 780 | �れ子のスライダーに |
| 781 | //届かないよう意図的にスコープを絞っているが、この変数は逆に継承させるのが目的）。 |
| 782 | //指定は長さ（10px・1rem など）で行う。10 のような単位なしの値ではクリアランスの |
| 783 | //calc() が計算時に無効になるため、下の @property 登録でそれを防いでいる |
| 784 | //（var() のフォールバックは「未定義」の時しか効かず、不正値は救えない）。 |
| 785 | //なお単位なしの 0 は <length> として妥当なため、フォールバックせず 0px として効く。 |
| 786 | //負の値も <length> として通ってしまい、クリアランスが負になると padding は 0 に |
| 787 | //クランプされて「当たり判定が� |
| 788 | �頭 bullet のタップを奪う」——このオフセットが |
| 789 | //塞いだはずの穴——が変数経由で再現するため、下の値で 0 を下限にしている。 |
| 790 | //値を上げると狭い画面では横� |
| 791 | を消費するぶん 1 行に並ぶ bullets の枚数が減り、 |
| 792 | //枚数がスライド数を下回った時点で 2 行に折り返す。つまり折り返しが起きる値は |
| 793 | //スライドの枚数によって決まり、固定のしきい値があるわけではない。 |
| 794 | $swiper-edge-offset: 10px; |
| 795 | $swiper-edge-offset-var: max(0px, var(--vk-slider-edge-offset, #{$swiper-edge-offset})); |
| 796 | |
| 797 | // Registering the custom property makes an invalid or unitless value fall back to the |
| 798 | // default instead of invalidating the whole declaration it is used in — without this, |
| 799 | // `--vk-slider-edge-offset: 10` drops the pagination's padding to 0 (bullets slide under |
| 800 | // the arrows) while the arrows' own offset still falls back, so the breakage is uneven and |
| 801 | // hard to trace. inherits: true is mandatory here: the default is false, which would stop a |
| 802 | // value set on an ancestor from reaching the controls at all. |
| 803 | //カスタムプロパティを登録しておくと、不正値・単位なしの値が指定された時に「その宣言� |
| 804 | �体が |
| 805 | //無効」になるのではなく既定値へフォールバックする。これが無いと |
| 806 | //`--vk-slider-edge-offset: 10` でページネーションの padding だけが 0 に落ちて |
| 807 | //（bullets が矢印の下に潜る）、矢印側はフォールバックが効く、という不揃いな壊れ方になり |
| 808 | //原因を追いにくい。inherits: true は� |
| 809 | 須で、既定の false では祖� |
| 810 | �で指定した値が |
| 811 | //コントロールに届かなくなる。 |
| 812 | // Note that @property is not supported below Safari 16.4 / Firefox 128, so on those the |
| 813 | // uneven fallback described above still happens for a unitless value. Valid lengths behave |
| 814 | // the same everywhere. |
| 815 | //なお @property は Safari 16.4 未満・Firefox 128 未満では効かないため、それらのブラウザでは |
| 816 | //単位なしの値を指定した場合に上記の不揃いなフォールバックが依然として起きる。 |
| 817 | //正しい長さを指定している限り、どのブラウザでも挙動は同じ。 |
| 818 | @property --vk-slider-edge-offset { |
| 819 | syntax: "<length>"; |
| 820 | inherits: true; |
| 821 | initial-value: #{$swiper-edge-offset}; |
| 822 | } |
| 823 | |
| 824 | // Swiper's own defaults for how far the pagination sits from the bottom edge (8px for |
| 825 | // bullets, and the value below for the fraction counter, which vk-blocks sets itself). |
| 826 | // The pagination follows --vk-slider-edge-offset only by the amount the value is raised |
| 827 | // above its 10px default, so the default layout does not move: reading the variable |
| 828 | // directly would shift the bullets from 8px to 10px on every existing slider. Without this |
| 829 | // the arrows would move away from the bottom edge while the bullets stayed put, leaving the |
| 830 | // arrows above the bullet row and the side clearance reserved for nothing. |
| 831 | //ページネーションが下端から空ける距離の既定値（bullets は Swiper 既定の 8px、 |
| 832 | //スライド枚数表示は vk-blocks 側で指定している下の値）。 |
| 833 | //ページネーションは --vk-slider-edge-offset を「既定の 10px から上げたぶん」だけ追従する。 |
| 834 | //変数をそのまま読むと既存のすべてのスライダーで bullets が 8px から 10px へ動いてしまうため、 |
| 835 | //既定の見た目を変えないためにこの形にしている。追従させないと、値を上げた時に矢印だけが |
| 836 | //下端から離れて bullets が取り残され、矢印が bullet 列の上に来たうえ、 |
| 837 | //左右に確保したクリアランスが誰のためでもない余白になる。 |
| 838 | $swiper-pagination-bullets-bottom: 8px; |
| 839 | $swiper-pagination-fraction-bottom: 5px; |
| 840 | // 「既定値」と「既定値＋上げたぶん」の大きい方。 |
| 841 | // calc() 側だけで「既定の 10px なら既定値のまま」は成立するので、max() は別の意思決定 |
| 842 | // ——「既定より小さい値でもページネーションを既定位置より下げない」ための下限クランプ—— |
| 843 | // である。0 や負の値で bullets が下端からはみ出して切れるのを防ぐのが目的で、 |
| 844 | // そのぶん下方向には追従しない（矢印だけが端に寄る）非対称な挙動になる。 |
| 845 | // The calc() alone already keeps the default in place at the default 10px, so max() is a |
| 846 | // separate decision: it clamps the pagination so it never sits closer to the bottom edge |
| 847 | // than its default, which is what stops 0 or negative values from pushing the bullets |
| 848 | // outside the slider. The trade-off is that it does not follow downwards — below 10px only |
| 849 | // the arrows and the pause/play button move closer to the edge. |
| 850 | $swiper-pagination-bullets-bottom-var: max(#{$swiper-pagination-bullets-bottom}, calc(#{$swiper-edge-offset-var} - #{$swiper-edge-offset} + #{$swiper-pagination-bullets-bottom})); |
| 851 | $swiper-pagination-fraction-bottom-var: max(#{$swiper-pagination-fraction-bottom}, calc(#{$swiper-edge-offset-var} - #{$swiper-edge-offset} + #{$swiper-pagination-fraction-bottom})); |
| 852 | |
| 853 | // Minimum pointer target size (WCAG 2.1 SC 2.5.5 Target Size, AAA / Apple HIG 44pt). |
| 854 | // This is applied as an invisible hit area, not by enlarging the button itself: WCAG |
| 855 | // measures the target, not the painted box. Growing the painted button would also widen |
| 856 | // the clearance the bullets have to leave for it, which measurably reduced how many |
| 857 | // bullets fit on mobile — this way both are satisfied at once. |
| 858 | //ポインタターゲットの最小サイズ（WCAG 2.1 SC 2.5.5・AAA / Apple HIG 44pt）。 |
| 859 | //ボタン自体を大きくするのではなく不可視の当たり判定として付与する。WCAG が測るのは |
| 860 | //ターゲットであって描画ボックスではないため。描画サイズを大きくすると bullets が |
| 861 | //空けるべきクリアランスまで広がり、実測でモバイルの bullets 収容数が減ってしまうので、 |
| 862 | //この方法なら見た目・収容数を変えずに両立できる。 |
| 863 | $swiper-touch-target: 44px; |
| 864 | |
| 865 | // Expands the pointer target to $swiper-touch-target without changing the painted size. |
| 866 | //描画サイズを変えずにポインタターゲットだけを $swiper-touch-target まで広げる。 |
| 867 | @mixin vk-slider-touch-target { |
| 868 | &::before { |
| 869 | content: ""; |
| 870 | position: absolute; |
| 871 | top: 50%; |
| 872 | left: 50%; |
| 873 | transform: translate(-50%, -50%); |
| 874 | width: max(100%, #{$swiper-touch-target}); |
| 875 | height: max(100%, #{$swiper-touch-target}); |
| 876 | } |
| 877 | } |
| 878 | |
| 879 | // Focus ring shared by every keyboard-reachable slider control (pagination bullets, |
| 880 | // navigation arrows, pause/play button). All of them sit on arbitrary photos, so a |
| 881 | // single-coloured ring can disappear on an image of the same tone. The ring is therefore a |
| 882 | // dark line with a white halo outside it, which keeps the focus position visible against |
| 883 | // both dark and light images (WCAG 2.1 SC 2.4.7 / SC 1.4.11). |
| 884 | //キーボードで到達できるスライダーのコントロール（ページネーションの bullets・ナビゲーション矢印・ |
| 885 | //停止/再生ボタン）で� |
| 886 | �有するフォーカスリング。いずれも任意の写真の上に載るため、単色のリングでは |
| 887 | //同系色の画像で消えてしまう。そのため暗い線の外側に白いハローを置き、暗い写真・明るい写真の |
| 888 | //どちらでもフォーカス位置が分かるようにする（WCAG 2.1 SC 2.4.7 / SC 1.4.11）。 |
| 889 | // |
| 890 | // The ring colour is a literal, not var(--vk-color-text-body): that variable is supplied by |
| 891 | // vk-component and the Lightning themes, so a theme that sets a light body colour (or one |
| 892 | // that turns vk-components off, leaving it undefined) would produce a white ring inside a |
| 893 | // white halo — no focus indicator at all on a light image. The bullets themselves are also |
| 894 | // fixed colours (#ccc / #666), so the ring has no theme colour to follow in the first place. |
| 895 | //リング色は var(--vk-color-text-body) ではなくリテラルにしている。この変数は vk-component や |
| 896 | //Lightning 系テーマが供給するもので、本文色に明るい色を設定したテーマ（あるいは vk-components を |
| 897 | //切って未定義になったテーマ）では「白いリング＋白いハロー」になり、明るい画像の上でフォーカス表示が |
| 898 | //皆無になる。bullets 自身も #ccc / #666 の固定色なので、そもそもリングが追従すべきテーマ色は無い。 |
| 899 | // |
| 900 | // The outer spread has to clear the ring's outer edge to be visible at all: outline-offset |
| 901 | // 2px plus outline-width 2px puts that edge 4px out, and the outline is painted over the |
| 902 | // box-shadow, so a 4px spread would sit entirely underneath it. 6px leaves 2px of white |
| 903 | // outside the ring. The bullet gap is 8px on mobile and 10px on PC, so it still does not |
| 904 | // reach the neighbouring bullet. |
| 905 | //外側の広がりはリングの外端を越えないと見えない。outline-offset 2px ＋ outline-width 2px で |
| 906 | //リングの外端は 4px の位置にあり、outline は box-shadow の上に描かれるため、4px では |
| 907 | //ハローが完� |
| 908 | �に隠れてしまう。6px にするとリングの外側に白が 2px 残る。bullet の間隔は |
| 909 | //モバイル 8px・PC 10px あるため、隣の bullet には届かない。 |
| 910 | // |
| 911 | // The inner 1px shadow reproduces the translucent white hairline that `outline` replaces on |
| 912 | // the bullets (`outline` is a single property, so the focus ring overwrites the permanent |
| 913 | // one). On the arrows and the pause/play button there is no permanent hairline, so it simply |
| 914 | // becomes the inner half of the same sandwich. |
| 915 | //� |
| 916 | 側の 1px は、bullets で `outline` が置き換えてしまう半透明の白ヘアラインを再現するためのもの |
| 917 | //（`outline` は単一プロパティなので、フォーカスリングが常時のヘアラインを上書きする）。矢印と |
| 918 | //停止/再生ボタンには常時のヘアラインが無いため、同じサンドイッチの� |
| 919 | 側の層になるだけ。 |
| 920 | // |
| 921 | // The two shadow layers deliberately differ in where their colour comes from. The outer halo |
| 922 | // is a literal for the same reason the ring is: if a theme overrode |
| 923 | // --vk-color-background-white-translucent with a dark colour, the sandwich would become |
| 924 | // "dark ring + dark halo" and the focus position would vanish on a light image — the exact |
| 925 | // hole this ring was added to close, reopened through another door. The inner 1px keeps the |
| 926 | // variable because its job is to reproduce the permanent hairline above, which reads the same |
| 927 | // variable: if a theme changes that hairline, this layer has to follow it. |
| 928 | //2 つの影は色の出どころをあえて変えている。外側のハローをリテラルにするのはリングと同じ理由で、 |
| 929 | //テーマが --vk-color-background-white-translucent を暗い色に上書きすると「暗いリング＋暗いハロー」 |
| 930 | //になり、明るい画像の上でフォーカス位置が消える（このリングで塞いだ穴が別経路で再現する）。 |
| 931 | //� |
| 932 | 側の 1px を変数のままにするのは、その役割が上の常時ヘアライン（同じ変数を読む）の再現だから。 |
| 933 | //テーマがヘアラインを変えたなら、この層も追従しなければならない。 |
| 934 | $swiper-focus-ring-color: #333; |
| 935 | $swiper-focus-ring-halo-color: rgba(255, 255, 255, 0.5); |
| 936 | |
| 937 | @mixin vk-slider-focus-ring { |
| 938 | &:focus-visible { |
| 939 | outline: 2px solid $swiper-focus-ring-color; |
| 940 | outline-offset: 2px; |
| 941 | box-shadow: |
| 942 | 0 0 0 1px var(--vk-color-background-white-translucent), |
| 943 | 0 0 0 6px $swiper-focus-ring-halo-color; |
| 944 | } |
| 945 | } |
| 946 | |
| 947 | // The injected SVG draws a thinner stroke than the icon font used up to Swiper v11, and it |
| 948 | // sits on a translucent white circle over arbitrary photos, so the contrast against the |
| 949 | // slide (WCAG 2.1 SC 1.4.11) depends on the image. Scaling the arrow up slightly thickens |
| 950 | // the stroke and brings it back to roughly the previous weight. The circle's opacity is |
| 951 | // left alone on purpose — it comes from a shared variable used by other controls too. |
| 952 | //注� |
| 953 | �される SVG は Swiper v11 までのアイコンフォントより線が細く、任意の写真の上に置かれた |
| 954 | //半透明の白丸に載るため、スライドとのコントラスト（WCAG 2.1 SC 1.4.11）が画像に左右される。 |
| 955 | //矢印を少し大きくすると線も太くなり、従来の見た目に近づく。白丸の不透明度は他のコントロールでも |
| 956 | //使う� |
| 957 | �通変数のため、あえて触っていない。 |
| 958 | $swiper-arrow-height: 1.4rem; |
| 959 | |
| 960 | // Arrow icon used as a mask when Swiper has not injected its own SVG yet. |
| 961 | // The shape matches the SVG Swiper v12+ injects, so both look identical. |
| 962 | //Swiper がまだ SVG を注� |
| 963 | �していない時にマスクとして使う矢印アイコン。 |
| 964 | //Swiper v12 以降が注� |
| 965 | �する SVG と同じ形なので、どちらでも見た目は同じになる。 |
| 966 | $swiper-arrow-icon: "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011%2020'%3E%3Cpath%20d='M0.38296%2020.0762C0.111788%2019.805%200.111788%2019.3654%200.38296%2019.0942L9.19758%2010.2796L0.38296%201.46497C0.111788%201.19379%200.111788%200.754138%200.38296%200.482966C0.654131%200.211794%201.09379%200.211794%201.36496%200.482966L10.4341%209.55214C10.8359%209.9539%2010.8359%2010.6053%2010.4341%2011.007L1.36496%2020.0762C1.09379%2020.3474%200.654131%2020.3474%200.38296%2020.0762Z'%20fill='%23000'/%3E%3C/svg%3E"; |
| 967 | |
| 968 | // Slider container |
| 969 | // ----------------------------------------------------------------------------- |
| 970 | .vk_slider, |
| 971 | .vk_post_list_slider { |
| 972 | //� |
| 973 | �通ではないためvk_sliderの中に格納 |
| 974 | height: auto; //100%だとサイトエディター画面でおかしくなるのでautoに |
| 975 | position: relative; |
| 976 | |
| 977 | .swiper-wrapper { |
| 978 | height: auto; //100%だとおかしくなるのでautoに |
| 979 | transition-timing-function: cubic-bezier(0.77, 0.2, 0.05, 1); |
| 980 | } |
| 981 | |
| 982 | // Next and previous buttons for vk_slider. |
| 983 | //vk_slider用のnextとprevボタン |
| 984 | .swiper-button-next, |
| 985 | .swiper-button-prev { |
| 986 | // Swiper derives the button's width, height and vertical centering offset from this |
| 987 | // variable, so setting it alone is enough — no separate width/height is needed. |
| 988 | //Swiper はこの変数からボタンの� |
| 989 | ・高さ・上下中央寄せのオフセットを算出するため、 |
| 990 | //この 1 本を指定すれば足り、width/height を別途書く� |
| 991 | 要はない。 |
| 992 | --swiper-navigation-size: #{$swiper-nav-size}; |
| 993 | |
| 994 | // Swiper's default sides offset changed from 10px (v11) to 4px (v14). Pin it to the |
| 995 | // shared edge offset so the arrows keep their previous position and stay aligned with |
| 996 | // .swiper-pause-button. Declaring Swiper's own variable on the element would beat any |
| 997 | // value inherited from an ancestor, so the override goes through --vk-slider-edge-offset, |
| 998 | // which every control reads — setting it moves the arrows, the pause/play button and the |
| 999 | // pagination clearance together instead of just one of them. |
| 1000 | //Swiper 既定の左右オフセットは v11 の 10px から v14 で 4px に変わったため、� |
| 1001 | �通の |
| 1002 | //端オフセットに固定し、停止/再生ボタン（.swiper-pause-button）と端からの距離を揃える。 |
| 1003 | //Swiper 自身の変数を要素に直接宣言すると祖� |
| 1004 | �からの継承に� |
| 1005 | ず勝ってしまうため、上書きは |
| 1006 | //� |
| 1007 | �コントロールが読む --vk-slider-edge-offset 経由にする。これにより矢印だけでなく |
| 1008 | //停止/再生ボタン・ページネーションのクリアランスも一緒に動く。 |
| 1009 | --swiper-navigation-sides-offset: #{$swiper-edge-offset-var}; |
| 1010 | |
| 1011 | // The fallback is required: vk-blocks itself does not define --vk-color-text-body (it is |
| 1012 | // commented out in class-vk-blocks-print-css-variables.php); vk-component and the |
| 1013 | // Lightning themes supply it. On a theme that turns vk-components off via the |
| 1014 | // vk_blocks_should_load_vk_components filter it is undefined, this declaration is |
| 1015 | // invalid at computed-value time and `color` falls back to the inherited value — which |
| 1016 | // can be light, leaving the arrow invisible on the translucent white circle. |
| 1017 | //フォールバックは� |
| 1018 | 須。--vk-color-text-body は vk-blocks 自身では定義しておらず |
| 1019 | //（class-vk-blocks-print-css-variables.php でコメントアウト）、vk-component や |
| 1020 | //Lightning 系テーマが供給している。vk_blocks_should_load_vk_components フィルタで |
| 1021 | //vk-components を切ったテーマでは未定義になり、この宣言が計算時に無効化されて `color` は |
| 1022 | //継承値に落ちる。継承値が明るい色だと半透明の白丸の上で矢印が見えなくなる。 |
| 1023 | color: var(--vk-color-text-body, #333); |
| 1024 | background-color: var(--vk-color-background-white-translucent); |
| 1025 | border-radius: var(--vk-size-radius); |
| 1026 | background-image: none; |
| 1027 | z-index: 20; |
| 1028 | |
| 1029 | // 見た目は変えずに当たり判定だけ 44px 角にする |
| 1030 | @include vk-slider-touch-target; |
| 1031 | |
| 1032 | // bullets と同じフォーカスリング。矢印は role="button" tabindex="0" でフォーカスできる。 |
| 1033 | @include vk-slider-focus-ring; |
| 1034 | |
| 1035 | // Since Swiper v12 the arrow is an injected SVG (.swiper-navigation-icon) instead of |
| 1036 | // an ::after icon font. Its viewBox is 11:20, so only the height is fixed and the |
| 1037 | // width follows the aspect ratio instead of being letterboxed into a square. |
| 1038 | //Swiper v12 以降、矢印は ::after のアイコンフォントではなく注� |
| 1039 | �される SVG（.swiper-navigation-icon）になった。 |
| 1040 | //viewBox が 11:20 のため、正方形に収めてレターボックスさせず、高さだけを固定して� |
| 1041 | は比率に従わせる。 |
| 1042 | .swiper-navigation-icon { |
| 1043 | height: $swiper-arrow-height; |
| 1044 | width: auto; |
| 1045 | } |
| 1046 | |
| 1047 | // Swiper injects the arrow SVG on initialization, and only into an empty button. |
| 1048 | // The block editor preview does not initialize Swiper, so the button would stay |
| 1049 | // empty and show no arrow at all (up to Swiper v11 the arrow came from a CSS icon |
| 1050 | // font, so it rendered without JS). Draw the same arrow here while the button is |
| 1051 | // empty; once the SVG is injected the button is no longer :empty and this stops. |
| 1052 | //Swiper は初期化時に、中身が空のボタンにだけ矢印 SVG を注� |
| 1053 | �する。 |
| 1054 | //ブロックエディタのプレビューでは Swiper を初期化しないため、そのままだと |
| 1055 | //ボタンが空のままで矢印が出ない（v11 まではアイコンフォント＝CSS だけで描画できていた）。 |
| 1056 | //そこで中身が空の間だけ同じ形の矢印を描画する。SVG 注� |
| 1057 | �後は :empty でなくなり自動的に無効になる。 |
| 1058 | &:where(:empty)::after { |
| 1059 | content: ""; |
| 1060 | // height と aspect-ratio はインラインボックスには効かないため、明示的に |
| 1061 | // 非インラインにする。Swiper 側のボタンが display:flex なので現状は |
| 1062 | // フレックスアイテムとして blockify され結果的に効いているが、それに |
| 1063 | // 依存すると Swiper のボタンのスタイルが変わった時に静かに矢印が消える。 |
| 1064 | //This pseudo-element needs a non-inline display for height / aspect-ratio to |
| 1065 | //apply. Swiper's own button is display:flex, so it is blockified as a flex item |
| 1066 | //today — relying on that would silently drop the arrow if Swiper changes it. |
| 1067 | display: block; |
| 1068 | height: $swiper-arrow-height; |
| 1069 | aspect-ratio: 11 / 20; //注� |
| 1070 | �される SVG の viewBox と同じ比率 |
| 1071 | background-color: currentColor; |
| 1072 | -webkit-mask: url($swiper-arrow-icon) no-repeat center / contain; |
| 1073 | mask: url($swiper-arrow-icon) no-repeat center / contain; |
| 1074 | } |
| 1075 | |
| 1076 | // Keep arrows fixed at the bottom on all devices. |
| 1077 | //� |
| 1078 | �デバイスで矢印を下部固定 |
| 1079 | &.swiper-button-always-bottom { |
| 1080 | top: unset; |
| 1081 | bottom: $swiper-edge-offset-var; |
| 1082 | } |
| 1083 | } |
| 1084 | |
| 1085 | // The prev arrow reuses the same icon, rotated 180 degrees. It sits outside the |
| 1086 | // `.swiper-button-next, .swiper-button-prev` nest above on purpose, because the rotation must |
| 1087 | // apply to the prev arrow only — inside that nest the declaration would reach both arrows and |
| 1088 | // point the next arrow backwards. (Writing it there as `&.swiper-button-prev` would scope it |
| 1089 | // correctly but also emit a `.swiper-button-next.swiper-button-prev` branch that no element |
| 1090 | // can match: harmless, yet dead output that reads as if such an element existed.) |
| 1091 | //prev は同じアイコンを 180 度回して使う。上の `.swiper-button-next, .swiper-button-prev` の |
| 1092 | //ネストの外に置くのは、この回転を prev だけに効かせる� |
| 1093 | 要があるため。ネスト� |
| 1094 | に書くと |
| 1095 | //next にも掛かり、next の矢印が逆向きになってしまう。 |
| 1096 | //（ネスト� |
| 1097 | で `&.swiper-button-prev` と書けば対象は正しく絞れるが、どの要素にも一致しない |
| 1098 | //`.swiper-button-next.swiper-button-prev` の分岐まで出力される。害は無いものの、 |
| 1099 | //そういう要素が存在するかのように読める死んだ出力が残る。） |
| 1100 | .swiper-button-prev:where(:empty)::after { |
| 1101 | transform: rotate(180deg); |
| 1102 | } |
| 1103 | } |
| 1104 | |
| 1105 | //vk_slider用の自動再生 停止/再生ボタン |
| 1106 | //矢印ボタンと同じ見た目で、ページネーションや矢印と干渉しにくい右上に� |
| 1107 | �置する |
| 1108 | .vk_slider, |
| 1109 | .vk_post_list_slider { |
| 1110 | .swiper-pause-button { |
| 1111 | position: absolute; |
| 1112 | top: $swiper-edge-offset-var; |
| 1113 | right: $swiper-edge-offset-var; |
| 1114 | left: auto; |
| 1115 | z-index: 20; |
| 1116 | display: flex; |
| 1117 | align-items: center; |
| 1118 | justify-content: center; |
| 1119 | width: $swiper-nav-size; |
| 1120 | height: $swiper-nav-size; |
| 1121 | padding: 0; |
| 1122 | border: none; |
| 1123 | cursor: pointer; |
| 1124 | // 矢印と同じ理由でフォールバックを付ける（上の .swiper-button-next / -prev のコメント参� |
| 1125 | �）。 |
| 1126 | //Same fallback as the arrows — see the comment on .swiper-button-next / -prev above. |
| 1127 | color: var(--vk-color-text-body, #333); |
| 1128 | background-color: var(--vk-color-background-white-translucent); |
| 1129 | border-radius: var(--vk-size-radius); |
| 1130 | |
| 1131 | // 矢印ボタンと同じく、見た目は変えずに当たり判定だけ 44px 角にする |
| 1132 | @include vk-slider-touch-target; |
| 1133 | |
| 1134 | // bullets・矢印と同じフォーカスリング。 |
| 1135 | @include vk-slider-focus-ring; |
| 1136 | |
| 1137 | .vk_slider_pauseButton_icon { |
| 1138 | width: $swiper-arrow-height; |
| 1139 | height: $swiper-arrow-height; |
| 1140 | fill: currentColor; |
| 1141 | } |
| 1142 | //再生中（既定）は停止アイコンのみ表示し、再生アイコンは隠す |
| 1143 | .vk_slider_pauseButton_icon-play { |
| 1144 | display: none; |
| 1145 | } |
| 1146 | //停止中は再生アイコンを表示し、停止アイコンを隠す |
| 1147 | &.is-paused { |
| 1148 | .vk_slider_pauseButton_icon-pause { |
| 1149 | display: none; |
| 1150 | } |
| 1151 | .vk_slider_pauseButton_icon-play { |
| 1152 | display: block; |
| 1153 | } |
| 1154 | } |
| 1155 | } |
| 1156 | } |
| 1157 | |
| 1158 | // vk_width-full を出力していた頃（〜1.34.1）の保存済みコンテンツ向けの互換ルール。 |
| 1159 | // 起点は Swiper 由来の旧クラス .swiper-container ではなく、当時から一貫して付いている |
| 1160 | // .vk_slider にする（新しい保存出力からは .swiper-container を削除したため / #3069）。 |
| 1161 | // Compatibility rule for content saved back when vk_width-full was emitted (up to 1.34.1). |
| 1162 | // It is anchored on .vk_slider — present in every version — instead of Swiper's legacy |
| 1163 | // .swiper-container class, which the current save output no longer emits (#3069). |
| 1164 | .vk_slider.vk_width-full { |
| 1165 | //� |
| 1166 | �� |
| 1167 | の時 |
| 1168 | margin: 0 calc(50% - 50vw); |
| 1169 | width: 100vw; |
| 1170 | } |
| 1171 | |
| 1172 | // Slides |
| 1173 | // ----------------------------------------------------------------------------- |
| 1174 | // Slides are laid out as a column box so that inner blocks stack and stay vertically |
| 1175 | // centered regardless of how tall the slide content is. |
| 1176 | //スライドの中身の高さに関わらずインナーブロックが縦に積まれ上下中央に収まるよう、縦方向のボックスにする。 |
| 1177 | .swiper-slide { |
| 1178 | height: auto; //100%だとおかしくなるのでautoに |
| 1179 | font-size: 18px; |
| 1180 | display: flex; |
| 1181 | align-items: center; |
| 1182 | flex-direction: column; |
| 1183 | } |
| 1184 | |
| 1185 | // Pagination (bullets) |
| 1186 | // ============================================================================= |
| 1187 | // The old selectors were anchored on .swiper-container-horizontal, which Swiper renamed |
| 1188 | // in v8, so they had stopped matching. They are re-anchored on the block's own class |
| 1189 | // instead of the new .swiper-horizontal because Swiper is never initialized vertically |
| 1190 | // here (no direction option is passed) and, in the block editor, Swiper is initialized on |
| 1191 | // an inner element so .swiper-horizontal never lands on the block root itself. |
| 1192 | //旧セレクタは Swiper が v8 でリネームした .swiper-container-horizontal を起点にしていたため不発だった。 |
| 1193 | //新クラス .swiper-horizontal ではなくブロック自身のクラスを起点にするのは、direction オプションを |
| 1194 | //渡しておらず縦スライダーが存在しないことと、ブロックエディタでは Swiper が� |
| 1195 | 側の要素に初期化されるため |
| 1196 | //.swiper-horizontal がブロックのルート自体には付かないため。 |
| 1197 | |
| 1198 | // The conditions that mean "the arrows sit at the bottom", kept in one place. The clearance |
| 1199 | // and the bullet shrink that pays for it must always match; splitting these apart is what |
| 1200 | // previously left always-bottom with the clearance but not the smaller bullets. |
| 1201 | //「矢印が下部にある」という条件を 1 箇所にまとめる。クリアランスと、その分を取り戻すための |
| 1202 | //bullet 縮小は常に一致していなければならず、これを別� |
| 1203 | に書いたことが |
| 1204 | //always-bottom にクリアランスだけ効いて bullet が縮まない不� |
| 1205 | �合の原因だった。 |
| 1206 | // Each variable stays a single selector — the comma lives inside :has(), which takes a |
| 1207 | // relative selector list — so they behave the same wherever they are interpolated. A |
| 1208 | // top-level comma would silently split the compound selector when used outside :where(). |
| 1209 | //カンマは相対セレクタリストを取れる :has() の� |
| 1210 | 側に置き、各変数を単一セレクタに保つ。 |
| 1211 | //トップレベルにカンマがあると :where() の外で使ったときにセレクタが分割され、 |
| 1212 | //`.vk_slider` が外れた条件が黙って過剰マッチしてしまう。 |
| 1213 | // These are always interpolated inside :where(), which IS forgiving: on a browser without |
| 1214 | // :has() support the unknown :has() is dropped from the list and :where() ends up empty, so |
| 1215 | // the rule stays valid but matches nothing. The clearance and the bullet shrink therefore |
| 1216 | // never apply one without the other — the pagination simply keeps the layout it had before |
| 1217 | // this change, which is the same kind of safe degradation as the @property note further up. |
| 1218 | // Note that it is :where() providing this, not :has(): taking :where() off would make the |
| 1219 | // whole selector invalid instead. |
| 1220 | //これらは� |
| 1221 | ず forgiving な `:where()` の� |
| 1222 | 側に補間する。`:has()` 非対応ブラウザでは |
| 1223 | //未知の `:has()` がリストから捨てられて `:where()` が空になるため、ルール自体は有効なまま |
| 1224 | //どの要素にも一致しない。そのため左右クリアランスと bullet 縮小が片方だけ適用されることはなく、 |
| 1225 | //ページネーションはこの変更前と同じレイアウトのまま残る（上の @property の注記と同じく安� |
| 1226 | �に劣化する）。 |
| 1227 | //この安� |
| 1228 | �な劣化を� |
| 1229 | 保しているのは `:has()` ではなく `:where()` である点に注意。`:where()` を |
| 1230 | //外すとセレクタ� |
| 1231 | �体が無効になる。 |
| 1232 | //:has() が使えるのは Chrome / Edge 105 以降・Safari 15.4 以降・Firefox 121 以降。 |
| 1233 | $swiper-nav-mobile-bottom-class: ".swiper-button-mobile-bottom"; |
| 1234 | $swiper-nav-always-bottom-class: ".swiper-button-always-bottom"; |
| 1235 | $swiper-nav-mobile-bottom: ":has(> #{$swiper-nav-mobile-bottom-class})"; |
| 1236 | $swiper-nav-always-bottom: ":has(> #{$swiper-nav-always-bottom-class})"; |
| 1237 | $swiper-nav-bottom-any: ":has(> #{$swiper-nav-mobile-bottom-class}, > #{$swiper-nav-always-bottom-class})"; |
| 1238 | |
| 1239 | // Side clearance so the bullets do not run underneath the arrow buttons. |
| 1240 | // Only applied when the arrows are actually at the bottom, i.e. on the same row as the |
| 1241 | // bullets. Reserving it unconditionally would waste roughly 100px even when the arrows are |
| 1242 | // hidden or vertically centered, which noticeably reduces how many bullets fit on mobile. |
| 1243 | //矢印ボタンの下に bullets が潜り込まないようにするための左右の余白。 |
| 1244 | //矢印が実際に下部にある（＝bullets と同じ高さに並ぶ）時だけ適用する。 |
| 1245 | //無条件に確保すると、矢印が無い(hide)・上下中央(center)の時にも約100px を消費してしまい、 |
| 1246 | //特にモバイルで並べられる bullets の枚数が無駄に減るため。 |
| 1247 | @mixin vk-slider-pagination-arrow-clearance { |
| 1248 | // Derived from the arrow's actual geometry so it cannot drift: the edge offset, plus the |
| 1249 | // distance to the arrow's centre, plus half of whatever is wider — the painted button or |
| 1250 | // its 44px pointer target. Reserving only the painted width let the invisible hit area |
| 1251 | // (z-index 20, above the pagination) swallow the first bullet's taps: with the previous |
| 1252 | // `2.4rem + 0.8rem` that happened whenever the root font-size was below 16px, the default |
| 1253 | // 16px sitting exactly on the boundary with zero margin. With a 16px root this evaluates |
| 1254 | // to the same 51.2px as before, so nothing moves in the default case. |
| 1255 | // Note that from a root font-size of about 18.3px upwards the painted button is the wider |
| 1256 | // of the two, so the clearance lands exactly on the painted button's edge and the visible |
| 1257 | // gap between the arrow and the first bullet becomes zero. Measured against the hit area |
| 1258 | // the clearance always lands exactly on its inner edge, at any root size — that is the |
| 1259 | // intended contract; only the visible gap is at stake here. An explicit spacing term would |
| 1260 | // restore it but would also move the default 51.2px, so keeping the default untouched wins. |
| 1261 | //矢印の実際の座標から導出してずれないようにする。端オフセット＋矢印中心までの距離＋ |
| 1262 | //「描画ボックスと 44px のポインタターゲットのうち大きい方」の半分。描画� |
| 1263 | だけを確保すると、 |
| 1264 | //不可視の当たり判定（z-index 20 で pagination の上）が� |
| 1265 | �頭 bullet のタップを奪ってしまう。 |
| 1266 | //従来の `2.4rem + 0.8rem` ではルート font-size が 16px 未満のとき常にこれが起き、 |
| 1267 | //既定の 16px はちょうど余裕ゼロの境界だった。ルート 16px では従来と同じ 51.2px になるため、 |
| 1268 | //既定の見た目は変わらない。 |
| 1269 | //なおルート font-size が約 18.3px 以上になると描画ボックスの方が大きくなるため、 |
| 1270 | //クリアランスが描画ボックスの端そのものと一致し、矢印と� |
| 1271 | �頭 bullet の**見た目の**隙間が |
| 1272 | //0 になる。当たり判定を基準にすればクリアランスはどのルート値でも常にその� |
| 1273 | 端と一致し、 |
| 1274 | //そちらが� |
| 1275 | 保したい契約（既定の 16px でも接している）。ここで問題にしているのは |
| 1276 | //見た目の隙間だけ。式に明示的な間隔� |
| 1277 | を足せば解消できるが既定の 51.2px が動いてしまうため、 |
| 1278 | //既定を変えないことを優� |
| 1279 | �している。 |
| 1280 | $clearance: calc( |
| 1281 | #{$swiper-edge-offset-var} + #{$swiper-nav-size * 0.5} + |
| 1282 | max(#{$swiper-nav-size}, #{$swiper-touch-target}) * 0.5 |
| 1283 | ); |
| 1284 | |
| 1285 | padding-left: $clearance; |
| 1286 | padding-right: $clearance; |
| 1287 | box-sizing: border-box; //他のFSEテーマではみ出るので追加 |
| 1288 | } |
| 1289 | |
| 1290 | // The rules below (clearance, bullet gap, mobile bullet size) apply to .vk_slider only. The |
| 1291 | // Post List Slider (Pro) lays its pagination out with position: inherit, i.e. in the normal |
| 1292 | // flow underneath the slides rather than overlaying them, so the layout it starts from is a |
| 1293 | // different one. The old selector had been dead since Swiper v8, so leaving the Pro block out |
| 1294 | // keeps it rendering as it does today. #3069 |
| 1295 | // |
| 1296 | // Do NOT read this as "the arrows and the bullets can never overlap on Pro". They can, and in |
| 1297 | // the default configuration they do: Pro's navigationPosition defaults to mobile-bottom, so on |
| 1298 | // mobile its arrows are absolutely positioned at bottom: 0 and land on the same row as the |
| 1299 | // bullets in the normal flow. Measured at 375px with the defaults, the prev arrow's 44px |
| 1300 | // pointer target covers the leftmost 3.7px of the first bullet (30px wide), and |
| 1301 | // elementFromPoint there returns the arrow because the arrows are z-index 20 against the |
| 1302 | // pagination's 10. The remaining 26.3px of the bullet still takes the tap. The overlap predates |
| 1303 | // this change (the painted 38.4px button already covered 0.89px); widening the pointer target |
| 1304 | // to 44px added 2.8px. Pro is left out because that residual overlap is judged acceptable, not |
| 1305 | // because it is structurally impossible. |
| 1306 | //以下のルール（クリアランス・bullet の間隔・モバイルの bullet � |
| 1307 | ）は .vk_slider だけに限定する。 |
| 1308 | //投稿リストスライダー（Pro）は pagination を position: inherit で通常フロー（スライドの下）に |
| 1309 | //置くため、出発点となる� |
| 1310 | �置構造が異なる。旧セレクタは Swiper v8 以降ずっと不発だったため、 |
| 1311 | //Pro を対象外にすることで現状の表示を一切変えずに済む。#3069 |
| 1312 | // |
| 1313 | //これを「Pro では矢印と bullets が重なり得ない」と読まないこと。既定の設定では実際に重なる。 |
| 1314 | //Pro の navigationPosition の既定値は mobile-bottom なので、モバイルでは矢印が bottom: 0 の |
| 1315 | //絶対� |
| 1316 | �置になり、通常フローにある bullets 行と同じ高さに来る。既定設定・375px で実測すると、 |
| 1317 | //前矢印の 44px のポインタターゲットが� |
| 1318 | �頭 bullet（� |
| 1319 | 30px）の左端 3.7px を覆い、その点の |
| 1320 | //elementFromPoint は矢印を返す（矢印が z-index 20、pagination が 10 のため）。bullet の残り |
| 1321 | //26.3px はタップを受け取れる。重なり自体はこの変更以前からあり（描画ボックス 38.4px の時点で |
| 1322 | //0.89px）、ポインタターゲットを 44px に広げたぶん 2.8px 増えた。Pro を対象外にしているのは |
| 1323 | //構造的に起こり得ないからではなく、この残りの重なりを許容できると判断したためである。 |
| 1324 | |
| 1325 | // Everything below is scoped to the block's own pagination element (`> .swiper-pagination-bullets`) |
| 1326 | // rather than to .vk_slider itself. A slider item can hold arbitrary inner blocks, including a |
| 1327 | // Post List Slider (Pro): declaring the custom property on .vk_slider would let it inherit into |
| 1328 | // that nested pagination, and a descendant bullet selector would match its bullets too. |
| 1329 | //以下はすべて .vk_slider 自身ではなく、そのブロック直下の pagination 要素 |
| 1330 | //（`> .swiper-pagination-bullets`）を起点にする。スライドの中には任意のインナーブロック、 |
| 1331 | //たとえば投稿リストスライダー（Pro）も� |
| 1332 | �れられるため、カスタムプロパティを .vk_slider に |
| 1333 | //置くと� |
| 1334 | �れ子の pagination まで継承され、bullet の子孫セレクタも� |
| 1335 | �れ子側に当たってしまう。 |
| 1336 | .vk_slider > .swiper-pagination-bullets { |
| 1337 | // The bullet gap is set through Swiper's own custom property instead of overriding |
| 1338 | // its margin rule, so no direction class (.swiper-horizontal) has to be matched. |
| 1339 | //bullet の間隔は Swiper の margin ルールを上書きせず、Swiper 自身のカスタムプロパティで指定する。 |
| 1340 | //これにより方向クラス（.swiper-horizontal）を起点にする� |
| 1341 | 要が無くなる。 |
| 1342 | --swiper-pagination-bullet-horizontal-gap: 5px; |
| 1343 | |
| 1344 | // Keeps the default position relationship with the arrows when the shared edge offset is |
| 1345 | // raised (the two are never level — the arrows are 38.4px tall at 10px from the edge, the |
| 1346 | // bullets 5px tall at 8px; what is preserved is that 2px difference at the bottom), so the |
| 1347 | // arrows do not end up above the bullet row. Stays at Swiper's default 8px otherwise. |
| 1348 | // How the variable maps onto each control: the arrows and the pause/play button take it as |
| 1349 | // their distance from the edge directly, while the pagination follows it from its own |
| 1350 | // default position, and only upwards — the max() further up clamps the downward direction |
| 1351 | // at that default. Unlike the side clearance, the follow is not limited to the bottom |
| 1352 | // arrow positions: what moves the pagination is the requested distance from the edge, not |
| 1353 | // where the arrows happen to be. With hide / center there is simply no arrow on that row |
| 1354 | // to line up with, and the bullets still honour the offset. |
| 1355 | //� |
| 1356 | �通の端オフセットを上げた時に、矢印との既定の位置関係を保つ（両� |
| 1357 | の高さが揃うわけではない。 |
| 1358 | //矢印は端から 10px・高さ 38.4px、bullets は 8px・高さ 5px で、維持されるのは下端の 2px 差）。 |
| 1359 | //これにより矢印が bullet 列の上に来ることを防ぐ。それ以外の場合は Swiper 既定の 8px のまま。 |
| 1360 | //この変数が各コントロールに効く形は同じではない。矢印と停止/再生ボタンは端からの距離を |
| 1361 | //そのまま指定するが、ページネーションは自身の既定位置を基準に「上げたぶんだけ」追従する |
| 1362 | //（下方向は上の max() で既定位置を下限にクランプ）。 |
| 1363 | //左右のクリアランスと違って矢印が下部にある場合に限定していないのは、ページネーションを |
| 1364 | //動かしているのが矢印の位置ではなく「端からの距離」の指定だから。hide / center では |
| 1365 | //同じ行に揃える矢印が無いだけで、指定された端からの距離は bullets にも同じように効かせる。 |
| 1366 | --swiper-pagination-bottom: #{$swiper-pagination-bullets-bottom-var}; |
| 1367 | |
| 1368 | // The painted bar is only 5px tall, so a finger that is a few pixels off vertically misses |
| 1369 | // it — and on mobile the bar is narrowed to 20px on top of that. This gives it an invisible |
| 1370 | // target 24px tall (WCAG 2.2 SC 2.5.8 Target Size Minimum). Only the height grows: widening |
| 1371 | // it would eat into the neighbouring bullet's target and into the clearance reserved for the |
| 1372 | // arrows, which is the very thing the narrowing pays for. Height alone leaves the painted |
| 1373 | // size and the number of bullets that fit on one line exactly as they are. |
| 1374 | // Scoped to this block's own pagination like the rules above, so the Post List Slider (Pro) |
| 1375 | // keeps its current target — Pro lays its pagination out in the normal flow, where a taller |
| 1376 | // target would reach into the content above and below instead of into the slide. |
| 1377 | //描画されるバーは高さ 5px しかないため、指が縦に数 px ずれるだけで外れる（モバイルではさらに |
| 1378 | //� |
| 1379 | 20px に縮んでいる）。ここで高さ 24px の不可視ターゲットを与える |
| 1380 | //（WCAG 2.2 SC 2.5.8 Target Size Minimum）。広げるのは高さだけ。横に広げると隣の bullet の |
| 1381 | //ターゲットと、矢印のために空けたクリアランス（バーを縮めてまで確保したもの）を侵食する。 |
| 1382 | //高さだけなら描画サイズも 1 行に並ぶ枚数もそのままで済む。 |
| 1383 | // |
| 1384 | // How SC 2.5.8 is met depends on the pointer, not on the width — this target only exists |
| 1385 | // where a coarse pointer is available (see the media query below), so there are two paths: |
| 1386 | // - With a coarse pointer: 30x24 on PC (meets the 24x24 minimum outright) and 20x24 on |
| 1387 | // mobile, where the narrowed bar falls back to the spacing exception (bullet 20px + |
| 1388 | // 4px gap on each side = 28px between centres). |
| 1389 | // - Mouse-only devices: no target is generated, so the bullet stays at its painted |
| 1390 | // 30x5 and passes solely through the spacing exception (30px + 5px gap on each side |
| 1391 | // = 40px between centres). |
| 1392 | // Either way the spacing exception is what the narrow cases rest on, and it requires at |
| 1393 | // least 24px between centres. Narrowing the bar or the gap further would drop it. |
| 1394 | // Watch the arrow side before the neighbouring bullet: on mobile the clearance puts the |
| 1395 | // first bullet's centre at 65.2px, so the left edge of its 24px circle sits at 53.2px — |
| 1396 | // only 2px clear of the arrow's 44px target (inner edge 51.2px). Tightening the clearance |
| 1397 | // formula or the mobile gap breaks the exception here first, not between the bullets. |
| 1398 | //注意すべきは隣の bullet より� |
| 1399 | �に矢印側。モバイルではクリアランスにより� |
| 1400 | �頭 bullet の |
| 1401 | //中心が 65.2px になり、その 24px 円の左端は 53.2px ＝ 矢印の 44px ターゲットの� |
| 1402 | 端 |
| 1403 | //（51.2px）との余裕は 2px しかない。クリアランスの式やモバイルの gap を詰めると、 |
| 1404 | //bullet 同士より� |
| 1405 | �にこちら側で例外が外れる。 |
| 1406 | //SC 2.5.8 の満たし方は� |
| 1407 | ではなくポインタで変わる。このターゲットは粗いポインタがある環境に |
| 1408 | //しか存在しない（下のメディアクエリ）ため、経路は 2 つある。 |
| 1409 | // - 粗いポインタあり: PC は 30x24 で 24x24 の最小サイズを直接満たす。モバイルはバーが |
| 1410 | // 20px に縮むため 20x24 となり、間隔例外で成立する |
| 1411 | // （bullet 20px ＋ 左右 4px ずつの gap ＝ 中心間 28px）。 |
| 1412 | // - マウスのみの環境: ターゲットは生成されないので bullet は描画どおりの 30x5 で、 |
| 1413 | // 間隔例外だけで成立する（bullet 30px ＋ 左右 5px ずつの gap ＝ 中心間 40px）。 |
| 1414 | //いずれの狭いケースも拠り所は間隔例外で、中心間 24px 以上が� |
| 1415 | 要。 |
| 1416 | //バーや gap をこれ以上詰めると、その例外から外れる。 |
| 1417 | //上のルールと同じくこのブロック直下の pagination に限定し、投稿リストスライダー（Pro）は |
| 1418 | //現状のターゲットを維持する。Pro は pagination を通常フローに置くため、縦に広げると |
| 1419 | //スライドではなく前後のコンテンツへ食い込むからである。 |
| 1420 | // |
| 1421 | // Limited to devices that have a coarse pointer available. The bullet is positioned and |
| 1422 | // keeps pointer-events: auto inside a pagination that has them off, and that pagination |
| 1423 | // carries Swiper's own z-index: 10 (the bullet itself resolves to z-index: auto), so this |
| 1424 | // target sits in front of whatever the slide puts under it — on a mouse-only device that |
| 1425 | // just takes clicks away, since the benefit (absorbing vertical finger drift) does not |
| 1426 | // apply to a precise pointer. SC 2.5.8 is likewise about low-precision input. |
| 1427 | // `any-pointer` rather than `pointer`: the latter describes only the *primary* pointer, so a |
| 1428 | // touch-capable laptop reports `pointer: fine` and would lose the target for finger input |
| 1429 | // even though the screen is being touched. `any-pointer: coarse` matches whenever *some* |
| 1430 | // coarse pointer exists, which is exactly the condition this target is for. |
| 1431 | //粗いポインタを持つ環境に限定する。bullet は positioned で、pointer-events を切った |
| 1432 | //pagination の中で auto を保つ。その pagination に Swiper 自身が z-index: 10 を付けている |
| 1433 | //ため（bullet 自身は z-index: auto）、このターゲットはスライド側に置かれたものより手前に |
| 1434 | //来る。マウスしか無い環境では「指の縦ブレを吸収する」という恩恵が無く、クリックを奪う |
| 1435 | //副作用だけが残る。SC 2.5.8 が想定しているのも精度の低い� |
| 1436 | �力である。 |
| 1437 | //`pointer` ではなく `any-pointer` を使うのは、前� |
| 1438 | が*主*ポインタしか表さないため。 |
| 1439 | //タッチ対応のノート PC は `pointer: fine` を返すので、画面を指で操作していてもターゲットが |
| 1440 | //効かなくなる。`any-pointer: coarse` は粗いポインタが 1 つでもあれば一致し、 |
| 1441 | //これがまさにこのターゲットを出したい条件になる。 |
| 1442 | @media (any-pointer: coarse) { |
| 1443 | > .swiper-pagination-bullet { |
| 1444 | position: relative; |
| 1445 | |
| 1446 | &::before { |
| 1447 | content: ""; |
| 1448 | position: absolute; |
| 1449 | top: 50%; |
| 1450 | left: 0; |
| 1451 | transform: translateY(-50%); |
| 1452 | width: 100%; |
| 1453 | height: 24px; |
| 1454 | } |
| 1455 | } |
| 1456 | } |
| 1457 | } |
| 1458 | |
| 1459 | // always-bottom は� |
| 1460 | �デバイスで矢印が下部 |
| 1461 | .vk_slider:where(#{$swiper-nav-always-bottom}) > .swiper-pagination-bullets { |
| 1462 | @include vk-slider-pagination-arrow-clearance; |
| 1463 | } |
| 1464 | |
| 1465 | @media (width < $xs) { |
| 1466 | // mobile-bottom（既定）はモバイル� |
| 1467 | でのみ矢印が下部 |
| 1468 | .vk_slider:where(#{$swiper-nav-mobile-bottom}) > .swiper-pagination-bullets { |
| 1469 | @include vk-slider-pagination-arrow-clearance; |
| 1470 | } |
| 1471 | |
| 1472 | // Applied under the same condition as the clearance — both bottom positions, since the |
| 1473 | // clearance is what costs the space. Reserving it costs horizontal space, which reduces |
| 1474 | // how many bullets fit on one line — on a 375px screen it would drop from 8 to 6, and once |
| 1475 | // they wrap they overlap the slide and the rows sit too close together to keep the |
| 1476 | // WCAG 2.1 SC 2.5.8 spacing exception. Slightly smaller bullets on mobile keep the |
| 1477 | // count at least at what it was before the clearance started applying. Without arrows at |
| 1478 | // the bottom (hide / center) there is no clearance, so the bullets stay at their normal 30px. |
| 1479 | // (Swiper's dynamicBullets would remove wrapping entirely, but it scales inactive |
| 1480 | // bullets to .33 — fine for round dots, unusable for these 30x5 bars.) |
| 1481 | //クリアランスと同じ条件（下部� |
| 1482 | �置の 2 種類）で適用する。横� |
| 1483 | を消費しているのは |
| 1484 | //クリアランスだからである。クリアランスを確保すると 1 行に並べられる bullets の枚数が減る |
| 1485 | //（375px � |
| 1486 | で 8枚→6枚）。折り返すとスライドに重なるうえ、行間が詰まって |
| 1487 | //WCAG 2.1 SC 2.5.8 の間隔例外も成立しなくなる。モバイルでは bullet を少し小さくして、 |
| 1488 | //クリアランスが効く前と同等以上の枚数を維持する。矢印が下部に無い（hide / center）場合は |
| 1489 | //クリアランス自体が無いので bullet は通常の 30px のままにする。 |
| 1490 | //（Swiper の dynamicBullets なら折り返し自体が無くなるが、非アクティブな bullet を |
| 1491 | // scale(.33) で縮小する仕様のため、円形ドットならともかく 30x5 のバーでは破綻する） |
| 1492 | .vk_slider:where(#{$swiper-nav-bottom-any}) > .swiper-pagination-bullets { |
| 1493 | --swiper-pagination-bullet-horizontal-gap: 4px; |
| 1494 | |
| 1495 | > .swiper-pagination-bullet { |
| 1496 | width: 20px; |
| 1497 | } |
| 1498 | } |
| 1499 | } |
| 1500 | //pagination |
| 1501 | .swiper-pagination{ |
| 1502 | pointer-events: none; |
| 1503 | //標準 |
| 1504 | &-bullet{ |
| 1505 | border-radius: unset; |
| 1506 | width: 30px; |
| 1507 | height: 5px; |
| 1508 | background-color: #ccc; |
| 1509 | opacity: unset; |
| 1510 | outline: 1px solid var(--vk-color-background-white-translucent); |
| 1511 | pointer-events: auto; |
| 1512 | &-active { |
| 1513 | background: #666; |
| 1514 | } |
| 1515 | |
| 1516 | // Swiper marks clickable bullets with role="button" and tabindex="0", so they are |
| 1517 | // keyboard focusable. The permanent translucent outline above would otherwise hide |
| 1518 | // the focus indicator, so an explicit focus ring is required (WCAG 2.1 SC 2.4.7). |
| 1519 | // The ring itself is shared with the arrows and the pause/play button so that every |
| 1520 | // control in the widget shows focus the same way (see vk-slider-focus-ring). |
| 1521 | //Swiper はクリック可能な bullet に role="button" と tabindex="0" を付けるためキーボードで |
| 1522 | //フォーカスできる。上の常時 outline がフォーカス表示を潰してしまうため、明示的に |
| 1523 | //フォーカスリングを指定する（WCAG 2.1 SC 2.4.7）。リング自体は矢印・停止/再生ボタンと |
| 1524 | //� |
| 1525 | �有し、ウィジェット� |
| 1526 | のどのコントロールでもフォーカス表示が同じになるようにしている |
| 1527 | //（vk-slider-focus-ring を参� |
| 1528 | �）。 |
| 1529 | @include vk-slider-focus-ring; |
| 1530 | } |
| 1531 | //標準以外（スライドの枚数） |
| 1532 | &.swiper-pagination-fraction:not(.swiper-pagination-bullets){ |
| 1533 | width: auto; |
| 1534 | left: 50%; |
| 1535 | transform: translateX(-50%); |
| 1536 | background: var(--vk-color-background-white-translucent); |
| 1537 | padding: 0.4rem 1.5rem; |
| 1538 | border-radius: 30px; |
| 1539 | bottom: $swiper-pagination-fraction-bottom; |
| 1540 | } |
| 1541 | } |
| 1542 | |
| 1543 | // The counter follows the shared edge offset only on the main slider, so it does not stay |
| 1544 | // behind when the arrows move away from the bottom edge. It is deliberately not applied to |
| 1545 | // the Post List Slider (Pro): that block lays its pagination out in the normal flow |
| 1546 | // (position: inherit), so moving `bottom` would push the counter into the slides instead of |
| 1547 | // away from the edge — the same reason the side clearance and the bullet variables above are |
| 1548 | // scoped to .vk_slider. |
| 1549 | //枚数表示の端オフセット追従は本体スライダーだけに限定する。矢印が下端から離れた時に |
| 1550 | //枚数表示だけ取り残されないようにするためのもので、投稿リストスライダー（Pro）は |
| 1551 | //pagination を通常フロー（position: inherit）に置くため bottom を動かすと端から離れるのではなく |
| 1552 | //スライド側へ食い込んでしまう。上のクリアランスや bullet 用の変数を .vk_slider 限定に |
| 1553 | //しているのと同じ理由。 |
| 1554 | // :not() は詳細度を上げないよう :where() で� |
| 1555 | む。基底ルールと同じ (0,3,0) になるため、 |
| 1556 | // ソース順の後勝ちで効かせる（基底ルールはこの上にある）。 |
| 1557 | .vk_slider > .swiper-pagination.swiper-pagination-fraction:where(:not(.swiper-pagination-bullets)) { |
| 1558 | bottom: #{$swiper-pagination-fraction-bottom-var}; |
| 1559 | } |
| 1560 | |
| 1561 | // 矢印ボタン モバイルは下部。 |
| 1562 | // 起点を .vk_slider に限定する。投稿リストスライダー（Pro）はモバイルでの下部位置を |
| 1563 | // 自前の style.scss（bottom: 0）で決めており、こちらは対象外。無起点のままだと |
| 1564 | // Pro にも一致してしまい、Pro 側の指定が消えた時に黙って端オフセットへ追従し始める |
| 1565 | // （＝always-bottom で実際に起きた不整合と同じ形）。 |
| 1566 | // Anchored on .vk_slider: the Post List Slider (Pro) decides its own mobile bottom |
| 1567 | // position in its style.scss (bottom: 0). Without an anchor this also matches Pro, so |
| 1568 | // removing Pro's own rule would silently make it follow the edge offset instead — the |
| 1569 | // same kind of mismatch that actually happened with always-bottom. |
| 1570 | @media (width < $xs) { |
| 1571 | .vk_slider { |
| 1572 | .swiper-button-next, |
| 1573 | .swiper-button-prev { |
| 1574 | &.swiper-button-mobile-bottom { |
| 1575 | top: unset; |
| 1576 | bottom: $swiper-edge-offset-var; |
| 1577 | } |
| 1578 | } |
| 1579 | } |
| 1580 | |
| 1581 | // 投稿リストスライダー（Pro）は always-bottom でもモバイル� |
| 1582 | では下端ベタ付き |
| 1583 | // （bottom: 0）を維持する。PC・タブレット� |
| 1584 | は上の� |
| 1585 | �有ルールの端オフセットに従う。 |
| 1586 | // このルールは以前 Pro の style.scss にあったが、� |
| 1587 | �有ルールと詳細度が同じ (0,3,0) で |
| 1588 | // 別ファイルとして読み込まれるため順序で勝敗が決まり、実際には� |
| 1589 | �有ルールが後勝ちして |
| 1590 | // モバイルでも 10px になっていた（mobile-bottom と位置が揃わない）。� |
| 1591 | �有ルールと |
| 1592 | // 同じファイルでソース順を後ろにすることで、読み込み順に依存せず� |
| 1593 | ず効く。#3069 |
| 1594 | // The Post List Slider (Pro) keeps its arrows flush with the bottom edge on mobile even |
| 1595 | // with always-bottom; PC / tablet follow the shared edge offset above. This lived in Pro's |
| 1596 | // style.scss, but it has the same specificity (0,3,0) as the shared rule and shipped in a |
| 1597 | // separate file, so load order decided the winner — the shared rule won and mobile stayed |
| 1598 | // at 10px, out of line with mobile-bottom. Keeping it in the same file as the shared rule |
| 1599 | // lets source order settle it, independent of load order. #3069 |
| 1600 | .vk_post_list_slider { |
| 1601 | .swiper-button-next, |
| 1602 | .swiper-button-prev { |
| 1603 | &.swiper-button-always-bottom { |
| 1604 | bottom: 0; |
| 1605 | } |
| 1606 | } |
| 1607 | } |
| 1608 | } |
| 1609 | |
| 1610 | /*-------------------------------------------*/ |
| 1611 | /* col-xxl |
| 1612 | /*-------------------------------------------*/ |
| 1613 | .col { |
| 1614 | // Bootstrap4 では xxl サイズがないので独自に追加 |
| 1615 | @media (width >= $xl) { |
| 1616 | &-xxl-2 { |
| 1617 | flex: 0 0 16.66667%; |
| 1618 | max-width: 16.66667%; |
| 1619 | } |
| 1620 | &-xxl-3 { |
| 1621 | flex: 0 0 25%; |
| 1622 | max-width: 25%; |
| 1623 | } |
| 1624 | &-xxl-4 { |
| 1625 | flex: 0 0 33.33333%; |
| 1626 | max-width: 33.33333%; |
| 1627 | } |
| 1628 | &-xxl-6 { |
| 1629 | flex: 0 0 50%; |
| 1630 | max-width: 50%; |
| 1631 | } |
| 1632 | &-xxl-12 { |
| 1633 | flex: 0 0 100%; |
| 1634 | max-width: 100%; |
| 1635 | } |
| 1636 | } |
| 1637 | } |
| 1638 | |
| 1639 | /*-------------------------------------------*/ |
| 1640 | /* カラム |
| 1641 | /*-------------------------------------------*/ |
| 1642 | .wp-block-columns { |
| 1643 | /* カラムの方向 */ |
| 1644 | &.wp-block-columns.is-vk-row-reverse { |
| 1645 | flex-direction: row-reverse; |
| 1646 | } |
| 1647 | } |
| 1648 |