fix: dark mode, timeline, logo colors
* changed variables from gray-* to dark mode compatible ones. * timeline style fixes * change logo with new black colors.
This commit is contained in:
Maharshi Patel
parent
26b4d58c80
commit
6590d24151
37 changed files with 232 additions and 131 deletions
|
|
@ -71,7 +71,9 @@
|
|||
}
|
||||
|
||||
.print-format-builder-section-head .section-label {
|
||||
@include get_textstyle("lg", "medium");
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--weight-medium);
|
||||
letter-spacing: 0.015em;
|
||||
color: var(--text-color);
|
||||
vertical-align: middle;
|
||||
margin-left: var(--margin-sm);
|
||||
|
|
|
|||
4
frappe/public/css/bootstrap.css
vendored
4
frappe/public/css/bootstrap.css
vendored
|
|
@ -2622,8 +2622,8 @@ tbody.collapse.in {
|
|||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
|
||||
box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
|
||||
}
|
||||
.dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<style>
|
||||
polygon {
|
||||
fill: #0E253A;
|
||||
fill: #171717;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
polygon {
|
||||
fill: #0089FF;
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="favicon" transform="translate(110.000000, 66.000000)" fill="#0089FF" fill-rule="nonzero">
|
||||
<g id="favicon" transform="translate(110.000000, 66.000000)" fill="#171717" fill-rule="nonzero">
|
||||
<polygon id="Path" points="0 0 0 47.1807692 57.2278846 47.1807692 167.313462 47.1807692 179.203846 47.1807692 179.203846 0"></polygon>
|
||||
<polygon id="Path" points="0 120.297115 0 268.052885 57.2278846 268.052885 57.2278846 167.477885 167.313462 167.477885 167.313462 120.297115 57.2278846 120.297115"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 877 B After Width: | Height: | Size: 877 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#0089FF"/>
|
||||
<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#171717"/>
|
||||
<path d="M68.4319 25H35V33.794H68.4319V25Z" fill="white"/>
|
||||
<path d="M35 47.4357V75H45.671V56.2445H66.2149V47.4357H35Z" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 399 B After Width: | Height: | Size: 399 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3 KiB |
|
|
@ -79,7 +79,7 @@ function on_drag_end(evt) {
|
|||
display: block !important;
|
||||
background-color: var(--bg-light-gray);
|
||||
border-radius: var(--border-radius);
|
||||
border: 0.5px solid var(--gray-400);
|
||||
border: 0.5px solid var(--dark-border-color);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
<div class="mt-2 text-center">
|
||||
<button class="btn btn-file-upload" @click="browse_files">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
|
||||
<path d="M13.5 22V19" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.5 22V19" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.5 22H19.5" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 16H22.5" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M13.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.5 22H19.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 16H22.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('My Device') }}</div>
|
||||
</button>
|
||||
|
|
@ -34,26 +34,26 @@
|
|||
>
|
||||
<button class="btn btn-file-upload" v-if="!disable_file_browser" @click="show_file_browser = true">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
|
||||
<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--gray-900)" stroke-miterlimit="10" stroke-linecap="square"/>
|
||||
<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--gray-900)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="square"/>
|
||||
<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Library') }}</div>
|
||||
</button>
|
||||
<button class="btn btn-file-upload" v-if="allow_web_link" @click="show_web_link = true">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
|
||||
<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Link') }}</div>
|
||||
</button>
|
||||
<button v-if="allow_take_photo" class="btn btn-file-upload" @click="capture_image">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
|
||||
<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--gray-900)" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="16" r="2.5" stroke="var(--gray-900)"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--text-color)" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="16" r="2.5" stroke="var(--text-color)"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Camera') }}</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,9 @@ class FormTimeline extends BaseTimeline {
|
|||
this.timeline_items.push(this.get_modified_message());
|
||||
this.timeline_items.push(...this.get_communication_timeline_contents());
|
||||
this.timeline_items.push(...this.get_comment_timeline_contents());
|
||||
this.timeline_wrapper.addClass("only_communication_timeline");
|
||||
if (!this.only_communication) {
|
||||
this.timeline_wrapper.removeClass("only_communication_timeline");
|
||||
this.timeline_items.push(...this.get_view_timeline_contents());
|
||||
this.timeline_items.push(...this.get_energy_point_timeline_contents());
|
||||
this.timeline_items.push(...this.get_version_timeline_contents());
|
||||
|
|
@ -166,6 +168,8 @@ class FormTimeline extends BaseTimeline {
|
|||
this.timeline_items.push(...this.get_info_timeline_contents());
|
||||
this.timeline_items.push(...this.get_milestone_timeline_contents());
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
get_view_timeline_contents() {
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@ frappe.views.ListSidebar = class ListSidebar {
|
|||
this.insights_banner = $(`
|
||||
<div style="position: relative;">
|
||||
<div class="pr-3">
|
||||
${message} <a href="${link}" target="_blank" style="color: var(--primary-color)">${cta} → </a>
|
||||
${message} <a href="${link}" target="_blank" style="color: var(--text-color)">${cta} → </a>
|
||||
</div>
|
||||
<div style="position: absolute; top: -1px; right: -4px; cursor: pointer;" title="Dismiss"
|
||||
onclick="localStorage.setItem('show_insights_banner', 'false') || this.parentElement.remove()">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<header class="navbar navbar-expand sticky-top" role="navigation">
|
||||
<div class="container">
|
||||
<a class="navbar-brand navbar-home" href="/app">
|
||||
<img class="app-logo" style="width: {{ navbar_settings.logo_width || 32 }}px" src="{{ frappe.boot.app_logo_url }}">
|
||||
<img class="app-logo" style="width: {{ navbar_settings.logo_width || 28 }}px" src="{{ frappe.boot.app_logo_url }}">
|
||||
</a>
|
||||
<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
|
|
|
|||
|
|
@ -7,10 +7,15 @@
|
|||
.btn {
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
background-color: var(--neutral-white);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: none;
|
||||
@include get_textstyle("base", "regular");
|
||||
|
||||
&:active {
|
||||
// override #dadada that comes from bootstrap (probably) to support dark theme.
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
&.icon-btn {
|
||||
height: var(--btn-height);
|
||||
padding: 0px;
|
||||
|
|
@ -65,7 +70,7 @@
|
|||
background-color: var(--control-bg);
|
||||
color: var(--text-color);
|
||||
&:hover, &:active {
|
||||
background-color: var(--gray-300);
|
||||
background-color: var(--btn-default-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -74,17 +79,17 @@
|
|||
background-color: var(--control-bg);
|
||||
color: var(--text-color);
|
||||
&:hover, &:active {
|
||||
background: var(--gray-300);
|
||||
background: var(--btn-default-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
background-color: var(--btn-primary);
|
||||
color: var(--neutral);
|
||||
white-space: nowrap;
|
||||
--icon-stroke: currentColor;
|
||||
--icon-fill-bg: var(--primary);
|
||||
--icon-fill-bg: var(--btn-primary);
|
||||
}
|
||||
|
||||
.btn.btn-danger {
|
||||
|
|
@ -102,7 +107,7 @@
|
|||
|
||||
[data-theme="dark"] {
|
||||
.btn-primary-light {
|
||||
background-color: var(--bg-dark-blue);
|
||||
background-color: var(--bg-dark-gray);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -496,7 +496,7 @@ button.data-pill {
|
|||
background-color: var(--fg-color);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-color);
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.pill-label {
|
||||
|
|
|
|||
|
|
@ -78,6 +78,8 @@ $disabled-input-height: 22px;
|
|||
// Layout Colors
|
||||
--bg-color: white;
|
||||
--fg-color: white;
|
||||
--subtle-accent: var(--gray-50);
|
||||
--subtle-fg: var(--gray-100);
|
||||
--navbar-bg: white;
|
||||
--fg-hover-color: var(--gray-100);
|
||||
--card-bg: var(--fg-color);
|
||||
|
|
@ -93,6 +95,7 @@ $disabled-input-height: 22px;
|
|||
--awesomplete-hover-bg: var(--control-bg);
|
||||
|
||||
// Button Colors
|
||||
--btn-primary: var(--gray-900);
|
||||
--btn-default-bg: var(--gray-100);
|
||||
--btn-default-hover-bg: var(--gray-300);
|
||||
|
||||
|
|
@ -111,7 +114,7 @@ $disabled-input-height: 22px;
|
|||
|
||||
--btn-group-border-color: var(--gray-300);
|
||||
|
||||
--field-placeholder-color: var(--gray-50);
|
||||
--placeholder-color: var(--gray-50);
|
||||
|
||||
--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);
|
||||
|
||||
|
|
@ -130,9 +133,15 @@ $disabled-input-height: 22px;
|
|||
// Checkbox
|
||||
--checkbox-right-margin: var(--margin-xs);
|
||||
--checkbox-size: 14px;
|
||||
--checkbox-color: var(--neutral-black);
|
||||
|
||||
--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
|
||||
--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
|
||||
|
||||
|
||||
// switch
|
||||
--switch-bg: var(--gray-300);
|
||||
|
||||
// "diff" colors
|
||||
--diff-added: var(--green-100);
|
||||
--diff-removed: var(--red-100);
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
|
||||
.level-item {
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--gray-700);
|
||||
color: var(--text-muted);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ html, body {
|
|||
|
||||
.label-area {
|
||||
@include get_textstyle("sm", "medium");
|
||||
color: var(--gray-800);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.input-area, .disp-area {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.grid-heading-row {
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
color: var(--gray-600);
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
@include get_textstyle("sm", "regular");
|
||||
height: 32px;
|
||||
padding: 0 !important;
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
.grid-body .data-row {
|
||||
@include get_textstyle("sm", "regular");
|
||||
color: var(--gray-700)
|
||||
color: var(--text-muted)
|
||||
}
|
||||
|
||||
.grid-empty,
|
||||
|
|
@ -199,7 +199,8 @@
|
|||
}
|
||||
|
||||
.editable-row {
|
||||
--control-bg: var(--neutral-white);
|
||||
// TODO: Dark and Light Mode
|
||||
--control-bg: var(--neutral);
|
||||
--input-disabled-bg: var(--gray-50);
|
||||
.grid-static-col {
|
||||
padding: 0px !important;
|
||||
|
|
@ -229,7 +230,7 @@
|
|||
|
||||
.link-btn {
|
||||
top: 5px;
|
||||
background-color: var(--neutral-white);
|
||||
background-color: var(--neutral);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ use.like-icon {
|
|||
}
|
||||
|
||||
#icon-close {
|
||||
fill: var(--gray-600);
|
||||
fill: var(--invert-neutral);
|
||||
}
|
||||
|
||||
.icon > .close-alt {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
.ql-snow .ql-toolbar .ql-picker-item:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: black;
|
||||
color: var(--invert-neutral);
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
|
||||
fill: black;
|
||||
fill: var(--invert-neutral);
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||
|
|
@ -107,14 +107,14 @@
|
|||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||
stroke: black;
|
||||
stroke: var(--invert-neutral);
|
||||
}
|
||||
|
||||
.ql-toolbar.ql-snow {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
background-color: var(--gray-50);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
background-color: var(--subtle-accent);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@
|
|||
--timeline-item-bottom-margin: var(--margin-sm);
|
||||
--timeline-content-max-width: 700px;
|
||||
--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
|
||||
--timeline-badge-color: var(--gray-900);
|
||||
--timeline-badge-bg: var(--gray-100);
|
||||
|
||||
// mentions
|
||||
--user-mention-bg-color: var(--fg-color);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
$check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
||||
[data-theme="dark"] {
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #f7fafc;
|
||||
--gray-200: #edf2f7;
|
||||
--gray-300: #c9d0d6;
|
||||
--gray-400: #7a838c;
|
||||
--gray-500: #575e66;
|
||||
--gray-600: #434a52;
|
||||
--gray-700: #242a30;
|
||||
--gray-800: #1c2126;
|
||||
--gray-900: #161a1f;
|
||||
--neutral: var(--neutral-black);
|
||||
--invert-neutral: var(--neutral-white);
|
||||
// TODO: Update Pallete for dark mode.
|
||||
--gray-700: #383838;
|
||||
--gray-800: #232323;
|
||||
|
||||
// Type Colors
|
||||
--text-dark: var(--gray-900);
|
||||
--text-muted: var(--gray-400);
|
||||
--text-light: var(--gray-300);
|
||||
--text-dark: var(--gray-900);
|
||||
--text-color: var(--gray-50);
|
||||
--heading-color: var(--gray-50);
|
||||
|
||||
|
|
@ -27,23 +23,28 @@
|
|||
|
||||
// Layout Colors
|
||||
--bg-color: var(--gray-900);
|
||||
--fg-color: var(--gray-800);
|
||||
--navbar-bg: var(--gray-800);
|
||||
--fg-hover-color: var(--gray-700);
|
||||
--card-bg: var(--gray-800);
|
||||
--fg-color: var(--gray-900);
|
||||
--subtle-accent: var(--gray-700);
|
||||
--subtle-fg: var(--gray-800);
|
||||
--navbar-bg: var(--gray-900);
|
||||
--fg-hover-color: var(--gray-800);
|
||||
--card-bg: var(--gray-900);
|
||||
--disabled-text-color: var(--gray-400);
|
||||
--disabled-control-bg: var(--gray-700);
|
||||
--control-bg: var(--gray-700);
|
||||
--control-bg: var(--gray-800);
|
||||
--control-bg-on-gray: var(--gray-800);
|
||||
--awesomebar-focus-bg: var(--control-bg);
|
||||
--awesomplete-hover-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-900);
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: var(--bg-color);
|
||||
|
||||
// Button Colors
|
||||
--btn-default-bg: var(--gray-700);
|
||||
--btn-default-hover-bg: var(--gray-500);
|
||||
--btn-default-bg: var(--gray-800);
|
||||
--btn-default-hover-bg: var(--gray-700);
|
||||
--btn-primary: var(--gray-300);
|
||||
|
||||
|
||||
|
||||
// Background Text Color Pairs
|
||||
--bg-blue: var(--blue-600);
|
||||
|
|
@ -53,11 +54,11 @@
|
|||
--bg-yellow: var(--yellow-700);
|
||||
--bg-orange: var(--orange-700);
|
||||
--bg-red: var(--red-600);
|
||||
--bg-gray: var(--gray-400);
|
||||
--bg-grey: var(--gray-400);
|
||||
--bg-gray: var(--gray-600);
|
||||
--bg-grey: var(--gray-600);
|
||||
--bg-darkgrey: var(--gray-600);
|
||||
--bg-dark-gray: var(--gray-600);
|
||||
--bg-light-gray: var(--gray-700);
|
||||
--bg-dark-gray: var(--gray-500);
|
||||
--bg-light-gray: var(--gray-800);
|
||||
--bg-purple: var(--purple-700);
|
||||
--bg-pink: var(--pink-700);
|
||||
--bg-cyan: var(--cyan-800);
|
||||
|
|
@ -93,16 +94,19 @@
|
|||
--scrollbar-thumb-color: var(--gray-600);
|
||||
--scrollbar-track-color: var(--gray-700);
|
||||
|
||||
--timeline-badge-color: var(--gray-900);
|
||||
--timeline-badge-bg: var(--gray-500);
|
||||
|
||||
--shadow-inset: var(--fg-color);
|
||||
--border-color: var(--gray-700);
|
||||
--border-color: var(--gray-800);
|
||||
--dark-border-color: var(--gray-600);
|
||||
--table-border-color: var(--gray-200);
|
||||
--table-border-color: var(--border-color);
|
||||
--highlight-color: var(--gray-700);
|
||||
--yellow-highlight-color: var(--yellow-700);
|
||||
|
||||
--btn-group-border-color: var(--gray-800);
|
||||
|
||||
--field-placeholder-color: var(--gray-700);
|
||||
--placeholder-color: var(--gray-700);
|
||||
|
||||
--highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
|
||||
|
||||
|
|
@ -112,12 +116,34 @@
|
|||
--diff-added: var(--green-800);
|
||||
--diff-removed: var(--red-800);
|
||||
|
||||
// sidebar toggle
|
||||
.page-title .sidebar-toggle-btn {
|
||||
--icon-stroke: var(--gray-300);
|
||||
}
|
||||
|
||||
// input
|
||||
--input-disabled-bg: none;
|
||||
|
||||
// checkbox
|
||||
--checkbox-color: var(--neutral-white);
|
||||
--checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
|
||||
--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:checked, &.disabled-selected, &:disabled:checked {
|
||||
background-image: $check-icon-dark, var(--checkbox-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
// switch
|
||||
--switch-bg: var(--gray-500);
|
||||
|
||||
|
||||
// grid
|
||||
.grid-body .editable-row {
|
||||
--control-bg: var(--gray-900);
|
||||
--input-disabled-bg: var(--gray-800);
|
||||
}
|
||||
color-scheme: dark;
|
||||
|
||||
.frappe-card {
|
||||
|
|
@ -133,7 +159,7 @@
|
|||
.modal,
|
||||
.form-in-grid {
|
||||
--control-bg: var(--gray-800);
|
||||
--border-color: var(--gray-600);
|
||||
--border-color: var(--gray-800);
|
||||
}
|
||||
|
||||
.print-format {
|
||||
|
|
@ -153,6 +179,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.comment-input-wrapper .ql-editor.ql-blank::before {
|
||||
color: var(--text-on-gray);
|
||||
}
|
||||
// --appreciation-color: var(--dark-green-100);
|
||||
// --appreciation-bg: var(--dark-green-600);
|
||||
// --criticism-color: var(--red-100);
|
||||
|
|
@ -161,7 +190,7 @@
|
|||
// Frappe Charts Colors
|
||||
.chart-container {
|
||||
--charts-label-color: var(--gray-300);
|
||||
--charts-axis-line-color: var(--gray-500);
|
||||
--charts-axis-line-color: var(--subtle-fg);
|
||||
|
||||
--charts-stroke-width: 5px;
|
||||
--charts-dataset-circle-stroke: #ffffff;
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ body {
|
|||
// Overrides for each widgets
|
||||
&.dashboard-widget-box {
|
||||
min-height: 240px;
|
||||
border: 1px solid var(--gray-300);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.widget-head {
|
||||
padding: 4px 8px;
|
||||
|
|
@ -348,16 +348,17 @@ body {
|
|||
&.onboarding-widget-box {
|
||||
margin-bottom: var(--margin-2xl);
|
||||
padding: var(--padding-lg) !important;
|
||||
background-color: var(--neutral-white);
|
||||
border: 1px solid var(--gray-200);
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
&.edit-mode:hover {
|
||||
background-color: var(--bg-color);
|
||||
|
||||
.onboarding-step {
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--bg-color);
|
||||
&:hover,
|
||||
&.complete {
|
||||
background-color: var(--fg-hover-color);
|
||||
|
||||
.step-index.step-pending {
|
||||
background-color: var(--fg-color);
|
||||
|
|
@ -416,7 +417,7 @@ body {
|
|||
}
|
||||
|
||||
.onboarding-step-body {
|
||||
color: var(--gray-700);
|
||||
color: var(--text-muted);
|
||||
|
||||
p {
|
||||
@include get_textstyle("base", "regular");
|
||||
|
|
@ -458,12 +459,7 @@ body {
|
|||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
|
||||
.step-index {
|
||||
background-color: var(--gray-100);
|
||||
}
|
||||
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
&.active .step-skip {
|
||||
visibility: visible;
|
||||
|
|
@ -503,7 +499,7 @@ body {
|
|||
|
||||
&.skipped {
|
||||
color: var(--text-light);
|
||||
background-color: var(--gray-50);
|
||||
background-color: var(--bg-color);
|
||||
.step-index.step-skipped {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -579,7 +575,7 @@ body {
|
|||
}
|
||||
|
||||
padding: 10px;
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
|
|
@ -641,7 +637,7 @@ body {
|
|||
|
||||
.widget-head .widget-label .widget-title {
|
||||
@include get_textstyle("lg", "semibold");
|
||||
color: var(--gray-800) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -649,7 +645,7 @@ body {
|
|||
cursor: pointer;
|
||||
min-height: 84px;
|
||||
padding: var(--number-card-padding);
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.widget-head {
|
||||
.widget-title {
|
||||
|
|
@ -1141,7 +1137,7 @@ body {
|
|||
|
||||
// widgets
|
||||
.widget.number-widget-box {
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
min-height: 50px;
|
||||
@include get_textstyle("base", "regular");
|
||||
z-index: 1019;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter-area {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.std-form-layout > .form-layout > .form-page {
|
||||
border-radius: var(--border-radius-md);
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
.form-section-description {
|
||||
margin-bottom: 10px;
|
||||
@include get_textstyle("base", "regular");
|
||||
color: var(--gray-900);
|
||||
color: var(--text-black);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@extend .head-title;
|
||||
@include get_textstyle("lg", "semibold");
|
||||
color: var(--gray-800);
|
||||
color: var(--text-color);
|
||||
width: 100%;
|
||||
padding: var(--padding-sm) var(--padding-md);
|
||||
margin: 0;
|
||||
|
|
@ -133,6 +133,7 @@
|
|||
}
|
||||
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
color: var(--text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +154,7 @@
|
|||
padding-right: 0;
|
||||
.ql-editor {
|
||||
background-color: var(--bg-color) !important;
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
min-height: 24px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
|
@ -193,7 +194,7 @@
|
|||
.count {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-regular);
|
||||
background-color: var(--bg-color);
|
||||
background-color: var(--neutral-white);
|
||||
border-radius: var(--border-radius-full);
|
||||
color: var(--gray-700);
|
||||
padding: 0 var(--padding-xs);
|
||||
|
|
@ -285,10 +286,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin form-message-background($color) {
|
||||
border: 1px solid var(--#{$color}-100);
|
||||
color: var(--#{$color}-800);
|
||||
background: var(--#{$color}-50);
|
||||
@mixin form-message-background($color, $theme: "light") {
|
||||
@if $theme == "light" {
|
||||
border: 1px solid var(--#{$color}-100);
|
||||
color: var(--#{$color}-800);
|
||||
background: var(--#{$color}-100);
|
||||
}
|
||||
@if $theme == "dark" {
|
||||
border: 1px solid var(--#{$color}-700);
|
||||
color: var(--#{$color}-100);
|
||||
background: var(--#{$color}-800);
|
||||
}
|
||||
}
|
||||
|
||||
.form-message {
|
||||
|
|
@ -327,6 +335,28 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] .form-message {
|
||||
|
||||
&.blue {
|
||||
@include form-message-background("blue", "dark");
|
||||
}
|
||||
|
||||
&.green {
|
||||
@include form-message-background("green", "dark");
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
@include form-message-background("yellow", "dark");
|
||||
}
|
||||
|
||||
&.orange {
|
||||
@include form-message-background("orange", "dark");
|
||||
}
|
||||
|
||||
&.red {
|
||||
@include form-message-background("red", "dark");
|
||||
}
|
||||
}
|
||||
|
||||
.help-box {
|
||||
margin-top: 4px;
|
||||
|
|
|
|||
|
|
@ -48,12 +48,12 @@
|
|||
display: flex !important;
|
||||
}
|
||||
.dt-row-header {
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
|
||||
.dt-cell--header .dt-cell__content {
|
||||
font-weight: normal;
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -392,6 +392,9 @@ kbd {
|
|||
|
||||
.table {
|
||||
color: var(--text-color);
|
||||
th, td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.appreciation {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
.list-row-head {
|
||||
@extend .list-row;
|
||||
cursor: default;
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
height: 30px;
|
||||
padding: 8px, 10px, 8px, 0px;
|
||||
margin: 8px 5px;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
height: $navbar-height;
|
||||
background: var(--navbar-bg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0;
|
||||
.navbar-brand {
|
||||
margin-right: 0;
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
.dropdown-item {
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
|
||||
.navbar-home {
|
||||
img {
|
||||
max-height: 32px;
|
||||
max-height: 28px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
overflow: hidden;
|
||||
@include card($padding: 0px);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--gray-200)
|
||||
border: 1px solid var(--border-color)
|
||||
}
|
||||
|
||||
.page-head {
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ body[data-route^="Module"] .main-menu {
|
|||
.sidebar-image-section {
|
||||
width: min(100%, 170px);
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
|
||||
.sidebar-image {
|
||||
|
|
@ -383,7 +383,7 @@ body[data-route^="Module"] .main-menu {
|
|||
max-width: 100%;
|
||||
.data-pill {
|
||||
justify-content: space-between;
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--subtle-fg);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.selected {
|
||||
.background {
|
||||
box-shadow: 0 0 0pt 3pt var(--primary-color);
|
||||
box-shadow: var(--focus-default);
|
||||
}
|
||||
|
||||
.preview-check {
|
||||
|
|
@ -85,6 +85,19 @@
|
|||
}
|
||||
|
||||
// TODO: Replace with better alternative
|
||||
[data-theme="dark"] {
|
||||
.background {
|
||||
border: 1px solid var(--gray-500);
|
||||
}
|
||||
.selected {
|
||||
.preview-check {
|
||||
background-color: var(--white) !important;
|
||||
.icon use {
|
||||
stroke: var(--primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-is-auto-theme="true"] {
|
||||
.background::after {
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ $threshold: 34;
|
|||
--zero-px: 0px;
|
||||
top: unquote("clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))");
|
||||
left: calc(-1 * (#{$badge-size} / 2));
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--timeline-badge-bg);
|
||||
@extend .center-content;
|
||||
--icon-stroke: var(--gray-900);
|
||||
--icon-stroke: var(--timeline-badge-color);
|
||||
}
|
||||
|
||||
.new-timeline {
|
||||
|
|
@ -23,15 +23,17 @@ $threshold: 34;
|
|||
@include media-breakpoint-down(xs) {
|
||||
padding-left: calc(var(--padding-sm) + var(--timeline-item-icon-size) / 2);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
top: 40px; // TODO: get top and bottom programmatically
|
||||
top: 90px; // TODO: get top and bottom programmatically
|
||||
left: calc(var(--timeline-item-icon-size) / 2);
|
||||
position: absolute;
|
||||
border-left: 1px solid var(--dark-border-color);
|
||||
bottom: calc(-1 * var(--timeline-item-bottom-margin) + 25px);
|
||||
}
|
||||
&.only_communication_timeline::before {
|
||||
top: 130px;
|
||||
}
|
||||
.timeline-dot {
|
||||
@include timeline-badge(16px);
|
||||
left: calc(-1.25 * var(--timeline-item-left-margin) / 2);
|
||||
|
|
@ -95,9 +97,9 @@ $threshold: 34;
|
|||
margin-left: var(--margin-md);
|
||||
&.frappe-card {
|
||||
color: var(--gray-900);
|
||||
background-color: var(--neutral-white);
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--gray-300);
|
||||
border: 1px solid var(--border-color);
|
||||
margin: calc(var(--timeline-item-bottom-margin) + var(--padding-md)) 0;
|
||||
margin-left: var(--margin-lg);
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ $input-btn-focus-width: 2px;
|
|||
// dropdown
|
||||
$dropdown-color: var(--text-color);
|
||||
$dropdown-bg: var(--fg-color);
|
||||
$dropdown-border-color: var(--dark-border-color);
|
||||
$dropdown-border-color: var(--border-color);
|
||||
$dropdown-link-color: var(--text-color);
|
||||
$dropdown-link-hover-color: var(--text-color);
|
||||
$dropdown-link-hover-bg: var(--fg-hover-color);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// change icon to Espresso
|
||||
// TODO: change icon to Espresso
|
||||
$check-icon: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
||||
|
||||
input[type="checkbox"] {
|
||||
|
|
@ -45,7 +45,7 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
&.disabled-selected, &:disabled:checked {
|
||||
background-color: var(--gray-500);
|
||||
background-color: var(--checkbox-color);
|
||||
background-image: $check-icon;
|
||||
background-size: 57%;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -61,14 +61,14 @@ input[type="checkbox"] {
|
|||
width: 26px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
|
|
@ -77,11 +77,11 @@ input[type="checkbox"] {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--gray-300);
|
||||
background-color: var(--switch-bg);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
|
@ -89,15 +89,15 @@ input[type="checkbox"] {
|
|||
width: 12px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: var(--neutral-white);
|
||||
background-color: var(--neutral);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--gray-900);
|
||||
background-color: var(--invert-neutral);
|
||||
}
|
||||
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: var(--focus-default)
|
||||
}
|
||||
|
|
@ -116,7 +116,7 @@ input[type="checkbox"] {
|
|||
label.switch {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -21,6 +21,8 @@ $light-yellow: #FEF4E2;
|
|||
:root {
|
||||
--neutral-white: #ffffff;
|
||||
--neutral-black: #000000;
|
||||
--neutral: var(--neutral-white);
|
||||
--invert-neutral: var(--neutral-black);
|
||||
|
||||
--gray-50: #f8f8f8;
|
||||
--gray-100: #f3f3f3;
|
||||
|
|
|
|||
|
|
@ -43,11 +43,12 @@
|
|||
|
||||
|
||||
// font color
|
||||
--heading-color: var(--gray-900);
|
||||
--text-black: var(--gray-900);
|
||||
--text-color: var(--gray-800);
|
||||
--text-muted: var(--gray-700);
|
||||
--text-light: var(--gray-600);
|
||||
--text-dark: var(--fg-color);
|
||||
--text-color: var(--gray-800);
|
||||
--heading-color: var(--gray-900);
|
||||
}
|
||||
|
||||
$weight-list: "regular", "medium", "semibold", "bold", "black";
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
.reply-card {
|
||||
padding: 1.25rem 0;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.reply-card:last-of-type {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue