diff --git a/webroot/index2.html b/webroot/index2.html index 8f2c70227..59d44b4e0 100644 --- a/webroot/index2.html +++ b/webroot/index2.html @@ -66,7 +66,7 @@ }
- +

This Owncast stream requires Javascript to play. diff --git a/webroot/js/app2.js b/webroot/js/app2.js index 04ef2e5ac..551693292 100644 --- a/webroot/js/app2.js +++ b/webroot/js/app2.js @@ -332,7 +332,7 @@ export default class App extends Component { const tagList = !tags.length ? null : tags.map((tag, index) => html` -

  • ${tag}
    • +
  • ${tag}
    • `); const socialIconsList = @@ -350,26 +350,26 @@ export default class App extends Component { const streamInfoClass = streamOnline ? 'online' : ''; return ( html` -
    +
    -
    -

    +
    +

    - + - ${title} + ${title}

    -
    +
    <${UsernameForm} username=${username} userAvatarImage=${userAvatarImage} handleUsernameChange=${this.handleUsernameChange} /> - +

    @@ -377,21 +377,20 @@ export default class App extends Component {
    + >
    -
    +
    ${streamStatusMessage} ${viewerCount} ${pluralize('viewer', viewerCount)}. Max ${pluralize('viewer', sessionMaxViewerCount)}. @@ -399,47 +398,45 @@ export default class App extends Component {
    -
    -
    +
    +
    + src=${largeLogo}/>
    -

    - About - ${streamerName} +

    + About ${streamerName}

    -
    -
    - +
    + About Owncast - Version ${appVersion} + Version ${appVersion}
    -
    + <${Chat} websocket=${websocket} diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js index c42eea08d..0a8d3717f 100644 --- a/webroot/js/chat/chat-input.js +++ b/webroot/js/chat/chat-input.js @@ -236,11 +236,11 @@ export default class ChatInput extends Component { const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage); return ( html` -
    +
    <${ContentEditable} id="message-input" - class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white" + class="appearance-none block w-full bg-gray-200 text-sm text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white h-20 overflow-auto" placeholderText=${placeholderText} innerRef=${this.formMessageInput} @@ -254,13 +254,14 @@ export default class ChatInput extends Component { onPaste=${this.handlePaste} /> -
    +
    ${inputWarning} -
    +
    + - +
    `); diff --git a/webroot/js/emoji.js b/webroot/js/emoji.js deleted file mode 100644 index 23a212828..000000000 --- a/webroot/js/emoji.js +++ /dev/null @@ -1,43 +0,0 @@ -// DEPRECATE. -import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button' - -fetch('/emoji') - .then(response => { - if (!response.ok) { - throw new Error(`Network response was not ok ${response.ok}`); - } - return response.json(); - }) - .then(json => { - setupEmojiPickerWithCustomEmoji(json); - }) - .catch(error => { - this.handleNetworkingError(`Emoji Fetch: ${error}`); - }); - -function setupEmojiPickerWithCustomEmoji(customEmoji) { - const picker = new EmojiButton({ - zIndex: 100, - theme: 'dark', - custom: customEmoji, - initialCategory: 'custom', - showPreview: false, - position: { - top: '50%', - right: '100' - } - }); - const trigger = document.querySelector('#emoji-button'); - - trigger.addEventListener('click', () => picker.togglePicker(picker)); - - picker.on('emoji', emoji => { - if (emoji.url) { - const url = location.protocol + "//" + location.host + "/" + emoji.url; - const name = url.split('\\').pop().split('/').pop(); - document.querySelector('#message-body-form').innerHTML += "\"""; - } else { - document.querySelector('#message-body-form').innerHTML += emoji.emoji; - } - }); -} diff --git a/webroot/js/social.js b/webroot/js/social.js index ec37ad558..dc46920a2 100644 --- a/webroot/js/social.js +++ b/webroot/js/social.js @@ -1,76 +1,6 @@ import { html } from "https://unpkg.com/htm/preact/index.mjs?module"; - -const SOCIAL_PLATFORMS = { - default: { - name: "default", - imgPos: [0,0], // [row,col] - }, - - facebook: { - name: "Facebook", - imgPos: [0,1], - }, - twitter: { - name: "Twitter", - imgPos: [0,2], - }, - instagram: { - name: "Instagram", - imgPos: [0,3], - }, - snapchat: { - name: "Snapchat", - imgPos: [0,4], - }, - tiktok: { - name: "TikTok", - imgPos: [0,5], - }, - soundcloud: { - name: "Soundcloud", - imgPos: [0,6], - }, - bandcamp: { - name: "Bandcamp", - imgPos: [0,7], - }, - patreon: { - name: "Patreon", - imgPos: [0,1], - }, - youtube: { - name: "YouTube", - imgPos: [0,9 ], - }, - spotify: { - name: "Spotify", - imgPos: [0,10], - }, - twitch: { - name: "Twitch", - imgPos: [0,11], - }, - paypal: { - name: "Paypal", - imgPos: [0,12], - }, - github: { - name: "Github", - imgPos: [0,13], - }, - linkedin: { - name: "LinkedIn", - imgPos: [0,14], - }, - discord: { - name: "Discord", - imgPos: [0,15], - }, - mastodon: { - name: "Mastodon", - imgPos: [0,16], - }, -}; +import { SOCIAL_PLATFORMS } from './utils/social.js'; +import { classNames } from './utils.js'; export default function SocialIcon(props) { const { platform, url } = props; @@ -82,20 +12,28 @@ export default function SocialIcon(props) { const name = inList ? platformInfo.name : platform; const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`; - const itemClass = { + const itemClass = classNames({ "user-social-item": true, "flex": true, + "justify-start": true, + "items-center": true, + "-mr-1": true, "use-default": !inList, - }; - const labelClass = { + }); + const labelClass = classNames({ "platform-label": true, "visually-hidden": inList, "text-indigo-800": true, - }; + "text-xs": true, + "uppercase": true, + "max-w-xs": true, + "inline-block": true, + }); + return ( html` - + Find me on ${name} `); diff --git a/webroot/js/utils.js b/webroot/js/utils.js index da32a79db..2be01ff7f 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -98,7 +98,7 @@ export function hasTouchScreen() { export function generateAvatar(hash) { const avatarSource = 'https://robohash.org/'; const optionSize = '?size=80x80'; - const optionSet = '&set=set3'; + const optionSet = '&set=set2'; const optionBg = ''; // or &bgset=bg1 or bg2 return avatarSource + hash + optionSize + optionSet + optionBg; @@ -133,3 +133,17 @@ export function setVHvar() { export function doesObjectSupportFunction(object, functionName) { return typeof object[functionName] === "function"; } + +// return a string of css classes +export function classNames(json) { + const classes = []; + + Object.entries(json).map(function(item) { + const [ key, value ] = item; + if (value) { + classes.push(key); + } + return null; + }); + return classes.join(' '); +} diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js index 49ea94925..067af1c50 100644 --- a/webroot/js/utils/chat.js +++ b/webroot/js/utils/chat.js @@ -28,7 +28,7 @@ export function formatMessageText(message, username) { function highlightUsername(message, username) { const pattern = new RegExp('@?' + username.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'); - return message.replace(pattern, '$&'); + return message.replace(pattern, '$&'); } function linkify(text, rawText) { @@ -126,8 +126,7 @@ function getInstagramEmbedFromURL(url) { function isImage(url) { const re = /\.(jpe?g|png|gif)$/i; - const isImage = re.test(url); - return isImage; + return re.test(url); } function getImageForURL(url) { diff --git a/webroot/js/utils/social.js b/webroot/js/utils/social.js new file mode 100644 index 000000000..dad57a546 --- /dev/null +++ b/webroot/js/utils/social.js @@ -0,0 +1,73 @@ + +// x, y pixel psitions of /img/social.gif image. +export const SOCIAL_PLATFORMS = { + default: { + name: "default", + imgPos: [0,0], // [row,col] + }, + + facebook: { + name: "Facebook", + imgPos: [0,1], + }, + twitter: { + name: "Twitter", + imgPos: [0,2], + }, + instagram: { + name: "Instagram", + imgPos: [0,3], + }, + snapchat: { + name: "Snapchat", + imgPos: [0,4], + }, + tiktok: { + name: "TikTok", + imgPos: [0,5], + }, + soundcloud: { + name: "Soundcloud", + imgPos: [0,6], + }, + bandcamp: { + name: "Bandcamp", + imgPos: [0,7], + }, + patreon: { + name: "Patreon", + imgPos: [0,1], + }, + youtube: { + name: "YouTube", + imgPos: [0,9 ], + }, + spotify: { + name: "Spotify", + imgPos: [0,10], + }, + twitch: { + name: "Twitch", + imgPos: [0,11], + }, + paypal: { + name: "Paypal", + imgPos: [0,12], + }, + github: { + name: "Github", + imgPos: [0,13], + }, + linkedin: { + name: "LinkedIn", + imgPos: [0,14], + }, + discord: { + name: "Discord", + imgPos: [0,15], + }, + mastodon: { + name: "Mastodon", + imgPos: [0,16], + }, +}; diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index 18e026409..f308a29b4 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -1,28 +1,58 @@ +#chat-container { + position: fixed; + z-index: 9; + top: var(--header-height); + right: 0; + width: var(--right-col-width); + + height: calc(100vh - var(--header-height)); + + /* overflow: hidden; */ + /* display: flex; + flex-direction: column; + justify-content: flex-end; */ +} + +.touch-screen #chat-container { + height: calc(100vh - var(--header-height) - 3vh); +} + + +.no-chat #chat-container-wrap { + display: none; +} + +.chat #chat-container-wrap { + display: block; +} + + #messages-container { - overflow: auto; - padding: 1em 0; + /* overflow: auto; + padding: 1em 0; */ } #message-input-container { - width: 100%; - padding: 1em; + /* width: 100%; */ + /* padding: 1em; */ } /******************************/ /******************************/ #message-input { - height: 5rem; - font-size: .85em; + /* height: 5rem; */ + /* font-size: .85em; */ } #message-input img { display: inline; vertical-align: middle; - padding: 5px; + padding: .25rem; } #message-input .emoji { - width: 2.2em; + width: 2.2rem; + padding: .25rem; } @@ -61,23 +91,23 @@ #message-form-actions { - flex-direction: row; + /* flex-direction: row; justify-content: space-between; align-items: center; - width: 100%; + width: 100%; */ } #message-form-actions-buttons { - flex-direction: row; + /* flex-direction: row; justify-content: flex-end; - align-items: center; + align-items: center; */ } /* Emoji picker button */ #emoji-button { - font-size: 1.75em; - cursor: pointer; - margin-right: .5em; + /* font-size: 1.75em; */ + /* cursor: pointer; + margin-right: .5em; */ } .emoji-picker__emoji { border-radius: 10px; @@ -85,11 +115,13 @@ .message { - padding: .85em; - align-items: flex-start; + /* padding: .85em; */ + /* align-items: flex-start; */ } .message-avatar { - margin-right: .75em; + height: 3.0em; + width: 3.0em; + /* margin-right: .75em; */ } .message-avatar img { max-width: unset; @@ -99,17 +131,17 @@ } .message-content { - font-size: .85em; + /* font-size: .85em; */ max-width: 85%; - word-wrap: break-word; + /* word-wrap: break-word; */ } -/* MESSAGE TEXT CONTENT */ -/* MESSAGE TEXT CONTENT */ -/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT HTML */ +/* MESSAGE TEXT HTML */ +/* MESSAGE TEXT HTML */ .message-text a { color: #7F9CF5; /* indigo-400 */ } @@ -119,41 +151,43 @@ .message-text img { display: inline; - padding-left: 5px; - padding-right: 5px; + padding-left: 0 .25rem; +} + + + +.message-text .emoji { + width: 3rem; + padding: .25rem } .message-text code { + font-family: monospace; background-color:darkslategrey; - padding: 3px; + padding: .25rem; } -.message-text .emoji { - width: 60px; -} - - .message-text iframe { width: 100%; - height: 170px; - border-radius: 15px; + height: 12rem; + border-radius: 1rem; } .message-text .instagram-embed { - height: 314px; + height: 22em; } .message-text .embedded-image { width: 100%; - height: 170px; - border-radius: 15px; + display: block; + height: 15rem; + border-radius: 1rem; } .message-text .highlighted { - color: orange; + /* color: orange; font-weight: 400; - font-size: 14px; -} +} */ /* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */ diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index ca914b538..56474415c 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -39,90 +39,90 @@ a:hover { } #app-container { - width: 100%; + /* width: 100%; flex-direction: column; justify-content: flex-start; - position: relative; + position: relative; */ } header { - position: fixed; - width: 100%; + /* position: fixed; + width: 100%; */ height: var(--header-height); - top: 0; - left: 0; + /* top: 0; + left: 0; */ background-color: var(--header-bg-color); - z-index: 10; - flex-direction: row; - justify-content: space-between; - flex-wrap: nowrap; + /* z-index: 10; */ + /* flex-direction: row; + justify-content: space-between; */ + /* flex-wrap: nowrap; */ } header h1 { - font-size: 1.25em; - font-weight: 100; - letter-spacing: 1.2; - text-transform: uppercase; - padding: .5em; - white-space: nowrap; - justify-content: flex-start; + /* font-size: 1.25em; */ + /* font-weight: 100; + letter-spacing: 1.2; */ + /* text-transform: uppercase; */ + /* padding: .5em; */ + /* white-space: nowrap; */ + /* justify-content: flex-start; align-items: center; - flex-direction: row; - overflow: hidden; + flex-direction: row; */ + /* overflow: hidden; */ } #logo-container{ - height: 1.75em; - width: 1.75em; - min-height: 1.75em; - min-width: 1.75em; - margin-right: .5em; - display: inline-block; - background-repeat: no-repeat; - background-position: center center; + /* height: 1.75em; + width: 1.75em; */ + /* min-height: 1.75em; + min-width: 1.75em; */ + /* margin-right: .5em; */ + /* display: inline-block; */ + /* background-repeat: no-repeat; */ + /* background-position: center center; */ background-size: 1.35em; } header .instance-title { - overflow: hidden; - text-overflow: ellipsis; + /* overflow: hidden; + text-overflow: ellipsis; */ } #chat-toggle { - cursor: pointer; - text-align: center; - height: 100%; - min-width: 3em; - justify-content: center; - align-items: center; + /* cursor: pointer; + text-align: center; */ + /* height: 100%;*/ + min-width: 3rem; +/* justify-content: center; + align-items: center; */ } footer { - flex-direction: row; + /* flex-direction: row; justify-content: flex-start; font-size: .75em; padding: 2em; - opacity: .5; + opacity: .5; */ } footer span { - display: inline-block; - margin: 0 1em; + /* display: inline-block; + margin: 0 1em; */ } /* ************************************************8 */ #stream-info { - padding: .5em 2em; - text-align: center; + /* padding: .5em 2em; */ + /* text-align: center; width: 100%; flex-direction: row; - justify-content: space-between; + justify-content: space-between; */ } #stream-info span { - font-size: .7em; + /* font-size: .7em; */ } .user-content { - padding: 2em; + /* padding: 2em; */ } /* #user-content { display: block; @@ -141,73 +141,73 @@ footer span { height: 100%; } */ .stream-summary { - margin: 1em 0; + /* margin: 1em 0; */ } h2 { - font-size: 3em; + /* font-size: 3em; */ } /* ************************************************8 */ #user-options-container { - flex-direction: row; + /* flex-direction: row; justify-content: flex-end; align-items: center; - flex-wrap: nowrap; + flex-wrap: nowrap; */ } #user-info-display { - display: flex; + /* display: flex; flex-direction: row; justify-content: flex-end; align-items: center; cursor: pointer; padding: .5em 1em; overflow: hidden; - width: 100%; + width: 100%; */ } #username-avatar { - height: 2.1em; + /* height: 2.1em; width: 2.1em; - margin-right: .5em; + margin-right: .5em; */ } #username-display { - font-weight: 600; - font-size: .75em; - white-space: nowrap; + /* font-weight: 600; */ + /* font-size: .75em; */ + /* white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + overflow: hidden; */ } #user-info-display:hover { - transition: opacity .2s; - opacity: .75; + /* transition: opacity .2s; + opacity: .75; */ } #user-info-change { display: none; - justify-content: flex-end; + /* justify-content: flex-end; align-items: center; - padding: .25em; + padding: .25em; */ } #username-change-input { - font-size: .75em; + /* font-size: .75em; */ } #button-update-username { - font-size: .65em; - text-transform: uppercase; - height: 2.5em; + /* font-size: .65em; */ + /* text-transform: uppercase; */ + /* height: 2.5em; */ } #button-cancel-change { - cursor: pointer; - height: 2.5em; - font-size: .65em; + /* cursor: pointer; */ + /* height: 2.5em; */ + /* font-size: .65em; */ } .user-btn { - margin: 0 .25em; + /* margin: 0 .25em; */ } /* ************************************************8 */ @@ -260,16 +260,10 @@ h2 { /* ************************************************8 */ -.no-chat #chat-container-wrap { - display: none; -} .no-chat footer { justify-content: center; } -.chat #chat-container-wrap { - display: block; -} .chat #video-container, .chat #stream-info, @@ -278,23 +272,6 @@ h2 { } -#chat-container { - position: fixed; - z-index: 9; - top: var(--header-height); - right: 0; - width: var(--right-col-width); - - height: calc(100vh - var(--header-height)); - - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: flex-end; -} -.touch-screen #chat-container { - height: calc(100vh - var(--header-height) - 3vh); -} diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css index 32a4d99b4..b2671a503 100644 --- a/webroot/styles/user-content.css +++ b/webroot/styles/user-content.css @@ -1,71 +1,71 @@ .user-content { - padding: 3em; + /* padding: 3rem; */ - display: flex; - flex-direction: row; + /* display: flex; + flex-direction: row; */ } .user-content .user-image { - padding: 1em; - margin-right: 2em; + /* padding: 1rem; + margin-right: 2rem; */ min-width: var(--user-image-width); width: var(--user-image-width); height: var(--user-image-width); max-height: var(--user-image-width); - background-repeat: no-repeat; - background-position: center center; + /* background-repeat: no-repeat; + background-position: center center; */ background-size: calc(var(--user-image-width) - 1em); } .user-content-header { - margin-bottom: 2em; + /* margin-bottom: 2rem; */ } .tag-list { - flex-direction: row; - margin: 1em 0; + /* flex-direction: row; */ + /* margin: 1em 0; */ } .tag-list li { - font-size: .75em; - text-transform: uppercase; - margin-right: .75em; - padding: .5em; + /* font-size: .75rem; */ + /* text-transform: uppercase; */ + /* margin-right: .75rem; */ + /* padding: .5rem; */ } .social-list { - flex-direction: row; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; + /* flex-direction: row; */ + /* align-items: center; */ + /* justify-content: flex-start; */ + /* flex-wrap: wrap; */ } .social-list .follow-label { - font-weight: bold; - font-size: .75em; - margin-right: .5em; - text-transform: uppercase; + /* font-weight: bold; */ + /* font-size: .75rem; */ + /* margin-right: .5rem; */ + /* text-transform: uppercase; */ } .user-social-item { - display: flex; + /* display: flex; justify-content: flex-start; align-items: center; - margin-right: -.25em; + margin-right: -.25rem; */ } .user-social-item .platform-icon { --icon-width: 40px; height: var(--icon-width); width: var(--icon-width); background-image: url(/img/social-icons.gif); - background-repeat: no-repeat; + /* background-repeat: no-repeat; */ background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width)); transform: scale(.65); } .user-social-item.use-default .platform-label { - font-size: .7em; - text-transform: uppercase; - display: inline-block; - max-width: 10em; + /* font-size: .7rem; */ + /* text-transform: uppercase; */ + /* display: inline-block; */ + /* max-width: 10rem; */ } @@ -75,124 +75,134 @@ Assumes markup converted from markdown input. */ #extra-user-content { - padding: 1em 3em 3em 3em; + /* padding: 1rem 3rem 3rem 3rem; */ +} + +#extra-user-content ul, +#extra-user-content ol { + margin: 0; + padding: 0; } #extra-user-content ol { list-style: decimal; + margin-left: 1.5rem; } #extra-user-content ul { list-style: unset; + margin-left: 1.5rem; } -#extra-user-content h1, +/* #extra-user-content h1, #extra-user-content h2, #extra-user-content h3, #extra-user-content h4 { color: #111111; font-weight: 400; -} +} */ #extra-user-content h1, #extra-user-content h2, #extra-user-content h3, #extra-user-content h4, #extra-user-content h5, -#extra-user-content p { - margin-bottom: 24px; +#extra-user-content h6 { + margin: 0; padding: 0; + margin: 1.5rem 0 .5rem; + font-weight: 600; + line-height: 1.2; } + + #extra-user-content h1 { - font-size: 48px; + font-size: 2.1rem; } #extra-user-content h2 { - font-size: 36px; - margin: 24px 0 6px; + font-size: 1.8rem; } #extra-user-content h3 { - font-size: 24px; + font-size: 1.5rem; } #extra-user-content h4 { - font-size: 21px; + font-size: 1.2rem; } #extra-user-content h5 { - font-size: 18px; + font-size: 1.25rem; +} +#extra-user-content h6 { + font-weight: 400; + font-size: 1rem; +} + +#extra-user-content p { + margin-top: 0; + margin-bottom: 1rem; } #extra-user-content a { color: #0099ff; - margin: 0; - padding: 0; - vertical-align: baseline; -} - -#extra-user-content ul, #extra-user-content ol { - padding: 0; - margin: 0; } #extra-user-content li { - line-height: 24px; + line-height: 1.5rem; } -#extra-user-content li ul, #extra-user-content li ul { - margin-left: 24px; } - -#extra-user-content p, #extra-user-content ul, #extra-user-content ol { - font-size: 16px; - line-height: 24px; - +#extra-user-content li ul, +#extra-user-content li ul { + margin-left: 1.5rem; } -#extra-user-content pre { - padding: 0px 24px; - max-width: 800px; - white-space: pre-wrap; + + +#extra-user-content blockquote { + border-left: .25rem solid #bbc; + padding: 0 1rem; +} +#extra-user-content blockquote p { + margin: 1rem 0; } +#extra-user-content pre, #extra-user-content code { - font-family: Consolas, Monaco, Andale Mono, monospace; - line-height: 1.5; - font-size: 13px; + font-family: monospace; + font-size: .85rem; + background-color: #eee; + color: #900; +} +#extra-user-content pre { + margin: 1rem 0; + padding: 1rem; + max-width: 80%; + white-space: pre-wrap; } #extra-user-content aside { display: block; float: right; - width: 390px; -} - -#extra-user-content blockquote { - margin: 1em 2em; - max-width: 476px; -} - -#extra-user-content blockquote p { - color: #666; - max-width: 460px; + width: 35%; } #extra-user-content hr { - width: 540px; - text-align: left; - margin: 0 auto 0 0; - color: #999; + width: 100%; + border-top: 1px solid #666; + margin-bottom: 1rem; } #extra-user-content table { border-collapse: collapse; - margin: 1em 1em; + margin: 1em 1rem; border: 1px solid #CCC; } #extra-user-content table thead { - background-color: #EEE; + background-color: #eee; } #extra-user-content table thead td { @@ -200,6 +210,6 @@ Assumes markup converted from markdown input. } #extra-user-content table td { - padding: 0.5em 1em; + padding: 0.5rem 1rem; border: 1px solid #CCC; }