mirror of
https://github.com/openvk/openvk
synced 2025-07-01 21:48:17 +03:00
update(openvk_modern): expand & actualize stylesheet, add minor fixes (#1341)
* сайдбар больше не становится прозрачным и не прячется за странными
элементами когда ему не хватает места
* новые стили для всплывающего окна лайкнувших
* новые стили для кнопки поиска в шапке
* чуть меньше бордеров на разных элементах
* beautified ™️
This commit is contained in:
Mikita Wiśniewski
GitHub
parent
27fb923178
commit
4f126d1b05
1 changed files with 378 additions and 321 deletions
|
|
@ -1,321 +1,378 @@
|
||||||
body {
|
body {
|
||||||
background: url("/themepack/openvk_modern/0.0.1.0/resource/1.png") repeat-x fixed;
|
background: url("/themepack/openvk_modern/0.0.1.0/resource/1.png") repeat-x
|
||||||
}
|
fixed;
|
||||||
|
}
|
||||||
.page_header {
|
|
||||||
position: fixed;
|
.page_header {
|
||||||
height: 42px;
|
position: fixed;
|
||||||
background: #3C3C3C;
|
height: 42px;
|
||||||
z-index: 199;
|
background: #3c3c3c;
|
||||||
}
|
z-index: 199;
|
||||||
|
}
|
||||||
.home_button {
|
|
||||||
background: #3C3C3C url("/themepack/openvk_modern/0.0.1.0/resource/2.png") no-repeat;
|
.home_button {
|
||||||
background-size: 80%;
|
background: #3c3c3c url("/themepack/openvk_modern/0.0.1.0/resource/2.png")
|
||||||
background-position-y: 0px;
|
no-repeat;
|
||||||
background-position-x: 1px;
|
background-size: 80%;
|
||||||
}
|
background-position-y: 0px;
|
||||||
|
background-position-x: 1px;
|
||||||
.home_button_custom {
|
}
|
||||||
background: #3C3C3C url("/themepack/openvk_modern/0.0.1.0/resource/4.png") no-repeat;
|
|
||||||
background-size: 80%;
|
.home_button_custom {
|
||||||
background-position-y: 0px;
|
background: #3c3c3c url("/themepack/openvk_modern/0.0.1.0/resource/4.png")
|
||||||
background-position-x: 1px;
|
no-repeat;
|
||||||
text-shadow: none;
|
background-size: 80%;
|
||||||
}
|
background-position-y: 0px;
|
||||||
|
background-position-x: 1px;
|
||||||
.header_navigation .link, .header_navigation .header_divider_stick {
|
width: 145px !important;
|
||||||
background: unset !important;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_navigation .link a:hover {
|
.header_navigation .link,
|
||||||
text-decoration: none;
|
.header_navigation .header_divider_stick {
|
||||||
}
|
background: unset !important;
|
||||||
|
}
|
||||||
.sidebar {
|
|
||||||
margin-top: 47px;
|
.header_navigation .link a:hover {
|
||||||
position: fixed;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_body {
|
.header_navigation #search_box .search_box_button {
|
||||||
margin-top: 42px;
|
border: solid 1px #606060;
|
||||||
}
|
box-shadow: unset;
|
||||||
|
}
|
||||||
.toTop {
|
|
||||||
margin-top: 42px;
|
.header_navigation #search_box .search_box_button:active {
|
||||||
}
|
background-color: #606060;
|
||||||
|
box-shadow: unset;
|
||||||
.content_title_expanded {
|
}
|
||||||
cursor: pointer;
|
|
||||||
background-image: unset !important;
|
.sidebar {
|
||||||
padding: 3px 10px;
|
margin-top: 47px;
|
||||||
border-top: #e6e6e6 solid 1px;
|
position: fixed;
|
||||||
}
|
background-color: #fff;
|
||||||
|
z-index: 199;
|
||||||
.content_title_unexpanded {
|
}
|
||||||
background-image: unset !important;
|
|
||||||
padding: 3px 10px;
|
.page_body {
|
||||||
border-top: #eee solid 1px;
|
margin-top: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content_subtitle {
|
.toTop {
|
||||||
border-top: #F0F0F0 solid 1px;
|
margin-top: 42px;
|
||||||
border-bottom: 1px solid #F0F0F0;
|
}
|
||||||
}
|
|
||||||
|
.content_title_expanded {
|
||||||
.user-alert {
|
cursor: pointer;
|
||||||
border: 1px solid #f3ddbd;
|
background-image: unset !important;
|
||||||
}
|
padding: 3px 10px;
|
||||||
|
border-top: #e6e6e6 solid 1px;
|
||||||
.msg {
|
}
|
||||||
border: 1pt solid #e6f2f3;
|
|
||||||
}
|
.content_title_unexpanded {
|
||||||
|
background-image: unset !important;
|
||||||
.msg.msg_succ {
|
padding: 3px 10px;
|
||||||
border-color: #ddf3d7;
|
border-top: #eee solid 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg.msg_err {
|
.content_subtitle {
|
||||||
border-color: #f5e9ec;
|
border-top: #f0f0f0 solid 1px;
|
||||||
}
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
.navigation .link:hover {
|
|
||||||
border-top: 1px solid #E4E4E4;
|
.user-alert {
|
||||||
}
|
border: 1px solid #f3ddbd;
|
||||||
|
}
|
||||||
#profile_link, .profile_link {
|
|
||||||
border-bottom: 1px solid transparent;
|
.msg {
|
||||||
}
|
border: 1pt solid #e6f2f3;
|
||||||
|
}
|
||||||
.completeness-gauge-gold {
|
|
||||||
border: 1px solid #f6ebbb;
|
.msg.msg_succ {
|
||||||
}
|
border-color: #ddf3d7;
|
||||||
|
}
|
||||||
.post-author {
|
|
||||||
border-top: #fff solid 1px;
|
.msg.msg_err {
|
||||||
border-bottom: #fff solid 1px;
|
border-color: #f5e9ec;
|
||||||
background-color: #fff;
|
}
|
||||||
padding: 0px 5px 3px;
|
|
||||||
}
|
.navigation .link:hover {
|
||||||
|
border-top: 1px solid #e4e4e4;
|
||||||
.post-author .date {
|
}
|
||||||
color: gray;
|
|
||||||
}
|
#profile_link,
|
||||||
|
.profile_link {
|
||||||
.page_yellowheader {
|
border-bottom: 1px solid transparent;
|
||||||
background: #E2E2E2;
|
}
|
||||||
border-right: solid 1px #E2E2E2;
|
|
||||||
border-left: solid 1px #E2E2E2;
|
.completeness-gauge {
|
||||||
border-bottom: solid 1px #E2E2E2;
|
width: 100%;
|
||||||
}
|
border: unset;
|
||||||
|
border-top: unset;
|
||||||
.page_yellowheader span {
|
}
|
||||||
color: #BBBBBB;
|
|
||||||
}
|
.post-author {
|
||||||
|
border-top: #fff solid 1px;
|
||||||
.page_yellowheader a {
|
border-bottom: #fff solid 1px;
|
||||||
color: #5C5C5C;
|
background-color: #fff;
|
||||||
}
|
padding: 0px 5px 3px;
|
||||||
|
}
|
||||||
.page-wrap {
|
|
||||||
border-bottom: solid 1px #fff;
|
.post-author .date {
|
||||||
border-left: solid 1px #fff;
|
color: gray;
|
||||||
border-right: solid 1px #fff;
|
}
|
||||||
}
|
|
||||||
|
.page_yellowheader {
|
||||||
.page_wrap {
|
background: #e2e2e2;
|
||||||
border-bottom: solid 1px #fff;
|
border-right: solid 1px #e2e2e2;
|
||||||
border-left: solid 1px #fff;
|
border-left: solid 1px #e2e2e2;
|
||||||
border-right: solid 1px #fff;
|
border-bottom: solid 1px #e2e2e2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrapHI {
|
.page_yellowheader span {
|
||||||
border-right: solid 1px #E2E2E2;
|
color: #bbbbbb;
|
||||||
border-left: solid 1px #E2E2E2;
|
}
|
||||||
}
|
|
||||||
|
.page_yellowheader a {
|
||||||
.left_small_block {
|
color: #5c5c5c;
|
||||||
border-right: 1px #fff solid;
|
}
|
||||||
}
|
|
||||||
|
.page-wrap {
|
||||||
.menu_divider {
|
border-bottom: solid 1px #fff;
|
||||||
background: #E5E5E5;
|
border-left: solid 1px #fff;
|
||||||
}
|
border-right: solid 1px #fff;
|
||||||
|
}
|
||||||
.postFeedWrapper {
|
|
||||||
border-bottom: 1px solid rgb(240,240,240);
|
.page_wrap {
|
||||||
}
|
border-bottom: solid 1px #fff;
|
||||||
|
border-left: solid 1px #fff;
|
||||||
.container_gray {
|
border-right: solid 1px #fff;
|
||||||
border-top: #EBEBEB solid 1px;
|
}
|
||||||
}
|
|
||||||
|
#wrapHI {
|
||||||
.container_gray .content {
|
border-right: solid 1px #e2e2e2;
|
||||||
border: #E5E5E5 solid 1px;
|
border-left: solid 1px #e2e2e2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accent-box {
|
.left_small_block {
|
||||||
border: 1px solid white;
|
border-right: 1px #fff solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], input[type="password"], input[type~="text"],
|
.menu_divider {
|
||||||
input[type~="password"], input[type="email"], input[type="phone"],
|
background: #e5e5e5;
|
||||||
input[type~="email"], input[type~="phone"], input[type="date"],
|
}
|
||||||
input[type~="date"], input[type="search"], input[type~="search"],
|
|
||||||
textarea, select {
|
.postFeedWrapper {
|
||||||
border: 1px solid #E5E5E5;
|
border-bottom: 1px solid rgb(240, 240, 240);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
.container_gray {
|
||||||
background-image: url("/themepack/openvk_modern/0.0.1.0/resource/6.png")
|
border-top: #ebebeb solid 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
.container_gray .content {
|
||||||
list-style: none;
|
border: #e5e5e5 solid 1px;
|
||||||
list-style-type: disc;
|
}
|
||||||
}
|
|
||||||
|
.accent-box {
|
||||||
.mb_tab#active div {
|
border: 1px solid white;
|
||||||
border: 2px solid #898989;
|
}
|
||||||
}
|
|
||||||
|
input[type="text"],
|
||||||
.summaryBar {
|
input[type="password"],
|
||||||
border-bottom: #fff solid 1px;
|
input[type~="text"],
|
||||||
}
|
input[type~="password"],
|
||||||
|
input[type="email"],
|
||||||
.page_footer .link:hover {
|
input[type="phone"],
|
||||||
border-top: 0px;
|
input[type~="email"],
|
||||||
}
|
input[type~="phone"],
|
||||||
|
input[type="date"],
|
||||||
.ovk-video > .preview {
|
input[type~="date"],
|
||||||
border: #fff;
|
input[type="search"],
|
||||||
}
|
input[type~="search"],
|
||||||
|
textarea,
|
||||||
.crp-list {
|
select {
|
||||||
border-top: 1px solid #fff;
|
border: 1px solid #e5e5e5;
|
||||||
width: 629px;
|
}
|
||||||
}
|
|
||||||
|
input[type="checkbox"] {
|
||||||
.crp-entry:first-of-type {
|
background-image: url("/themepack/openvk_modern/0.0.1.0/resource/6.png");
|
||||||
border-color: #E5E5E5;
|
}
|
||||||
}
|
|
||||||
|
ul {
|
||||||
.crp-entry {
|
list-style: none;
|
||||||
width: 593px;
|
list-style-type: disc;
|
||||||
border-color: #E5E5E5;
|
}
|
||||||
}
|
|
||||||
|
.like_tooltip_wrapper .like_tooltip_head {
|
||||||
#faqhead {
|
background: #515151;
|
||||||
border: 1px solid #FBF3C3;
|
box-shadow: unset;
|
||||||
}
|
border: solid 1px #515151;
|
||||||
|
}
|
||||||
#faqcontent {
|
|
||||||
border: 1px solid #FAFAFA;
|
.like_tooltip_wrapper .like_tooltip_body {
|
||||||
}
|
border: 1px solid #515151;
|
||||||
|
}
|
||||||
.ovk-diag {
|
|
||||||
border: none;
|
.mb_tab#active div {
|
||||||
border-radius: 2px;
|
border: 2px solid #898989;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ovk-diag-cont {
|
.summaryBar {
|
||||||
border-radius: 2px;
|
border-bottom: #fff solid 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ovk-diag-head {
|
.page_footer .link:hover {
|
||||||
border-bottom: 1px solid #757575;
|
border-top: 0px;
|
||||||
border-top-left-radius: 2px;
|
}
|
||||||
border-top-right-radius: 2px;
|
|
||||||
}
|
.ovk-video > .preview {
|
||||||
|
border: #fff;
|
||||||
.ovk-diag-action {
|
}
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
border-bottom-right-radius: 2px;
|
.crp-list {
|
||||||
}
|
border-top: 1px solid #fff;
|
||||||
|
width: 629px;
|
||||||
#votesBalance {
|
}
|
||||||
border-bottom: none;
|
|
||||||
}
|
.crp-entry:first-of-type {
|
||||||
|
border-color: #e5e5e5;
|
||||||
.floating_sidebar,.floating_sidebar.show {
|
}
|
||||||
display:none
|
|
||||||
}
|
.crp-entry {
|
||||||
|
width: 593px;
|
||||||
#backdrop:before {
|
border-color: #e5e5e5;
|
||||||
content:"";
|
}
|
||||||
display:block;
|
|
||||||
position:fixed;
|
#faqhead {
|
||||||
top:0;
|
border: 1px solid #fbf3c3;
|
||||||
left:0;
|
}
|
||||||
height:42px;
|
|
||||||
width:100%;
|
#faqcontent {
|
||||||
background-color:#3c3c3c
|
border: 1px solid #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search_box_button {
|
.ovk-diag {
|
||||||
box-shadow: none;
|
border: none;
|
||||||
}
|
border-radius: 2px;
|
||||||
|
}
|
||||||
.search_box_button:active {
|
|
||||||
box-shadow: none;
|
.ovk-diag-cont {
|
||||||
}
|
border-radius: 2px;
|
||||||
|
}
|
||||||
.verticalGrayTabs #used {
|
|
||||||
background: #3c3c3c !important;
|
.ovk-diag-head {
|
||||||
border: 1px solid #3c3c3c;
|
border-bottom: 1px solid #757575;
|
||||||
}
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
.verticalGrayTabs #used a {
|
}
|
||||||
color: white;
|
|
||||||
}
|
.ovk-diag-action {
|
||||||
|
border-bottom-left-radius: 2px;
|
||||||
.search_option_name {
|
border-bottom-right-radius: 2px;
|
||||||
background-color: #a4a4a4;
|
}
|
||||||
border-bottom: unset;
|
|
||||||
}
|
#votesBalance,
|
||||||
|
#news {
|
||||||
.verticalGrayTabsWrapper {
|
border-bottom: unset;
|
||||||
border-top: unset;
|
}
|
||||||
}
|
|
||||||
|
.floating_sidebar,
|
||||||
.sugglist {
|
.floating_sidebar.show {
|
||||||
border-top: unset;
|
display: none;
|
||||||
border-bottom: 1px solid gray;
|
}
|
||||||
}
|
|
||||||
|
#backdrop:before {
|
||||||
.musicIcon {
|
content: "";
|
||||||
filter: contrast(200%) !important;
|
display: block;
|
||||||
}
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
.audioEntry .playerButton .playIcon {
|
left: 0;
|
||||||
filter: contrast(2) !important;
|
height: 42px;
|
||||||
}
|
width: 100%;
|
||||||
|
background-color: #3c3c3c;
|
||||||
.audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
|
}
|
||||||
border-top: #404040 1px solid !important;
|
|
||||||
}
|
.search_box_button {
|
||||||
|
box-shadow: none;
|
||||||
.bigPlayer .paddingLayer .slider, .audioEmbed .track .slider {
|
}
|
||||||
background: #3c3c3c !important;
|
|
||||||
}
|
.search_box_button:active {
|
||||||
|
box-shadow: none;
|
||||||
.audioEntry.nowPlaying {
|
}
|
||||||
background: #4b4b4b !important;
|
|
||||||
}
|
.verticalGrayTabs #used {
|
||||||
|
background: #3c3c3c !important;
|
||||||
.audioEntry.nowPlaying:hover {
|
border: 1px solid #3c3c3c;
|
||||||
background: #373737 !important;
|
}
|
||||||
}
|
|
||||||
|
.verticalGrayTabs #used a {
|
||||||
.musicIcon.pressed {
|
color: white;
|
||||||
filter: brightness(150%) !important;
|
}
|
||||||
}
|
|
||||||
|
.search_option_name {
|
||||||
.musicIcon.lagged {
|
background-color: #a4a4a4;
|
||||||
opacity: 50%;
|
border-bottom: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bigPlayer {
|
.verticalGrayTabsWrapper {
|
||||||
position: sticky;
|
border-top: unset;
|
||||||
top: 42px;
|
border-left: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sugglist {
|
||||||
|
border-top: unset;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.musicIcon {
|
||||||
|
filter: contrast(200%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audioEntry .playerButton .playIcon {
|
||||||
|
filter: contrast(2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audioEmbed .track > .selectableTrack,
|
||||||
|
.bigPlayer .selectableTrack {
|
||||||
|
border-top: #404040 1px solid !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigPlayer .paddingLayer .slider,
|
||||||
|
.audioEmbed .track .slider {
|
||||||
|
background: #3c3c3c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audioEntry.nowPlaying {
|
||||||
|
background: #4b4b4b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audioEntry.nowPlaying:hover {
|
||||||
|
background: #373737 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.musicIcon.pressed {
|
||||||
|
filter: brightness(150%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.musicIcon.lagged {
|
||||||
|
opacity: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigPlayer {
|
||||||
|
position: sticky;
|
||||||
|
top: 42px;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#audio_upload {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wallAttachmentMenu {
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#backdropEditor {
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue