Merge pull request #11943 from nextcloud/buttons-round

Round off buttons 'pill style' like on the website

apps/files/css/files.scss

@@ -693,9 +693,6 @@ table.dragshadow td.size {
 .app-files .actions .button.new {
 	position: relative;
 }
-.app-files .actions .button.new .icon {
-	margin-bottom: 2px;
-}
 
 .breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {

core/css/css-variables.scss

@@ -35,6 +35,7 @@
 	--color-border-dark: $color-border-dark;
 	--border-radius: $border-radius;
 	--border-radius-large: $border-radius-large;
+	--border-radius-pill: $border-radius-pill;
 
 	--font-face: $font-face;
 }

core/css/guest.css

@@ -184,7 +184,7 @@ a.button {
 	margin: 5px;
 	padding: 11px 10px 9px;
 	outline: none;
-	border-radius: 3px;
+	border-radius: 3px; /* --border-radius */
 	-webkit-appearance: none;
 }
 input[type='submit'],
@@ -201,6 +201,7 @@ select {
 	font-weight: bold;
 	color: #555;
 	border: none;
+	border-radius: 100px; /* --border-radius-pill */
 	cursor: pointer;
 }
 input[type='text'],
@@ -233,13 +234,19 @@ input.update-continue {
 	padding: 10px 20px;
 	color: #666 !important;
 	display: inline-block;
-	border-radius: 3px;
+	border-radius: 100px; /* --border-radius-pill */
 	margin: 15px 5px;
 }
 .updateAnyways a.updateAnywaysButton:hover {
 	color: #222 !important;
 }
 
+/* Get rid of the inside dotted line in Firefox */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+}
+
 input.primary,
 button.primary,
 a.primary {
@@ -397,7 +404,7 @@ form .warning input[type='checkbox']+label {
 
 .two-factor-provider {
 	display: flex;
-	border-radius: 3px;
+	border-radius: 3px; /* --border-radius */
 	margin: 12px 0;
 	border: 1px solid transparent;
 	text-align: left;
@@ -432,7 +439,7 @@ form .warning input[type='checkbox']+label {
 	width: 100%;
 	padding: 10px;
 	margin: 0 0 5px 0;
-	border-radius: 3px;
+	border-radius: 100px; /* --border-radius-pill */
 	font-size: 20px;
 }
 .two-factor-primary {
@@ -489,7 +496,7 @@ form .warning input[type='checkbox']+label {
 	box-sizing: border-box;
 	background-color: #0082c9;
 	color: white;
-	border-radius: 3px;
+	border-radius: 100px; /* --border-radius-pill */
 }
 
 /* fixes for update page TODO should be fixed some time in a proper way */
@@ -575,7 +582,7 @@ form #selectDbType label.ui-state-active {
 	color: #fff;
 	text-align: left;
 	word-wrap: break-word;
-	border-radius: 10px;
+	border-radius: 10px; /* --border-radius-large */
 	cursor: default;
 	-moz-user-select: text;
 	-webkit-user-select: text;

core/css/header.scss

@@ -81,7 +81,7 @@
 	.header-right > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
-		border-radius: 0 0 3px 3px;
+		border-radius: 0 0 var(--border-radius) var(--border-radius);
 		box-sizing: border-box;
 		z-index: 2000;
 		position: absolute;
@@ -615,7 +615,7 @@ nav[role='navigation'] {
 		background-color: transparent;
 		color: var(--color-primary-text);
 		border: 0;
-		border-radius: var(--border-radius);
+		border-radius: var(--border-radius-pill);
 		height: 34px;
 		width: 0;
 		cursor: pointer;

core/css/inputs.scss

@@ -14,7 +14,7 @@
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
-	font-family: var(--font-face)
+	font-family: var(--font-face);
 }
 .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
 	font-family: var(--font-face) !important;
@@ -174,7 +174,9 @@ input[type='button'],
 input[type='submit'],
 input[type='reset'] {
 	font-weight: bold;
-	/* Get rid of the ugly firefox dotted line */
+	border-radius: var(--border-radius-pill);
+
+	/* Get rid of the inside dotted line in Firefox */
 	&::-moz-focus-inner {
 		border: 0;
 	}
@@ -662,7 +664,7 @@ input {
 		border: 1px solid var(--color-border-dark);
 		cursor: pointer;
 		position: relative;
-		border-radius: 3px;
+		border-radius: var(--border-radius);
 		height: 34px;
 		/* tag wrapper */
 		.multiselect__tags-wrap {
@@ -692,7 +694,7 @@ input {
 				border: 1px solid var(--color-border-dark);
 				display: inline-flex;
 				align-items: center;
-				border-radius: 3px;
+				border-radius: var(--border-radius);
 				/* require to override the default width
 				   and force the tag to shring properly */
 				min-width: 0;

core/css/publicshareauth.css

@@ -3,10 +3,13 @@ form fieldset {
 	flex-direction: column;
 }
 
+form fieldset > p {
+	position: relative;
+}
+
 #password {
-	margin-right: 0 !important;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
+	margin: 5px 0;
+	padding-right: 45px;
 	height: 45px;
 	box-sizing: border-box;
 	flex: 1 1 auto;
@@ -16,13 +19,10 @@ form fieldset {
 
 input[type='submit'],
 input[type='submit'].icon-confirm {
-	width: 45px;
+	position: absolute;
+	top: 0px;
+	right: -5px;
+	width: 45px !important;
 	height: 45px;
-	margin-left: 0 !important;
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
-fieldset > p {
-	display: inline-flex;
+	background-color: transparent !important;
 }

core/css/variables.scss

@@ -73,7 +73,9 @@ $color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%) !default;
 $border-radius: 3px !default;
-$border-radius-large: 10px;
+$border-radius-large: 10px !default;
+// Pill-style button, value is large so big buttons also have correct roundness
+$border-radius-pill: 100px !default;
 
 $font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;