app/styles/pages/_export.scss
.export-container {
max-width: 990px;
.import-option {
width: 100%;
background: $white;
}
header {
max-width: 500px;
margin: 0 auto;
}
.table {
margin-bottom: 0;
}
.table tbody + tbody {
border-top: none;
}
.card-block {
padding: 0;
}
.table thead th {
vertical-align: bottom;
background: #264180;
border-top: none;
border-bottom: none;
color: #fff;
font-size: 12px;
text-align: center;
}
.table td {
font-size: 12px;
border-left: 1px solid;
border-color: $divider-color;
vertical-align: middle;
text-align: center;
padding: 5px 10px;
}
.table td.success-state {
background: #d5f7e8;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid #c0ecd7;
svg {
fill: #147F4A;
width: 20px;
height: 20px;
}
}
.table td.pending-state {
background: #eee;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid $divider-color;
svg {
width: 20px;
height: 20px;
}
}
.table td.error-state {
background: #ffa3a3;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid #c0ecd7;
svg {
fill: #993131;
width: 20px;
height: 20px;
margin-top: 5px;
}
}
.table tr {
&:nth-child(odd) {
background: #fafafa;
@if $theme == 'kitsu-dark' {
background: $secondary-background-color;
}
&:hover {
background: #fafafa;
@if $theme == 'kitsu-dark' {
background: $secondary-background-color;
}
}
}
&:hover {
background: inherit;
}
}
.table tr.date-value {
width: 100%;
text-indent: 7px;
background: #1b2f5d;
color: $white;
border-top: 1px solid #112144;
&:hover {
background: #1b2f5d;
}
td {
padding: 5px;
border-top: none;
border-left: none;
text-align: left;
}
}
.card-header {
background: #33529C;
color: #fff;
border-bottom: 1px solid #1a3475;
a {
color: #fff;
}
}
.table td.canon-title {
font-weight: 700;
text-align: left;
line-height: 30px;
border-left: none;
a {
color: $body-text-color;
&:hover {
color: $body-link-color;
}
}
}
.table th.canon-header {
text-align: left;
}
.canon-poster {
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
float: left;
border-radius: 3px;
margin-right: 10px;
}
}
.error-info, .success-info {
font-size: 12px;
}
.mal-connected {
background: #33529c;
width: 100%;
border-radius: 5px;
padding: 10px;
position: relative;
img {
border-radius: 5px;
width: 40px;
margin-right: 15px;
float: left;
}
.connected-user {
font-size: 20px;
color: $white;
line-height: 40px;
&:hover {
color: $white;
text-decoration: underline;
}
}
}
.export-remove {
position: absolute;
right: 15px;
top: 17px;
svg {
width: 20px;
fill: rgba(255,255,255,.4);
&:hover {
fill: rgba(255,255,255,1);
}
}
}
.export-c {
padding: 0;
}
.avatar-placeholder {
float: left;
svg {
width: 50px;
height: 34px;
margin-right: 10px;
fill: $white;
position: relative;
top: 3px;
}
}
#export-modal {
.modal-content {
background: #5077d4;
color: #fff;
.form-group {
input {
&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
}
}
.auth-section-title {
text-align: center;
border-bottom: 1px solid rgba(255,255,255,.2);
padding-bottom: 15px;
font-size: 24px;
}
button {
border-radius: 3px;
font-size: 13px;
background: $white;
color: #5077d4;
&:hover {
background: darken($white,5);
}
&:disabled {
border: 1px solid #4668bb;
background: #4668bb;
color: #32487d;
}
}
}
}