564 lines
9.3 KiB
CSS
564 lines
9.3 KiB
CSS
/**
|
|
* Bluebasic
|
|
* Scheme for the Redbasic Theme for Hubzilla
|
|
* Based on the Suckerberg Theme by Sean Tiley
|
|
* Version 0.1
|
|
* Maintained by BOET
|
|
|
|
|
|
/* generals */
|
|
|
|
main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1366px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
a {
|
|
color: $nav_bg !important;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
.fakelink:hover,
|
|
.fakelink:focus {
|
|
color: $nav_bg !important;
|
|
}
|
|
|
|
|
|
.wall-item-conv {
|
|
background-color: $comment_item_colour;
|
|
}
|
|
|
|
.wall-item-title.h3 {
|
|
font-weight: 400;
|
|
word-wrap: break-word;
|
|
|
|
}
|
|
|
|
.side-link {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.shared_header img {
|
|
border-radius: 0.25rem;
|
|
margin: 0px 10px 10px 0px !important;
|
|
|
|
}
|
|
|
|
.shared_container {
|
|
border: 1px solid lightblue;
|
|
margin: 15px 0px;
|
|
padding: 10px;
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.shared_header {
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid lightblue;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.generic-icons,
|
|
a .generic-icons {
|
|
font-size: 1rem;
|
|
margin-right: 0.5rem;
|
|
color: $font_colour;
|
|
}
|
|
|
|
.generic-icons:hover,
|
|
a .generic-icons:hover {
|
|
color: $font_colour;
|
|
}
|
|
|
|
.generic-icons-right {
|
|
font-size: 1rem;
|
|
margin-left: 0.5rem;
|
|
color: $font_colour;
|
|
}
|
|
|
|
.drop-icons,
|
|
a .drop-icons {
|
|
font-size: 1rem;
|
|
color: $font_colour;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-icons:hover,
|
|
a .drop-icons:hover {
|
|
color: #FF0000;
|
|
}
|
|
|
|
#menulist {
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* conversation */
|
|
|
|
.top-radius {
|
|
border-top-right-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
|
|
.wall-event-item {
|
|
padding: 10px;
|
|
color: #fff;
|
|
background-color: #3A87AD; /* should reflect calendar color */
|
|
border-top-left-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
}
|
|
|
|
.wall-photo-item img {
|
|
max-width: 100% !important;
|
|
border-top-right-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
.wall-item-head-new {
|
|
border-top: 0.1rem solid #007bff;
|
|
}
|
|
|
|
.wall-item-footer {
|
|
font-size: 0.75rem;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.wall-item-content-wrapper {
|
|
background-color: #fff;
|
|
border-top-right-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
|
|
.wall-item-content-wrapper.comment {
|
|
background-color: $comment_item_colour;
|
|
border-top-right-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
}
|
|
|
|
.p-2 {
|
|
padding: 0.9rem !important;
|
|
}
|
|
|
|
.wall-item-comment-wrapper {
|
|
padding: 7px 10px;
|
|
background-color: $item_colour;
|
|
border-radius: 0px;
|
|
border-bottom-right-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
border-top: 0px solid $comment_item_colour;
|
|
}
|
|
|
|
.wall-item-comment-wrapper-wc {
|
|
border-top: 0px solid $comment_item_colour;
|
|
}
|
|
|
|
.wall-item-photo {
|
|
width: $top_photo;
|
|
height: $top_photo;
|
|
border: none;
|
|
border-radius: $radius;
|
|
box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
|
|
}
|
|
|
|
.comment .wall-item-photo {
|
|
width: $reply_photo;
|
|
height: $reply_photo;
|
|
}
|
|
|
|
.wall-item-content img {
|
|
max-width: 100%;
|
|
float: left;
|
|
clear: both;
|
|
margin: 10px 15px 10px 0px;
|
|
}
|
|
|
|
.comment .wall-item-body {
|
|
padding-left: 00px !important;
|
|
}
|
|
|
|
.wall-item-body a {padding-left: 2px; }
|
|
|
|
|
|
.comment-edit-text {
|
|
border: 1px solid #ccc;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
.divgrow-showmore {
|
|
display: block;
|
|
border: 1px dashed #ccc;
|
|
text-align: center;
|
|
padding: 7px;
|
|
margin: 13px 13px 0px 13px;
|
|
background: rgb(238,238,238);
|
|
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.divgrow-showmore:hover {
|
|
border-top: 1px dashed #adadad;
|
|
}
|
|
|
|
.directory-item .divgrow-showmore {
|
|
background-color: $comment_item_colour;
|
|
}
|
|
|
|
/* widgets */
|
|
|
|
.widget {
|
|
background-color: rgba(254,254,254,.5);
|
|
border: 1px solid rgba(254,254,254,.5);
|
|
border-radius: 2px;
|
|
margin-bottom: 1rem;
|
|
padding: 0 0 0.7rem;
|
|
}
|
|
|
|
.widget h3 {
|
|
margin-top: 0px;
|
|
border-bottom: 1px solid lightblue !important;
|
|
padding: 15px;
|
|
background-color: $nav_bg !important;
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
|
|
|
|
.menu-img-3 {
|
|
width: 3.3em;
|
|
height: 3.3em;
|
|
margin-right: 5px;
|
|
border-radius: $radius;
|
|
float: left;
|
|
}
|
|
|
|
.menu-img-2 {
|
|
height: 2.2em;
|
|
width: 2.2em;
|
|
margin-right: 5px;
|
|
border-radius: $radius;
|
|
float: left;
|
|
}
|
|
|
|
.menu-img-1 {
|
|
height: 1.28571429em;
|
|
width: 1.28571429em;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
#usermenu {
|
|
width: 3.75rem;
|
|
background-color: rgba(254,254,254,.5);
|
|
}
|
|
|
|
#avatar {
|
|
width: 2.35rem;
|
|
height: 2.35rem;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
#nav-app-link {
|
|
padding: 0 !important;
|
|
line-height: 1.175;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 7px 0px;
|
|
}
|
|
|
|
.generic-content-wrapper-styled {
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
.generic-content-wrapper {
|
|
border: 1px solid rgba(0, 0, 0, .2);
|
|
border-radius: $radius;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.reshared-content {
|
|
margin: 0px;
|
|
}
|
|
|
|
.section-title-wrapper {
|
|
padding: 7px 10px;
|
|
background-color: $item_colour;
|
|
border-top-left-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
border-bottom: 3px solid $comment_item_colour;
|
|
}
|
|
|
|
.section-title-wrapper h2,
|
|
.section-subtitle-wrapper h3 {
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
.section-title-wrapper img {width: 2.3rem; height; 2.3rem;}
|
|
|
|
#inline-btn {
|
|
display: none;
|
|
}
|
|
|
|
/* bootstrap overrides */
|
|
|
|
.btn,
|
|
.form-control,
|
|
.nav-pills .nav-link,
|
|
.nav-tabs .nav-link {
|
|
border-radius: $radius;
|
|
}
|
|
|
|
.rounded-top {
|
|
border-top-left-radius: $radius !important;
|
|
border-top-right-radius: $radius !important;
|
|
}
|
|
|
|
|
|
Element {
|
|
}
|
|
blockquote {
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
border: 1px dotted #ccc;
|
|
padding: 1em 1.5em;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
color: $font_colour;
|
|
font-size: 0.9rem;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: $font_colour;
|
|
}
|
|
|
|
.dropdown-item:active,
|
|
.dropdown-item:focus,
|
|
.dropdown-item:hover,
|
|
.textcomplete-item:focus .dropdown-item,
|
|
.textcomplete-item:hover .dropdown-item,
|
|
.textcomplete-item.active .dropdown-item,
|
|
.textcomplete-item:active .dropdown-item {
|
|
color: $font_colour;
|
|
background-color: $item_colour;
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: #fff;
|
|
background-color: $nav_bg !important;
|
|
}
|
|
|
|
.bg-dark, #menu_logo {
|
|
background-color: $nav_bg !important;
|
|
z-index: 1;
|
|
}
|
|
|
|
#menu_logo {
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
clear: both;
|
|
float: left;
|
|
margin-bottom: 0px;
|
|
color: $banner_colour;
|
|
|
|
}
|
|
|
|
#hubzilla {
|
|
font-size:1.5rem;
|
|
float:right;
|
|
margin-top:-45px;
|
|
margin-right:20px;
|
|
color:$banner_colour;
|
|
font-weight:800;
|
|
border-bottom:1px #4267b2;
|
|
}
|
|
|
|
#menu_logo .fa.fa-hubzilla {
|
|
font-size:5rem;
|
|
width:100%;
|
|
padding-top:10px;
|
|
padding-left:15px;
|
|
margin-bottom:10px;
|
|
float:left;
|
|
color: $banner_colour;
|
|
}
|
|
|
|
|
|
.bg-primary {
|
|
background-color: $nav_bg !important;
|
|
}
|
|
|
|
.text-white a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
|
color: #000;
|
|
background-color: #d5e3ff;
|
|
}
|
|
|
|
.navbar {
|
|
z-index:1030;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link,
|
|
.usermenu i {
|
|
color: $nav_icon_colour !important;
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link:focus,
|
|
.navbar-dark .navbar-nav .nav-link:hover,
|
|
.usermenu:focus i,
|
|
.usermenu:hover i {
|
|
color: $nav_active_icon_colour;
|
|
}
|
|
|
|
@media screen and (max-width: 992px) {
|
|
|
|
aside#region_1 {
|
|
border-right: 1px solid $nav_bd;
|
|
}
|
|
|
|
main {
|
|
left: -$aside_widthpx;
|
|
width: calc( 100% + $aside_widthpx );
|
|
}
|
|
|
|
main.region_1-on {
|
|
left: 0px;
|
|
}
|
|
|
|
#nav-app-link-wrapper {
|
|
min-width: 0;
|
|
flex-basis: 25%;
|
|
}
|
|
|
|
#navbar-collapse-2 .navbar-app i {
|
|
font-size: 1rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* Modified original CSS to match input in Redbasic */
|
|
|
|
.form-group.checkbox input {
|
|
display: none;
|
|
}
|
|
|
|
.form-group.checkbox > div label {
|
|
display: block; overflow: hidden; cursor: pointer;
|
|
border: 1px solid #ccc;
|
|
border-radius: 12px;
|
|
margin:0px;
|
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|
}
|
|
|
|
.form-group.checkbox:hover label {
|
|
color: $link_colour;
|
|
}
|
|
|
|
.form-group.checkbox:hover > div label {
|
|
border-color: $link_colour;
|
|
}
|
|
|
|
img.zrl {
|
|
width: 100% !important;
|
|
height: auto;
|
|
float: initial;
|
|
}
|
|
|
|
.logo { font-size: 5rem;
|
|
width: 105%;
|
|
color: #fff;
|
|
background-color: $nav_bg !important;
|
|
padding-top: 10px;
|
|
padding-left: 15px;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 15px;
|
|
margin-left: -0.5rem;
|
|
margin-top: -0.5rem;
|
|
float: left;
|
|
}
|
|
|
|
|
|
.badge-warning {
|
|
color: #000;
|
|
background-color: #fff;
|
|
color: $font_colour !important;
|
|
}
|
|
|
|
.badge-warning .text-dark {
|
|
color: $font_colour !important;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: .25em .4em;
|
|
padding-right: 0.4em;
|
|
padding-left: 0.4em;
|
|
font-weight: 400 !important;
|
|
line-height: 1 !important;
|
|
text-align: center !important;
|
|
white-space: nowrap !important;
|
|
vertical-align: baseline !important;
|
|
border-radius: 0 !important;
|
|
font-size: 0.75rem !important;
|
|
|
|
}
|
|
|
|
.contact-photo-wrapper img {width: 80px; height: 80px;}
|
|
|
|
img[src*="feedburner"] {
|
|
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
|
|
.oembed.video {
|
|
padding-top: 56.25% !important;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
.oembed.video a {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
height: 500px;
|
|
}
|
|
|
|
.oembed.video iframe, .oembed.video html, .oembed.video body, .oembed.video img {
|
|
width: 100% !important;
|
|
height: 500px;
|
|
position: relative;
|
|
margin-top: 10px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
audio {
|
|
width: 100%;
|
|
}
|