/*
 * ===============================================
 *
 * RAMAA Engine (Real-time Animated Media Application Apparatus)
 * by Gounbeee 2021 - 2026
 *
 * License ： CC BY-NC-SA (Attribution-NonCommercial-ShareAlike)
 *
 * このプロジェクトは、Gounbeeeから作成され、個人的な利用、改変が可能です。
 * 改変時、このライセンス表記を残す義務があり、改変後の作成物が本ソフトと同じライセンスを継承します。
 *
 * ===============================================
 */

/* =====================================================================
   Attributes パネル
   Layersパネルと同じダークテーマ（角丸・ボーダー・行区切り）で統一
   ===================================================================== */

.bl_attribManager_wrapper {
  background: rgba(42, 37, 31, 0.95);
  border: 1px solid #6b6152;
  border-radius: 6px;
  overflow-y: auto;
  color: #d8cbb8;
  font-family: 'nsjp', sans-serif;

  display: none;

}


.bl_btn_deleteall {
  background-color: transparent;
  color: #d8cbb8;
  cursor: pointer;
}


.bl_btn_deleteall:hover {

  color: #d9705e;

}




.bl_attribManager_edit_btn {

  display: inline-block;
  padding: 4px 13px;
  font-size: 1.1em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #e1813a;
  background-color: #3a332b;
  border: 1px solid #5a5142;
  border-radius: 4px;
  font-family: 'nsjp';


}

.bl_attribManager_edit_btn:hover {

  color: #f0b070;
  border-color: #e1813a;

}



/* 設定1行分のブロック（Layersの行と同じ区切り線） */
.bl_attribManager {
  color: #d8cbb8;
  font-size: 1em;
  border-bottom: 1px solid #5a5142;
  padding-bottom: 0.75em;

}




.bl_attribManager_desc {
  color: #d8cbb8;
  font-size: 1em;

}





.bl_attr_textArea {
  width: 97%;
  color: #d8cbb8;
  background: #201c17;
  border: 1px solid #5a5142;
  border-radius: 4px;
  font-size: 1.1em;
  font-weight: 400;
  font-family: 'nsjp';
  text-align: left;
  padding: 4px 6px;
  box-sizing: border-box;

}


/* パネルのタイトル（Layersのタイトルバーと同じ見た目） */
.bl_attribManager_container > h3 {
  font-size: 1.05em;
  letter-spacing: 0.1em;
  margin: 0.4em -0.6em 0.4em -0.6em;
  padding: 6px 10px;
  background: #57503f;
  border-top: 1px solid #6b6152;
  border-bottom: 1px solid #6b6152;
  color: #d8cbb8;

}



.bl_attr_font {
  width: 97%;
  color: #d8cbb8;
  background: #201c17;
  border: 1px solid #5a5142;
  border-radius: 4px;
  font-size: 1.05em;
  font-weight: 400;
  font-family: 'nsjp';
  outline: none;
  text-align: left;
  padding: 2px 4px;
}

.bl_attr_font option {
  background: #2a2620;
  color: #d8cbb8;
}


/* ============================================================
   多言語テキスト欄（en / ja / kr）
   3言語ぶんの欄を常時表示し、現在の表示言語(gl_LANG)のブロックだけ
   左端をアクセントカラーで縁取り＋「表示中」バッジを出す。
   ============================================================ */
.bl_attr_lang_block {
  border-left: 3px solid transparent;
  padding-left: 5px;
  margin-bottom: 2px;
}

.bl_attr_lang_block.is_current_lang {
  border-left-color: #d9a05e;
  background: rgba(217, 160, 94, 0.06);
}

/* 「表示中」バッジ（現在の表示言語のブロックだけ表示する） */
.bl_attr_lang_badge {
  display: none;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #201c17;
  background: #d9a05e;
  border-radius: 3px;
}

.bl_attr_lang_block.is_current_lang .bl_attr_lang_badge {
  display: inline-block;
}



.bl_attr_input {

  color: #d8cbb8;
  background: #201c17;
  font-size: 1.05em;
  font-weight: 400;
  font-family: 'nsjp';
  outline: none;
  border: 1px solid #5a5142;
  border-radius: 4px;
  text-align: left;
  padding: 2px 6px;
  box-sizing: border-box;

}

.bl_attr_input:focus {

  border-color: #e1813a;

}

.bl_attr_input:disabled {

  color: #7d7362;
  background: #2a2620;
  cursor: not-allowed;

}


.bl_attr_input_key_time {
  color: #d8cbb8;
  background: transparent;
  font-size: 1.05em;
  font-weight: 400;
  font-family: 'nsjp';
  outline: none;
  border:  none;
  text-align: center;
  display: none;
}






