diff --git a/data/static/css/style.css b/data/static/css/style.css index 0dd3641..b14c9e5 100644 --- a/data/static/css/style.css +++ b/data/static/css/style.css @@ -50,7 +50,7 @@ border: 1px solid black; border-radius: 4px; padding: 5px 20px; - margin: 10px 0; + margin: 5px 0; } body { @@ -129,7 +129,8 @@ body { .thread-actions { display: flex; align-items: center; - gap: 5px; + gap: 0 5px; + flex-wrap: wrap; } .post { @@ -1523,3 +1524,16 @@ img.badge-button { justify-content: center; gap: 5px; } + +.rss-button { + background-color: #fba668; + color: black; +} +.rss-button:hover { + background-color: rgb(251.8, 183.8, 134.2); + color: black; +} +.rss-button:active { + background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097); + color: black; +} diff --git a/data/static/css/theme-otomotone.css b/data/static/css/theme-otomotone.css index fbf958e..a353b50 100644 --- a/data/static/css/theme-otomotone.css +++ b/data/static/css/theme-otomotone.css @@ -50,7 +50,7 @@ border: 1px solid black; border-radius: 8px; padding: 5px 20px; - margin: 10px 0; + margin: 5px 0; } body { @@ -129,7 +129,8 @@ body { .thread-actions { display: flex; align-items: center; - gap: 5px; + gap: 0 5px; + flex-wrap: wrap; } .post { @@ -1524,6 +1525,19 @@ img.badge-button { gap: 5px; } +.rss-button { + background-color: #fba668; + color: black; +} +.rss-button:hover { + background-color: rgb(251.8, 183.8, 134.2); + color: black; +} +.rss-button:active { + background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097); + color: black; +} + #topnav { margin-bottom: 10px; border: 10px solid rgb(40, 40, 40); diff --git a/data/static/css/theme-peachy.css b/data/static/css/theme-peachy.css index 840e6af..5afc283 100644 --- a/data/static/css/theme-peachy.css +++ b/data/static/css/theme-peachy.css @@ -50,7 +50,7 @@ border: 1px solid black; border-radius: 16px; padding: 8px 12px; - margin: 6px 0; + margin: 3px 0; } body { @@ -129,7 +129,8 @@ body { .thread-actions { display: flex; align-items: center; - gap: 3px; + gap: 0 3px; + flex-wrap: wrap; } .post { @@ -1524,6 +1525,19 @@ img.badge-button { gap: 3px; } +.rss-button { + background-color: #fba668; + color: black; +} +.rss-button:hover { + background-color: rgb(251.8, 183.8, 134.2); + color: black; +} +.rss-button:active { + background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097); + color: black; +} + #topnav { border-top-left-radius: 16px; border-top-right-radius: 16px; diff --git a/data/static/css/theme-snow-white.css b/data/static/css/theme-snow-white.css index cce6fc6..69707e0 100644 --- a/data/static/css/theme-snow-white.css +++ b/data/static/css/theme-snow-white.css @@ -50,7 +50,7 @@ border: 1px solid black; border-radius: 4px; padding: 5px 20px; - margin: 10px 0; + margin: 5px 0; } body { @@ -129,7 +129,8 @@ body { .thread-actions { display: flex; align-items: center; - gap: 5px; + gap: 0 5px; + flex-wrap: wrap; } .post { @@ -1523,3 +1524,16 @@ img.badge-button { justify-content: center; gap: 5px; } + +.rss-button { + background-color: #fba668; + color: black; +} +.rss-button:hover { + background-color: rgb(251.8, 183.8, 134.2); + color: black; +} +.rss-button:active { + background-color: rgb(186.8501612903, 155.5098387097, 132.6498387097); + color: black; +} diff --git a/sass/_default.scss b/sass/_default.scss index 7bba579..f423ee9 100644 --- a/sass/_default.scss +++ b/sass/_default.scss @@ -115,7 +115,7 @@ $DEFAULT_BORDER_RADIUS: 4px !default; $button_border: $DEFAULT_BORDER !default; $button_padding: $SMALL_PADDING $BIG_PADDING !default; $button_border_radius: $DEFAULT_BORDER_RADIUS !default; -$button_margin: $MEDIUM_PADDING $ZERO_PADDING !default; +$button_margin: $SMALL_PADDING $ZERO_PADDING !default; %button-base { cursor: default; font-size: 1rem; @@ -242,11 +242,12 @@ $thread_title_size: 1.5rem !default; font-weight: bold; } -$thread_actions_gap: $SMALL_PADDING !default; +$thread_actions_gap: $ZERO_PADDING $SMALL_PADDING !default; .thread-actions { display: flex; align-items: center; gap: $thread_actions_gap; + flex-wrap: wrap; } $post_usercard_width: 230px !default; @@ -1511,3 +1512,24 @@ $badges_container_gap: $SMALL_PADDING !default; justify-content: center; gap: $badges_container_gap; } + +$rss_button_color: #fba668 !default; +$rss_button_color_hover: color.scale($rss_button_color, $lightness: 20%) !default; +$rss_button_color_active: color.scale($rss_button_color, $lightness: -10%, $saturation: -70%) !default; +$rss_button_font_color: black !default; +$rss_button_font_color_hover: black !default; +$rss_button_font_color_active: black !default; +.rss-button { + background-color: $rss_button_color; + color: $rss_button_font_color; + + &:hover { + background-color: $rss_button_color_hover; + color: $rss_button_font_color_hover; + } + + &:active { + background-color: $rss_button_color_active; + color: $rss_button_font_color_active; + } +}