diff --git a/assets/achievements.sass b/assets/achievements.sass deleted file mode 100644 index c85fcf0..0000000 --- a/assets/achievements.sass +++ /dev/null @@ -1,126 +0,0 @@ -// Ачивки -.p-achievements-index .cc-achievements - display: flex - flex-wrap: wrap - align-items: stretch - align-content: stretch - -@media (min-width: 768px) - .p-achievements-index .cc-achievements .b-achievement:nth-child(n) - width: calc(25% - (16px * 3 / 4)) - margin-right: 16px - margin-bottom: 16px - - .p-achievements-index .cc-achievements .b-achievement:nth-child(4n+4) - margin-right: 0 - - .p-achievements-index .cc-franchises-genres .c-genres .b-achievement:nth-child(n) - margin-right: 16px - margin-bottom: 16px - - .p-achievements-index .cc-franchises-genres .c-genres .b-achievement:nth-child(4n+4) - margin-right: 0 - - .p-achievements-index .cc-franchises-genres .c-genres, - .p-achievements-index .cc-franchises-genres .c-franchises - width: 100% - -.p-achievements-index .tipsy - display: none !important - -.p-achievements-index .c-franchises .b-badge - position: relative - background: rgba(0,0,0, .4) - border-radius: 3px - overflow: hidden - -.p-achievements-index .c-franchises .b-badge, -.p-achievements-index .c-franchises .b-badge img - transition: .24s ease - -.b-badge .no-image, -.p-achievements-index .c-franchises .b-badge img - border-radius: inherit - -.p-achievements-index .c-franchises .b-badge::after, -.p-achievements-index .c-franchises .b-badge::before - display: block - position: absolute - top: auto - right: 0 - bottom: 0 - left: 0 - width: auto - height: auto - padding: 12px 12px 6px - border-radius: 0 0 3px 3px - color: #fff - font-size: 14px - font-weight: bold - line-height: 20px - text-shadow: 0 0 1px black, 0 1px 5px rgba(0,0,0,.32) - backface-visibility: hidden - transition: .24s ease - opacity: 1 - z-index: 1 - -.p-achievements-index .c-franchises .b-badge:hover::after, -.p-achievements-index .c-franchises .b-badge:hover::before - transform: translate3d(0, 100%, 0) - -.p-achievements-index .c-franchises .b-badge[original-title]::before - content: attr(original-title) - -.p-achievements-index .c-franchises .b-badge[title]::before - content: attr(title) - -.p-achievements-index .c-franchises .b-badge::before - padding-right: 48px - background: linear-gradient(transparent, rgba(0,0,0,.32)) - text-align: left - -.p-achievements-index .c-franchises .b-badge::after - content: attr(data-progress) '%' - background: none - text-align: right - -// .p-achievements-index .c-franchises .b-badge[data-progress='100']::after -// content: '★' -// font-size: 24px -// line-height: 1 -// color: #ffcf22 -// display: flex -// align-items: flex-start -// top: 0 -// justify-content: flex-end -// box-shadow: 0 0 0 2px #ffcf22 inset -// border-radius: inherit - -// no-image -.p-achievements-index .c-franchises .b-badge .no-image - transition: .24s ease - -.p-achievements-index .c-franchises .b-badge.level-0.unavailable:not(:hover) .no-image - opacity: 0.2 - -.p-achievements-index .c-franchises .b-badge.level-0:not(:hover) .no-image, -.p-achievements-index .c-franchises .b-badge.unavailable:not(:hover) .no-image - opacity: 0.5 - -// всплывашка -.p-achievements-index .b-list_switchers .switcher - @extend %md-tooltip - @extend %md-tooltip-top - - &[title]::after - content: attr(title) - - &[original-title]::after - content: attr(original-title) - -// Фикс вылезающих за пределы страницы тултипов -@media screen and (max-width: 767px) - .p-achievements-index .cc-franchises-genres .c-franchises - padding: 0 16px - margin: 0 -16px - overflow: hidden diff --git a/assets/b-buttons.sass b/assets/b-buttons.sass deleted file mode 100644 index 568a3ce..0000000 --- a/assets/b-buttons.sass +++ /dev/null @@ -1,73 +0,0 @@ -.b-button - @extend %md-button-flat - -a.b-button - color: $color-primary - - -.b-form input[type=submit] - @extend %md-button-raised - - &[disabled], - &.disabled - background-color: $color-button-hover - box-shadow: none - color: $color-text-disabled !important - -.b-form .cancel - @extend %md-button-flat - - &:hover - text-decoration: none - -// Кнопка "Отмена" в редактировании аниме в своём списке -.buttons > div, -// buttons (25px for <1024px & 15px for >1025px) -.buttons a:not(.b-button) - line-height: 1.5rem !important - - -.b-button + .b-js-link - @extend %md-button-flat - - -// Кнопка отмена (Клуб > Настройки > Страницы) -.b-button + .cancel - @extend %md-button-flat - - -// .b-shiki_editor footer .unpreview -// .b-shiki_editor.previewed footer .unpreview -.b-shiki_editor footer .unpreview:not(.link) - @extend %md-button-flat - font-size: 0 - - &::after - content: 'Редактировать' - vertical-align: top - font-size: .875rem - - [data-locale=en] &::after - content: 'Edit' - -.b-topic-preview > .editor-container .hide - @extend %md-button-flat - -.b-shiki_editor footer .cancel - @extend %md-button-flat - -.b-contests-menu .results - @extend %md-button-raised - display: block - float: none - margin: .5rem 0 - border-radius: 2px - font-size: 0 - - &:hover - text-decoration: none - - &::after - content: attr(title) - vertical-align: top - font-size: .875rem diff --git a/assets/blocks/b-buttons.sass b/assets/blocks/b-buttons.sass new file mode 100644 index 0000000..5a7d9b7 --- /dev/null +++ b/assets/blocks/b-buttons.sass @@ -0,0 +1,18 @@ +.b-button + @extend %md-button-flat + +a.b-button + color: $color-primary + + @media (min-width: 1025px) + &:hover + color: $color-primary + + &:active + color: $color-primary + + + & + .b-js-link, + // Кнопка отмена (Клуб > Настройки > Страницы) + & + .cancel + @extend %md-button-flat diff --git a/assets/blocks/b-form.sass b/assets/blocks/b-form.sass index e87a710..d69202f 100644 --- a/assets/blocks/b-form.sass +++ b/assets/blocks/b-form.sass @@ -5,4 +5,19 @@ &::after // content: '' display: block - // clear: both \ No newline at end of file + // clear: both + + input[type=submit] + @extend %md-button-raised + + &[disabled], + &.disabled + background-color: $color-button-hover + box-shadow: none + color: $color-text-disabled !important + + .cancel + @extend %md-button-flat + + &:hover + text-decoration: none diff --git a/assets/blocks/b-shiki_editor.sass b/assets/blocks/b-shiki_editor.sass index 823262b..d2d34f6 100644 --- a/assets/blocks/b-shiki_editor.sass +++ b/assets/blocks/b-shiki_editor.sass @@ -1,4 +1,3 @@ - .b-shiki_editor aside.markers position: relative @@ -109,6 +108,23 @@ .preview margin: .375rem .5rem .375rem 0 + // .b-shiki_editor footer .unpreview + // .b-shiki_editor.previewed footer .unpreview + .unpreview:not(.link) + @extend %md-button-flat + font-size: 0 + + &::after + content: 'Редактировать' + vertical-align: top + font-size: .875rem + + [data-locale=en] &::after + content: 'Edit' + + .cancel + @extend %md-button-flat + .about-bb_codes position: relative padding: .5rem diff --git a/assets/blocks/b-topic-preview.sass b/assets/blocks/b-topic-preview.sass index f19aab0..d7fee42 100644 --- a/assets/blocks/b-topic-preview.sass +++ b/assets/blocks/b-topic-preview.sass @@ -5,3 +5,6 @@ @media screen and (max-width: 767px) padding-left: 0 + + & > .editor-container .hide + @extend %md-button-flat diff --git a/assets/blocks/lib-buttons.sass b/assets/blocks/lib-buttons.sass index c23c634..96d740d 100644 --- a/assets/blocks/lib-buttons.sass +++ b/assets/blocks/lib-buttons.sass @@ -27,6 +27,12 @@ font-size: inherit font-weight: 700 + // Кнопка "Отмена" в редактировании аниме в своём списке + & > div, + // buttons (25px for <1024px & 15px for >1025px) + & a:not(.b-button) + line-height: 1.5rem !important + .editor-controls overflow-x: auto diff --git a/assets/menu-updated.sass b/assets/layouts/l-menu.sass similarity index 100% rename from assets/menu-updated.sass rename to assets/layouts/l-menu.sass diff --git a/assets/rightbar.sass b/assets/layouts/l-sidebar.sass similarity index 97% rename from assets/rightbar.sass rename to assets/layouts/l-sidebar.sass index 677fcdc..2ba5a8e 100644 --- a/assets/rightbar.sass +++ b/assets/layouts/l-sidebar.sass @@ -37,6 +37,7 @@ z-index: 10 .toggler + @extend %material-icons border-radius: 4px padding: 0 .25em line-height: 24px @@ -45,9 +46,7 @@ content: 'chevron_right' !important display: inline-block vertical-align: top - width: 1em margin: 0 - font-size: 1.5em opacity: .72 transition: .16s cubic-bezier(.4,0,.6,1) diff --git a/assets/main.sass b/assets/main.sass index b7dacc4..f6cd8df 100644 --- a/assets/main.sass +++ b/assets/main.sass @@ -373,36 +373,6 @@ input -/* Стили Material Icons */ -.l-page .menu-toggler .toggler::before - font-family: 'Material Icons' !important - font-weight: normal !important - line-height: 1 - - letter-spacing: normal - text-transform: none - word-wrap: normal - white-space: nowrap - direction: ltr - - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale - /* Support for IE. */ - font-feature-settings: 'liga' - - - - - - - - - - /* TODO: replace */ .b-catalog-entry-embedded .b-catalog_entry diff --git a/assets/pages/p-achievements.sass b/assets/pages/p-achievements.sass new file mode 100644 index 0000000..833bd3a --- /dev/null +++ b/assets/pages/p-achievements.sass @@ -0,0 +1,119 @@ +// Ачивки +.p-achievements-index + .cc-achievements + display: flex + flex-wrap: wrap + align-items: stretch + align-content: stretch + + @media (min-width: 768px) + .cc-achievements .b-achievement:nth-child(n) + width: calc(25% - (16px * 3 / 4)) + margin-right: 16px + margin-bottom: 16px + + .cc-achievements .b-achievement:nth-child(4n+4) + margin-right: 0 + + .cc-franchises-genres .c-genres .b-achievement:nth-child(n) + margin-right: 16px + margin-bottom: 16px + + .cc-franchises-genres .c-genres .b-achievement:nth-child(4n+4) + margin-right: 0 + + .cc-franchises-genres .c-genres, + .cc-franchises-genres .c-franchises + width: 100% + + .tipsy + display: none !important + + .c-franchises + .b-badge + position: relative + background: rgba(0,0,0, .4) + border-radius: 3px + overflow: hidden + transition: .24s ease + + .no-image, + img + border-radius: inherit + transition: .24s ease + + &::after, + &::before + display: block + position: absolute + top: auto + right: 0 + bottom: 0 + left: 0 + width: auto + height: auto + padding: 12px 12px 6px + border-radius: 0 0 3px 3px + color: #fff + font-size: 14px + font-weight: bold + line-height: 20px + text-shadow: 0 0 1px black, 0 1px 5px rgba(0,0,0,.32) + backface-visibility: hidden + transition: .24s ease + opacity: 1 + z-index: 1 + + &:hover::after, + &:hover::before + transform: translate3d(0, 100%, 0) + + &[original-title]::before + content: attr(original-title) + + &[title]::before + content: attr(title) + + &::before + padding-right: 48px + background: linear-gradient(transparent, rgba(0,0,0,.32)) + text-align: left + + &::after + content: attr(data-progress) '%' + background: none + text-align: right + + &.level-0.unavailable:not(:hover) .no-image + opacity: .2 + + &.level-0:not(:hover) .no-image, + &.unavailable:not(:hover) .no-image, + opacity: .5 + + // всплывашка + .b-list_switchers + .switcher + @extend %md-tooltip + @extend %md-tooltip-top + + &[title]::after + content: attr(title) + width: auto + + &[original-title]::after + content: attr(original-title) + width: auto + + .cc-franchises-genres + // Фикс вылезающих за пределы страницы тултипов + @media (max-width: 767px) + .c-franchises + padding: 0 16px + margin: 0 -16px + overflow: hidden + + +// TODO: replace +.b-badge .no-image + border-radius: inherit diff --git a/assets/pages/p-contests.sass b/assets/pages/p-contests.sass index 2e51a7f..98e1a94 100644 --- a/assets/pages/p-contests.sass +++ b/assets/pages/p-contests.sass @@ -419,3 +419,20 @@ @media (max-width: 480px) display: block padding: 0 + + +.b-contests-menu .results + @extend %md-button-raised + display: block + float: none + margin: .5rem 0 + border-radius: 2px + font-size: 0 + + &:hover + text-decoration: none + + &::after + content: attr(title) + vertical-align: top + font-size: .875rem diff --git a/assets/pages/p-profiles.sass b/assets/pages/p-profiles.sass index b351e51..e4684b9 100644 --- a/assets/pages/p-profiles.sass +++ b/assets/pages/p-profiles.sass @@ -565,3 +565,163 @@ .activity .title margin-bottom: 0 // overwrite shiki style + + +// PROFILE HEAD +.p-profiles .profile-head + position: relative + + // До тех пор пока используется аватарка по центру и история + @media (min-width: 320px) and (max-width: 480px) + padding-top: 48px + 80px + + // До тех пор пока используется аватарка по центру + @media (min-width: 481px) and (max-width: 959px) + padding-top: 48px + + // До тех пор пока используется полоска истории + @media (max-width: 959px) + margin-top: -16px + + .c-brief + position: relative + text-align: center + + // Приподняятая область на всю ширину экрана + @media (min-width: 320px) and (max-width: 480px) + padding: 12px 16px + margin: 0 -16px 1em + + // Убираем отрицательные отступы + @media (min-width: 481px) + display: flex + padding: 12px 0 + text-align: left + + .avatar + flex-shrink: 0 + position: static + max-width: 80px + // min-width: 184px // иконки (40px * 4) + отступы (8px * 3) + margin: 0 + margin-right: 24px + text-align: center + + @media (max-width: 480px) + float: none + position: relative + max-width: 100% + min-height: 72px + margin: 0 0 12px + + img + vertical-align: top // фикс отступа + + @media (min-width: 320px) and (max-width: 480px) + width: 36% + max-width: 160px + transform: translateY(calc(-50% - 12px)) + margin-bottom: -18% + + .profile-actions + display: block + margin-top: 8px + + @media (min-width: 320px) and (max-width: 480px) + position: absolute + top: 0 + width: 100% + margin: 0 + text-align: left + + a:first-child, + .fav-add, + .fav-remove + float: right + + a:first-child + margin-right: 0 !important + + @media (min-width: 481px) + position: absolute + top: 0 + right: 0 + + .c-mobile-actions + display: none + + .c-history + margin-bottom: 3rem + + &.x3 + margin-bottom: 2rem + + // Полоска истории поверх обложки + @media (max-width: 959px) + display: block + float: none + position: absolute + top: 0 + right: 0 + left: 0 + width: auto + padding: 0 1rem + margin: 0 -1rem + background-color: rgba(0, 0, 0, .48) + white-space: nowrap + overflow-x: auto + z-index: 1 + + .subheadline + display: inline-block + vertical-align: top + + a + color: #eee !important + + &::before + display: none + + .b-block_list + display: inline-block + vertical-align: top + padding: .5rem + margin-left: .5rem + + .entry + display: inline-block !important + vertical-align: top + min-width: 112px + height: 2rem + padding-right: .5rem + padding-left: .5rem + margin-left: .5rem + border-radius: 1rem + overflow: hidden + + .image-name + float: left + width: 32px + height: 32px + margin: -8px 8px -8px -8px + border-radius: 50% + font-size: 0 + line-height: 0 + overflow: hidden + + &::before, + span.misc + display: none + + // Без обложки + @media (max-width: 319px) + position: relative + width: calc(100% + 32px) + margin-bottom: 1em + + @media (min-width: 960px) + display: block + position: relative + margin-top: 8px + margin-left: 56px + z-index: 1 diff --git a/assets/users-list.sass b/assets/pages/p-users.sass similarity index 100% rename from assets/users-list.sass rename to assets/pages/p-users.sass diff --git a/assets/profile-content.sass b/assets/profile-content.sass index 8144064..5dea49d 100644 --- a/assets/profile-content.sass +++ b/assets/profile-content.sass @@ -62,7 +62,6 @@ .c-left position: relative width: calc(77% - 16px) - min-height: 220px padding-right: 40px margin-right: 0 margin-bottom: 1.5rem diff --git a/assets/profile-head.sass b/assets/profile-head.sass deleted file mode 100644 index 32ceb5c..0000000 --- a/assets/profile-head.sass +++ /dev/null @@ -1,165 +0,0 @@ -/** - * PROFILE HEAD - * Adaptive profile header includes: avatar, history, information, anime/manga bars. - */ -.p-profiles .profile-head - position: relative - - // До тех пор пока используется аватарка по центру и история - @media (min-width: 320px) and (max-width: 480px) - padding-top: 48px + 80px - - // До тех пор пока используется аватарка по центру - @media (min-width: 481px) and (max-width: 959px) - padding-top: 48px - - // До тех пор пока используется полоска истории - @media (max-width: 959px) - margin-top: -16px - - .c-brief - position: relative - text-align: center - - // Приподняятая область на всю ширину экрана - @media (min-width: 320px) and (max-width: 480px) - padding: 12px 16px - margin: 0 -16px 1em - - // Убираем отрицательные отступы - @media (min-width: 481px) - display: flex - padding: 12px 0 - text-align: left - - .avatar - flex-shrink: 0 - position: static - max-width: 80px - // min-width: 184px // иконки (40px * 4) + отступы (8px * 3) - margin: 0 - margin-right: 24px - text-align: center - - @media (max-width: 480px) - float: none - position: relative - max-width: 100% - min-height: 72px - margin: 0 0 12px - - img - vertical-align: top // фикс отступа - - @media (min-width: 320px) and (max-width: 480px) - width: 36% - max-width: 160px - transform: translateY(calc(-50% - 12px)) - margin-bottom: -18% - - .profile-actions - display: block - margin-top: 8px - - @media (min-width: 320px) and (max-width: 480px) - position: absolute - top: 0 - width: 100% - margin: 0 - text-align: left - - a:first-child, - .fav-add, - .fav-remove - float: right - - a:first-child - margin-right: 0 !important - - @media (min-width: 481px) - position: absolute - top: 0 - right: 0 - - .c-mobile-actions - display: none - - .c-history - margin-bottom: 3rem - - &.x3 - margin-bottom: 2rem - - // Полоска истории поверх обложки - @media (max-width: 959px) - display: block - float: none - position: absolute - top: 0 - right: 0 - left: 0 - width: auto - padding: 0 1rem - margin: 0 -1rem - background-color: rgba(0, 0, 0, .48) - white-space: nowrap - overflow-x: auto - z-index: 1 - - .subheadline - display: inline-block - vertical-align: top - - a - color: #eee !important - - &::before - display: none - - .b-block_list - display: inline-block - vertical-align: top - padding: .5rem - margin-left: .5rem - - .entry - display: inline-block !important - vertical-align: top - min-width: 112px - height: 2rem - padding-right: .5rem - padding-left: .5rem - margin-left: .5rem - border-radius: 1rem - overflow: hidden - - .image-name - float: left - width: 32px - height: 32px - margin: -8px 8px -8px -8px - border-radius: 50% - font-size: 0 - line-height: 0 - overflow: hidden - - &::before, - span.misc - display: none - - // Без обложки - @media (max-width: 319px) - position: relative - width: calc(100% + 32px) - margin-bottom: 1em - - @media (min-width: 960px) - display: block - position: relative - margin-top: 8px - margin-left: 56px - z-index: 1 -/* END of PROFILE HEAD */ -/**/ -/**/ -/**/ diff --git a/assets/version.sass b/assets/version.sass index 57af5c5..f572b5a 100644 --- a/assets/version.sass +++ b/assets/version.sass @@ -1,3 +1,3 @@ // SETTINGS -$ver: '1.5.9' +$ver: '1.5.10' $release: 'stable' diff --git a/config/theme_files.json b/config/theme_files.json index 428aed8..9a9dbbf 100644 --- a/config/theme_files.json +++ b/config/theme_files.json @@ -77,9 +77,13 @@ "checked": true }, { - "url": "menu-updated.sass", + "url": "layouts/l-menu.sass", "checked": true, - "description": "Стили для обновлённого верхнего меню." + "description": "Обновлённое верхнего меню." + }, + { + "url": "layouts/l-sidebar.sass", + "checked": true }, { "url": "blocks/lib-buttons.sass", @@ -149,6 +153,10 @@ "url": "blocks/b-breadcrumbs.sass", "checked": true }, + { + "url": "blocks/b-buttons.sass", + "checked": true + }, { "url": "blocks/b-catalog_entry.sass", "checked": true @@ -371,6 +379,10 @@ "url": "blocks/ti-tags.sass", "checked": true }, + { + "url": "pages/p-achievements.sass", + "checked": true + }, { "url": "pages/p-animes.sass", "checked": true @@ -440,35 +452,13 @@ "checked": true }, { - "url": "b-buttons.sass", - "checked": true - }, - { - "url": "rightbar.sass", - "checked": true - }, - { - "url": "users-list.sass", - "checked": true - }, - { - "url": "profile-head.sass", + "url": "pages/p-users.sass", "checked": true }, { "url": "profile-content.sass", "checked": true }, - { - "url": "tests/profile-content-new.sass", - "checked": false, - "description": "Отображение времени за аниме и мангой." - }, - { - "url": "tests/profile-achievements.sass", - "checked": false, - "description": "Маленький блок достижений." - }, { "url": "profile-history_animation.sass", "checked": false, @@ -486,8 +476,14 @@ "title": "Круглые аватарки" }, { - "url": "achievements.sass", - "checked": true + "url": "tests/profile-content-new.sass", + "checked": false, + "description": "Отображение времени за аниме и мангой." + }, + { + "url": "tests/profile-achievements.sass", + "checked": false, + "description": "Маленький блок достижений." }, { "url": "tests/b-achievements.sass", diff --git a/config/theme_folders.json b/config/theme_folders.json index aaa7e64..fc8f028 100644 --- a/config/theme_folders.json +++ b/config/theme_folders.json @@ -1,4 +1,8 @@ [ + { + "url": "layouts", + "title": "Основные стили" + }, { "url": "blocks", "title": "Стили блоков"