remotestorage-widget/src/assets/styles.css

remoteStorage.js connect widget

#remotestorage-widget {
  z-index: 21000000;
}

.rs-widget {
  box-sizing: border-box;
  overflow: hidden;
  max-width: 350px;
  padding: 10px;
  margin: 10px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);
  font-family: arial, sans-serif;
  font-size: 16px;
  color: #333;
  will-change: max-height, height, width, opacity, max-width, background, box-shadow;
  transition-property: width, height, opacity, max-width, max-height, background, box-shadow;
  transition-duration: 300ms;
}

.rs-widget * {
  box-sizing: border-box;
}

.rs-widget .rs-hidden {
  display: none;
}

.rs-box {
  overflow: hidden;
  will-change: height;
  transition-property: height, width, max-height;
  transition-duration: 300ms;
  transition-timing-function: ease-in;
  opacity: 0;
  max-height: 0px;
}

.rs-box.rs-selected:not([aria-hidden=true]) {
  opacity: 1;
  max-height: 420px;
}

/* Main logo */
.rs-main-logo {
  float: left;
  height: 36px;
  width: 36px;
  margin-top: 1px;
  margin-right: 0.625em;
  transition: margin-left 300ms ease-out, transform 300ms ease-out;
  cursor: pointer;
}
.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage {
  display: block;
}
.rs-widget[class*="rs-backend-"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {
  display: none;
}
.rs-widget.rs-backend-dropbox svg#rs-main-logo-dropbox {
  display: block;
}
.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {
  display: none;
}
.rs-widget.rs-backend-googledrive svg#rs-main-logo-googledrive {
  display: block;
}
.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {
  display: none;
}

polygon.rs-logo-shape {
  fill: #FF4B03;
}

polygon.rs-logo-shape,
#rs-main-logo-dropbox path,
#rs-main-logo-googledrive path {
  transition-property: fill;
  transition-duration: 0.5s;
}

.rs-offline polygon.rs-logo-shape,
.rs-offline #rs-main-logo-dropbox path,
.rs-offline #rs-main-logo-googledrive path {
  fill: #888;
  transition-property: fill;
  transition-duration: 0.5s;
}

/* Hide everything except logo when connected and clicked outside of box */
.rs-closed {
  max-width: 56px;
  background-color: transparent;
  box-shadow: none;
  opacity: 0.5;

  transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms;
}

.rs-closed:hover {
  cursor: pointer;
  opacity: 1;
}

.rs-box-initial {
  transition-duration: 0ms;
}

.rs-box-initial:hover {
  cursor: pointer;
}

.rs-widget a {
  color: #0093cc;
}

/* HEADLINE */
.rs-small-headline {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  margin-bottom: 2px;
  height: 1.2em;
  word-break: break-all;
  overflow: hidden;
  line-height: 1em;
}

.rs-sub-headline {
  word-break: break-all;
  overflow: hidden;
  color: #666;
  font-size: 0.92em;
  height: 1.2em;
}
.rs-big-headline {
  font-size: 1.625em;
  font-weight: normal;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* BUTTONS  */
.rs-button {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  cursor: pointer;
}
.rs-button-small {
  padding: 0.6em 0.7em;
  margin-left: 0.2em;
  transition: border-color 300ms ease-out;
}
.rs-button-small svg {
  vertical-align: top;
}
.rs-button-wrap {
  margin-top: 10px;
}

.rs-button-wrap img,
.rs-button-wrap svg {
  float: left;
  margin-right: 0.6em;
  width: 40px;
  height: 40px;
}

.rs-button-big {
  padding: 15px 10px;
  margin-bottom: 10px;
  display: block;
  width: 100%;
  text-align: left;
  transition: box-shadow 200ms;
}
.rs-button-big > div {
  font-size: 1.125em;
  padding: 10px 0;
}
.rs-button-big:hover {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);
}
.rs-button-big:active {
  background-color: #eee;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);
}
.rs-button-big:last-child {
  margin-bottom: 0;
}

