Skip to content
This repository was archived by the owner on Nov 6, 2023. It is now read-only.

Introduce Modular CSS #19844

Merged
zoracon merged 2 commits into from
Dec 11, 2020
Merged

Introduce Modular CSS #19844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdae59f
Introduce modular CSS
zoracon Dec 10, 2020
7507562
Amedn typos
zoracon Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions chromium/pages/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
:root {
--https-blue: #0a84ff;
--darker-blue: #0060df;
--text-main: #000;
--text-secondary: #464646;
--light-grey: #ececec;
--space: 5px;
--font: 'Lucida Grande', 'Segoe UI', Tahoma, 'DejaVu Sans', Arial, sans-serif;
}

.button {
border: var(--https-blue) solid 1px;
color: var(--text-main);
display: block;
font-size: 12px;
font-weight: bold;
margin: var(--space) auto;
padding: 10px;
text-align: center;
text-decoration: none;
}

.button:hover {
background-color: var(--darker-blue);
color: #fff;
}
20 changes: 20 additions & 0 deletions chromium/pages/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
- Typography
- Elements
- Links
# Utilities
- Accessibility

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
@import "base.css";

/* Utilities - TBA
--------------------------------------------- */

10 changes: 5 additions & 5 deletions chromium/pages/options/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
<link href="style.css" rel="stylesheet">
</head>
<body>
<span class="section-header-span active" data-show="general-settings-wrapper" data-i18n="options_generalSettings"></span>
<span class="section-header-span inactive" data-show="advanced-settings-wrapper" data-i18n="options_advancedSettings"></span>
<span class="section-header-span inactive" data-show="update-channels-wrapper" data-i18n="options_updateChannels"></span>
<span class="button section-header-span active" data-show="general-settings-wrapper" data-i18n="options_generalSettings"></span>
<span class="button section-header-span inactive" data-show="advanced-settings-wrapper" data-i18n="options_advancedSettings"></span>
<span class="button section-header-span inactive" data-show="update-channels-wrapper" data-i18n="options_updateChannels"></span>

<div class="section-wrapper" id="general-settings-wrapper">
<div id="update-wrapper" class="settings-wrapper">
Expand All @@ -22,7 +22,7 @@
<div id="disabled-rules-wrapper">
<p class="disabled-rules-wrapper-header" data-i18n="options_disabledUrlsListed"></p>
<div id="add-disabled-site-wrapper">
<button id="add-disabled-site" data-i18n="options_addDisabledSite"></button>
<button class="button" id="add-disabled-site" data-i18n="options_addDisabledSite"></button>
<input type="text" id="disabled-site" />
</div>
<div id="add-disabled-site-invalid-host" data-i18n="options_hostNotFormattedCorrectly"></div>
Expand Down Expand Up @@ -50,7 +50,7 @@
<div class="clearer"></div>
<div id="update-channels-list"></div>
<div id="add-update-channel-wrapper">
<button id="add-update-channel" data-i18n="options_addUpdateChannel"></button>
<button class="button" id="add-update-channel" data-i18n="options_addUpdateChannel"></button>
<input type="text" id="update-channel-name" />
</div>
</div>
Expand Down
18 changes: 11 additions & 7 deletions chromium/pages/options/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
@import "../main.css";

body{
min-width: 500px;
min-height: 250px;
display: block;
font-family: var(--font);
}

@media (prefers-color-scheme: dark) {
Expand Down Expand Up @@ -106,20 +109,20 @@ img.remove{
}

.section-header-span{
font-size: 15px;
border: 0px;
border-radius: 13px;
padding: 8px;
margin-right: 10px;
display: inline-block;
}

.section-header-span.active{
background-color: #66ccff;
background-color: var(--darker-blue);
color: #FFF;
}

.section-header-span.inactive{
background-color: #ddd;
background-color: var(--light-grey);
}
.section-header-span.inactive:hover {
background-color: var(--darker-blue);
}

.update-channel{
Expand Down Expand Up @@ -172,8 +175,9 @@ div.update-channel-row-scope {

button#add-update-channel, button#add-disabled-site {
float: right;
height: 30px;
margin: 0px 10px 10px 10px;
border-radius: 7px;
padding: 6px;
}

input#update-channel-name, input#disabled-site {
Expand Down
26 changes: 1 addition & 25 deletions chromium/pages/popup/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
:root {
--https-blue: #0a84ff;
--darker-blue: #0060df;
--text-main: #000;
--text-secondary: #464646;
--light-grey: #ececec;
--space: 5px;
}
@import "../main.css";

body {
color: var(--text-secondary);
Expand Down Expand Up @@ -80,23 +73,6 @@ footer a.button {
border-bottom: var(--light-grey) solid 1px;
}

.button {
border: var(--https-blue) solid 1px;
color: var(--text-main);
display: block;
font-size: 12px;
font-weight: bold;
margin: var(--space) auto;
padding: 10px;
text-align: center;
text-decoration: none;
}

.button:hover {
background-color: var(--darker-blue);
color: #fff
}

.see_more__prompt {
color: var(--text-main);
cursor: pointer;
Expand Down