diff --git a/profiles/drupalru/themes/druru/css/style.css b/profiles/drupalru/themes/druru/css/style.css index af7aeefe..6588c634 100644 --- a/profiles/drupalru/themes/druru/css/style.css +++ b/profiles/drupalru/themes/druru/css/style.css @@ -272,7 +272,7 @@ body { font-family: "IBM Plex Sans"; font-size: 16px; line-height: 1.33; - color: #021321; + color: #283642; background-color: #fafafa; } input, @@ -1374,7 +1374,7 @@ select[multiple].input-lg { display: block; margin-top: 5px; margin-bottom: 10px; - color: #095899; + color: #587791; } @media (min-width: 748px) { .form-inline .form-group { @@ -3536,7 +3536,7 @@ a.events--front .event.active { .thumbnail .caption, .events--front .event .caption { padding: 9px; - color: #021321; + color: #283642; } .alert { padding: 15px; @@ -7830,6 +7830,22 @@ form#user-admin-permissions .form-type-checkbox { .comment.is-menu-open .comment__meta .menu-toggle { color: #0566bc; } +.comment.is-unpublished { + background-color: #fcebeb; +} +.is-new .comment__status::after, +.is-updated .comment__status::after { + font-family: FontAwesome; + color: #009638; + content: "\f111"; + font-size: 13px; +} +.is-unpublished .comment__status::before { + font-family: FontAwesome; + color: #8d1812; + content: "\f070"; + font-size: 13px; +} .comment__content, .comment__links { margin-top: 15px; @@ -7895,20 +7911,27 @@ form#user-admin-permissions .form-type-checkbox { .comment__menu a::first-letter { text-transform: uppercase; } +.comment__content h2, +.comment__content h3, +.comment__content h4, +.comment__content h5, +.comment__content h6 { + font-weight: 500; +} .comment__content h2 { font-size: 24px; +} +.comment__content * + h2 { margin-top: 10px; } .comment__content h3 { font-size: 18px; - margin-top: 5px; -} -.comment__content h4 { - font-size: 16px; } -.comment__content h5 { - font-size: 16px; +.comment__content * + h3 { + margin-top: 5px; } +.comment__content h4, +.comment__content h5, .comment__content h6 { font-size: 16px; } @@ -8012,34 +8035,9 @@ form#user-admin-permissions .form-type-checkbox { .comment__links > * a:active { color: #0566bc; } -@media (min-width: 1004px) { - .accepted-answer .comment__links > *:last-child { - box-shadow: inset -1px 0 0 #009638, inset 0 -1px 0 #009638, inset 1px 0 0 #009638; - } -} -.accepted-answer .comment__links { - margin-left: -10px; - margin-right: -10px; -} -@media (max-width: 1004px) { - .accepted-answer .comment__links > * { - box-shadow: inset -1px 0 0 #009638, inset 1px 0 0 #009638; - margin-bottom: unset; - } -} -.is-new .comment__status::after, -.is-updated .comment__status::after { - font-family: FontAwesome; - color: #009638; - content: "\f111"; - font-size: 13px; -} .accepted-answer .comment { margin-top: 15px; } -.comment-unpublished { - background-color: #fcebeb; -} @media (max-width: 1004px) { .comment .comment__links > * { background-color: #f0f0f0; @@ -8057,30 +8055,35 @@ form#user-admin-permissions .form-type-checkbox { color: #0566bc; } } -.menu-toggle { - font-family: FontAwesome; - width: 13px; - height: 13px; - margin-left: auto; - transition: color 0.2s ease-in-out; - cursor: pointer; +.comment.is-accepted-answer { + box-shadow: inset 0 1px 0 #009638, inset -1px 0 0 #009638, inset 0 -1px 0 #009638, inset 1px 0 0 #009638; + margin-top: 15px; + padding: 10px; } -.menu-toggle::after { - content: "\f0c9"; +@media (min-width: 1004px) { + .comment.is-accepted-answer { + padding: 10px 10px 0 10px; + } } -.menu-toggle:hover, -.menu-toggle:focus, -.menu-toggle:active { - color: #0566bc; +.comment.is-accepted-answer .comment__links { + margin-left: -10px; + margin-right: -10px; +} +@media (max-width: 1004px) { + .comment.is-accepted-answer .comment__links > * { + box-shadow: inset -1px 0 0 #009638, inset 1px 0 0 #009638; + margin-bottom: unset; + } } @media (min-width: 1004px) { - .menu-toggle { - display: none; + .comment.is-accepted-answer .comment__links > *:last-child, + .comment.is-accepted-answer .comment__links > *:last-child { + box-shadow: inset -1px 0 0 #009638, inset 0 -1px 0 #009638, inset 1px 0 0 #009638; } } .description { font-size: 0.9em; - color: #0b66b1; + color: #6384a0; } .page-header { margin-top: 0; @@ -8160,6 +8163,29 @@ a.cke_combo_button span.cke_button_disabled span { margin: 0; padding-right: 12px; } +.menu-toggle { + font-family: FontAwesome; + width: 20px; + height: 20px; + font-size: 20px; + margin-left: auto; + transition: color 0.2s ease-in-out; + cursor: pointer; + color: #c2c6ca; +} +.menu-toggle::after { + content: "\f0c9"; +} +.menu-toggle:hover, +.menu-toggle:focus, +.menu-toggle:active { + color: #0566bc; +} +@media (min-width: 1004px) { + .menu-toggle { + display: none; + } +} #status-page { margin: 5em auto; color: #3D76A0; @@ -8732,7 +8758,7 @@ ul.li-accent > *:before { } .entity-listing .node__title a, .entity-listing .comment__title a { - color: #021321; + color: #283642; } .entity-listing .node__title a:hover, .entity-listing .comment__title a:hover, @@ -8835,21 +8861,21 @@ ul.li-accent > *:before { .entity-listing .attachment-after .node { box-shadow: inset 0 1px 0 #c2c6ca; } -#comments .comment:not(:first-child), -.indented .comment:not(:first-child) { +.comment:not(:first-child) { margin-top: 15px; } @media (max-width: 1004px) { - #comments .comment, - .indented .comment { + .comment { box-shadow: inset 0 -1px 0 #c2c6ca; padding-bottom: 15px; } } +.accepted-answer, #comments, .comment-form-wrapper { margin-top: 15px; } +.accepted-answer .section-title, #comments .section-title, .comment-form-wrapper .section-title { font-size: 18px; @@ -8948,6 +8974,22 @@ ul.li-accent > *:before { .node.is-menu-open .node__meta .menu-toggle { color: #0566bc; } +.node.is-unpublished { + background-color: #fcebeb; +} +.is-new .node__status::after, +.is-updated .node__status::after { + font-family: FontAwesome; + color: #009638; + content: "\f111"; + font-size: 13px; +} +.is-unpublished .node__status::before { + font-family: FontAwesome; + color: #8d1812; + content: "\f070"; + font-size: 13px; +} .node__content, .node__links { margin-top: 15px; @@ -9013,20 +9055,27 @@ ul.li-accent > *:before { .node__menu a::first-letter { text-transform: uppercase; } +.node__content h2, +.node__content h3, +.node__content h4, +.node__content h5, +.node__content h6 { + font-weight: 500; +} .node__content h2 { font-size: 24px; +} +.node__content * + h2 { margin-top: 10px; } .node__content h3 { font-size: 18px; - margin-top: 5px; -} -.node__content h4 { - font-size: 16px; } -.node__content h5 { - font-size: 16px; +.node__content * + h3 { + margin-top: 5px; } +.node__content h4, +.node__content h5, .node__content h6 { font-size: 16px; } @@ -9123,13 +9172,6 @@ ul.li-accent > *:before { .node__links > * { background-color: #f0f0f0; } -.is-new .node__status::after, -.is-updated .node__status::after { - font-family: FontAwesome; - content: "\f111"; - font-size: 13px; - color: #009638; -} .node__comments-count::before, .node__comments-count::after { font-family: FontAwesome; @@ -9157,16 +9199,6 @@ ul.li-accent > *:before { .node__new-comments { color: #009638; } -.accepted-answer { - box-shadow: inset 0 1px 0 #009638, inset -1px 0 0 #009638, inset 0 -1px 0 #009638, inset 1px 0 0 #009638; - margin-top: 15px; - padding: 10px; -} -@media (min-width: 1004px) { - .accepted-answer { - padding: 10px 10px 0 10px; - } -} .pager-wrapper { margin-top: 15px; padding-top: 15px; @@ -10075,7 +10107,7 @@ form table input.form-radio { } .bue-popup .bue-popup-content ul.tag-chooser code { background: none; - color: #021321; + color: #283642; } /** * @file @@ -10961,7 +10993,7 @@ table tr.error { } .control-group.error .help-block, .control-group.error .help-inline { - color: #021321; + color: #283642; } .list-inline { margin-left: 0; @@ -11271,7 +11303,7 @@ body { font-family: "IBM Plex Sans", sans-serif; font-size: 16px; background-color: #f8fafc; - color: #021321; + color: #283642; } .region-sidebar-first { font-size: 14px; @@ -11320,7 +11352,7 @@ blockquote { font-size: 16px; box-shadow: inset 5px 0 0 #e6dcd3; background-color: #f6f3f0; - color: #021321; + color: #283642; } blockquote footer { font-size: 14px; diff --git a/profiles/drupalru/themes/druru/js/druru.js b/profiles/drupalru/themes/druru/js/druru.js index 5f064398..6cd7942c 100644 --- a/profiles/drupalru/themes/druru/js/druru.js +++ b/profiles/drupalru/themes/druru/js/druru.js @@ -31,7 +31,7 @@ var Drupal = Drupal || {}; // Window resize events. $(window).resize(resizeDebounce); - $('.menu-toggle').click(function() { + $('.menu-toggle').off('click').on('click', function() { var entity = $(this).parents().filter(function() { return $(this).data('entity-type'); }).eq(0); diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_comment.less b/profiles/drupalru/themes/druru/less/drupal/components/_comment.less index 6a7aa896..c5dd6b93 100644 --- a/profiles/drupalru/themes/druru/less/drupal/components/_comment.less +++ b/profiles/drupalru/themes/druru/less/drupal/components/_comment.less @@ -27,44 +27,12 @@ } } } - - .accepted-answer & > *:last-child { - @media (min-width: @grid-float-breakpoint) { - .border(0, 1, 1, 1, @color-notification); - } - } - - .accepted-answer & { - margin-left: -@padding; - margin-right: -@padding; - - > * { - @media (max-width: @grid-float-breakpoint) { - .border(0, 1, 0, 1, @color-notification); - margin-bottom: unset; - } - } - } - } - - &__status { - .is-new &::after, - .is-updated &::after { - @icon(); - color: @color-notification; - content: @fa-var-circle; - font-size: @font-size-aux; - } } .accepted-answer & { margin-top: @gap-entity; } - &-unpublished { - background-color: @color-entity-unpublished; - } - @media (max-width: @grid-float-breakpoint) { .comment__links { & > * { @@ -88,28 +56,35 @@ } } } -} -// @todo Move styling of .menu-toggle to separate file -.menu-toggle { - @icon(); - width: @font-size-aux; - height: @font-size-aux; - margin-left: auto; - transition: color @transition-speed @transition-func; - cursor: pointer; + &.is-accepted-answer { + @selector: ~'.comment'; - &::after { - content: @fa-var-bars; - } + .border(1, 1, 1, 1, @color-notification); + margin-top: @gap-entity; + padding: @padding; - &:hover, - &:focus, - &:active { - color: @color-link-hover; - } + @media (min-width: @grid-float-breakpoint) { + padding: @padding @padding 0 @padding; + } - @media (min-width: @grid-float-breakpoint) { - display: none; + @{selector}__links { + margin-left: -@padding; + margin-right: -@padding; + + > * { + @media (max-width: @grid-float-breakpoint) { + .border(0, 1, 0, 1, @color-notification); + margin-bottom: unset; + } + } + + > *:last-child, + > *:last-child { + @media (min-width: @grid-float-breakpoint) { + .border(0, 1, 1, 1, @color-notification); + } + } + } } } diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_entity-menu.less b/profiles/drupalru/themes/druru/less/drupal/components/_entity-menu.less new file mode 100644 index 00000000..e78190f4 --- /dev/null +++ b/profiles/drupalru/themes/druru/less/drupal/components/_entity-menu.less @@ -0,0 +1,25 @@ +.menu-toggle { + @icon(); + width: @menu-toggle-size-mobile; + height: @menu-toggle-size-mobile; + font-size: @menu-toggle-size-mobile; + margin-left: auto; + transition: color @transition-speed @transition-func; + cursor: pointer; + color: @color-menu-toggle; + + &::after { + content: @fa-var-bars; + } + + &:hover, + &:focus, + &:active { + color: @color-link-hover; + } + + // @todo Add setting to user profile to allow user to use mobile menu on desktops + @media (min-width: @grid-float-breakpoint) { + display: none; + } +} diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_listings.less b/profiles/drupalru/themes/druru/less/drupal/components/_listings.less index 546c7dea..206de7bb 100644 --- a/profiles/drupalru/themes/druru/less/drupal/components/_listings.less +++ b/profiles/drupalru/themes/druru/less/drupal/components/_listings.less @@ -98,20 +98,18 @@ //////////////////// // Comments listings -#comments, -.indented { - .comment { - &:not(:first-child) { - margin-top: @gap-comments; - } +.comment { + &:not(:first-child) { + margin-top: @gap-comments; + } - @media (max-width: @grid-float-breakpoint) { - .border(0, 0, 1, 0, @color-divider); - padding-bottom: @gap-listing-comments-items; - } + @media (max-width: @grid-float-breakpoint) { + .border(0, 0, 1, 0, @color-divider); + padding-bottom: @gap-listing-comments-items; } } +.accepted-answer, #comments, .comment-form-wrapper { margin-top: @gap-entity; diff --git a/profiles/drupalru/themes/druru/less/drupal/components/_node.less b/profiles/drupalru/themes/druru/less/drupal/components/_node.less index e248881e..7f5db0f8 100644 --- a/profiles/drupalru/themes/druru/less/drupal/components/_node.less +++ b/profiles/drupalru/themes/druru/less/drupal/components/_node.less @@ -58,17 +58,6 @@ background-color: @color-entity-links-bg-hover; } - &__status { - // @todo Add dom elements for markers such as 'new' to nodes in lisiting. - .is-new &::after, - .is-updated &::after { - @icon(); - content: @fa-var-circle; - font-size: @font-size-aux; - color: @color-notification; - } - } - &__comments-count { &::before, &::after { @@ -108,13 +97,3 @@ color: @color-notification; } } - -.accepted-answer { - .border(1, 1, 1, 1, @color-notification); - margin-top: @gap-entity; - padding: @padding; - - @media (min-width: @grid-float-breakpoint) { - padding: @padding @padding 0 @padding; - } -} diff --git a/profiles/drupalru/themes/druru/less/drupal/placeholders/_entity.less b/profiles/drupalru/themes/druru/less/drupal/placeholders/_entity.less index 169a04be..2dec912a 100644 --- a/profiles/drupalru/themes/druru/less/drupal/placeholders/_entity.less +++ b/profiles/drupalru/themes/druru/less/drupal/placeholders/_entity.less @@ -11,6 +11,28 @@ color: @color-link-hover; } + &.is-unpublished { + background-color: @color-unpublished-bg; + } + + &__status { + .is-new &::after, + .is-updated &::after { + @icon(); + color: @color-notification; + content: @fa-var-circle; + font-size: @font-size-aux; + } + + .is-unpublished &::before { + @icon(); + color: @color-unpublished-fg; + content: @fa-var-eye-slash; + font-size: @font-size-aux; + } + } + + &__content, &__links { margin-top: @gap-entity; @@ -76,11 +98,35 @@ } &__content { - h2 { font-size: @font-size-content-section-title; margin-top: @gap-content-section-title; } - h3 { font-size: @font-size-content-section-heading; margin-top: @gap-content-section-heading; } - h4 { font-size: @font-size-primary; } - h5 { font-size: @font-size-primary; } - h6 { font-size: @font-size-primary; } + h2, + h3, + h4, + h5, + h6 { + font-weight: 500; + } + + h2 { + font-size: @font-size-content-section-title; + } + + * + h2 { + margin-top: @gap-content-section-title; + } + + h3 { + font-size: @font-size-content-section-heading; + } + + * + h3 { + margin-top: @gap-content-section-heading; + } + + h4, + h5, + h6 { + font-size: @font-size-primary; + } img { max-width: 100%; diff --git a/profiles/drupalru/themes/druru/less/variables-new.less b/profiles/drupalru/themes/druru/less/variables-new.less index 7e500d2d..0230a55b 100644 --- a/profiles/drupalru/themes/druru/less/variables-new.less +++ b/profiles/drupalru/themes/druru/less/variables-new.less @@ -4,78 +4,79 @@ // Var @grid should not be used directly in lesscss rules for calculations (e.g. @grid * 2). // Preferred way is to use ready-to-use semantically suitable var or create one in here. // By default vars without suffixes meant to be used as universal and vertical gaps. -@grid: 5px; -@gap: @grid * 3; // Standard gap between page elements -@gap-inline-v: @grid; // Vertical gap between inline elements -@gap-inline-h: @grid * 2; // Horizontal gap between inline elements -// @gap-menu-items: @grid; // Vertical gap between vertical menu items // @todo Reserved for future use -@gap-icon: @grid / 2; // Vertical gap between vertical menu items - -@gap-entity: @grid * 3; // Gap between entity elements (e.g. &__meta and &__connent) -@gap-listing-page: @grid; -@gap-listing-block: @grid; -@gap-comment: @grid; // Standard vertical gap between comment elements (e.g. &__meta and &__connent) -@gap-content: @grid * 2; // Standard vertical gap between text elements (e.g. paragraphs, images, ul, ol) +@grid: 5px; +@gap: @grid * 3; // Standard gap between page elements +@gap-inline-v: @grid; // Vertical gap between inline elements +@gap-inline-h: @grid * 2; // Horizontal gap between inline elements +// @gap-menu-items: @grid; // Vertical gap between vertical menu items // @todo Reserved for future use +@gap-icon: @grid / 2; // Vertical gap between vertical menu items + +@gap-entity: @grid * 3; // Gap between entity elements (e.g. &__meta and &__connent) +@gap-listing-page: @grid; +@gap-listing-block: @grid; +@gap-comment: @grid; // Standard vertical gap between comment elements (e.g. &__meta and &__connent) +@gap-content: @grid * 2; // Standard vertical gap between text elements (e.g. paragraphs, images, ul, ol) @gap-content-section-title: @grid * 2; // Gap before section title @gap-content-section-heading: @grid; // Gap before section heading // Field based listings displayed as page (e.g. /tracker) -@padding-listing-item-page-v: @grid * 3; // Vertical padding of listing item // @todo Possibly rename to @gap-* -@padding-listing-item-page-h: @grid * 3; // Horizonal padding of listings item // @todo Possibly rename to @gap-* +@padding-listing-item-page-v: @grid * 3; // Vertical padding of listing item // @todo Possibly rename to @gap-* or @pad-* +@padding-listing-item-page-h: @grid * 3; // Horizonal padding of listings item // @todo Possibly rename to @gap-* or @pad-* // Field based listings displayed as block (e.g. /tracker) -@padding-listing-item-block-v: @grid * 2; // Vertical padding of listing item // @todo Possibly rename to @gap-* -@padding-listing-item-block-h: @grid * 2; // Horizonal padding of listings item // @todo Possibly rename to @gap-* +@padding-listing-item-block-v: @grid * 2; // Vertical padding of listing item // @todo Possibly rename to @gap-* or @pad-* +@padding-listing-item-block-h: @grid * 2; // Horizonal padding of listings item // @todo Possibly rename to @gap-* or @pad-* // Content based listings (e.g. User blog) displayed as page (e.g. /user/%/blog) -@gap-listing-extended-items: @grid * 5; // Vertical gap between listing items +@gap-listing-extended-items: @grid * 5; // Vertical gap between listing items // Listing of comments -@gap-listing-comments-items: @grid * 3; // Vertical gap between comments - +@gap-listing-comments-items: @grid * 3; // Vertical gap between comments // Listings of comments -@gap-comments: @gap; // Vertical gap between comments -@gap-comments-indented: @gap; // Horizontal indentation of nested comments +@gap-comments: @gap; // Vertical gap between comments +@gap-comments-indented: @gap; // Horizontal indentation of nested comments -@padding: @grid * 2; // Standard vertical/horizontal padding -@padding-inline: @grid; // Vertical padding for inline elements -@padding-code: @grid * 3; // Paddings for code blocks +@padding: @grid * 2; // Standard vertical/horizontal padding // @todo Possibly rename to @pad-* +@padding-inline: @grid; // Vertical padding for inline elements // @todo Possibly rename to @pad-* +@padding-code: @grid * 3; // Paddings for code blocks // @todo Possibly rename to @pad-* -@padding-aux-v: @grid; // Vertical padding for auxiliary containers (e.g. content tags) -@padding-aux-h: @grid * 2; // Horizontal padding for auxiliary containers (e.g. content tags) +@padding-aux-v: @grid; // Vertical padding for auxiliary containers (e.g. content tags) // @todo Possibly rename to @pad-* +@padding-aux-h: @grid * 2; // Horizontal padding for auxiliary containers (e.g. content tags) // @todo Possibly rename to @pad-* -@avatar-height: @grid * 5; // Avatar height -@img-height-teaser: @grid * 20; // Max img height in teaser +// Dimensions +@avatar-height: @grid * 5; // Avatar height +@img-height-teaser: @grid * 20; // Max img height in teaser //////////////////// // Colors -@color-divider: rgb(194, 198, 202); +@color-divider: rgb(194, 198, 202); -@color-code-bg: rgb(246, 243, 240); // Background color for code blocks/inlines -@color-code-border: rgb(230, 220, 211); // Border color for code blocks +@color-code-bg: rgb(246, 243, 240); // Background color for code blocks/inlines +@color-code-border: rgb(230, 220, 211); // Border color for code blocks -@color-fg: rgb(2, 19, 33); // Main text color -@color-bg: rgb(248, 250, 252); // Default background color -@color-meta: rgb(135, 149, 161); // Text/link color of entity meta information (user name, date, etc.) -@color-meta-hover: @color-link-hover; // Link hover color of entity meta information (e.g. user name) +@color-fg: rgb(40, 54, 66); // Main text color +@color-bg: rgb(248, 250, 252); // Default background color +@color-meta: rgb(135, 149, 161); // Text/link color of entity meta information (user name, date, etc.) +@color-meta-hover: @color-link-hover; // Link hover color of entity meta information (e.g. user name) -@text-color: @color-fg; // Alias for compatibility with bootstrap -@text-muted: @color-meta; // Alias for compatibility with bootstrap +@text-color: @color-fg; // Alias for compatibility with bootstrap +@text-muted: @color-meta; // Alias for compatibility with bootstrap -@color-link: #0678dd; -@color-link-hover: #0566bc; +@color-link: rgb(6, 120, 221); // #0678dd — Primary brand color +@color-link-hover: rgb(5, 102, 188); @color-heading: @color-fg; @color-heading-link-hover: @color-link-hover; -@color-notification: #009638; // Generic color for notifications -@color-notification-bg: @color-notification; // Background color for notifications -@color-notification-fg: @color-bg; // Text color for notifications @todo Find best match +@color-notification: rgb(0, 150, 56); // Generic color for notifications +@color-notification-bg: @color-notification; // Background color for notifications +@color-notification-fg: @color-bg; // Text color for notifications @todo Find best match -@color-throbber: @color-link; +@color-throbber: @color-link; -@color-entity-unpublished: rgb(252, 235, 235); +@color-unpublished-fg: rgb(141, 24, 18); +@color-unpublished-bg: rgb(252, 235, 235); //////////////////// // Typography @@ -87,11 +88,11 @@ @font-family-base: "IBM Plex Sans"; @font-family-monospace: "IBM Plex Mono"; -@font-size-primary: 16px; // Font size for main content -@font-size-base: @font-size-primary; // Alias for compatibility with bootstrap -@font-size-secondary: 14px; // Font size for text in site's blocks -@font-size-aux: 13px; // Font size for auxiliary elements (e.g. dates, counters, etc.) -// @font-size-ui: 14px; // Font size for menus, breadcrumbs, etc. // @todo Reserved for future use +@font-size-primary: 16px; // Font size for main content +@font-size-base: @font-size-primary; // Alias for compatibility with bootstrap +@font-size-secondary: 14px; // Font size for text in site's blocks +@font-size-aux: 13px; // Font size for auxiliary elements (e.g. dates, counters, etc.) +// @font-size-ui: 14px; // Font size for menus, breadcrumbs, etc. // @todo Reserved for future use @font-size-page-title: 30px; // h1 @font-size-page-section-title: 18px; // title of blocks, comments wrapper, comment form, etc. @@ -111,9 +112,6 @@ @border-blockquote: @grid; @gap-blockquote-cite: @grid; -// Code blocks -@color-code-bg: rgb(246, 243, 240); // Background color for code blocks/inlines - // Entity @padding-entity-links-v: @grid; // Vertical padding for entity links (menu, taxonomy) @padding-entity-links-h: @grid * 2; // Horizontal padding for entity links (menu, taxonomy) @@ -124,6 +122,10 @@ @color-entity-links-link-listing: rgb(194, 198, 202); @color-entity-links-link-listing-hover: @color-link-hover; +// Entity menu +@menu-toggle-size-mobile: @grid * 4; // Size of hamburger on small viewports +@color-menu-toggle: rgb(194, 198, 202); + // Throbber @throbber-width: @grid * 3; @throbber-height: @grid; @@ -140,7 +142,7 @@ @font-size-h5: @font-size-primary; @font-size-h6: @font-size-primary; -@line-height-base: 1.33; -@line-height-computed: 21px; // @todo Replace all occurrences with proper new var -@line-height-large: 1.33; // @todo Refactor to use @line-height-base, replace all occurrences with proper new var -@line-height-small: 1.5; // @todo Refactor to use @line-height-base, replace all occurrences with proper new var +@line-height-base: 1.33; +@line-height-computed: 21px; // @todo Replace all occurrences with proper new var +@line-height-large: 1.33; // @todo Refactor to use @line-height-base, replace all occurrences with proper new var +@line-height-small: 1.5; // @todo Refactor to use @line-height-base, replace all occurrences with proper new var diff --git a/profiles/drupalru/themes/druru/theme/block/block.tpl.php b/profiles/drupalru/themes/druru/theme/block/block.tpl.php index 5d27737c..231b283b 100644 --- a/profiles/drupalru/themes/druru/theme/block/block.tpl.php +++ b/profiles/drupalru/themes/druru/theme/block/block.tpl.php @@ -45,8 +45,7 @@ * @ingroup themeable */ ?> -
> - +
> > @@ -54,5 +53,4 @@ - -
+ diff --git a/profiles/drupalru/themes/druru/theme/comment/comment.tpl.php b/profiles/drupalru/themes/druru/theme/comment/comment.tpl.php index 826f2e4f..3cfcf88f 100644 --- a/profiles/drupalru/themes/druru/theme/comment/comment.tpl.php +++ b/profiles/drupalru/themes/druru/theme/comment/comment.tpl.php @@ -59,7 +59,7 @@ * @ingroup themeable */ ?> -
"> +
>
@@ -74,12 +74,6 @@ - - - - - - @@ -92,6 +86,8 @@ + +
diff --git a/profiles/drupalru/themes/druru/theme/comment/comment.vars.php b/profiles/drupalru/themes/druru/theme/comment/comment.vars.php index a1c606e2..37d80949 100644 --- a/profiles/drupalru/themes/druru/theme/comment/comment.vars.php +++ b/profiles/drupalru/themes/druru/theme/comment/comment.vars.php @@ -4,7 +4,6 @@ function druru_preprocess_comment(&$vars) { $comment = $vars['elements']['#comment']; $node = $vars['elements']['#node']; $links = array(); - $link_attrs = array(); $content = &$vars['content']; $view_mode = $vars['elements']['#view_mode']; @@ -32,21 +31,29 @@ function druru_preprocess_comment(&$vars) { '@time' => format_interval(time() - $vars['comment']->changed, 1), )); - // Check published status - if ($vars['status'] == 'comment-unpublished') { - $vars['unpublished'] = ' '; - $vars['unpublished'] .= druru_get_icon_by_title(t('Unpublished')) . t('Unpublished'); - $vars['unpublished'] .= ''; + // Gather comment classes. + if ($comment->status == COMMENT_NOT_PUBLISHED) { + $vars['classes_array'][] = 'is-unpublished'; } - // Delete class 'inline" and - // "list-inline" (will added automatically) from links. - // @todo Refactor to use unified names for css classes - if (!empty($link_attrs['class'])) { - $key = array_search('inline', $link_attrs['class']); - if ($key !== FALSE) { - unset($link_attrs['class'][$key]); + if ($vars['new']) { + $vars['classes_array'][] = 'is-new'; + } + + if (!$comment->uid) { + $vars['classes_array'][] = 'by-anonymous'; + } + else { + if ($comment->uid == $vars['node']->uid) { + $vars['classes_array'][] = 'by-node-author'; } + if ($comment->uid == $vars['user']->uid) { + $vars['classes_array'][] = 'by-viewer'; + } + } + + if (!empty($comment->best)) { + $vars['classes_array'][] = 'is-accepted-answer'; } $vars['classes_array'][] = 'comment--' . $view_mode; @@ -58,7 +65,7 @@ function druru_preprocess_comment(&$vars) { // @todo Reimplement 'claim' with module 'flag' _druru_wrap_claim($content, 'comment', $vars['id']); - // @todo Refactor option 1. We need variable '$tnx' like other comment variables. + // @todo Refactor option 1. Create variable '$tnx' like other comment variables. // @todo Refactor option 2. Migrate to module 'flag' (preferred). _druru_wrap_thanks($vars, 'comment'); } diff --git a/profiles/drupalru/themes/druru/theme/system/html.tpl.php b/profiles/drupalru/themes/druru/theme/system/html.tpl.php index bd3d5047..ac18f50c 100644 --- a/profiles/drupalru/themes/druru/theme/system/html.tpl.php +++ b/profiles/drupalru/themes/druru/theme/system/html.tpl.php @@ -45,8 +45,7 @@ */ ?> > - - + <?php print $head_title; ?> diff --git a/profiles/drupalru/themes/druru/theme/system/maintenance-page.tpl.php b/profiles/drupalru/themes/druru/theme/system/maintenance-page.tpl.php index 4584556c..eb4e153f 100644 --- a/profiles/drupalru/themes/druru/theme/system/maintenance-page.tpl.php +++ b/profiles/drupalru/themes/druru/theme/system/maintenance-page.tpl.php @@ -33,11 +33,10 @@
-