add otomotone theme
This commit is contained in:
@ -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);
|
||||
}
|
||||
|
||||
83
sass/otomotone.scss
Normal file
83
sass/otomotone.scss
Normal file
@ -0,0 +1,83 @@
|
||||
$fc: #e6e6e6;
|
||||
$fci: black;
|
||||
|
||||
$lightish_accent: #503250;
|
||||
$lightish_accent2: #502d50;
|
||||
$dark_accent: #231c23;
|
||||
|
||||
$warn: #eaea6a;
|
||||
$crit: #d53232;
|
||||
|
||||
@use 'default' with (
|
||||
$ACCENT_COLOR: #9b649b,
|
||||
|
||||
$MAIN_BG: #220d16,
|
||||
$DARK_1: $lightish_accent2,
|
||||
$DARK_3: #302731,
|
||||
|
||||
$LIGHT_2: #ae6bae,
|
||||
$LIGHT: $lightish_accent,
|
||||
|
||||
$DEFAULT_FONT_COLOR: $fc,
|
||||
$DEFAULT_FONT_COLOR_INVERSE: $fci,
|
||||
|
||||
$BUTTON_COLOR: #3c283c,
|
||||
$BUTTON_COLOR_2: #8a5584,
|
||||
$BUTTON_FONT_COLOR: $fc,
|
||||
$BUTTON_COLOR_WARN: $warn,
|
||||
$BUTTON_WARN_FONT_COLOR: $fci,
|
||||
$BUTTON_COLOR_CRITICAL: $crit,
|
||||
$BUTTON_CRITICAL_FONT_COLOR: $fc,
|
||||
$ACCORDION_COLOR: #7d467d,
|
||||
|
||||
$bottomnav_color: $dark_accent,
|
||||
|
||||
$topic_info_background: $dark_accent,
|
||||
$topic_locked_background: $lightish_accent,
|
||||
$thread_locked_background: $lightish_accent,
|
||||
$thread_locked_border: 2px outset $dark_accent,
|
||||
|
||||
$site_title_color: white,
|
||||
$topnav_color: #303030,
|
||||
|
||||
$link_color: #e87fe1,
|
||||
$link_color_visited: #ed4fb1,
|
||||
|
||||
$post_info_background: #412841,
|
||||
$post_content_background: $dark_accent,
|
||||
|
||||
$thread_info_background_color: $dark_accent,
|
||||
|
||||
$post_reactions_background: $lightish_accent,
|
||||
|
||||
$post_accordion_content_background: #2d212d,
|
||||
|
||||
$babycode_guide_toc_background: #3c233c,
|
||||
$babycode_guide_section_background: $dark_accent,
|
||||
|
||||
$text_input_background: #371e37,
|
||||
$text_input_background_focus: #514151,
|
||||
$text_input_font_color: $fc,
|
||||
|
||||
$colorful_table_th_color: $lightish_accent,
|
||||
$colorful_table_td_color: $dark_accent,
|
||||
|
||||
$lightbox_background: $lightish_accent,
|
||||
|
||||
$infobox_info_color: #775891,
|
||||
$infobox_warn_color: $warn,
|
||||
$infobox_warn_font_color: $fci,
|
||||
$infobox_critical_color: $crit,
|
||||
|
||||
$tab_content_background: $lightish_accent,
|
||||
$tab_button_active_color: #8a5584,
|
||||
);
|
||||
|
||||
#topnav {
|
||||
margin-bottom: 10px;
|
||||
border: 10px solid rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user