src/scss/main.scss
/*!
* Rbutr Browser Extension v0.12.0
* https://github.com/rbutrcom/rbutr-browser-extension
*
* Copyright 2012-2017 The Rbutr Community
* Licensed under LGPL-3.0
*/
/* General. */
body {
font-family: sans-serif;
overflow-x: hidden;
position: relative;
width: 500px;
}
h1 {
color: #333;
font-size: 40px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.3em;
margin: 0;
padding: 0;
}
h2 {
color: #777;
float: left;
font-size: 22px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.3em;
margin-bottom: 10px;
margin-top: 0;
padding: 10px;
&.status {
color: #c33;
float: left;
font-size: 26px;
}
}
.clickable:hover {
cursor: pointer;
}
.hidden {
display: none;
}
.rebuttals {
float: left;
font-size: 14px;
}
p.rebuttals {
font-size: 12px;
}
a {
color: #599bc5;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&.link-title {
font-size: 11px;
}
&.tag-for-submission {
background-color: #ccffe6;
background-image: url("http://rbutr.com/images/button-removetag.png");
background-position: 4% 50%;
background-repeat: no-repeat;
margin: 5px;
padding: 3px 5px 3px 20px;
text-align: right;
}
}
.fake-link {
color: #00f;
cursor: pointer;
font-size: 12px;
padding: 2px 0;
text-decoration: none;
}
.btn {
background: linear-gradient(to bottom, #efefef, #e6e6e6);
border: 0;
border-radius: 0;
cursor: pointer;
display: inline-block;
font-size: 12px;
margin: 0;
padding: 5px 10px;
position: relative;
&:hover {
color: #c33;
text-decoration: none;
}
}
.btn-start {
padding-left: 40px;
padding-right: 40px;
width: 100px;
}
.btn-rebutted {
color: #c00;
}
.btn-rebuttal {
color: #126fcd;
}
.direct {
margin: 20px auto 20px 5px;
}
.link-title {
font-size: 85%;
}
.link-url {
color: #808080;
font-size: 60%;
}
.link-block {
background-color: #f3f3f3;
margin: 3px 2px;
padding: 3px 10px;
}
.source-heading {
color: #c00;
float: left;
margin: 3px;
position: relative;
}
.rebuttalHeading {
color: #2a2;
float: left;
margin: 3px;
padding-top: 15px;
position: relative;
}
.CaptureCopy {
color: #a5a5a5;
}
.CaptureHeader {
color: #2a2;
font-size: 14px;
font-weight: 700;
padding-top: 20px;
}
.cancel-submission {
float: right;
font-size: 12px;
position: relative;
text-decoration: none;
}
.firstHalf,
.secondHalf {
float: left;
position: relative;
width: 50%;
.padding {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
input {
width: 100%;
}
}
}
.firstHalf .padding {
margin: 0 30px 10px 10px;
}
.secondHalf .padding {
margin: 0 10px 10px 30px;
}
/* User options */
.menu-wrap {
float: right;
position: relative;
top: -2px;
}
.menu {
background-color: #fbfbfb;
border: 1px solid #e5e5e5;
color: #777;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
width: 30px;
}
.start-rebut {
float: left;
padding-right: 10px;
position: relative;
}
.thumbsUp,
.thumbsDown {
background-repeat: no-repeat;
display: block;
height: 23px;
margin-bottom: 10px;
a {
padding-left: 28px;
text-decoration: none;
}
}
.thumbsUp {
background-image: url("http://rbutr.com/images/thumbsUp.png");
a {
color: #3c0;
}
}
.thumbsDown {
background-image: url("http://rbutr.com/images/thumbsDown.png");
a {
color: #f00;
}
}
.RebuttalsContainer {
width: 100%;
tr {
border-bottom: 15px #fff solid;
}
td {
background-color: #f3f3f3;
color: #a4a4a4;
padding: 10px;
vertical-align: top;
&.middle {
background-color: #cce5ff;
color: #666;
font-size: 12px;
vertical-align: bottom;
width: 42px;
}
a {
color: #06c;
}
}
thead td {
background-color: #fff;
padding: 0 10px;
h3 {
margin-bottom: 0;
}
}
.hoverUrlImage {
font-size: 11px;
}
.link {
background-image: url("http://rbutr.com/images/link.png");
display: block;
height: 20px;
margin-bottom: 10px;
width: 20px;
}
.comment {
color: #209926;
font-size: 11px;
padding-bottom: 3px;
}
.bottom {
float: left;
vertical-align: bottom;
}
}
.tag {
background-color: #e6e6e6;
border-radius: 5px;
display: block;
float: left;
font-size: 10px;
margin-right: 3px;
padding: 2px 7px;
}
.tag-typeahead {
background-color: transparent;
position: relative;
vertical-align: top;
}
.address {
color: #a4a4a4;
font-size: 10px;
position: relative;
top: -3px;
}
.linkBy {
float: right;
font-size: 10px;
vertical-align: bottom;
}
.close {
float: right;
}
.typeahead-wrapper {
display: block;
margin: 50px 0;
}
.tt-dropdown-menu {
background-color: #fff;
border: 1px solid #000;
padding: 7px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #ccc;
}
.triggered-events {
float: right;
height: 300px;
width: 500px;
}
.submission-error {
color: #f00;
}
#btn-capture-src {
left: 5px;
position: relative;
top: 2px;
}
#btn-capture-rebuttal {
left: 5px;
position: relative;
top: 2px;
}
#tag-holder {
margin-top: 20px;
position: relative;
}
#not-logged-in {
margin: 15px;
}
#cancel-rebuttal-request {
cursor: pointer;
}
#view-wrap {
border: none;
height: auto;
width: auto;
}
.msg {
color: #fff;
padding: 12px 15px;
position: relative;
& + & {
margin-top: 10px;
}
&.msg-success {
background: #5bc3a2;
}
&.msg-info {
background: #6fb1c7;
}
&.msg-warning {
background: #ecbf58;
}
&.msg-error {
background: #d84a49;
}
& > .msg-remove {
color: inherit;
font-size: 2em;
font-weight: 700;
line-height: 1em;
position: absolute;
right: 10px;
text-decoration: none;
top: 5px;
}
}