859 lines
18 KiB
SCSS
859 lines
18 KiB
SCSS
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
|
$textboxColor: mix($surface, $surfaceVariant, 80%);
|
|
$system: $secondary;
|
|
$onSystem: $onSecondary;
|
|
$chatgpt: $primary;
|
|
$onChatgpt: $onPrimary;
|
|
|
|
@mixin group-padding {
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.sidebar-right {
|
|
@include menu_decel;
|
|
@include elevation-border;
|
|
@include elevation2;
|
|
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
|
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
|
// min-height: 29.591rem;
|
|
background-color: $t_background;
|
|
padding: 1.023rem;
|
|
}
|
|
|
|
.sideright-show {
|
|
@include menu_decel;
|
|
}
|
|
|
|
.sideright-hide {
|
|
@include menu_accel;
|
|
margin-right: -30.682rem;
|
|
// opacity: 0;
|
|
}
|
|
|
|
.sidebar-left {
|
|
@include menu_decel;
|
|
@include elevation-border;
|
|
@include elevation2;
|
|
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
|
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
|
// min-height: 29.591rem;
|
|
background-color: $t_background;
|
|
padding: 1.023rem;
|
|
}
|
|
|
|
.sideleft-show {
|
|
@include menu_decel;
|
|
}
|
|
|
|
.sideleft-hide {
|
|
margin-left: -30.682rem;
|
|
// opacity: 0;
|
|
@include menu_accel;
|
|
}
|
|
|
|
.sidebar-group {
|
|
@include normal-rounding;
|
|
@include group-padding;
|
|
background-color: $t_surface;
|
|
}
|
|
|
|
.sidebar-group-nopad {
|
|
@include normal-rounding;
|
|
background-color: $t_surface;
|
|
}
|
|
|
|
.sidebar-group-invisible {
|
|
@include group-padding;
|
|
}
|
|
|
|
.sidebar-group-invisible-morehorizpad {
|
|
padding: 0.341rem 0.682rem;
|
|
}
|
|
|
|
.sidebar-togglesbox {
|
|
@include full-rounding;
|
|
@include group-padding;
|
|
background-color: $t_surface;
|
|
}
|
|
|
|
.sidebar-iconbutton {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
color: $onSurface;
|
|
min-width: 2.727rem;
|
|
min-height: 2.727rem;
|
|
}
|
|
|
|
.sidebar-iconbutton:hover,
|
|
.sidebar-iconbutton:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-iconbutton:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-button {
|
|
@include element_decel;
|
|
padding: 0rem $rounding_small;
|
|
background-color: $t_secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
}
|
|
|
|
.sidebar-button:hover,
|
|
.sidebar-button:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-button:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-button-active {
|
|
background-color: $primary;
|
|
color: $onPrimary;
|
|
}
|
|
|
|
.sidebar-button-active:hover,
|
|
.sidebar-button-active:focus {
|
|
background-color: mix($primary, $hovercolor, 70%);
|
|
}
|
|
|
|
.sidebar-button-active:active {
|
|
background-color: mix($primary, $hovercolor, 40%);
|
|
}
|
|
|
|
.sidebar-buttons-separator {
|
|
min-width: 0.068rem;
|
|
min-height: 0.068rem;
|
|
background-color: $onSurfaceVariant;
|
|
}
|
|
|
|
.sidebar-navrail {
|
|
// background-color: $t_surface;
|
|
padding: 0rem $rounding_medium;
|
|
}
|
|
|
|
.sidebar-navrail-btn>box>label {
|
|
@include full-rounding;
|
|
@include menu_decel;
|
|
}
|
|
|
|
.sidebar-navrail-btn:hover>box>label:first-child,
|
|
.sidebar-navrail-btn:focus>box>label:first-child {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-navrail-btn:active>box>label:first-child {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-navrail-btn-active>box>label:first-child {
|
|
background-color: $secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
}
|
|
|
|
.sidebar-navrail-btn-active:hover>box>label:first-child,
|
|
.sidebar-navrail-btn-active:focus>box>label:first-child {
|
|
background-color: mix($secondaryContainer, $hovercolor, 90%);
|
|
color: mix($onSecondaryContainer, $hovercolor, 90%);
|
|
}
|
|
|
|
.sidebar-sysinfo-grouppad {
|
|
padding: 1.159rem;
|
|
}
|
|
|
|
.sidebar-memory-ram-circprog {
|
|
@include fluent_decel_long;
|
|
min-width: $rounding_small;
|
|
min-height: 4.091rem;
|
|
padding: 0.409rem;
|
|
background-color: $secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
font-size: 0px;
|
|
}
|
|
|
|
.sidebar-memory-swap-circprog {
|
|
@include fluent_decel_long;
|
|
min-width: $rounding_small;
|
|
min-height: 2.255rem;
|
|
padding: 0.409rem;
|
|
margin: 0.918rem;
|
|
background-color: $secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
font-size: 0px;
|
|
}
|
|
|
|
.sidebar-cpu-circprog {
|
|
min-width: $rounding_small;
|
|
min-height: 3.409rem;
|
|
padding: 0.409rem;
|
|
background-color: $secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
@include fluent_decel_long;
|
|
font-size: 0px;
|
|
}
|
|
|
|
.sidebar-scrollbar {
|
|
trough {
|
|
@include full-rounding;
|
|
min-width: 0.545rem;
|
|
background-color: transparent;
|
|
}
|
|
|
|
slider {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
min-width: 0.273rem;
|
|
min-height: 2.045rem;
|
|
background-color: $t_onSurfaceVariant;
|
|
}
|
|
|
|
slider:hover,
|
|
slider:focus {
|
|
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
|
|
}
|
|
|
|
slider:active {
|
|
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
|
|
}
|
|
}
|
|
|
|
.sidebar-calendar-btn {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
min-height: 2.523rem;
|
|
min-width: 2.523rem;
|
|
color: $onSurface;
|
|
}
|
|
|
|
.sidebar-calendar-btn:hover,
|
|
.sidebar-calendar-btn:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-calendar-btn:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-calendar-btn-txt {
|
|
margin-left: -10.341rem;
|
|
margin-right: -10.341rem;
|
|
}
|
|
|
|
.sidebar-calendar-btn-today {
|
|
background-color: $primary;
|
|
color: $onPrimary;
|
|
}
|
|
|
|
.sidebar-calendar-btn-today:hover,
|
|
.sidebar-calendar-btn-today:focus {
|
|
background-color: mix($primary, $hovercolor, 70%);
|
|
}
|
|
|
|
.sidebar-calendar-btn-today:active {
|
|
background-color: mix($primary, $hovercolor, 40%);
|
|
}
|
|
|
|
.sidebar-calendar-btn-othermonth {
|
|
color: mix($onSurface, $surface, 50%);
|
|
}
|
|
|
|
.sidebar-calendar-header {
|
|
margin: 0.341rem;
|
|
}
|
|
|
|
.sidebar-calendar-monthyear-btn {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
padding: 0rem 0.682rem;
|
|
background-color: $t_surfaceVariant;
|
|
color: $onSurfaceVariant;
|
|
}
|
|
|
|
.sidebar-calendar-monthyear-btn:hover,
|
|
.sidebar-calendar-monthyear-btn:focus {
|
|
background-color: $hovercolor;
|
|
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
|
}
|
|
|
|
.sidebar-calendar-monthyear-btn:active {
|
|
background-color: $activecolor;
|
|
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
|
}
|
|
|
|
.sidebar-calendar-monthshift-btn {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
min-width: 2.045rem;
|
|
min-height: 2.045rem;
|
|
background-color: $t_surfaceVariant;
|
|
color: $onSurfaceVariant;
|
|
}
|
|
|
|
.sidebar-calendar-monthshift-btn:hover {
|
|
background-color: $hovercolor;
|
|
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
|
}
|
|
|
|
.sidebar-calendar-monthshift-btn:active {
|
|
background-color: $activecolor;
|
|
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
|
}
|
|
|
|
.sidebar-selector-tab {
|
|
@include small-rounding;
|
|
@include element_decel;
|
|
min-height: 2.5rem;
|
|
color: $onSurface;
|
|
}
|
|
|
|
.sidebar-selector-tab:hover,
|
|
.sidebar-selector-tab:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-selector-tab:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-selector-tab-active>box>label {
|
|
color: $primary;
|
|
}
|
|
|
|
.sidebar-selector-highlight-offset {
|
|
margin-top: -0.205rem;
|
|
margin-bottom: 0.205rem;
|
|
}
|
|
|
|
.sidebar-selector-highlight {
|
|
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
|
|
color: $primary;
|
|
// padding: 0rem 2.045rem;
|
|
min-height: 0.205rem;
|
|
}
|
|
|
|
.sidebar-todo-item {
|
|
padding-right: 0.545rem;
|
|
}
|
|
|
|
.sidebar-todo-item-even {
|
|
background-color: $t_t_surfaceVariant;
|
|
}
|
|
|
|
.sidebar-todo-item-action {
|
|
@include element_decel;
|
|
border-radius: 9999px;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
}
|
|
|
|
.sidebar-todo-item-action:hover,
|
|
.sidebar-todo-item-action:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-todo-item-action:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-todo-crosser {
|
|
transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms;
|
|
min-width: 0rem;
|
|
}
|
|
|
|
.sidebar-todo-crosser-crossed {
|
|
background-color: $onBackground;
|
|
}
|
|
|
|
.sidebar-todo-crosser-removed {
|
|
background-color: $error;
|
|
}
|
|
|
|
.sidebar-todo-new {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
color: $onSecondaryContainer;
|
|
margin: 0.341rem;
|
|
padding: 0.205rem 0.545rem;
|
|
border: 0.068rem solid $onSurface;
|
|
}
|
|
|
|
.sidebar-todo-new,
|
|
.sidebar-todo-new:focus {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
|
}
|
|
|
|
.sidebar-todo-new:active {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
|
}
|
|
|
|
.sidebar-todo-add {
|
|
@include element_decel;
|
|
@include small-rounding;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
color: $onSecondaryContainer;
|
|
border: 0.068rem solid $onSurface;
|
|
}
|
|
|
|
.sidebar-todo-add:hover,
|
|
.sidebar-todo-add:focus {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
|
}
|
|
|
|
.sidebar-todo-add:active {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
|
}
|
|
|
|
.sidebar-todo-add-available {
|
|
@include element_decel;
|
|
@include small-rounding;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
background-color: $primary;
|
|
color: $onPrimary;
|
|
border: 0.068rem solid $primary;
|
|
}
|
|
|
|
.sidebar-todo-add-available:hover,
|
|
.sidebar-todo-add-available:focus {
|
|
background-color: mix($primary, $onPrimary, 97%);
|
|
}
|
|
|
|
.sidebar-todo-add-available:active {
|
|
background-color: mix($primary, $onPrimary, 80%);
|
|
}
|
|
|
|
.sidebar-todo-entry {
|
|
@include element_decel;
|
|
@include small-rounding;
|
|
background-color: $surfaceVariant;
|
|
color: $onSurfaceVariant;
|
|
caret-color: $onSurfaceVariant;
|
|
margin: 0rem 0.341rem;
|
|
min-height: 1.773rem;
|
|
min-width: 0rem;
|
|
padding: 0.205rem 0.682rem;
|
|
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
|
|
}
|
|
|
|
.sidebar-todo-entry:focus {
|
|
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
|
|
}
|
|
|
|
.sidebar-module {
|
|
@include normal-rounding;
|
|
@include group-padding;
|
|
background-color: $l_l_t_surfaceVariant;
|
|
padding: 0.682rem;
|
|
}
|
|
|
|
.sidebar-module-btn-arrow {
|
|
@include full-rounding;
|
|
@include icon-material;
|
|
background-color: $l_l_t_surfaceVariant;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
|
|
&:hover {
|
|
background-color: $hovercolor;
|
|
}
|
|
}
|
|
|
|
.sidebar-module-scripts-button {
|
|
@include full-rounding;
|
|
@include icon-material;
|
|
background-color: $l_l_t_surfaceVariant;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
|
|
&:hover {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $activecolor;
|
|
}
|
|
}
|
|
|
|
$colorpicker_rounding: 0.341rem;
|
|
|
|
.sidebar-module-colorpicker-wrapper {
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-cursorwrapper {
|
|
padding: 0.341rem 0.136rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-hue {
|
|
min-height: 13.636rem;
|
|
min-width: 1.091rem;
|
|
border-radius: $colorpicker_rounding;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-hue-cursor {
|
|
background-color: $onBackground;
|
|
border: 0.136rem solid $onBackground;
|
|
min-height: 0.136rem;
|
|
margin-top: -0.136rem;
|
|
border-radius: $colorpicker_rounding;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-saturationandlightness-wrapper {
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-saturationandlightness {
|
|
min-height: 13.636rem;
|
|
min-width: 13.636rem;
|
|
border-radius: $colorpicker_rounding;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-saturationandlightness-cursorwrapper {
|
|
padding: 0.341rem;
|
|
margin-top: -0.409rem;
|
|
margin-left: -0.409rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-saturationandlightness-cursor {
|
|
@include full-rounding;
|
|
border: 0.136rem solid white;
|
|
min-width: 0.682rem;
|
|
min-height: 0.682rem;
|
|
margin-top: -0.409rem;
|
|
margin-left: -0.409rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-result-area {
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.sidebar-module-colorpicker-result-box {
|
|
border-radius: $colorpicker_rounding;
|
|
min-width: 2.045rem;
|
|
min-height: 0.682rem;
|
|
padding: 0.341rem;
|
|
}
|
|
|
|
.sidebar-chat-apiswitcher {
|
|
@include full-rounding;
|
|
@include group-padding;
|
|
background-color: $t_surface;
|
|
}
|
|
|
|
.sidebar-chat-apiswitcher-icon {
|
|
@include element_decel;
|
|
@include full-rounding;
|
|
min-width: 2.182rem;
|
|
min-height: 2.182rem;
|
|
font-size: 1.406rem;
|
|
color: $onSurface;
|
|
}
|
|
|
|
.sidebar-chat-apiswitcher-icon-enabled {
|
|
background-color: $secondaryContainer;
|
|
color: $onSecondaryContainer;
|
|
}
|
|
|
|
.sidebar-chat-viewport {
|
|
@include element_decel;
|
|
// margin: 0.682rem 0rem;
|
|
padding: 0.682rem 0rem;
|
|
}
|
|
|
|
.sidebar-chat-textarea {
|
|
@include normal-rounding;
|
|
background-color: $textboxColor;
|
|
color: $onSurfaceVariant;
|
|
padding: 0.682rem;
|
|
}
|
|
|
|
.sidebar-chat-entry {
|
|
color: $onSurfaceVariant;
|
|
caret-color: $onSurfaceVariant;
|
|
min-height: 1.773rem;
|
|
min-width: 0rem;
|
|
}
|
|
|
|
.sidebar-chat-wrapper {
|
|
transition: 400ms cubic-bezier(0.1, 1, 0, 1);
|
|
}
|
|
|
|
.sidebar-chat-wrapper-extended {
|
|
min-height: 7.500rem;
|
|
}
|
|
|
|
.sidebar-chat-send {
|
|
@include element_decel;
|
|
min-width: 1.705rem;
|
|
min-height: 1.705rem;
|
|
border-radius: $rounding_medium - 0.681rem;
|
|
}
|
|
|
|
.sidebar-chat-send:hover,
|
|
.sidebar-chat-send:focus {
|
|
background-color: $surfaceVariant;
|
|
}
|
|
|
|
.sidebar-chat-send:active {
|
|
background-color: mix($surfaceVariant, $onBackground, 80%);
|
|
}
|
|
|
|
.sidebar-chat-send-available {
|
|
background-color: $primary;
|
|
color: $onPrimary;
|
|
}
|
|
|
|
.sidebar-chat-send-available:hover,
|
|
.sidebar-chat-send-available:focus {
|
|
background-color: mix($primary, $onPrimary, 97%);
|
|
}
|
|
|
|
.sidebar-chat-send-available:active {
|
|
background-color: mix($primary, $onPrimary, 80%);
|
|
}
|
|
|
|
.sidebar-chat-message {
|
|
margin: 0.682rem;
|
|
}
|
|
|
|
.sidebar-chat-indicator {
|
|
@include element_decel;
|
|
@include full-rounding;
|
|
min-width: 0.136rem;
|
|
background-color: $onBackground;
|
|
}
|
|
|
|
.sidebar-chat-indicator-user {
|
|
background-color: $onBackground;
|
|
}
|
|
|
|
.sidebar-chat-indicator-bot {
|
|
background-color: $chatgpt;
|
|
}
|
|
|
|
.sidebar-chat-indicator-System {
|
|
background-color: $system;
|
|
}
|
|
|
|
.sidebar-chat-name {
|
|
@include titlefont;
|
|
padding: 0.341rem;
|
|
margin-left: -0.136rem;
|
|
padding-left: 0.818rem;
|
|
}
|
|
|
|
.sidebar-chat-txtblock {
|
|
margin-left: -0.136rem;
|
|
padding: 0.341rem;
|
|
padding-left: 0.818rem;
|
|
}
|
|
|
|
.sidebar-chat-txt {
|
|
@include readingfont;
|
|
}
|
|
|
|
.sidebar-chat-codeblock {
|
|
@include normal-rounding;
|
|
// @include elevation2;
|
|
background-color: $termbg;
|
|
color: $termfg;
|
|
margin: 0rem 0.682rem;
|
|
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
|
}
|
|
|
|
.sidebar-chat-codeblock-topbar {
|
|
@include mainfont;
|
|
margin: 0.273rem;
|
|
margin-bottom: 0rem;
|
|
background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
|
|
color: $onSecondaryContainer;
|
|
border-radius: $rounding_medium - 0.273rem;
|
|
border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
|
|
border-top-left-radius: $rounding_small + 0.068rem;
|
|
border-top-right-radius: $rounding_small + 0.068rem;
|
|
padding: 0.341rem 0.477rem;
|
|
}
|
|
|
|
.sidebar-chat-codeblock-topbar-txt {
|
|
@include full-rounding;
|
|
padding: 0.273rem;
|
|
}
|
|
|
|
.sidebar-chat-codeblock-topbar-btn {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
padding: 0.273rem 0.477rem;
|
|
}
|
|
|
|
.sidebar-chat-codeblock-topbar-btn:hover,
|
|
.sidebar-chat-codeblock-topbar-btn:focus {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
|
}
|
|
|
|
.sidebar-chat-codeblock-topbar-btn:active {
|
|
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
|
}
|
|
|
|
.sidebar-chat-codeblock-code {
|
|
@include techfont;
|
|
padding: 0.682rem;
|
|
}
|
|
|
|
.sidebar-chat-divider {
|
|
min-height: 1px;
|
|
background-color: $sidebar_chat_textboxareaColor;
|
|
margin: 0rem 0.545rem;
|
|
}
|
|
|
|
.sidebar-chat-welcome-txt {
|
|
margin: 0rem 3.409rem;
|
|
}
|
|
|
|
.sidebar-chat-settings-toggles {
|
|
margin: 0rem 5.455rem;
|
|
}
|
|
|
|
.sidebar-chat-welcome-icon {
|
|
@include full-rounding;
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.sidebar-chat-welcome-logo {
|
|
@include full-rounding;
|
|
@include element_decel;
|
|
@include icon-material;
|
|
min-height: 4.773rem;
|
|
min-width: 4.773rem;
|
|
font-size: 3.076rem;
|
|
background-color: $onBackground;
|
|
color: $background;
|
|
}
|
|
|
|
.sidebar-chat-chip {
|
|
@include element_decel;
|
|
@include small-rounding;
|
|
padding: 0.341rem 0.477rem;
|
|
}
|
|
|
|
.sidebar-chat-chip-action {
|
|
@include element_decel;
|
|
background-color: $textboxColor;
|
|
color: $onSurfaceVariant;
|
|
}
|
|
|
|
.sidebar-chat-chip-action:hover,
|
|
.sidebar-chat-chip-action:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-chat-chip-action:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-chat-chip-action-active {
|
|
color: $sidebar_chat_textboxareaColor;
|
|
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
|
}
|
|
|
|
.sidebar-chat-chip-toggle {
|
|
@include element_decel;
|
|
@include small-rounding;
|
|
padding: 0.341rem 0.477rem;
|
|
background-color: $textboxColor;
|
|
color: $onSurfaceVariant;
|
|
}
|
|
|
|
.sidebar-chat-chip-toggle:focus,
|
|
.sidebar-chat-chip-toggle:hover {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-chat-chip-toggle:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-pin {
|
|
@include small-rounding;
|
|
@include element_decel;
|
|
min-height: 2.386rem;
|
|
min-width: 2.386rem;
|
|
color: $onSurface;
|
|
}
|
|
|
|
.sidebar-pin:hover,
|
|
.sidebar-pin:focus {
|
|
background-color: $hovercolor;
|
|
}
|
|
|
|
.sidebar-pin:active {
|
|
background-color: $activecolor;
|
|
}
|
|
|
|
.sidebar-pin-enabled {
|
|
background-color: $primary;
|
|
|
|
label {
|
|
color: $onPrimary;
|
|
}
|
|
}
|
|
|
|
.sidebar-pin-enabled:hover,
|
|
.sidebar-pin-enabled:focus {
|
|
background-color: mix($primary, $onPrimary, 90%);
|
|
}
|
|
|
|
.sidebar-pin-enabled:active {
|
|
background-color: mix($primary, $onPrimary, 80%);
|
|
}
|
|
|
|
.sidebar-waifu-heading {
|
|
@include titlefont;
|
|
padding: 0.341rem;
|
|
margin-left: -0.136rem;
|
|
padding-left: 0.818rem;
|
|
}
|
|
|
|
.sidebar-waifu-content {
|
|
margin-left: 0.682rem;
|
|
}
|
|
|
|
.sidebar-waifu-txt {
|
|
@include readingfont;
|
|
margin-left: 0.682rem;
|
|
}
|
|
|
|
.sidebar-waifu-image {
|
|
margin-left: 0.682rem;
|
|
@include normal-rounding;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.sidebar-waifu-image-actions {
|
|
@include element_decel;
|
|
padding: 0.313rem;
|
|
}
|
|
|
|
$waifu_image_overlay_transparency: 0.7;
|
|
|
|
.sidebar-waifu-image-action {
|
|
@include full-rounding;
|
|
min-width: 1.875rem;
|
|
min-height: 1.875rem;
|
|
background-color: rgba(0, 0, 0,
|
|
$waifu_image_overlay_transparency ); // Fixed cuz on image
|
|
color: rgba(255, 255, 255, $waifu_image_overlay_transparency);
|
|
}
|
|
|
|
.sidebar-waifu-image-action:hover,
|
|
.sidebar-waifu-image-action:focus {
|
|
background-color: rgba(30, 30, 30, $waifu_image_overlay_transparency);
|
|
}
|
|
|
|
.sidebar-waifu-image-action:active {
|
|
background-color: rgba(60, 60, 60, $waifu_image_overlay_transparency);
|
|
}
|