add otomotone theme

This commit is contained in:
2025-08-17 01:36:34 +03:00
parent 184472726e
commit fc80823713
4 changed files with 1027 additions and 9 deletions

View File

@ -23,6 +23,7 @@ $ACCORDION_COLOR: color.adjust($ACCENT_COLOR, $hue: 140, $lightness: -10%, $satu
$DEFAULT_FONT_COLOR: black !default;
$DEFAULT_FONT_COLOR_INVERSE: white !default;
$BUTTON_FONT_COLOR: $DEFAULT_FONT_COLOR !default;
$BUTTON_COLOR_WARN: #fbfb8d !default;
$BUTTON_COLOR_CRITICAL: red !default;
$BUTTON_WARN_FONT_COLOR: $DEFAULT_FONT_COLOR !default;
@ -258,6 +259,7 @@ $post_info_min_height: 70px !default;
$post_info_padding: $SMALL_PADDING $BIG_PADDING !default;
$post_info_border_top: $DEFAULT_BORDER !default;
$post_info_border_bottom: $DEFAULT_BORDER !default;
$post_info_background: $MAIN_BG !default;
.post-info {
grid-area: post-info;
display: flex;
@ -267,6 +269,7 @@ $post_info_border_bottom: $DEFAULT_BORDER !default;
align-items: center;
border-top: $post_info_border_top;
border-bottom: $post_info_border_bottom;
background-color: $post_info_background;
}
$post_content_padding: $BIG_PADDING $BIG_PADDING $ZERO_PADDING $BIG_PADDING !default;
@ -392,6 +395,7 @@ $delete_dialog_padding: $BIG_PADDING !default;
}
$lightbox_background: $ACCENT_COLOR !default;
$lightbox_font_color: $DEFAULT_FONT_COLOR !default;
$lightbox_gap: $MEDIUM_PADDING !default;
$lightbox_inner_padding: $BIG_PADDING !default;
.lightbox-inner {
@ -400,6 +404,7 @@ $lightbox_inner_padding: $BIG_PADDING !default;
padding: $lightbox_inner_padding;
min-width: 400px;
background-color: $lightbox_background;
color: $lightbox_font_color;
gap: $lightbox_gap;
}
@ -501,7 +506,7 @@ $avatar_margin_bottom: $MEDIUM_PADDING !default;
button, input[type="submit"], .linkbutton {
display: inline-block;
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
@include button($BUTTON_COLOR, $BUTTON_FONT_COLOR);
&.critical {
@include button($BUTTON_COLOR_CRITICAL, $BUTTON_CRITICAL_FONT_COLOR);
@ -514,7 +519,7 @@ button, input[type="submit"], .linkbutton {
// not sure why this one has to be separate, but if it's included in the rule above everything breaks
input[type="file"]::file-selector-button {
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
@include button($BUTTON_COLOR, $BUTTON_FONT_COLOR);
margin: $MEDIUM_PADDING;
}
@ -527,7 +532,7 @@ $pagebutton_padding: $SMALL_PADDING $SMALL_PADDING !default;
$pagebutton_margin: $ZERO_PADDING !default;
$pagebutton_min_width: $BIG_PADDING !default;
.pagebutton {
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
@include button($BUTTON_COLOR, $BUTTON_FONT_COLOR);
padding: $pagebutton_padding;
margin: $pagebutton_margin;
display: inline-block;
@ -574,6 +579,7 @@ $text_input_border_radius: $DEFAULT_BORDER_RADIUS !default;
$text_input_padding: 7px $MEDIUM_PADDING !default;
$text_input_background: color.scale($ACCENT_COLOR, $lightness: 40%) !default;
$text_input_background_focus: color.scale($ACCENT_COLOR, $lightness: 60%) !default;
$text_input_font_color: $DEFAULT_FONT_COLOR !default;
input[type="text"], input[type="password"], textarea, select {
border: $text_input_border;
border-radius: $text_input_border_radius;
@ -581,6 +587,7 @@ input[type="text"], input[type="password"], textarea, select {
width: 100%;
box-sizing: border-box;
resize: vertical;
color: $text_input_font_color;
background-color: $text_input_background;
&:focus {
@ -593,17 +600,22 @@ $infobox_critical_color: rgb(237, 129, 129) !default;
$infobox_warn_color: #fbfb8d !default;
$infobox_border: 2px solid black !default;
$infobox_padding: $BIG_PADDING $MEDIUM_BIG_PADDING !default;
$infobox_info_font_color: $DEFAULT_FONT_COLOR !default;
$infobox_critical_font_color: $DEFAULT_FONT_COLOR !default;
$infobox_warn_font_color: $DEFAULT_FONT_COLOR !default;
.infobox {
border: $infobox_border;
background-color: $infobox_info_color;
padding: $infobox_padding;
color: $infobox_info_font_color;
&.critical {
background-color: $infobox_critical_color;
color: $infobox_critical_font_color;
}
&.warn {
background-color: $infobox_warn_color;
color: $infobox_warn_font_color;
}
}
@ -633,14 +645,17 @@ $thread_column_gap: $ZERO_PADDING !default;
}
$thread_locked_border: 2px outset $LIGHT !default;
$thread_locked_background: none !default;
.thread-sticky-container {
grid-area: thread-sticky-container;
border: $thread_locked_border;
background-color: $thread_locked_background;
}
.thread-locked-container {
grid-area: thread-locked-container;
border: $thread_locked_border;
background-color: $thread_locked_background;
}
.contain-svg {
@ -783,7 +798,7 @@ $colorful_table_tr_padding: $SMALL_PADDING $ZERO_PADDING !default;
$colorful_table_td_color: $BUTTON_COLOR !default;
.colorful-table tr td {
background-color: $BUTTON_COLOR;
background-color: $colorful_table_td_color;
padding: $colorful_table_tr_padding;
text-align: center;
}
@ -818,9 +833,11 @@ $topic_info_border: $DEFAULT_BORDER !default;
}
$topic_locked_border: $thread_locked_border !default;
$topic_locked_background: none !default;
.topic-locked-container {
grid-area: topic-locked-container;
border: $topic_locked_border;
background-color: $topic_locked_background;
}
$draggable_topic_background: $ACCENT_COLOR !default;
@ -878,7 +895,7 @@ $post_editing_context_margin: $BIG_PADDING $ZERO_PADDING !default;
$tab_button_color: $BUTTON_COLOR !default;
$tab_button_active_color: $BUTTON_COLOR_2 !default;
$tab_button_font_color: $DEFAULT_FONT_COLOR !default;
$tab_button_font_color: $BUTTON_FONT_COLOR !default;
.tab-button {
@include button($tab_button_color, $tab_button_font_color);
border-bottom: none;
@ -1003,7 +1020,7 @@ $post_accordion_content_background: $MAIN_BG !default;
.post-accordion-content {
padding-top: $post_accordion_content_padding_top;
padding-bottom: $post_accordion_content_padding_bottom;
background-color: $MAIN_BG;
background-color: $post_accordion_content_background;
}
$inbox_padding: $MEDIUM_PADDING !default;
@ -1048,7 +1065,7 @@ footer {
}
$reaction_button_active_color: $BUTTON_COLOR_2 !default;
$reaction_button_active_font_color: $DEFAULT_FONT_COLOR !default;
$reaction_button_active_font_color: $BUTTON_FONT_COLOR !default;
.reaction-button.active {
@include button($reaction_button_active_color, $reaction_button_active_font_color);
}