hernia_0721/size_dekasugi_storage_ni_arimasu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"/" にファイルをアップロード

Browse Source
This commit is contained in:
hernia_0721
2026-02-01 08:58:42 +09:00
commit bd0adfe32b
5 changed files with 4127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
index.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<title>Loading TyranoScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="robots" content="noindex,nofollow" />
<link href="./tyrano/tyrano.css" rel="stylesheet" />
<link href="./tyrano/libs/jquery-ui/jquery-ui.css" rel="stylesheet" />
<!-- jQuery -->
<script src="./tyrano/libs/jquery-3.6.0.min.js"></script>
<script>
try {
window.jQuery = window.$ = require("./tyrano/libs/jquery-3.6.0.min.js");
} catch (e) {}
try{
if(window.studio_api){
//Win Macなど パッケージング時
window.studio_api = window.studio_api;
window.process = window.studio_api.ipcRenderer.sendSync("getProcess");
}else if (window.opener.window.studio_api) {
//プレビューのとき
window.studio_api = window.opener.window.studio_api;
window.process = window.opener.window.studio_api.ipcRenderer.sendSync("getProcess");
}
}catch(e){
}
</script>
<!-- jQuery Plugins -->
<script src="./tyrano/libs/jquery-migrate-1.4.1.js"></script>
<script src="./tyrano/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="./tyrano/libs/jquery.a3d.js"></script>
<script src="./tyrano/libs/jsrender.min.js"></script>
<!-- 廃止予定 alertify.js -->
<link href="./tyrano/libs/alertify/alertify.core.css" rel="stylesheet" />
<link href="./tyrano/libs/alertify/alertify.default.css" rel="stylesheet" />
<script src="./tyrano/libs/alertify/alertify.min.js"></script>
<!-- remodal -->
<link href="./tyrano/libs/remodal/remodal.css" rel="stylesheet" />
<link href="./tyrano/libs/remodal/remodal-default-theme.css" rel="stylesheet" />
<script src="./tyrano/libs/remodal/remodal.js"></script>
<!-- html2canvas -->
<script src="./tyrano/libs/html2canvas.js"></script>
<!-- KeyConfig.js -->
<script src="./data/system/KeyConfig.js"></script>
<!-- tyrano -->
<script src="./tyrano/lang.js"></script>
<script src="./tyrano/libs.js"></script>
<script src="./tyrano/tyrano.js"></script>
<script src="./tyrano/tyrano.base.js"></script>
<script src="./tyrano/plugins/kag/kag.js"></script>
<script src="./tyrano/plugins/kag/kag.event.js"></script>
<script src="./tyrano/plugins/kag/kag.key_mouse.js"></script>
<script src="./tyrano/plugins/kag/kag.layer.js"></script>
<script src="./tyrano/plugins/kag/kag.menu.js"></script>
<script src="./tyrano/plugins/kag/kag.parser.js"></script>
<script src="./tyrano/plugins/kag/kag.rider.js"></script>
<script src="./tyrano/plugins/kag/kag.studio_v6.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_audio.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_camera.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_ext.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_system.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_vchat.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_ar.js"></script>
<script src="./tyrano/plugins/kag/kag.tag_three.js"></script>
<script src="./tyrano/plugins/kag/kag.tag.js"></script>
<!-- Others -->
<link href="./tyrano/libs/textillate/assets/animate.css" rel="stylesheet" />
<script src="./tyrano/libs/textillate/assets/jquery.lettering.js"></script>
<script src="./tyrano/libs/textillate/jquery.textillate.js"></script>
<script src="./tyrano/libs/jquery.touchSwipe.min.js"></script>
<script src="./tyrano/libs/howler.js"></script>
<script src="./tyrano/libs/jsQR.js"></script>
<script src="./tyrano/libs/anime.min.js"></script>
<script src="./tyrano/libs/lz-string.min.js"></script>
</head>
<body onselectstart="return false" onContextmenu="return false" ontouchmove="event.preventDefault()">
<div id="tyrano_base" class="tyrano_base" style="overflow: hidden" unselectable="on" ondragstart="return false"></div>
<div id="vchat_base" class="vchat_base" style="overflow: hidden" unselectable="on" ondragstart="return false"></div>
<!-- First シナリオファイルに外部ファイルを利用したい場合は、こちらにシナリオファイルのURLを指定できます-->
<!--
<input type="hidden" id="first_scenario_file" value="http://test.com/tyrano/data/scenario/first.ks">
-->
<!-- コンフィグ調整をindex.htmlでもできる -->
<!--
<input type="hidden" tyrano="config" key="vchat" value="true" />
<input type="hidden" tyrano="config" key="vchatMenuVisible" value="true" />
-->
<!-- モーダル用 -->
<div class="remodal-bg"></div>
<div
class="remodal"
data-remodal-id="modal"
data-remodal-options="hashTracking:false,closeOnEscape:false,closeOnOutsideClick:false"
>
<h1 class="remodal_title"></h1>
<p class="remodal_txt"></p>
<br />
<button data-remodal-action="cancel" id="remodal-cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" id="remodal-confirm" class="remodal-confirm">OK</button>
</div>
</body>
</html>

