|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/chinatranslationsweb/cht/assets/less/ |
Upload File : |
@import 'config.less';
@import url('http://fonts.googleapis.com/css?family=Fjalla+One');
/* global box-sizing */
* {
margin: 0;
padding: 0;
outline: 0 none;
}
html {
overflow-x: hidden;
}
*,
*:after,
*:before {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font:12px/1.8 Arial, sans-serif;
color:#555;
background: @body-background;
}
/* clear */
.clear:before,
.clear:after {
content:' ';
display:table;
}
.clear:after {
clear:both;
}
.clear {
*zoom:1;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
input.input-text {
border: 1px solid lighten(@grey, 10%);
background: @white;
.rounded;
padding: 5px;
height: 36px;
.transition;
-webkit-boxshadow:none;
&:focus {
border-color:@black;
outline:0;
}
&.tm-disabled, &:disabled {
background: lighten(@grey, 15%);
cursor: no-drop;
}
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
.transition;
color: @scheme;
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
img {
max-width: 100%;
border: none;
height: auto;
vertical-align: top;
}
/* layout */
.tm-table {
display: table;
}
.tm-table-cell {
display: table-cell;
vertical-align: middle;
}
.tm-left {
float: left;
}
.tm-right {
float: right;
}
.tm-wrap {
width: @layout-width;
margin: 0 auto;
position: relative;
&:after {
clear: both;
content: "";
display: block;
}
}
.tm-wrapall {
width: @layout-width + 80px;
margin: 0 auto;
}
.tm-col-1 {
article, li, div.tm-col {
width: 100%;
}
}
.tm-col-2 {
article, li, div.tm-col {
width: 50%;
}
}
.tm-col-3 {
article, li, div.tm-col {
width: 33.33%;
}
}
.tm-col-4 {
article, li, div.tm-col {
width: 25%;
}
}
.tm-title {
text-transform: uppercase;
margin: 0 0 15px 0;
}
.tm-column {
float: left;
padding: 0 20px;
&.tm1 {
width: 8.33333%;
}
&.tm2 {
width: 16.6667%;
}
&.tm3 {
width: 25%;
}
&.tm4 {
width: 33.3333%;
}
&.tm5 {
width: 41.6667%;
}
&.tm6 {
width: 50%;
}
&.tm7 {
width: 58.3333%;
}
&.tm8 {
width: 66.6667%;
}
&.tm9 {
width: 75%;
}
&.tm10 {
width: 83.3333%;
}
&.tm11 {
width: 91.6667%;
}
&.tm12 {
width: 100%;
}
}
.tm-content, .tm-container {
position: relative;
&:after {
clear: both;
content: "";
display: block;
}
}
/** Color **/
.red {
background: @red;
}
.blue {
background: @blue;
}
.green {
background: @green;
}
.lightblue {
background: @lightblue;
}
.darkblue {
background: @darkblue;
}
.orange {
background: @orange;
}
.grey {
background: @grey;
}
.black {
background: @black;
}
.white {
background: @white;
}
/**Templates**/
#tm-template-default-box {
width: @layout-width;
margin: 0 auto;
position: relative;
&:after {
clear: both;
content: "";
display: block;
}
.tm-wrap {
width: auto;
}
&.tm-container {
margin-top:40px;
margin-bottom: 40px;
}
}
#tm-template-default-fullwidth {
width: 100%;
position: relative;
&:after {
clear: both;
content: "";
display: block;
}
&.tm-container {
margin-top:0;
margin-bottom: 0;
}
.page-content {
.page-content-inner {
padding: 0;
}
}
}
/** Sidebar Widget **/
.page-sidebar,
.page-sidebar-second,
.tm-sidebar-footer {
aside {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
&.widget_tag_cloud {
.tagcloud {
display: inline-block;
width: 100%;
a {
font-size: 12px !important;
background: lighten(@grey, 7%);
padding: 7px 20px;
display: inline-block;
margin: 0 5px 5px 0;
float: left;
color: @black;
.rounded;
&:hover {
background: @black;
color: @white;
}
}
}
}
&.widget_text {
.textwidget {
ul.ads {
display: inline-block;
width: 100%;
li {
float: left;
a {
display: block;
margin: 0 15px 15px 0;
}
&:nth-child(2n) {
a {
margin-right: 0;
}
}
}
}
}
}
&.widget_recent_entries {
&.tm-list-style2 {
ul {
li {
margin-bottom: 0;
}
}
}
ul {
li {
width: 100%;
display: inline-block;
margin-bottom: 15px;
padding-left: 0;
&:after {
content: "";
border: none;
}
a {
display: block;
&:hover {
h3 {
color: @scheme;
}
}
.thumb {
float: left;
img {
width: 60px;
height: 60px;
}
}
h3 {
margin:0 0 5px 75px;
.transition;
}
.time {
font-size: 11px;
color: lighten(@black, 50%);
margin-left: 75px;
display: block;
line-height: 100%;
}
}
}
}
}
&.widget_recent_comments {
ul {
li {
padding-top:10px;
padding-bottom: 10px;
}
}
}
&.widget_nav_menu {
&.tm-list-style2 {
ul {
li {
a {
margin: -10px 0;
}
}
}
}
ul {
li {
&.current {
a {
font-weight: bold;
}
}
a {
display: block;
padding: 10px 0;
}
}
}
}
&.widget_search {
form {
position: relative;
input[type="submit"] {
margin: 0;
display: none;
}
input[type="text"] {
width: 100%;
}
&:after {
content: "\f002";
font-family: 'FontAwesome';
position: absolute;
right: 15px;
top: 7px;
color: @grey;
}
}
}
&.widget_calendar {
table {
caption {
text-align: left;
margin-bottom: 5px;
}
tr {
td {
background: lighten(@grey, 15%);
border:1px solid @white;
text-align: center;
a {
display: block;
background: @scheme;
color: @white;
&:hover {
background: @black;
}
}
}
}
}
}
ul {
li {
a {
color: @black;
&:hover {
color: @scheme;
}
}
}
}
select {
width: 100%;
}
}
}
/** Widget Styles **/
.widget {
&[class*="box-"] {
margin-bottom: 20px;
}
&.box-white, &.box-title-1 {
background: @white;
padding: 20px;
}
&.box-dark, &.box-title-2 {
background: @dark;
padding: 20px;
color: darken(@grey, 10%);
h1,h2,h3,h4,h5,h6,a {
color: @white;
}
&.tm-list-style1 {
ul {
li {
&:after {
border-bottom: 4px solid transparent;
border-left: 4px solid rgba(255,255,255,.7);
border-top: 4px solid transparent;
border-right: 4px solid transparent;
}
}
}
}
&.tm-list-style2 {
ul {
li {
border-bottom: 1px solid lighten(@dark, 10%);
}
}
}
&.widget_calendar {
table {
tr {
td {
background: none;
border:1px solid lighten(@dark, 10%);
}
}
}
}
}
&[class*="box-title-"] {
.tm-title {
color: @white;
background: @black;
padding: 15px 20px;
margin: -20px -20px 20px -20px;
}
}
}
/* List style */
.tm-list-style1 {
ul {
li {
position: relative;
padding-left: 12px;
&:after {
border-bottom: 4px solid transparent;
border-left: 4px solid rgba(0,0,0,0.7);
border-top: 4px solid transparent;
border-right: 4px solid transparent;
content: "";
height: 0;
position: absolute;
left: 0;
top: 50%;
width: 0;
margin-top: -4px;
}
}
}
}
.tm-list-style2 {
ul {
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lighten(@grey, 5%);
&:last-child {
border-bottom: none;
}
}
}
}
/* form */
form {
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
line-height: 100%;
}
.tm-input, .tm-button {
.rounded;
display: inline-block;
padding: 10px;
}
.tm-button {
background: @scheme;
color: @white;
font-weight: bold;
border: none;
height: 36px;
cursor: pointer;
}
}
select {
border: 1px solid lighten(@grey, 10%);
padding: 10px;
background-color: @white;
.rounded;
background-image: url(assets/img/caret.png);
background-position: 93% center;
background-repeat: no-repeat;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
}
/* header*/
header {
#tm-header-top {
background: @black;
color: @white ;
.tm-logo {
display: table-cell;
vertical-align: middle;
a {
display: block;
&.tm-logo-retina {
display: none;
}
}
}
.tm-top-nav {
padding-left: 30px;
display: table-cell;
vertical-align: middle;
ul {
list-style: none;
li {
display: inline-block;
&:after {
content: "•";
padding: 0 10px;
font-size: 10px;
color: #666;
}
&:last-child:after {
content: "";
padding: 0;
}
a {
color: #666;
font-size: 11px;
text-decoration: none;
&:hover {
color: #fff;
}
}
}
}
}
.tm-search {
display: table-cell;
vertical-align: middle;
text-align: right;
form {
input {
background: @white;
.rounded;
border: none;
width: 300px;
height: 36px;
vertical-align: middle;
}
button {
background: @scheme;
color:@white;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
padding: 10px 25px;
height: 36px;
}
}
}
}
/** nav **/
#tm-header-nav {
/** Sticky menu **/
&.tm-sticky-menu {
&.tm-fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 999;
.box-shadow;
}
}
nav.tm-nav {
position: relative;
z-index: 99;
ul.tm-menu {
.transition;
li {
&.parent {
position: relative;
}
/** Mega-menu **/
&.tm-mega-menu {
position: static;
> ul.sub-menu {
width: @layout-width;
left: 0;
display: table !important;
table-layout: fixed;
margin: 0;
background: @white;
.opacity(0);
visibility: hidden;
ul {
position: static;
width: auto;
border: none;
margin: 0;
.box-shadow(none);
}
> li {
display: table-cell;
padding: 10px;
> a {
font-weight: bold;
border-bottom: 1px solid lighten(@grey, 15%);
&:hover {
background: none;
}
}
}
li {
&.parent:after {
display: none;
}
}
&:after {
display: none;
}
}
&:hover {
ul.sub-menu {
.opacity(1);
visibility: visible;
display: block\9;
}
}
}
}
> li {
&:first-child {
> a {
padding-left: 0;
}
> ul.sub-menu {
left: 0;
margin-left: 0;
&:after {
left: 7px;
border-bottom: none;
border-right: none;
border-left: 7px solid @black;
border-top: 7px solid transparent;
}
}
}
display: inline-block;
padding: 20px 0;
line-height: 100%;
> ul.sub-menu {
li {
&.parent {
&:after {
border-bottom: 4px solid transparent;
border-left: 4px solid @grey;
border-top: 4px solid transparent;
content: "";
position: absolute;
top: 50%;
margin-top: -4px;
right: 15px;
height: 0;
width: 0;
}
}
&:hover {
> ul {
.opacity(1);
visibility: visible;
display: block\9;
top: 0;
}
}
}
ul {
left: @submenu-width;
top: 10px;
margin-left: 2px;
}
}
&:hover {
a {
.opacity(1);
}
> ul.sub-menu {
.opacity(1);
visibility: visible;
display: block\9;
top:100%;
}
}
> a {
font-weight: bold;
text-transform: uppercase;
color: @black;
padding: 20px 12px;
line-height: 100%;
}
> ul.sub-menu {
top:110%;
left: 50%;
margin-left: -@submenu-width/2;
li {
a {
color: @black;
padding: 15px;
display: block;
&:hover {
background: lighten(@grey, 15%);
color: @black;
}
}
}
}
ul.sub-menu {
position: absolute;
width: @submenu-width;
background: @white;
.opacity(0);
.transition;
visibility: hidden;
visibility: visible\9;
display: none\9;
.box-shadow;
}
}
}
}
/** menu-styles **/
&.tm-menu-style1 {
background: @white;
ul.tm-menu {
&:hover {
> li {
&.current-menu-item {
a {
color: @black;
}
}
> a {
.opacity(0.3);
}
}
}
li {
&.current-menu-item {
a {
color: @scheme;
}
}
ul.sub-menu {
border-top: 3px solid @black;
}
}
> li {
> ul.sub-menu {
&:after {
border-bottom: 7px solid @black;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
height: 0;
left: 50%;
margin-left: -7px;
position: absolute;
top: -10px;
width: 0;
}
ul {
margin-top: -3px;
}
}
&.tm-mega-menu {
> ul.sub-menu {
border: none;
box-shadow: 0 3px 0 @black inset,0 2px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 0 @black inset,0 2px 3px rgba(0, 0, 0, 0.05);
-o-box-shadow: 0 3px 0 @black inset,0 2px 3px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 3px 0 @black inset,0 2px 3px rgba(0, 0, 0, 0.05);
}
}
}
}
}
&.tm-menu-style2 {
background: @black;
border-top: 1px solid lighten(@black, 20%);
nav.tm-nav {
ul.tm-menu {
&:hover {
> li {
&.current-menu-item {
&:hover {
> a {
color: @white;
}
}
> a {
color: lighten(@black, 40%);
}
}
> a {
.opacity(0.7);
}
}
}
> li {
&:first-child {
> ul.sub-menu {
&:after {
left: 7px;
border-bottom: none;
border-right: none;
border-left: 7px solid @white;
border-top: 7px solid transparent;
}
}
}
&:hover {
> a {
color: @white;
.opacity(1);
}
}
> ul.sub-menu {
&:after {
border-bottom: 7px solid @white;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
height: 0;
left: 50%;
margin-left: -7px;
position: absolute;
top: -7px;
width: 0;
}
}
> a {
color: lighten(@black, 40%)
}
&.current-menu-item {
> a {
color: @white;
}
}
&.tm-mega-menu {
> ul.sub-menu {
&:after {
display: none;
}
}
}
}
}
}
}
}
/** Social **/
.tm-social-icons {
text-align: right;
display: table-cell;
vertical-align: middle;
a {
color: @white;
width: 32px;
height: 32px;
.rounded (50%);
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 5px;
i {
line-height: 31px;
}
&.tm-icon-facebook {
background: #4C66A4;
}
&.tm-icon-twitter {
background: #2dbae7;
}
&.tm-icon-dribbble {
background: #EA4C89;
}
&:hover {
background: @scheme;
}
}
}
}
#tm-page-body {}
/** page-title **/
#tm-page-title {
background: @scheme;
color: @white;
padding: 40px;
.tm-title-captions {
width: 50%;
display: table-cell;
vertical-align: middle;
.tm-entry-title {
color: @white;
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
}
ul.tm-breadcrumbs {
vertical-align: middle;
display: table-cell;
width: 50%;
text-align: right;
li {
display: inline-block;
&:after {
content: "•";
padding: 0 10px;
vertical-align: middle;
}
&:last-child:after {
content: "";
padding: 0;
}
a {
color: #fff;
}
}
}
}
/** Paginator **/
.tm-paginator {
text-align: center;
display: inline-block;
width: 100%;
.page-numbers {
width: 32px;
height: 32px;
.rounded;
background: @black;
color: @white;
text-align: center;
line-height: 32px;
display: inline-block;
&:hover {
background: @scheme;
}
}
.current {
background: @scheme;
}
.next, .prev {
background: lighten(@black, 80%);
overflow: hidden;
&:before {
content: "\f105";
display: block;
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
line-height: 32px;
}
}
.prev {
float: left;
&:before {
content: "\f104";
}
}
.next {
float: right;
}
}
/** Portfolio **/
#tm-portfolio {
&.tm-portfolio-classic {
.tm-content {
article {
.tm-mask {
&:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
background: rgba(0,0,0,.8);
position: absolute;
left: 10px;
right: 10px;
top: 0;
height: 100%;
text-align: center;
color: @white;
.transition(all 0.4s ease-in-out 0s);
.opacity(0);
.tm-mask-content {
display: inline-block;
vertical-align: middle;
height: auto;
width: 70%;
h3 {
a {
color: @white;
}
}
.line {
height: 1px;
background: @white;
width: 20%;
.transition(all 0.4s ease-in-out 0s);
display: inline-block;
margin: 5px 0;
}
.incategory {
margin-bottom: 15px;
a {
color: @white;
}
}
}
}
&:hover {
.tm-mask {
.opacity(1);
.tm-mask-content {
.line {
width: 50%;
}
}
}
}
}
&.tm-col-1 {
margin-left: 0;
margin-right: 0;
article {
float: none;
padding: 20px;
background: @white;
display: inline-block;
width: 100%;
.tm-image {
&:hover {
.tm-mask {
.opacity(1);
.tm-mask-content {
.line {
width: 50%;
}
}
}
}
width: 50%;
float: left;
position: relative;
.tm-mask {
left: 0;
right: 0;
}
}
.portfolio-content {
width: 50%;
float: right;
padding-left: 30px;
h2 {
a {
color: @black;
}
}
.incategory {
margin: 0 0 15px 0;
}
.portfolio-info {
border-top:1px solid lighten(@grey, 10%);
margin: 20px 0 ;
padding-top: 20px;
}
}
&:hover {
.tm-mask {
.opacity(0);
.tm-mask-content {
.line {
width: auto;
}
}
}
}
}
}
}
}
&.tm-portfolio-text {
.tm-content {
article {
.tm-content-inner {
background: @white;
.box-shadow;
.rounded;
a.tm-lightbox {
.rounded(2px 2px 0 0);
display: block;
overflow: hidden;
&:hover {
img {
.scale;
}
}
img {
.rounded(2px 2px 0 0);
.transition;
}
}
.portfolio-content {
background: @white;
.rounded(0 0 2px 2px);
padding: 20px;
h3 {
margin-bottom: 10px;
a {
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 100%;
}
}
.incategory {
a {
}
}
}
}
}
}
}
.tm-content {
margin: 40px -10px 0 -10px;
article {
float: left;
padding: 0 10px;
position: relative;
margin-bottom: 20px;
img {
width: 100%;
height: auto;
}
}
}
}
/** Blog **/
body {
&.blog-masonry-full {
#tm-blog {
.page-content {
margin: 0 auto;
width: @layout-width;
.tm-content {
&.blog-masonry {
article {
width: 275px;
}
}
}
}
}
}
}
.tm-switch {
display: inline-block;
vertical-align: middle;
.bg-switch {
background: darken(@scheme, 10%);
height: 24px;
.rounded(24px);
.button-switch {
height: 24px;
width: 24px;
display: inline-block;
.rounded(50%);
background: transparent;
position: relative;
&.active {
background: @white;
}
&:hover {
&:before,
&:after {
.opacity(1);
}
}
&:before {
content: attr(data-title);
background: @black;
padding: 5px 10px;
width: 100px;
text-align: center;
position: absolute;
color: @white;
left: 50%;
margin-left: -50px;
.rounded;
top: -41px;
.opacity(0);
.transition;
}
&:after {
border-top: 5px solid @black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
display: inline-block;
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
top: -10px;
width: 0;
.opacity(0);
.transition;
}
}
}
}
#tm-blog {
.page-content {
.tm-content {
article {
.entry-thumbnail {
a {
overflow: hidden;
&:hover {
img {
.scale;
}
}
img {
.transition;
}
}
}
.entry-container {
.time {
font-size: 11px;
color: lighten(@black, 70%);
line-height: 100%;
}
h3 {
margin: 10px 0;
a {
color: @black;
&:hover {
color: @scheme;
}
}
}
.meta {
color: lighten(@black, 40%);
margin-bottom: 5px;
a {
color: lighten(@black, 40%);
&.author {
color: @black;
}
&:hover {
color: @scheme;
}
}
}
p {
a {
}
}
}
}
}
}
&.tm-blog-style-grid {
.page-content {
.tm-content {
margin: 0 -10px;
article {
float: left;
padding:0 10px;
margin-bottom: 20px;
.entry-thumbnail {
a {
display: block;
}
}
.entry-container {
background: @white;
padding: 20px;
}
}
}
}
}
&.tm-blog-style-list {
.page-content {
.tm-content {
background: @white;
article {
width: 100%;
display: inline-block;
padding: 0 20px;
.entry-thumbnail {
float: left;
margin-right: 20px;
a {
display: block;
img {
width: auto;
}
}
}
.entry-container {
padding: 0;
}
.tm-content-inner {
display: inline-block;
width: 100%;
border-bottom: 1px solid lighten(@black, 95%);
padding: 20px 0;
}
&:last-child {
.tm-content-inner {
border-bottom: none;
}
}
}
}
}
}
/** Magazine Style **/
&.tm-blog-style-magazine1 {
.page-content {
.tm-featured-slide1 {
margin-bottom: 20px;
ul.slides {
li {
position: relative;
a {
color: @white;
}
p.flex-caption {
position: absolute;
background: rgba(0,0,0,0.8);
color: @white;
bottom: 50px;
left: 20px;
font-size: 24px;
padding: 0 15px;
}
}
}
}
.tm-content {
.tm-main-content {
.tm-main-content-inner {
background: @white;
article {
padding: 0 20px;
position: relative;
&:last-child {
.tm-content-inner {
border-bottom: none;
}
}
.tm-content-inner {
border-bottom: 1px solid lighten(@grey, 9%);
display: inline-block;
width: 100%;
padding: 20px 0;
.entry-thumbnail {
float: left;
margin-right: 20px;
a {
display: block;
}
}
.entry-container {
padding: 0;
.meta {
a.tm-icon-comment {
background: @scheme;
width: 24px;
height: 19px;
font-size: 11px;
color: @white;
position: absolute;
right: 20px;
top: 20px;
text-align: center;
line-height: 20px;
&:after {
content: "";
border-right: 5px solid transparent;
border-top: 5px solid @scheme;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -3px;
}
}
}
}
}
}
}
}
}
}
}
&.tm-blog-style-magazine2 {
.page-content {
.tm-featured {
background: @black;
margin-bottom: 20px;
.hot {
li {
float: left;
width: 25%;
position: relative;
&:hover {
img {
.opacity(0.4);
.scale;
}
}
&:first-child {
width: 50%;
a {
h3 {
font-size: 24px;
}
}
}
a {
display: block;
overflow: hidden;
img {
width: 100%;
.transition;
}
h3 {
position: absolute;
bottom: 20px;
left: 20px;
width: 80%;
.text-shadow;
color: @white;
z-index: 99;
}
}
}
}
}
.tm-content {
.tm-main-content {
article {
&:last-child {
margin-bottom: 0;
}
margin-bottom: 20px;
background: @white;
padding: 15px 20px 20px 20px;
.tm-content-inner {
display: inline-block;
width: 100%;
h3.tm-title {
border-bottom: 1px solid lighten(@grey, 10%);
line-height: 100%;
margin-bottom: 20px;
padding-bottom: 10px;
}
.tm-category-block {
display: table;
width: 100%;
.tm-block-content {
display: table-cell;
width: 67%;
padding-right: 20px;
text-align: top;
.entry-thumbnail {
float: left;
margin-right: 20px;
a {
display: block;
overflow: hidden;
}
}
.entry-container {
padding: 0;
}
}
.entry-others {
display: table-cell;
vertical-align: top;
width: 33%;
padding-left: 20px;
border-left: 1px solid lighten(@grey, 10%);
ul {
li {
a {
color: @black;
border-bottom: 1px solid lighten(@grey, 10%);
display: block;
padding: 10px 0;
font-size: 11px;
&:hover {
color: @scheme;
}
}
&:last-child {
a {
border-bottom: none;
padding-bottom: 0;
}
}
&:first-child {
a {
padding-top: 0;
}
}
}
}
}
}
}
}
}
}
}
}
.page-content-inner {
padding: 0;
background: transparent;
}
}
#tm-template-comingson {
margin: 0;
text-align: center;
.page-content-inner {
padding: 0;
background: none;
}
.countdown-container {
.clock-canvas {
background-color: rgba(0,0,0,0.4);
.rounded(50%);
height: 0;
padding-bottom: 100%;
}
.text {
color: @white;
position: absolute;
top: 50%;
text-align: center;
width: 100%;
margin-top: -36px;
.val {
font-size: 60px;
font-family: @countdown-font;
margin-bottom: 5px;
line-height: 100%;
}
.type-time {
font-size: 12px;
line-height: 100%;
font-weight: bold;
}
}
}
.tm-title-countdown {
font-family: @countdown-font;
font-weight: normal;
text-transform: uppercase;
font-size: 60px;
}
}
/** Contact **/
#map-canvas {
height: 500px;
img {
max-width: none;
}
}
.contact-form {
form {
.tm-alert {
margin: 20px 0;
}
p {
label {
display: block;
&.error {
font-size: 11px;
font-style: italic;
margin-top: 5px;
}
}
input {
&[type="text"], &[type="email"] {
width: 50%;
}
&.error {
border-color: @red;
}
}
textarea {
width: 100%;
resize: vertical;
height: 100px;
&.error {
border-color: @red;
}
}
&.form-submit {
.tm-btn {
margin: 0;
}
}
}
}
}
/** 404 **/
.tm-error {
font-size: 20em;
font-weight: bold;
line-height: 100%;
display: block;
text-align: center;
color: @grey;
}
/** Sidebar Second **/
.tm-content {
&.tm-sidebar-second-right {
.page-sidebar-second {
float: right;
padding-right: 0;
padding-left: 10px;
width: 25%;
}
.tm-main-content {
float: left;
padding-left: 0;
padding-right: 10px;
width: 75%;
}
}
&.tm-sidebar-second-left {
.page-sidebar-second {
float: left;
padding-left: 0;
padding-right: 10px;
width: 25%;
}
.tm-main-content {
float: right;
padding-right: 0;
padding-left: 10px;
width: 75%;
}
}
}
/** Personal **/
.personal {
&.tm-container {
.page-content {
.page-content-inner {
padding: 0;
background: none;
article {
float: left;
&.item {
&.column-width {
width: 25%;
}
}
&.w2 {
width: 50%;
.tm-content-inner {
height: @layout-width / 2;
}
h3 {
font-size: 18px;
}
}
img {
width: 100%;
}
.tm-content-inner {
position: relative;
overflow: hidden;
background: @white;
height: @layout-width / 4;
.transition;
&:hover {
.opacity(0.7);
}
.entry-thumbnail {
a {
display: block;
&:hover {
img {
.scale (none) !important;
}
}
}
}
}
&.format-standard {
.tm-content-inner {
&:hover {
.entry-container {
bottom: 0;
.opacity(1);
}
}
.entry-thumbnail {
a {
display: block;
}
}
.entry-container {
padding: 0;
position: absolute;
bottom: -50px;
left: 0;
right: 0;
padding: 20px;
background: rgba(255,255,255,0.9);
.transition;
.opacity(0);
h3 {
a {
color: @white;
}
}
}
}
}
&.format-gallery {
.tm-content-inner {
.opacity(1);
}
}
&.format-video,
&.format-image {
.tm-content-inner {
&:hover {
i {
.opacity(1);
}
}
i {
position: absolute;
font-size: 56px;
color: @white;
width: 56px;
height: 56px;
left: 50%;
top: 50%;
margin-left: -28px;
margin-top: -28px;
text-align: center;
line-height: 56px;
.opacity(0);
.transition;
.text-shadow;
}
}
}
&.format-aside, &.format-quote {
.tm-content-inner {
text-align: center;
&:hover {
.opacity(1);
}
&:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.entry-container {
padding: 0;
display: inline-block;
height: auto;
vertical-align: middle;
width: 80%;
text-align: left;
h3 {
text-transform: uppercase;
}
}
}
}
&.format-quote {
blockquote {
position: relative;
padding-left: 45px;
font-size: 18px;
&:before {
content: "“";
font-size: 100px;
left: 0;
line-height: 0.8;
position: absolute;
}
}
}
&.format-image {
.entry-container {
position: absolute;
padding: 0;
bottom: 20px;
left: 20px;
h3 {
a {
color: @white !important;
.text-shadow;
}
}
}
}
}
}
}
}
}
/** Single **/
[id*="tm-single"] {
&.tm-container {
.page-content {
.page-content-inner {
padding: 0;
}
}
}
}
.tm-container {
margin-top:40px;
margin-bottom: 40px;
.page-content {
.page-content-inner {
background: @white;
padding: 20px;
}
.entry-thumbnail {
img {
width: 100%;
height: auto;
}
}
.entry-container {
padding: 30px 70px;
section {
border-bottom: 1px solid lighten(@black, 90%);
padding: 30px 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
section.tags {
i {
font-size: 20px;
color: @black;
vertical-align: middle;
}
ul {
display: inline-block;
vertical-align: middle;
margin-left: 20px;
li {
display: inline-block;
&:after {
content: "•";
padding: 0 10px;
color: @grey;
}
&:last-child {
&:after {
content: "";
padding: 0;
}
}
a {
color: @black;
&:hover {
color:@scheme;
}
}
}
}
}
.entry-content {
border-bottom: 1px solid lighten(@grey, 10%);
padding-bottom: 30px;
}
section.about-author {
.about-author-conteainer {
display: inline-block;
width: 100%;
.avatar {
float: left;
margin: 0 20px 0 0;
img {
.rounded(100px);
width: 100px;
height: 100px;
}
}
.description {
margin: 10px 0 0 0;
}
}
}
section#tm-comment {
border-bottom: none;
ol.commentlist {
> li {
&:first-child {
> .comment {
padding-top: 0;
}
}
}
li {
.comment {
border-bottom: 1px solid lighten(@grey, 10%);
display: inline-block;
width: 100%;
padding: 20px 0;
.avatar {
float: left;
margin: 5px 0 0 0;
img {
width: 50px;
height: 50px;
}
}
.comment-container {
margin-left: 65px;
.comment-author {
margin: 0 0 5px 0;
color: darken(@grey, 10%);
strong {
color: @black;
}
a {
&:hover {
color: @black;
}
}
}
}
}
ul.children {
padding-left: 65px;
}
}
}
}
#respond {
padding-top: 0;
#commentform {
margin-top: 30px;
p {
margin-bottom: 20px;
label {
display: block;
font-weight: bold;
color: @black;
margin-bottom: 5px;
span {
color: @grey;
}
}
input[type="text"] {
width: 50%;
}
textarea {
width: 100%;
resize: vertical;
height: 100px;
}
input[type="submit"] {
border: none;
cursor: pointer;
margin: 0;
}
}
}
}
}
.entry-header {
padding: 30px 70px 0 70px;
.meta {
margin: 5px 0;
a {
color: @black;
font-weight: bold;
&:hover {
color: @scheme;
}
}
}
.time {
color: darken(@grey, 20%);
a {
color: darken(@grey, 20%);
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid @grey;
&:hover {
color: @black;
}
}
}
}
}
.page-sidebar {
.portfolio-description,
.portfolio-info,
.tm-share {
margin-bottom: 30px;
}
}
&.tm-sidebar-left {
.page-content {
float: right;
padding-right: 0;
padding-left: 10px;
width: 75%;
}
.page-sidebar {
float: left;
padding-left: 0;
padding-right: 10px;
width: 25%;
}
}
&.tm-sidebar-right {
.page-content {
float: left;
padding-left: 0;
padding-right: 10px;
width: 75%;
}
.page-sidebar {
float: right;
padding-right: 0;
padding-left: 10px;
width: 25%;
}
}
}
.tm-single-nav {
position: fixed;
height: 100px;
top: 50%;
margin-top: -50px;
background: rgba(0,0,0,.2);
padding: 20px 15px;
z-index: 9;
.transition;
&:hover {
background: rgba(0,0,0,.9);
.post-entry {
width: auto;
}
}
i {
font-size: 28px;
color: @white;
position: absolute;
height: 28px;
line-height: 28px;
top: 50%;
margin-top: -14px;
}
.post-entry {
display: block;
overflow: hidden;
width: 0;
.post-entry-inner {
display: table;
width: 200px;
h3 {
color: @white;
display: table-cell;
vertical-align: middle;
}
.img {
display: table-cell;
vertical-align: middle;
width: 60px;
height: 60px;
img {
display: block;
}
}
}
}
&.post-next {
right: 0;
text-align: right;
.rounded(2px 0 0 2px);
i {
right: 10px;
}
.post-entry {
.post-entry-inner {
margin: 0 20px 0 0;
}
}
}
&.post-prev {
left: 0;
.rounded(0 2px 2px 0);
i {
left: 10px;
}
.post-entry {
.post-entry-inner {
margin: 0 0 0 20px;
}
}
}
}
/** Footer **/
#tm-page-footer {
background: @white;
padding: 35px 0;
.tm-sidebar-footer {
.tm-sidebar-footer-inner {
margin: 0 -20px;
}
}
/** Custom Widget **/
.newsletter {
display: inline-block;
width: 100%;
.tm-input {
background: lighten(@grey, 15%);
height: 36px;
float: left;
width: 74%;
}
.tm-button {
color: @white;
font-weight: bold;
height: 36px;
float: right;
width: 25%;
cursor: pointer;
.transition;
}
}
.payments {
border-top: 1px solid lighten(@grey, 10%);
padding-top: 30px;
img {
width: 100%;
}
}
}
.newsletter {
.tm-alert {
margin-bottom: 20px;
}
.tm-button {
vertical-align: middle;
&.tm-disabled, &:disabled {
background: lighten(@grey, 15%);
cursor: no-drop;
}
}
.tm-input {
vertical-align: middle;
}
}
footer {
background: @black;
padding: 15px 0;
color: lighten(@black, 40%);
.copyright {
display: table-cell;
vertical-align: middle;
}
.tm-social-icons {
display: table-cell;
vertical-align: middle;
text-align: right;
a {
background: lighten(@black, 20%);
width: 32px;
height: 32px;
.rounded(32px);
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 5px;
&:hover {
background: @scheme;
}
i {
color: @black;
line-height: 32px;
}
}
}
}
/** Go to top **/
#tm-gotop {
position: fixed;
bottom: 20px;
right: 20px;
display: block;
width: 32px;
height: 32px;
background: rgba(0,0,0,0.8);
color: @white;
text-align: center;
z-index: 999;
visibility: hidden;
.opacity(0);
.rounded;
&:hover {
background: @black;
}
&.tm-visible {
visibility: visible;
.opacity(1);
}
i {
line-height: 32px;
}
}
/********** Plugin jQuery ***********/
/** FlexSlides **/
.flexslider,
.gallery-carousel {
position: relative;
&:hover {
ol.flex-control-nav,
ul.flex-direction-nav li a{
.opacity(1);
}
}
ul.slides {
display: inline-block;
width: 100%;
li {
a {
display: block;
img {
width: 100%;
height: auto;
}
}
}
}
ol.flex-control-nav {
text-align: center;
position: absolute;
z-index: 99;
width: 100%;
bottom: 20px;
height: 15px;
.opacity(0);
.transition;
li {
display: inline-block;
a {
background: rgba(0,0,0,0.5);
width: 15px;
height: 15px;
.rounded(50%);
text-indent: -9999px;
display: inline-block;
cursor: pointer;
margin: 0 5px;
&.flex-active {
background: @scheme;
}
&:hover {
background: rgba(0,0,0,0.8);
}
}
}
}
ul.flex-direction-nav {
display: block;
.transition;
li {
position: static;
a {
background: rgba(0,0,0,.5);
width: 48px;
height: 48px;
text-align: center;
display: inline-block;
position: absolute;
z-index: 99;
left: 20px;
top: 50%;
margin-top: -24px;
.rounded;
.opacity(0);
&:hover {
background: rgba(0,0,0,0.8);
}
i {
color: @white;
font-size: 28px;
line-height: 46px;
}
&.flex-next {
position: absolute;
right: 20px;
left: auto;
}
}
}
}
}
/** TinyNav **/
.tinynav {
display: none
}
/** iSotope **/
.isotope {
.transition(all 0.8s ease-in-out 0s);
.isotope-item {
.transition(all 0.8s ease-in-out 0s);
z-index: 2;
&.isotope-hidden {
pointer-events: none;
z-index: 1;
}
}
}
/** parallax **/
.tm-parallax {
position: relative;
background-attachment: fixed;
background-position: 50% 0;
background-color: #eee;
}
/** Modal **/
#lean_overlay {
position: fixed;
z-index:999;
top: 0;
left: 0;
height:100%;
width:100%;
background: @black;
display: none;
}
#loginmodal {
width: 300px;
padding: 30px;
background: @white;
#loginform {
p {
label {
margin-bottom: 5px;
}
input {
width: 100%;
}
&.submit {
.tm-btn {
margin: 0;
width: auto;
}
}
}
}
}
/** Custom Search Google **/
#tm-page-body {
.cse .gsc-control-cse, .gsc-control-cse {
padding: 20px;
}
.gsc-input-box {
height: auto;
}
.gsib_a {
padding: 10px;
}
.gsst_a {
padding: 8px 10px 0 10px;
}
.gsc-search-box .gsc-input > input:focus, .gsc-input-box-focus {
.box-shadow(none);
border-color: @scheme;
}
.gsc-search-button {
input.gsc-search-button {
box-sizing:content-box;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
background: @scheme;
vertical-align: middle;
padding: 16px 33px;
margin: 0;
}
}
.gsc-selected-option-container {
width: auto !important;
}
.gsc-control-cse .gsc-option-selector {
background: url("assets/img/caret.png") no-repeat;
margin-top: 0;
}
.gsc-result .gs-title {
height: auto;
}
.gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top {
padding: 0;
}
.gs-result .gs-title, .gs-result .gs-title *,
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: @blue;
text-decoration: none;
}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
border-bottom: 1px solid lighten(@grey, 10%);
padding: 20px 0;
}
.gsc-results .gsc-cursor-box {
margin: 20px 0 0 0;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
background: @grey;
width: 32px;
height: 32px;
display: inline-block;
color: @black;
font-size: 12px;
text-align: center;
line-height: 32px;
.rounded;
cursor: pointer;
}
.gsc-results {
width: 100%;
}
.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {
margin: 0;
padding: 20px;
border:none;
color: @white;
background: @red;
}
.gs-result img.gs-image, .gs-result img.gs-promotion-image {
padding: 3px;
}
}