.bl_zoomSelect {

  background-color: #3a332b;
  color: #c3b09c;
  text-align: center;
  font-size: 0.75em;
  border-radius: 4px;
}

.bl_keyframe_btn {

  outline: none;
  border: 1px solid #5a5142;
  border-radius: 4px;
  cursor:  pointer;
  background-color: #3a332b;
  color: #d98aa6;
  font-size: 1em;
  font-weight: 700;
  font-family: 'nsjp';
  padding: 4px 0;

}

.bl_keyframe_btn:hover {

  color: #f0b8c8;
  border-color: #d98aa6;

}


.bl_btn_delete {

  outline: none;
  border: 1px solid #5a5142;
  border-radius: 4px;
  cursor:  pointer;
  background-color: #3a332b;
  color: #d9705e;
  font-size: 1em;
  font-weight: 700;
  font-family: 'nsjp';
  padding: 4px 8px;


}



.bl_btn_delete:hover {

  color: #f0a595;
  border-color: #d9705e;


}


.bl_btn_duplicate {

  outline: none;
  border: 1px solid #5a5142;
  border-radius: 4px;
  cursor:  pointer;
  background-color: #3a332b;
  color: #7cae52;
  font-size: 1em;
  font-weight: 700;
  font-family: 'nsjp';
  padding: 4px 8px;


}



.bl_btn_duplicate:hover {

  color: #b6d98a;
  border-color: #7cae52;


}



.bl_attribManager_label {

  font-size: 1em;
  font-family: 'nsjp';
}



/* 属性名のラベル */
.bl_attr_span {


  font-size: 0.95em;
  color: #a99e88;
  letter-spacing: 0.05em;


}


/* キーフレームが存在する属性の名称を赤みを帯びた色で区別する */
.bl_attr_span.attr_has_keyframe {

  color: #d9705e;
  font-weight: bold;

}


/* ホバーでローカルタイムラインにキーフレームを出せる属性名。
   入力欄を持たない属性（Bridgeの Handles 等）でも名前から確認できる */
.bl_attr_span.attr_name_hoverable:hover {

  color: #e1c9a3;

}


.bl_attr_span.attr_has_keyframe.attr_name_hoverable:hover {

  color: #f0907c;

}


/* キーフレームを持つ属性のラベル横の Animation Editor 呼び出しボタン */
.attr_anim_btn {

  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: 'nsjp', sans-serif;
  color: #d98aa6;
  background: #3a332b;
  border: 1px solid #5a5142;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;

}

.attr_anim_btn:hover {

  color: #f0b8c8;
  border-color: #d98aa6;

}




.ly_btn_deleteall {
  width: 40px;
  height: 40px;
  margin-left: 2%;
  font-weight: 700;
}


.ly_attr_span {
  /*  https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element  */
  display: block;
  margin-bottom: 0.5em;

}





.ly_keyframe_btn {

  width: 100%;


}


/*  https://css-tricks.com/multiple-class-id-selectors/  */
.ly_keyframe_btn.keyAll {

  margin-top: 1em;

}



.ly_btn_delete {


}


.ly_btn_duplicate {


}


.ly_attribManager_wrapper {
  padding: 0.5em 0.6em 3em 0.6em;
  position: absolute;
  top: 64px;
  right: 8px;
  width: 18em;
  box-sizing: border-box;
  max-height: calc(100% - 170px);
  z-index: 11;
}


.ly_attribManager {
  display: grid;
  grid-template-columns:  repeat(1, 1fr);
  gap:  0.4em 1em;
  justify-content: space-between;
  margin-top: 0.9em;


}


.ly_attribManager_desc {
  display: grid;
  grid-template-columns:  repeat(1, 1fr);
  gap:  0.4em 1em;
  justify-content: space-between;
  margin-top: 0.5em;


}


.ly_attribManager_label {

  width: 100%;
  margin-top: 0.5em;



}


.ly_zoomSelect {
  padding-top: 0.2em;
  margin-left: 12em;
  display: block;
  width:  8em;
  height: 4em;
}


.ly_attr_input {

  width: 97%;


}


.ly_attr_input_key_time {





}



.ly_attribManager_edit_btn {

  margin-top: 0.5em;
  padding: 0.5em;

}


.zoom_select {

  outline: none;
  border:  none;
  cursor:  pointer;
  background: transparent;
  color: #d8cbb8;
  font-size: 1.25em;
  font-weight: 700;


}



.zoom_select:hover {

  color: #f7ede0;


}



@media (max-width: 35em) {

  .ly_btn_deleteall {

    font-size: x-small;

  }



  .ly_attribManager_wrapper {

    top: 5.5rem;



  }




}