mirror of
https://github.com/viq/NewsBlur.git
synced 2025-08-20 05:14:26 +00:00
93f6971731
* master: (31 commits) Fixing login screen for Reeder. Fixing login screen for Reeder. Explicit viewport. Explicit viewport. Explicit viewport. Explicit viewport. Adding viewport to login/signup screen. Set source_used_id correctly when sharing from a blurblog (#551) Adding debug option to all text importers. Adding user_id to every response. Adding WAI-AREA support for <article> to support LiveJournal. Fixing last few font size changes for new feed title font styler. Boosting readability's ability to read Medium posts. Adding feed font size. Configures both story titles and feed titles. This one's for you @theromit. Probably not a bug. Probably Adblock. Adding autosize to share textbox. Hiding mark as read button when searching. Fixing images in tutorial. Removing unnecessary inset box shadow on header elements. Further correcting OAuth spacing on mobile. ...
518 lines
No EOL
12 KiB
CSS
518 lines
No EOL
12 KiB
CSS
|
|
/* ================ */
|
|
/* = Modal Dialog = */
|
|
/* ================ */
|
|
|
|
#simplemodal-overlay {
|
|
background-color: #101030;
|
|
}
|
|
|
|
#simplemodal-container {
|
|
background-color: white;
|
|
padding: 8px;
|
|
-moz-box-shadow: 8px 8px 15px #505050;
|
|
-webkit-box-shadow: 8px 8px 15px #505050;
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(255, 255, 255, 0.4) 0px 0px 300px 0px;
|
|
border: 1px solid rgba(5, 5, 5,.6);
|
|
min-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* =================== */
|
|
/* = Common Elements = */
|
|
/* =================== */
|
|
|
|
.NB-input {
|
|
font-size: 14px;
|
|
padding: 2px;
|
|
margin: 2px 4px 2px;
|
|
border: 1px solid rgba(0, 0, 0, .2);
|
|
border-radius: 1px;
|
|
-moz-box-shadow: inset 0 2px 2px rgba(50, 50, 50, 0.15);
|
|
box-shadow: inset 0 2px 2px rgba(50, 50, 50, 0.15);
|
|
}
|
|
|
|
/* ========== */
|
|
/* = Modals = */
|
|
/* ========== */
|
|
|
|
.NB-modal {
|
|
padding: 12px;
|
|
position: relative;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#simplemodal-container.NB-full-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.NB-modal.NB-signed-out .NB-fieldset {
|
|
opacity: .3;
|
|
}
|
|
|
|
.NB-modal.NB-signed-out .NB-fieldset.NB-anonymous-ok {
|
|
opacity: 1;
|
|
}
|
|
fieldset {
|
|
border: 0;
|
|
border-top: 1px solid #E6E6E6;
|
|
padding: 0 12px;
|
|
margin: 12px 0 0;
|
|
}
|
|
fieldset legend {
|
|
padding: 4px 16px;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #151775;
|
|
border: 1px solid #E6E6E6;
|
|
background-color: #F7F7F5;
|
|
}
|
|
|
|
|
|
.NB-modal .NB-modal-error {
|
|
float: right;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #7F080A;
|
|
line-height: 14px;
|
|
display: none;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.NB-modal .NB-modal-loading,
|
|
.NB-modal .NB-loading {
|
|
width: 16px;
|
|
height: 16px;
|
|
float: right;
|
|
background: none;
|
|
}
|
|
|
|
.NB-modal-tabs .NB-modal-loading,
|
|
.NB-modal-tabs .NB-loading {
|
|
float: left;
|
|
margin: 4px 8px 0 0;
|
|
}
|
|
|
|
.NB-modal .NB-modal-loading.NB-active {
|
|
background: transparent url('/media/img/reader/recycle_spinner.gif') no-repeat 0 0;
|
|
}
|
|
|
|
.NB-loading.NB-active {
|
|
background: transparent url('/media/img/reader/spinner_ball.gif') no-repeat 0 0;
|
|
}
|
|
|
|
.NB-modal h2,
|
|
.NB-modal .NB-modal-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.NB-modal-title .NB-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
float: left;
|
|
margin: 0 12px 0 0;
|
|
}
|
|
.NB-modal .NB-icon-dropdown {
|
|
display: inline-block;
|
|
padding: 0 6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: transparent url('/media/img/icons/circular/g_icn_arrow_down.png') no-repeat center center;
|
|
background-size: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.NB-modal h5,
|
|
.NB-module h5,
|
|
.NB-module-header {
|
|
margin: 0;
|
|
padding: 6px 12px 6px;
|
|
|
|
background-color: #F5F6F2;
|
|
background-image: -moz-linear-gradient(top, #F5F6F2, #E5E6E0); /* FF3.6 */
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F6F2), to(#E5E6E0)); /* Saf4+, Chrome */
|
|
background-image: linear-gradient(top, #F5F6F2, #E5E6E0);
|
|
border: 1px solid rgba(0, 0, 0, .1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
|
border-radius: 2px;
|
|
/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05),
|
|
inset 0 -1px 1px rgba(0, 0, 0, .05);
|
|
*/
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
|
color: #353634;
|
|
font-size: 12px;
|
|
font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif, inherit;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
.NB-modal h5 {
|
|
border: none;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.NB-modal .NB-modal-field {
|
|
margin: 0;
|
|
position: relative;
|
|
clear: both;
|
|
}
|
|
|
|
.NB-modal .NB-modal-field h5 {
|
|
}
|
|
|
|
.NB-modal .NB-modal-field input[type=text] {
|
|
width: 446px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
padding: 2px;
|
|
margin: 0px 4px 6px;
|
|
border: 1px solid #606060;
|
|
-moz-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15);
|
|
-webkit-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15);
|
|
box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15);
|
|
}
|
|
|
|
.NB-modal .NB-modal-field input[type=checkbox] {
|
|
margin: 4px 0 0 0px;
|
|
float: left;
|
|
}
|
|
|
|
.NB-modal .NB-error {
|
|
display: none;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #7E0418;
|
|
padding: 0 0 12px 0;
|
|
}
|
|
.NB-modal .NB-modal-title {
|
|
font-weight: bold;
|
|
color: #303030;
|
|
text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.NB-modal .NB-modal-subtitle {
|
|
margin:12px 0 0;
|
|
padding:8px 12px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
background-color: #F8F8F6;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
.NB-modal .NB-modal-feed-title {
|
|
margin: 0;
|
|
float: left;
|
|
}
|
|
.NB-modal .NB-modal-feed-subscribers {
|
|
font-size: 12px;
|
|
background-color: #909090;
|
|
color: #F0F0F0;
|
|
margin: 2px 4px 2px 14px;
|
|
font-size: 9px;
|
|
line-height: 15px;
|
|
font-weight: bold;
|
|
padding: 0 4px;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
text-shadow: none;
|
|
float: left;
|
|
}
|
|
.NB-modal .NB-modal-feed-heading {
|
|
display: block;
|
|
margin: 0 40px 0 23px;
|
|
text-decoration: none;
|
|
color: #272727;
|
|
overflow: hidden;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.NB-modal .NB-modal-feed-image {
|
|
float: left;
|
|
}
|
|
|
|
.NB-modal .NB-modal-subtitle-right {
|
|
float: right;
|
|
clear: both;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: #d0d0d0;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.NB-modal .NB-modal-subtitle-right-count {
|
|
color: #A8A8A8;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.NB-modal-submit-bottom {
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
padding: 12px 24px;
|
|
background-color: #F7F8F5;
|
|
border-top: 1px solid #DFE2DA;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.NB-modal-submit-button {
|
|
font-size: 12px;
|
|
padding: 4px 12px;
|
|
margin: 2px 4px 2px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
|
text-transform: uppercase;
|
|
border: 1px solid #606060;
|
|
border-color: #E5E5E5 #CDCDCD #CDCDCD #E5E5E5;
|
|
background: #DCDCDC;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#D2D2D2));
|
|
background: linear-gradient(to top, #DCDCDC, #D2D2D2);
|
|
}
|
|
|
|
.NB-modal-submit-green {
|
|
border-color: rgba(255, 255, 255, .3) rgba(0, 0, 0, .2) rgba(0, 0, 0, .3) rgba(255, 255, 255, .2);
|
|
background-color: #217412;
|
|
background-image: -webkit-linear-gradient(bottom, #216200, #217412);
|
|
background-image: linear-gradient(to top, #216200, #217412);
|
|
font-weight: bold;
|
|
color: #FCFCFC;
|
|
}
|
|
.NB-modal-submit-green:hover {
|
|
background-color: #216200;
|
|
background-image: -webkit-linear-gradient(bottom, #1E5000, #216200);
|
|
background-image: linear-gradient(to top, #1E5000, #216200);
|
|
}
|
|
.NB-modal-submit-green:active {
|
|
background-color: #1E5000;
|
|
background-image: -webkit-linear-gradient(bottom, #1B3F00, #1E5000);
|
|
background-image: linear-gradient(to top, #1B3F00, #1E5000);
|
|
}
|
|
|
|
.NB-modal-submit-back,
|
|
.NB-modal-submit-reset,
|
|
.NB-modal-submit-close,
|
|
.NB-modal-submit-grey {
|
|
text-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
|
|
border-color: rgba(255, 255, 255, .3) rgba(0, 0, 0, .2) rgba(0, 0, 0, .3) rgba(255, 255, 255, .2);
|
|
background-color: #d5d4dB;
|
|
background-image: -webkit-linear-gradient(bottom, #CBCAD3, #d5d4dB);
|
|
background-image: linear-gradient(to top, #CBCAD3, #d5d4dB);
|
|
color: #505050;
|
|
}
|
|
.NB-modal-submit-back:hover,
|
|
.NB-modal-submit-reset:hover,
|
|
.NB-modal-submit-close:hover,
|
|
.NB-modal-submit-grey:hover {
|
|
background-color: #CBCAD3;
|
|
background-image: -webkit-linear-gradient(bottom, #BDBCC7, #CBCAD3);
|
|
background-image: linear-gradient(to top, #BDBCC7, #CBCAD3);
|
|
}
|
|
.NB-modal-submit-back:active,
|
|
.NB-modal-submit-reset:active,
|
|
.NB-modal-submit-close:active,
|
|
.NB-modal-submit-grey:active {
|
|
background-color: #BDBCC7;
|
|
background-image: -webkit-linear-gradient(bottom, #ADACBB, #BDBCC7);
|
|
background-image: linear-gradient(to top, #ADACBB, #BDBCC7);
|
|
}
|
|
.NB-modal-submit-save.NB-disabled,
|
|
.NB-modal-submit-green.NB-disabled,
|
|
.NB-modal-submit-button.NB-disabled,
|
|
.NB-modal-submit-save.NB-disabled:hover,
|
|
.NB-modal-submit-green.NB-disabled:hover,
|
|
.NB-modal-submit-button.NB-disabled:hover,
|
|
.NB-modal-submit-save.NB-disabled:active,
|
|
.NB-modal-submit-green.NB-disabled:active,
|
|
.NB-modal-submit-button.NB-disabled:active {
|
|
background-image: none;
|
|
background-color: #d5d4dB;
|
|
color: rgba(0, 0, 0, .2);
|
|
text-shadow: none;
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
cursor: default;
|
|
}
|
|
|
|
.NB-modal-submit-close {
|
|
background-color: #525255;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0.16, #192716),
|
|
color-stop(0.84, #2E432B)
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
#192716 16%,
|
|
#2E432B 84%
|
|
);
|
|
color: white;
|
|
}
|
|
.NB-modal-submit-close:hover {
|
|
background-color: #CBCAD3;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0.16, #131D10),
|
|
color-stop(0.84, #192716)
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
#131D10 16%,
|
|
#192716 84%
|
|
);
|
|
}
|
|
.NB-modal-submit-close:active {
|
|
background-color: #BDBCC7;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0.16, #0A0D09),
|
|
color-stop(0.84, #131D10)
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
#0A0D09 16%,
|
|
#131D10 84%
|
|
);
|
|
}
|
|
.NB-modal-submit-close,
|
|
.NB-modal-submit-grey {
|
|
font-weight: bold;
|
|
}
|
|
.NB-modal-submit-red {
|
|
background-color: #911C31;
|
|
background-image: -webkit-linear-gradient(bottom, #7D0D25, #911C31);
|
|
background-image: linear-gradient(to top, #7D0D25, #911C31);
|
|
color: #E4E4E4;
|
|
font-weight: bold;
|
|
}
|
|
.NB-modal-submit-red:hover {
|
|
background-color: #7D0D25;
|
|
background-image: -webkit-linear-gradient(bottom, #68001B, #7D0D25);
|
|
background-image: linear-gradient(to top, #68001B, #68001B);
|
|
}
|
|
.NB-modal-submit-red:active {
|
|
background-color: #68001B;
|
|
background-image: -webkit-linear-gradient(bottom, #540015, #68001B);
|
|
background-image: linear-gradient(to top, #540015, #68001B);
|
|
}
|
|
|
|
.NB-modal .NB-modal-submit {
|
|
font-size: 13px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.NB-modal img.feed_favicon {
|
|
margin: 0 6px 0 0;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.NB-modal .NB-fieldset {
|
|
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
|
margin: 16px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
.NB-modal .NB-fieldset:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.NB-modal .NB-fieldset-fields {
|
|
background-color: #F7F7F5;
|
|
padding: 12px 16px 6px;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
border-left: 1px solid rgba(0, 0, 0, .1);
|
|
border-right: 1px solid rgba(0, 0, 0, .1);
|
|
|
|
}
|
|
|
|
.NB-modal .NB-modal-feed-chooser-container {
|
|
float: right;
|
|
margin: 3px 0 12px;
|
|
}
|
|
.NB-modal .NB-modal-feed-chooser-container .NB-modal-feed-chooser {
|
|
width: 250px;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.NB-modal .NB-modal-tabs {
|
|
float: right;
|
|
position: relative;
|
|
bottom: -1px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.NB-modal .NB-modal-tab {
|
|
float: left;
|
|
padding: 8px 18px 10px;
|
|
font-size: 12px;
|
|
background-color: #F0F1EC;
|
|
border-top: 1px solid #A0A0A0;
|
|
border-left: 1px solid #A0A0A0;
|
|
border-bottom: 1px solid #A0A0A0;
|
|
cursor: pointer;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
|
|
margin-top: -4px;
|
|
-webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
|
|
-moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
|
|
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.NB-modal .NB-modal-tab:hover {
|
|
background-color: #E4E5DF;
|
|
}
|
|
.NB-modal .NB-modal-tab:first-child {
|
|
border-top-left-radius: 2px;
|
|
}
|
|
.NB-modal .NB-modal-tab:last-child {
|
|
border-right: 1px solid #A0A0A0;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.NB-modal .NB-modal-tab.NB-active {
|
|
background-color: white;
|
|
border-bottom: 1px solid white;
|
|
cursor: default;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.NB-modal .NB-tab {
|
|
display: none;
|
|
margin-top: 0;
|
|
clear: both;
|
|
border-top: 1px solid #A0A0A0;
|
|
overflow: auto;
|
|
height: 400px;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.NB-modal .NB-tab.NB-active {
|
|
display: block;
|
|
}
|
|
|
|
.NB-modal .NB-modal-section {
|
|
padding: 12px 0;
|
|
} |