72
lang.js Normal file
View File

@@ -0,0 +1,72 @@
window.tyrano_lang = {
word: {
go_title: "タイトルに戻ります。よろしいですか？",
exit_game: "ウィンドウを閉じて終了します。よろしいですか？",
not_saved: "まだ、保存されているデータがありません。",
confirm: "確認",
confirm_beforeunload: "保存していない内容があります。ゲームを終了してもよろしいですか？",
tag: "タグ",
not_exists: "は存在しません。",
error: "エラーが発生しました。スクリプトを確認して下さい。",
label: "ラベル",
label_double: "は同一シナリオファイル内に重複しています。",
error_occurred: "エラーが発生しました。",
save_file_violation_1: "セーブデータの移動を検知しました。信頼できるセーブデータでない場合、絶対に読み込まないでください。",
save_file_violation_2: "セーブデータを読み込んでゲームを起動してもよろしいですか？",
save_file_violation_3: "起動を中止しました。セーブデータを削除してもう一度、起動してください。",
double_start: "すでにゲームは起動済みです。二重起動はできません。",
reload: "リロード",
line: "{ line }行目",
initialized_saved_data: "セーブデータを初期化しました。",
initializing_saved_data: "セーブデータを初期化します。よろしいですか？",
saved_data_is_corrupted: "セーブデータが壊れている可能性があります。セーブデータを初期化しますか？",
save_does_not_work: "この環境ではセーブ機能が動作しません。ローカルで実行している場合などに発生します。",
undefined_tag: "タグ「{ name }」は存在しません。",
undefined_label: "ラベル「{ name }」は存在しません。",
undefined_character: "指定されたキャラクター「{ name }」は定義されていません。[chara_new]で定義してください。",
undefined_face: "指定されたキャラクター「{ name }」の表情「{ face }」は定義されていません。[chara_face]で定義してください。",
undefined_character_parts: "指定されたキャラクター「{ name }」の差分パーツは定義されていません。[chara_layer]で定義してください。",
undefined_keyframe: "指定されたキーフレームアニメーション「{ keyframe }」は定義されていません。[keyframe]で定義してください。",
undefined_3d_model: "指定された3Dモデル「{ name }」は定義されていません。",
preload_failure_sound:
"音声ファイル「{ src }」が見つかりません。場所はフルパスで指定されていますか？\n\n(適切な例) ./data/bgm/my_bgm.mp3",
preload_failure_image:
"画像ファイル「{ src }」が見つかりません。場所はフルパスで指定されていますか？\n\n(適切な例) ./data/image/my_image.png",
preload_failure_video:
"動画ファイル「{ src }」が見つかりません。場所はフルパスで指定されていますか？\n\n(適切な例) ./data/video/my_video.mp4",
invalid_keyframe: "キーフレームが無効な値です。",
invalid_keyframe_percentage:
'キーフレームに設定されているパーセンテージ「{ percentage }」は無効な値です。"0%"、"30%"のように指定してください。',
error_in_iscript: "[iscript] の内部でエラーが発生しました。",
missing_endif: "[if] のあとに [elsif] [else] [endif] のいずれかが見つかりません。または、[if] 内のタグの数が多すぎます。",
missing_endmacro: "[macro] のあとに [endmacro] が見つかりません。または、[macro] 内のタグの数が多すぎます。",
missing_endignore: "[ignore] のあとに [endignore] が見つかりません。または、[ignore] 内の数が多すぎます。",
missing_parameter: "タグ「{ tag }」にパラメーター「{ param }」は必須です。",
if_and_endif_do_not_match: "[if] と [endif] の数が一致しません。",
unsupported_extensions: "「{ ext }」はサポートしていないファイル形式です。",
undefined_keyconfig:
'キーコンフィグが定義されていません。KeyConfig.js が存在しないか、KeyConfig.js 内で構文エラーが発生している可能性があります。カンマ "," やブラケット "]" "}" が不足していないかどうか、確認してください。',
compensate_missing_quart:
'予期しない "]" を検知しました。パラメータのクォートの数が足りていない可能性があるため、自動的に修正して解釈します。\n\n修正前: { before }\n修正後: { after }',
duplicate_label:
"ラベル「{ name }」は同一シナリオファイル内に重複しています。ラベル名は同一シナリオファイル内で重複しないようにしてください。",
file_not_found: "ファイルが見つかりませんでした。\n\n{ path }",
patch_not_found: "パッチファイルが見つかりませんでした。\n\n{ path }",
new_patch_found: "新しいアップデートが見つかりました。\n\nVer: { version }\n{ message }\n\n アップデートを行いますか？",
apply_web_patch: "アップデートを行います。完了後、自動的にゲームは終了します。",
apply_patch_complete: "アップデートを適用しました。ゲームを再起動してください。",
},
novel: {
file_menu_button_save: "menu_button_save.gif",
file_menu_button_load: "menu_button_load.gif",
file_menu_button_message_close: "menu_message_close.gif",
file_menu_button_skip: "menu_button_skip.gif",
file_menu_button_title: "menu_button_title.gif",
file_menu_button_close: "menu_button_close.png",
file_menu_bg: "menu_bg.jpg",
file_save_bg: "menu_save_bg.jpg",
file_load_bg: "menu_load_bg.jpg",
file_button_menu: "button_menu.png",
},
};

