diff --git a/src/elements.tsx b/src/elements.tsx
index 770dbac4e..bf5c561bd 100644
--- a/src/elements.tsx
+++ b/src/elements.tsx
@@ -175,4 +175,23 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
}
}
-export {CmdStrCode, Toggle, renderCmdText, RemoteStatusLight, InlineSettingsTextEdit};
+@mobxReact.observer
+class InfoMessage extends React.Component<{width : number, children : React.ReactNode}> {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
{this.props.children}
+
+
+ );
+ }
+}
+
+export {CmdStrCode, Toggle, renderCmdText, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage};
diff --git a/src/sh2.less b/src/sh2.less
index 9e4904e81..881e306f4 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -2860,6 +2860,12 @@ input[type=checkbox] {
flex-shrink: 0;
}
+ .detail-subtitle {
+ font-size: 18px;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ }
+
.title {
color: white;
padding-bottom: 8px;
@@ -2931,6 +2937,104 @@ input[type=checkbox] {
}
}
}
+
+ &.auth-editing {
+ .settings-field.align-top {
+ align-items: flex-start;
+
+ .settings-label {
+ margin-top: 8px;
+ }
+
+ .settings-input {
+ align-items: flex-start;
+ }
+ }
+
+ .settings-field .settings-input .undo-icon {
+ cursor: pointer;
+ font-size: 18px;
+ margin-left: 5px;
+ }
+
+ .authmode-dropdown .dropdown-trigger button {
+ width: 120px;
+ justify-content: flex-start;
+ }
+
+ .connectmode-dropdown .dropdown-trigger button {
+ width: 120px;
+ justify-content: flex-start;
+ }
+
+ .settings-field .raw-input {
+ width: 120px;
+ }
+
+ .settings-input input {
+ width: 250px;
+ }
+
+ .dropdown .dropdown-trigger button {
+ font-size: 12px;
+ }
+
+ .dropdown .dropdown-item {
+ font-size: 12px;
+ padding: 5px 5px 5px 12px;
+ }
+
+ .info-message {
+ margin-left: 22px;
+ }
+
+ .remoteedit-error {
+ font-size: 14px;
+ color: @term-red;
+ margin-top: 20px;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #333;
+ border: 1px solid @term-red;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+}
+
+.info-message {
+ position: relative;
+
+ .message-content {
+ position: absolute;
+ display: none;
+ flex-direction: row;
+ align-items: flex-start;
+ top: -6px;
+ left: -6px;
+ padding: 5px;
+ border: 1px solid #777;
+ background-color: #444;
+ border-radius: 5px;
+ z-index: 5;
+ overflow: hidden;
+
+ .info-icon {
+ margin-right: 5px;
+ width: 12px;
+ flex-shrink: 0;
+ }
+
+ .info-children {
+ flex: 1 0 0;
+ overflow: hidden;
+ }
+ }
+
+ &:hover {
+ .message-content {
+ display: flex;
}
}
}