2021-03-29 15:59:14 +08:00
|
|
|
html {
|
|
|
|
background-color: transparent;
|
|
|
|
var(gray-bg-osx): rgba(238, 238, 238, 0.75);
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media platform != "OSX" {
|
|
|
|
body {
|
|
|
|
border-top: color(border) solid 1px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
font-size: 1.4em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app {
|
|
|
|
flow: horizontal;
|
|
|
|
size: *;
|
|
|
|
}
|
|
|
|
|
|
|
|
.lighter-text {
|
|
|
|
color: color(lighter-text);
|
|
|
|
font-size: 0.9em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.left-pane {
|
|
|
|
width: 200px;
|
|
|
|
height: *;
|
|
|
|
background: color(bg);
|
|
|
|
border-right: color(border) 1px solid;
|
|
|
|
}
|
|
|
|
|
|
|
|
.left-pane > div:nth-child(1) {
|
|
|
|
border-spacing: 1em;
|
|
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
2022-01-02 11:40:30 +08:00
|
|
|
div.sessions-bar {
|
|
|
|
color: color(light-text);
|
|
|
|
padding-top: 0.5em;
|
|
|
|
border-top: color(border) solid 1px;
|
|
|
|
margin-bottom: 1em;
|
|
|
|
position: relative;
|
|
|
|
flow: horizontal;
|
|
|
|
}
|
|
|
|
|
2022-01-02 14:23:32 +08:00
|
|
|
div.sessions-tab span {
|
2022-01-02 11:40:30 +08:00
|
|
|
display: inline-block;
|
|
|
|
padding: 6px 12px;
|
|
|
|
cursor: pointer;
|
2022-01-03 16:31:13 +08:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow-x: hidden;
|
2022-01-02 11:40:30 +08:00
|
|
|
}
|
|
|
|
|
2022-01-02 14:23:32 +08:00
|
|
|
div.sessions-tab svg {
|
2022-01-02 11:40:30 +08:00
|
|
|
size: 14px;
|
|
|
|
}
|
|
|
|
|
2022-01-02 14:23:32 +08:00
|
|
|
div.sessions-tab span.active {
|
2022-01-02 11:40:30 +08:00
|
|
|
cursor: default;
|
|
|
|
border-radius: 3px;
|
|
|
|
background: white;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.search-id {
|
2022-01-03 16:31:13 +08:00
|
|
|
width: 120px;
|
2022-01-01 19:44:02 +08:00
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
2022-01-02 11:40:30 +08:00
|
|
|
display: inline-block;
|
2022-01-01 19:44:02 +08:00
|
|
|
}
|
|
|
|
|
2022-01-02 11:40:30 +08:00
|
|
|
div.search-id input {
|
|
|
|
font-size: 1em;
|
|
|
|
height: 20px;
|
|
|
|
border: none;
|
|
|
|
padding-left: 26px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.search-id span {
|
2022-01-01 19:44:02 +08:00
|
|
|
position: absolute;
|
2022-01-02 11:40:30 +08:00
|
|
|
top: 0px;
|
|
|
|
padding: 6px;
|
2022-01-01 19:44:02 +08:00
|
|
|
color: color(border);
|
|
|
|
}
|
|
|
|
|
2022-01-02 11:40:30 +08:00
|
|
|
div.search-id svg {
|
|
|
|
size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
span.search-icon {
|
|
|
|
left: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
span.clear-input {
|
|
|
|
display: none;
|
|
|
|
right: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.search-id:hover span.clear-input {
|
2022-01-01 19:44:02 +08:00
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2022-01-02 11:40:30 +08:00
|
|
|
span.clear-input:hover {
|
2022-01-01 19:44:02 +08:00
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
2021-03-29 15:59:14 +08:00
|
|
|
.your-desktop {
|
|
|
|
border-spacing: 0.5em;
|
|
|
|
border-left: color(accent) solid 2px;
|
|
|
|
padding-left: 0.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.your-desktop input[type=text] {
|
|
|
|
padding: 0;
|
|
|
|
border: none;
|
|
|
|
height: 1.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.your-desktop > div {
|
|
|
|
color: color(light-text);
|
|
|
|
}
|
|
|
|
|
|
|
|
.right-pane {
|
|
|
|
size: *;
|
|
|
|
background: color(gray-bg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.right-content {
|
|
|
|
overflow: scroll-indicator;
|
|
|
|
padding: 1.6em;
|
|
|
|
border-spacing: 1.6em;
|
|
|
|
size: *;
|
|
|
|
flow: vertical;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media platform == "OSX" {
|
|
|
|
.right-pane {
|
|
|
|
background: color(gray-bg-osx);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin CARD {
|
|
|
|
padding: 1.6em;
|
|
|
|
border-spacing: 1em;
|
|
|
|
background: color(bg);
|
|
|
|
border-radius: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-connect {
|
|
|
|
@CARD;
|
|
|
|
width: 320px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right-buttons {
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right-buttons>button {
|
|
|
|
margin-left: 1.6em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.connect-status {
|
|
|
|
left: 240px;
|
|
|
|
border-top: color(border) solid 1px;
|
|
|
|
width: 100%;
|
|
|
|
background: color(gray-bg);
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.connect-status > span.connect-status-icon {
|
|
|
|
border-radius: 4px;
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
display: inline-block;
|
|
|
|
margin-right: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.connect-status > span.link {
|
|
|
|
margin-left: 1em;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
span.connect-status-1 {
|
|
|
|
background: #e04f5f;
|
|
|
|
}
|
|
|
|
|
|
|
|
span.connect-status1 {
|
|
|
|
background: #32bea6;
|
|
|
|
}
|
|
|
|
|
|
|
|
span.connect-status0 {
|
|
|
|
background: #F5853B;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.recent-sessions-content {
|
|
|
|
border-spacing: 1em;
|
|
|
|
flow: horizontal-flow;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session {
|
|
|
|
border-radius: 1em;
|
|
|
|
height: 140px;
|
|
|
|
width: 220px;
|
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
2021-12-27 02:28:25 +08:00
|
|
|
div.remote-session:hover, div.remote-session-list:hover {
|
2021-03-29 15:59:14 +08:00
|
|
|
outline: color(button) solid 2px -2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session .platform {
|
|
|
|
width: *;
|
|
|
|
height: 120px;
|
|
|
|
padding: *;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session .platform .username{
|
|
|
|
left: 0;
|
|
|
|
color: #eee;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 38px;
|
|
|
|
font-size: 0.8em;
|
|
|
|
width: 220px;
|
|
|
|
overflow: hidden;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session .platform svg {
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
2021-12-27 02:28:25 +08:00
|
|
|
div.remote-session-list {
|
|
|
|
background: white;
|
2021-12-30 16:31:33 +08:00
|
|
|
width: 220px;
|
2021-12-27 02:28:25 +08:00
|
|
|
flow: horizontal;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session-list .platform {
|
|
|
|
size: 42px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session-list .platform svg {
|
|
|
|
width: 30px;
|
|
|
|
height: 30px;
|
|
|
|
background: none;
|
|
|
|
padding: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session-list .name {
|
|
|
|
size: *;
|
|
|
|
padding-left: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session-list .name >div {
|
|
|
|
margin-top: *;
|
|
|
|
margin-bottom: *;
|
|
|
|
width: *;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session-list .name .username {
|
|
|
|
margin-top: 3px;
|
|
|
|
font-size: 0.8em;
|
|
|
|
color: color(lighter-text);
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2021-03-29 15:59:14 +08:00
|
|
|
div.remote-session .text {
|
|
|
|
background: white;
|
|
|
|
position: absolute;
|
|
|
|
height: 3em;
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 0 0 1em 1em;
|
|
|
|
bottom: 0;
|
|
|
|
flow: horizontal;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.remote-session .text > div {
|
|
|
|
padding-top: 1em;
|
|
|
|
padding-left: 1em;
|
|
|
|
width: *;
|
|
|
|
}
|
|
|
|
|
|
|
|
svg#menu {
|
|
|
|
size: 1em;
|
|
|
|
background: none;
|
|
|
|
padding: 0.5em;
|
|
|
|
margin: 0.5em;
|
|
|
|
color: color(light-text);
|
|
|
|
}
|
|
|
|
|
2021-12-27 02:28:25 +08:00
|
|
|
.remote-session-list svg#menu {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
svg#menu:hover {
|
2021-03-29 15:59:14 +08:00
|
|
|
color: black;
|
|
|
|
border-radius: 1em;
|
|
|
|
background: color(gray-bg);
|
|
|
|
}
|
|
|
|
|
2021-12-27 02:28:25 +08:00
|
|
|
svg#edit:hover {
|
|
|
|
color: black;
|
2021-03-29 15:59:14 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
svg#edit {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.install-me, div.trust-me {
|
|
|
|
margin-top: 0.5em;
|
|
|
|
padding: 20px;
|
|
|
|
color: white;
|
|
|
|
background: linear-gradient(left,#e242bc,#f4727c);
|
|
|
|
}
|
|
|
|
|
|
|
|
div.install-me > div:nth-child(1) {
|
|
|
|
font-size: 1.2em;
|
|
|
|
font-weight: bold;
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.install-me > div:nth-child(2) {
|
|
|
|
line-height: 1.4em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.trust-me > div:nth-child(1) {
|
|
|
|
font-size: 1.2em;
|
|
|
|
text-align: center;
|
|
|
|
font-weight: bold;
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.trust-me > div:nth-child(2) {
|
|
|
|
font-size: 0.9em;
|
|
|
|
margin-bottom: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.trust-me > div:nth-child(3) {
|
|
|
|
text-align: center;
|
|
|
|
font-size: 1.5em;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
div#myid {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
div#myid svg#menu {
|
|
|
|
position: absolute;
|
|
|
|
right: -1em;
|
|
|
|
}
|