rustdesk/src/ui/index.css

363 lines
5.5 KiB
CSS
Raw Normal View History

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;
}