summaryrefslogtreecommitdiff
path: root/data/extensions/https-everywhere@eff.org/pages/popup/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'data/extensions/https-everywhere@eff.org/pages/popup/style.css')
-rw-r--r--data/extensions/https-everywhere@eff.org/pages/popup/style.css333
1 files changed, 267 insertions, 66 deletions
diff --git a/data/extensions/https-everywhere@eff.org/pages/popup/style.css b/data/extensions/https-everywhere@eff.org/pages/popup/style.css
index 0d3b805..6207daa 100644
--- a/data/extensions/https-everywhere@eff.org/pages/popup/style.css
+++ b/data/extensions/https-everywhere@eff.org/pages/popup/style.css
@@ -1,116 +1,296 @@
-html {
- background-color: #fff
+:root {
+ --https-blue: #0a84ff;
+ --darker-blue: #0060df;
+ --text-main: #000;
+ --text-secondary: #464646;
+ --light-grey: #ececec;
+ --space: 5px;
}
body {
- cursor: default;
- margin-left: 1em;
- margin-right: 1em;
- margin-top: 0;
- margin-bottom: 0;
- min-width: 23em;
+ color: var(--text-secondary);
font-family: 'Lucida Grande', 'Segoe UI', Tahoma, 'DejaVu Sans', Arial, sans-serif;
- font-size: 75%;
- color: #303942;
+ margin: 0;
+ max-width: 400px;
+ min-width: 380px;
}
-p {
- line-height: 1.8em;
+header {
+ background-color: var(--light-grey);
+ color: var(--text-main);
+ display: flex;
+ padding: var(--space);
}
-h1, h2, h3 {
- user-select: none;
- font-weight: normal;
- line-height: 1;
+header h1 {
+ font-size: 2em;
+}
+
+header .logo-container {
+ margin: var(--space);
+ width: 85%;
+}
+
+header .logo-container img {
+ width: 100%;
+}
+
+header small {
+ color: #000;
+ display: block;
+ font-size: .70em;
+ font-weight: bold;
+ margin: 1%;
+ width: 100%;
}
h1 {
- font-size: 1.5em;
+ font-size: 16px;
+ margin: var(--space) auto
}
h2 {
- font-size: 1.3em;
- margin-bottom: 0.4em;
+ clear: both;
+ font-size: 12px;
+ font-weight: normal;
+ margin: 0;
}
h3 {
- color: black;
- font-size: 1.2em;
- margin-bottom: 0.8em;
+ font-size: 16px;
}
-a {
- color: #15c;
- text-decoration: underline;
+h1,
+h2 {
+ color: var(--text-main);
}
-a:active {
- color: #052577;
+footer {
+ display: inline-flex;
+ margin: var(--space);
}
-/* Don't wrap text for important stuff. */
-h1, h2, h3, .rule > label {
- white-space: nowrap;
+footer a.button {
+ margin: var(--space);
}
-/* Hide rules & options if the extension is off. */
-.disabled #RuleManagement,.disabled #HttpNowhere {
- display: none;
+/* Elements */
+.settings_block {
+ display: inline-block;
+ padding: 5px 1em 20px 1em;
+ border-bottom: var(--light-grey) solid 1px;
}
-/* Initially hide section (until rules get added). */
-section.rules {
- display: none;
+.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;
+ font-size: 12px;
+ float: right;
+ margin: 5px 0;
+}
+
+.see_more__arrow {
+ border: solid var(--darker-blue);
+ border-width: 0 3px 3px 0;
+ float: right;
+ margin-left: 10px;
+ margin-top: 3px;
+ padding: 3px;
+}
+
+.see_more__content.show p {
+ font-size: 12px;
+ margin: 10px 0;
+}
+
+.down {
+ transform: rotate(45deg);
+}
+
+.up {
+ transform: rotate(-135deg);
+}
+
+input[type=checkbox] {
+ opacity: 0;
+}
+
+label {
+ background: grey;
+ border-radius: 25px;
+ color: var(--text-main);
+ cursor: pointer;
+ display: block;
+ float: right;
+ font-weight: bold;
+ height: 30px;
+ position: relative;
+ text-indent: -400px;
+ width: 50px;
+}
+
+label:after {
+ background: #fff;
+ border-radius: 90px;
+ content: '';
+ height: 20px;
+ left: 5px;
+ position: absolute;
+ top: 5px;
+ transition: 0.3s; /* Acts on transform below */
+ width: 20px;
+}
+input:checked+label {
+ background: var(--https-blue);
+}
+/* position when checked*/
+input:checked+label:after {
+ left: calc(100% - 5px);
+ transform: translateX(-100%);
+}
+
+.label_nontoggle {
+ background: none;
+ border-radius: 0;
+ color: var(--text-main);
+ display: block;
+ font-weight: normal;
+ height: inherit;
+ position: relative;
+ text-indent: 0;
+ width: auto;
+}
+
+.label_nontoggle:after {
+ background: none;
+ border-radius: 0;
+ content: none;
+ height: auto;
+ left: initial;
+ position: relative;
+ top: initial;
+ transition: none;
+ width: auto;
+}
+
+/* Specific rules */
+.rule.checkbox {
+ clear: both;
+ margin: 5% auto;
+}
+
+.rule.checkbox .remove {
+ float: left;
}
-.rule {
+.rule.checkbox label {
+ font-size: 12px;
+ font-weight: normal;
height: 25px;
+ text-indent: -285px;
+ width: 40px;
+}
+.rule.checkbox label:after {
+ border-radius: 20px;
+ height: 15px;
+ width: 15px;
}
-.rule label {
- padding: 0;
- max-width: 93%;
- overflow: hidden;
+#disable-on-this-site {
+ clear: both;
+}
+
+#disableButton {
+ display: block;
+}
+
+#HttpNowhere h1,
+#disableButton h1 {
+ float: left;
+}
+
+#RuleManagement {
+ padding: 5px 1em 10px 1em;
}
-/* Underline rules that have notes. */
-.rule[title] span {
- border-bottom: 1px dotted;
- cursor: help;
+#settingsForThisSite h1 {
+ float: left;
}
-input[type='checkbox'] {
- vertical-align: middle;
+#addRuleSection label,
+#addRuleSection button {
+ font-size: 14px;
+ width: 100%;
}
-.rule img.remove {
+#addRuleSection input {
+ background: #fff;
+ border: 1px solid #000;
float: right;
+ margin: 5px auto;
+ padding: 5px;
+ width: 95%;
}
-header {
- border-bottom: 1px solid #eee;
+#new-rule-advanced,
+#new-rule-regular-text {
+ margin-top: 40px;
}
-header > h1 {
- margin: 0;
- padding: 21px 0 13px;
+#HttpNowhere {
+ display: block;
+ padding: 5px 1em;
}
-section {
- padding-left: 18px;
- padding-top: 9px;
- padding-bottom: 9px;
+#StableRules h3 {
+ float: left;
+ margin-left: 10px;
+}
+#StableRules h2 {
+ margin-left: 10px;
+}
+#StableRules #RuleManagement--counter {
+ background: var(--darker-blue);
+ border-radius: 20px;
+ color: #fff;
+ display: block;
+ float: right;
+ font-size: 12px;
+ font-weight: bold;
+ height: 15px;
+ margin-top: 10px;
+ margin-right: 55%;
+ padding: 5px;
+ text-align: center;
+ width: 15px;
}
-section > h3 {
- margin-left: -18px;
+/* Event based */
+.see_more--clarified {
+ font-size: 12px;
}
-footer {
- border-top: 1px solid #eee;
- margin-top: 8px;
- padding-top: 8px;
- padding-bottom: 8px;
+/* Hide rules & options if the extension is off. */
+.disabled #RuleManagement,
+.disabled #HttpNowhere {
+ display: none;
}
/* By default the "Add a rule" link is hidden. It's shown on HTTPS sites only. */
@@ -118,11 +298,32 @@ footer {
display: none;
}
-#rulesets-versions{
+#rulesets-versions {
display: block;
clear: both;
}
-.rulesets-version{
+.rulesets-version {
display: block;
}
+
+/* Initially hide section (until rules get added). */
+section.rules {
+ display: none;
+}
+
+/* For "see more" content */
+.hide {
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+ transition: 0s;
+ visibility: hidden;
+}
+
+.show {
+ clear: both;
+ opacity: 1;
+ transition: visibility 0s linear 0s, opacity 300ms;
+ visibility: visible;
+}
home website