* Propose upgrade proton account for proton partner users without paid mail plan * Reformat js * Initial display via jinja * tweak ui: add a ---OR--- separator * use collapse to show SL upgrade option Co-authored-by: Adrià Casajús <adria.casajus@proton.ch> Co-authored-by: Son <nguyenkims@users.noreply.github.com>
216 lines
3.5 KiB
CSS
Vendored
216 lines
3.5 KiB
CSS
Vendored
.profile-picture {
|
|
/* make a square container */
|
|
width: 150px;
|
|
height: 150px;
|
|
|
|
/* round the edges to a circle with border radius 1/2 container size */
|
|
border-radius: 50%;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.client-icon {
|
|
/* make a square container */
|
|
width: 150px;
|
|
height: 150px;
|
|
|
|
/* round the edges to a circle with border radius 1/2 container size */
|
|
border-radius: 10%;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.small-client-icon {
|
|
/* make a square container */
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
/* round the edges to a circle with border radius 1/2 container size */
|
|
border-radius: 10%;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.small-profile-picture {
|
|
/* make a square container */
|
|
width: 60px;
|
|
height: 60px;
|
|
|
|
/* round the edges to a circle with border radius 1/2 container size */
|
|
border-radius: 50%;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* highlighted table row */
|
|
.highlight-row {
|
|
border: solid #5675E2;
|
|
}
|
|
|
|
.arrow {
|
|
width: 20px;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
background-color: #FFFF00;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.copy-btn {
|
|
font-size: 0.6rem;
|
|
line-height: 0.75;
|
|
}
|
|
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*Left border for alert zone*/
|
|
.alert-primary {
|
|
border-left: 5px #467fcf solid;
|
|
}
|
|
|
|
.alert-info {
|
|
border-left: 5px cadetblue solid;
|
|
}
|
|
|
|
.alert-danger {
|
|
border-left: 5px #6b1110 solid;
|
|
}
|
|
|
|
.alert-danger::before {
|
|
content: "⚠️";
|
|
}
|
|
|
|
.dns-record {
|
|
border: 1px dotted #E3156A;
|
|
}
|
|
|
|
/**
|
|
* Form Validation Errors
|
|
*/
|
|
.error {
|
|
border-color: red;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
font-style: italic;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.footer-item {
|
|
padding-left: 0 !important;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-list-group {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.subheader{
|
|
font-size: .625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
line-height: 1.6;
|
|
color: #656d77;
|
|
}
|
|
|
|
|
|
.disabled-content {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Parsley CSS */
|
|
input.parsley-success,
|
|
select.parsley-success,
|
|
textarea.parsley-success {
|
|
color: #468847;
|
|
background-color: #DFF0D8;
|
|
border: 1px solid #D6E9C6;
|
|
}
|
|
|
|
input.parsley-error,
|
|
select.parsley-error,
|
|
textarea.parsley-error {
|
|
color: #B94A48;
|
|
background-color: #F2DEDE;
|
|
border: 1px solid #EED3D7;
|
|
}
|
|
|
|
.parsley-errors-list {
|
|
margin: 2px 0 3px;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
font-size: 0.9em;
|
|
line-height: 0.9em;
|
|
opacity: 0;
|
|
color: #B94A48;
|
|
|
|
transition: all .3s ease-in;
|
|
-o-transition: all .3s ease-in;
|
|
-moz-transition: all .3s ease-in;
|
|
-webkit-transition: all .3s ease-in;
|
|
}
|
|
|
|
.parsley-errors-list.filled {
|
|
opacity: 1;
|
|
}
|
|
/* END Parsley CSS */
|
|
|
|
.domain_detail_content {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Only show the help button on desktop */
|
|
@media only screen and (max-width: 500px) {
|
|
#help-btn {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 500px) {
|
|
#help-btn {
|
|
display: flex;
|
|
}
|
|
|
|
#help-menu-item {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.proton-button {
|
|
border-color:#6d4aff;
|
|
background-color:white;
|
|
color:#6d4aff;
|
|
}
|
|
.proton-button:hover {
|
|
background-color: #1b1340;
|
|
}
|
|
|
|
/* CSS technique for a horizontal line with words in the middle */
|
|
.middle-line {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.middle-line:before, .middle-line:after{
|
|
content: "";
|
|
flex: 1 1;
|
|
border-bottom: 1px solid;
|
|
margin: auto;
|
|
}
|
|
.middle-line:before {
|
|
margin-right: 10px
|
|
}
|
|
.middle-line:after {
|
|
margin-left: 10px
|
|
} |