From 076a7f1f779277c187003dbd78a73f1302e6d717 Mon Sep 17 00:00:00 2001 From: "DESKTOP-DNMRE55\\Eric Liang" Date: Wed, 12 Sep 2018 22:00:42 -0700 Subject: [PATCH] Added basic UI styles to DistractMeNot popup. --- popup.html | 12 ++++++------ style.css | 41 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/popup.html b/popup.html index ec9d2e0..06e7bc2 100644 --- a/popup.html +++ b/popup.html @@ -20,19 +20,19 @@

DistractMeNot

- To get started, simply just type in a URL with (http or https) and hit [Enter] or click "Add". + To get started, simply type in a URL with (http or https) and hit [Enter] or click "Add". Once you make an update to your tab, the program will start working.

-
- - + + +
- + - + diff --git a/style.css b/style.css index 27cd55d..d19621d 100644 --- a/style.css +++ b/style.css @@ -23,7 +23,7 @@ a { } p { - font-size: 0.875rem; + font-size: 0.857142857rem; line-height: 1.6; } @@ -31,3 +31,42 @@ p { display: flex; flex-direction: row; } + +.flex-column { + display: flex; + flex-direction: column; +} + +h1 { + color: #333; +} + +.btn-primary { + color: #fff; + background-color: #0288D1; + padding: 10px 25px; + border: 0px; + border-radius: 5px; +} + +input::placeholder { + color: #ccc; + font-size: 0.857142857rem; + font-style: italic; + opacity: 1; /* Firefox */ +} + +input[type = "url"] { + font-size: 1rem; + background-color: #f2f2f2; + padding: 5px; + border: 0px; +} + +.toggle-activation-wrapper { + margin: 3% 0; +} + +footer { + text-align: center; +}