@charset "UTF-8";
/**
* ====================================================
* AW Modern Style (Image-free, Light/Dark Theme)
*
* ActiveWidgets 2.6.4 が使用する画像 (grid.png, button.png) を
* 純粋な CSS に置き換える上書きスタイルシート。
*
* 読み込み順序: 必ず aw.css の後に読み込むこと
*
* <- ★ ココ
* <- 独自 Addon の CSS
*
* テーマ切替: または任意の親要素に
* - data-theme="light" (省略時のデフォルト)
* - data-theme="dark"
* を付与
* ====================================================
*/
/* ----------------------------------------------------
* テーマ変数
* ---------------------------------------------------- */
:root,
[data-theme="light"] {
/* ---- Grid: ヘッダ ---- */
--aw-header-bg: #efefef;
--aw-header-bg-hover: #e5e5e5;
--aw-header-border: #d0d0d0;
--aw-header-border-hover: #5a8dc2;
--aw-header-text: #333333;
--aw-header-sort-color: #5a8dc2;
/* ---- Grid: 行セレクタ (左端の行番号列) ---- */
--aw-selector-bg: #efefef;
--aw-selector-text: #888888;
--aw-selector-border: #d0d0d0;
/* ---- Grid: 区切り線 ---- */
--aw-grid-separator: #d0d0d0;
/* ---- Grid: 選択行 ---- */
--aw-row-selected-bg: #4a90e2;
--aw-row-selected-text: #ffffff;
/* ---- ボタン (.aw-ui-button) ---- */
--aw-button-bg: #ffffff;
--aw-button-bg-hover: #f5f9ff;
--aw-button-bg-active: #e8eef7;
--aw-button-border: #c0c0c0;
--aw-button-border-hover: #5a8dc2;
--aw-button-text: #333333;
--aw-button-text-disabled:#aaaaaa;
--aw-button-bg-disabled: #f0f0f0;
/* ---- フッタ ---- */
--aw-footer-bg: #fafafa;
--aw-footer-border: #d0d0d0;
}
[data-theme="dark"] {
/* ---- Grid: ヘッダ ---- */
--aw-header-bg: #2d3138;
--aw-header-bg-hover: #3a4150;
--aw-header-border: #44494f;
--aw-header-text: #e0e0e0;
--aw-header-sort-color: #82b4ff;
/* ---- Grid: 行セレクタ ---- */
--aw-selector-bg: #262a30;
--aw-selector-text: #888;
--aw-selector-border: #44494f;
/* ---- Grid: 区切り線 ---- */
--aw-grid-separator: #3a3f47;
/* ---- Grid: 選択行 ---- */
--aw-row-selected-bg: #3d6ba8;
--aw-row-selected-text: #fff;
/* ---- ボタン ---- */
--aw-button-bg: #2d3138;
--aw-button-bg-hover: #3a4150;
--aw-button-bg-active: #1e2126;
--aw-button-border: #44494f;
--aw-button-border-hover: #82b4ff;
--aw-button-text: #e0e0e0;
--aw-button-text-disabled:#666;
--aw-button-bg-disabled: #262a30;
/* ---- フッタ ---- */
--aw-footer-bg: #2a2e34;
--aw-footer-border: #44494f;
}
/* ====================================================
* Grid: ヘッダ (aw-grid-header)
* 元: background: #d6d2c2 (ベージュ)
*
* padding-right: 3px について:
* grid.css の .aw-grid-cell には padding-left: 3px があり、
* セルの内容領域は実質「セル幅 - 3px - border(1px) = -4px」となる。
* ヘッダ側は padding-left が aw.css 既定の内側 margin 相殺で 0px のため、
* そのままだと右ボーダー位置がセル側より 3px 左にずれて見える。
* ヘッダの右側に 3px の padding を補うことで、罫線位置がセルと揃う。
* ==================================================== */
.aw-header-0 .aw-grid-header,
.aw-header-0 .aw-grid-header .aw-item-box {
background: var(--aw-header-bg) !important;
background-image: none !important;
color: var(--aw-header-text);
padding-right: 3px !important;
}
.aw-header-0 .aw-mouseover-header {
border-bottom: 1px solid var(--aw-header-border) !important;
}
/* ヘッダ hover (元: #fcc247 オレンジ) */
.aw-header-0 .aw-mouseover-header,
.aw-header-0 .aw-mouseover-header .aw-item-box {
background: var(--aw-header-bg-hover) !important;
background-image: none !important;
border-bottom-color: var(--aw-header-border-hover) !important;
}
/* ヘッダ無効時 */
.aw-disabled-control .aw-header-0 .aw-grid-header,
.aw-disabled-control .aw-header-0 .aw-grid-header .aw-item-box {
background: var(--aw-header-bg) !important;
background-image: none !important;
opacity: 0.6;
}
/* ====================================================
* Grid: 行セレクタ (左端の行番号列 .aw-row-selector)
* ==================================================== */
.aw-row-selector {
background: var(--aw-selector-bg) !important;
background-image: none !important;
border-bottom-color: transparent !important;
border-top-color: var(--aw-selector-bg) !important;
border-right-color: var(--aw-selector-border) !important;
color: var(--aw-selector-text);
}
.aw-disabled-control .aw-row-selector {
background: var(--aw-selector-bg) !important;
opacity: 0.6;
}
/* ====================================================
* Grid: カラム区切り線
*
* 元の AW 設計:
* .aw-grid-separator は幅 20px の透明なリサイズハンドル。
* left:-10px + margin-right:-20px で「列の境目」に重なるよう配置され、
* 中に grid.png の縦線部分 (-70px) を表示することで罫線になっていた。
*
* 問題:
* この separator 要素に border-right を付けると、要素の右端 (= 列の境目から
* +10px の位置) に線が引かれ、データセルの右ボーダーとずれる。
*
* 修正:
* separator 要素は背景透明のままにして罫線描画はしない。
* 代わりにヘッダセル (.aw-grid-header) 自身の border-right で罫線を引く。
* こうすればデータセル (.aw-grid-cell) の border-right と同じ「セル右端」
* 位置で罫線が揃う。
* ==================================================== */
.aw-grid-separator {
background: transparent !important;
background-image: none !important;
/* border は付けない (元のリサイズハンドル機能は残す) */
}
.aw-grid-control .aw-grid-header,
.aw-grid-control .aw-row-selector {
text-shadow: none !important;
}
/* ヘッダのセル右側に罫線 (データセルと同じ位置に揃える) */
.aw-header-0 .aw-grid-header {
border-right: 1px dotted var(--awgrid-border-cell, var(--aw-grid-separator)) !important;
}
/* ====================================================
* Grid: ソート矢印
* 元: url(grid.png) -25px -5px (asc) / -45px -5px (desc)
* → Unicode 三角 or CSS triangle
* ==================================================== */
.aw-grid-sort {
background: none !important;
background-image: none !important;
width: 0 !important;
height: 0 !important;
display: inline-block;
margin-left: 4px;
vertical-align: middle;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
/* 昇順: ▲ (下向きボーダーで上向き三角を作る) */
.aw-sort-ascending .aw-grid-sort {
border-bottom: 5px solid var(--aw-header-sort-color);
border-top: none;
}
/* 降順: ▼ */
.aw-sort-descending .aw-grid-sort {
border-top: 5px solid var(--aw-header-sort-color);
border-bottom: none;
}
/* ====================================================
* Grid: 選択行
* ==================================================== */
.aw-grid-control .aw-rows-selected .aw-grid-cell {
background: var(--aw-row-selected-bg) !important;
color: var(--aw-row-selected-text);
}
/* ====================================================
* Grid: フッタ
* ==================================================== */
.aw-grid-footers {
border-top: 1px solid var(--aw-footer-border) !important;
background: var(--aw-footer-bg);
}
/* ====================================================
* ボタン (.aw-ui-button)
* 元: url(button.png) のスプライト
* 各状態 (hover/down/disabled) は背景画像位置で表現
* → 単色 + ボーダー + :hover/:active で置換
* ==================================================== */
.aw-ui-button {
background: var(--aw-button-bg) !important;
background-image: none !important;
border: 1px solid var(--aw-button-border) !important;
border-radius: 3px;
padding: 0 !important;
height: 23px !important;
color: var(--aw-button-text);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.aw-ui-button .aw-item-box {
background: transparent !important;
background-image: none !important;
padding: 0 10px !important;
text-indent: 0 !important;
color: inherit;
}
/* hover */
.aw-mouseover-button {
background: var(--aw-button-bg-hover) !important;
background-image: none !important;
border-color: var(--aw-button-border-hover) !important;
}
.aw-mouseover-button .aw-item-box {
background: transparent !important;
background-image: none !important;
}
/* mousedown (押下中) */
.aw-mousedown-button {
background: var(--aw-button-bg-active) !important;
background-image: none !important;
}
.aw-mousedown-button .aw-item-box {
background: transparent !important;
background-image: none !important;
}
/* disabled (無効) */
.aw-ui-button.aw-disabled-control {
background: var(--aw-button-bg-disabled) !important;
background-image: none !important;
color: var(--aw-button-text-disabled) !important;
cursor: not-allowed;
border-color: var(--aw-button-border) !important;
}
.aw-ui-button.aw-disabled-control .aw-item-box {
background: transparent !important;
background-image: none !important;
color: inherit !important;
}
/* ====================================================
* 念のため: png1 互換クラス (IE6時代のフォールバック)
* AW が body に追加するクラスだが、画像参照だけ無効化
* ==================================================== */
.aw-png1 .aw-ui-button,
.aw-png1 .aw-ui-button .aw-item-box,
.aw-png1 .aw-grid-separator,
.aw-png1 .aw-grid-sort {
background-image: none !important;
}
/* ====================================================
* 独自 Addon ツールバーボタン (.aw-grid-frame .toolbar button)
* grid.css 側で既に Bootstrap風スタイル指定済みだが、
* テーマ変数で塗り直し
* ==================================================== */
/*
.aw-grid-frame .toolbar button {
background: var(--aw-button-bg);
border-color: var(--aw-button-border);
color: var(--aw-button-text);
transition: background 0.15s, border-color 0.15s;
}
.aw-grid-frame .toolbar button:hover:not([disabled]) {
background: var(--aw-button-bg-hover);
border-color: var(--aw-button-border-hover);
}
.aw-grid-frame .toolbar button:active:not([disabled]) {
background: var(--aw-button-bg-active);
}
.aw-grid-frame .toolbar button[disabled] {
background: var(--aw-button-bg-disabled);
color: var(--aw-button-text-disabled);
border-color: var(--aw-button-border);
}
*/