2773
libs.js Normal file
View File

File diff suppressed because it is too large Load Diff

252
tyrano.base.js Normal file
View File

@@ -0,0 +1,252 @@
tyrano.base = {
//読み込み対象のモジュール
tyrano: null,
modules: [],
options: {},
init: function (tyrano) {
this.tyrano = tyrano;
},
/**
* ゲーム画面（div#tyrano_base）にwidth/heightスタイルをセットする
* @param {number} width 設定上のゲーム画面の横幅 (例) 1280
* @param {number} height 設定上のゲーム画面の高さ (例) 720
*/
setBaseSize: function (width, height) {
this.tyrano.get(".tyrano_base").css({
"width": width,
"height": height,
"background-color": "black",
});
},
/**
* 100ミリ秒後に_fitBaseSizeを呼ぶ
*
* ※ウィンドウサイズが変わった瞬間にフィット処理を走らせると
* ウィンドウサイズが正常に取れずに画面がうまくフィットしないことがあるためタイムアウトを設けている
* @param {number} width
* @param {number} height
*/
fitBaseSize: function (width, height) {
var that = this;
setTimeout(function () {
that._fitBaseSize(width, height);
}, 300);
},
/**
* ゲーム画面をウィンドウにフィットさせる
* @param {number} width 設定上のゲーム画面の横幅 (例) 1280
* @param {number} height 設定上のゲーム画面の高さ (例) 720
* @param {number} [timeout=100] フィット処理のタイムアウト 省略可 デフォルトは100
*/
_fitBaseSize: function (width, height, timeout) {
// timeoutのデフォルトは100
if (typeof timeout !== "number") {
timeout = 100;
}
var that = this;
// ウィンドウサイズ
var view_width = $.getViewPort().width;
var view_height = $.getViewPort().height;
// ゲーム画面をウィンドウにフィットさせるには横幅と高さをそれぞれ何倍すればいいか
var width_f = view_width / width;
var height_f = view_height / height;
// スケール
var scale_f = 0;
// div#tyrano_baseへの参照
var j_tyrano_base = $("#tyrano_base");
// リサイズ処理のオプション
// "fix" : 縦横比を固定して画面ぴったりに拡大（黒帯ができる）
// "fit" : 縦横比を維持せずに画面ぴったりに拡大（黒帯ができない）
// "default" : リサイズ処理を行わない
var screen_ratio = this.tyrano.kag.config.ScreenRatio;
// ウィンドウの縦横比がゲーム画面の縦横比よりもワイド（横長）であるかどうか
var is_window_wider_than_game = width_f > height_f;
// オプションで場合分け
if (screen_ratio == "fix") {
// 縦横比固定の場合
// スケーリングの基準を横幅にするか高さにするか
// ウィンドウがゲーム画面よりもワイドなら"高さ"基準でスケーリング。左右に黒帯が生じる
if (is_window_wider_than_game) {
scale_f = height_f;
} else {
scale_f = width_f;
}
//
this.tyrano.kag.tmp.base_scale = scale_f;
// 誤動作対策でタイムアウトを設ける
$.setTimeout(function () {
// 中央寄せが有効な場合はマージンを計算する
var margin_top = 0;
var margin_left = 0;
if (that.tyrano.kag.config["ScreenCentering"] && that.tyrano.kag.config["ScreenCentering"] == "true") {
// 初期化
j_tyrano_base.css({
"transform-origin": "0 0",
"margin": 0,
});
if (is_window_wider_than_game) {
// ウィンドウがゲーム画面よりもワイドである場合
// ゲーム画面の左右が余る（左右に黒帯が生じる）ことになる
// ■■□□□□□■■
// ■■□□□□□■■
// ■■□□□□□■■
// ウィンドウの横幅からスケーリング後のゲーム画面の横幅を引いた分が余り
// この余りを左右均等に割り振りたいので2で割る
margin_left = Math.abs(parseInt(window.innerWidth) - parseInt(that.tyrano.kag.config.scWidth * scale_f)) / 2;
// ゲーム上側の余白は当然ゼロでよいように思われるが
// iOS Safariでは不安定になることがあるので対策する
// margin_top = 0;
margin_top = document.documentElement.clientHeight - window.innerHeight;
} else {
// ウィンドウがゲーム画面よりもスリムである場合
// ゲーム画面の上下が余る（上下に黒帯が生じる）ことになる
// ■■■■■
// ■■■■■
// □□□□□
// □□□□□
// □□□□□
// ■■■■■
// ■■■■■
// 同様に計算する
margin_top = Math.abs(parseInt(window.innerHeight) - parseInt(that.tyrano.kag.config.scHeight * scale_f)) / 2;
margin_left = 0;
}
j_tyrano_base.css({
"margin-left": parseInt(margin_left) + "px",
"margin-top": parseInt(margin_top) + "px",
});
}
// ここでスケーリング
j_tyrano_base.css("transform", "scale(" + scale_f + ") ");
// ウィンドウがゲーム画面よりも小さい場合はスクロール（動作安定のため）
if (parseInt(view_width) < parseInt(width)) {
if (scale_f < 1) {
window.scrollTo(0, 1);
}
}
// vchat形式が有効ならそのエリアも調整する
if (that.tyrano.kag.config["vchat"] && that.tyrano.kag.config["vchat"] == "true") {
var base_height = Math.round(parseInt($("#tyrano_base").css("height")) * scale_f);
var vchat_height = view_height - base_height;
$("#vchat_base").css({
"margin-top": base_height,
"height": vchat_height,
});
}
// スケーリングの情報を記憶しておく
that.updateScreenInfo({
scale_x: scale_f,
scale_y: scale_f,
top: margin_top,
left: margin_left,
original_width: parseInt(width),
original_height: parseInt(height),
viewport_width: view_width,
viewport_height: view_height,
});
// ティラノイベント"resize"を発火
that.kag.trigger("resize", { target: j_tyrano_base, screen_info: that.tyrano.kag.tmp.screen_info });
}, timeout);
} else if (screen_ratio == "fit") {
// 縦横比を維持しない場合
$.setTimeout(function () {
j_tyrano_base.css("transform", "scaleX(" + width_f + ") scaleY(" + height_f + ")");
window.scrollTo(0, 1);
that.updateScreenInfo({
scale_x: width_f,
scale_y: height_f,
top: 0,
left: 0,
original_width: parseInt(width),
original_height: parseInt(height),
viewport_width: view_width,
viewport_height: view_height,
});
// ティラノイベント"resize"を発火
that.kag.trigger("resize", { target: j_tyrano_base, screen_info: that.tyrano.kag.tmp.screen_info });
}, timeout);
} else {
that.updateScreenInfo({
scale_x: 1,
scale_y: 1,
top: 0,
left: 0,
original_width: parseInt(width),
original_height: parseInt(height),
viewport_width: view_width,
viewport_height: view_height,
});
// スクリーンサイズ固定
}
},
/**
* スクリーン情報をアップデート
* @param {Object} data
*/
updateScreenInfo(data) {
const info = this.tyrano.kag.tmp.screen_info;
$.extend(info, data);
info.width = info.original_width * info.scale_x;
info.height = info.original_height * info.scale_y;
info.right = info.left + info.width;
info.bottom = info.top + info.height;
},
/**
* マウス座標をゲーム画面上の座標に変換する
*
* ※ゲーム画面（div#tyrano_base）はtransform: scale()によってスケーリングされているため、
* マウス座標（event.offsetXなど）とゲーム画面上の座標のあいだに食い違いが発生し、そのままでは使えない
* @param {number} page_x ドキュメント上のX座標 マウスイベントのevent.pageXに相当する値
* @param {number} page_y ドキュメント上のY座標 マウスイベントのevent.pageYに相当する値
* @param {boolean} [as_int=false] 座標を整数で返すかどうか 省略可 デフォルトはfalse
* @returns {{x:number; y:number;}} ゲーム画面上の座標
*/
convertPageXYIntoGameXY: function (page_x, page_y, as_int = false) {
// スケーリング情報の参照
const info = this.tyrano.kag.tmp.screen_info;
// マージンを引く
const x_removed_margin = page_x - info.left;
const y_removed_margin = page_y - info.top;
// スケールを戻す
const x_unscaled = x_removed_margin / info.scale_x;
const y_unscaled = y_removed_margin / info.scale_y;
// 丸め込み
const x_rounded = as_int ? parseInt(x_unscaled) : x_unscaled;
const y_rounded = as_int ? parseInt(y_unscaled) : y_unscaled;
return {
x: x_rounded,
y: y_rounded,
};
},
test: function () {
//alert("tyrano test");
},
};

