app/assets/stylesheets/base/hacks.css.scss
/* Remove annoying Firefox link outlines. */
a {
outline: 0 !important;
}
/* Remove default bootstrap border glow */
input:focus, textarea:focus {
box-shadow: none !important;
outline: 0 !important;
border: none;
}
.form-control:focus {
box-shadow: none !important;
border: 1px solid $darkOrange;
}
/* Asterisks for required field labels */
.required-label::after {
content: '*';
color: $darkOrange;
// Move one character to the right
margin-right: -1ch;
}
/* Simple padding container for forms */
.form-block-item {
margin: 10px 0;
}
.no-vpadding {
padding-top: 0;
padding-bottom: 0;
}
/* some table stuff */
.table-striped {
margin-bottom: 0;
}
.table-striped tbody td {
border-top: none !important;
}
.small-content { font-size: 0.8em; }
/* Fix panel rounded corner artefacts. */
.panel { border: none; }
/* Anime page social buttons. */
.social-buttons {
.fb-like {
margin-right: 10px;
}
.twitter-share-button {
margin: 0;
}
}
/* Fix extra 2px of space at the bottom of the header. */
a.navbar-brand {
padding: 14px;
}
/* Blotter announcements below the header */
.blotter {
text-align: center;
background-color: transparentize($navy, 0.05);
width: 100%;
padding-left: 40px;
border-bottom: 1px solid transparentize($darkNavy, 0.7);
&:first-child {
border-top: 1px solid $darkNavy;
}
i.fa-2x {
color: $orange;
position: relative;
top: 4px;
margin-right: 15px;
}
p {
color: darken($eggshell, 15%);
margin: 0;
padding: 14px 0;
font-size: 1.4em;
display: inline-block;
@media (max-width: 1000px) {
font-size: 1em;
padding: 10px 0;
}
}
a {
margin-left: 10px;
}
a.btn {
float: right;
margin: 16px;
background-color: $darkNavy;
color: darken($eggshell, 15%);
font-size: 0.9em;
padding: 2px 10px;
@media (max-width: 1000px) {
margin: 8px;
}
}
a.btn:hover {
background-color: darken($darkNavy, 5%);
color: lighten($eggshell, 5%);
}
}
/* Signup CTA below the header. */
.signup-cta {
text-align: center;
background-color: transparentize($navy, 0.05);
width: 100%;
border-top: 1px solid $darkNavy;
border-bottom: 1px solid transparentize($darkNavy, 0.7);
z-index: 1000;
p {
color: darken($eggshell, 15%);
margin: 0;
padding: 18px 0;
font-size: 1.4em;
@media (max-width: 1000px) {
font-size: 1em;
padding: 10px 0;
}
}
small {
color: $darkEggshell;
}
a.btn {
margin-left: 5px;
background-color: $darkOrange;
color: lighten($orange, 25%);
font-size: 0.9em;
padding: 2px 10px;
}
}
/* User Following Section */
.user-listing {
@include make-xs-column(12);
@include make-md-column(8);
@include make-md-column-offset(2);
.panel-heading {
padding: 16px 24px 12px;
h3 {
font-size: 1.2em;
}
}
.panel {
@include clearfix();
}
.panel-default, .user-about-panel, .anime-breakdown-panel, .photos-videos, .favorite-anime, .status-update-panel, .community-widget-panel, .story {
margin-bottom: 10px;
}
.user {
@include make-xs-column(12);
border-bottom: 1px solid $divider;
padding: 10px 0;
}
.user-avatar {
@include make-xs-column(2);
text-align: right;
img {
width: 50px;
}
}
.user-content {
@include make-xs-column(7);
color: $grey;
h4 {
margin: 0;
}
p {
font-size: 0.9em;
margin-bottom: 0;
}
}
.follow-button-column {
@include make-xs-column(3);
text-align: center;
}
}
/* JCrop Stuff */
.jcrop {
text-align: center;
img {
max-width: none;
}
.jcrop-holder {
display: inline-block;
}
}
/* Drop shadow on the actual image inside the crop. */
.jcrop .jcrop-holder {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Transparent background for the header and footer. */
.modal-content {
transition: background 1s ease-in;
border-color: rgba(255, 255, 255, 0.7);
.modal-footer, .modal-header {
background-color: rgba(255, 255, 255, 0.8);
}
.modal-header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.modal-footer {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
/* Customize jCrop interface. */
.jcrop-vline, .jcrop-hline {
opacity: 0.9 !important;
box-shadow: 0 0 5px #000;
}
.jcrop-handle {
height: 8px;
width: 8px;
border-radius: 8px;
background-color: #fff;
opacity: 1 !important;
&.ord-n, &.ord-s, &.ord-w, &.ord-e {
display: none;
}
}
/* Typeahead interface */
/*
* typehead.js-bootstrap3.less
* @version 0.2.3
* https://github.com/hyspace/typeahead.js-bootstrap3.less
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
border-color: #8a6d3b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #66512c;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #843534;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
border-color: #3c763d;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #2b542c;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.twitter-typeahead {
width: 100%;
}
.input-group .twitter-typeahead {
display: table-cell !important;
float: left;
}
.twitter-typeahead .tt-hint {
color: #999999;
}
.twitter-typeahead .tt-input {
z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
cursor: not-allowed;
background-color: #eeeeee !important;
}
.tt-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
width: 100%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
text-decoration: none;
outline: 0;
background-color: #f5f5f5;
color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
margin: 0;
}
.emoji {
width: 20px;
height: 20px;
}