the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2024-12-27 01:28:56 +08:00
Code Issues Projects Releases Packages Wiki Activity

Move bootstrap @LESS variables to CSS var()

Browse source
This commit is contained in:
the-djmaze 2022-11-02 20:49:38 +01:00
parent 874bfa852b
commit 0ef8af21b1
19 changed files with 132 additions and 266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dev/Styles/@Main.less
View file

@ -14,7 +14,6 @@
@import "../../vendors/bootstrap/less/alerts.less";
@import "../../vendors/bootstrap/less/code.less";
@import "../../vendors/bootstrap/less/dropdowns.less";
@import "../../vendors/bootstrap/less/navs.less";
@import "../../vendors/bootstrap/less/utilities.less";
@import "_FontasticToBoot.less";

4
dev/Styles/Main.less
View file

@ -11,7 +11,7 @@ html, body {
#rl-app {
-webkit-touch-callout: none;
font-size: @baseFontSize;
font-size: var(--main-font-size, 14px);
line-height: 1.15; /* 1 */
position: fixed;
top: 0;
@ -58,7 +58,7 @@ dialog::backdrop {
dialog {
border: 0;
background-color: @white;
background-color: var(--dialog-bg-clr, #fff);
border: 1px solid rgba(0,0,0,.3);
border-radius: 6px;
box-shadow: 0 5px 80px rgba(0,0,0,0.3);

5
dev/Styles/Ui.less
View file

@ -115,18 +115,17 @@ tr:hover .drag-handle {
border-radius: 4px 4px 0 0;
cursor: pointer;
grid-row-start: 1;
line-height: @baseLineHeight;
opacity: 0.6;
margin: 0 2px -1px 0;
padding: 5px;
text-align: center;
&:hover {
border-color: @grayLighter;
border-color: var(--tab-hover-border-clr, #eee);
opacity: 0.8;
}
}
.tabs > [id^="tab"]:checked + label {
background-color: @white;
background-color: var(--tab-active-bg-clr, #fff);
border-color: rgba(128,128,128,.5) rgba(128,128,128,.5) transparent rgba(128,128,128,.5);
opacity: 1;
z-index: 1;

9
dev/Styles/User/EmailAddresses.less
View file

@ -1,9 +1,10 @@
.emailaddresses {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
background-color: var(--input-bg-clr, #fff);
border: 1px solid var(--input-border-clr, #ccc);
border-radius: var(--input-border-radius, 3px);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-sizing: border-box;
color: var(--input-clr, #555);
cursor: text;
font-size: 90%;
list-style: none;
@ -15,7 +16,7 @@
}
.emailaddresses.emailaddresses-focused {
border: 1px solid darken(@inputBorder, 20%);
border-color: var(--input-focus-border-clr, #999);
box-shadow: none;
}

4
dev/Styles/User/FolderList.less
View file

@ -147,9 +147,9 @@
.b-folders-user a[data-unread]:not(.system)::after
{
content: attr(data-unread);
background-color: @grayLight;
background-color: var(--unread-count-bg-color, #999);
border-radius: 9px;
color: @white;
color: var(--unread-count-color, #fff);
font-size: 11px;
line-height: 19px;
margin-top: 5px;

2
dev/Styles/User/Layout.less
View file

@ -155,7 +155,7 @@ html.rl-side-preview-pane {
}
.dropdown.show {
box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
box-shadow: 0 0 1px var(--main-color, #333);
}
.btn.btn-transparent {

17
dev/Styles/_BootstrapFix.less
View file

@ -1,17 +1,11 @@
.legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 1.5;
color: @grayDark;
border: 0;
border-bottom: 1px solid var(--border-color, #ddd);
font-size: 150%;
line-height: 2.1;
margin-bottom: 1.43em;
}
summary.legend {
display: list-item;
cursor: pointer;
}
@ -21,15 +15,14 @@ summary.legend {
.alert a:not(.close) {
text-decoration: underline;
color: @warningText;
}
.alert.alert-info a:not(.close) {
color: @infoText;
color: var(--info-clr, #3a87ad);
}
.alert.alert-error a:not(.close) {
color: @errorText;
color: var(--error-clr, #b94a48);
}
/* mobile and tablet */

43
snappymail/v/0.0.0/themes/example.css
View file

@ -6,8 +6,22 @@
--main-bg-image: none; /* url("images/background.png"); */
--main-bg-size: auto;
--main-bg-repeat: repeat;
--main-font-size: 14px;
--link-color: #369;
--border-color: #ddd;
--hr-color: #eee;
--warning-clr: #c09853;
--warning-bg-clr: #fcf8e3;
--warning-border-clr: #fbeed5;
--error-clr: #b94a48;
--error-bg-clr: #f2dede;
--error-border-clr: #eed3d7;
--info-clr: #3a87ad;
--info-bg-clr: #d9edf7;
--info-border-clr: #bce8f1;
/* LOADING */
--loading-color: #000;
@ -42,6 +56,8 @@
--folders-hover-bg-color: false;
--folders-drop-color: #eee;
--folders-drop-bg-color: #333;
--unread-count-color: #fff;
--unread-count-bg-color: #333;
/* SETTINGS */
--settings-menu-color: #333;
@ -52,9 +68,32 @@
/* MESSAGE LIST */
--message-list-toolbar-bg-color: #eee;
--message-list-toolbar-gradient-start: none; /* #f4f4f4 */
--message-list-toolbar-gradient-end: none; /* #dfdfdf */
/* MESSAGE */
--message-bg-color: #fff;
/* DIALOGS */
--dialog-bg-clr: #fff;
/* FORMS */
--btn-clr: #333;
--btn-bg-clr: #fff;
--btn-border-clr: #fff;
--btn-success-bg-clr: #84AB04;
--btn-danger-bg-clr: #ee5f5b;
--input-clr: #555;
--input-bg-clr: #fff;
--input-border-clr: #ccc;
--input-border-radius: 3px;
--input-focus-border-clr: #999;
/* TABLES */
--tr-hover-bg-clr: #f5f5f5;
--tr-odd-bg-clr: #f9f9f9; /* when striped */
/* TABS */
--tab-active-bg-clr: #fff;
--tab-hover-border-clr: #eee;
}

24
vendors/bootstrap/less/alerts.less vendored
View file

@ -8,14 +8,14 @@
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight;
margin-bottom: 1.43em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
background-color: var(--warning-bg-clr, #fcf8e3);
border: 1px solid var(--warning-border-clr, #fbeed5);
border-radius: 4px;
color: @warningText;
color: var(--warning-clr, #c09853);
max-width: 800px;
min-height: @baseLineHeight;
min-height: 1.43em;
}
// Adjust close link position
@ -23,7 +23,7 @@
position: relative;
top: -2px;
right: -21px;
line-height: @baseLineHeight;
line-height: 1.43em;
}
@ -31,12 +31,12 @@
// -------------------------
.alert-error {
background-color: @errorBackground;
border-color: @errorBorder;
color: @errorText;
background-color: var(--error-bg-clr, #f2dede);
border-color: var(--error-border-clr, #eed3d7);
color: var(--error-clr, #b94a48);
}
.alert-info {
background-color: @infoBackground;
border-color: @infoBorder;
color: @infoText;
background-color: var(--info-bg-clr, #d9edf7);
border-color: var(--info-border-clr, #bce8f1);
color: var(--info-clr, #3a87ad);
}

14
vendors/bootstrap/less/buttons.less vendored
View file

@ -12,16 +12,16 @@
display: inline-block;
padding: 4px 12px;
line-height: @baseLineHeight;
line-height: 1.43em;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid @btnBorder;
border: 1px solid var(--btn-border-clr, #bbb);
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
color: @grayDark;
color: var(--btn-clr, #333);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @btnBackground;
background-color: var(--btn-bg-clr, #fff);
text-decoration: none;
// Hover state
@ -94,16 +94,16 @@
// Warning appears are orange
.btn-warning {
color: #fff;
background-color: @btnWarningBackground;
background-color: #fbb450;
}
// Danger and error appear as red
.btn-danger {
color: #fff;
background-color: @btnDangerBackground;
background-color: var(--btn-danger-bg-clr, #ee5f5b);
}
// Success appears as green
.btn-success {
background-color: @btnSuccessBackground;
background-color: var(--btn-success-bg-clr, #84AB04);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

2
vendors/bootstrap/less/close.less vendored
View file

@ -7,7 +7,7 @@
float: right;
font-size: 143%;
font-weight: bold;
line-height: @baseLineHeight;
line-height: 1.43em;
color: inherit;
cursor: pointer;
text-decoration: none;

4
vendors/bootstrap/less/code.less vendored
View file

@ -22,8 +22,8 @@ code {
// Blocks of code
pre {
display: block;
padding: (@baseLineHeight / 2);
margin: 0 0 (@baseLineHeight / 2);
padding: 0.715em;
margin: 0 0 0.715em;
white-space: pre-wrap;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;

10
vendors/bootstrap/less/dropdowns.less vendored
View file

@ -17,15 +17,15 @@
position: absolute;
top: 100%;
left: 0;
z-index: @zindexDropdown;
z-index: 1000;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
color: var(--dropdown-menu-color, inherit);
background-color: var(--dropdown-menu-bg-color, @dropdownBackground);
border: 1px solid @dropdownBorder;
background-color: var(--dropdown-menu-bg-color, #fff);
border: 1px solid rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-clip: padding-box;
@ -38,7 +38,7 @@
// Links within the dropdown menu
a {
background-color: var(--dropdown-menu-bg-color, #fff);
color: var(--dropdown-menu-color, @dropdownLinkColor);
color: var(--dropdown-menu-color, #333);
display: block;
padding: 3px 10px;
text-decoration: none;
@ -60,7 +60,7 @@
// Gray out text and ensure the hover state remains gray
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
color: @grayLight;
color: #999;
cursor: not-allowed;
opacity: 0.5;
}

44
vendors/bootstrap/less/forms.less vendored
View file

@ -8,14 +8,14 @@
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
margin: 0 0 1.43em;
}
// Identify controls by their labels
label {
display: block;
font-weight: normal;
line-height: @baseLineHeight;
line-height: 1.43em;
margin-bottom: 5px;
}
@ -27,8 +27,8 @@ select,
.select,
textarea {
font-family: inherit;
font-size: @baseFontSize;
line-height: @baseLineHeight;
font-size: var(--main-font-size, 14px);
line-height: 1.43em;
margin: 0;
text-transform: none;
}
@ -44,25 +44,26 @@ input {
box-sizing: border-box;
display: inline-block;
padding: 4px 6px;
color: @gray;
border-radius: @inputBorderRadius;
color: var(--input-clr, #555);
border-radius: var(--input-border-radius, 3px);
}
textarea,
input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
background-color: var(--input-bg-clr, #fff);
border: 1px solid var(--input-border-clr, #ccc);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border linear .2s, box-shadow linear .2s;
width: 210px;
// Focus state
&:focus {
border-color: darken(@inputBorder, 20%);
border-color: var(--input-focus-border-clr, #999);
box-shadow: none;
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
@ -83,8 +84,8 @@ select, .select {
// Safari requires -webkit-
-webkit-appearance: none;
appearance: none;
background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid @inputBorder;
background: var(--input-bg-clr, #fff) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid var(--input-border-clr, #ccc);
cursor: pointer;
padding-right: 1.5em;
width: 223px; // default input width + 10px of padding that doesn't get applied
@ -139,7 +140,22 @@ textarea[readonly] {
// Error
.control-group.error {
.formFieldState(@errorText, @errorText, @errorBackground);
> label {
color: var(--error-clr, #b94a48);
}
// Style inputs accordingly
input,
select,
textarea {
color: var(--error-clr, #b94a48);
border-color: var(--error-border-clr, #eed3d7);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
&:focus {
border-color: var(--error-clr, #b94a48);
// Write out in full since the lighten() function isn't easily escaped
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--error-border-clr, #eed3d7);
}
}
}
// HORIZONTAL FORMS
@ -161,7 +177,7 @@ textarea[readonly] {
// Margin to space out fieldsets
.control-group {
margin-bottom: (@baseLineHeight / 2);
margin-bottom: 0.715em;
}
// Horizontal-specific styles
@ -170,7 +186,7 @@ textarea[readonly] {
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
margin-bottom: 1.43em;
> label {
display: inline-block;

23
vendors/bootstrap/less/mixins.less vendored
View file

@ -29,29 +29,6 @@
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
> label {
color: @textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: @textColor;
border-color: @borderColor;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
// Write out in full since the lighten() function isn't easily escaped
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
}
}
}
// COMPONENT MIXINS
// --------------------------------------------------

22
vendors/bootstrap/less/navs.less vendored
View file

@ -1,22 +0,0 @@
//
// Navs
// --------------------------------------------------
// BASE CLASS
// ----------
.nav {
margin-left: 0;
margin-bottom: @baseLineHeight;
list-style: none;
}
// Make links block level
.nav > li > a {
display: block;
}
.nav > li > a:hover {
text-decoration: none;
background-color: @grayLighter;
}

15
vendors/bootstrap/less/tables.less vendored
View file

@ -9,19 +9,18 @@
// table {
.table {
max-width: 100%;
background-color: @tableBackground;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: @baseLineHeight;
margin-bottom: 1.43em;
// Cells
th,
td {
padding: 8px;
line-height: @baseLineHeight;
line-height: 1.43em;
text-align: left;
vertical-align: text-top;
border-top: 1px solid @tableBorder;
border-top: 1px solid var(--border-color, #ddd);
}
th {
font-weight: bold;
@ -45,12 +44,12 @@
// ----------------
.table-bordered {
border: 1px solid @tableBorder;
border: 1px solid var(--border-color, #ddd);
border-collapse: separate; // Done so we can round those corners!
border-radius: 4px;
th + th,
td + td {
border-left: 1px solid @tableBorder;
border-left: 1px solid var(--border-color, #ddd);
}
// Prevent a double border
colgroup + thead tr:first-child th,
@ -105,7 +104,7 @@
tbody {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: @tableBackgroundAccent;
background-color: var(--tr-odd-bg-clr, #f9f9f9);
}
}
}
@ -118,7 +117,7 @@
tbody {
tr:hover td,
tr:hover th {
background-color: @tableBackgroundHover;
background-color: var(--tr-hover-bg-clr, #f5f5f5);
}
}
}

31
vendors/bootstrap/less/type.less vendored
View file

@ -7,7 +7,7 @@
// -------------------------
p {
margin: (@baseLineHeight / 2) 0;
margin: 0.715em 0;
}
@ -33,7 +33,7 @@ cite {
h1, h2, h3, h4, h5, h6 {
line-height: 40px;
margin: (@baseLineHeight / 2) 0;
margin: 0.715em 0;
text-rendering: optimizelegibility; // Fix the character spacing for headings
}
h1 { font-size: 36px; }
@ -51,7 +51,7 @@ h4, h5, h6 { line-height: 20px; }
// Unordered and Ordered lists
ul, ol {
padding: 0;
margin: 0 0 (@baseLineHeight / 2) 25px;
margin: 0 0 0.715em 25px;
}
ul ul,
ul ol,
@ -60,7 +60,7 @@ ol ul {
margin-bottom: 0;
}
li {
line-height: @baseLineHeight;
line-height: 1.43em;
}
// MISC
@ -68,29 +68,18 @@ li {
// Horizontal rules
hr {
margin: @baseLineHeight 0;
margin: 1.43em 0;
border: 0;
border-bottom: 1px solid @hrBorder;
border-bottom: 1px solid var(--hr-color, #eee);
box-sizing: content-box;
height: 0;
}
// Abbreviations and acronyms
abbr[title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
text-decoration: none;
}
// Blockquotes
blockquote {
padding: 0 0 0 15px;
margin: 0 0 @baseLineHeight;
border-left: 5px solid @grayLighter;
p {
margin-bottom: 0;
line-height: (@baseLineHeight * 1.25);
}
margin: 0 0 1.43em;
border-left: 5px solid var(--border-color, #ddd);
}
// Quotes
@ -104,7 +93,7 @@ blockquote::after {
// Addresses
address {
display: block;
margin-bottom: @baseLineHeight;
margin-bottom: 1.43em;
font-style: normal;
line-height: @baseLineHeight;
line-height: 1.43em;
}

124
vendors/bootstrap/less/variables.less vendored
View file

@ -2,133 +2,9 @@
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Scaffolding
// -------------------------
@textColor: @grayDark;
// Links
// -------------------------
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
@baseFontSize: 14px;
@baseLineHeight: 1.43em;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: var(--border-color, #ddd); // table and cell border
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #bbb;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #84AB04;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(#f89406, 15%);
@btnWarningBackgroundHighlight: #f89406;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: 3px;
@formActionsBackground: #f5f5f5;
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @linkColor;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModal: 1101;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;