.rs-content {
  padding: 0 10px 10px 10px;
}


.rs-state-choose .rs-main-logo,
.rs-state-sign-in .rs-main-logo {
  margin-left: 45%;
  float: none;
}

.rs-sign-in-form input[type=text] {
  padding: 15px 10px;
  display: block;
  width: 100%;
  font: inherit;
  height: 52px;
  border: 1px solid #aaa;
  border-radius: 0;
  box-shadow: none;
}
.rs-sign-in-form button.rs-connect {
  padding: 15px 10px;
  margin-top: 20px;
  margin-bottom: 15px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 3px;
  background-color: #3fb34f;
  font: inherit;
  color: #fff;
  transition: box-shadow 200ms, background-color 200ms;
}

.rs-sign-in-form button.rs-connect:hover {
  cursor: pointer;
  background-color: #4BCB5D;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);
}

.rs-sign-in-form button.rs-connect:active {
  background-color: #3fb34f;
}

.rs-sign-in-form button.rs-connect:disabled,
.rs-sign-in-form button.rs-connect:disabled:hover {
  background-color: #aaa;
}

.rs-sign-in-form button.rs-connecting svg {
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-left: 0.5em;
  animation: rs-spin 1s linear infinite;
}

.rs-sign-in-error.rs-hidden,
.rs-box-error.rs-hidden {
  height: 0;
}

.rs-sign-in-error.rs-visible,
.rs-box-error.rs-visible {
  height: auto;
  border-radius: 3px;
  padding: 0.5em 0.5em;
  margin-top: 0.5em;
  text-align: center;
  background-color: rgba(255,0,0,0.1);
  color: darkred;
}

.rs-box-error {
  display: flex;
  flex-direction: row;
}

.rs-box-error .rs-error-message {
  flex: auto;
}

 /*Choose provider box */
.rs-box-choose {
  text-align: center;
  overflow: hidden;
}

.rs-box-choose p {
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.4em;
}

/*Connected box */
.rs-box-connected {
  display: flex;
  flex-direction: row;
  height: 40px;
  transition: height 0s;
}
.rs-connected-text {
  flex: auto;
  min-width: 0;
}
.rs-box-connected .rs-user {
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: keep-all;
}
.rs-connected-buttons, .rs-error-buttons {
  flex: none;
}
.rs-disconnect:hover {
  border-color: #FF2D2D;
}
.rs-disconnect:hover .rs-icon{
  fill: #FF2D2D;
}
.rs-sync:hover {
  border-color: #FFBB0C;
}
.rs-sync:hover .rs-icon {
  fill: #FFBB0C;
}
.rs-sync.rs-rotate {
  border-color: #FFBB0C;
}
.rs-sync.rs-rotate .rs-icon {
  fill: #FFBB0C;
  animation: rs-spin 1s linear infinite;
}

/* Floating widget styles (top right corner) */
.rs-floating {
  position: fixed;
  top: 0;
  right: 0;
}

@keyframes rs-spin {
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Small/mobile screens */
@media screen and (max-width: 420px) {
  .rs-widget {
    font-size: 100%;
    transition: all 300ms ease-out;
    max-width: 400px;
  }
  .rs-floating {
    position: relative;
    top: auto;
    right: auto
  }
  .rs-closed {
    max-width: 56px;
  }
  .rs-state-choose,
  .rs-state-sign-in {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
  }
}

/* remove dotted outline border on Firefox */
.rs-widget a:focus,
.rs-widget a:active,
.rs-widget button:focus,
.rs-widget input:focus {
  outline:none;
}
.rs-widget button::-moz-focus-inner,
.rs-widget input[type="button"]::-moz-focus-inner {
  border:0;
}

/* prevent rounded buttons on mobile Safari */
.rs-widget button,
.rs-widget input[type="button"] {
  -webkit-appearance: none;
}

.remotestorage-widget-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s linear;
}

.remotestorage-widget-modal-backdrop.visible {
  opacity: 1;
  transition: opacity 0.3s linear;
}