custom_portal.css

/*
===============================================================================
 This file contain extra CSS rules to customize the YunoHost user portal and
 can be used to customize app tiles, buttons, etc...
===============================================================================
*/

/* Make page texts black */
.user-container h2,
.user-container small,
.user-container .user-mail,
.user-container .user-mail,
.footer a,
#ynh-logout {
  color: black !important;
  text-shadow: 0px, 0px, 5px, black !important;
}

.ynh-user-portal {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  width: 100%;
  height: 100%;
}

#ynh-logout:hover {
  background-color: rgba(118, 0, 137, 0.5) !important;
  color: white !important;
}

/* Apps colors */
.app-tile {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: black !important;
}
.app-tile:hover {
  background-color: rgba(100, 100, 255, 0.8) !important;
  color: white !important;
}

.app-tile:hover:after,
.app-tile:focus:after,
.app-tile:hover:before,
.app-tile:focus:before {
    background: rgba(100, 100, 255, 0.8) !important;
}

.form-text {background: rgba(121, 123, 131, 0.5);}

.btn, .classic-btn, .large-btn {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: black !important;
}
.classic-btn:hover, .large-btn:hover {
  background-color: rgba(0, 68, 255, 0.5) !important;
  color: white !important;
  text-decoration: none;
}
.validate-btn:hover {
  background-color: rgba(0, 129, 31, 0.5) !important;
  color: white !important;
}
.link-btn:hover {
  background-color: rgba(255, 239, 0, 0.5) !important;
}

.messages.info {
  background: rgba(100, 100, 255, 0.8) !important;
}
.messages.danger {
  background: rgba(255, 100, 100, 0.8) !important;
}

.control-label {
  background: rgba(0, 0, 0, 0.5);
}
.form-text::placeholder {
  color: #fff;
}

/* Use a custom logo image */
#ynh-logo {
  z-index: 10;
  background-image: url("./cloud.png");
}