mirror of
https://github.com/octoleo/syncthing.git
synced 2024-09-20 13:49:02 +00:00
5e384c9185
gui: Add copy to clipboard, share by email, and share by SMS buttons to device IDs (fixes #2771, ref #3868) Add buttons to allow for simpler sharing device IDs with others. The first one copies the ID to clipboard (trying to use three different methods, depending on the browser). The second one triggers a mailto link with prefilled subject and body. The third one triggers an sms link with prefilled body. The short description of Syncthing included in the latter part of the body is a direct copy from the description at the official website https://syncthing.net. Issue #3868 is referred here, because the copy to clipboard button offers an alternative method for IE11 users to actually be able to copy device IDs without having to select it manually (which doesn't work). Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
572 lines
11 KiB
CSS
572 lines
11 KiB
CSS
/*
|
|
// Copyright (C) 2014 The Syncthing Authors.
|
|
//
|
|
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
// You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
|
|
*/
|
|
|
|
body {
|
|
padding-bottom: 70px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
line-height: 1.25;
|
|
}
|
|
|
|
ul+h5 {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.content {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.panel-progress {
|
|
height: 3px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
}
|
|
|
|
.checkbox {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.checkbox input[type="checkbox"], .radio input[type="radio"] {
|
|
float: none; /* issue #1197 */
|
|
}
|
|
|
|
#advancedAccordion input.form-control[type="checkbox"] {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.popover {
|
|
max-width: none;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.tooltip {
|
|
word-wrap:break-word;
|
|
}
|
|
|
|
.text-monospace {
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
}
|
|
|
|
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
|
|
border-top: none;
|
|
}
|
|
|
|
.logo {
|
|
margin: 0;
|
|
padding: 0;
|
|
top: -5px;
|
|
position: relative;
|
|
}
|
|
|
|
.list-no-bullet {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.li-column {
|
|
display: inline-block;
|
|
min-width: 7em;
|
|
margin-right: 1em;
|
|
padding: 1px 4px;
|
|
margin: 2px 2px;
|
|
}
|
|
.li-column span.data {
|
|
margin-left: 0.5em;
|
|
min-width: 10em;
|
|
text-align: right;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ng-cloak {
|
|
display: none !important;
|
|
}
|
|
|
|
.table th {
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.table td {
|
|
/*padding-left: 20px !important;*/
|
|
}
|
|
|
|
.table td.small-data {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Removing text decoration on anchor link hover pull request: #4135 */
|
|
.table td.small-data span a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
table.table-condensed {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
table.table-dynamic {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
table.table-condensed td,
|
|
table.table-condensed th {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.table-condensed td.no-overflow-ellipse {
|
|
white-space: normal;
|
|
}
|
|
|
|
table.table-auto {
|
|
table-layout: auto;
|
|
}
|
|
|
|
table.table-auto th {
|
|
width: 1px;
|
|
}
|
|
|
|
table.table-auto td {
|
|
max-width: 0px;
|
|
}
|
|
|
|
/* Remote Devices connection-quality indicator */
|
|
.reception-0 {
|
|
background: url('../../vendor/bootstrap/fonts/reception-0.svg') no-repeat;
|
|
}
|
|
|
|
.reception-1 {
|
|
background: url('../../vendor/bootstrap/fonts/reception-1.svg') no-repeat;
|
|
}
|
|
|
|
.reception-2 {
|
|
background: url('../../vendor/bootstrap/fonts/reception-2.svg') no-repeat;
|
|
}
|
|
|
|
.reception-3 {
|
|
background: url('../../vendor/bootstrap/fonts/reception-3.svg') no-repeat;
|
|
}
|
|
|
|
.reception-4 {
|
|
background: url('../../vendor/bootstrap/fonts/reception-4.svg') no-repeat;
|
|
}
|
|
|
|
.reception {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
vertical-align: -10%;
|
|
background-size: contain;
|
|
/* Simulate same width as Fork Awesome icons. */
|
|
margin-left: .14285715em;
|
|
margin-right: .14285715em;
|
|
}
|
|
|
|
.remote-devices-panel {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Wrap long file paths to prevent text overflow. See issue #6268. */
|
|
.file-path {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.folder-advanced {
|
|
padding: 1rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.folder-advanced-toggle {
|
|
cursor: pointer;
|
|
}
|
|
.folder-advanced-toggle .collapse,
|
|
.folder-advanced-toggle.collapsed .expand {
|
|
display: inline-block;
|
|
}
|
|
|
|
.folder-advanced-toggle.collapsed .collapse,
|
|
.folder-advanced-toggle .expand{
|
|
display: none;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu {
|
|
column-count: 2;
|
|
column-gap: 0;
|
|
width: 450px;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu > li > a {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav>li{
|
|
float: left;
|
|
}
|
|
.navbar-right {
|
|
/* to align with panel */
|
|
padding-right: 15px;
|
|
float: right;
|
|
}
|
|
|
|
.panel-body .table-condensed {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dl-horizontal.dl-narrow dt {
|
|
width: 40px;
|
|
}
|
|
|
|
.dl-horizontal.dl-narrow dd {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
/**
|
|
* Panel, Model and Accordion Title bars
|
|
*/
|
|
|
|
.panel-icon {
|
|
float: left;
|
|
margin-right: 15px;
|
|
margin-top: 0.125em;
|
|
margin-bottom: 0.125em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-title .panel-icon {
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
button.panel-heading {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.panel-heading .panel-title-text {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-heading .panel-status {
|
|
margin-left:15px;
|
|
}
|
|
|
|
identicon {
|
|
width: 1em;
|
|
height: 1em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.identicon {
|
|
width: 1em;
|
|
height: 1em;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
a.toggler {
|
|
color: inherit;
|
|
}
|
|
a.toggler:hover {
|
|
border-bottom: 1px dashed;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/**
|
|
* Panel padding decrease
|
|
*/
|
|
|
|
.panel-collapse .panel-body {
|
|
padding: 5px;
|
|
}
|
|
|
|
/**
|
|
* Progress bars with centered text
|
|
*/
|
|
|
|
.progress {
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress span.frontal {
|
|
text-align: center;
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.three-columns {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
}
|
|
|
|
.two-columns {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
|
|
ul.three-columns li, ul.two-columns li {
|
|
padding-left: 0.5em;
|
|
text-indent: -0.5em;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
z-index: 980;
|
|
}
|
|
|
|
/*
|
|
* Restore Versions tweaks
|
|
*/
|
|
|
|
#restoreTree-container {
|
|
overflow-y: scroll;
|
|
resize: vertical;
|
|
/* Limit height to prevent vertical screen overflow. */
|
|
max-height: calc(100vh - 390px);
|
|
/* Always fit at least one folder with dropdown open. */
|
|
min-height: 136px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
#restoreTree-container {
|
|
max-height: calc(100vh - 401px);
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
#restoreTree-container {
|
|
max-height: calc(100vh - 333px);
|
|
}
|
|
}
|
|
|
|
/* Ignore fixed height when manually resized. */
|
|
#restoreTree-container[style*="height"] {
|
|
max-height: none;
|
|
}
|
|
|
|
/* Remove table outline as rows have own focus style already. */
|
|
#restoreTree:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
/* Align dropdown with title first line. */
|
|
#restoreTree td + td {
|
|
padding-top: 4px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Reduce space between toggle and menu on mobile. */
|
|
#restoreTree .dropdown-toggle {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Change direction to remain on screen on mobile. */
|
|
#restoreTree .dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
/* Ensure maximum space for filtering and date range. */
|
|
#restoreVersions .form-group,
|
|
#restoreVersions .form-control {
|
|
width: 100%;
|
|
}
|
|
|
|
/** Footer nav on small devices **/
|
|
@media (max-width: 1199px) {
|
|
/* Stay at the end of the page, with space reserved for the footer
|
|
usually taking up two rows. */
|
|
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Layout after the normal contents, as this is when the footer switches
|
|
to a vertical layout. */
|
|
|
|
body {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin: 3.25px -15px;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-nav .open .dropdown-menu {
|
|
position: absolute;
|
|
left: auto;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
border: 1px solid #cccccc;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
li[language-select] {
|
|
position: static !important;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu {
|
|
column-count: auto;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-top: -12px !important;
|
|
max-width: 450px;
|
|
overflow-y: scroll;
|
|
/* height of 5.5 elements + negative margin-top */
|
|
height: 276px;
|
|
}
|
|
|
|
.two-columns {
|
|
-webkit-column-count: 1;
|
|
-moz-column-count: 1;
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width:479px) {
|
|
|
|
nav .dropdown-toggle {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navbar-nav .open .dropdown-menu > li > a {
|
|
padding: 12px 15px 12px 25px;
|
|
}
|
|
|
|
.navbar-fixed-bottom li {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
@media (max-width: 419px) {
|
|
/* the selectors are build to target only the content of folder and device
|
|
panels as it would "destroy" e.g. out of sync or recent changes listings */
|
|
div[id^='device-'].panel-collapse table,
|
|
div[id^='folder-'].panel-collapse table,
|
|
div[id^='device-'].panel-collapse tbody,
|
|
div[id^='folder-'].panel-collapse tbody,
|
|
div[id^='device-'].panel-collapse tr,
|
|
div[id^='folder-'].panel-collapse tr {
|
|
display: block;
|
|
}
|
|
div[id^='device-'].panel-collapse th,
|
|
div[id^='folder-'].panel-collapse th,
|
|
div[id^='device-'].panel-collapse td,
|
|
div[id^='folder-'].panel-collapse td {
|
|
display: block;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* All buttons, except panel headings, get bottom margin, as they
|
|
won't fit beside each other anymore. Reduce footer padding to
|
|
compensate for the margin. */
|
|
.btn:not(.panel-heading),
|
|
.btn:not(.panel-heading) + .btn:not(.panel-heading) {
|
|
margin-bottom: 10px;
|
|
}
|
|
.panel-footer {
|
|
padding-bottom: 0;
|
|
}
|
|
.modal-footer {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
table.table-auto td,
|
|
table.table-auto th,
|
|
table.table-condensed td,
|
|
table.table-condensed th {
|
|
/* for mobile phones to allow linebreaks in long repro folder/shared with
|
|
* columns. */
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Move share buttons below device ID on small screens. */
|
|
#shareDeviceIdButtons {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.form-horizontal .form-group {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-horizontal {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Use the same style as Bootstrap uses for disabled <select>. */
|
|
.form-control option[disabled] {
|
|
background-color: #eeeeee;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Make a "well" look more like a readonly text input when grouped with a button */
|
|
.input-group .well-sm {
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* CJK languages don't use italic at all, hence don't force it on them. */
|
|
html[lang|="zh"] i,
|
|
html[lang="ja"] i,
|
|
html[lang|="ko"] i {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Prevent buttons from jumping up and down
|
|
when a tooltip is shown for one of them. */
|
|
.btn-group-vertical > .tooltip + .btn,
|
|
.btn-group-vertical > .tooltip + .btn-group {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.select-on-click {
|
|
-webkit-user-select: all;
|
|
user-select: all;
|
|
}
|