@charset "UTF-8"; @main_color: #bb0303; @second_color: #669999; @third_color: #FF9900; @import (less) "../config.txt"; @grey: #333; @white: #FFF; @black: #000; //public start html { font-size: 62.5%; } body { background-image: url("../images/div_background_syty_logo.png"); font-family: Microsoft YaHei; font-size: 1.4rem; color: @black; h3{ //Column title line-height: 40px; } a { color: @grey; &:focus,&:hover { color: @main_color; text-decoration: none; } } ul{ li{ list-style: none; } } .table th, .table td { vertical-align: middle!important; } .breadcrumb { background-color: transparent; padding: 10px 0 0; margin-bottom: 0; >li { &+li { &:before { content: "›"; padding: 0 5px; } } >a { color: lighten(@grey,40%); } } } .guide { position: fixed; right: 0; bottom: 0; } .summary{ color: lighten(@grey,40%); overflow: hidden; } .date { font-size: 1.2rem; line-height: 30px; color: lighten(@grey,50%); } .more { float: right; font-size: 1.4rem; line-height: 40px; a { color: lighten(@grey,50%); &:hover{ color: fade(@main_color,80%); } } } video{ display: block; } } #pager{ .pager_btn{ display: inline-block; padding: 6px 12px; margin: 3px; border: thin solid #ddd; } text-align: center; margin: 30px 0; input{ .pager_btn; width: 40px; } .p_fun_d,.p_no_d,.p_dot{ .pager_btn; cursor: not-allowed; } .p_no_d{ color: @white; background-color: @main_color; } .p_fun,.p_no,.p_goto{ >a{ .pager_btn; &:hover{ background-color: @main_color; color: @white; } } } } //public end //footer start footer { color: lighten(@grey,70%); background: url("../images/footer.jpg") no-repeat; background-size: cover; bottom: 0; margin-bottom: 0; text-align: center; .subfooter{ padding: 30px 0 10px; background-color: fade(darken(@main_color,5%),86%); .logo { padding: 30px 60px; } ul{ padding: 10px 0; line-height: 230%; overflow: hidden; li { float: left; } >li { >a { color: @white; &:hover{ text-decoration: underline; } } } } } .footer{ background: fade(@black,86%); padding: 10px; } } .footer_nav{ background-color: lighten(@grey,76); padding: 30px 0 30px; h4{ font-weight: bold; &::before { content: ""; position: absolute; top: 0; display: block; width: 10%; height: 2px; background: fade(@main_color,80%); transition: all .3s; } } ul{ padding-left: 0; li{ float: left; a{ display: block; padding: 10px 30px 10px 0; } } } } //footer end //menu start #menu { position: absolute; top: 20px; .container { padding: 0; } } .navbar-fixed-top .navbar-collapse { max-height: 500px; } #logo { padding: 0; height: 100px; background-color: fade(@main_color,80%); } #nav { padding: 0; } #mainnav,#subnav { margin: 0; } #subnav { background-color: fade(@second_color,70%); } .navbar { border-radius: 0; border: none; min-height: 40px; } #snav { width: 100%; >li { >a { padding-top: 10px; padding-bottom: 10px; font-size: 12px; } } } #mnav { >li { >a { padding-top: 20px; padding-bottom: 20px; } } } .navbar-default { background-color: fade(@main_color,70%); .navbar-nav { >.open { >a { color: @white; background-color: fade(@main_color,50%); &:focus { color: @white; background-color: fade(@main_color,50%); } &:hover { color: @white; background-color: fade(@main_color,50%); } } } >li { >a { color: @white; &:hover { color: @white; background-color: fade(@main_color,50%); } &:focus { color: @white; background-color: fade(@main_color,50%); } } } } .navbar-brand { padding: 0; color: @white; &:hover { color: @white; } &:focus { color: @white; } } .navbar-toggle { &:hover { background-color: fade(@main_color,80%); } &:focus { background-color: fade(@main_color,80%); } border: none; .icon-bar { background-color: @white; } } } .dropdown-menu { padding: 0; background-color: fade(@main_color,70%); border: 1px solid fade(@main_color,80%); .divider { float: none; border: none; margin: 0; background-color: fade(@main_color,30%); } >li { float: none; padding: 0; >a { line-height: 40px; color: @white; &:hover { color: @white; background-color: fade(@main_color,50%); } &:focus { color: @white; background-color: fade(@main_color,50%); } } } } #scrollspy{ z-index: 999; padding: 0 0 0 15px; &.left-15{ margin: 30px 0 0 -15px; } &.right-15{ margin: 30px -15px 0 0; } border-left: 2px solid fade(@second_color,30%); h4{ color: fade(@main_color,90%); } &.affix{ top: 0; } li{ a{ margin: 0 0 0 -23px; padding: 8px 0; border-radius: 0; color: darken(@second_color,8%); &:hover{ color: fade(@main_color,90%); background: none; span{ color: fade(@main_color,90%); } } span{ margin-right: 10px; color: fade(@second_color,30%); } } &.active a, &.active a:hover{ color: fade(@main_color,90%); span{ color: fade(@main_color,90%); } } } } #colnav { margin: -50px -15px 0 -15px; width: 270px; background-color: fade(@main_color,70%); .navbar-header { float: none; a { font-size: 2.4rem; line-height: 50px; padding-left: 30px; } } .navbar-nav { >li { >a { &:hover { color: @third_color; border-left: 5px solid rgba(255,153,0,1); } &:focus { color: @third_color; border-left: 5px solid rgba(255,153,0,1); } color: @grey; font-size: 1.5rem; background-color: @white; border-bottom: 1px dashed #E1E1E1; } >a.active { border-left: 5px solid rgba(255,153,0,1); } } } } #cnav { padding: 0 0 0 15px; float: none; >li { float: none; } } //menu end //public function start .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .gallery-item(@color: @white, @height: 333px){ margin-bottom: 10px; min-height: @height; background: @color; .thumbnail { background: no-repeat; border: 0; border-radius: none; padding: 0; } .caption{ padding: 0 15px 10px; h4{ a{ display: block; width: 100%; } } } } .news_bottom_line{ border-bottom: 1px solid #ddd; } .h6_icon{ h6{ color: lighten(@grey,40%); span{ padding: 0 6px; &.glyphicon-time{ color: @main_color; } //+span{ // margin-left: 20px; //} } } } //public function end //slide show start .slide-content { padding: 0 20px 20px; background-color: fade(@second_color,26%); &:hover { background-color: fade(@main_color,60%); } a { color: @white; &:hover{ color: @white; } h3{ line-height: normal; } } } #newsCarousel{ .thumbnail { background: no-repeat; border: 0; border-radius: none; padding: 0; margin-bottom: 14px; } .carousel-indicators { bottom: 0; li { width: 6px; height: 6px; background-color: fade(@grey,20%); border: 1px solid fade(@grey,20%); } .active { width: 8px; height: 8px; background-color: fade(@grey,50%); } } .carousel-inner{ .caption{ min-height: 100px; padding-bottom: 16px; .news_bottom_line; } } .carousel-control{ background-image: none; } } #myCarousel1{ margin-top: 20px; .thumbnails { padding: 0; margin: 0 -15px; min-height: 1px; overflow: hidden; .special-item{ .gallery-item(@white); } } .carousel-control{ background-image: none; } } #myCarousel2,#myCarousel3,#myCarousel4{ .item{ .gallery-item(lighten(@grey,76)); } } #myCarousel2{ .thumbnail{ position:relative; >span{ position: absolute; left: 15px; bottom: 15px; } } } #myCarousel3{ .thumbnail{ position:relative; >span{ position: absolute; top: 50%; left: 50%; margin: -3.3rem 0 0 -3.3rem; padding: 6px; font-size: 6rem; color: fade(@white,50%); background-color: fade(@grey,60%); &:hover{ color: fade(@white,60%); } } } } //slide show end //list page start .list{ h3{ margin-top: 0; } .media{ .news_bottom_line; padding-bottom: 15px; .media-body{ .h6_icon; } } } .list_pic{ .list; .media-left{ padding-right: 15px; width: 30%; img{ width: 100%; } } } .list_date{ .list; .square_time { float: left; display: inline-block; padding: 7px; margin-right: 8px; color: fade(@main_color,70%); min-height: 35px; .d{ font-size: 3.4rem; font-weight: bold; display: block; text-align: center; } .ym{ white-space:nowrap; display: block; text-align: center;; float: left; } } } .list_gallery{ h3{ margin-top: 0; } >ul{ overflow: hidden; padding: 15px 0; margin: 0 -15px; .item{ .gallery-item(lighten(@grey,76),260px); .h6_icon; } } } .gallery{ >div{ overflow: hidden; padding: 15px 0; margin: 0 -15px; font-size: 0;-webkit-text-size-adjust:none; >div{ float: none; display: inline-block; vertical-align: top; font-size: 1.4rem; .item{ .thumbnail{ margin-bottom: 10px; } .gallery-item(lighten(@grey,76),180px); } } } } .increase_height{ margin-top: 30px; } .increase_height4{ margin-top: 40px; } //list page end //news page start .post_title { margin-top: 14px; font-size: 2.5rem; font-weight: bold; line-height: 3.6rem; } article{ padding: 0!important; margin: 20px 0 40px; font-size: 1.6rem; line-height: 30px; p{ padding: 8px 0; img{ max-width:100%; height:auto; } } a{ color: darken(@second_color,8%); } } hr.col_list_hr{ margin-bottom: 0; } a.item_block{ display: block; overflow: hidden; .square_time { float: left; display: inline-block; padding: 7px; margin-right: 8px; background-color: fade(@main_color,70%); color: #FFF; min-height: 35px; &:hover{ background-color: fade(@main_color,50%); color: #FFF; } .d{ font-size: 2.4rem; display: block; text-align: center; } .ym{ display: block; text-align: center; float: left; } } .hits{ float: none; display: block; width: 100%; padding-top: 10px; font-size: 1.2rem; color: lighten(@grey,40%); span{ padding: 0 6px; } } } //news page end //search start .modal-open { overflow-y: scroll; padding-right: 0 !important; } #mySearch{ .modal-content{ margin-top: 120px; background-color: fade(@second_color,55%); h4{ font-weight: bold; } .modal-header { border-bottom: none; } .modal-footer { background-color: fade(@grey,55%); border-top: 1px solid fade(@second_color,55%); } input[type="text"],select { color: @white; background-color: fade(@grey,77%); border-color: fade(@second_color,66%); } .btn-success{ background-color: fade(@grey,77%); border-color: fade(@grey,70%); &:hover{ background-color: fade(@grey,66%); } } .btn-danger{ background-color: fade(@main_color,44%); border-color: fade(@main_color,33%); &:hover{ background-color: fade(@main_color,55%); } } } } .defmodal{ .modal-content{ margin-top: 80px; padding: 0 15px; border-radius: 0; background-color: fade(@white,94%); border: thin solid fade(@main_color,94%); h4{ font-weight: bold; } .close{ color: @main_color; } .modal-header { border-bottom: none; } .media{ margin-bottom: 15px; } .btn-danger{ background-color: fade(@main_color,44%); border-color: fade(@main_color,33%); &:hover{ background-color: fade(@main_color,55%); } } } } //search end //other start hr.title-line { margin: 0 auto; border: 0; border-bottom: thin solid @main_color; } .special{ min-height: 10px; padding: 20px 0 50px; background: url("../images/special-bg.jpg") repeat-y; h3{ color: @white; small{ color: @white; } .more{ float: none; a{ color: @white; &:hover{ color: fade(@main_color,80%); } } } } } .xxxw_l{ padding: 24px 15px 0 0; } .xxxw_r{ padding-right: 0; } .mtst{ .media{ min-height: 121px; &:first-child { margin-top: 15px; } .news_bottom_line; .media-left{ padding-right: 15px; width: 40%; img{ width: 100%; } } } } .list-group-item { padding: 13px 0; min-height: 103px; border-left: none; border-right: none; &:first-child { border-top: none; } &:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .h6_icon; } .link{ padding: 30px 0; ul{ padding-left: 5px; li{ float: left; margin: 10px; background-color: lighten(@grey,76%); a{ display: block; padding: 10px 15px; } &:hover{ background-color: fade(@main_color,80%); a{ color: @white; } } &:last-child{ background-color: fade(@main_color,86%); a{ color: @white; } &:hover{ background-color: fade(@main_color,66%); } } } } } .airscape{ .defmodal; .modal-content{ .modal-header { border-bottom: 1px solid #e5e5e5; } } width: 98%; img{ max-width: 100%; } } .airscape_btn{ background-color: fade(@main_color,44%); border-color: fade(@main_color,33%); &:hover{ background-color: fade(@main_color,55%); } } //other end @media (min-width: 992px) { #lightgallery { column-count: 3; column-gap: 0; .col-md-4 { width:100%; break-inside: avoid; box-sizing: border-box; } } } @media screen and (max-width: 768px) { html { font-size: 68.8%; } //menu start body { margin-top: 50px; } #menu{ position: fixed; top: 0; } footer{ span{ display: block; width: 100%; } } #subnav { min-height: 0; } .navbar-default { background-color: fade(@main_color,88%); .sbutton { .icon-bar { background-color: fade(@white,30%); } &:hover { background-color: fade(@second_color,20%); } &:focus { background-color: fade(@second_color,30%); } } .navbar-nav { margin-right: 0; .open { .dropdown-menu { >li { background-color: fade(@main_color,70%); >a { &:hover { color: @white; background-color: lighten(@main_color,30%); } color: @white; } } } } } .navbar-collapse { border-color: fade(@main_color,70%); } .navbar-form { border-color: fade(@main_color,70%); } } .sbutton { margin-right: 5px; } .navbar { li { float: none; } } .navbar-nav { .open { .dropdown-menu { >li { >a { line-height: 30px; background-color: fade(@main_color,30%); &:focus { color: @white; background-color: fade(@main_color,70%); } } } } } } #colnav { margin: -40px 0 0 0; width: 180px; background-color: fade(@main_color,30%); .navbar-brand { height: 40px; } .navbar-toggle { margin: 4px 5px 4px 0; } .navbar-header { a { font-size: 2rem; line-height: 40px; padding-left: 30px; } } } #cnav { margin: 0; } //menu end //slide show start .slide-content { padding: 10px; h3 { margin: 0; font-size: 1.4rem; } } #newsCarousel{ .caption{ min-height: 160px; } } //slide show end //other start #scrollspy{ border-left: 1px solid fade(@second_color,30%); &.affix{ position: static; } li{ a{ margin: 0 0 0 -23px; } } } .defmodal{ .media-left{ float: left; } .media-body{ display: inline; } } .list_pic{ .media-left{ padding-right: 15px; width: 36%; } } .xxxw_l{ padding: 15px 0 0; } .xxxw_r{ padding: 0; } //other end } " class="hidden">流行钢琴网社区