903
tyrano.css Normal file
View File

@@ -0,0 +1,903 @@
@import url("./css/reset.css");
@import url("./css/font.css");
@import url("./css/animate.css");
@import url("./css/glink.css");
/* レイヤ
--------------------------------------*/
html {
touch-action: none;
user-select: none;
}
body {
background-color: black;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
touch-action: manipulation;
}
.tyrano_base {
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
/*Mac safari でtyrano_base の overfllow:hiddenが効かない対策*/
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.layer {
background-size: 100% 100%;
}
/* イベントレイヤ(ここをクリックしてゲームを進める) */
.layer_event_click {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
/* クリック待ちグリフ */
.img_next {
padding-left: 3px;
}
.chara_part_container {
/* スタックコンテキストを生成 */
transform: translateZ(0);
}
.plus_lighter_container img {
mix-blend-mode: plus-lighter;
}
.tyrano_chara .chara_img {
position: absolute;
}
/* [edit]タグで出す<input>要素 */
/*
.text_box {
}
*/
/*ダイアログボックス*/
#alertify {
z-index: 9999999;
}
/* 汎用クラス
--------------------------------------*/
/* 左右反転 */
.reflect {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
/* 透明化 */
.hidden {
visibility: hidden !important;
opacity: 0 !important;
}
/* 新しいスタックコンテキストを作成 */
.z-0 {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* [filter] で付与, [free_filter] で除去 */
/*
.tyrano_filter_effect {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
*/
/* 縦書き
--------------------------------------*/
.vertical_text {
font-family: "@ＭＳ 明朝";
writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
float: right;
height: 100%;
}
/* VChat
--------------------------------------*/
/* 全体のスタイル */
.vchat {
margin-top: 25px;
}
/* 名前欄 */
.vchat-name {
margin-top: 20px;
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* 吹き出し */
.vchat_base {
width: 100%;
height: 100px;
background-color: red;
position: relative;
display: none;
overflow: scroll;
}
/* 吹き出しテキスト */
.vchat-text {
-webkit-text-size-adjust: none;
position: relative;
margin-left: 10px;
padding: 10px;
border-radius: 10px;
margin-right: 12%;
box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
font-size: "xx-large";
word-break: keep-all;
line-break: strict;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*float: left;*/
}
.ribbon20-wrapper {
display: block;
position: relative;
margin: 0 auto;
padding: 20px 0;
width: 300px;
background: #f1f1f1;
}
.ribbon20 {
display: inline-block;
position: absolute;
left: 0;
top: 5px;
box-sizing: border-box;
padding: 0 12px;
margin: 0;
height: 24px;
line-height: 24px;
font-size: 14px;
letter-spacing: 0.1em;
color: white;
background: #70c7ff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.ribbon20:before {
position: absolute;
content: "";
top: 0;
left: -7px;
border: none;
height: 24px;
width: 7px;
background: inherit;
border-radius: 5px 0 0 5px;
}
/* 回り込み解除 */
.vchat:after,
.vchat:before {
clear: both;
content: "";
display: block;
}
/* カギカッコフロート
--------------------------------------*/
.message_inner > p > span {
position: relative;
}
/* text-stroke による縁取り
--------------------------------------*/
/* ★縁取りテキスト1文字を構成する要素ツリー
/* span.char.text-stroke
/* span.dummy あ … ダミー。透明。absolute。レンダリング領域を広げる役割。
/* span.stroke あ … 縁取り。absolute。複数個でありうる。
/* span.text あ … テキスト本体。absolute。
/* span.dummy あ … ダミー。透明。relative。縁取りとテキスト本体が absolute なせいで widht, height を構成しないので
/* かわりにこれで width, height を構成する。*/
p .char.text-stroke {
opacity: 1;
display: inline-block;
position: relative;
z-index: auto;
/* z-index に auto でも 0 でもない値がセットされている場合は
/* 新しいスタックコンテキストが作成されるため、重なり順の違いが出る仕様がある
/* ここに z-index: 10; を指定すると縁取り部分がひとつ前の文字にかぶさるようになる
/* http://honttoni.blog74.fc2.com/blog-entry-340.html */
/*
z-index: 10;
/**/
}
p .char.text-stroke.visible .entity {
opacity: 1;
}
p .char.text-stroke span {
margin: 0;
padding: 0;
position: absolute;
display: inline-block;
opacity: 0;
}
p .char.text-stroke .stroke {
z-index: 100;
transform: translateZ(0);
}
p .char.text-stroke .fill {
z-index: 1000;
transform: translateZ(0);
height: 100%;
}
/* text-shadow による個別縁取り
--------------------------------------*/
/* ★縁取りテキスト1文字を構成する要素ツリー
/* span.char.text-shadow
/* span.stroke あ … 縁取り。absolute。複数個でありうる。
/* span.text あ … テキスト本体。absolute。
/* span.dummy あ … ダミー。透明。relative。縁取りとテキスト本体が absolute なせいで widht, height を構成しないので
/* かわりにこれで width, height を構成する。*/
p .char.text-shadow {
opacity: 1;
display: inline-block;
position: relative;
z-index: auto;
}
p .char.text-shadow.visible .entity {
opacity: 1;
}
p .char.text-shadow span {
margin: 0;
padding: 0;
position: absolute;
display: inline-block;
opacity: 0;
}
p .char.text-shadow .stroke {
z-index: auto;
transform: translateZ(0);
}
p .char.text-shadow .fill {
z-index: 1000;
transform: translateZ(0);
height: 100%;
}
/* クリック待ちグリフのカスタマイズ
--------------------------------------*/
div.img_next {
padding: 0;
margin-left: 3px;
display: inline-block;
vertical-align: baseline;
}
/*------ 図形 ------*/
/* 三角 */
.img_next_v_triangle {
width: 20px;
height: 20px;
display: inline-block;
background: white;
clip-path: polygon(0 20%, 100% 20%, 50% 100%);
}
.img_next_triangle {
width: 20px;
height: 20px;
display: inline-block;
background: white;
clip-path: polygon(50% 20%, 100% 100%, 0% 100%);
}
/* 丸 */
.img_next_circle {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
background: white;
background: rgb(206, 231, 245);
}
/* 四角 */
.img_next_rectangle {
width: 20px;
height: 20px;
display: inline-block;
background: white;
}
/* ひし型 */
.img_next_diamond {
width: 20px;
height: 20px;
display: inline-block;
background: white;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* 星 */
.img_next_star {
width: 20px;
height: 20px;
display: inline-block;
background: white;
clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}
/*------ アニメーション設定 ------*/
/* 瞬間的な点滅 */
.img_next_flash_momentary {
animation-name: img_next_flash_momentary;
animation-delay: 1000ms;
animation-duration: 1800ms;
animation-iteration-count: infinite;
animation-timing-function: steps(1);
opacity: 0;
}
@keyframes img_next_flash_momentary {
from {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* 滑らかな点滅 */
.img_next_flash {
animation-name: img_next_flash;
animation-duration: 1800ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 0;
}
@keyframes img_next_flash {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 回転 */
.img_next_rotate_bounce {
animation-name: img_next_rotate_bounce;
animation-duration: 3200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes img_next_rotate_bounce {
from {
transform: translateY(0px) rotateZ(0deg) scale(1);
}
12.5% {
transform: translateY(-4px) rotateZ(45deg) scale(0.8);
}
25% {
transform: translateY(0px) rotateZ(90deg) scale(1);
}
37.5% {
transform: translateY(-4px) rotateZ(135deg) scale(0.8);
}
50% {
transform: translateY(0px) rotateZ(180deg) scale(1);
}
62.5% {
transform: translateY(-4px) rotateZ(225deg) scale(0.8);
}
75% {
transform: translateY(0px) rotateZ(270deg) scale(1);
}
87.5% {
transform: translateY(-4px) rotateZ(315deg) scale(0.8);
}
to {
transform: translateY(0px) rotateZ(360deg) scale(1);
}
}
/* Y軸を中心にスピン */
.img_next_spin_y {
animation-name: img_next_spin_y;
animation-duration: 3200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes img_next_spin_y {
from {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}
/* Y軸を中心にスピン */
.img_next_spin_x {
animation-name: img_next_spin_x;
animation-duration: 3200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes img_next_spin_x {
from {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
to {
transform: rotateX(360deg);
}
}
/* Z軸を中心にスピン */
.img_next_spin_z {
animation-name: img_next_spin_z;
animation-duration: 3200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes img_next_spin_z {
from {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(180deg);
}
to {
transform: rotateZ(360deg);
}
}
/* シンプルなバウンド */
.img_next_bounce {
animation-name: img_next_bounce;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
animation-direction: alternate;
}
@keyframes img_next_bounce {
from {
transform: translateY(0px);
}
100% {
transform: translateY(-12px);
}
}
/* たわむバウンド */
.img_next_soft_bounce {
animation-name: img_next_soft_bounce;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
animation-direction: alternate;
}
@keyframes img_next_soft_bounce {
from {
transform: translateY(0px) scaleY(0.8) scaleX(1.2);
}
25% {
transform: translateY(-2px) scaleY(1) scaleX(1);
}
100% {
transform: translateY(-12px);
}
}
/* 拡縮 */
.img_next_zoom {
animation-name: img_next_zoom;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes img_next_zoom {
from {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
/* クリックエフェクト
--------------------------------------*/
.tyrano_click_effect {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
animation-name: tyrano_click_effect;
animation-duration: 300ms;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: center center;
transform: translate(-50%, -50%) scale(1);
pointer-events: none;
mix-blend-mode: overlay;
}
@keyframes tyrano_click_effect {
from {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}
/* フォーカス
--------------------------------------*/
/* デフォルトのフォーカススタイルはオフにしておく
* (ただのマウスダウンでフォーカスが一瞬当たったケースでアウトラインが出ないように) */
[data-event-tag="button"]:focus,
[data-event-tag="link"]:focus,
[data-event-tag="glink"]:focus {
outline: none;
}
/* キーボードによってフォーカスが当たったとき */
:focus.focus {
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
outline-color: transparent;
}
/* 仮想マウスカーソル
--------------------------------------*/
/* 仮想マウスカーソル */
#vmouse {
margin-left: 0px;
margin-top: 0px;
transform-origin: left top;
position: fixed;
display: block;
left: 0;
top: 0;
z-index: 9999999999;
pointer-events: none;
background-repeat: no-repeat;
background-position: left top;
transition: transform 50ms linear, opacity 100ms linear;
opacity: 0;
user-select: none;
}
/* 仮想マウスカーソルが表示されているとき
* 本当のマウスカーソルは非表示にする */
html.vmouse-displayed,
html.vmouse-displayed * {
cursor: none !important;
}
/* remodal のカスタマイズ
--------------------------------------*/
/* ボタン */
#remodal-confirm,
#remodal-cancel {
cursor: pointer;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
margin: 0 2px;
}
/* ボタン(画像) */
img#remodal-confirm,
img#remodal-cancel {
display: inline-block;
}
/* メッセージボックス */
/*
[data-remodal-id="modal"] {
}
*/
/* 背景となるアウター要素 */
.remodal-wrapper .remodal-base,
.remodal-wrapper .remodal-base .remodal-image,
.remodal-wrapper .remodal-boxbase {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
opacity: 1;
pointer-events: none;
}
/* メッセージボックスのテキスト */
.remodal-wrapper .remodal_title,
.remodal-wrapper .remodal_txt {
pointer-events: auto;
user-select: auto;
cursor: auto;
}
/*-- キーフレアニメ --*/
.remodal-is-opening .remodal-base,
.remodal-is-closing .remodal-base {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.remodal-is-opening .remodal-base {
-webkit-animation-name: remodal-overlay-opening-keyframes;
animation-name: remodal-overlay-opening-keyframes;
}
.remodal-is-closing .remodal-base {
-webkit-animation-name: remodal-overlay-closing-keyframes;
animation-name: remodal-overlay-closing-keyframes;
}
/* スキップ開始時・終了時などに画面中央に出すエフェクト
--------------------------------------*/
.mode_effect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
pointer-events: none;
justify-content: center;
align-items: center;
display: flex;
transform-origin: center center;
animation: mode_effect 800ms linear forwards;
z-index: 9999999999;
}
.mode_effect_default {
background: rgba(0, 0, 0, 1);
border-radius: 50%;
font-size: 10px;
width: 15em;
height: 15em;
}
.mode_effect_default.stop > div:first-child,
.mode_effect_default.stop > div:last-child,
.mode_effect_default.auto > div:last-child,
.mode_effect_default.skip > div:first-child,
.mode_effect_default.skip > div:last-child {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
pointer-events: none;
background: transparent;
width: 7em;
height: 7em;
box-sizing: border-box;
border-bottom: 3.5em solid transparent;
border-left: 3.5em solid white;
border-right: 3.5em solid transparent;
border-top: 3.5em solid transparent;
}
.mode_effect_default.skip > div:first-child,
.mode_effect_default.skip > div:last-child {
transform: translateX(0.6em);
}
.mode_effect_default.skip > div:last-child {
left: 7em;
}
.mode_effect_default.auto > div:first-child {
display: none;
}
.mode_effect_default.auto > div:last-child {
border-bottom: 3.5em solid transparent;
border-left: 5.7em solid white;
border-right: 5.7em solid transparent;
border-top: 3.5em solid transparent;
left: 5.4em;
}
.mode_effect_default.stop > div:first-child,
.mode_effect_default.stop > div:last-child {
position: relative;
left: 0;
border: none;
width: 40%;
height: 40%;
border-right: 1.8em solid white;
}
.mode_effect_default.stop > div:last-child {
border-right: none;
border-left: 1.8em solid white;
}
@keyframes mode_effect {
from {
transform: scale(1);
opacity: 0.4;
}
to {
transform: scale(1.2);
opacity: 0;
}
}
/* ローディングの通知を画面端に出す
--------------------------------------*/
.tyrano-loading {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
box-sizing: border-box;
font-size: 25px;
align-items: center;
margin: 0.7em;
pointer-events: none;
font-weight: bold;
z-index: 9999999999;
filter: drop-shadow(0 0 0.2em black);
}
.tyrano-loading .icon {
box-sizing: border-box;
width: 1.5em;
height: 1.5em;
border-radius: 100%;
border: 0.2em solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
animation: tyrano-loading-spin 1s infinite linear;
}
.tyrano-loading .message {
margin-left: 0.7em;
color: white;
line-height: 100%;
}
.tyrano-loading .message::after {
content: " ";
animation: dot-animation 2s steps(4) infinite;
animation-duration: inherit;
position: absolute;
}
@keyframes dot-animation {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}
@keyframes tyrano-loading-spin {
100% {
transform: rotate(360deg);
}
}
#three-cursor{
position: fixed;
/*丸の大きさと色の指定*/
background: #fff;
border-radius:10px;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 1;
}