mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
use css variables
This commit is contained in:
Red Adaya
parent
a5d4ae04af
commit
a306ca2ef0
@ -91,12 +91,13 @@
|
||||
|
||||
--form-element-border-color: rgba(241, 246, 243, 0.15);
|
||||
--form-element-bg-color: var(--app-bg-color);
|
||||
--form-element-text-color: #ffffff;
|
||||
--form-element-text-color: var(--app-text-color);
|
||||
--form-element-label-color: rgb(195, 200, 194);
|
||||
--form-element-primary-color: rgb(78, 154, 6);
|
||||
--form-element-secondary-color: rgba(255, 255, 255, 0.09);
|
||||
--form-element-error-color: rgb(204, 0, 0);
|
||||
--form-element-icon-color: #fff;
|
||||
--form-element-disabled-text-color: #777;
|
||||
|
||||
/* button colors */
|
||||
/* todo: use --form-element-* directly in elements */
|
||||
@ -211,7 +212,7 @@
|
||||
/* table colors */
|
||||
--table-border-color: rgba(241, 246, 243, 0.15);
|
||||
--table-thead-border-top-color: rgba(250, 250, 250, 0.1);
|
||||
--table-thead-border-bottom-color: var(--table-border-color);
|
||||
--table-thead-bright-border-color: #ccc;
|
||||
--table-thead-bg-color: rgba(250, 250, 250, 0.02);
|
||||
--table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
|
||||
--table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
@ -44,6 +44,8 @@
|
||||
--form-element-label-color: rgba(0, 0, 0, 0.6);
|
||||
--form-element-secondary-color: rgba(255, 255, 255, 0.09);
|
||||
--form-element-icon-color: rgb(0, 0, 0, 0.6);
|
||||
--form-element-disabled-text-color: #b7b7b7;
|
||||
--form-element-placeholder-color: #b7b7b7;
|
||||
|
||||
/* modal colors */
|
||||
--modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
border: 1px solid var(--dropdown-border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--dropdown-bg-color);
|
||||
line-height: 22px;
|
||||
|
||||
&.no-label {
|
||||
height: 34px;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
thead {
|
||||
border-radius: var(--sizing-2-xs, 4px);
|
||||
border-bottom: 2px solid var(--table-thead-border-bottom-color);
|
||||
border-bottom: 2px solid var(--table-thead-bright-border-color);
|
||||
|
||||
th {
|
||||
height: 32px;
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #777;
|
||||
color: var(--form-element-placeholder-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,37 +77,7 @@
|
||||
|
||||
.workspace-dropdown,
|
||||
.remote-dropdown {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
font-size: 0.8em;
|
||||
padding: 0.5em 1em;
|
||||
.label {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.session-dropdown,
|
||||
.remote-dropdown {
|
||||
.dropdown-item {
|
||||
color: var(--app-text-color);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
border-radius: 0 0 4px 4px;
|
||||
width: 16em;
|
||||
}
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.remote-dropdown {
|
||||
@ -124,10 +94,6 @@
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
@ -171,14 +137,14 @@
|
||||
}
|
||||
|
||||
&.is-top {
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-top: 1px solid #333;
|
||||
border-bottom: 2px solid var(--table-thead-bright-border-color);
|
||||
border-top: 1px solid var(--table-thead-border-top-color);
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.is-bottom {
|
||||
border-top: 2px solid #ccc;
|
||||
border-top: 2px solid var(--table-thead-bright-border-color);
|
||||
}
|
||||
|
||||
.trash-icon {
|
||||
@ -193,7 +159,7 @@
|
||||
|
||||
.control-button {
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
color: var(--form-element-label-color);
|
||||
margin-left: 12px;
|
||||
|
||||
.icon {
|
||||
@ -233,8 +199,11 @@
|
||||
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
color: #777;
|
||||
font-weight: normal;
|
||||
|
||||
.icon {
|
||||
fill: var(--form-element-disabled-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,7 +217,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 30px 0 30px 0;
|
||||
border: 1px solid white;
|
||||
border: 1px solid var(--app-border-color);
|
||||
border-radius: 3px;
|
||||
margin: 20px 50px 20px 20px;
|
||||
}
|
||||
|
||||
@ -544,76 +544,6 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
</div>
|
||||
</If>
|
||||
<div key="hsr" className="history-scroll-region">
|
||||
{/* <table className="history-table" cellSpacing="0" cellPadding="0" border={0} ref={this.tableRef}>
|
||||
<tbody>
|
||||
<For index="idx" each="item" of={items}>
|
||||
<tr
|
||||
key={item.historyid}
|
||||
className={cn("history-item", {
|
||||
"is-selected": hvm.selectedItems.get(item.historyid),
|
||||
})}
|
||||
>
|
||||
<td className="selectbox" onClick={() => this.handleSelect(item.historyid)}>
|
||||
<HistoryCheckbox checked={hvm.selectedItems.get(item.historyid)} />
|
||||
</td>
|
||||
<td className="cmdstr">
|
||||
<HistoryCmdStr
|
||||
cmdstr={item.cmdstr}
|
||||
onUse={() => this.handleUse(item)}
|
||||
onCopy={() => this.handleCopy(item)}
|
||||
isCopied={this.copiedItemId.get() == item.historyid}
|
||||
fontSize="normal"
|
||||
limitHeight={true}
|
||||
/>
|
||||
</td>
|
||||
<td className="workspace text-standard">{formatSSName(snames, scrnames, item)}</td>
|
||||
<td className="remote text-standard">{formatRemoteName(rnames, item.remote)}</td>
|
||||
<td className="ts text-standard">{getHistoryViewTs(nowDate, item.ts)}</td>
|
||||
<td className="downarrow" onClick={() => this.activateItem(item.historyid)}>
|
||||
<If condition={activeItemId != item.historyid}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12.1297 6.62492C12.3999 6.93881 12.3645 7.41237 12.0506 7.68263L8.48447 10.7531C8.20296 10.9955 7.78645 10.9952 7.50519 10.7526L3.94636 7.68213C3.63274 7.41155 3.59785 6.93796 3.86843 6.62434C4.13901 6.31072 4.6126 6.27583 4.92622 6.54641L7.99562 9.19459L11.0719 6.54591C11.3858 6.27565 11.8594 6.31102 12.1297 6.62492Z"
|
||||
fill="#C3C8C2"
|
||||
/>
|
||||
</svg>
|
||||
</If>
|
||||
<If condition={activeItemId == item.historyid}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M3.87035 9.37508C3.60009 9.06119 3.63546 8.58763 3.94936 8.31737L7.51553 5.24692C7.79704 5.00455 8.21355 5.00476 8.49481 5.24742L12.0536 8.31787C12.3673 8.58845 12.4022 9.06204 12.1316 9.37566C11.861 9.68928 11.3874 9.72417 11.0738 9.45359L8.00438 6.80541L4.92806 9.45409C4.61416 9.72435 4.14061 9.68898 3.87035 9.37508Z"
|
||||
fill="#C3C8C2"
|
||||
/>
|
||||
</svg>
|
||||
</If>
|
||||
</td>
|
||||
</tr>
|
||||
<If condition={activeItemId == item.historyid}>
|
||||
<tr className="active-history-item">
|
||||
<td colSpan={6}>
|
||||
<LineContainer
|
||||
key={activeItemId}
|
||||
historyId={activeItemId}
|
||||
width={this.tableWidth.get()}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</If>
|
||||
</For>
|
||||
</tbody>
|
||||
</table> */}
|
||||
<div className="history-table" ref={this.tableRef}>
|
||||
<For index="idx" each="item" of={items}>
|
||||
<div
|
||||
|
||||
Loading…
Reference in New Issue
Block a user