This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
Omphaloskepsis/plugins/jetpack/scss/pages/_protect.scss

261 lines
3.6 KiB
SCSS
Raw Normal View History

2018-03-21 18:19:20 +00:00
/* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
// ==========================================================================
// Jetpack Protect Config Page
//==========================================================================
.configure-module p {
font-size: 14px;
&.success, &.error {
color: $white;
padding: 10px;
}
&.success {
background-color: $green;
}
&.error {
background-color: $red;
}
}
.protect-status {
p {
font-size: 16px;
}
strong {
display: inline-block;
margin-top: 10px;
background: #fff;
padding: 10px;
border: 1px #ddd solid;
font-size: 16px;
color: #000;
max-width: 100%;
}
&.attn {
color: $red;
}
&.working {
color: $green;
}
} // .protect-status
/* Whitelisting */
#non-editable-whitelist {
margin-top: 15px;
}
.protect-whitelist {
textarea {
width: 100%;
min-height: 150px;
}
}
#editable-whitelist .whitelist-table {
width: 100%;
}
/* btns + inputs */
.configure-module {
input[disabled] {
opacity: .5;
}
input.button-primary {
font-weight: bold;
}
}
/* whitelist table */
.whitelist-table {
border-top: 1px solid;
border-right: 1px solid;
border-color: #ddd;
background-color: #fff;
td, th {
padding: 10px;
margin: 0;
border-bottom: 1px solid;
border-left: 1px solid;
border-color: #ddd;
font-size: 14px;
}
th.heading {
font-weight: bold;
color: #5d6d74;
text-align: left;
background-color: #eee;
}
td.item-actions {
border-left: none;
text-align: right;
}
.toolbar {
padding: 0;
}
.add-btn {
text-align: center;
width: 10%;
border-left: 1px #ddd solid;
}
} // whitelist-table
.ip-address, .enter-ip {
width: 90%;
text-align: left;
vertical-align: middle;
}
.delete-ip-address {
text-align: center;
border: 0;
background: transparent;
color: #6f7476;
box-shadow: none;
font-size: 20px;
margin: 0;
padding: 0;
cursor: pointer;
border-radius: 2px;
&:hover {
background: #eee;
}
}
.toolbar div {
float: left;
padding: 10px;
}
@media only screen and (min-width : 1100px) {
#non-editable-whitelist {
width: 28%;
float: right;
margin-top: 0;
}
.protect-whitelist {
width: 65%;
float: left;
}
} /* end > 1065px */
@media only screen and (max-width : 1130px) {
.enter-ip input[type="text"] {
max-width: 175px;
}
} /* end < 1130px */
@media only screen and (max-width : 1250px) and (min-width : 1065px), (max-width : 730px) and (min-width : 600px) {
.enter-ip {
width: 85%;
}
.add-btn {
width: 15%;
}
} /* end < 1250px & > 1065px */
@media only screen and (max-width : 782px) {
.add-btn {
text-align: right;
}
.add-btn .ip-add {
margin-top: 4px;
margin-bottom: 3px;
}
} /* end < 782px */
@media only screen and (max-width : 730px) {
.add-btn {
text-align: center;
}
} /* end < 730px */
@media only screen and (max-width : 665px) and (min-width : 600px) {
.enter-ip input[type="text"] {
max-width: 165px;
}
} /* end < 665px & > 600px */
@media only screen and (max-width : 600px) {
.toolbar div {
width: 100%;
}
.add-btn {
border-top: 1px #ddd solid;
}
.enter-ip {
text-align: center;
}
.enter-ip strong {
display: block;
margin-bottom: 5px;
}
.enter-ip input[type="text"] {
width: 100%;
max-width: 100%;
}
.add-btn input,
.enter-ip .button {
width: 50%;
margin: 0 auto;
}
.enter-ip .button {
margin-top: 10px;
}
} /* end > 600px */
@media only screen and (max-width : 400px) {
.protect-status strong {
font-size: 12px;
overflow: auto;
}
.add-btn input,
.enter-ip .button {
width: 100%;
}
} /* end < 400px */